Merge pull request #189 from alephium/add-refresh-button

Add Refresh Token Button
alephium · Apr 20, 2024 · cc65e8b · cc65e8b
2 parents 1379f9a + e71d227
commit cc65e8b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/extension/src/ui/features/accountTokens/AccountTokensHeader.tsx b/packages/extension/src/ui/features/accountTokens/AccountTokensHeader.tsx
@@ -1,5 +1,5 @@
-import { H2 } from "@argent/ui"
-import { VStack } from "@chakra-ui/react"
+import { H2, Button } from "@argent/ui"
+import { VStack, Flex } from "@chakra-ui/react"
 import { FC } from "react"
 
 import { prettifyCurrencyValue } from "../../../shared/token/price"

diff --git a/packages/extension/src/ui/features/accountTokens/tokens.state.ts b/packages/extension/src/ui/features/accountTokens/tokens.state.ts
@@ -2,7 +2,7 @@ import { ALPH_TOKEN_ID, NodeProvider } from "@alephium/web3"
 import { BigNumber } from "ethers"
 import { memoize } from "lodash-es"
 import { useEffect, useMemo, useRef } from "react"
-import useSWR from "swr"
+import useSWR, { KeyedMutator } from "swr"
 import { getNetwork, Network } from "../../../shared/network"
 
 import { useArrayStorage, useObjectStorage } from "../../../shared/storage/hooks"
@@ -25,6 +25,7 @@ interface UseTokensBase<T> {
   tokenDetails: T[]
   tokenDetailsIsInitialising: boolean
   isValidating: boolean
+  mutate: KeyedMutator<T[] | undefined> | KeyedMutator<T[]>
   error?: any
 }
 
@@ -169,6 +170,7 @@ export const useFungibleTokensWithBalance = (
   const {
     data: fungibleTokens,
     isValidating,
+    mutate,
     error
   } = useSWR(
     account && [
@@ -216,7 +218,8 @@ export const useFungibleTokensWithBalance = (
     tokenDetails: fungibleTokens || [],
     tokenDetailsIsInitialising: allUserTokensIsInitialising && tokenDetailsIsInitialising,
     isValidating: allUserTokensIsValidating || isValidating,
-    error: allUserTokensError || error
+    error: allUserTokensError || error,
+    mutate
   }
 }
 
@@ -297,6 +300,7 @@ export const useAllTokensWithBalance = (
     tokenDetails: userTokens || [],
     tokenDetailsIsInitialising,
     isValidating,
+    mutate,
     error,
   }
 }

diff --git a/packages/extension/src/ui/features/accounts/AccountNavigationBar.tsx b/packages/extension/src/ui/features/accounts/AccountNavigationBar.tsx
@@ -12,6 +12,8 @@ import { routes, useCurrentPathnameWithQuery } from "../../routes"
 import { NetworkSwitcher } from "../networks/NetworkSwitcher"
 import { getAccountName, useAccountMetadata } from "./accountMetadata.state"
 import { Account } from "../accounts/Account"
+import { SyncRounded } from "@mui/icons-material"
+import { useFungibleTokensWithBalance } from "../accountTokens/tokens.state"
 
 const { SettingsIcon, DropdownDownIcon } = icons
 
@@ -30,7 +32,7 @@ export const AccountNavigationBar: FC<AccountNavigationBarProps> = ({
   const navigate = useNavigate()
   const location = useLocation()
   const returnTo = useCurrentPathnameWithQuery()
-
+  const { mutate } = useFungibleTokensWithBalance(account)
   const openAccountList = useCallback(() => {
     navigate(routes.accounts(location.pathname))
   }, [location.pathname, navigate])
@@ -57,6 +59,14 @@ export const AccountNavigationBar: FC<AccountNavigationBarProps> = ({
           </Text>
         </Button>
       )}
+        <BarIconButton
+          ml={1}
+          aria-label="Sync account"
+          onClick={() => { mutate() }}
+          colorScheme={"neutrals"}
+        >
+          <SyncRounded fontSize="small"/>
+        </BarIconButton>
       <Flex ml={"auto"}>
         <NetworkSwitcher />
         <BarIconButton