Merge pull request #56 from CudoVentures/cudos-dev

Cudos dev
cudoventures · Jul 20, 2023 · b7bbb1f · b7bbb1f
2 parents 58eafce + b8ff0d8
commit b7bbb1f
Show file tree

Hide file tree

Showing 21 changed files with 728 additions and 292 deletions.
diff --git a/example.env.file b/example.env.file
@@ -12,4 +12,5 @@ VITE_APP_FIREBASE_PROJECT_ID="example-project-id"
 VITE_APP_FIREBASE_DOMAIN="example-project-id.firebaseapp.com"
 VITE_APP_FIREBASE_ADDRESS_BOOK_COLLECTION="example-address-book"
 VITE_APP_FIREBASE_AUTH_NONCE_URL="https://example-firebase.com/getNonce"
-VITE_APP_FIREBASE_AUTH_VERIFY_URL="https://example-firebase.com/verifySignedNonceMsg"
+VITE_APP_FIREBASE_AUTH_VERIFY_URL="https://example-firebase.com/verifySignedNonceMsg"
+VITE_APP_DEPLOYMENT_VERSION='v1.2.3'
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "cudos-multisig-v2",
+  "license": "MIT",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -12,7 +13,6 @@
   "dependencies": {
     "@apollo/client": "^3.6.9",
     "@babel/core": "^7.0.0-0",
-    "@cosmostation/cosmos-client": "^0.0.1",
     "@cosmostation/extension-client": "^0.1.7",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
@@ -25,7 +25,7 @@
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
     "csstype": "^3.0.10",
-    "cudosjs": "^1.2.1",
+    "cudosjs": "1.3.4",
     "firebase": "^9.9.1",
     "goober": "^2.1.1",
     "graphql": "^16.5.0",
@@ -43,7 +43,9 @@
     "redux-persist": "^6.0.0",
     "rollup": "^2.0.0",
     "styled-components": "^5.3.5",
-    "swiper": "^8.3.1"
+    "svg-loaders-react": "^2.2.1",
+    "swiper": "^8.3.1",
+    "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.18.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,6 @@ 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'
-
 import Layout from 'components/Layout'
 import RequireLedger from 'components/RequireLedger/RequireLedger'
 import ConnectWallet from 'containers/ConnectWallet/ConnectWallet'
@@ -13,17 +12,16 @@ import { RootState } from 'store'
 import { useCallback, useEffect } from 'react'
 import { ApolloProvider } from '@apollo/client'
 import { useApollo } from './graphql/client'
-
-import '@fontsource/poppins'
 import { updateUser } from 'store/user'
 import WalletDetails from 'containers/WalletDetails'
 import RequireWallet from 'components/RequireWallet/RequireWallet'
-import { COSMOSTATION_LEDGER, KEPLR_LEDGER } from 'utils/constants'
 import { connectUser } from 'utils/config'
 import { initialState as initialUserState } from 'store/user'
 import { updateModalState } from 'store/modals'
 import { auth, getAddressBook } from 'utils/firebase'
 import { signInWithCustomToken } from 'firebase/auth'
+import { isExtensionEnabled, SUPPORTED_WALLET } from 'cudosjs'
+import '@fontsource/poppins'
 
 const App = () => {
   const location = useLocation()
@@ -32,15 +30,15 @@ const App = () => {
   const { firebaseToken, address } = useSelector((state: RootState) => state.userState);
   const dispatch = useDispatch()
 
-  const connectAccount = useCallback(async (ledgerType: string) => {
+  const connectAccount = useCallback(async (walletName: SUPPORTED_WALLET) => {
 
     try {
       dispatch(updateModalState({
         loading: true,
         loadingType: true
       }))
       dispatch(updateUser(initialUserState))
-      const connectedUser = await connectUser(ledgerType)
+      const connectedUser = await connectUser(walletName)
       dispatch(updateUser(connectedUser))
 
     } catch (error) {
@@ -55,18 +53,18 @@ const App = () => {
 
   useEffect(() => {
 
-    if (window.keplr) {
+    if (isExtensionEnabled(SUPPORTED_WALLET.Keplr)) {
       window.addEventListener("keplr_keystorechange",
         async () => {
-          await connectAccount(KEPLR_LEDGER)
+          await connectAccount(SUPPORTED_WALLET.Keplr)
           return
         });
     }
 
-    if (window.cosmostation) {
+    if (isExtensionEnabled(SUPPORTED_WALLET.Cosmostation)) {
       window.cosmostation.cosmos.on("accountChanged",
         async () => {
-          await connectAccount(COSMOSTATION_LEDGER)
+          await connectAccount(SUPPORTED_WALLET.Cosmostation)
           return
         });
     }

diff --git a/src/assets/vectors/edit-icon.svg b/src/assets/vectors/edit-icon.svg
diff --git a/src/assets/vectors/link-icon-fillable.svg b/src/assets/vectors/link-icon-fillable.svg
diff --git a/src/components/Dialog/ReusableModal/helpers.tsx b/src/components/Dialog/ReusableModal/helpers.tsx
@@ -11,7 +11,6 @@ import copy from "copy-to-clipboard"
 import EditIcon from 'assets/vectors/blue-edit-icon.svg'
 import ToolTipIcon from 'assets/vectors/tooltip-icon.svg'
 import { getSigningClient } from "utils/config"
-import { Coin, DeliverTxResponse, EncodeObject, GasPrice, StdFee } from "cudosjs"
 import { convertVotingPeriodToSeconds, formatAddress } from "utils/helpers"
 import { createArrayOfCoinsFromMapper, createArrayOfRecipients, HtmlTooltip, multisendRow, MultiSendUser, totalAmountDue } from "utils/multiSendTableHelper"
 import { Fragment, useState } from "react"
@@ -30,11 +29,20 @@ import {
     NATIVE_TOKEN_DENOM
 } from "utils/constants"
 
+import {
+    Coin,
+    DeliverTxResponse,
+    EncodeObject,
+    GasPrice,
+    StdFee,
+    SUPPORTED_WALLET
+} from "cudosjs"
+
 export const executeMsgs = async (
     signer: string,
     msgs: EncodeObject[],
     fee: StdFee,
-    connectedLedger: string
+    connectedLedger: SUPPORTED_WALLET
 ):
     Promise<DeliverTxResponse> => {
 
@@ -51,7 +59,7 @@ export const getMultiSendMsgAndFees = async (
     multisendRows: multisendRow[],
     walletAddress: string,
     signerAddress: string,
-    connectedLedger: string
+    connectedLedger: SUPPORTED_WALLET
 ): Promise<{
     msg: EncodeObject;
     fee: StdFee;
@@ -81,7 +89,7 @@ export const getSingleSendMsgAndFees = async (
     amount: Coin[],
     walletAddress: string,
     signerAddress: string,
-    connectedLedger: string
+    connectedLedger: SUPPORTED_WALLET
 ): Promise<{
     msg: EncodeObject;
     fee: StdFee;
@@ -104,7 +112,7 @@ export const getMembersUpdateMsgAndFees = async (
     walletId: number,
     walletAddress: string,
     signerAddress: string,
-    connectedLedger: string
+    connectedLedger: SUPPORTED_WALLET
 ): Promise<{
     msg: EncodeObject;
     fee: StdFee;
@@ -127,7 +135,7 @@ export const getWalletDecisionPolicyUpdateMsgAndFees = async (
     votingPeriod: number,
     walletAddress: string,
     signerAddress: string,
-    connectedLedger: string
+    connectedLedger: SUPPORTED_WALLET
 ): Promise<{
     msg: EncodeObject;
     fee: StdFee;
@@ -155,7 +163,7 @@ export const getWalletMetadataUpdateMsgAndFees = async (
     walletId: number,
     walletAddress: string,
     signerAddress: string,
-    connectedLedger: string
+    connectedLedger: SUPPORTED_WALLET
 ): Promise<{
     msg: EncodeObject;
     fee: StdFee;

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -8,10 +8,10 @@ const Header = () => {
   const location = useLocation()
 
   return (
-    <Box sx= {location.pathname === '/' ? {padding: '1.45rem 1rem 1rem 1rem'}:{ padding: '1rem 1rem 1rem 1rem'}}>
-      <Box sx={{marginBottom: '10px', alignItems: 'center', display: 'flex', flex: '1' }}>
-        <a href={window.location.origin}>
-          <img src={LogoHeader} alt="logo"/>
+    <Box sx={location.pathname === '/' ? { padding: '1.45rem 1rem 1rem 1rem' } : { padding: '1rem 1rem 1rem 1rem' }}>
+      <Box sx={{ marginBottom: '10px', alignItems: 'center', display: 'flex', flex: '1' }}>
+        <a style={{ pointerEvents: location.pathname === '/' || location.pathname === '/welcome' ? 'none' : 'auto' }} href={window.location.origin}>
+          <img src={LogoHeader} alt="logo" />
         </a>
         {location.pathname === '/' ? null : (
           <Box

diff --git a/src/components/Layout/Networkinfo.tsx b/src/components/Layout/Networkinfo.tsx
@@ -8,62 +8,60 @@ import grayGlobusIcon from 'assets/vectors/gray-globus-icon.svg'
 import { OpenInNewRounded as OpenInNewRoundedIcon } from '@mui/icons-material'
 import { Typography, Box, Collapse } from '@mui/material'
 
+enum CHAIN_IDS {
+  local = 'cudos-local-network',
+  dev = 'cudos-dev-test-network',
+  private = 'cudos-testnet-private-3',
+  public = 'cudos-testnet-public-3',
+  mainnet = 'cudos-1'
+}
+
 const chainDetails = {
-  local: { aliasName: 'CUDOS Local Testnet' },
-  private: { aliasName: 'CUDOS Private Testnet' },
-  public: {
-    aliasName: 'CUDOS Public Testnet',
-    link: 'http://multisig.testnet.cudos.org'
-  },
-  mainnet: {
-    aliasName: 'CUDOS Main Network',
-    link: 'http://multisig.cudos.org'
+  CHAIN_IDS: {
+    [CHAIN_IDS.local]: { aliasName: 'CUDOS Local Testnet' },
+    [CHAIN_IDS.dev]: { aliasName: 'CUDOS Dev Environment' },
+    [CHAIN_IDS.private]: { aliasName: 'CUDOS Private Testnet' },
+    [CHAIN_IDS.public]: { aliasName: 'CUDOS Public Testnet' },
+    [CHAIN_IDS.mainnet]: { aliasName: 'CUDOS Main Network' },
   },
+  LINKS: {
+    [CHAIN_IDS.public]: 'http://multisig.testnet.cudos.org',
+    [CHAIN_IDS.mainnet]: 'http://multisig.cudos.org'
+  }
 }
 
 export const chainIDToAlias = (chainID: string): string => {
-
-  if (chainID.toLowerCase().includes('local')) {
-    return chainDetails.local.aliasName
-  }
-
-  if (chainID.toLowerCase().includes('private')) {
-    return chainDetails.private.aliasName
-  }
-
-  if (chainID.toLowerCase().includes('public')) {
-    return chainDetails.public.aliasName
-  }
-
-  if (chainID.toLowerCase() === 'cudos-1' || chainID.toLowerCase().includes('mainnet')) {
-    return chainDetails.mainnet.aliasName
-  }
-
-  return "Unidentified Network"
+  return chainDetails.CHAIN_IDS[chainID].aliasName || "Unidentified Network"
 }
 
 const NetworkInfo = () => {
-  const networksToDisplayInMenu = [chainDetails.public, chainDetails.mainnet]
+  const networksToDisplayInMenu = [CHAIN_IDS.public, CHAIN_IDS.mainnet]
   const [open, setOpen] = useState(false)
 
+  // Disabling network selection menu
+  const collapsable = false
+
   return (
-    <StyledNetwork>
-      <Box onClick={() => setOpen(!open)} style={styles.userContainer}>
+    <StyledNetwork sx={
+      !collapsable ? {} : { cursor: 'pointer' }}
+    >
+      <Box onClick={!collapsable ? () => { } : () => setOpen(true)} style={styles.userContainer}>
         <Box style={styles.userInnerContainer}>
           <img style={{ marginRight: '10px' }} src={globusIcon} alt="globus-icon" />
           <Typography>
             {chainIDToAlias(CHAIN_ID)}
           </Typography>
-          <Box style={{ marginLeft: '15px' }}>
-            <img
-              style={{
-                cursor: 'pointer',
-                transform: open ? 'rotate(180deg)' : 'rotate(360deg)'
-              }}
-              src={ArrowIcon}
-              alt="Arrow Icon"
-            />
-          </Box>
+          {collapsable ?
+            <Box style={{ marginLeft: '15px' }}>
+              <img
+                style={{
+                  cursor: 'pointer',
+                  transform: open ? 'rotate(180deg)' : 'rotate(360deg)'
+                }}
+                src={ArrowIcon}
+                alt="Arrow Icon"
+              />
+            </Box> : null}
         </Box>
       </Box>
       <Collapse
@@ -73,21 +71,21 @@ const NetworkInfo = () => {
       >
         <Box gap={3} style={styles.networkSelectionMenuContainer}>
           {
-            networksToDisplayInMenu.map((network) => {
+            networksToDisplayInMenu.map((network, idx) => {
               const [hovered, setHovered] = useState<boolean>(false)
 
               return (
-                chainIDToAlias(CHAIN_ID) !== network.aliasName ?
-                  <Box onMouseOver={() => setHovered(true)} onMouseOut={() => setHovered(false)}>
-                    <a style={styles.anchorStyle} href={network.link}>
+                CHAIN_ID !== network ?
+                  <Box key={network + idx.toString()} onMouseOver={() => setHovered(true)} onMouseOut={() => setHovered(false)}>
+                    <a style={styles.anchorStyle} href={chainDetails.LINKS[network]}>
                       <img
                         style={{ marginRight: '10px' }}
                         src={hovered ? globusIcon : grayGlobusIcon}
                         alt="globus-icon"
                       />
                       <Typography
                         color={hovered ? COLORS_DARK_THEME.PRIMARY_BLUE : COLORS_DARK_THEME.SECONDARY_TEXT}>
-                        {network.aliasName}
+                        {chainDetails.CHAIN_IDS[network].aliasName}
                       </Typography>
                       <OpenInNewRoundedIcon
                         style={{ marginLeft: '5px' }}
@@ -102,7 +100,7 @@ const NetworkInfo = () => {
           }
         </Box>
       </Collapse>
-    </StyledNetwork>
+    </StyledNetwork >
   )
 }