fix: #252: fix review comments

prax-wallet · Jan 8, 2025 · e0a0aaa · e0a0aaa
1 parent d25eb6b
commit e0a0aaa
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/apps/extension/src/routes/popup/home/assets-table.tsx b/apps/extension/src/routes/popup/home/assets-table.tsx
@@ -9,6 +9,7 @@ import {
 import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { getDisplayDenomFromView, getEquivalentValues } from '@penumbra-zone/getters/value-view';
+import { getMetadataFromBalancesResponse } from '@penumbra-zone/getters/balances-response';
 import { asValueView } from '@penumbra-zone/getters/equivalent-value';
 import { useQuery } from '@tanstack/react-query';
 import { viewClient } from '../../../clients';
@@ -44,7 +45,17 @@ export const AssetsTable = ({ account }: AssetsTableProps) => {
     queryKey: ['balances', account],
     staleTime: Infinity,
     queryFn: async () => {
-      return Array.fromAsync(viewClient.balances({ accountFilter: { account } }));
+      try {
+        const balances = await Array.fromAsync(viewClient.balances({ accountFilter: { account } }));
+        balances.sort((a, b) => {
+          const aScore = getMetadataFromBalancesResponse.optional(a)?.priorityScore ?? 0n;
+          const bScore = getMetadataFromBalancesResponse.optional(b)?.priorityScore ?? 0n;
+          return Number(bScore - aScore);
+        });
+        return balances;
+      } catch (_) {
+        return [];
+      }
     },
   });
 

diff --git a/apps/extension/src/routes/popup/home/index.tsx b/apps/extension/src/routes/popup/home/index.tsx
@@ -51,26 +51,31 @@ export const PopupIndex = () => {
 
   return (
     <>
-      <BlockSync />
+      <div className='fixed inset-0 h-full bg-logoImg bg-[left_-180px] bg-no-repeat pointer-events-none' />
+      <div className='fixed inset-0 h-full bg-logo pointer-events-none' />
 
-      <div className='flex h-full grow flex-col items-stretch gap-[15px] bg-logo bg-[left_-180px] px-[15px] pb-[15px]'>
-        <IndexHeader />
+      <div className='z-[1] flex flex-col h-full'>
+        <BlockSync />
 
-        <div className='flex flex-col gap-4'>
-          {activeWallet && (
-            <SelectAccount
-              index={index}
-              setIndex={setIndex}
-              getAddrByIndex={getAddrByIndex(activeWallet)}
-            />
-          )}
-        </div>
+        <div className='flex h-full grow flex-col items-stretch gap-[15px] px-[15px] pb-[15px]'>
+          <IndexHeader />
+
+          <div className='flex flex-col gap-4'>
+            {activeWallet && (
+              <SelectAccount
+                index={index}
+                setIndex={setIndex}
+                getAddrByIndex={getAddrByIndex(activeWallet)}
+              />
+            )}
+          </div>
 
-        <ValidateAddress />
+          <ValidateAddress />
 
-        <FrontendLink />
+          <FrontendLink />
 
-        <AssetsTable account={index} />
+          <AssetsTable account={index} />
+        </div>
       </div>
     </>
   );

diff --git a/apps/extension/src/routes/popup/popup-layout.tsx b/apps/extension/src/routes/popup/popup-layout.tsx
@@ -16,7 +16,7 @@ export const PopupLayout = () => {
   usePopupReady();
 
   return (
-    <div className='flex grow flex-col bg-card-radial'>
+    <div className='relative flex grow flex-col bg-card-radial'>
       <Outlet />
     </div>
   );

diff --git a/packages/tailwind-config/index.ts b/packages/tailwind-config/index.ts
@@ -151,9 +151,9 @@ export default {
           linear-gradient(
             color-mix(in srgb, var(--charcoal) 80%, transparent),
             color-mix(in srgb, var(--charcoal) 80%, transparent)
-          ),
-          url('penumbra-logo.svg')
+          )
         `,
+        logoImg: `url('penumbra-logo.svg')`,
       },
     },
   },