Skip to content

Commit

Permalink
Merge branch 'main' of github.com:danilo-89/sitting-cats-nft
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-89 committed May 4, 2024
2 parents 1e21f47 + 2556930 commit cffef43
Show file tree
Hide file tree
Showing 51 changed files with 2,551 additions and 2,443 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

🇸 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 Mumbai test network.
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)

Expand Down
8 changes: 4 additions & 4 deletions app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 --> */}
Expand All @@ -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"
Expand All @@ -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"
Expand Down
117 changes: 63 additions & 54 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,75 +1,87 @@
'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
import { WagmiProvider, http } from 'wagmi'
import { defineChain } from 'viem'
import { polygonMumbai } from 'viem/chains'
import { alchemyProvider } from 'wagmi/providers/alchemy'
import {
RainbowKitProvider,
connectorsForWallets,
} from '@rainbow-me/rainbowkit'
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'
import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
import { metaMaskWallet, injectedWallet } from '@rainbow-me/rainbowkit/wallets'
import '@rainbow-me/rainbowkit/styles.css'

// Contexts
import { UserProvider } from '@/context/UserContext'
import { ContractProvider } from '@/context/ContractContext'
import { UserProvider, ContractProvider } from '@/context'

// Hooks
import useIsMounted from '@/hooks/useIsMounted'
import { useIsMounted } from '@/hooks'

// Components
import Nav from '@/components/common/Nav'
import SectionHero from '@/components/sections/SectionHero'
import SectionMint from '@/components/sections/SectionMint'
import SectionRoadmap from '@/components/sections/SectionRoadmap/SectionRoadmap'
import Footer from '@/components/common/Footer/Footer'
import {
Nav,
SectionHero,
SectionMint,
SectionRoadmap,
Footer,
} from '@/components'

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 ALCHEMY_ID = process.env.NEXT_PUBLIC_ALCHEMY as string

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(
[preferredChain],
[
publicProvider(),
alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY || '' }),
]
)

const connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [
metaMaskWallet({
projectId: WALLET_CONNECT_PROJECT_ID,
chains,
}),
],
const config = getDefaultConfig({
appName: 'SittingCatsNFT',
projectId: WALLET_CONNECT_PROJECT_ID,
chains: [preferredChain],
transports: {
[preferredChain.id]: http(
`https://polygon-amoy.g.alchemy.com/v2/${ALCHEMY_ID}`
),
},
])

const config = createConfig({
autoConnect: true,
publicClient,
webSocketPublicClient,
connectors,
wallets: [
{
groupName: 'Suggested',
wallets: [injectedWallet, metaMaskWallet],
},
],
ssr: true,
})

