Liquid staking language and localization (#289)

* ✏️ Liquid staking language and localization * import nits
2024-02-08 06:44:50 -08:00 · 2024-02-08 06:44:50 -08:00 · 5fb2f278da
commit 5fb2f278da
parent bd788f22e8
11 changed files with 71 additions and 21 deletions
--- 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.25",
+    "@dydxprotocol/v4-localization": "^1.1.26",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
--- 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.25
-    version: 1.1.25
+    specifier: ^1.1.26
+    version: 1.1.26
  '@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.25:
-    resolution: {integrity: sha512-84BJMybnZBrRnDpnHlMUcOYT1r0ODtgcdgrjdzTw8b0sViTY6ne9ob690fcn/vQO+6sEdDsdt+08ud0H+ZvyYg==}
+  /@dydxprotocol/v4-localization@1.1.26:
+    resolution: {integrity: sha512-u+J1J5Up8McwZOcDaG9GrH/A8p4vD2NU2CT2hPdYyKgEd28XeAYvv7bNAQRKdiBaqTePbbF5uB6TMAQnEGnb1A==}
    dev: false

  /@dydxprotocol/v4-proto@4.0.0-dev.0:
@ -8882,7 +8882,7 @@ packages:
    resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==}
    dependencies:
      cosmos-directory-types: 0.0.6
-      node-fetch-native: 1.6.1
+      node-fetch-native: 1.6.2
    dev: false

  /cosmos-directory-types@0.0.6:
@ -12892,6 +12892,10 @@ packages:
    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
    dev: false

+  /node-fetch-native@1.6.2:
+    resolution: {integrity: sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==}
+    dev: false
+
  /node-fetch@2.6.12:
    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
    engines: {node: 4.x || >=6.0.0}
--- a/src/hooks/usePotentialMarkets.tsx
+++ b/src/hooks/usePotentialMarkets.tsx
@ -88,7 +88,7 @@ export const usePotentialMarketsContext = () => {
        impactNotional: 10_000,
      },
      1: {
-        label: 'Mid-cap',
+        label: stringGetter({ key: STRING_KEYS.MID_CAP }),
        initialMarginFraction: 0.1,
        maintenanceMarginFraction: 0.05,
        impactNotional: 5_000,
--- a/src/pages/token/Governance.tsx
+++ b/src/pages/token/Governance.tsx
@ -19,7 +19,7 @@ export default () => {
      <Styled.HeaderSection>
        <ContentSectionHeader
          title={stringGetter({ key: STRING_KEYS.GOVERNANCE })}
-          subtitle="Participate in the ecosystem by voting on Governance proposals or submitting your own."
+          subtitle={stringGetter({ key: STRING_KEYS.GOVERNANCE_PAGE_SUBTITLE })}
        />
      </Styled.HeaderSection>

--- a/src/pages/token/Token.tsx
+++ b/src/pages/token/Token.tsx
@ -59,7 +59,7 @@ export default () => {
                          <Icon iconName={IconName.CurrencySign} />
                        </Styled.IconContainer>
                      ),
-                      label: 'Staking Rewards', // stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
+                      label: stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
                      href: TokenRoute.StakingRewards,
                      tag: stringGetter({ key: STRING_KEYS.NEW }),
                    },
--- a/src/pages/token/staking/StakingPage.tsx
+++ b/src/pages/token/staking/StakingPage.tsx
@ -5,18 +5,21 @@ import { layoutMixins } from '@/styles/layoutMixins';

 import { DetachedSection } from '@/components/ContentSection';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
+import { useStringGetter } from '@/hooks';

 import { StakingPanel } from './StakingPanel';
 import { StrideStakingPanel } from './StrideStakingPanel';
 import { DYDXBalancePanel } from '../rewards/DYDXBalancePanel';
+import { STRING_KEYS } from '@/constants/localization';

 export default () => {
+  const stringGetter = useStringGetter();
  return (
    <DetachedSection>
      <Styled.HeaderSection>
        <ContentSectionHeader
-          title="Staking Rewards"
-          subtitle="Stake to earn APR. Unstaking can take up to 30 days."
+          title={stringGetter({ key: STRING_KEYS.STAKING_REWARDS })}
+          subtitle={stringGetter({ key: STRING_KEYS.STAKING_PAGE_SUBTITLE })}
        />
      </Styled.HeaderSection>

--- a/src/pages/token/staking/StakingPanel.tsx
+++ b/src/pages/token/staking/StakingPanel.tsx
@ -23,7 +23,7 @@ export const StakingPanel = ({ className }: { className?: string }) => {
      className={className}
      slotHeaderContent={
        <Styled.Header>
-          <Styled.Title>Stake with Keplr</Styled.Title>
+          <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKE_WITH_KEPLR })}</Styled.Title>
          <Styled.Img src="/third-party/keplr.png" alt={stringGetter({ key: STRING_KEYS.KEPLR })} />
        </Styled.Header>
      }
--- a/src/pages/token/staking/StrideStakingPanel.tsx
+++ b/src/pages/token/staking/StrideStakingPanel.tsx
@ -24,7 +24,7 @@ export const StrideStakingPanel = ({ className }: { className?: string }) => {
      slotHeaderContent={
        <Styled.Header>
          <Styled.Title>
-            Liquid Stake with Stride
+            {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_W_STRIDE })}
            <Tag isHighlighted>{stringGetter({ key: STRING_KEYS.NEW })}</Tag>
          </Styled.Title>
          <Styled.Img src="/third-party/stride.png" alt="Stride" />
@ -33,7 +33,10 @@ export const StrideStakingPanel = ({ className }: { className?: string }) => {
      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavStride }))}
    >
      <Styled.Description>
