Support currency settings inside Ledger flow (#574)

zeriontech · Jul 10, 2024 · 61b0cd8 · 61b0cd8
1 parent a3e4e52
commit 61b0cd8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/ui/hardware-wallet/ImportLedgerAddresses/ImportLedgerAddresses.tsx b/src/ui/hardware-wallet/ImportLedgerAddresses/ImportLedgerAddresses.tsx
@@ -23,19 +23,27 @@ import { NeutralDecimals } from 'src/ui/ui-kit/NeutralDecimals';
 import { formatCurrencyToParts } from 'src/shared/units/formatCurrencyValue';
 import { NBSP } from 'src/ui/shared/typography';
 import { getWalletDisplayName } from 'src/ui/shared/getWalletDisplayName';
-import { useCurrency } from 'src/modules/currency/useCurrency';
 import type { DeviceConnection } from '../types';
 
 type ControllerRequest = Omit<RpcRequest, 'id'>;
 
+// We don't have access to preference-store inside iframe and can't use useCurrency hook
+function getIframeCurrency() {
+  const pageUrl = new URL(window.location.href);
+  const currencyStateParam = pageUrl.searchParams.get('currency');
+  invariant(currencyStateParam, 'currency param is requred');
+  return currencyStateParam;
+}
+
 function WalletMediaPresentation({
   wallet,
   walletInfo,
 }: {
   wallet: ExternallyOwnedAccount;
   walletInfo?: WalletInfo;
 }) {
-  const { currency } = useCurrency();
+  const currency = useMemo(getIframeCurrency, []);
+
   return (
     <Media
       image={

diff --git a/src/ui/hardware-wallet/LedgerIframe/LedgerIframe.tsx b/src/ui/hardware-wallet/LedgerIframe/LedgerIframe.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useStore } from '@store-unit/react';
 import { useRenderDelay } from 'src/ui/components/DelayedRender/DelayedRender';
 import { themeStore } from 'src/ui/features/appearance';
+import { useCurrency } from 'src/modules/currency/useCurrency';
 
 export const LedgerIframe = React.forwardRef(function LedgerIframeComponent(
   {
@@ -16,6 +17,7 @@ export const LedgerIframe = React.forwardRef(function LedgerIframeComponent(
   ref: React.ForwardedRef<HTMLIFrameElement>
 ) {
   const themeState = useStore(themeStore);
+  const { currency } = useCurrency();
   const ready = useRenderDelay(100);
   return (
     <iframe
@@ -31,7 +33,7 @@ export const LedgerIframe = React.forwardRef(function LedgerIframeComponent(
       allow="usb"
       src={`ui/hardware-wallet/ledger.html?theme-state=${encodeURIComponent(
         JSON.stringify(themeState)
-      )}#${initialRoute}?${appSearchParams}`}
+      )}&currency=${currency}#${initialRoute}?${appSearchParams}`}
       style={{
         border: 'none',
         backgroundColor: 'transparent',