From 454212b9afb9b0c928dca681f400590c250ff77c Mon Sep 17 00:00:00 2001
From: Rachel Ho <rachelhoyuenyi@gmail.com>
Date: Thu, 7 Oct 2021 18:44:30 +0800
Subject: [PATCH 01/12] token amount & usd balance display for starred accounts

---
 components/Layout/LeftMenu.tsx       | 32 ++---------
 components/Layout/StarredAccount.tsx | 86 ++++++++++++++++++++++++++++
 components/Layout/styles.ts          |  2 +-
 3 files changed, 91 insertions(+), 29 deletions(-)
 create mode 100644 components/Layout/StarredAccount.tsx

diff --git a/components/Layout/LeftMenu.tsx b/components/Layout/LeftMenu.tsx
index dbd7e006..a028af25 100644
--- a/components/Layout/LeftMenu.tsx
+++ b/components/Layout/LeftMenu.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import {
-  Avatar,
   Box,
   Button,
   List,
@@ -20,11 +19,11 @@ import AddressBookIcon from '../../assets/images/icons/icon_address_book.svg'
 import Logo from '../../assets/images/logo.svg'
 import LogoExpended from '../../assets/images/logo_expended.svg'
 import useStyles from './styles'
+import StarredAccount from './StarredAccount'
 import useIconProps from '../../misc/useIconProps'
 import { MenuWidth } from '.'
 import { useGeneralContext } from '../../contexts/GeneralContext'
 import { CustomTheme } from '../../misc/theme'
-import cryptocurrencies from '../../misc/cryptocurrencies'
 import { useWalletsContext } from '../../contexts/WalletsContext'
 
 interface LeftMenuProps {
@@ -179,32 +178,9 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ activeItem, isMenuExpanded, setIsMe
           </Link>
           {accounts
             .filter((account) => account.fav)
-            .map((account) => {
-              const crypto = cryptocurrencies[account.crypto]
-              return (
-                <Link
-                  key={account.address}
-                  href="/account/[address]"
-                  as={`/account/${account.address}`}
-                >
-                  <ListItem className={classes.favMenuItem} button component="a">
-                    <ListItemIcon>
-                      <Avatar
-                        alt={crypto.name}
-                        src={crypto.image}
-                        style={{ height: themeStyle.spacing(3), width: themeStyle.spacing(3) }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={account.name}
-                      primaryTypographyProps={{
-                        variant: 'h6',
-                      }}
-                    />
-                  </ListItem>
-                </Link>
-              )
-            })}
+            .map((account) => (
+              <StarredAccount account={account} />
+            ))}
         </Box>
       </List>
     </Paper>
diff --git a/components/Layout/StarredAccount.tsx b/components/Layout/StarredAccount.tsx
new file mode 100644
index 00000000..96fcea58
--- /dev/null
+++ b/components/Layout/StarredAccount.tsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import Link from 'next/link'
+import useTranslation from 'next-translate/useTranslation'
+import { gql, useSubscription } from '@apollo/client'
+import {
+  Avatar,
+  Box,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  useTheme,
+  CircularProgress,
+  Typography,
+} from '@material-ui/core'
+import { useGeneralContext } from '../../contexts/GeneralContext'
+import {
+  formatCurrency,
+  formatTokenAmount,
+  getTotalBalance,
+  getTotalTokenAmount,
+  transformGqlAcountBalance,
+} from '../../misc/utils'
+import { CustomTheme } from '../../misc/theme'
+import cryptocurrencies from '../../misc/cryptocurrencies'
+import useStyles from './styles'
+import { getLatestAccountBalance } from '../../graphql/queries/accountBalances'
+
+interface StarredAccountProps {
+  account: Account
+}
+
+const StarredAccount: React.FC<StarredAccountProps> = ({ account }) => {
+  const themeStyle: CustomTheme = useTheme()
+  const { lang } = useTranslation('common')
+  const { currency } = useGeneralContext()
+  const classes = useStyles()
+  const crypto = cryptocurrencies[account.crypto]
+  // Latest data
+  const { data: balanceData, loading } = useSubscription(
+    gql`
+      ${getLatestAccountBalance(account.crypto)}
+    `,
+    { variables: { address: account.address } }
+  )
+  const { tokenAmounts, usdBalance } = React.useMemo(() => {
+    const accountBalance = transformGqlAcountBalance(balanceData, Date.now())
+    return {
+      tokenAmounts: getTotalTokenAmount(accountBalance).amount,
+      usdBalance: getTotalBalance(accountBalance).balance,
+    }
+  }, [balanceData])
+  return (
+    <Link key={account.address} href="/account/[address]" as={`/account/${account.address}`}>
+      <ListItem className={classes.favMenuItem} button component="a">
+        <ListItemIcon>
+          <Avatar
+            alt={crypto.name}
+            src={crypto.image}
+            style={{ height: themeStyle.spacing(4), width: themeStyle.spacing(4) }}
+          />
+        </ListItemIcon>
+        <Box display="flex" flexDirection="column">
+          <ListItemText
+            primary={account.name}
+            primaryTypographyProps={{
+              variant: 'h6',
+            }}
+          />
+          {loading ? (
+            <Box>
+              <CircularProgress size={20} />
+            </Box>
+          ) : (
+            <Box>
+              <Typography>{formatTokenAmount(tokenAmounts, account.crypto, lang)}</Typography>
+              {/* after USD balance is added */}
+              {/* <Typography>{formatCurrency(usdBalance, currency, lang)}</Typography> */}
+            </Box>
+          )}
+        </Box>
+      </ListItem>
+    </Link>
+  )
+}
+
+export default StarredAccount
diff --git a/components/Layout/styles.ts b/components/Layout/styles.ts
index 647acb44..1b1bdd34 100644
--- a/components/Layout/styles.ts
+++ b/components/Layout/styles.ts
@@ -67,7 +67,7 @@ const useStyles = makeStyles(
       width: 'fit-content',
     },
     favMenuItem: {
-      height: theme.spacing(6),
+      height: theme.spacing(8),
       borderRadius: theme.spacing(1),
       whiteSpace: 'nowrap',
       paddingLeft: theme.spacing(1.5),

From be6cb3aadf748e50509046992e9c2cbeba443d2e Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Fri, 8 Oct 2021 23:19:31 +0800
Subject: [PATCH 02/12] persisted password for 15 min

---
 components/Layout/index.tsx               | 22 +++++++++++++++++++-
 components/UnlockPasswordDialog/index.tsx | 12 +----------
 contexts/WalletsContext.tsx               | 16 ++++++++++++---
 misc/usePersistedState.ts                 | 25 ++++++++++++++++++-----
 tests/components/Layout/index.test.tsx    |  1 +
 tests/contexts/WalletsContext.test.tsx    |  1 +
 6 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index b44af7ff..140494e0 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -35,9 +35,11 @@ const Layout: React.FC<LayoutProps> = ({
   const classes = useStyles()
   const theme = useTheme()
   const [isMenuExpanded, setIsMenuExpanded, loaded] = usePersistedState('isMenuExpanded', true)
-  const { isFirstTimeUser, isUnlocked, isChromeExtInstalled } = useWalletsContext()
+  const { isFirstTimeUser, isUnlocked, isChromeExtInstalled, unlockWallets, password } =
+    useWalletsContext()
   // Hide menu for chrome extension
   const router = useRouter()
+  const defaultPassword = router.query.password
   const { isChromeExt } = useIsChromeExt()
 
   // Open ConfirmTransactionDialog with correct query params
@@ -57,6 +59,24 @@ const Layout: React.FC<LayoutProps> = ({
     }
   }, [router])
 
+  const initPassword = React.useCallback(async () => {
+    try {
+      if (!isUnlocked) {
+        if (defaultPassword) {
+          await unlockWallets(String(defaultPassword))
+        } else if (password) {
+          await unlockWallets(password)
+        }
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  }, [defaultPassword, password, isUnlocked, unlockWallets])
+
+  React.useEffect(() => {
+    initPassword()
+  }, [initPassword])
+
   return loaded ? (
     <>
       <NavBar
diff --git a/components/UnlockPasswordDialog/index.tsx b/components/UnlockPasswordDialog/index.tsx
index cc2bbfa5..2c8ba61d 100644
--- a/components/UnlockPasswordDialog/index.tsx
+++ b/components/UnlockPasswordDialog/index.tsx
@@ -1,7 +1,6 @@
 import { Dialog, DialogTitle, IconButton } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
-import { useRouter } from 'next/router'
 import useStyles from './styles'
 import BackIcon from '../../assets/images/icons/icon_back.svg'
 import { useWalletsContext } from '../../contexts/WalletsContext'
@@ -28,11 +27,8 @@ const UnlockPasswordDialog: React.FC = () => {
   const { t } = useTranslation('common')
   const classes = useStyles()
   const iconProps = useIconProps()
-  const { wallets, reset, unlockWallets } = useWalletsContext()
+  const { wallets, reset } = useWalletsContext()
   const isMobile = useIsMobile()
-  const {
-    query: { password: defaultPassword },
-  } = useRouter()
   const [isReset, setReset] = React.useState(false)
   const [stage, setStage, toPrevStage, isPrevStageAvailable] = useStateHistory<UnlockPasswordStage>(
     UnlockPasswordStage.UnlockPasswordStage
@@ -76,12 +72,6 @@ const UnlockPasswordDialog: React.FC = () => {
     }
   }, [stage, t])
 
-  React.useEffect(() => {
-    if (defaultPassword) {
-      unlockWallets(String(defaultPassword))
-    }
-  }, [defaultPassword, unlockWallets])
-
   return (
     <Dialog fullWidth open={!(wallets.length !== 0 || isReset)} fullScreen={isMobile}>
       {isPrevStageAvailable && stage !== 'unlock' ? (
diff --git a/contexts/WalletsContext.tsx b/contexts/WalletsContext.tsx
index 8061e69f..5a9a6091 100644
--- a/contexts/WalletsContext.tsx
+++ b/contexts/WalletsContext.tsx
@@ -1,5 +1,8 @@
 import React from 'react'
 import sendMsgToChromeExt from '../misc/sendMsgToChromeExt'
+import usePersistedState from '../misc/usePersistedState'
+
+const PASSWORD_EXPIRES_IN_MIN = 15
 
 interface WalletsState {
   isFirstTimeUser: boolean
@@ -39,9 +42,16 @@ const WalletsContext = React.createContext<WalletsState>(initialState)
 const WalletsProvider: React.FC = ({ children }) => {
   const [wallets, setWallets] = React.useState<Wallet[]>([])
   const [accounts, setAccounts] = React.useState<Account[]>([])
-  const [isFirstTimeUser, setIsFirstTimeUser] = React.useState(false)
-  const [isChromeExtInstalled, setIsChromeExtInstalled] = React.useState(false)
-  const [password, setPassword] = React.useState('')
+  const [isFirstTimeUser, setIsFirstTimeUser] = usePersistedState('isFirstTimeUser', false)
+  const [isChromeExtInstalled, setIsChromeExtInstalled] = usePersistedState(
+    'isChromeExtInstalled',
+    false
+  )
+  const [password, setPassword] = usePersistedState(
+    'password',
+    '',
+    PASSWORD_EXPIRES_IN_MIN * 60 * 1000
+  )
 
   const reset = React.useCallback(async () => {
     await sendMsgToChromeExt({
diff --git a/misc/usePersistedState.ts b/misc/usePersistedState.ts
index ca36578a..17d58e33 100644
--- a/misc/usePersistedState.ts
+++ b/misc/usePersistedState.ts
@@ -1,11 +1,19 @@
 import React from 'react'
 
-const retrievePersistedValue = <P>(key: string, initialValue: P) => {
+const retrievePersistedValue = <P>(key: string, initialValue: P, expireWithinMs?: number) => {
   try {
     const persistedString = localStorage.getItem(key)
     if (!persistedString) {
       return initialValue
     }
+    if (expireWithinMs) {
+      const lastUpdatedAt = localStorage.getItem(`${key}-last-updated-at`)
+      if (Number(lastUpdatedAt) + expireWithinMs < Date.now()) {
+        localStorage.removeItem(key)
+        localStorage.removeItem(`${key}-last-updated-at`)
+        return initialValue
+      }
+    }
     const persistedValue = JSON.parse(persistedString)
     return persistedValue
   } catch (err) {
@@ -15,13 +23,20 @@ const retrievePersistedValue = <P>(key: string, initialValue: P) => {
 
 const usePersistedState = <P>(
   key: string,
-  initialValue: P
+  initialValue: P,
+  expireWithinMs?: number
 ): [P, React.Dispatch<React.SetStateAction<P>>, boolean] => {
-  const [value, setValue] = React.useState(retrievePersistedValue(key, initialValue))
+  const persistedValue = retrievePersistedValue(key, initialValue, expireWithinMs)
+  const [value, setValue] = React.useState(persistedValue)
   const [loaded, setLoaded] = React.useState(false)
   React.useEffect(() => {
-    localStorage.setItem(key, JSON.stringify(value))
-  }, [value])
+    if (persistedValue !== value) {
+      localStorage.setItem(key, JSON.stringify(value))
+      if (expireWithinMs) {
+        localStorage.setItem(`${key}-last-updated-at`, String(Date.now()))
+      }
+    }
+  }, [value, persistedValue, expireWithinMs])
   // for conditional rendering in SSR
   React.useEffect(() => {
     setLoaded(true)
diff --git a/tests/components/Layout/index.test.tsx b/tests/components/Layout/index.test.tsx
index a0449a8f..4dba1b65 100644
--- a/tests/components/Layout/index.test.tsx
+++ b/tests/components/Layout/index.test.tsx
@@ -10,6 +10,7 @@ const mockWalletsContext = {
 jest.mock('next/router', () => ({
   useRouter: () => ({
     asPath: 'https://localhost:3000',
+    query: {},
   }),
 }))
 jest.mock('../../../contexts/WalletsContext', () => ({
diff --git a/tests/contexts/WalletsContext.test.tsx b/tests/contexts/WalletsContext.test.tsx
index d4791e44..4667de32 100644
--- a/tests/contexts/WalletsContext.test.tsx
+++ b/tests/contexts/WalletsContext.test.tsx
@@ -421,6 +421,7 @@ describe('context: WalletsContext', () => {
 })
 
 afterEach(() => {
+  localStorage.clear()
   cleanup()
   jest.clearAllMocks()
 })

From 6f39e2a5a127b41eb538cae8d468ef4a8e172d9c Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Fri, 8 Oct 2021 23:26:58 +0800
Subject: [PATCH 03/12] added loading state for unlocking wallets

---
 components/Layout/index.tsx | 13 ++++++++-----
 contexts/WalletsContext.tsx |  9 ++++++---
 custom.d.ts                 |  2 ++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 140494e0..dc804207 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -35,7 +35,7 @@ const Layout: React.FC<LayoutProps> = ({
   const classes = useStyles()
   const theme = useTheme()
   const [isMenuExpanded, setIsMenuExpanded, loaded] = usePersistedState('isMenuExpanded', true)
-  const { isFirstTimeUser, isUnlocked, isChromeExtInstalled, unlockWallets, password } =
+  const { isFirstTimeUser, appUnlockState, isChromeExtInstalled, unlockWallets, password } =
     useWalletsContext()
   // Hide menu for chrome extension
   const router = useRouter()
@@ -61,7 +61,7 @@ const Layout: React.FC<LayoutProps> = ({
 
   const initPassword = React.useCallback(async () => {
     try {
-      if (!isUnlocked) {
+      if (appUnlockState !== 'unlocked') {
         if (defaultPassword) {
           await unlockWallets(String(defaultPassword))
         } else if (password) {
@@ -71,7 +71,7 @@ const Layout: React.FC<LayoutProps> = ({
     } catch (err) {
       console.log(err)
     }
-  }, [defaultPassword, password, isUnlocked, unlockWallets])
+  }, [defaultPassword, password, appUnlockState, unlockWallets])
 
   React.useEffect(() => {
     initPassword()
@@ -100,9 +100,12 @@ const Layout: React.FC<LayoutProps> = ({
         }}
       >
         {passwordRequired && isFirstTimeUser ? <GetStarted /> : null}
-        {!passwordRequired || isUnlocked ? children : null}
+        {!passwordRequired || appUnlockState === 'unlocked' ? children : null}
       </Box>
-      {passwordRequired && !isFirstTimeUser && isChromeExtInstalled ? (
+      {passwordRequired &&
+      !isFirstTimeUser &&
+      isChromeExtInstalled &&
+      appUnlockState === 'locked' ? (
         <UnlockPasswordDialog />
       ) : null}
       {!isChromeExtInstalled ? <ChromeExtDialog /> : null}
diff --git a/contexts/WalletsContext.tsx b/contexts/WalletsContext.tsx
index 5a9a6091..53919760 100644
--- a/contexts/WalletsContext.tsx
+++ b/contexts/WalletsContext.tsx
@@ -6,7 +6,7 @@ const PASSWORD_EXPIRES_IN_MIN = 15
 
 interface WalletsState {
   isFirstTimeUser: boolean
-  isUnlocked: boolean
+  appUnlockState: AppUnlockState
   isChromeExtInstalled: boolean
   wallets: Wallet[]
   accounts: Account[]
@@ -30,7 +30,7 @@ interface WalletsState {
 
 const initialState: WalletsState = {
   isFirstTimeUser: false,
-  isUnlocked: false,
+  appUnlockState: 'locked',
   isChromeExtInstalled: false,
   wallets: [],
   accounts: [],
@@ -42,6 +42,7 @@ const WalletsContext = React.createContext<WalletsState>(initialState)
 const WalletsProvider: React.FC = ({ children }) => {
   const [wallets, setWallets] = React.useState<Wallet[]>([])
   const [accounts, setAccounts] = React.useState<Account[]>([])
+  const [appUnlockState, setAppUnlockState] = React.useState(initialState.appUnlockState)
   const [isFirstTimeUser, setIsFirstTimeUser] = usePersistedState('isFirstTimeUser', false)
   const [isChromeExtInstalled, setIsChromeExtInstalled] = usePersistedState(
     'isChromeExtInstalled',
@@ -78,6 +79,7 @@ const WalletsProvider: React.FC = ({ children }) => {
   const unlockWallets = React.useCallback(
     async (pw: string) => {
       if (!isFirstTimeUser) {
+        setAppUnlockState('unlocking')
         const walletaResponse = await sendMsgToChromeExt({
           event: 'getWallets',
           data: {
@@ -92,6 +94,7 @@ const WalletsProvider: React.FC = ({ children }) => {
         })
         setWallets(walletaResponse.wallets)
         setAccounts(accountsResponse.accounts)
+        setAppUnlockState('unlocked')
       }
       setPassword(pw)
     },
@@ -261,7 +264,7 @@ const WalletsProvider: React.FC = ({ children }) => {
     <WalletsContext.Provider
       value={{
         isFirstTimeUser,
-        isUnlocked: !!wallets.length,
+        appUnlockState,
         isChromeExtInstalled,
         wallets,
         accounts,
diff --git a/custom.d.ts b/custom.d.ts
index 1ce61dfb..4e275316 100644
--- a/custom.d.ts
+++ b/custom.d.ts
@@ -5,6 +5,8 @@ declare module '*.svg' {
 }
 declare module '@ledgerhq/hw-transport-webusb'
 
+type AppUnlockState = 'locked' | 'unlocking' | 'unlocked'
+
 interface Account {
   walletId: string
   address: string

From eddff15734ad9a5abddd1476e7bf757fcf9e822a Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Fri, 8 Oct 2021 23:27:35 +0800
Subject: [PATCH 04/12] update test

---
 tests/components/Layout/__snapshots__/index.test.tsx.snap | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/components/Layout/__snapshots__/index.test.tsx.snap b/tests/components/Layout/__snapshots__/index.test.tsx.snap
index 18a6c479..593f16aa 100644
--- a/tests/components/Layout/__snapshots__/index.test.tsx.snap
+++ b/tests/components/Layout/__snapshots__/index.test.tsx.snap
@@ -67,7 +67,6 @@ Array [
       }
     }
   />,
-  <UnlockPasswordDialog />,
 ]
 `;
 
@@ -114,6 +113,5 @@ Array [
       }
     }
   />,
-  <UnlockPasswordDialog />,
 ]
 `;

From 54feb38d91750b609d90517be21204fbf819a090 Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Sat, 9 Oct 2021 00:44:28 +0800
Subject: [PATCH 05/12] fix e2e test

---
 components/Layout/index.tsx                   |  5 +-
 .../UnlockPasswordDialog/UnlockPassword.tsx   |  9 +++-
 components/UnlockPasswordDialog/index.tsx     |  4 +-
 contexts/WalletsContext.tsx                   | 50 +++++++++++--------
 .../onboarding/createWallet.spec.ts           |  4 ++
 ...Phrase.ts => importMnemonicPhrase.spec.ts} |  4 ++
 .../{unlockApp.ts => unlockApp.spec.ts}       |  0
 locales/en/common.json                        |  1 +
 .../Layout/__snapshots__/index.test.tsx.snap  |  2 +
 .../__snapshots__/index.test.tsx.snap         | 33 ++++++++++--
 10 files changed, 79 insertions(+), 33 deletions(-)
 rename cypress/integration/onboarding/{importMnemonicPhrase.ts => importMnemonicPhrase.spec.ts} (91%)
 rename cypress/integration/onboarding/{unlockApp.ts => unlockApp.spec.ts} (100%)

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index dc804207..174ce877 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -102,10 +102,7 @@ const Layout: React.FC<LayoutProps> = ({
         {passwordRequired && isFirstTimeUser ? <GetStarted /> : null}
         {!passwordRequired || appUnlockState === 'unlocked' ? children : null}
       </Box>
-      {passwordRequired &&
-      !isFirstTimeUser &&
-      isChromeExtInstalled &&
-      appUnlockState === 'locked' ? (
+      {passwordRequired && !isFirstTimeUser && isChromeExtInstalled ? (
         <UnlockPasswordDialog />
       ) : null}
       {!isChromeExtInstalled ? <ChromeExtDialog /> : null}
diff --git a/components/UnlockPasswordDialog/UnlockPassword.tsx b/components/UnlockPasswordDialog/UnlockPassword.tsx
index 026e56bc..9c073d61 100644
--- a/components/UnlockPasswordDialog/UnlockPassword.tsx
+++ b/components/UnlockPasswordDialog/UnlockPassword.tsx
@@ -1,4 +1,10 @@
-import { Button, DialogActions, DialogContent, DialogContentText } from '@material-ui/core'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Typography,
+} from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
 import useStyles from './styles'
@@ -44,6 +50,7 @@ const UnlockPassword: React.FC<UnlockPasswordProps> = ({ onForgot }) => {
           helperText={error}
           onChange={(e) => setPassword(e.target.value)}
         />
+        <Typography variant="body2">{t('unlock pasword helper text')}</Typography>
       </DialogContent>
       <DialogActions className={classes.action}>
         <Button
diff --git a/components/UnlockPasswordDialog/index.tsx b/components/UnlockPasswordDialog/index.tsx
index 2c8ba61d..3671da4e 100644
--- a/components/UnlockPasswordDialog/index.tsx
+++ b/components/UnlockPasswordDialog/index.tsx
@@ -27,7 +27,7 @@ const UnlockPasswordDialog: React.FC = () => {
   const { t } = useTranslation('common')
   const classes = useStyles()
   const iconProps = useIconProps()
-  const { wallets, reset } = useWalletsContext()
+  const { wallets, reset, appUnlockState } = useWalletsContext()
   const isMobile = useIsMobile()
   const [isReset, setReset] = React.useState(false)
   const [stage, setStage, toPrevStage, isPrevStageAvailable] = useStateHistory<UnlockPasswordStage>(
@@ -73,7 +73,7 @@ const UnlockPasswordDialog: React.FC = () => {
   }, [stage, t])
 
   return (
-    <Dialog fullWidth open={!(wallets.length !== 0 || isReset)} fullScreen={isMobile}>
+    <Dialog fullWidth open={appUnlockState === 'locked' && !isReset} fullScreen={isMobile}>
       {isPrevStageAvailable && stage !== 'unlock' ? (
         <IconButton className={classes.backButton} onClick={toPrevStage}>
           <BackIcon {...iconProps} />
diff --git a/contexts/WalletsContext.tsx b/contexts/WalletsContext.tsx
index 53919760..6c6a215d 100644
--- a/contexts/WalletsContext.tsx
+++ b/contexts/WalletsContext.tsx
@@ -62,7 +62,8 @@ const WalletsProvider: React.FC = ({ children }) => {
     setAccounts([])
     setWallets([])
     setPassword('')
-  }, [setIsFirstTimeUser, setAccounts, setWallets, setPassword])
+    setAppUnlockState('locked')
+  }, [setIsFirstTimeUser, setAccounts, setWallets, setPassword, setAppUnlockState])
 
   const checkIsFirstTimeUser = React.useCallback(async () => {
     try {
@@ -78,27 +79,32 @@ const WalletsProvider: React.FC = ({ children }) => {
 
   const unlockWallets = React.useCallback(
     async (pw: string) => {
-      if (!isFirstTimeUser) {
-        setAppUnlockState('unlocking')
-        const walletaResponse = await sendMsgToChromeExt({
-          event: 'getWallets',
-          data: {
-            password: pw,
-          },
-        })
-        const accountsResponse = await sendMsgToChromeExt({
-          event: 'getAccounts',
-          data: {
-            password: pw,
-          },
-        })
-        setWallets(walletaResponse.wallets)
-        setAccounts(accountsResponse.accounts)
-        setAppUnlockState('unlocked')
+      try {
+        if (!isFirstTimeUser) {
+          setAppUnlockState('unlocking')
+          const walletaResponse = await sendMsgToChromeExt({
+            event: 'getWallets',
+            data: {
+              password: pw,
+            },
+          })
+          const accountsResponse = await sendMsgToChromeExt({
+            event: 'getAccounts',
+            data: {
+              password: pw,
+            },
+          })
+          setWallets(walletaResponse.wallets)
+          setAccounts(accountsResponse.accounts)
+          setAppUnlockState('unlocked')
+        }
+        setPassword(pw)
+      } catch (err) {
+        setAppUnlockState('locked')
+        throw err
       }
-      setPassword(pw)
     },
-    [isFirstTimeUser, setPassword, setWallets, setAccounts]
+    [isFirstTimeUser, setPassword, setWallets, setAccounts, setAppUnlockState]
   )
 
   const updatePassword = React.useCallback(
@@ -171,13 +177,13 @@ const WalletsProvider: React.FC = ({ children }) => {
       setWallets((ws) => {
         const newWallets = ws.filter((w) => w.id !== id)
         if (!newWallets.length) {
-          setIsFirstTimeUser(true)
+          reset()
         }
         return newWallets
       })
       setAccounts((acs) => acs.filter((a) => a.walletId !== id))
     },
-    [password, accounts, setWallets, setIsFirstTimeUser, setAccounts]
+    [password, accounts, setWallets, setIsFirstTimeUser, setAccounts, reset]
   )
 
   const addAccount = React.useCallback(
diff --git a/cypress/integration/onboarding/createWallet.spec.ts b/cypress/integration/onboarding/createWallet.spec.ts
index 5cee13cb..6bde0ec3 100644
--- a/cypress/integration/onboarding/createWallet.spec.ts
+++ b/cypress/integration/onboarding/createWallet.spec.ts
@@ -27,6 +27,10 @@ describe('Create wallet on first visit', () => {
                 mnemonic:
                   'olive praise state suggest leader scan weekend exhibit glance gravity rebel kingdom',
               })
+            } else if (msg.event === 'getWallets') {
+              callback({ wallets: [testWallet] })
+            } else if (msg.event === 'getAccounts') {
+              callback({ accounts: [testAccount] })
             }
           },
         }
diff --git a/cypress/integration/onboarding/importMnemonicPhrase.ts b/cypress/integration/onboarding/importMnemonicPhrase.spec.ts
similarity index 91%
rename from cypress/integration/onboarding/importMnemonicPhrase.ts
rename to cypress/integration/onboarding/importMnemonicPhrase.spec.ts
index 8c231354..1eb6d8e8 100644
--- a/cypress/integration/onboarding/importMnemonicPhrase.ts
+++ b/cypress/integration/onboarding/importMnemonicPhrase.spec.ts
@@ -26,6 +26,10 @@ describe('Create wallet by importing secret recovery phrase on first visit', ()
               callback({ wallet: testWallet, accounts: [testAccount] })
             } else if (msg.event === 'verifyMnemonic') {
               callback({ mnemonic })
+            } else if (msg.event === 'getWallets') {
+              callback({ wallets: [testWallet] })
+            } else if (msg.event === 'getAccounts') {
+              callback({ accounts: [testAccount] })
             }
           },
         }
diff --git a/cypress/integration/onboarding/unlockApp.ts b/cypress/integration/onboarding/unlockApp.spec.ts
similarity index 100%
rename from cypress/integration/onboarding/unlockApp.ts
rename to cypress/integration/onboarding/unlockApp.spec.ts
diff --git a/locales/en/common.json b/locales/en/common.json
index 109034e7..1e44d476 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -36,6 +36,7 @@
   "invalid mnemonic": "Invalid secret recovery phrase",
   "unlock password title": "Unlock Password",
   "unlock password description": "Enter password to unlock your application",
+  "unlock pasword helper text": "* Require after 15 minutes",
   "incorrect password": "Incorrect password",
   "security password title": "Wallet Security Password",
   "security password description": "Create a password to access your wallet",
diff --git a/tests/components/Layout/__snapshots__/index.test.tsx.snap b/tests/components/Layout/__snapshots__/index.test.tsx.snap
index 593f16aa..18a6c479 100644
--- a/tests/components/Layout/__snapshots__/index.test.tsx.snap
+++ b/tests/components/Layout/__snapshots__/index.test.tsx.snap
@@ -67,6 +67,7 @@ Array [
       }
     }
   />,
+  <UnlockPasswordDialog />,
 ]
 `;
 
@@ -113,5 +114,6 @@ Array [
       }
     }
   />,
+  <UnlockPasswordDialog />,
 ]
 `;
diff --git a/tests/components/UnlockPasswordDialog/__snapshots__/index.test.tsx.snap b/tests/components/UnlockPasswordDialog/__snapshots__/index.test.tsx.snap
index 32962d6e..b051930a 100644
--- a/tests/components/UnlockPasswordDialog/__snapshots__/index.test.tsx.snap
+++ b/tests/components/UnlockPasswordDialog/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`component: UnlockPasswordDialog renders correctly 1`] = `
   fullScreen={false}
   fullWidth={true}
   id="dialog"
-  open={true}
+  open={false}
 >
   <div
     className="MuiDialogTitle-root"
@@ -37,6 +37,11 @@ exports[`component: UnlockPasswordDialog renders correctly 1`] = `
         placeholder="common:password"
         value=""
       />
+      <p
+        className="MuiTypography-root MuiTypography-body2"
+      >
+        common:unlock pasword helper text
+      </p>
     </div>
     <div
       className="MuiDialogActions-root HookGlobalStyles-action-5 MuiDialogActions-spacing"
@@ -98,7 +103,7 @@ exports[`component: UnlockPasswordDialog renders correctly when password is chan
   fullScreen={false}
   fullWidth={true}
   id="dialog"
-  open={true}
+  open={false}
 >
   <div
     className="MuiDialogTitle-root"
@@ -130,6 +135,11 @@ exports[`component: UnlockPasswordDialog renders correctly when password is chan
         placeholder="common:password"
         value="password"
       />
+      <p
+        className="MuiTypography-root MuiTypography-body2"
+      >
+        common:unlock pasword helper text
+      </p>
     </div>
     <div
       className="MuiDialogActions-root HookGlobalStyles-action-5 MuiDialogActions-spacing"
@@ -197,7 +207,7 @@ exports[`component: UnlockPasswordDialog renders error state correctly 1`] = `
   fullScreen={false}
   fullWidth={true}
   id="dialog"
-  open={true}
+  open={false}
 >
   <div
     className="MuiDialogTitle-root"
@@ -229,6 +239,11 @@ exports[`component: UnlockPasswordDialog renders error state correctly 1`] = `
         placeholder="common:password"
         value=""
       />
+      <p
+        className="MuiTypography-root MuiTypography-body2"
+      >
+        common:unlock pasword helper text
+      </p>
     </div>
     <div
       className="MuiDialogActions-root HookGlobalStyles-action-5 MuiDialogActions-spacing"
@@ -293,7 +308,7 @@ exports[`component: UnlockPasswordDialog renders non empty password correctly 1`
   fullScreen={false}
   fullWidth={true}
   id="dialog"
-  open={true}
+  open={false}
 >
   <div
     className="MuiDialogTitle-root"
@@ -325,6 +340,11 @@ exports[`component: UnlockPasswordDialog renders non empty password correctly 1`
         placeholder="common:password"
         value=""
       />
+      <p
+        className="MuiTypography-root MuiTypography-body2"
+      >
+        common:unlock pasword helper text
+      </p>
     </div>
     <div
       className="MuiDialogActions-root HookGlobalStyles-action-5 MuiDialogActions-spacing"
@@ -421,6 +441,11 @@ exports[`component: UnlockPasswordDialog renders non empty wallets correctly 1`]
         placeholder="common:password"
         value=""
       />
+      <p
+        className="MuiTypography-root MuiTypography-body2"
+      >
+        common:unlock pasword helper text
+      </p>
     </div>
     <div
       className="MuiDialogActions-root HookGlobalStyles-action-5 MuiDialogActions-spacing"

From 23ebb222f080fef5d1350edfb5d1c9c6f5526f1c Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Sat, 9 Oct 2021 00:50:00 +0800
Subject: [PATCH 06/12] fix change password

---
 pages/settings/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/settings/index.tsx b/pages/settings/index.tsx
index 5e82c7e4..c84c80ba 100644
--- a/pages/settings/index.tsx
+++ b/pages/settings/index.tsx
@@ -17,7 +17,7 @@ const Setting: React.FC = () => {
   const { isChromeExt } = useIsChromeExt()
 
   return (
-    <Layout passwordRequired>
+    <Layout>
       <Box display="flex" alignItems="center" mb={2}>
         {isChromeExt ? (
           <IconButton style={{ marginRight: theme.spacing(2) }} onClick={() => router.back()}>

From e0152535551d4d23fc2599e8706dcbaf227f9f7a Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Tue, 12 Oct 2021 16:16:34 +0800
Subject: [PATCH 07/12] add type

---
 custom.d.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/custom.d.ts b/custom.d.ts
index 4e275316..f79de1cc 100644
--- a/custom.d.ts
+++ b/custom.d.ts
@@ -283,6 +283,14 @@ interface TransactionMsgSend {
   }
 }
 
+interface TransactionMsgMultiSend {
+  typeUrl: '/cosmos.bank.v1beta1.MsgMultiSend'
+  value: {
+    inputs: Array<{ address: string; coins: Array<{ amount: string; denom: string }> }>
+    outputs: Array<{ address: string; coins: Array<{ amount: string; denom: string }> }>
+  }
+}
+
 interface TransactionMsgIBCTransfer {
   typeUrl: '/ibc.applications.transfer.v1.MsgTransfer'
   value: {

From f1c07932891985c1e9d3fa12acac41d1ccabe753 Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Tue, 12 Oct 2021 20:44:00 +0800
Subject: [PATCH 08/12] added multi send tx and tx table row

---
 components/ActivitiesTable/Row.tsx            | 91 +++++++++++++++----
 .../ConfirmStageContent/MultiSendContent.tsx  | 61 +++++++++++++
 .../ConfirmStageContent/index.tsx             | 10 ++
 components/ConfirmTransactionDialog/index.tsx |  8 +-
 components/SendDialog/index.tsx               | 77 ++++++++++++----
 custom.d.ts                                   |  1 +
 misc/cryptocurrencies.dev.ts                  |  1 +
 misc/cryptocurrencies.prod.ts                 |  1 +
 misc/cryptocurrencies.ts                      |  1 +
 misc/utils.ts                                 | 23 +++++
 10 files changed, 235 insertions(+), 39 deletions(-)
 create mode 100644 components/ConfirmTransactionDialog/ConfirmStageContent/MultiSendContent.tsx

diff --git a/components/ActivitiesTable/Row.tsx b/components/ActivitiesTable/Row.tsx
index ca9f9303..36a73b6f 100644
--- a/components/ActivitiesTable/Row.tsx
+++ b/components/ActivitiesTable/Row.tsx
@@ -1,6 +1,7 @@
-import { Box, Avatar, Typography, Link } from '@material-ui/core'
+import { Box, Avatar, Typography, Link, useTheme } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
+import { InputSharp } from '@material-ui/icons'
 import { useGetStyles } from './styles'
 import { formatCrypto, formatTokenAmount, getVoteAnswer } from '../../misc/utils'
 import useIsMobile from '../../misc/useIsMobile'
@@ -24,6 +25,7 @@ interface RowProps {
 
 const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
   const { classes } = useGetStyles(activity.tag)
+  const theme = useTheme()
   const { t, lang } = useTranslation('common')
   const isMobile = useIsMobile()
   const accountDetail = account
@@ -200,27 +202,78 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
     }
     if (activity.tag === 'multisend') {
       return (
-        <>
-          <Box display="flex" alignItems="center" flexWrap="wrap">
-            <Avatar className={classes.accountAvatar} alt={accountDetail.name} src={crypto.image} />
-            <Typography className={classes.validatorTypography}>{accountDetail.name}</Typography>
-            <Typography>
-              {t(`${activity.tag}Activity`)}
-              <span className={classes.amount}>
-                {formatTokenAmount(activity.amount, crypto.name, lang)}
-              </span>
-              {t('toTheFollowingRecepients')}
-            </Typography>
-          </Box>
+        <Box>
+          {activity.detail.inputs.map((input, i) => {
+            return (
+              <Box
+                key={`${input.address}_${i}`}
+                mr={1}
+                display="flex"
+                alignItems="center"
+                flexWrap="wrap"
+              >
+                <Link
+                  href={`${crypto.blockExplorerBaseUrl}/accounts/${input.address}`}
+                  target="_blank"
+                  variant="body1"
+                  style={{ marginRight: theme.spacing(1) }}
+                >
+                  {input.address === account.address ? (
+                    <AccountAvatar
+                      ledgerIconDisabled
+                      account={account}
+                      address={address}
+                      hideAddress
+                      size="small"
+                    />
+                  ) : (
+                    input.address
+                  )}
+                </Link>
+                <Typography>{t(`${activity.tag}Activity`)}</Typography>
+                <span className={classes.amount}>
+                  {formatTokenAmount(input.tokenAmount, crypto.name, lang)}
+                </span>
+                {i === activity.detail.inputs.length - 1 ? (
+                  <Typography>{t('toTheFollowingRecepients')}</Typography>
+                ) : null}
+              </Box>
+            )
+          })}
           <Box className={classes.detail}>
-            {activity.detail.map((x, i) => (
-              <Typography key={`${x.address}_${i}`}>
-                {x.address} {t('received')}{' '}
-                <span className={classes.amount}>{formatCrypto(x.amount, crypto.name, lang)}</span>
-              </Typography>
+            {activity.detail.outputs.map((output, i) => (
+              <Box
+                key={`${output.address}_${i}`}
+                display="flex"
+                alignItems="center"
+                flexWrap="wrap"
+              >
+                <Link
+                  href={`${crypto.blockExplorerBaseUrl}/accounts/${output.address}`}
+                  target="_blank"
+                  variant="body1"
+                  style={{ marginRight: theme.spacing(1) }}
+                >
+                  {output.address === account.address ? (
+                    <AccountAvatar
+                      ledgerIconDisabled
+                      account={account}
+                      address={address}
+                      hideAddress
+                      size="small"
+                    />
+                  ) : (
+                    output.address
+                  )}
+                </Link>
+                <Typography>{t('received')}</Typography>
+                <span className={classes.amount}>
+                  {formatTokenAmount(output.tokenAmount, crypto.name, lang)}
+                </span>
+              </Box>
             ))}
           </Box>
-        </>
+        </Box>
       )
     }
     if (activity.tag === 'createValidator') {
diff --git a/components/ConfirmTransactionDialog/ConfirmStageContent/MultiSendContent.tsx b/components/ConfirmTransactionDialog/ConfirmStageContent/MultiSendContent.tsx
new file mode 100644
index 00000000..64c652f1
--- /dev/null
+++ b/components/ConfirmTransactionDialog/ConfirmStageContent/MultiSendContent.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { Box, Divider, Typography, useTheme } from '@material-ui/core'
+import useTranslation from 'next-translate/useTranslation'
+import SendIcon from '../../../assets/images/icons/icon_send_tx.svg'
+import { formatTokenAmount, getTokenAmountFromDenoms } from '../../../misc/utils'
+
+interface MultiSendContentProps {
+  totalAmount: TokenAmount
+  msgs: TransactionMsgMultiSend[]
+  denoms: TokenPrice[]
+  account: Account
+}
+
+const MultiSendContent: React.FC<MultiSendContentProps> = ({
+  msgs,
+  denoms,
+  totalAmount,
+  account,
+}) => {
+  const { t, lang } = useTranslation('common')
+  const theme = useTheme()
+  return (
+    <>
+      <Box display="flex" flexDirection="column" alignItems="center" mt={6}>
+        <SendIcon width={theme.spacing(6)} height={theme.spacing(6)} />
+        <Box mt={2} mb={4}>
+          <Typography variant="h4">
+            {t('send')} {formatTokenAmount(totalAmount, account.crypto, lang, ', ')}
+          </Typography>
+        </Box>
+      </Box>
+      <Divider />
+      <Box my={1}>
+        <Typography>{t('from')}</Typography>
+        <Typography color="textSecondary">{account.address}</Typography>
+      </Box>
+      <Divider />
+      {msgs[0].value.outputs.map((m, i) => (
+        <React.Fragment key={m.address}>
+          <Box my={1}>
+            <Typography>{t('send to', { number: `# ${i + 1}` })}</Typography>
+            <Typography color="textSecondary" gutterBottom>
+              {m.address}
+            </Typography>
+            <Typography>{t('amount')}</Typography>
+            <Typography color="textSecondary">
+              {formatTokenAmount(
+                getTokenAmountFromDenoms(m.coins, denoms || []),
+                account.crypto,
+                lang
+              )}
+            </Typography>
+          </Box>
+          <Divider />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+export default MultiSendContent
diff --git a/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx b/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx
index db03db00..97dd8f54 100644
--- a/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx
+++ b/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx
@@ -25,6 +25,7 @@ import VoteContent from './VoteContent'
 import DepositContent from './DepositContent'
 import SaveProfileContent from './SaveProfileContent'
 import SetWithdrawAddressContent from './SetWithdrawAddressContent'
+import MultiSendContent from './MultiSendContent'
 
 const ReactJson = dynamic(() => import('react-json-view'), { ssr: false })
 
@@ -65,6 +66,15 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
             msgs={transactionData.msgs as TransactionMsgSend[]}
           />
         )
+      case '/cosmos.bank.v1beta1.MsgMultiSend':
+        return (
+          <MultiSendContent
+            account={account}
+            denoms={denoms}
+            totalAmount={totalAmount}
+            msgs={transactionData.msgs as TransactionMsgMultiSend[]}
+          />
+        )
       case '/cosmos.staking.v1beta1.MsgDelegate':
         return (
           <DelegateContent
diff --git a/components/ConfirmTransactionDialog/index.tsx b/components/ConfirmTransactionDialog/index.tsx
index a12d8c81..dc5f2c66 100644
--- a/components/ConfirmTransactionDialog/index.tsx
+++ b/components/ConfirmTransactionDialog/index.tsx
@@ -130,7 +130,12 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
   const totalAmount = getTokenAmountFromDenoms(
     flatten(
       transactionData.msgs
-        .map((msg) => (msg.value as any).amount || (msg.value as any).token)
+        .map(
+          (msg) =>
+            (msg.value as any).amount ||
+            (msg.value as any).token ||
+            flatten(get(msg, 'value.inputs', []).map((i) => i.coins))
+        )
         .filter((a) => a)
     ),
     denoms
@@ -139,6 +144,7 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
   const successMessage = React.useMemo(() => {
     switch (get(transactionData, 'msgs[0].typeUrl', '')) {
       case '/cosmos.bank.v1beta1.MsgSend':
+      case '/cosmos.bank.v1beta1.MsgMultiSend':
       case '/ibc.applications.transfer.v1.MsgTransfer':
         return t('successfully sent', {
           title: formatTokenAmount(totalAmount, crypto, lang),
diff --git a/components/SendDialog/index.tsx b/components/SendDialog/index.tsx
index 09a8178f..c8027533 100644
--- a/components/SendDialog/index.tsx
+++ b/components/SendDialog/index.tsx
@@ -2,6 +2,7 @@
 import { Dialog, DialogTitle, IconButton, DialogContent, Box, Typography } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
+import groupBy from 'lodash/groupBy'
 import CloseIcon from '../../assets/images/icons/icon_cross.svg'
 import useStyles from './styles'
 import useIconProps from '../../misc/useIconProps'
@@ -45,25 +46,63 @@ const SendDialog: React.FC<SendDialogProps> = ({ account, availableTokens, open,
     ) => {
       try {
         setLoading(true)
-        const msgs: TransactionMsgSend[] = recipients.map((r) => {
-          const coinsToSend = getEquivalentCoinToSend(
-            r.amount,
-            availableTokens.coins,
-            availableTokens.tokens_prices
-          )
-          return {
-            typeUrl: '/cosmos.bank.v1beta1.MsgSend',
-            value: {
-              fromAddress: account.address,
-              toAddress: r.address,
-              amount: [{ amount: coinsToSend.amount.toString(), denom: coinsToSend.denom }],
-            },
-          }
-        })
-        await sendTransaction(password, account.address, {
-          msgs,
-          memo,
-        })
+        if (recipients.length > 1) {
+          const inputs = []
+          const outputs = recipients.map((r) => {
+            const coinsToSend = getEquivalentCoinToSend(
+              r.amount,
+              availableTokens.coins,
+              availableTokens.tokens_prices
+            )
+            const inputCoinIndex = inputs.findIndex((i) => i.coins[0].denom === coinsToSend.denom)
+            if (inputCoinIndex > -1) {
+              inputs[inputCoinIndex].coins[0].amount = String(
+                Number(inputs[inputCoinIndex].coins[0].amount) + coinsToSend.amount
+              )
+            } else {
+              inputs.push({
+                address: account.address,
+                coins: [{ amount: coinsToSend.amount.toString(), denom: coinsToSend.denom }],
+              })
+            }
+            return {
+              address: r.address,
+              coins: [{ amount: coinsToSend.amount.toString(), denom: coinsToSend.denom }],
+            }
+          })
+          await sendTransaction(password, account.address, {
+            msgs: [
+              {
+                typeUrl: '/cosmos.bank.v1beta1.MsgMultiSend',
+                value: {
+                  inputs,
+                  outputs,
+                },
+              },
+            ],
+            memo,
+          })
+        } else {
+          const msgs: TransactionMsgSend[] = recipients.map((r) => {
+            const coinsToSend = getEquivalentCoinToSend(
+              r.amount,
+              availableTokens.coins,
+              availableTokens.tokens_prices
+            )
+            return {
+              typeUrl: '/cosmos.bank.v1beta1.MsgSend',
+              value: {
+                fromAddress: account.address,
+                toAddress: r.address,
+                amount: [{ amount: coinsToSend.amount.toString(), denom: coinsToSend.denom }],
+              },
+            }
+          })
+          await sendTransaction(password, account.address, {
+            msgs,
+            memo,
+          })
+        }
         setLoading(false)
         onClose()
       } catch (err) {
diff --git a/custom.d.ts b/custom.d.ts
index f79de1cc..b6158d41 100644
--- a/custom.d.ts
+++ b/custom.d.ts
@@ -405,6 +405,7 @@ type TransactionMsg =
   | TransactionMsgRedelegate
   | TransactionMsgWithdrawReward
   | TransactionMsgSend
+  | TransactionMsgMultiSend
   | TransactionMsgIBCTransfer
   | TransactionMsgSubmitProposal
   | TransactionMsgVote
diff --git a/misc/cryptocurrencies.dev.ts b/misc/cryptocurrencies.dev.ts
index b1c46343..597837fc 100644
--- a/misc/cryptocurrencies.dev.ts
+++ b/misc/cryptocurrencies.dev.ts
@@ -29,6 +29,7 @@ const cryptocurrencies: { [key: string]: Cryptocurrency } = {
       },
       gas: {
         '/cosmos.bank.v1beta1.MsgSend': '200000',
+        '/cosmos.bank.v1beta1.MsgMultiSend': '400000',
         '/cosmos.staking.v1beta1.MsgDelegate': '400000',
         '/cosmos.staking.v1beta1.MsgBeginRedelegate': '400000',
         '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward': '200000',
diff --git a/misc/cryptocurrencies.prod.ts b/misc/cryptocurrencies.prod.ts
index 2e6bea63..9f15560e 100644
--- a/misc/cryptocurrencies.prod.ts
+++ b/misc/cryptocurrencies.prod.ts
@@ -29,6 +29,7 @@ const cryptocurrencies: { [key: string]: Cryptocurrency } = {
       },
       gas: {
         '/cosmos.bank.v1beta1.MsgSend': '200000',
+        '/cosmos.bank.v1beta1.MsgMultiSend': '400000',
         '/cosmos.staking.v1beta1.MsgDelegate': '400000',
         '/cosmos.staking.v1beta1.MsgBeginRedelegate': '400000',
         '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward': '200000',
diff --git a/misc/cryptocurrencies.ts b/misc/cryptocurrencies.ts
index 2e6bea63..9f15560e 100644
--- a/misc/cryptocurrencies.ts
+++ b/misc/cryptocurrencies.ts
@@ -29,6 +29,7 @@ const cryptocurrencies: { [key: string]: Cryptocurrency } = {
       },
       gas: {
         '/cosmos.bank.v1beta1.MsgSend': '200000',
+        '/cosmos.bank.v1beta1.MsgMultiSend': '400000',
         '/cosmos.staking.v1beta1.MsgDelegate': '400000',
         '/cosmos.staking.v1beta1.MsgBeginRedelegate': '400000',
         '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward': '200000',
diff --git a/misc/utils.ts b/misc/utils.ts
index 381aab8d..aec5966c 100644
--- a/misc/utils.ts
+++ b/misc/utils.ts
@@ -333,6 +333,29 @@ export const transformTransactions = (
           success: get(t, 'transaction.success', false),
         }
       }
+      if (t.type.includes('MsgMultiSend')) {
+        return {
+          ref: `#${get(t, 'transaction_hash', '')}`,
+          tab: 'transfer',
+          tag: 'multisend',
+          date: `${format(
+            new Date(get(t, 'transaction.block.timestamp')),
+            'dd MMM yyyy HH:mm'
+          )} UTC`,
+          detail: {
+            inputs: get(t, 'value.inputs', []).map((input) => ({
+              ...input,
+              tokenAmount: getTokenAmountFromDenoms(input.coins, tokensPrices),
+            })),
+            outputs: get(t, 'value.outputs', []).map((output) => ({
+              ...output,
+              tokenAmount: getTokenAmountFromDenoms(output.coins, tokensPrices),
+            })),
+          },
+          amount: getTokenAmountFromDenoms(get(t, 'value.amount', []), tokensPrices),
+          success: get(t, 'transaction.success', false),
+        }
+      }
       if (t.type.includes('MsgDelegate')) {
         return {
           ref: `#${get(t, 'transaction_hash', '')}`,

From 285650486483c0cc4cac52ed7991db7eb1cab6ba Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Tue, 12 Oct 2021 20:51:50 +0800
Subject: [PATCH 09/12] fix empty delegator

---
 graphql/queries/validators.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/graphql/queries/validators.ts b/graphql/queries/validators.ts
index dcc794af..e34ef400 100644
--- a/graphql/queries/validators.ts
+++ b/graphql/queries/validators.ts
@@ -1,6 +1,6 @@
 export const getValidators = (crypto: string): string => `
 subscription Validators {
-  validator {
+  validator(where: {validator_info: {operator_address: {_neq: ""}}}) {
     self_delegations(limit: 1, order_by: {height: desc}) {
       amount
     }

From dd030dd0ae976ae05d975613aee372f9d5d23765 Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Wed, 13 Oct 2021 16:08:11 +0800
Subject: [PATCH 10/12] fix rounding error

---
 misc/utils.ts | 4 +++-
 package.json  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/misc/utils.ts b/misc/utils.ts
index aec5966c..5e4cb5b0 100644
--- a/misc/utils.ts
+++ b/misc/utils.ts
@@ -509,7 +509,9 @@ export const getEquivalentCoinToSend = (
     []
   ).find((unit) => !!availableCoins.find((c) => c.denom.toLowerCase() === unit.denom.toLowerCase()))
   return {
-    amount: amount.amount * 10 ** (get(tokenPrice, 'token_unit.exponent', 0) - coinDenom.exponent),
+    amount: Math.round(
+      amount.amount * 10 ** (get(tokenPrice, 'token_unit.exponent', 0) - coinDenom.exponent)
+    ),
     denom: coinDenom.denom,
   }
 }
diff --git a/package.json b/package.json
index df90f8a3..42ed3b5c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "forbole-x",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

From fecaa6f88897dbe4f0ef9a5d36e01871b41da610 Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Wed, 13 Oct 2021 17:10:09 +0800
Subject: [PATCH 11/12] remove unused import

---
 components/ActivitiesTable/Row.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/ActivitiesTable/Row.tsx b/components/ActivitiesTable/Row.tsx
index 36a73b6f..c04d1b4d 100644
--- a/components/ActivitiesTable/Row.tsx
+++ b/components/ActivitiesTable/Row.tsx
@@ -1,9 +1,8 @@
 import { Box, Avatar, Typography, Link, useTheme } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
-import { InputSharp } from '@material-ui/icons'
 import { useGetStyles } from './styles'
-import { formatCrypto, formatTokenAmount, getVoteAnswer } from '../../misc/utils'
+import { formatTokenAmount, getVoteAnswer } from '../../misc/utils'
 import useIsMobile from '../../misc/useIsMobile'
 import AccountAvatar from '../AccountAvatar'
 import ValidatorAvatar from '../ValidatorAvatar'

From cb0cef0da96cf4915e2c7844c0f84c42336a2f5f Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Wed, 13 Oct 2021 17:59:59 +0800
Subject: [PATCH 12/12] update style

---
 components/Layout/StarredAccount.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/Layout/StarredAccount.tsx b/components/Layout/StarredAccount.tsx
index 96fcea58..99897fb7 100644
--- a/components/Layout/StarredAccount.tsx
+++ b/components/Layout/StarredAccount.tsx
@@ -71,8 +71,10 @@ const StarredAccount: React.FC<StarredAccountProps> = ({ account }) => {
               <CircularProgress size={20} />
             </Box>
           ) : (
-            <Box>
-              <Typography>{formatTokenAmount(tokenAmounts, account.crypto, lang)}</Typography>
+            <Box mt={-1}>
+              <Typography variant="body2" color="textSecondary">
+                {formatTokenAmount(tokenAmounts, account.crypto, lang)}
+              </Typography>
               {/* after USD balance is added */}
               {/* <Typography>{formatCurrency(usdBalance, currency, lang)}</Typography> */}
             </Box>