const queryClient = new QueryClient()
Expand All @@ -78,12 +90,9 @@ export default function Home() {
const isMounted = useIsMounted()

return (
<WagmiConfig config={config}>
<RainbowKitProvider
modalSize="compact"
chains={chains}
>
<QueryClientProvider client={queryClient}>
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider modalSize="compact">
<ContractProvider>
<UserProvider>
<main className="max-w-full overflow-x-hidden">
Expand All @@ -95,8 +104,8 @@ export default function Home() {
<Footer />
</UserProvider>
</ContractProvider>
</QueryClientProvider>
</RainbowKitProvider>
</WagmiConfig>
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
10 changes: 4 additions & 6 deletions components/NFTGallery/Modal/Modal.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { Dispatch, SetStateAction } from 'react'
import type { Dispatch, SetStateAction } from 'react'
import { useAccount, useDisconnect } from 'wagmi'

// Hooks
import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
import { useIsWrongNetwork } from '@/hooks'

// Components
import Button from '@/components/common/Button'
import Modal from '@/components/common/Modal'
import NFTGalery from '../NFTGallery'
import { Button, Modal, NFTGallery } from '@/components'

interface IProps {
isOpen: boolean
Expand All @@ -22,7 +20,7 @@ const NFTGalleryModal = ({ isOpen, setIsOpen }: IProps) => {
if (isOpen && isConnected && !isWrongNetwork) {
return (
<Modal setIsOpen={setIsOpen}>
<NFTGalery setIsOpen={setIsOpen} />
<NFTGallery setIsOpen={setIsOpen} />
<div className="flex justify-end bg-white p-6">
<Button
onClick={() => {
Expand Down
15 changes: 6 additions & 9 deletions components/NFTGallery/NFTGallery.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'
import Image from 'next/image'
import { useQuery } from '@tanstack/react-query'
import { useAccount } from 'wagmi'
Expand All @@ -11,18 +11,16 @@ import { getIdFromHash, ipfsToHttps } from '@/utils'
import { getNFTs } from '@/requests'

// Components
import NftCard from '@/components/NftCard/NftCard'
import Button from '@/components/common/Button'
import LoaderSquare from '@/components/common/LoaderSquare'
import { Button, LoaderSquare, NftCard } from '@/components'

// Types
import { INFT } from '@/types/getNftsAPI'
import { INFT } from '@/types'

interface IProps {
setIsOpen: Dispatch<SetStateAction<boolean>> | (() => void)
}

function NFTGalery({ setIsOpen }: IProps) {
function NFTGallery({ setIsOpen }: IProps) {
const { address } = useAccount()
const [nftData, setNftData] = useState<INFT | null>(null)

Expand Down Expand Up @@ -62,11 +60,10 @@ function NFTGalery({ setIsOpen }: IProps) {
</div>
<span className="mb-7 block border-b border-dashed border-wenge/40 pt-3" />
<p className="mb-6 text-xsP">
<span className="mb-1 inline-block">
<span className="mb-2 block font-semibold">
Welcome to your SittingCats <sup>NFT</sup> collection
showcase.
</span>

{isLoading || isFetching ? (
<span>
Hang on for a quick moment as we track down your
Expand Down Expand Up @@ -142,4 +139,4 @@ function NFTGalery({ setIsOpen }: IProps) {
)
}

export default NFTGalery
export default NFTGallery
16 changes: 10 additions & 6 deletions components/NftCard/NftCard.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { useEffect, useState } from 'react'
import Image from 'next/image'
import { fromHex, isHex } from 'viem'
import clsx from 'clsx'

// Utilities
import { getIdFromHash, ipfsToHttps } from '@/utils'

// Types
import { INFT, INFTDataWithId } from '@/types/getNftsAPI'
import { INFT, INFTDataWithId } from '@/types'

interface IProps {
data: Partial<INFT> | null | undefined
Expand Down Expand Up @@ -61,15 +60,16 @@ const NftCard = ({ data }: IProps) => {
<div className="absolute inset-0 flex flex-col overflow-hidden rounded-md bg-linen shadow-md [backface-visibility:hidden]">
<div className="flex items-center justify-between bg-wenge bg-[url('/paws-pattern-brown.png')] bg-[size:180px] bg-right-top bg-repeat px-2 py-1.5">
<Image
className="w-[3.75rem]"
width="60"
height="40"
className="h-auto w-[3.75rem]"
width={60}
height={40}
src="/logo.png"
alt="logo"
style={{ height: 'auto' }}
/>
{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"
Expand Down Expand Up @@ -116,6 +116,10 @@ const NftCard = ({ data }: IProps) => {
currentData?.metadata?.image || ''
)}
alt={`${currentData?.metadata?.name} NFT cat`}
style={{
width: '5.9rem',
height: 'auto',
}}
/>
) : null}
</figure>
Expand Down
2 changes: 1 addition & 1 deletion components/common/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ButtonHTMLAttributes, ReactNode } from 'react'
import type { ButtonHTMLAttributes, ReactNode } from 'react'
import clsx from 'clsx'

// TS
Expand Down
7 changes: 3 additions & 4 deletions components/common/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import Image from 'next/image'
import arrowExternalIcon from '@/assets/arrow-external.svg'

// Hooks
import useIsMounted from '@/hooks/useIsMounted'
import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
import { useIsMounted, useIsWrongNetwork } from '@/hooks'

// Data
import { contractInfoLabelsData } from './data'
import { contractInfoLabelsData } from '@/components'

const Footer = () => {
const isMounted = useIsMounted()
Expand All @@ -32,7 +31,7 @@ const Footer = () => {
<span className="inline-block pr-4">
SittingCats <sup>NFT</sup>
</span>
<span>2023</span>
<span>2024</span>
</p>
<span className="mb-[0.1rem] block border-b-4 border-wenge pt-[0.2rem]" />
<ul className="text-xs">
Expand Down
4 changes: 2 additions & 2 deletions components/common/Footer/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -13,7 +13,7 @@ export const contractInfoLabelsData = [
},
{
name: 'network',
value: 'Polygon Mumbai Testnet',
value: 'Polygon Amoy Testnet',
},
{
name: 'NFT price*',
Expand Down
2 changes: 1 addition & 1 deletion components/common/LoaderSquare/LoaderSquare.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { SVGProps } from 'react'
import { type SVGProps } from 'react'

const LoaderSquare = (props: SVGProps<SVGSVGElement>) => (
<svg
Expand Down
2 changes: 1 addition & 1 deletion components/common/Modal/Modal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dispatch, ReactNode, SetStateAction } from 'react'
import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
import * as Dialog from '@radix-ui/react-dialog'

interface IProps {
Expand Down
Loading

0 comments on commit cffef43

Please sign in to comment.