add keplr dialog

package.json

@@ -39,7 +39,7 @@
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/v4-abacus": "^0.6.3",
     "@dydxprotocol/v4-client-js": "^0.36.1",
-    "@dydxprotocol/v4-localization": "^0.1.12",
+    "@dydxprotocol/v4-localization": "^0.1.16",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -33,8 +33,8 @@ dependencies:
     specifier: ^0.36.1
     version: 0.36.1
   '@dydxprotocol/v4-localization':
-    specifier: ^0.1.12
-    version: 0.1.12
+    specifier: ^0.1.16
+    version: 0.1.16
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1010,8 +1010,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.1.12:
-    resolution: {integrity: sha512-EiP/8+6Nk9QBa6YSWsyzsZaXoVbz5o/KgUlMp1Cew6VWkXL6DkQY0oMIEEy21pv0zuu/woxhlbyXygpUIcpdMg==}
+  /@dydxprotocol/v4-localization@0.1.16:
+    resolution: {integrity: sha512-lwbVDBDsH7+eav4J2N9XCa05DgKBz5N7CvYkruer2r1dwcZVFbqRRM4wIrVax5guK1CHj5Nd0jKCLz40Q2OtpA==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.2.1:

src/views/dialogs/KeplrDialog.tsx

@@ -1,11 +1,13 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 
+import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 
+import { Button } from '@/components/Button';
 import { Dialog, DialogPlacement } from '@/components/Dialog';
-
-import { WithdrawForm } from '@/views/forms/AccountManagementForms/WithdrawForm';
+import { IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -13,6 +15,10 @@ type ElementProps = {
   setIsOpen: (open: boolean) => void;
 };
 
+// TODO: replace placeholder URL with real URLs when avaialble
+const KEPLR_DASHBOARD_URL = 'https://testnet.keplr.app/';
+const HELP_URL = 'https://help.dydx.exchange/en/articles/2921366-how-do-i-create-an-account-or-sign-up';
+
 export const KeplrDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
@@ -21,11 +27,43 @@ export const KeplrDialog = ({ setIsOpen }: ElementProps) => {
     <Dialog
       isOpen
       setIsOpen={setIsOpen}
-      title={stringGetter({ key: STRING_KEYS.WITHDRAW })}
+      title={stringGetter({ key: STRING_KEYS.HAVE_YOU_EXPORTED })}
       placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
       <Styled.Content>
-        TEST
+        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={KEPLR_DASHBOARD_URL}>
+          <span>
+            {stringGetter({
+              key: STRING_KEYS.NAVIGATE_TO_KEPLR,
+              params: {
+                STRONG_YES: <strong>Yes</strong>,
+              },
+            })}
+          </span>
+
+          <IconButton
+            action={ButtonAction.Base}
+            iconName={IconName.Arrow}
+            size={ButtonSize.XSmall}
+          />
+        </Styled.Button>
+
+        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={HELP_URL}>
+          <span>
+            {stringGetter({
+              key: STRING_KEYS.LEARN_TO_EXPORT,
+              params: {
+                STRONG_NO: <strong>No</strong>,
+              },
+            })}
+          </span>
+
+          <IconButton
+            action={ButtonAction.Base}
+            iconName={IconName.Arrow}
+            size={ButtonSize.XSmall}
+          />
+        </Styled.Button>
       </Styled.Content>
     </Dialog>
   );
@@ -54,3 +92,12 @@ Styled.Content = styled.div`
   ${layoutMixins.flexColumn}
   gap: 1rem;
 `;
+
+Styled.Button = styled(Button)`
+  --button-font: var(--font-base-book);
+  --button-padding: 0 1.5rem;
+
+  gap: 0;
+
+  justify-content: space-between;
+`;