Bepro 2257 support to develop locally with a ganache network (#508)

* add localhost to supported chains

* use polygon as default chain

* get initial chain from config

* fix: only allow ganache if is dev environment

Author: vhcsilva

contexts/wagmi-provider.tsx

@@ -4,7 +4,7 @@ import {getDefaultConfig} from "@rainbow-me/rainbowkit";
 import getConfig from "next/config";
 import {parseCookies} from "nookies";
 import {defineChain} from "viem";
-import {aurora, auroraTestnet, mainnet, moonbeam, polygon, polygonAmoy, polygonMumbai} from "viem/chains";
+import {aurora, auroraTestnet, mainnet, moonbeam, polygon, polygonAmoy, polygonMumbai, localhost} from "viem/chains";
 import {cookieStorage, cookieToInitialState, createStorage, WagmiProvider} from "wagmi";
 
 interface WagmiProps {
@@ -30,18 +30,31 @@ const coinEx = defineChain({
   }
 });
 
+const ganache = defineChain({
+  ...localhost,
+  blockExplorers: {
+    default: {
+      name: "Local",
+      url: "http://127.0.0.1:8545",
+    }
+  }
+});
+
 const config = getDefaultConfig({
     appName: "BEPRO",
     projectId: publicRuntimeConfig?.walletConnectProjectId || "bc2288336095f20ebf8653a1ab670566",
     chains: [
       polygon,
-      polygonAmoy,
-      polygonMumbai,
       aurora,
-      auroraTestnet,
       moonbeam,
       coinEx,
       mainnet,
+      polygonAmoy,
+      polygonMumbai,
+      auroraTestnet,
+      ... (publicRuntimeConfig?.isProduction ? [] : [
+        ganache,
+      ])
     ],
     ssr: true,
     storage: createStorage({

next.config.js

@@ -32,7 +32,7 @@ const publicRuntimeConfig = {
   },
   walletConnectProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
   defaultChain: {
-    id: process.env.NEXT_PUBLIC_NEEDS_CHAIN_ID,
+    id: +process.env.NEXT_PUBLIC_NEEDS_CHAIN_ID || 137,
     name: process.env.NEXT_PUBLIC_NEEDS_CHAIN_NAME,
     nativeToken: process.env.NEXT_PUBLIC_NATIVE_TOKEN_NAME,
     blockscan: process.env.NEXT_PUBLIC_BLOCKSCAN_LINK,

pages/_app.tsx

@@ -8,7 +8,6 @@ import {appWithTranslation} from "next-i18next";
 import getConfig from "next/config";
 import {useRouter} from "next/router";
 import {GoogleAnalytics} from "nextjs-google-analytics";
-import {polygon} from "viem/chains";
 
 import ConsentCookie from "components/consent-cokie";
 import Loading from "components/loading";
@@ -43,7 +42,7 @@ function App({ Component, pageProps: { session, seoData, ...pageProps } }) {
       <QueryClientProvider client={queryClient}>
         <GoogleAnalytics gaMeasurementId={publicRuntimeConfig.gaMeasureID} trackPageViews />
         <SessionProvider session={session}>
-            <RainbowKitProvider initialChain={polygon}>
+            <RainbowKitProvider initialChain={publicRuntimeConfig?.defaultChain?.id}>
               <AuthenticationProvider>
                 <RootProviders>
                   <HydrationBoundary state={pageProps.dehydratedState}>