Merge branch 'main' into wagmi-v2

danilo-89 · Apr 19, 2024 · 5f102c1 · 5f102c1
2 parents 1f85f9f + 89063b2
commit 5f102c1
Show file tree

Hide file tree

Showing 28 changed files with 7,810 additions and 1,305 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,35 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+import path from 'path'
+
+const config: StorybookConfig = {
+    stories: [
+        '../stories/**/*.mdx',
+        '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    ],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    staticDirs: ['../public'],
+    webpackFinal: async (config: any) => ({
+        ...config,
+        resolve: {
+            ...config.resolve,
+            alias: {
+                ...config.resolve.alias,
+                '@': path.resolve(__dirname, '../'),
+            },
+        },
+    }),
+}
+export default config
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import { Poppins, Yellowtail } from 'next/font/google'
+
+const poppins = Poppins({
+    subsets: ['latin'],
+    weight: ['400', '700'],
+    variable: '--font-poppins',
+})
+const yellowtail = Yellowtail({
+    subsets: ['latin'],
+    weight: ['400'],
+    variable: '--font-yellowtail',
+})
+
+import '../app/globals.css'
+
+const preview: Preview = {
+    decorators: [
+        (Story) => (
+            <main
+                className={`${poppins.variable} ${yellowtail.variable} text-wenge`}
+                style={{
+                    fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
+                }}
+            >
+                <Story />
+            </main>
+        ),
+    ],
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview
diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 ## Introduction
 
-Live: [sitting-cats-nft.vercel.app](https://sitting-cats-nft.vercel.app/)
+🌐 Live: [sitting-cats-nft.vercel.app](https://sitting-cats-nft.vercel.app/)
 
-The **Sitting Cats<sup>NFT</sup>** represents a small personal project aimed at showcasing the process of NFT minting on the Polygon Mumbai test network.
+🇸 Storybook: [sitting-cats-nft-storybook.vercel.app](https://sitting-cats-nft-storybook.vercel.app/)
+
+The **Sitting Cats<sup>NFT</sup>** represents a small personal project aimed at showcasing the process of NFT minting on the Polygon Amoy test network.
 
 ![project preview](./readme/web-preview.png)
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,7 +15,7 @@ const yellowtail = Yellowtail({
 
 export const metadata: Metadata = {
     title: 'Sitting Cats NFT',
-    description: 'Demonstrating NFT minting on the Polygon Mumbai test network',
+    description: 'Demonstrating NFT minting on the Polygon Amoy test network',
 }
 
 export default function RootLayout({
@@ -30,7 +30,7 @@ export default function RootLayout({
                 <title>Sitting Cats NFT</title>
                 <meta
                     name="description"
-                    content="Demonstrating NFT minting on the Polygon Mumbai test network"
+                    content="Demonstrating NFT minting on the Polygon Amoy test network"
                 />
 
                 {/* <!-- Facebook Meta Tags --> */}
@@ -48,7 +48,7 @@ export default function RootLayout({
                 />
                 <meta
                     property="og:description"
-                    content="Demonstrating NFT minting on the Polygon Mumbai test network"
+                    content="Demonstrating NFT minting on the Polygon Amoy test network"
                 />
                 <meta
                     property="og:image"
@@ -74,7 +74,7 @@ export default function RootLayout({
                 />
                 <meta
                     name="twitter:description"
-                    content="Demonstrating NFT minting on the Polygon Mumbai test network"
+                    content="Demonstrating NFT minting on the Polygon Amoy test network"
                 />
                 <meta
                     name="twitter:image"

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import {  WagmiProvider, http } from 'wagmi'
+import { WagmiProvider, http } from 'wagmi'
 // import { publicProvider } from 'wagmi/providers/public'
 import { defineChain } from 'viem'
 import { polygonMumbai } from 'viem/chains'
@@ -29,22 +29,46 @@ import SectionRoadmap from '@/components/sections/SectionRoadmap/SectionRoadmap'
 import Footer from '@/components/common/Footer/Footer'
 
 const RPC_PUBLIC = process.env.NEXT_PUBLIC_RPC_PUBLIC as string
+const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID as string
 const WALLET_CONNECT_PROJECT_ID = process.env
     .NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string
 
-console.log('Public RPC: ', RPC_PUBLIC)
-
 const preferredChain = defineChain({
-    ...polygonMumbai,
+    id: Number(CHAIN_ID),
+    name: 'Polygon Amoy',
+    network: 'polygonamoy',
+    nativeCurrency: {
+        name: 'MATIC',
+        symbol: 'MATIC',
+        decimals: 18,
+    },
     rpcUrls: {
-        ...polygonMumbai.rpcUrls,
+        alchemy: {
+            http: ['https://polygon-amoy.g.alchemy.com/v2'],
+            webSocket: ['wss://polygon-amoy.g.alchemy.com/v2'],
+        },
+        infura: {
+            http: ['https://polygon-amoy.infura.io/v3'],
+            webSocket: ['wss://polygon-amoy.infura.io/ws/v3'],
+        },
         default: {
             http: [RPC_PUBLIC],
         },
         public: {
             http: [RPC_PUBLIC],
         },
     },
+    blockExplorers: {
+        etherscan: {
+            name: 'PolygonScan',
+            url: 'https://amoy.polygonscan.com',
+        },
+        default: {
+            name: 'PolygonScan',
+            url: 'https://amoy.polygonscan.com',
+        },
+    },
+    testnet: true,
 })
 
 // const { chains, publicClient, webSocketPublicClient } = configureChains(
@@ -60,13 +84,15 @@ const config = getDefaultConfig({
     projectId: WALLET_CONNECT_PROJECT_ID,
     chains: [preferredChain],
     transports: {
-      [preferredChain.id]: http('https://polygon-mumbai.g.alchemy.com/v2/4wUHd-c4zm8RxA7P3KFxbnZDDyIRKA9T'),
+        [preferredChain.id]: http(
+            'https://polygon-amoy.g.alchemy.com/v2/CAOYqQI1K9AKGzoPPRuxIrY0oEVJcrnt'
+        ),
     },
     // wallets: [{
     //     groupName: 'Recommended',
     //     wallets: [metaMaskWallet],
     //   }],
-  })
+})
 
 // const connectors = connectorsForWallets([
 //     {
@@ -95,10 +121,9 @@ export default function Home() {
     return (
         <WagmiProvider config={config}>
             <QueryClientProvider client={queryClient}>
-            <RainbowKitProvider
-                modalSize="compact"
-                // chains={chains} 
-
+                <RainbowKitProvider
+                    modalSize="compact"
+                    // chains={chains}
                 >
                     <ContractProvider>
                         <UserProvider>
@@ -108,11 +133,11 @@ export default function Home() {
                                 {isMounted ? <SectionMint /> : null}
                                 <SectionRoadmap />
                             </main>
-                               <Footer />
+                            <Footer />
                         </UserProvider>
                     </ContractProvider>
-            </RainbowKitProvider>
-                </QueryClientProvider>
+                </RainbowKitProvider>
+            </QueryClientProvider>
         </WagmiProvider>
     )
 }
diff --git a/components/NftCard/NftCard.tsx b/components/NftCard/NftCard.tsx
@@ -70,7 +70,7 @@ const NftCard = ({ data }: IProps) => {
                             />
                             {currentData?.id ? (
                                 <a
-                                    href={`https://mumbai.polygonscan.com/token/${process.env.NEXT_PUBLIC_CONTRACT}?a=${currentData?.id}`}
+                                    href={`https://amoy.polygonscan.com/token/${process.env.NEXT_PUBLIC_CONTRACT}?a=${currentData?.id}`}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     className="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-champagne px-1 text-xsP font-semibold"

diff --git a/components/common/Button/Button.tsx b/components/common/Button/Button.tsx
@@ -38,7 +38,7 @@ const Button = ({
         variation === 'secondary' &&
             'text-wenge bg-robinEggBlue shadow-silver/40 group-active:shadow-silver/40',
         variation === 'neutral' &&
-            'text-white bg-silver shadow-wenge group-active:shadow-wenge',
+            'text-wenge bg-silver shadow-wenge group-active:shadow-wenge',
         variation === 'transparent' &&
             'text-wenge bg-[transparent] shadow-wenge group-active:shadow-wenge',
         // additional

diff --git a/components/common/Footer/data.ts b/components/common/Footer/data.ts
@@ -4,7 +4,7 @@ export const contractInfoLabelsData = [
     {
         name: 'address',
         value: shortenHexString(process.env.NEXT_PUBLIC_CONTRACT),
-        href: `https://mumbai.polygonscan.com/address/${process.env.NEXT_PUBLIC_CONTRACT}`,
+        href: `https://amoy.polygonscan.com/address/${process.env.NEXT_PUBLIC_CONTRACT}`,
     },
     {
         name: 'standard',
@@ -13,7 +13,7 @@ export const contractInfoLabelsData = [
     },
     {
         name: 'network',
-        value: 'Polygon Mumbai Testnet',
+        value: 'Polygon Amoy Testnet',
     },
     {
         name: 'NFT price*',

diff --git a/components/common/Nav/Nav.tsx b/components/common/Nav/Nav.tsx
@@ -35,7 +35,7 @@ const Nav = () => {
         !isHeightChecked && 'opacity-0',
         isOverHeight
             ? 'left-3 text-[2.3rem] top-[-5%] -translate-x-0 -translate-y-0'
-            : 'left-1/2 top-[15rem] sm:top-[calc(100vh/2-9rem)] -translate-x-1/2 -translate-y-1/2 text-[6.5rem] md:text-[8rem]'
+            : 'left-1/2 top-[15rem] sm:top-[calc(100vh/2-9rem)] -translate-x-1/2 -translate-y-1/2 text-[6.5rem] md:text-[8rem] short:top-[calc(100vh/2-2rem)] short:top-[calc(100vh/2-0.5rem)]'
     )
     const textCatsClasses = clsx(
         'transition duration-700',

diff --git a/components/sections/SectionMint/SectionMint.tsx b/components/sections/SectionMint/SectionMint.tsx
@@ -20,20 +20,20 @@ import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
 import useMint from '@/hooks/useMint'
 
 // Components
-import AngledContentStripe from '@/components/shared/AngledContentStripe/AngledContentStripe'
-import Modal from '@/components/common/Modal/Modal'
 import Button from '@/components/common/Button/Button'
-import InputNft from '@/components/sections/SectionMint/InputNft'
-import Title from '@/components/common/Title/Title'
 import Faucet from '@/components/sections/SectionMint/Faucet/Faucet'
+import InputNft from '@/components/sections/SectionMint/InputNft'
 import LoaderDots from '@/components/common/LoaderDots/LoaderDots'
+import Modal from '@/components/common/Modal/Modal'
 import NFTGalleryModal from '@/components/NFTGallery/Modal'
-import StatusMessage from './StatusMessage'
+import Title from '@/components/common/Title/Title'
+import ClaimedNFT from './ClaimedNFT'
 import InfoMessage from './InfoMessage'
-import WrongNetworkNotice from './WrongNetworkNotice'
-import NotConnectedNotice from './NotConnectedNotice'
 import InfoMessageWrapper from './InfoMessageWrapper'
-import ClaimedNFT from './ClaimedNFT'
+import NotConnectedNotice from './NotConnectedNotice'
+import SectionMintBottom from './SectionMintBottom/SectionMintBottom'
+import StatusMessage from './StatusMessage'
+import WrongNetworkNotice from './WrongNetworkNotice'
 
 // Types
 import { GetNfts, IMintedMetadata } from '@/types/getNftsAPI'
@@ -386,36 +386,7 @@ const SectionMint = () => {
                     </div>
                 </div>
             </div>
-            <AngledContentStripe color="blue">
-                <div className="mx-auto flex max-w-[820px] flex-col px-5 py-4 xs:flex-row">
-                    <p className="text-md max-w-auto basis shrink grow pt-2">
-                        NFTs are like digital collector&apos;s items, and by
-                        claiming them, you embrace the fusion of history and
-                        innovation, where Julie de Graag&apos;s artistic
-                        ingenuity meets the blockchain&apos;s immutability.
-                        <br />
-                        <br />
-                        <span className="text-lg">
-                            The{' '}
-                            <span className="font-bold">
-                                Sitting Cats
-                                <sup>NFT</sup>
-                            </span>{' '}
-                            welcomes you to explore, own, and be a part of this
-                            artistic adventure.
-                        </span>
-                    </p>
-                    <figure className="sx:mr-[unset] mx-auto mt-4 h-auto w-6 min-w-[120px] shrink-0 grow xs:ml-4 xs:h-full md:mt-0">
-                        <Image
-                            className="relative xs:top-[-1.5rem]"
-                            alt="paw"
-                            width="120"
-                            height="133"
-                            src="/paw-light-blue.png"
-                        />
-                    </figure>
-                </div>
-            </AngledContentStripe>
+            <SectionMintBottom />
 
             {/* Modals */}
             {showClaimedNFTModal ? (