refactor & fix numeraires update bug

prax-wallet · Jun 12, 2024 · bcd6c0b · bcd6c0b
1 parent 992394d
commit bcd6c0b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 44 deletions.
diff --git a/apps/extension/src/routes/page/onboarding/set-grpc-endpoint.tsx b/apps/extension/src/routes/page/onboarding/set-grpc-endpoint.tsx
@@ -16,6 +16,7 @@ export const SetGrpcEndpoint = () => {
       <Card className='w-[400px]' gradient>
         <CardHeader>
           <CardTitle>Select your preferred RPC endpoint</CardTitle>
+
           <CardDescription>
             The requests you make may reveal your intentions about transactions you wish to make, so
             select an RPC node that you trust. If you&apos;re unsure which one to choose, leave this

diff --git a/apps/extension/src/routes/page/onboarding/set-numeraire.tsx b/apps/extension/src/routes/page/onboarding/set-numeraire.tsx
@@ -2,7 +2,7 @@ import { Card, CardDescription, CardHeader, CardTitle } from '@penumbra-zone/ui/
 import { FadeTransition } from '@penumbra-zone/ui/components/ui/fade-transition';
 import { usePageNav } from '../../../utils/navigate';
 import { PagePath } from '../paths';
-import { NumeraireForm } from '../../../shared/components/numeraires';
+import { NumeraireForm } from '../../../shared/components/numeraires-form';
 
 export const SetNumerairesPage = () => {
   const navigate = usePageNav();
@@ -16,14 +16,14 @@ export const SetNumerairesPage = () => {
       <Card className='w-[400px]' gradient>
         <CardHeader>
           <CardTitle>In which token denomination would you prefer to price assets?</CardTitle>
+          <CardDescription>
+            Prax does not use third-party price providers for privacy reasons, instead Prax indexes
+            asset prices locally by selected denomination
+          </CardDescription>
         </CardHeader>
-
-        <CardDescription>
-          Prax does not use third-party price providers for privacy reasons, instead Prax indexes
-          asset prices locally by selected denomination
-        </CardDescription>
-
+        <div className='mt-6'>
           <NumeraireForm isOnboarding onSuccess={onSuccess} />
+        </div>
       </Card>
     </FadeTransition>
   );

diff --git a/apps/extension/src/routes/popup/settings/settings-numeraires.tsx b/apps/extension/src/routes/popup/settings/settings-numeraires.tsx
@@ -1,16 +1,15 @@
 import { SettingsScreen } from './settings-screen';
-import { NumeraireForm } from '../../../shared/components/numeraires';
 import { NumerairesGradientIcon } from '../../../icons/numeraires-gradient';
-import {usePopupNav} from "../../../utils/navigate";
-import {PopupPath} from "../paths";
+import { usePopupNav } from '../../../utils/navigate';
+import { PopupPath } from '../paths';
+import { NumeraireForm } from '../../../shared/components/numeraires-form';
 
 export const SettingsNumeraires = () => {
+  const navigate = usePopupNav();
 
-    const navigate = usePopupNav();
-
-    const onSuccess = async () => {
-        navigate(PopupPath.SETTINGS)
-    };
+  const onSuccess = () => {
+    navigate(PopupPath.INDEX);
+  };
   return (
     <SettingsScreen title='Price denominations' IconComponent={NumerairesGradientIcon}>
       <NumeraireForm onSuccess={onSuccess} />

diff --git a/...rc/shared/components/numeraires/index.tsx → ...src/shared/components/numeraires-form.tsx b/...rc/shared/components/numeraires/index.tsx → ...src/shared/components/numeraires-form.tsx
@@ -1,13 +1,13 @@
-import { SelectList } from '@penumbra-zone/ui/components/ui/select-list';
 import { ChainRegistryClient } from '@penumbra-labs/registry';
-import { AllSlices } from '../../../state';
-import { useStoreShallow } from '../../../utils/use-store-shallow';
-import { FormEvent, useMemo } from 'react';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { useChainIdQuery } from '../../../hooks/chain-id';
+import { AllSlices, useStore } from '../../state';
+import { useChainIdQuery } from '../../hooks/chain-id';
+import { useMemo, useState } from 'react';
+import { ServicesMessage } from '../../message/services';
+import { SelectList } from '@penumbra-zone/ui/components/ui/select-list';
 import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
 import { getAssetId } from '@penumbra-zone/getters/metadata';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 
 const getNumeraireFromRegistry = (chainId: string): Metadata[] => {
   const registryClient = new ChainRegistryClient();
@@ -23,34 +23,39 @@ const useNumerairesSelector = (state: AllSlices) => {
   };
 };
 
-
-
-export const NumeraireForm = ({ isOnboarding, onSuccess }: { isOnboarding?: boolean, onSuccess: () => void | Promise<void>;}) => {
+export const NumeraireForm = ({
+  isOnboarding,
+  onSuccess,
+}: {
+  isOnboarding?: boolean;
+  onSuccess: () => void | Promise<void>;
+}) => {
   const { chainId } = useChainIdQuery();
-  const { selectedNumeraires, selectNumeraire, saveNumeraires } =
-    useStoreShallow(useNumerairesSelector);
+  const { selectedNumeraires, selectNumeraire, saveNumeraires } = useStore(useNumerairesSelector);
   const numeraires = useMemo(
-    () => getNumeraireFromRegistry(chainId || 'penumbra-testnet-deimos-8'),
+    () => getNumeraireFromRegistry(chainId ?? 'penumbra-testnet-deimos-8'),
     [chainId],
   );
 
-  const onSubmit = async (
-      onSuccess: () => void | Promise<void>,
-  ) => {
-    saveNumeraires();
-    await onSuccess();
-  };
+  const [loading, setLoading] = useState(false);
 
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    void onSubmit(onSuccess);
+  const handleSubmit = () => {
+    setLoading(true);
+    void (async function () {
+      await saveNumeraires();
+      await chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires);
+      await onSuccess();
+    })();
   };
+
   return (
     <>
       <div className='flex flex-col gap-2'>
         <form className='flex flex-col gap-4' onSubmit={handleSubmit}>
           <SelectList>
             {numeraires.map(metadata => {
+              // Image default is "" and thus cannot do nullish-coalescing
+              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
               const icon = metadata.images[0]?.png || metadata.images[0]?.svg;
               return (
                 <SelectList.Option
@@ -76,9 +81,11 @@ export const NumeraireForm = ({ isOnboarding, onSuccess }: { isOnboarding?: bool
               className='my-5'
               key='save-button'
               variant='gradient'
-              type= 'submit'
+              type='submit'
+              disabled={loading}
+              onClick={handleSubmit}
             >
-              {isOnboarding ? 'Next' : 'Save'}
+              {isOnboarding ? 'Next' : loading ? 'Saving...' : 'Save'}
             </Button>
           </SelectList>
         </form>

diff --git a/apps/extension/src/state/numeraires.ts b/apps/extension/src/state/numeraires.ts
@@ -3,12 +3,11 @@ import { AllSlices, SliceCreator } from '.';
 import { ExtensionStorage } from '../storage/base';
 import { Stringified } from '@penumbra-zone/types/jsonified';
 import { AssetId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ServicesMessage } from '../message/services';
 
 export interface NumerairesSlice {
   selectedNumeraires: Stringified<AssetId>[];
   selectNumeraire: (numeraire: Stringified<AssetId>) => void;
-  saveNumeraires: () => void;
+  saveNumeraires: () => Promise<void>;
 }
 
 export const createNumerairesSlice =
@@ -28,7 +27,6 @@ export const createNumerairesSlice =
       },
       saveNumeraires: async () => {
         await local.set('numeraires', get().numeraires.selectedNumeraires);
-        await chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires);
       },
     };
   };

diff --git a/apps/extension/src/wallet-services.ts b/apps/extension/src/wallet-services.ts
@@ -16,7 +16,7 @@ import { AssetId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/a
 export const startWalletServices = async () => {
   const wallet = await onboardWallet();
   const grpcEndpoint = await onboardGrpcEndpoint();
-  let numeraires = await localExtStorage.get('numeraires');
+  const numeraires = await localExtStorage.get('numeraires');
 
   const services = new Services({
     grpcEndpoint,
@@ -97,7 +97,7 @@ const attachServiceControlListener = ({
           const newNumeraires = await localExtStorage.get('numeraires');
           blockProcessor.setNumeraires(newNumeraires.map(n => AssetId.fromJsonString(n)));
           await indexedDb.clearSwapBasedPrices();
-        });
+        })().then(() => respond());
         return true;
     }
   });