Multichain (#9)

* Multichain config added

---------

Co-authored-by: Amir Habibzadeh <[email protected]>

Author: behnamjz

.env.example

@@ -1,5 +1,18 @@
 PORT=3000
 CHOKIDAR_USEPOLLING=true
-REACT_APP_BASE_URL=""
 REACT_APP_WALLET_CONNECT_PROJECT_ID=""
-REACT_APP_ALCHEMY_ID=""
+REACT_APP_ALCHEMY_ID=""
+
+#DEFAULT
+REACT_APP_DEFAULT_CHAIN_ID=
+REACT_APP_DEFAULT_BASE_URL=
+
+#MATIC_MAIN
+REACT_APP_MAIN_MATIC_BASE_URL=
+
+#MATIC_TEST
+REACT_APP_TEST_MATIC_BASE_URL=
+
+#ETHERIUM
+REACT_APP_MAIN_ETHERIUM_BASE_URL=
+

.eslintrc.js

@@ -23,4 +23,4 @@ module.exports = {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   },
-}
+}

README.md

@@ -8,6 +8,7 @@ We have extended the functionality of the original CoreUI template by adding web
 - Axios - Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
 - Redux - For state management.
 - Redux Saga - For managing side effects, such as fetching blockchain data.
+- Multichain config - configs are set by chain.
 
 The CoreUI template already utilizes React and Bootstrap to provide a robust admin template with a wide range of UI components.
 

