Merge pull request #9 from CudoVentures/cudos-dev

Wallet creation flow, address book, general validation and transitions

example.env.file

@@ -4,4 +4,3 @@ VITE_APP_EXPLORER_PUBLIC_ADDRESS='http://localhost:3000'
 VITE_APP_CHAIN_NAME="CudosTestnet-Local"
 VITE_APP_CHAIN_ID="cudos-network"
 VITE_APP_GAS_PRICE="5000000000000"
-VITE_APP_GAS_PRICE_DENOM="acudos"

package.json

@@ -9,28 +9,44 @@
     "test": "jest"
   },
   "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@fontsource/poppins": "^4.5.8",
+    "@mui/material": "^5.8.4",
+    "@reduxjs/toolkit": "^1.8.2",
+    "@rollup/plugin-alias": "^3.1.9",
     "axios": "^0.27.2",
+    "bignumber.js": "^9.0.2",
     "react": "^18.1.0",
-    "react-dom": "^18.0.0"
+    "react-csv": "^2.2.2",
+    "react-dom": "^18.0.0",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0",
+    "redux-persist": "^6.0.0",
+    "vite-tsconfig-paths": "^3.5.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
+    "@mui/icons-material": "^5.8.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.0",
     "@types/node": "^17.0.44",
     "@types/react": "^18.0.0",
+    "@types/react-csv": "^1.1.3",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^1.3.0",
     "bech32": "^2.0.0",
-    "crypto": "^1.0.1",
-    "cudosjs": "^0.0.21",
+    "copy-to-clipboard": "^3.3.1",
+    "cudosjs": "file:../../cudos-network/testing/cudosjs",
     "dotenv": "^16.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
+    "redux-reset": "^0.3.0",
+    "tsconfig-paths": "^4.0.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.9"
   },

src/App.tsx

@@ -1,14 +1,86 @@
-import { useState } from 'react'
+import { ThemeProvider } from '@mui/material/styles'
+import { useDispatch, useSelector } from 'react-redux'
+import { CssBaseline, Container } from '@mui/material'
+import { Routes, Route, useLocation, Navigate } from 'react-router-dom'
 
-function App() {
-  const [count, setCount] = useState(0)
+import Layout from 'components/Layout'
+import RequireKeplr from 'components/RequireKeplr/RequireKeplr'
+import ConnectWallet from 'containers/ConnectWallet/ConnectWallet'
+import Welcome from 'containers/Welcome'
+import CreateWallet from 'containers/CreateWallet'
+import theme from 'theme'
+import { RootState } from 'store'
+import { useCallback, useEffect } from 'react'
+import { ConnectLedger } from 'ledgers/KeplrLedger'
+import { initialState as initialUserState } from 'store/user'
+
+import '@fontsource/poppins'
+import { updateUser } from 'store/user'
+import { checkForAdminToken, getAccountBalances, getNativeBalance, getAccountWallets } from 'utils/helpers'
+
+const App = () => {
+  const location = useLocation()
+  const themeColor = useSelector((state: RootState) => state.settings.theme)
+  const { lastLoggedAddress, addressBook, wallets } = useSelector((state: RootState) => state.userState)
+  const dispatch = useDispatch()
+
+  const connectAccount = useCallback(async () => {
+    try {
+      const { address } = await ConnectLedger()
+      if (address !== lastLoggedAddress) {
+        dispatch(updateUser({ ...initialUserState })
+        )
+      }
+      const currentBalances = await getAccountBalances(address)
+      // const userWallets = await getAccountWallets(address)
+      const admin = checkForAdminToken(currentBalances)
+      const userBalance = getNativeBalance(currentBalances)
+
+      dispatch(updateUser({ 
+        address: address,
+        lastLoggedAddress: address,
+        balances: currentBalances, 
+        nativeBalance: userBalance, 
+        isAdmin: admin,
+        wallets: wallets,
+        addressBook
+      }))
+
+    } catch (error: any) {
+      console.debug(error.message)
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("keplr_keystorechange", async () => {
+      await connectAccount()
+    });
+  }, [connectAccount])
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>MultiSig Initial</p>
-      </header>
-    </div>
+    <Container maxWidth='xl' style={{display: 'contents', height: '100vh', width: '100vw', overflow: 'auto'}}>
+      <ThemeProvider theme={theme[themeColor]}>
+        <CssBaseline />
+        <Routes>
+          <Route path="/" element={<ConnectWallet />} />
+        </Routes>
+        {location.pathname === '/' ? null : (
+          <Layout>
+            <Routes>
+              <Route element={<RequireKeplr />}>
+                <Route path="welcome">
+                  <Route index element={<Welcome />} />
+                </Route>
+                <Route path="create-wallet">
+                  <Route index element={<CreateWallet />} />
+                </Route>
+              </Route>
+              <Route path="*" element={<Navigate to="/" state={{ from: location }} />} />
+            </Routes>
+          </Layout>
+        )}
+      </ThemeProvider>
+    </Container>
   )
 }
 

src/api/endpoints.ts

@@ -1,5 +1,11 @@
-/* eslint-disable import/prefer-default-export */
-import { API_ADDRESS } from "../utils/constants";
+import { API_ADDRESS, EXPLORER_PUBLIC_ADDRESS } from "../utils/constants";
 
+/* eslint-disable import/prefer-default-export */
 export const GET_BALANCE_URL = (accountAddress: string) =>
   `${API_ADDRESS}/bank/balances/${accountAddress}`
+
+export const EXPLORER_ADDRESS_DETAILS = (accountAddress: string) =>
+  `${EXPLORER_PUBLIC_ADDRESS}/account/${accountAddress}`
+
+export const TX_HASH_DETAILS = (txHash: string) =>
+  `${EXPLORER_PUBLIC_ADDRESS}/transactions/${txHash}`