am I gonna regret not making this a new PR

dydxprotocol · Jul 2, 2024 · 56a94a3 · 56a94a3
1 parent 68297ba
commit 56a94a3
Show file tree

Hide file tree

Showing 18 changed files with 1,123 additions and 760 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "1.8.6",
     "@dydxprotocol/v4-client-js": "^1.1.24",
-    "@dydxprotocol/v4-localization": "^1.1.141",
+    "@dydxprotocol/v4-localization": "^1.1.144",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",
     "@js-joda/core": "^5.5.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ValidatorIcons.tsx b/src/components/ValidatorIcons.tsx
@@ -0,0 +1,94 @@
+import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
+import styled from 'styled-components';
+
+import { ValidatorFaviconIcon } from './ValidatorFaviconIcon';
+import { WithTooltip } from './WithTooltip';
+
+type ElementProps = {
+  numToShow?: number;
+  validators: Validator[];
+};
+
+type StyleProps = {
+  className?: string;
+};
+
+export const ValidatorIcons = ({
+  numToShow = 3,
+  validators,
+  className,
+}: ElementProps & StyleProps) => {
+  const validatorNames = validators.map((validator) => validator.description?.moniker).join(', ');
+  return (
+    <$ValidatorIcons className={className}>
+      {validators?.length <= numToShow
+        ? validators.map((validator) => (
+            <$ValidatorIcon
+              key={validator.description?.moniker}
+              url={validator.description?.website}
+              fallbackText={validator.description?.moniker}
+            />
+          ))
+        : validators
+            .slice(0, numToShow - 1)
+            .map((validator) => (
+              <$ValidatorIcon
+                key={validator.description?.moniker}
+                url={validator.description?.website}
+                fallbackText={validator.description?.moniker}
+              />
+            ))
+            .concat(
+              <WithTooltip tooltipString={validatorNames}>
+                <$OverflowIcon key="overflow">
+                  {`+${validators.length - (numToShow - 1)}`}
+                </$OverflowIcon>
+              </WithTooltip>
+            )}
+    </$ValidatorIcons>
+  );
+};
+
+const $ValidatorIcons = styled.div`
+  --border-color: var(--color-border);
+  --icon-size: 2.25rem;
+
+  display: flex;
+
+  > * {
+    &:nth-child(1) {
+      z-index: 2;
+    }
+
+    &:nth-child(2) {
+      z-index: 1;
+    }
+
+    &:not(:first-child) {
+      margin-left: -0.66em;
+    }
+  }
+`;
+
+const $ValidatorIcon = styled(ValidatorFaviconIcon)`
+  height: var(--icon-size);
+  width: var(--icon-size);
+
+  margin: 0;
+  border: 2px solid var(--border-color);
+`;
+
+const $OverflowIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0;
+  border: 2px solid var(--border-color);
+
+  height: var(--icon-size);
+  width: var(--icon-size);
+
+  background-color: var(--color-layer-6);
+  color: var(--color-text-1);
+`;
diff --git a/src/styles/formMixins.ts b/src/styles/formMixins.ts
@@ -174,4 +174,25 @@ export const formMixins = {
       --form-input-gap: 1rem;
     }
   `,
+
+  stakingForm: css`
+    ${() => inputsColumn}
+    --form-input-gap: 1.25rem;
+    --form-input-height: 3.5rem;
+    --form-input-height-mobile: 4rem;
+    --form-input-paddingY: 0.5rem;
+    --form-input-paddingX: 1rem;
+
+    --withReceipt-backgroundColor: var(--color-layer-2);
+
+    height: 100%;
+
+    label {
+      --label-textColor: var(--color-text-1);
+    }
+
+    @media ${breakpoints.tablet} {
+      --form-input-gap: 1rem;
+    }
+  `,
 } satisfies Record<string, FlattenSimpleInterpolation | FlattenInterpolation<ThemeProps<any>>>;
