some ui improvements

capability to see genereted nfts on all available chains

next.config.js

@@ -13,6 +13,18 @@ const nextConfig = withPWA({
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'ipfs.io',
+        port: '',
+        pathname: '/**'
+      },
+      {
+        protocol: 'https',
+        hostname: 'oaidalleapiprodscus.blob.core.windows.net',
+        port: '',
+        pathname: '/**'
+      }
     ]
   },
   webpack: (config, { isServer }) => {

src/components/NFTSlider/NFTsByContract.tsx

@@ -9,7 +9,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 import { useAlchemyAllNFT } from 'hooks/useAlchemyAllNFT'
-import { OPENSEA_ASSET_URL } from 'utils/config'
+import { ETH_CHAIN_NAMES, OPENSEA_ASSET_URL, networkAtom } from 'utils/config'
 import { LinkComponent } from '../layout/Link/LinkComponent'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { EffectCards } from 'swiper'
@@ -18,10 +18,13 @@ import 'swiper/css/effect-cards'
 import Image from 'next/image'
 import { contractAddress } from 'utils/contract'
 import { ChainIcon } from 'connectkit'
+import { useAtom } from 'jotai'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export default function NFTsByContract() {
   const { loading, data: nfts, error } = useAlchemyAllNFT()
   const [notMobile] = useMediaQuery('(min-width: 750px)')
+  const [nftNetwork,setNftNetwork] = useAtom(networkAtom);
 
   if (!nfts) return null
   const filteredNfts = [...nfts?.nfts].reverse()
@@ -80,24 +83,29 @@ export default function NFTsByContract() {
       </Box>
       <Flex p={2} alignItems={'center'} justifyContent={'center'} width={'90%'} gap={2}>
 
-        {[5, 137, 42161, 10, 11155111, 80001].map((item) => (
-          <LinkComponent
-            label={`AI Collection On Opensea ${OPENSEA_ASSET_URL[item].slice(
-              OPENSEA_ASSET_URL[item].lastIndexOf('/') + 1
-            )}`}
-            href={`${OPENSEA_ASSET_URL[item]}/${contractAddress[item]}`}>
+        {[5, 137, 42161, 10, 80001].map((item) => (
+
             <Tooltip
               hasArrow
               placement="bottom"
-              label={`Collection On Opensea ${OPENSEA_ASSET_URL[item].slice(
+              label={`Collection On ${OPENSEA_ASSET_URL[item].slice(
                 OPENSEA_ASSET_URL[item].lastIndexOf('/') + 1
               )}`}>
-              <Button variant={'ghost'} px={0}>
+              <Button variant={nftNetwork.id ===  item ? 'outline' : 'ghost'} px={0} onClick={()=> setNftNetwork({network:ETH_CHAIN_NAMES[item],id:item})}>
                 <ChainIcon id={item} />
               </Button>
             </Tooltip>
-          </LinkComponent>
         ))}
+        <LinkComponent
+            label={`AI Collection On Opensea ${OPENSEA_ASSET_URL[nftNetwork.id].slice(
+              OPENSEA_ASSET_URL[nftNetwork.id].lastIndexOf('/') + 1
+            )}`}
+            href={`${OPENSEA_ASSET_URL[nftNetwork.id]}/${contractAddress[nftNetwork.id]}`}>
+              <Button variant={'ghost'} colorScheme='facebook' gap={2}>
+              <FaExternalLinkAlt />
+              Opensea
+              </Button>
+            </LinkComponent>
       </Flex>
     </Flex>
   )

src/components/layout/Header/GithubStarButton.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@chakra-ui/react'
+import { FaGithub } from 'react-icons/fa'
+import { GITHUB_URL } from 'utils/config'
+import { LinkComponent } from '../Link/LinkComponent'
+
+interface Props {
+  label: string
+}
+export function GithubStarButton({ label }: Props) {
+  return (
+    <LinkComponent href={GITHUB_URL}>
+    <Button gap={2} variant={'solid'} borderRadius={12} colorScheme='gray'>
+      <FaGithub /> {label}
+    </Button>
+    </LinkComponent>
+  )
+}

src/components/layout/Header/Header.tsx

@@ -7,6 +7,7 @@ import { ConnectKitButton } from 'connectkit'
 import { GasFee } from './GasFee'
 import { useNetwork } from 'wagmi'
 import { Logo } from './Logo'
+import { GithubStarButton } from './GithubStarButton'
 
 interface Props {
   className?: string
@@ -30,6 +31,7 @@ export function Header(props: Props) {
       <Flex alignItems="center" gap={notMobile ? 3 : 2}>
         <GasFee />
         <ConnectKitButton showAvatar={notMobile && chain?.name === "ethereum"} showBalance={notMobile}/>
+        {notMobile && <GithubStarButton label='Star On Github' /> }
         <ThemeSwitcher />
       </Flex>
     </Flex>

src/hooks/useAlchemyAllNFT.tsx

@@ -2,22 +2,24 @@ import { useState, useEffect } from 'react'
 import { State } from 'types'
 import { Alchemy, AlchemySettings, Network, NftContractNftsResponse } from "alchemy-sdk";
 import { contractAddress } from 'utils/contract';
-
-const config:AlchemySettings = {
-  apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
-  network: Network.ETH_GOERLI
-};
-const alchemy = new Alchemy(config);
+import { useAtomValue } from 'jotai';
+import { networkAtom } from 'utils/config';
 
 export function useAlchemyAllNFT() {
   const [state, setState] = useState<State<NftContractNftsResponse>>({
     loading: false,
     error: undefined,
     data: undefined,
   })
+  const nftNetwork = useAtomValue(networkAtom);
+  const config:AlchemySettings = {
+    apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
+    network: nftNetwork.network
+  };
+  const alchemy = new Alchemy(config);
   useEffect(() => {
     const getNfts = async () => {
-      const response = await alchemy.nft.getNftsForContract(contractAddress[5],{omitMetadata:false,pageSize:10})
+      const response = await alchemy.nft.getNftsForContract(contractAddress[nftNetwork.id],{omitMetadata:false,pageSize:10})
       if (response.nfts) {
         setState({
           loading: false,
@@ -33,9 +35,9 @@ export function useAlchemyAllNFT() {
         })
       }
     }
-    if(!state.data){
+    if(!state.loading){
       getNfts()
     }
-  },[])
+  },[nftNetwork])
   return state
 }

src/utils/config.ts

@@ -1,5 +1,7 @@
 import { ThemingProps } from '@chakra-ui/react'
 import { goerli, sepolia, polygon, optimism, arbitrum, polygonMumbai } from '@wagmi/chains'
+import { Network } from 'alchemy-sdk';
+import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils'
 
 type StyleOption = {
@@ -60,11 +62,23 @@ export const SOCIAL_GITHUB = 'sam-shariat'
 export const GITHUB_URL = 'https://github.com/sam-shariat/ai-image-nft-generator'
 
 export const ETH_CHAINS = [polygon, arbitrum, optimism, goerli, sepolia, polygonMumbai]
-
 interface OPENSEA_ASSET_URLs {
   [index: number]: string;
 }
 
+interface IETH_CHAIN_NAMES {
+  [index: number]: Network;
+}
+
+export const ETH_CHAIN_NAMES:IETH_CHAIN_NAMES = {
+  5: Network.ETH_GOERLI,
+  80001: Network.MATIC_MUMBAI,
+  137: Network.MATIC_MAINNET,
+  42161: Network.ARB_MAINNET,
+  10: Network.OPT_MAINNET,
+  11155111: Network.ETH_GOERLI,
+}
+
 export const OPENSEA_ASSET_URL:OPENSEA_ASSET_URLs = {
   5: 'https://testnets.opensea.io/assets/goerli',
   80001: 'https://testnets.opensea.io/assets/mumbai',
@@ -83,4 +97,5 @@ export const SERVER_SESSION_SETTINGS = {
   },
 }
 
-export const apiAtom = atomWithStorage('openaiapi','');
+export const apiAtom = atomWithStorage('openaiapi','');
+export const networkAtom = atom({network:Network.ETH_GOERLI,id:5});