From 2b53b6b8d739cdda32016ef2dbe8c6cf8ec4c31f Mon Sep 17 00:00:00 2001
From: John Huang <johnqh@yahoo.com>
Date: Thu, 15 Feb 2024 09:57:05 -0800
Subject: [PATCH] Update localization

---
 package.json                               |  2 +-
 pnpm-lock.yaml                             |  8 +++----
 src/views/dialogs/MobileDownloadDialog.tsx | 25 ++++++++++++++++++----
 src/views/menus/AccountMenu.tsx            |  7 ++----
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index be01787..99a1448 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.30",
+    "@dydxprotocol/v4-localization": "^1.1.33",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99ca395..b0b6aff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,8 +36,8 @@ dependencies:
     specifier: ^1.0.20
     version: 1.0.20
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.30
-    version: 1.1.30
+    specifier: ^1.1.33
+    version: 1.1.33
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1323,8 +1323,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.30:
-    resolution: {integrity: sha512-TZfWWRSOxcjLHs972wlJVVHkE7+DVqAUnGZSs24HYHsPtUkPhZiNXMOA2Vk9YddQxumhM79xIRH0cmJSe5DDUg==}
+  /@dydxprotocol/v4-localization@1.1.33:
+    resolution: {integrity: sha512-FQiWgo+1M4T7qoEH+sJOXbC2kynhiVqUbAtXSAgXT5lp6/tmn5CH+6ZMLcqaaO7r9eqtVdzQq2tTcA0WrofU5g==}
     dev: false
 
   /@dydxprotocol/v4-proto@4.0.0-dev.0:
diff --git a/src/views/dialogs/MobileDownloadDialog.tsx b/src/views/dialogs/MobileDownloadDialog.tsx
index d348c1f..ab597a9 100644
--- a/src/views/dialogs/MobileDownloadDialog.tsx
+++ b/src/views/dialogs/MobileDownloadDialog.tsx
@@ -4,13 +4,23 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Dialog } from '@/components/Dialog';
 import { QrCode } from '@/components/QrCode';
+import { useStringGetter } from '@/hooks';
+import { STRING_KEYS } from '@/constants/localization';
 
 type ElementProps = {
   setIsOpen: (open: boolean) => void;
 };
 
-const appStoreUrl = document.querySelector('meta[name="smartbanner:button-url-apple"]')?.getAttribute('content');
-// const appStoreUrl = "http://example.com"; for testing only
+/*
+  This implementation assumes "smartbanner:button-url-apple" and "smartbanner:button-url-google" are set to
+  the same value with onelink or other redirect URL.
+  Since there is no way to know what mobile device the user is using, we should give a onelink URL which
+  redirects to either iOS or Android app store depending on the mobile device used to scan the link.
+*/
+export const mobileAppUrl = 
+document.querySelector('meta[name="smartbanner:button-url-apple"]')?.getAttribute('content') ?? 
+document.querySelector('meta[name="smartbanner:button-url-google"]')?.getAttribute('content');
+// const mobileAppUrl = "http://example.com"; // for testing only
   
 const MobileQrCode = ({
   url,
@@ -24,15 +34,22 @@ const MobileQrCode = ({
   );
 };
 
+/*
+MobileDownloadDialog should only been shown on desktop when mobileAppUrl has value. That's controlled by AccountMenu.tsx.
+*/
+
 export const MobileDownloadDialog = ({ setIsOpen }: ElementProps) => {
+  const stringGetter = useStringGetter();
   const content = (
       <>
-        <MobileQrCode url={appStoreUrl!} />
+        <MobileQrCode url={mobileAppUrl!} />
       </>
   );
 
   return (
-    <Dialog isOpen setIsOpen={setIsOpen} title="Scan and Download">
+    <Dialog isOpen setIsOpen={setIsOpen} title={
+        stringGetter({ key: STRING_KEYS.DOWNLOAD_MOBILE_APP })
+      }>
       <Styled.Content>{content}</Styled.Content>
     </Dialog>
   );
diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx
index 189864d..0136de0 100644
--- a/src/views/menus/AccountMenu.tsx
+++ b/src/views/menus/AccountMenu.tsx
@@ -40,6 +40,7 @@ import { getAppTheme } from '@/state/configsSelectors';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
 import { MustBigNumber } from '@/lib/numbers';
+import { appStoreUrl } from '../dialogs/MobileDownloadDialog';
 
 export const AccountMenu = () => {
   const stringGetter = useStringGetter();
@@ -60,10 +61,6 @@ export const AccountMenu = () => {
     dispatch(openDialog({ type: DialogTypes.Onboarding }));
   };
 
-  const appStoreUrl = document.querySelector('meta[name="smartbanner:button-url-apple"]')?.getAttribute('content');
-  // const appStoreUrl = "http://example.com"; for testing
-  
-
   return onboardingState === OnboardingState.Disconnected ? (
     <OnboardingTriggerButton size={ButtonSize.XSmall} />
   ) : (
@@ -198,7 +195,7 @@ export const AccountMenu = () => {
               {
                 value: 'MobileDownload',
                 icon: <Icon iconName={IconName.Qr} />,
-                label: "Download Mobile App",
+                label: stringGetter({ key: STRING_KEYS.DOWNLOAD_MOBILE_APP }),
                 onSelect: () => {
                   dispatch(openDialog({ type: DialogTypes.MobileDownload }));
                 },