truncate address

nym-wallet/src/components/AppBar.tsx

@@ -5,6 +5,7 @@ import { Logout } from '@mui/icons-material'
 import { ClientContext } from '../context/main'
 import { CopyToClipboard, NetworkSelector } from '.'
 import { Node as NodeIcon } from '../svg-icons/node'
+import { splice } from '../utils'
 
 export const AppBar = () => {
   const { userBalance, clientDetails, showSettings, logOut, handleShowSettings } = useContext(ClientContext)
@@ -24,7 +25,7 @@ export const AppBar = () => {
                 <Grid item>
                   <AppBarItem
                     primaryText="Address"
-                    secondaryText={clientDetails?.client_address}
+                    secondaryText={splice(4, 35, clientDetails?.client_address)}
                     Action={<CopyToClipboard text={clientDetails?.client_address} iconButton />}
                   />
                 </Grid>

nym-wallet/src/hooks/useGetBalance.tsx

@@ -14,7 +14,7 @@ export type TUseuserBalance = {
   isLoading: boolean
   fetchBalance: () => void
   clearBalance: () => void
-  fetchTokenAllocation: (address: string) => Promise<void>
+  handleRefresh: () => void
 }
 
 export const useGetBalance = (address?: string): TUseuserBalance => {
@@ -69,6 +69,10 @@ export const useGetBalance = (address?: string): TUseuserBalance => {
   const clearTokenAllocation = () => setTokenAllocation(undefined)
 
   useEffect(() => {
+    handleRefresh(address)
+  }, [address])
+
+  const handleRefresh = (address?: string) => {
     if (address) {
       fetchBalance()
       fetchTokenAllocation(address)
@@ -76,7 +80,7 @@ export const useGetBalance = (address?: string): TUseuserBalance => {
       clearBalance()
       clearTokenAllocation()
     }
-  }, [address])
+  }
 
   return {
     error,
@@ -84,7 +88,7 @@ export const useGetBalance = (address?: string): TUseuserBalance => {
     balance,
     tokenAllocation,
     fetchBalance,
-    fetchTokenAllocation,
     clearBalance,
+    handleRefresh,
   }
 }

nym-wallet/src/pages/balance/vesting.tsx

@@ -46,6 +46,9 @@ export const VestingCard = () => {
           <VestingTable />
         </Grid>
       </Grid>
+      <pre style={{ background: 'black', color: 'white', padding: 15 }}>
+        {JSON.stringify(userBalance.tokenAllocation)}
+      </pre>
     </NymCard>
   )
 }

nym-wallet/src/pages/receive/index.tsx

@@ -5,6 +5,7 @@ import { CopyToClipboard, NymCard } from '../../components'
 import { Layout } from '../../layouts'
 import { ClientContext } from '../../context/main'
 import { ArrowBack } from '@mui/icons-material'
+import { splice } from '../../utils'
 
 export const Receive = () => {
   const { clientDetails, currency } = useContext(ClientContext)
@@ -26,7 +27,7 @@ export const Receive = () => {
               }}
               component="span"
             >
-              Your address: {clientDetails?.client_address}
+              Your address: {splice(4, 35, clientDetails?.client_address)}
             </Typography>
             <CopyToClipboard text={clientDetails?.client_address || ''} iconButton />
           </Box>

nym-wallet/src/pages/send/SendForm.tsx

@@ -3,6 +3,7 @@ import { Grid, InputAdornment, TextField, Typography } from '@mui/material'
 import { useFormContext } from 'react-hook-form'
 import { ClientContext } from '../../context/main'
 import { Fee } from '../../components'
+import { splice } from '../..//utils'
 
 export const SendForm = () => {
   const {
@@ -14,7 +15,7 @@ export const SendForm = () => {
   return (
     <Grid container spacing={3}>
       <Grid item xs={12}>
-        <Typography variant="body2">Your address: {clientDetails?.client_address}</Typography>
+        <Typography variant="body2">Your address: {splice(4, 35, clientDetails?.client_address)}</Typography>
       </Grid>
 
       <Grid item xs={12}>

nym-wallet/src/utils/index.ts

@@ -124,3 +124,11 @@ export const currencyMap = (network?: Network) => {
 
   return currency
 }
+
+export const splice = (start: number, deleteCount: number, address?: string) => {
+  if (address) {
+    const array = address.split('')
+    array.splice(start, deleteCount, '...')
+    return array.join('')
+  }
+}