-        {`Stake your ${chainTokenLabel} tokens for st${chainTokenLabel} which you can deploy around the ecosystem.`}
+        {stringGetter({
+          key: STRING_KEYS.LIQUID_STAKE_STRIDE_DESCRIPTION,
+          params: { TOKEN_DENOM: chainTokenLabel },
+        })}
        <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
        </Link>
--- a/src/views/dialogs/ExternalLinkDialog.tsx
+++ b/src/views/dialogs/ExternalLinkDialog.tsx
@ -15,6 +15,7 @@ type ElementProps = {
  link: string;
  linkDescription?: string;
  title?: ReactNode;
+  slotContent?: ReactNode;
  setIsOpen: (open: boolean) => void;
 };

@ -24,6 +25,7 @@ export const ExternalLinkDialog = ({
  link,
  linkDescription,
  title,
+  slotContent,
 }: ElementProps) => {
  const stringGetter = useStringGetter();
  return (
@ -36,6 +38,7 @@ export const ExternalLinkDialog = ({
      }
    >
      <Styled.Content>
+        {slotContent}
        <p>{stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DISCLAIMER })}.</p>
        <Button type={ButtonType.Link} action={ButtonAction.Primary} href={link}>
          {buttonText ?? stringGetter({ key: STRING_KEYS.CONTINUE })}
--- a/src/views/dialogs/ExternalNavKeplrDialog.tsx
+++ b/src/views/dialogs/ExternalNavKeplrDialog.tsx
@ -1,6 +1,9 @@
+import { useCallback } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';

 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';

@ -9,6 +12,8 @@ import { Dialog, DialogPlacement } from '@/components/Dialog';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';

+import { closeDialog, openDialog } from '@/state/dialogs';
+
 import { layoutMixins } from '@/styles/layoutMixins';

 type ElementProps = {
@ -18,9 +23,21 @@ type ElementProps = {
 export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
  const stringGetter = useStringGetter();
  const { keplrDashboard, accountExportLearnMore } = useURLConfigs();
-
+  const dispatch = useDispatch();
  const { isTablet } = useBreakpoints();

+  const onExternalNavDialog = useCallback(() => {
+    dispatch(closeDialog());
+    dispatch(
+      openDialog({
+        type: DialogTypes.ExternalLink,
+        dialogProps: {
+          link: keplrDashboard,
+        },
+      })
+    );
+  }, [dispatch]);
+
  return (
    <Dialog
      isOpen
@ -29,7 +46,11 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
      placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
    >
      <Styled.Content>
-        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={keplrDashboard}>
+        <Styled.Button
+          type={ButtonType.Button}
+          size={ButtonSize.XLarge}
+          onClick={onExternalNavDialog}
+        >
          <span>
            {stringGetter({
              key: STRING_KEYS.NAVIGATE_TO_KEPLR,
@ -46,7 +67,11 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
          />
        </Styled.Button>

-        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={accountExportLearnMore}>
+        <Styled.Button
+          type={ButtonType.Link}
+          size={ButtonSize.XLarge}
+          href={accountExportLearnMore}
+        >
          <span>
            {stringGetter({
              key: STRING_KEYS.LEARN_TO_EXPORT,
--- a/src/views/dialogs/ExternalNavStrideDialog.tsx
+++ b/src/views/dialogs/ExternalNavStrideDialog.tsx
@ -33,15 +33,22 @@ export const ExternalNavStrideDialog = ({ setIsOpen }: ElementProps) => {
        dialogProps: {
          buttonText: (
            <Styled.Span>
-              Liquid Stake on Stride <Icon iconName={IconName.LinkOut} />
+              {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE })}
+              <Icon iconName={IconName.LinkOut} />
            </Styled.Span>
          ),
          link: strideZoneApp,
-          title: 'Liquid staking and leaving website',
+          title: stringGetter({ key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING }),
+          slotContent: stringGetter({
+            key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING_DESCRIPTION,
+            params: {
+              CTA: stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE }),
+            },
+          }),
        },
      })
    );
-  }, [dispatch]);
+  }, [dispatch, stringGetter]);

  return (
    <Dialog
@ -57,7 +64,12 @@ export const ExternalNavStrideDialog = ({ setIsOpen }: ElementProps) => {
          onClick={openExternalNavDialog}
        >
          <span>
-            <strong>{stringGetter({ key: STRING_KEYS.YES })}</strong>, Navigate to Stride Zone.
+            {stringGetter({
+              key: STRING_KEYS.NAVIGATE_TO_STRIDE,
+              params: {
+                STRONG_YES: <strong>{stringGetter({ key: STRING_KEYS.YES })}</strong>,
+              },
+            })}
          </span>

          <Styled.IconButton