From 504b40c8e070d63a05d68dbb1830e9d468888adc Mon Sep 17 00:00:00 2001 From: luca Date: Sat, 19 Aug 2023 17:57:39 +0800 Subject: [PATCH 1/7] restructure folders in nft example --- examples/nft/components/base/index.ts | 1 - .../{base/buttons.tsx => common/Buttons.tsx} | 0 .../{features.tsx => common/Footer.tsx} | 71 ++++++++-- examples/nft/components/common/Header.tsx | 59 ++++++++ examples/nft/components/common/Layout.tsx | 19 +++ examples/nft/components/common/index.ts | 2 + examples/nft/components/index.tsx | 3 +- .../{mint/hero.tsx => mint-nfts/Hero.tsx} | 2 +- .../MintNftsSection.tsx} | 14 +- examples/nft/components/mint-nfts/index.ts | 1 + examples/nft/components/mint/index.ts | 1 - .../AmountInput.tsx} | 2 +- .../{sell/ui/fees.tsx => sell-nfts/Fees.tsx} | 0 .../ui/list-tab.tsx => sell-nfts/ListTab.tsx} | 14 +- .../nft-cards.tsx => sell-nfts/NftCards.tsx} | 4 +- .../NftTraits.tsx} | 2 +- .../ProfileStat.tsx} | 0 .../SellNftsSection.tsx} | 20 ++- .../SellNowTab.tsx} | 16 +-- .../StarsIcon.tsx} | 0 examples/nft/components/sell-nfts/index.ts | 1 + .../modals/BurnNftModal.tsx} | 0 .../modals/NftDetailModal.tsx} | 6 +- .../modals/NftSaleModal.tsx} | 6 +- .../modals/RemoveListingModal.tsx} | 2 +- .../modals/TransferNftModal.tsx} | 2 +- .../modals/UpdatePriceModal.tsx} | 9 +- .../nft/components/sell-nfts/modals/index.ts | 6 + examples/nft/components/sell/index.ts | 2 - examples/nft/components/sell/modal/index.ts | 6 - examples/nft/components/sell/ui/index.ts | 9 -- examples/nft/components/types.tsx | 53 -------- examples/nft/components/wallet-ui/index.ts | 6 - .../AddressCard.tsx} | 56 ++++---- .../astronaut.tsx => wallet/Astronaut.tsx} | 0 .../chain-card.tsx => wallet/ChainCard.tsx} | 8 +- .../user-card.tsx => wallet/UserInfo.tsx} | 14 +- .../{wallet.tsx => wallet/Wallet.tsx} | 38 +++--- .../WalletConnect.tsx} | 12 +- .../warn-block.tsx => wallet/WarnBlock.tsx} | 0 examples/nft/components/wallet/index.ts | 1 + examples/nft/config/defaults.ts | 4 +- examples/nft/config/features.ts | 31 +++-- examples/nft/hooks/useClient.tsx | 4 +- examples/nft/hooks/useTx.ts | 4 +- examples/nft/pages/index.tsx | 116 +--------------- examples/nft/pages/mint-nfts.tsx | 126 +----------------- examples/nft/pages/sell-nfts.tsx | 126 +----------------- examples/nft/tsconfig.json | 5 +- 49 files changed, 328 insertions(+), 556 deletions(-) delete mode 100644 examples/nft/components/base/index.ts rename examples/nft/components/{base/buttons.tsx => common/Buttons.tsx} (100%) rename examples/nft/components/{features.tsx => common/Footer.tsx} (59%) create mode 100644 examples/nft/components/common/Header.tsx create mode 100644 examples/nft/components/common/Layout.tsx create mode 100644 examples/nft/components/common/index.ts rename examples/nft/components/{mint/hero.tsx => mint-nfts/Hero.tsx} (98%) rename examples/nft/components/{mint-nfts.tsx => mint-nfts/MintNftsSection.tsx} (98%) create mode 100644 examples/nft/components/mint-nfts/index.ts delete mode 100644 examples/nft/components/mint/index.ts rename examples/nft/components/{sell/ui/amount-input.tsx => sell-nfts/AmountInput.tsx} (98%) rename examples/nft/components/{sell/ui/fees.tsx => sell-nfts/Fees.tsx} (100%) rename examples/nft/components/{sell/ui/list-tab.tsx => sell-nfts/ListTab.tsx} (94%) rename examples/nft/components/{sell/ui/nft-cards.tsx => sell-nfts/NftCards.tsx} (96%) rename examples/nft/components/{sell/ui/nft-traits.tsx => sell-nfts/NftTraits.tsx} (96%) rename examples/nft/components/{sell/ui/profile-stat.tsx => sell-nfts/ProfileStat.tsx} (100%) rename examples/nft/components/{sell-nfts.tsx => sell-nfts/SellNftsSection.tsx} (95%) rename examples/nft/components/{sell/ui/sell-now-tab.tsx => sell-nfts/SellNowTab.tsx} (89%) rename examples/nft/components/{sell/ui/stars-icon.tsx => sell-nfts/StarsIcon.tsx} (100%) create mode 100644 examples/nft/components/sell-nfts/index.ts rename examples/nft/components/{sell/modal/burn-nft-modal.tsx => sell-nfts/modals/BurnNftModal.tsx} (100%) rename examples/nft/components/{sell/modal/nft-detail-modal.tsx => sell-nfts/modals/NftDetailModal.tsx} (98%) rename examples/nft/components/{sell/modal/nft-sale-modal.tsx => sell-nfts/modals/NftSaleModal.tsx} (95%) rename examples/nft/components/{sell/modal/remove-listing-modal.tsx => sell-nfts/modals/RemoveListingModal.tsx} (97%) rename examples/nft/components/{sell/modal/transfer-nft-modal.tsx => sell-nfts/modals/TransferNftModal.tsx} (98%) rename examples/nft/components/{sell/modal/update-price-modal.tsx => sell-nfts/modals/UpdatePriceModal.tsx} (95%) create mode 100644 examples/nft/components/sell-nfts/modals/index.ts delete mode 100644 examples/nft/components/sell/index.ts delete mode 100644 examples/nft/components/sell/modal/index.ts delete mode 100644 examples/nft/components/sell/ui/index.ts delete mode 100644 examples/nft/components/wallet-ui/index.ts rename examples/nft/components/{wallet-ui/address-card.tsx => wallet/AddressCard.tsx} (93%) rename examples/nft/components/{wallet-ui/astronaut.tsx => wallet/Astronaut.tsx} (100%) rename examples/nft/components/{wallet-ui/chain-card.tsx => wallet/ChainCard.tsx} (88%) rename examples/nft/components/{wallet-ui/user-card.tsx => wallet/UserInfo.tsx} (75%) rename examples/nft/components/{wallet.tsx => wallet/Wallet.tsx} (81%) rename examples/nft/components/{wallet-ui/wallet-connect.tsx => wallet/WalletConnect.tsx} (94%) rename examples/nft/components/{wallet-ui/warn-block.tsx => wallet/WarnBlock.tsx} (100%) create mode 100644 examples/nft/components/wallet/index.ts diff --git a/examples/nft/components/base/index.ts b/examples/nft/components/base/index.ts deleted file mode 100644 index 428d0fe8c..000000000 --- a/examples/nft/components/base/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './buttons'; diff --git a/examples/nft/components/base/buttons.tsx b/examples/nft/components/common/Buttons.tsx similarity index 100% rename from examples/nft/components/base/buttons.tsx rename to examples/nft/components/common/Buttons.tsx diff --git a/examples/nft/components/features.tsx b/examples/nft/components/common/Footer.tsx similarity index 59% rename from examples/nft/components/features.tsx rename to examples/nft/components/common/Footer.tsx index c4e9cea55..f62d0ab40 100644 --- a/examples/nft/components/features.tsx +++ b/examples/nft/components/common/Footer.tsx @@ -1,16 +1,24 @@ -import { LinkIcon } from '@chakra-ui/icons'; import { Box, + Divider, + Grid, Heading, - Icon, - Link, - Stack, Text, - useColorModeValue + Stack, + Link, + Icon, + useColorModeValue, } from '@chakra-ui/react'; -import { FeatureProps } from './types'; +import { dependencies, products } from '../../config'; +import { LinkIcon } from '@chakra-ui/icons'; -export const Product = ({ title, text, href }: FeatureProps) => { +interface IFeature { + title: string; + text: string; + href: string; +} + +const Product = ({ title, text, href }: IFeature) => { return ( { boxShadow: useColorModeValue( '0 2px 5px #bca5e9', '0 0 3px rgba(150, 75, 213, 0.8), 0 3px 8px -2px rgba(175, 89, 246, 0.9)' - ) + ), }} > {title} → @@ -39,7 +47,7 @@ export const Product = ({ title, text, href }: FeatureProps) => { ); }; -export const Dependency = ({ title, text, href }: FeatureProps) => { +const Dependency = ({ title, text, href }: IFeature) => { return ( { boxShadow: useColorModeValue( '0 2px 5px #ccc', '0 1px 3px #727272, 0 2px 12px -2px #2f2f2f' - ) + ), }} > @@ -77,3 +85,46 @@ export const Dependency = ({ title, text, href }: FeatureProps) => { ); }; + +export const Footer = () => { + return ( + <> + + {products.map((product) => ( + + ))} + + + {dependencies.map((dependency) => ( + + ))} + + + + + + Built with + + Cosmology + + + + ); +}; diff --git a/examples/nft/components/common/Header.tsx b/examples/nft/components/common/Header.tsx new file mode 100644 index 000000000..c8207f3b8 --- /dev/null +++ b/examples/nft/components/common/Header.tsx @@ -0,0 +1,59 @@ +import { + Box, + Heading, + Text, + Button, + Flex, + Icon, + useColorMode, + useColorModeValue, + Link, +} from '@chakra-ui/react'; +import { BsFillMoonStarsFill, BsFillSunFill } from 'react-icons/bs'; +import { dependencies } from '@/config'; + +const stargazejs = dependencies[0]; +const stacks = ['CosmosKit', 'Next.js']; + +export const Header = () => { + const { colorMode, toggleColorMode } = useColorMode(); + + return ( + <> + + + + + + Create Cosmos App + + + Welcome to  + + {stacks.join(' + ')} + {' + '} + + {stargazejs.title} + + + + + + ); +}; diff --git a/examples/nft/components/common/Layout.tsx b/examples/nft/components/common/Layout.tsx new file mode 100644 index 000000000..c25860dc7 --- /dev/null +++ b/examples/nft/components/common/Layout.tsx @@ -0,0 +1,19 @@ +import Head from 'next/head'; +import { Container } from '@chakra-ui/react'; +import { Header } from './Header'; +import { Footer } from './Footer'; + +export const Layout = ({ children }: { children: React.ReactNode }) => { + return ( + + + Create Cosmos App + + + +
+ {children} +