diff --git a/src/styles/layoutMixins.ts b/src/styles/layoutMixins.ts
@@ -1,10 +1,4 @@
-import {
-  css,
-  keyframes,
-  type FlattenInterpolation,
-  type FlattenSimpleInterpolation,
-  type ThemeProps,
-} from 'styled-components';
+import { css, keyframes } from 'styled-components';
 
 const withOuterBorder = css`
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
@@ -886,6 +880,13 @@ export const layoutMixins = {
     min-width: 1px;
   `,
 
+  textLineClamp: css`
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+  `,
+
   textOverflow: css`
     display: inline-block;
     overflow-x: auto;

diff --git a/src/views/dialogs/StakeDialog.tsx b/src/views/dialogs/StakeDialog.tsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
 
-import { shallowEqual } from 'react-redux';
 import styled from 'styled-components';
 
-import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { DialogProps, DialogTypes, StakeDialogProps } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { StakeFormSteps } from '@/constants/stakingForms';
@@ -15,90 +13,39 @@ import { useTokenConfigs } from '@/hooks/useTokenConfigs';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AssetIcon } from '@/components/AssetIcon';
-import { Button } from '@/components/Button';
 import { Dialog } from '@/components/Dialog';
 import { Link } from '@/components/Link';
 import { Output, OutputType } from '@/components/Output';
 import { Tag, TagSign } from '@/components/Tag';
-import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
 import { StakeForm } from '@/views/forms/StakingForms/StakeForm';
 
-import { calculateCanAccountTrade } from '@/state/accountCalculators';
-import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { useAppDispatch } from '@/state/appTypes';
 import { forceOpenDialog } from '@/state/dialogs';
 
 export const StakeDialog = ({ setIsOpen }: DialogProps<StakeDialogProps>) => {
-  const dispatch = useAppDispatch();
   const stringGetter = useStringGetter();
-
   const { chainTokenLabel } = useTokenConfigs();
   const stakingApr = useStakingAPR();
-  const canAccountTrade = useAppSelector(calculateCanAccountTrade, shallowEqual);
 
   const [currentStep, setCurrentStep] = useState<StakeFormSteps>(StakeFormSteps.EditInputs);
 
-  const openKeplrDialog = () => dispatch(forceOpenDialog(DialogTypes.ExternalNavKeplr()));
-  const openStrideDialog = () => dispatch(forceOpenDialog(DialogTypes.ExternalNavStride()));
-
-  const legalDisclaimer = (
-    <$LegalDisclaimer>
-      {stringGetter({
-        key: STRING_KEYS.STAKING_LEGAL_DISCLAIMER_WITH_DEFAULT,
-        params: {
-          KEPLR_DASHBOARD_LINK: (
-            <$Link withIcon onClick={openKeplrDialog}>
-              {stringGetter({ key: STRING_KEYS.KEPLR_DASHBOARD })}
-            </$Link>
-          ),
-          STRIDE_LINK: (
-            <$Link withIcon onClick={openStrideDialog}>
-              Stride
-            </$Link>
-          ),
-        },
-      })}
-    </$LegalDisclaimer>
-  );
+  const closeDialog = () => setIsOpen?.(false);
 
   const dialogProps: {
     [key in StakeFormSteps]: {
       title: string;
       description: string;
       slotIcon?: JSX.Element;
-      slotFooter: JSX.Element;
     };
   } = {
     [StakeFormSteps.EditInputs]: {
       title: stringGetter({ key: STRING_KEYS.STAKE }),
       description: stringGetter({ key: STRING_KEYS.STAKE_DESCRIPTION }),
       slotIcon: <AssetIcon symbol={chainTokenLabel} />,
-      slotFooter: legalDisclaimer,
     },
     [StakeFormSteps.PreviewOrder]: {
       title: stringGetter({ key: STRING_KEYS.CONFIRM_STAKE }),
       description: stringGetter({ key: STRING_KEYS.STAKE_CONFIRMATION_DESCRIPTOR }),
-      slotFooter: (
-        <>
-          <$Row>
-            {canAccountTrade ? (
-              <>
-                <$EditButton
-                  action={ButtonAction.Base}
-                  onClick={() => setCurrentStep(StakeFormSteps.EditInputs)}
-                >
-                  {stringGetter({ key: STRING_KEYS.EDIT })}
-                </$EditButton>
-                <$SubmitButton action={ButtonAction.Primary} type={ButtonType.Submit}>
-                  {stringGetter({ key: STRING_KEYS.CONFIRM_STAKE })}
-                </$SubmitButton>
-              </>
-            ) : (
-              <$OnboardingTriggerButton size={ButtonSize.Base} />
-            )}
-          </$Row>
-          {legalDisclaimer}
-        </>
-      ),
     },
   };
 
@@ -107,7 +54,7 @@ export const StakeDialog = ({ setIsOpen }: DialogProps<StakeDialogProps>) => {
       isOpen
       setIsOpen={setIsOpen}
       slotIcon={dialogProps[currentStep].slotIcon}
-      slotFooter={dialogProps[currentStep].slotFooter}
+      slotFooter={<LegalDisclaimer />}
       title={
         <$Title>
           {dialogProps[currentStep].title}
@@ -123,15 +70,39 @@ export const StakeDialog = ({ setIsOpen }: DialogProps<StakeDialogProps>) => {
       }
       description={dialogProps[currentStep].description}
     >
-      <StakeForm
-        currentStep={currentStep}
-        setCurrentStep={setCurrentStep}
-        onDone={() => setIsOpen?.(false)}
-      />
+      <StakeForm currentStep={currentStep} setCurrentStep={setCurrentStep} onDone={closeDialog} />
     </$Dialog>
   );
 };
 
+const LegalDisclaimer = () => {
+  const dispatch = useAppDispatch();
+  const stringGetter = useStringGetter();
+
+  const openKeplrDialog = () => dispatch(forceOpenDialog(DialogTypes.ExternalNavKeplr()));
+  const openStrideDialog = () => dispatch(forceOpenDialog(DialogTypes.ExternalNavStride()));
+
+  return (
+    <$LegalDisclaimer>
+      {stringGetter({
+        key: STRING_KEYS.STAKING_LEGAL_DISCLAIMER_WITH_DEFAULT,
+        params: {
+          KEPLR_DASHBOARD_LINK: (
+            <$Link withIcon onClick={openKeplrDialog}>
+              {stringGetter({ key: STRING_KEYS.KEPLR_DASHBOARD })}
+            </$Link>
+          ),
+          STRIDE_LINK: (
+            <$Link withIcon onClick={openStrideDialog}>
+              Stride
+            </$Link>
+          ),
+        },
+      })}
+    </$LegalDisclaimer>
+  );
+};
+
 const $Dialog = styled(Dialog)`
   --dialog-content-paddingTop: var(--default-border-width);
   --dialog-content-paddingBottom: 1rem;
@@ -149,22 +120,6 @@ const $Output = styled(Output)`
   display: inline-block;
 `;
 
-const $Row = styled.div`
-  ${layoutMixins.inlineRow}
-  gap: 1rem;
-
-  margin-bottom: var(--dialog-content-paddingBottom);
-  width: 100%;
-`;
-
-const $EditButton = styled(Button)`
-  flex-grow: 1;
-`;
-
-const $SubmitButton = styled(Button)`
-  flex-grow: 3;
-`;
-
 const $LegalDisclaimer = styled.div`
   text-align: center;
   color: var(--color-text-0);
@@ -175,7 +130,3 @@ const $Link = styled(Link)`
   --link-color: var(--color-text-1);
   display: inline-flex;
 `;
-
-const $OnboardingTriggerButton = styled(OnboardingTriggerButton)`
-  width: 100%;
-`;