feat(Staking): refactor (#1538)

* feat(Staking): refactor * feat: continue * wip * feat: continue * feat: continue * feat: final * feat: final * feat: add tests * feat: continue tests * feat: continue * feat: add translations * fix: code review * feat: add staking limit * fix: limit * fix(Staking): limit parsing --------- Co-authored-by: tomjeatt <[email protected]>
interlay · Nov 6, 2023 · 1ac0c7f · 1ac0c7f · vercel · Nov 6, 2023
1 parent aa12f6c
commit 1ac0c7f
Show file tree

Hide file tree

Showing 56 changed files with 1,725 additions and 1,495 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -15,6 +15,7 @@ env:
   REACT_APP_FEATURE_FLAG_LENDING: enabled
   REACT_APP_FEATURE_FLAG_AMM: enabled
   REACT_APP_FEATURE_FLAG_WALLET: enabled
+  REACT_APP_BITCOIN_NETWORK: regtest
 
 jobs:
   lint:

diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
@@ -144,6 +144,7 @@
   "amount": "Amount",
   "select_token": "Select Token",
   "fee_token": "Fee token",
+  "claim": "Claim",
   "claim_rewards": "Claim Rewards",
   "tx_fees": "Tx fees",
   "view_subscan": "View Subscan",
@@ -154,6 +155,10 @@
   "rewards_apr_ticker": "Rewards APR {{ticker}}",
   "wallet": "Wallet",
   "learn_more": "Learn more",
+  "stake": "Stake",
+  "max": "Max",
+  "ticker_balance": "{{ticker}} Balance",
+  "claimable_rewards": "Claimable Rewards",
   "navigation": {
     "btc": "BTC",
     "strategies": "Strategies",
@@ -535,11 +540,27 @@
     }
   },
   "staking_page": {
-    "the_estimated_amount_of_governance_token_you_will_receive_as_rewards": "The estimated amount of {{governanceTokenSymbol}} you will receive as rewards. Depends on your proportion of the total {{voteGovernanceTokenSymbol}}.",
-    "new_vote_governance_token_gained": "New {{voteGovernanceTokenSymbol}} Gained",
-    "the_increase_in_your_vote_governance_token_balance": "The increase in your {{voteGovernanceTokenSymbol}} balance",
-    "total_vote_governance_token_in_the_network": "Total {{voteGovernanceTokenSymbol}} in the network",
-    "total_staked_governance_token_in_the_network": "Total Staked {{governanceTokenSymbol}} in the network"
+    "stake_ticker": "Stake {{ticker}}",
+    "total_staked_ticker_in_the_network": "Total Staked {{ticker}} in the network",
+    "total_ticker_in_the_network": "Total {{ticker}} in the network",
+    "time": {
+      "one_week": "1 Week",
+      "one_month": "1 Month",
+      "three_month": "3 Month",
+      "six_month": "6 Month"
+    },
+    "lock_time_in_weeks": "Lock time in weeks (Max {{value}})",
+    "extended_lock_time_in_weeks": "Extended lock time in weeks (Max {{value}})",
+    "your_already_staked_ticker_needs_to_be_withdrawn": "Your already staked {GOVERNANCE_TOKEN.ticker} needs to be withdrawn before adding a new stake",
+    "unlock_date": "Unlock date",
+    "new_unlock_date": "New unlock date",
+    "new_ticker_gained": "New {{ticker}} Gained",
+    "new_total_stake": "New Total Stake",
+    "estimated_apr": "Estimated APR",
+    "projected_ticker_rewards": "Projected {{ticker}} Rewards",
+    "staked_ticker": "Staked {{ticker}}",
+    "withdraw_staked_ticker_on_date": "Withdraw Staked {{ticker}} on",
+    "withdraw_staked_ticker": "Withdraw Staked {{ticker}}"
   },
   "about": {
     "research_paper": "Research Paper",

diff --git a/src/component-library/Field/Field.style.tsx b/src/component-library/Field/Field.style.tsx
@@ -1,12 +1,18 @@
 import styled from 'styled-components';
 
-import { Flex } from '../Flex';
 import { theme } from '../theme';
+import { Spacing } from '../utils/prop-types';
 
-const Wrapper = styled(Flex)`
+type StyledFieldProps = {
+  $maxWidth?: Spacing;
+};
+
+const StyledField = styled.div<StyledFieldProps>`
   position: relative;
   color: ${theme.colors.textPrimary};
   box-sizing: border-box;
+  display: inline-flex;
+  max-width: ${({ $maxWidth }) => $maxWidth && theme.spacing[$maxWidth]};
 `;
 
-export { Wrapper };
+export { StyledField };
diff --git a/src/component-library/Field/Field.tsx b/src/component-library/Field/Field.tsx
@@ -1,34 +1,47 @@
 import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 
-import { Flex } from '../Flex';
+import { Flex, FlexProps } from '../Flex';
 import { HelperText, HelperTextProps } from '../HelperText';
 import { Label, LabelProps } from '../Label';
 import { hasError } from '../utils/input';
-import { Wrapper } from './Field.style';
+import { LabelPosition, Spacing } from '../utils/prop-types';
+import { StyledField } from './Field.style';
 
 type Props = {
   label?: ReactNode;
+  labelPosition?: LabelPosition;
   labelProps?: LabelProps;
+  maxWidth?: Spacing;
 };
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
 
-type InheritAttrs = Omit<HelperTextProps, keyof Props & NativeAttrs>;
+type InheritAttrs = Omit<HelperTextProps & FlexProps, keyof Props & NativeAttrs>;
 
 type FieldProps = Props & NativeAttrs & InheritAttrs;
 
 const Field = forwardRef<HTMLDivElement, FieldProps>(
   (
-    { label, labelProps, errorMessage, errorMessageProps, description, descriptionProps, children, ...props },
+    {
+      label,
+      labelPosition = 'top',
+      labelProps,
+      errorMessage,
+      errorMessageProps,
+      description,
+      descriptionProps,
+      children,
+      maxWidth,
+      ...props
+    },
     ref
   ): JSX.Element => {
     const error = hasError({ errorMessage });
     const hasHelpText = !!description || error;
 
-    return (
-      <Flex ref={ref} direction='column' {...props}>
-        {label && <Label {...labelProps}>{label}</Label>}
-        <Wrapper alignItems='center'>{children}</Wrapper>
+    const element = (
+      <>
+        <StyledField $maxWidth={maxWidth}>{children}</StyledField>
         {hasHelpText && (
           <HelperText
             description={description}
@@ -37,6 +50,23 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
             errorMessageProps={errorMessageProps}
           />
         )}
+      </>
+    );
+
+    return (
+      <Flex ref={ref} direction={labelPosition === 'top' ? 'column' : 'row'} {...props}>
+        {label && (
+          <Label {...labelProps} position={labelPosition}>
+            {label}
+          </Label>
+        )}
+        {labelPosition === 'top' ? (
+          element
+        ) : (
+          <Flex direction='column' alignItems='flex-end'>
+            {element}
+          </Flex>
+        )}
       </Flex>
     );
   }
@@ -46,6 +76,7 @@ Field.displayName = 'Field';
 
 const useFieldProps = ({
   label,
+  labelPosition,
   labelProps,
   errorMessage,
   errorMessageProps,
@@ -54,19 +85,28 @@ const useFieldProps = ({
   className,
   hidden,
   style,
+  maxWidth,
+  alignItems,
+  justifyContent,
+  gap,
   ...props
 }: FieldProps): { fieldProps: FieldProps; elementProps: any } => {
   return {
     fieldProps: {
       label,
+      labelPosition,
       labelProps,
       errorMessage,
       errorMessageProps,
       description,
       descriptionProps,
       className,
       hidden,
-      style
+      style,
+      maxWidth,
+      alignItems,
+      justifyContent,
+      gap
     },
     elementProps: props
   };

diff --git a/src/component-library/Input/BaseInput.tsx b/src/component-library/Input/BaseInput.tsx
@@ -1,16 +1,13 @@
 import { ValidationState } from '@react-types/shared';
 import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
 
-import { Field, useFieldProps } from '../Field';
+import { Field, FieldProps, useFieldProps } from '../Field';
 import { HelperTextProps } from '../HelperText';
-import { LabelProps } from '../Label';
 import { hasError } from '../utils/input';
 import { Sizes, Spacing } from '../utils/prop-types';
 import { Adornment, StyledBaseInput } from './Input.style';
 
 type Props = {
-  label?: ReactNode;
-  labelProps?: LabelProps;
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
   bottomAdornment?: ReactNode;
@@ -25,7 +22,11 @@ type Props = {
 
 type NativeAttrs = Omit<InputHTMLAttributes<HTMLInputElement>, keyof Props>;
 
-type InheritAttrs = Omit<HelperTextProps, keyof Props & NativeAttrs>;
+type InheritAttrs = Omit<
+  HelperTextProps &
+    Pick<FieldProps, 'label' | 'labelPosition' | 'labelProps' | 'maxWidth' | 'justifyContent' | 'alignItems'>,
+  keyof Props & NativeAttrs
+>;
 
 type BaseInputProps = Props & NativeAttrs & InheritAttrs;
 

diff --git a/src/component-library/Input/Input.stories.tsx b/src/component-library/Input/Input.stories.tsx
@@ -6,9 +6,15 @@ const Template: Story<InputProps> = (args) => <Input {...args} />;
 
 const Default = Template.bind({});
 Default.args = {
+  placeholder: 'placeholder',
+  label: 'Coin'
+};
+
+const Side = Template.bind({});
+Side.args = {
   placeholder: 'placeholder',
   label: 'Coin',
-  description: "What's your favorite coin?"
+  labelPosition: 'side'
 };
 
 const Label = Template.bind({});

diff --git a/src/component-library/Label/Label.style.tsx b/src/component-library/Label/Label.style.tsx
@@ -1,13 +1,21 @@
 import styled from 'styled-components';
 
 import { theme } from '../theme';
+import { LabelPosition } from '../utils/prop-types';
 
-const StyledLabel = styled.label`
+type StyledLabelProps = {
+  $position: LabelPosition;
+};
+
+const StyledLabel = styled.label<StyledLabelProps>`
   font-weight: ${theme.fontWeight.medium};
   line-height: ${theme.lineHeight.lg};
   font-size: ${theme.text.xs};
   color: ${theme.label.text};
-  padding: ${theme.spacing.spacing1} 0;
+  padding: ${({ $position }) =>
+    $position === 'top'
+      ? `${theme.spacing.spacing1} 0`
+      : `${theme.spacing.spacing2} ${theme.spacing.spacing1} 0.438rem 0`};
   align-self: flex-start;
 `;
 

diff --git a/src/component-library/Label/Label.tsx b/src/component-library/Label/Label.tsx
@@ -1,14 +1,19 @@
 import { forwardRef, LabelHTMLAttributes } from 'react';
 
+import { LabelPosition } from '../utils/prop-types';
 import { StyledLabel } from './Label.style';
 
-type NativeAttrs = LabelHTMLAttributes<unknown>;
+type Props = {
+  position?: LabelPosition;
+};
 
-type LabelProps = NativeAttrs;
+type NativeAttrs = Omit<LabelHTMLAttributes<unknown>, keyof Props>;
+
+type LabelProps = Props & NativeAttrs;
 
 const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ children, ...props }, ref): JSX.Element => (
-    <StyledLabel {...props} ref={ref}>
+  ({ children, position = 'top', ...props }, ref): JSX.Element => (
+    <StyledLabel {...props} $position={position} ref={ref}>
       {children}
     </StyledLabel>
   )

diff --git a/src/component-library/List/List.stories.tsx b/src/component-library/List/List.stories.tsx
@@ -1,28 +1,44 @@
 import { Meta, Story } from '@storybook/react';
+import { useState } from 'react';
 
 import { List, ListItem, ListProps } from '.';
 
-const Template: Story<ListProps> = (args) => (
-  <div style={{ padding: 20 }}>
-    <List aria-label='Example List' {...args}>
-      <ListItem key='1' textValue='IBTC'>
-        IBTC
-      </ListItem>
-      <ListItem key='2' textValue='KINT'>
-        KINT
-      </ListItem>
-      <ListItem key='3' textValue='INTR'>
-        INTR
-      </ListItem>
-      <ListItem key='4' textValue='KSM'>
-        KSM
-      </ListItem>
-      <ListItem key='5' textValue='DOT'>
-        DOT
-      </ListItem>
-    </List>
-  </div>
-);
+const Template: Story<ListProps> = (args) => {
+  const [value, setValue] = useState<string>();
+
+  const handleSelectionChange: ListProps['onSelectionChange'] = (key) => {
+    const [selectedKey] = [...key];
+
+    setValue(selectedKey?.toString());
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <List
+        aria-label='Example List'
+        {...args}
+        selectedKeys={value ? [value] : undefined}
+        onSelectionChange={handleSelectionChange}
+      >
+        <ListItem key='1' textValue='IBTC'>
+          IBTC
+        </ListItem>
+        <ListItem key='2' textValue='KINT'>
+          KINT
+        </ListItem>
+        <ListItem key='3' textValue='INTR'>
+          INTR
+        </ListItem>
+        <ListItem key='4' textValue='KSM'>
+          KSM
+        </ListItem>
+        <ListItem key='5' textValue='DOT'>
+          DOT
+        </ListItem>
+      </List>
+    </div>
+  );
+};
 
 const Default = Template.bind({});
 Default.args = {

diff --git a/src/component-library/List/List.style.tsx b/src/component-library/List/List.style.tsx
@@ -35,6 +35,7 @@ const StyledListItem = styled.li<StyledListItemProps>`
   cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'};
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
   opacity: ${({ $isDisabled }) => $isDisabled && 0.5};
+  white-space: nowrap;
 
   ${({ $variant }) => {
     if ($variant === 'card') {