From bcd6c0be5315fe5191210f894014f1b5736b7521 Mon Sep 17 00:00:00 2001 From: valentine Date: Thu, 13 Jun 2024 00:15:47 +0300 Subject: [PATCH] refactor & fix numeraires update bug --- .../page/onboarding/set-grpc-endpoint.tsx | 1 + .../routes/page/onboarding/set-numeraire.tsx | 14 ++--- .../popup/settings/settings-numeraires.tsx | 15 +++-- .../index.tsx => numeraires-form.tsx} | 55 +++++++++++-------- apps/extension/src/state/numeraires.ts | 4 +- apps/extension/src/wallet-services.ts | 4 +- 6 files changed, 49 insertions(+), 44 deletions(-) rename apps/extension/src/shared/components/{numeraires/index.tsx => numeraires-form.tsx} (69%) diff --git a/apps/extension/src/routes/page/onboarding/set-grpc-endpoint.tsx b/apps/extension/src/routes/page/onboarding/set-grpc-endpoint.tsx index c79df697..46c1f854 100644 --- 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 = () => { Select your preferred RPC endpoint + The requests you make may reveal your intentions about transactions you wish to make, so select an RPC node that you trust. If you'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 index 5fe53c58..9da0c590 100644 --- 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 = () => { In which token denomination would you prefer to price assets? + + Prax does not use third-party price providers for privacy reasons, instead Prax indexes + asset prices locally by selected denomination + - - - Prax does not use third-party price providers for privacy reasons, instead Prax indexes - asset prices locally by selected denomination - - +
+
); diff --git a/apps/extension/src/routes/popup/settings/settings-numeraires.tsx b/apps/extension/src/routes/popup/settings/settings-numeraires.tsx index 8d96a376..9ad1902d 100644 --- 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 ( diff --git a/apps/extension/src/shared/components/numeraires/index.tsx b/apps/extension/src/shared/components/numeraires-form.tsx similarity index 69% rename from apps/extension/src/shared/components/numeraires/index.tsx rename to apps/extension/src/shared/components/numeraires-form.tsx index a6cca64e..ce7dc6a5 100644 --- a/apps/extension/src/shared/components/numeraires/index.tsx +++ b/apps/extension/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;}) => { +export const NumeraireForm = ({ + isOnboarding, + onSuccess, +}: { + isOnboarding?: boolean; + onSuccess: () => void | Promise; +}) => { 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, - ) => { - saveNumeraires(); - await onSuccess(); - }; + const [loading, setLoading] = useState(false); - const handleSubmit = (e: FormEvent) => { - e.preventDefault(); - void onSubmit(onSuccess); + const handleSubmit = () => { + setLoading(true); + void (async function () { + await saveNumeraires(); + await chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires); + await onSuccess(); + })(); }; + return ( <>
{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 ( - {isOnboarding ? 'Next' : 'Save'} + {isOnboarding ? 'Next' : loading ? 'Saving...' : 'Save'}
diff --git a/apps/extension/src/state/numeraires.ts b/apps/extension/src/state/numeraires.ts index cd0e0592..b3aae19d 100644 --- 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[]; selectNumeraire: (numeraire: Stringified) => void; - saveNumeraires: () => void; + saveNumeraires: () => Promise; } 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 index 3a366c80..29151298 100644 --- 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; } });