Merge pull request #18 from invariant-labs/align-ui

align last changes from a0
invariant-labs · Oct 24, 2024 · 1becd99 · 1becd99
2 parents 5aba36e + 5ada32a
commit 1becd99
Show file tree

Hide file tree

Showing 36 changed files with 322 additions and 146 deletions.
diff --git a/src/components/AnimatedButton/style.ts b/src/components/AnimatedButton/style.ts
@@ -46,6 +46,7 @@ const useStyles = makeStyles()(() => {
       position: 'relative',
       overflow: 'hidden',
       zIndex: 4,
+
       '&:disabled': {
         background: colors.invariant.light,
         color: colors.invariant.componentBcg,
@@ -63,9 +64,9 @@ const useStyles = makeStyles()(() => {
     },
 
     buttonRelease: {
-      background: `${colors.invariant.component} !important`,
+      background: `${colors.invariant.componentBcg} !important`,
       '&:hover': {
-        background: `${colors.invariant.component} !important`
+        background: `${colors.invariant.componentBcg} !important`
       }
     },
     background: {

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -191,13 +191,6 @@ export const Header: React.FC<IHeader> = ({
                 rpcStatus={rpcStatus}
               />
             </Box>
-            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
-              <SelectChainButton
-                activeChain={activeChain}
-                chains={CHAINS}
-                onSelect={onChainSelect}
-              />
-            </Box>
             <SelectNetworkButton
               name={typeOfNetwork}
               networks={[
@@ -216,6 +209,13 @@ export const Header: React.FC<IHeader> = ({
               ]}
               onSelect={onNetworkSelect}
             />
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+              <SelectChainButton
+                activeChain={activeChain}
+                chains={CHAINS}
+                onSelect={onChainSelect}
+              />
+            </Box>
           </Grid>
           <ChangeWalletButton
             name={

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx
@@ -29,7 +29,8 @@ export const Null: Story = {
     style: {},
     disabled: false,
     isBalanceLoading: false,
-    walletUninitialized: true
+    walletUninitialized: true,
+    currencyIsUnknown: true
   }
 }
 
@@ -51,6 +52,7 @@ export const BTC: Story = {
     style: {},
     disabled: false,
     isBalanceLoading: false,
-    walletUninitialized: false
+    walletUninitialized: false,
+    currencyIsUnknown: true
   }
 }
diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
@@ -1,13 +1,15 @@
-import { Button, Grid, Input, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Grid, Input, Tooltip, Typography } from '@mui/material'
 import loadingAnimation from '@static/gif/loading.gif'
 import { formatNumber, getScaleFromString } from '@utils/utils'
 import React, { CSSProperties, useRef } from 'react'
 import useStyles from './style'
+import icons from '@static/icons'
 
 interface IProps {
   setValue: (value: string) => void
   currency: string | null
   currencyIconSrc?: string
+  currencyIsUnknown: boolean
   value?: string
   placeholder?: string
   onMaxClick: () => void
@@ -28,6 +30,7 @@ interface IProps {
 export const DepositAmountInput: React.FC<IProps> = ({
   currency,
   currencyIconSrc,
+  currencyIsUnknown,
   value,
   setValue,
   placeholder,
@@ -44,9 +47,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
   isBalanceLoading,
   walletUninitialized
 }) => {
-  const { classes } = useStyles({
-    isSelected: !!currency && !walletUninitialized
-  })
+  const { classes } = useStyles({ isSelected: !!currency && !walletUninitialized })
 
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -109,7 +110,12 @@ export const DepositAmountInput: React.FC<IProps> = ({
             wrap='nowrap'>
             {currency !== null ? (
               <>
-                <img alt='currency icon' src={currencyIconSrc} className={classes.currencyIcon} />
+                <Box className={classes.imageContainer}>
+                  <img alt='currency icon' src={currencyIconSrc} className={classes.currencyIcon} />
+                  {currencyIsUnknown && (
+                    <img className={classes.warningIcon} src={icons.warningIcon} />
+                  )}
+                </Box>
                 <Typography className={classes.currencySymbol}>{currency}</Typography>
               </>
             ) : (

diff --git a/src/components/Inputs/DepositAmountInput/style.ts b/src/components/Inputs/DepositAmountInput/style.ts
@@ -95,12 +95,26 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
     color: colors.invariant.Error,
     backgroundColor: `${colors.invariant.Error}40`
   },
-  currencyIcon: {
+  imageContainer: {
     width: 20,
     height: 20,
     marginRight: 8,
-    borderRadius: '100%',
-    background: colors.white.main
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  currencyIcon: {
+    width: 20,
+    height: 20,
+    borderRadius: '100%'
+  },
+  warningIcon: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    bottom: -6,
+    right: -6
   },
   currencySymbol: {
     ...typography.body3,

diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx
@@ -2,7 +2,7 @@ import Select from '@components/Inputs/Select/Select'
 import { OutlinedButton } from '@components/OutlinedButton/OutlinedButton'
 import { Grid, Input, Tooltip, Typography } from '@mui/material'
 import loadingAnimation from '@static/gif/loading.gif'
-import { formatNumber } from '@utils/utils'
+import { formatNumber, trimDecimalZeros } from '@utils/utils'
 import { SwapToken } from '@store/selectors/wallet'
 import classNames from 'classnames'
 import React, { CSSProperties, useRef } from 'react'
@@ -141,6 +141,11 @@ export const AmountInput: React.FC<IProps> = ({
             inputProps={{
               inputMode: 'decimal'
             }}
+            onBlur={() => {
+              if (value) {
+                setValue(trimDecimalZeros(value))
+              }
+            }}
           />
         )}
       </Grid>

diff --git a/src/components/Inputs/Select/Select.tsx b/src/components/Inputs/Select/Select.tsx
@@ -3,7 +3,7 @@ import icons from '@static/icons'
 import classNames from 'classnames'
 import useStyles from './style'
 import { blurContent, unblurContent } from '@utils/uiUtils'
-import { Button } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import SelectTokenModal from '@components/Modals/SelectModals/SelectTokenModal/SelectTokenModal'
 import { SwapToken } from '@store/selectors/wallet'
@@ -71,13 +71,16 @@ export const Select: React.FC<ISelectModal> = ({
         onClick={handleClick}
         startIcon={
           !current ? null : (
-            <img
-              className={classes.icon}
-              src={current.logoURI ?? icons.SNY}
-              alt={current.name + 'logo'}
-              width='20'
-              height='20'
-            />
+            <Box className={classes.imageContainer}>
+              <img
+                className={classes.icon}
+                src={current.logoURI ?? icons.SNY}
+                alt={current.name + 'logo'}
+                width='20'
+                height='20'
+              />
+              {current.isUnknown && <img className={classes.warningIcon} src={icons.warningIcon} />}
+            </Box>
           )
         }
         endIcon={<ExpandMoreIcon />}

diff --git a/src/components/Inputs/Select/style.ts b/src/components/Inputs/Select/style.ts
@@ -36,12 +36,25 @@ export const useStyles = makeStyles()((theme: Theme) => {
       top: 1,
       color: colors.white.main
     },
+    imageContainer: {
+      minWidth: 20,
+      maxWidth: 20,
+      height: 20,
+      marginRight: 5,
+      position: 'relative'
+    },
     icon: {
       marginRight: 5,
       minWidth: 20,
       height: 20,
-      borderRadius: '100%',
-      background: colors.white.main
+      borderRadius: '100%'
+    },
+    warningIcon: {
+      position: 'absolute',
+      width: 12,
+      height: 12,
+      bottom: -6,
+      right: -6
     }
   }
 })

diff --git a/src/components/Modals/SelectChain/SelectChain.tsx b/src/components/Modals/SelectChain/SelectChain.tsx
@@ -47,7 +47,7 @@ export const SelectChain: React.FC<ISelectChainModal> = ({
                 chain.name === activeChain.name ? classes.active : null
               )}
               item
-              key={`chain-${chain.name}`}
+              key={`chain-${activeChain}`}
               onClick={() => {
                 onSelect(chain)
               }}>

diff --git a/src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx b/src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx
@@ -46,22 +46,22 @@ export const SelectMainnetRPC: React.FC<ISelectMainnetRPC> = ({
   useEffect(() => {
     if (!open && !customApplied) {
       setAddress('')
-    } else {
-      setCustomApplied(false)
-      setButtonApplied(false)
-      setActiveCustom(false)
-      setAddress('')
     }
-  }, [activeRPC])
+  }, [open])
 
   useEffect(() => {
     if (!networks.some(net => net.rpc === activeRPC)) {
       setCustomApplied(true)
       setButtonApplied(true)
       setActiveCustom(true)
       setAddress(activeRPC)
+    } else {
+      setCustomApplied(false)
+      setButtonApplied(false)
+      setActiveCustom(false)
+      setAddress('')
     }
-  }, [])
+  }, [activeRPC])
 
   return (
     <Popover

diff --git a/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx b/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx
@@ -23,7 +23,6 @@ import { SwapToken } from '@store/selectors/wallet'
 import Scrollbars from 'rc-scrollbars'
 import icons from '@static/icons'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
-import { addressFromTokenId } from '@alephium/web3'
 
 export interface ISelectTokenModal {
   tokens: Record<string, SwapToken>
@@ -291,12 +290,17 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
                       setValue('')
                       handleClose()
                     }}>
-                    <img
-                      className={classes.tokenIcon}
-                      src={token.logoURI}
-                      loading='lazy'
-                      alt={token.name + 'logo'}
-                    />
+                    <Box className={classes.imageContainer}>
+                      <img
+                        className={classes.tokenIcon}
+                        src={token.logoURI}
+                        loading='lazy'
+                        alt={token.name + 'logo'}
+                      />
+                      {token.isUnknown && (
+                        <img className={classes.warningIcon} src={icons.warningIcon} />
+                      )}
+                    </Box>
                     <Grid container className={classes.tokenContainer}>
                       <Grid
                         container
@@ -309,9 +313,7 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
                         </Typography>
                         <Grid className={classes.tokenAddress} container direction='column'>
                           <a
-                            href={`https://testnet.alephium.org/addresses/${addressFromTokenId(
-                              token.assetAddress
-                            )}`}
+                            href={`https://ascan.alephzero.org/testnet/account/${token.assetAddress}`}
                             target='_blank'
                             rel='noopener noreferrer'
                             onClick={event => {

diff --git a/src/components/Modals/SelectModals/style.ts b/src/components/Modals/SelectModals/style.ts
@@ -130,8 +130,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       width: 24,
       height: 24,
       borderRadius: '50%',
-      marginRight: 8,
-      background: colors.white.main
+      marginRight: 8
     },
     tokenList: {
       background: colors.invariant.component,
@@ -215,15 +214,27 @@ const useStyles = makeStyles()((theme: Theme) => {
         color: colors.invariant.text
       }
     },
-
+    imageContainer: {
+      minWidth: 30,
+      maxWidth: 30,
+      height: 30,
+      marginRight: 16,
+      position: 'relative'
+    },
     tokenIcon: {
       minWidth: 30,
       maxWidth: 30,
       height: 30,
       marginRight: 16,
       borderRadius: '50%',
-      boxShadow: '0px 0px 10px rgba(216, 255, 181, 0.5)',
-      background: colors.white.main
+      boxShadow: '0px 0px 10px rgba(216, 255, 181, 0.5)'
+    },
+    warningIcon: {
+      position: 'absolute',
+      width: 12,
+      height: 12,
+      bottom: -6,
+      right: -6
     },
     tokenBalance: {
       ...typography.body2,