src/components/AppHeader.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
 import {
   CContainer,
@@ -12,14 +12,19 @@ import {
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
-import { useToggleSidebar } from '../redux/modules/init'
+import { useToggleSidebar, useInit } from '../redux/modules/init/slice'
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
 import { logo } from 'src/assets/brand/logo'
 import { WalletButton } from './rainbow/index'
 
 const AppHeader = () => {
   const { toggleSidebar } = useToggleSidebar()
+  const { dispatchInit } = useInit()
+
+  useEffect(() => {
+    dispatchInit()
+  }, [])
 
   return (
     <CHeader position="sticky" className="mb-4">

src/components/AppSidebar.js

@@ -8,7 +8,7 @@ import { sygnet } from 'src/assets/brand/sygnet'
 import SimpleBar from 'simplebar-react'
 import 'simplebar/dist/simplebar.min.css'
 import navigation from '../_nav'
-import { useToggleSidebar } from '../redux/modules/init'
+import { useToggleSidebar } from '../redux/modules/init/slice'
 
 const AppSidebar = () => {
   const unfoldable = useSelector((state) => state.sidebarUnfoldable)

src/components/rainbow/button.js

@@ -1,56 +1,50 @@
 import React, { useEffect } from 'react'
 import { CButton } from '@coreui/react'
-import { useSelector } from 'react-redux'
 import { RainbowKitProvider, ConnectButton } from '@rainbow-me/rainbowkit'
 import { configureChains, useAccount, useNetwork } from 'wagmi'
-import { mainnet, polygon, optimism, arbitrum, zora } from 'wagmi/chains'
+import { mainnet, polygon, polygonMumbai } from 'wagmi/chains'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
 import { useGetNonce } from '../../redux/modules/userNonce'
-import { useRemoveToken } from '../../redux/modules/userSign'
+import { useUserSign } from '../../redux/modules/userSign'
 import { publicProvider } from 'wagmi/providers/public'
 import '@rainbow-me/rainbowkit/styles.css'
 
 const apiKey = process.env.REACT_APP_ALCHEMY_ID
-
-const supportedChains = [mainnet, polygon, optimism, arbitrum, zora]
+const supportedChains = [mainnet, polygon, polygonMumbai]
 const providers = [alchemyProvider({ apiKey }), publicProvider()]
 const { chains } = configureChains(supportedChains, providers)
 
 const RainbowButton = () => {
   const { address } = useAccount()
   const { chain } = useNetwork()
-  const { dispatchGetNonce } = useGetNonce()
-  const { dispatchRemoveToken } = useRemoveToken()
-  const userToken = useSelector((state) => state.userSign?.data?.access_token)
+  const { dispatchGetNonce, loading: userNonceLoading } = useGetNonce()
+  const { dispatchRemoveToken, userSign, loading: userSignLoading } = useUserSign()
+  const userToken = userSign?.access_token
+  const isLoading = userNonceLoading || userSignLoading
 
   useEffect(() => {
-    handleEffectLogic(address, chain, dispatchGetNonce, dispatchRemoveToken)
-  }, [address, chain, dispatchGetNonce, dispatchRemoveToken])
-
-  const handleEffectLogic = (address, chain, dispatchGetNonce, dispatchRemoveToken) => {
-    if (address) {
-      dispatchGetNonce(address)
-    } else {
-      dispatchRemoveToken()
-    }
     if (chain) {
       dispatchRemoveToken()
     }
-  }
+  }, [chain, dispatchRemoveToken])
 
-  const handleSignInWallet = () => {
-    handleEffectLogic(address, chain, dispatchGetNonce, dispatchRemoveToken)
+  const handleSignInWallet = async () => {
+    try {
+      await dispatchGetNonce(address)
+    } catch (error) {
+      console.error('Error signing in:', error)
+    }
   }
 
-  const showSignInWalletButton = !userToken && address
+  const showSignInWalletButton = !userToken && address && !chain.unsupported
   return (
     <>
       {showSignInWalletButton && (
-        <CButton color="light" className="mx-2" onClick={handleSignInWallet}>
-          Sign In Wallet
+        <CButton color="light" className="mx-2" onClick={handleSignInWallet} disabled={isLoading}>
+          {isLoading ? 'Signing In...' : 'Sign In Wallet'}
         </CButton>
       )}
-      <RainbowKitProvider chains={chains}>
+      <RainbowKitProvider chains={chains} initialChain={process.env.REACT_APP_DEFAULT_CHAIN_ID}>
         <ConnectButton label="Connect Wallet" />
       </RainbowKitProvider>
     </>

src/components/rainbow/index.js

@@ -3,13 +3,13 @@
 import React from 'react'
 import { getDefaultWallets } from '@rainbow-me/rainbowkit'
 import { configureChains, createConfig, WagmiConfig } from 'wagmi'
-import { mainnet, polygon, optimism, arbitrum, zora } from 'wagmi/chains'
+import { mainnet, polygon, polygonMumbai } from 'wagmi/chains'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
 import { publicProvider } from 'wagmi/providers/public'
 import RainBowButton from './button'
 
 const { chains, publicClient } = configureChains(
-  [mainnet, polygon, optimism, arbitrum, zora],
+  [mainnet, polygon, polygonMumbai],
   [alchemyProvider({ apiKey: process.env.REACT_APP_ALCHEMY_ID }), publicProvider()],
 )
 

src/redux/modules/init/saga.js

@@ -0,0 +1,16 @@
+import { put, take, takeEvery } from 'redux-saga/effects'
+import { watchAppNetwrok } from '../web3/slice'
+import { initApp, initAppCompleted } from './slice'
+export function* watchInitApp() {
+  try {
+    yield put(watchAppNetwrok())
+    yield take(watchAppNetwrok)
+    yield put(initAppCompleted())
+  } catch (e) {
+    console.log(e, 'error in init app')
+  }
+}
+
+export function* initSagas() {
+  yield takeEvery(initApp, watchInitApp)
+}

src/redux/modules/init/index.js renamed to src/redux/modules/init/slice.js

@@ -13,6 +13,12 @@ const initSlice = createSlice({
     setSidebarShow: (state) => {
       state.sidebarShow = !state.sidebarShow
     },
+    initApp: (state) => {
+      state.loading = true
+    },
+    initAppCompleted: (state) => {
+      state.loading = false
+    },
   },
 })
 
@@ -27,5 +33,24 @@ export function useToggleSidebar() {
   return { sidebarShow, toggleSidebar }
 }
 
-export const { setSidebarShow } = initSlice.actions
+export function useInit() {
+  const initState = useSelector((state) => state.init)
+  const dispatch = useDispatch()
+
+  const dispatchInit = useCallback(() => {
+    dispatch(initApp())
+  }, [dispatch])
+
+  const dispatchInitCompleted = useCallback(() => {
+    dispatch(initAppCompleted())
+  }, [dispatch])
+
+  return {
+    initState,
+    dispatchInit,
+    dispatchInitCompleted,
+  }
+}
+
+export const { setSidebarShow, initApp, initAppCompleted } = initSlice.actions
 export default initSlice.reducer

src/redux/modules/userNonce/index.js

@@ -1,18 +1,18 @@
 import { useCallback } from 'react'
-import { put, takeEvery } from 'redux-saga/effects'
+import { put, takeEvery, select } from 'redux-saga/effects'
 import ReduxFetchState from 'redux-fetch-state'
 import { getAccount, signMessage } from '@wagmi/core'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import apiPlugin from '../../../services/api'
 import { userSignActions } from '../userSign'
-const API_URL = process.env.REACT_APP_BASE_URL
 
 const { actions, actionTypes, reducer } = new ReduxFetchState('userNonce')
 
 export function* watchUserNonce(action) {
+  const { base_url } = yield select((state) => state.web3?.config || {})
   const { address } = action.payload
   try {
-    const response = yield apiPlugin.getData(`${API_URL}/nonce/${address}`)
+    const response = yield apiPlugin.getData(`${base_url}/nonce/${address}`)
     const { message } = response
     const signature = yield signMessage({ message: message })
     yield put(actions.loadSuccess(response))
@@ -28,13 +28,13 @@ export function* userNonceSagas() {
 
 export function useGetNonce() {
   const dispatch = useDispatch()
+  const { data: userNonce, ...userNonceState } = useSelector((state) => state.userSign)
 
   const dispatchGetNonce = useCallback(() => {
     const { address } = getAccount()
     dispatch(actions.load({ address }))
   }, [dispatch])
-
-  return { dispatchGetNonce }
+  return { userNonce, ...userNonceState, dispatchGetNonce }
 }
 
 export {