✨ feat: improve send confirm page refresh and token list loading (#209)

apps/wallet/src/App.tsx

@@ -14,6 +14,7 @@ import toaster from './components/Toaster';
 import rpcManager from './stores/rpc';
 import { useTranslation } from 'react-i18next';
 import { useDfinityIcrcPostMessageTransport } from './utils/chain/chain-wallets/dfinity/post-message-transport-hook';
+import { sendTokenStore } from './pages/send-token/store';
 
 const MainPage = lazy(() => import('./pages/main'));
 const SelectNetworkPage = lazy(() => import('./pages/select-network'));
@@ -106,8 +107,8 @@ const App: FC = observer(() => {
                   <Route path="/account-manage" element={<AccountManagePage />} />
                   <Route path="/lang-select" element={<SelectLangPage />} />
                   <Route path="/token/:addressOrSymbol" element={<TokenDetailPage />} />
-                  <Route path="/send/:addressOrSymbol?" element={<SendTokenPage />} />
-                  <Route path="/send/confirm" element={<SendTokenConfirmPage />} />
+                  <Route path="/send/:addressOrSymbol" element={<SendTokenPage />} />
+                  <Route path="/send/:addressOrSymbol/confirm" element={sendTokenStore.state.token ? <SendTokenConfirmPage /> : <Navigate to="/" replace />} />
                   <Route path="/receive" element={<ReceiveTokenPage />} />
                 </>
               )}

apps/wallet/src/components/SendButton.tsx

@@ -16,10 +16,11 @@ const SendButton: FC<SendButtonProps> = observer(({ token }) => {
   return (
     <div className="flex flex-col items-center gap-1">
       <button
-        className="btn btn-primary btn-circle btn-sm size-9"
+        className="btn btn-primary btn-circle btn-sm size-9 disabled:bg-primary disabled:opacity-50"
         onClick={() => {
           navigate(`/send${token ? `/${token.contractAddress || token.assetSymbol}` : ''}`)
         }}
+        disabled={!token}
       >
         <SvgSend />
       </button>

apps/wallet/src/components/TokenList.tsx

@@ -37,6 +37,11 @@ const TokenList: FC = observer(() => {
 
   return (
     <ul className="flex flex-col gap-6">
+      {assetsQuery.isPending && (
+        <li className="h-9 flex items-center justify-center">
+          <span className="loading loading-spinner text-primary"></span>
+        </li>
+      )}
       {assetsQuery.data?.map((asset) => (
         <TokenListItem key={asset.assetId.toString()} token={asset} />
       ))}

apps/wallet/src/pages/main/index.tsx

@@ -26,6 +26,7 @@ const WalletMainPage: FC = observer(() => {
     queryFn: async () => {
       return tokenListQuery.data?.find((token) => {
         return token.chainAssetType.equals(ChainAssetType.Native)
+          || token.chainAssetType.equals(ChainAssetType.ICP)
       }) ?? tokenListQuery.data?.[0] ?? null
     },
     enabled: !!tokenListQuery.data

apps/wallet/src/pages/send-token/confirm-page.tsx

@@ -98,7 +98,6 @@ const SendTokenConfirmPage: FC = observer(() => {
       })
       console.debug('[txId]', txId)
       setResultTxId(txId)
-      sendTokenStore.reset()
     } catch (e) {
       console.error(e)
       setResultTxId('')
@@ -134,6 +133,7 @@ const SendTokenConfirmPage: FC = observer(() => {
         </div>
         <button className="btn btn-sm" onClick={() => {
           navigate('/')
+          sendTokenStore.reset()
         }}>
           {t('common_close')}
         </button>

apps/wallet/src/pages/send-token/index.tsx

@@ -90,7 +90,7 @@ const SendTokenPage: FC = observer(() => {
       token,
       amount,
     })
-    navigate('/send/confirm')
+    navigate(`/send/${addressOrSymbol}/confirm`)
   })
 
   return (