fix: Better stability

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
-/** Only needed if hosted on github pages URL: https://user.github.io/tinyswap/
+/** Only needed if hosted on github pages URL: https://user.github.io/repo/
  * Also uncomment the assetPrefix and basePath below
- * const repo = 'tinyswap'
+ * const repo = 'repo'
  * const assetPrefix = `/${repo}/`
  * const basePath = `/${repo}`
 */
@@ -12,6 +12,27 @@ const nextConfig = {
   output: 'export',
   // assetPrefix: assetPrefix,
   // basePath: basePath
+
+  webpack: (config, { isServer, dev }) => {
+    // Enable source maps in dev
+    if (dev) {
+      config.devtool = 'eval-source-map';
+    }
+
+    /**
+    // Enable source maps in production
+      config.devtool = 'source-map';
+      for (const plugin of config.plugins) {
+        if (plugin.constructor.name === 'TerserPlugin') {
+          plugin.options.sourceMap = true;
+          break;
+        }
+      }
+    }
+    */
+
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -13,8 +13,10 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
+    "@wagmi/core": "^1.4.5",
     "@web3modal/wagmi": "^3.1.0",
     "ethers": "^6.8.0",
+    "lodash": "^4.17.21",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
@@ -23,6 +25,7 @@
     "wagmi": "^1.4.5"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.200",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

pages/_app.tsx

@@ -1,13 +1,18 @@
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
-import { Chain, WagmiConfig } from 'wagmi'
+import { EIP6963Connector, createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import { Chain, WagmiConfig, configureChains, createConfig } from 'wagmi'
 import { avalanche, fantom } from 'wagmi/chains'
 import { ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 import { CacheProvider, EmotionCache } from '@emotion/react'
 import theme from '../config/theme'
 import createEmotionCache from '../config/createEmotionCache'
+import { publicProvider } from 'wagmi/providers/public'
+import { walletConnectProvider } from '@web3modal/wagmi'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache()
@@ -44,8 +49,26 @@ const sonic: Chain = {
   },
 }
 
-const chains = [fantom, avalanche]
-const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+const { chains, publicClient } = configureChains(
+  [fantom, avalanche],
+  [
+    walletConnectProvider({ projectId }),
+    publicProvider(),
+  ],
+  // Instead of default 4_000 (4sec)
+  { pollingInterval: 1_000 },
+)
+
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors: [
+    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata } }),
+    new EIP6963Connector({ chains }),
+    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
+    new CoinbaseWalletConnector({ chains, options: { appName: metadata.name } })
+  ],
+  publicClient
+})
 
 // 3. Create modal
 createWeb3Modal({ 

pages/index.tsx

@@ -12,6 +12,7 @@ import { StyledCircularProgress, TextNormal, TextSubtle, TextWarning } from '@/C
 import contractABI from "../helpers/SonicABI"
 import usePersistState from "../helpers/usePersistState"
 import Head from "next/head"
+import { isEqual } from 'lodash'
 
 const manrope = Manrope({ subsets: ["latin"] })
 
@@ -33,7 +34,7 @@ const nullSpeed = [
 ]
 
 const Home: NextPage = () => {
-  const [showAddress, setShowAddress] = useState<`0x${string}` | null>(null)
+  const [showAddress, setShowAddress] = useState<`0x${string}` | undefined>(undefined)
   const [networkValue, setNetworkValue] = useState<number>(250)
   const [currentChains, setCurrentChains] = useState<Chain[]>([])
   const [startTime, setStartTime] = useState<number>(0)
@@ -86,15 +87,16 @@ const Home: NextPage = () => {
     abi: contractABI,
     functionName: "getAllNFTs",
     args: [address],
-    watch: true
+    watch: true,
+    enabled: !!address,
   })
 
   const { writeAsync, status, data, reset } = useContractWrite(config)
 
-  // Existing
   const { isLoading, isSuccess, isError } = useWaitForTransaction({
     hash: data?.hash,
-  }) // existing
+    confirmations: 0,
+  })
 
   const isMintingLoading = useMemo(() => showAddress && (isLoading || isMinting), [showAddress, isLoading, isMinting])
 
@@ -147,14 +149,16 @@ const Home: NextPage = () => {
   }, [isMinting, startTime])
 
   useEffect(() => {
-    setIsSupportedChain(chains.find((x) => x.id === networkValue) !== undefined)
+    if (networkValue && chains?.length) {
+      setIsSupportedChain(!!chains.find((x) => x.id === networkValue))
+    }
   }, [chains, networkValue])
 
   useEffect(() => {
     if (address) {
       setShowAddress(address)
     } else {
-      setShowAddress(null)
+      setShowAddress(undefined)
     }
   }, [address])
 
@@ -168,10 +172,10 @@ const Home: NextPage = () => {
 
   // Update current chains
   useEffect(() => {
-    if (chains) {
+    if (chains && !isEqual(chains, currentChains)) {
       setCurrentChains(chains)
     }
-  }, [chains])
+  }, [chains, currentChains])
 
   // Change network value when chain.id changes
   useEffect(() => {

yarn.lock

@@ -857,6 +857,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.14.200":
+  version "4.14.200"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.200.tgz#435b6035c7eba9cdf1e039af8212c9e9281e7149"
+  integrity sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==
+
 "@types/ms@*":
   version "0.7.33"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.33.tgz#80bf1da64b15f21fd8c1dc387c31929317d99ee9"
@@ -1090,7 +1095,7 @@
     abitype "0.8.7"
     eventemitter3 "^4.0.7"
 
-"@wagmi/core@1.4.5":
+"@wagmi/core@1.4.5", "@wagmi/core@^1.4.5":
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-1.4.5.tgz#bab215bfc1e028bc720b772d8d69dd12ae0c0ebf"
   integrity sha512-N9luRb1Uk4tBN9kaYcQSWKE9AsRt/rvZaFt5IZech4JPzNN2sQlfhKd9GEjOXYRDqEPHdDvos7qyBKiDNTz4GA==
@@ -3313,6 +3318,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"