Merge pull request #143 from CudoVentures/cudos-dev

Release 1.1.0.5
cudoventures · Dec 14, 2022 · a88570d · a88570d
2 parents 45e26be + d3b54f9
commit a88570d
Show file tree

Hide file tree

Showing 20 changed files with 247 additions and 227 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "bignumber.js": "^9.0.2",
     "copy-to-clipboard": "^3.3.1",
     "cosmjs-types": "^0.4.1",
-    "cudosjs": "^1.1.1",
+    "cudosjs": "^1.2.5",
     "detect-browser": "^5.3.0",
     "dompurify": "^2.3.8",
     "graphql": "^16.3.0",
@@ -37,6 +37,7 @@
     "protobufjs": "^6.11.3",
     "ramda": "^0.28.0",
     "react": "^17.0.2",
+    "react-currency-input-field": "^3.6.9",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
     "react-markdown": "^8.0.3",
@@ -47,6 +48,7 @@
     "redux-persist": "^6.0.0",
     "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
+    "svg-loaders-react": "^2.2.1",
     "uint8-to-base64": "^0.2.0",
     "vite": "^2.9.8"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -29,6 +29,7 @@ import { ApolloLinks, defaultApolloLinks } from 'graphql/helpers'
 import { CHAIN_DETAILS } from 'utils/constants'
 import NetworkChangingLoading from 'components/NetworkChangeLoading'
 import { networkLoadingStyles } from 'components/NetworkChangeLoading/styles'
