Wagmi auth

README.md

@@ -32,6 +32,18 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 * [Support CoreUI Development](#support-coreui-development)
 * [Copyright and License](#copyright-and-license)
 
+## Login and Connect Wallet
+
+If you want to add login and connect wallet functionality to your application, you can use the Wagmi library. Wagmi is a collection of React Hooks that makes it easy to work with Ethereum, including connecting wallets, displaying ENS and balance information, signing messages, interacting with contracts, and more.
+
+To get started with Wagmi, you can follow these steps:
+
+1. Install the Wagmi library and the necessary dependencies in your React project:
+
+   ```bash
+   npm install wagmi viem
+  You can read more about that [here](https://wagmi.sh)
+
 ## Versions
 
 * [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)

package.json

@@ -26,20 +26,37 @@
     "@coreui/coreui": "^4.2.6",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@coreui/react": "^4.9.0-rc.0",
-    "@coreui/react-chartjs": "^2.1.3",
-    "@coreui/utils": "^2.0.2",
+    "@coreui/react": "^4.6.0",
+    "@coreui/react-chartjs": "^2.1.2",
+    "@coreui/utils": "^2.0.1",
+    "@web3-react/core": "^8.2.0",
+    "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/walletconnect": "^8.2.0",
+    "@web3modal/ethereum": "^2.4.5",
+    "@web3modal/react": "^2.4.5",
+    "@web3modal/sign-react": "^2.4.7",
     "chart.js": "^3.9.1",
     "classnames": "^2.3.2",
-    "core-js": "^3.31.0",
+    "core-js": "^3.29.0",
+    "ethers": "^6.6.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
+    "react-ranger": "^2.1.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.14.0",
-    "redux": "4.2.1",
-    "simplebar-react": "^2.4.3"
+    "react-toastify": "^9.1.3",
+    "redux": "^4.2.1",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.2.3",
+    "redux-thunk": "^2.4.2",
+    "simplebar-react": "^2.4.3",
+    "viem": "^1.0.7",
+    "wagmi": "^1.2.0",
+    "web3": "^4.0.2",
+    "web3-core": "^4.0.1",
+    "web3-errors": "^1.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
@@ -56,4 +73,4 @@
     "node": ">=10",
     "npm": ">=6"
   }
-}
+}

src/App.js

@@ -1,6 +1,9 @@
 import React, { Component, Suspense } from 'react'
+import { Provider } from 'react-redux'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import './scss/style.scss'
+import store from './redux/store'
+
 
 const loading = (
   <div className="pt-3 text-center">
@@ -20,17 +23,19 @@ const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 class App extends Component {
   render() {
     return (
-      <HashRouter>
-        <Suspense fallback={loading}>
-          <Routes>
-            <Route exact path="/login" name="Login Page" element={<Login />} />
-            <Route exact path="/register" name="Register Page" element={<Register />} />
-            <Route exact path="/404" name="Page 404" element={<Page404 />} />
-            <Route exact path="/500" name="Page 500" element={<Page500 />} />
-            <Route path="*" name="Home" element={<DefaultLayout />} />
-          </Routes>
-        </Suspense>
-      </HashRouter>
+      <Provider store={store}>
+        <HashRouter>
+          <Suspense fallback={loading}>
+            <Routes>
+              <Route exact path="/login" name="Login Page" element={<Login />} />
+              <Route exact path="/register" name="Register Page" element={<Register />} />
+              <Route exact path="/404" name="Page 404" element={<Page404 />} />
+              <Route exact path="/500" name="Page 500" element={<Page500 />} />
+              <Route path="*" name="Home" element={<DefaultLayout />} />
+            </Routes>
+          </Suspense>
+        </HashRouter>
+      </Provider>
     )
   }
 }

src/components/AppHeader.js

@@ -1,6 +1,7 @@
-import React from 'react'
-import { NavLink } from 'react-router-dom'
-import { useSelector, useDispatch } from 'react-redux'
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { setSidebarShow } from '../redux/actions';
 import {
   CContainer,
   CHeader,
@@ -10,24 +11,24 @@ import {
   CHeaderToggler,
   CNavLink,
   CNavItem,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
+} from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons';
 
-import { AppBreadcrumb } from './index'
-import { AppHeaderDropdown } from './header/index'
-import { logo } from 'src/assets/brand/logo'
+import { AppBreadcrumb } from './index';
+import { logo } from 'src/assets/brand/logo';
+import WagmiAuth from './header/wagmi'; // Import the WagmiAuth component
 
 const AppHeader = () => {
-  const dispatch = useDispatch()
-  const sidebarShow = useSelector((state) => state.sidebarShow)
+  const dispatch = useDispatch();
+  const sidebarShow = useSelector((state) => state.sidebarShow);
 
   return (
     <CHeader position="sticky" className="mb-4">
       <CContainer fluid>
         <CHeaderToggler
           className="ps-1"
-          onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          onClick={() => dispatch(setSidebarShow(!sidebarShow))}
         >
           <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
@@ -47,6 +48,10 @@ const AppHeader = () => {
             <CNavLink href="#">Settings</CNavLink>
           </CNavItem>
         </CHeaderNav>
+
+        <CHeaderNav>
+          <WagmiAuth /> {/* Render the WagmiAuth component */}
+        </CHeaderNav>
         <CHeaderNav>
           <CNavItem>
             <CNavLink href="#">
@@ -64,16 +69,13 @@ const AppHeader = () => {
             </CNavLink>
           </CNavItem>
         </CHeaderNav>
-        <CHeaderNav className="ms-3">
-          <AppHeaderDropdown />
-        </CHeaderNav>
       </CContainer>
       <CHeaderDivider />
       <CContainer fluid>
         <AppBreadcrumb />
       </CContainer>
     </CHeader>
-  )
-}
+  );
+};
 
-export default AppHeader
+export default AppHeader;

src/components/header/auth/ChainDropdown.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import supportedNetwork from './SupportedNetwork';
+import { CAvatar, CDropdown, CDropdownToggle, CDropdownMenu, CDropdownItem } from '@coreui/react';
+
+const ChainDropdown = ({ chains, chain, switchNetwork, isLoading, pendingChainId }) => {
+  const findToken = (name) => {
+    return supportedNetwork.find((x) => x.name === name);
+  };
+
+  return (
+    <CDropdown dark>
+      <CDropdownToggle className="position-relative rounded-pill m-2 font-xs" variant="ghost" color="secondary">
+        {findToken(chain.name) ? '' : 'Unsupported Network Choosen'}
+        <CAvatar src={findToken(chain.name) ? findToken(chain.name).cover : ''} size="sm" />
+      </CDropdownToggle>
+      <CDropdownMenu>
+        {chains.map((x) => (
+          <CDropdownItem
+            disabled={!switchNetwork || x.id === chain?.id}
+            key={x.id}
+            onClick={() => switchNetwork?.(x.id)}
+          >
+            <CAvatar src={findToken(x.name) ? findToken(x.name).cover : ''} size="sm" className="mx-2" />
+            {x.name}
+            {isLoading && pendingChainId === x.id && ' (switching)'}
+          </CDropdownItem>
+        ))}
+      </CDropdownMenu>
+    </CDropdown>
+  );
+};
+
+export default ChainDropdown;

src/components/header/auth/SupportedNetwork.js

@@ -0,0 +1,21 @@
+// supportedNetwork.js
+import ethIcon from '../../../assets/images/tokens/eth.png';
+import arbitIcon from '../../../assets/images/tokens/arbitrum.svg';
+import maticIcon from '../../../assets/images/tokens/polygon.svg';
+
+const supportedNetwork = [
+  {
+    name: 'Ethereum',
+    cover: ethIcon,
+  },
+  {
+    name: 'Arbitrum One',
+    cover: arbitIcon,
+  },
+  {
+    name: 'Polygon',
+    cover: maticIcon,
+  },
+];
+
+export default supportedNetwork;

src/components/header/auth/WalletDropdown.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { CAvatar, CBadge, CDropdown, CDropdownMenu, CDropdownItem, CDropdownToggle } from '@coreui/react';
+
+const WalletDropdown = ({ address, open, signIn, visible, status }) => {
+  return (
+    <CDropdown className="w-25">
+      {visible && (
+        <CBadge
+          className="border border-light p-2 spinner-grow w-15-icon"
+          role="status"
+          color={`${status === 'connected' ? 'success' : 'danger'}`}
+          position="top-end"
+          shape="rounded-circle"
+        >
+          <span className="visually-hidden">New alerts</span>
+        </CBadge>
+      )}
+      <CDropdownToggle className="w-25 text-truncate" shape="rounded-pill" color="primary">
+        <CAvatar src={`https://www.gravatar.com/avatar/${address}?d=identicon`} size="sm" className="me-2" />
+        {address}
+      </CDropdownToggle>
+      {/* Dropdown Menu */}
+      <CDropdownMenu color="">
+        <CDropdownItem onClick={open}>Account</CDropdownItem>
+        <CDropdownItem onClick={signIn}>Sign in wallet</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  );
+};
+
+export default WalletDropdown;