+import { isExtensionEnabled, SUPPORTED_WALLET } from 'cudosjs'
 
 const App = () => {
   const location = useLocation()
@@ -46,10 +47,10 @@ const App = () => {
 
   const dispatch = useDispatch()
 
-  const connectAccount = useCallback(async (chosenNetwork: string, ledgerType: string) => {
+  const connectAccount = useCallback(async (chosenNetwork: string, walletName: SUPPORTED_WALLET) => {
     try {
 
-      const { address } = await switchLedgerType(chosenNetwork!, ledgerType)
+      const { address } = await switchLedgerType(chosenNetwork!, walletName)
       if (address !== lastLoggedAddress || lastLoggedAddress === '') {
         dispatch(
           updateUserTransactions({
@@ -61,7 +62,7 @@ const App = () => {
         )
       }
 
-      const connectedUser = await connectUser(chosenNetwork, ledgerType)
+      const connectedUser = await connectUser(chosenNetwork, walletName)
       dispatch(updateUser(connectedUser))
 
     } catch (e) {
@@ -81,21 +82,21 @@ const App = () => {
         })
       )
 
-      await connectAccount(currentNetwork, CosmosNetworkConfig.KEPLR_LEDGER)
+      await connectAccount(currentNetwork, SUPPORTED_WALLET.Keplr)
     })
 
-    if (window.cosmostation) {
+    if (isExtensionEnabled(SUPPORTED_WALLET.Cosmostation)) {
       window.cosmostation.cosmos.on('accountChanged', async () => {
-        await connectAccount(currentNetwork, CosmosNetworkConfig.COSMOSTATION_LEDGER)
+        await connectAccount(currentNetwork, SUPPORTED_WALLET.Cosmostation)
       })
     }
 
     return () => {
       window.removeEventListener('keplr_keystorechange', async () => {
-        await connectAccount(currentNetwork, CosmosNetworkConfig.KEPLR_LEDGER)
+        await connectAccount(currentNetwork, SUPPORTED_WALLET.Keplr)
       })
       window.removeEventListener('accountChanged', async () => {
-        await connectAccount(currentNetwork, CosmosNetworkConfig.COSMOSTATION_LEDGER)
+        await connectAccount(currentNetwork, SUPPORTED_WALLET.Cosmostation)
       })
     }
   }, [])

diff --git a/src/components/Dialog/components/DelegationModal/Delegation.tsx b/src/components/Dialog/components/DelegationModal/Delegation.tsx
@@ -5,7 +5,6 @@ import {
   InputAdornment,
   Button,
   Stack,
-  Tooltip
 } from '@mui/material'
 import {
   AccountBalanceWalletRounded as AccountBalanceWalletRoundedIcon,
@@ -25,7 +24,6 @@ import {
 } from 'store/modal'
 import { calculateFee, delegate } from 'ledgers/transactions'
 import getMiddleEllipsis from 'utils/get_middle_ellipsis'
-import CudosLogo from 'assets/vectors/cudos-logo.svg'
 import AvatarName from 'components/AvatarName'
 import { useDispatch, useSelector } from 'react-redux'
 import BigNumber from 'bignumber.js'
@@ -38,12 +36,12 @@ import { updateUser } from 'store/profile'
 import { getStakedBalance, getWalletBalance } from 'utils/projectUtils'
 import { fetchDelegations } from 'api/getAccountDelegations'
 import { CHAIN_DETAILS } from 'utils/constants'
-
+import { customInputProps } from './helpers'
 import {
   ModalContainer,
   StyledTextField,
   SummaryContainer,
-  CancelRoundedIcon
+  CancelRoundedIcon,
 } from '../styles'
 
 const gasPrice = GasPrice.fromString(
@@ -68,7 +66,7 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
   useEffect(() => {
     let isMounted = true
     const loadBalance = async () => {
-      const client = await signingClient(chosenNetwork, connectedLedger)
+      const client = await signingClient(chosenNetwork, connectedLedger!)
 
       const walletBalance = await client.getBalance(
         address,
@@ -106,7 +104,7 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
       value: msg
     }
 
-    const client = await signingClient(chosenNetwork, connectedLedger)
+    const client = await signingClient(chosenNetwork, connectedLedger!)
 
     const gasUsed = await client.simulate(address, [msgAny], 'memo')
 
@@ -136,12 +134,6 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
     })
   }
 
-  const handleAmountChange = (
-    ev: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setDelegationAmount(ev.target.value)
-  }
-
   const delayInput = _.debounce((value) => handleAmount(value), 500)
 
   const handleMaxAmount = async () => {
@@ -175,7 +167,7 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
         validator?.address || '',
         amount || '',
         '',
-        connectedLedger
+        connectedLedger!
       )
 
       handleModal({
@@ -266,7 +258,7 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
                   >
                     {
                       CHAIN_DETAILS.CHAIN_NAME[
-                        chosenNetwork as keyof typeof CHAIN_DETAILS.CHAIN_NAME
+                      chosenNetwork as keyof typeof CHAIN_DETAILS.CHAIN_NAME
                       ]
                     }
                   </Typography>
@@ -371,44 +363,19 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
               </Box>
               <StyledTextField
                 variant="standard"
-                margin="dense"
                 type="number"
                 fullWidth
-                placeholder="0 CUDOS"
-                value={delegationAmount || ''}
-                InputProps={{
-                  disableUnderline: true,
-                  sx: {
-                    padding: 0
-                  },
-                  inputProps: {
-                    style: {
-                      padding: '0 10px'
-                    }
-                  },
-                  startAdornment: <img src={CudosLogo} alt="cudos-logo" />,
-                  endAdornment: (
-                    <Tooltip title="Total balance minus the highest estimated fee (estimated transaction fee x4)">
-                      <Button
-                        variant="contained"
-                        color="primary"
-                        size="small"
-                        sx={() => ({
-                          padding: '4px 15px',
-                          fontWeight: 600
-                        })}
-                        onClick={handleMaxAmount}
-                      >
-                        MAX
-                      </Button>
-                    </Tooltip>
+                onPaste={(e) => e.preventDefault()}
+                InputProps={
+                  customInputProps(
+                    delegationAmount,
+                    setDelegationAmount,
+                    handleMaxAmount
                   )
-                }}
+                }
                 sx={(theme) => ({
                   background: theme.custom.backgrounds.light
                 })}
-                size="small"
-                onChange={(e) => handleAmountChange(e)}
               />
             </Box>
           </Box>

diff --git a/src/components/Dialog/components/DelegationModal/helpers.tsx b/src/components/Dialog/components/DelegationModal/helpers.tsx
@@ -0,0 +1,65 @@
+import { Tooltip, Button } from '@mui/material'
+import CurrencyInput from 'react-currency-input-field'
+import CudosLogo from 'assets/vectors/cudos-logo.svg'
+import { customInputStyle } from "../styles"
+
+export const CustomEndAdorment = ({
+    handleClick
+}: {
+    handleClick: () => Promise<void>
+}) => {
+    return (
+        <Tooltip title="Total balance minus the highest estimated fee (estimated transaction fee x4)">
+            <Button
+                variant="contained"
+                color="primary"
+                size="small"
+                sx={() => ({
+                    padding: '4px 15px',
+                    fontWeight: 600
+                })}
+                onClick={handleClick}
+            >
+                MAX
+            </Button>
+        </Tooltip>
+    )
+}
+
+export const customInputProps = (
+    delegationAmount: string,
+    setDelegationAmount: React.Dispatch<React.SetStateAction<string>>,
+    handleMaxAmount: () => Promise<void>
+) => {
+
+    return {
+        inputComponent:
+            () => <CustomInputComponent
+                displayValue={delegationAmount}
+                setValue={setDelegationAmount}
+            />,
+        disableUnderline: true,
+        startAdornment: <img src={CudosLogo} alt="cudos-logo" />,
+        endAdornment: <CustomEndAdorment handleClick={handleMaxAmount} />
+    }
+}
+
+export const CustomInputComponent = ({
+    displayValue,
+    setValue
+}: {
+    displayValue: string,
+    setValue: React.Dispatch<React.SetStateAction<string>>
+}) => {
+
+    return (
+        <CurrencyInput
+            autoFocus={true}
+            style={customInputStyle}
+            placeholder="0 CUDOS"
+            decimalsLimit={18}
+            value={displayValue}
+            onValueChange={(value) => setValue(value!)}
+        />
+    )
+}
diff --git a/src/components/Dialog/components/styles.ts b/src/components/Dialog/components/styles.ts
@@ -1,5 +1,6 @@
 import { styled, Box, TextField, BoxProps } from '@mui/material'
 import { CancelRounded } from '@mui/icons-material'
+import { COLORS_DARK_THEME } from 'theme/colors'
 
 export const StyledTextField = styled(TextField)(({ theme }) => ({
   background: theme.custom.backgrounds.dark,
@@ -49,3 +50,13 @@ export const CancelRoundedIcon = styled(CancelRounded)(({ theme }) => ({
   right: 32,
   cursor: 'pointer'
 }))
+
+export const customInputStyle = {
+  color: 'white',
+  outline: 'none',
+  border: '0px',
+  background: COLORS_DARK_THEME.LIGHT_BACKGROUND,
+  height: '30px',
+  width: '100%',
+  padding: '0 10px'
+}
diff --git a/src/components/Layout/NetworkInfo.tsx b/src/components/Layout/NetworkInfo.tsx
@@ -58,7 +58,8 @@ const NetworkInfo = () => {
     setOpen(false)
   }
 
-  const collapsable = networksToDisplayInMenu.length > 1
+  // const collapsable = networksToDisplayInMenu.length > 1
+  const collapsable = false
 
   return (
 

diff --git a/src/components/Layout/UserInfo.tsx b/src/components/Layout/UserInfo.tsx
@@ -15,6 +15,7 @@ import { CHAIN_DETAILS } from 'utils/constants'
 import { COLORS_DARK_THEME } from 'theme/colors'
 
 import getMiddleEllipsis from 'utils/get_middle_ellipsis'
+import { SUPPORTED_WALLET } from 'cudosjs'
 import { styles } from './styles'
 
 const UserInfo = () => {
@@ -66,7 +67,7 @@ const UserInfo = () => {
         <Box sx={styles.userInnerContainer}>
           <Box>
             <img
-              src={connectedLedger === 'Keplr' ? KeplrLogo : CosmostationLogo}
+              src={connectedLedger === SUPPORTED_WALLET.Keplr ? KeplrLogo : CosmostationLogo}
               alt="Logo"
               style={{ position: 'absolute', left: 15, top: 12 }}
             />