[release] Interlay 2.40.0 (#1597) · interlay/interbtc-ui@a1f4059

vercel · 2023-11-07T10:41:51Z

Successfully deployed to the following URLs:

interbtc-ui-interlay – ./

interbtc-ui-interlay-interlay.vercel.app
interbtc-ui-interlay.vercel.app
app.interlay.io
interbtc-ui-interlay-git-interlay-interlay.vercel.app

-Original file line number
+Diff line change
@@ Expand Up / @@ -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:
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "interbtc-ui",
-      "version": "2.39.1",
+      "version": "2.40.0",
       "private": true,
       "dependencies": {
         "@craco/craco": "^6.1.1",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -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",
@@ Expand All / @@ -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",
@@ Expand Down Expand Up / @@ -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",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -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 };

-Original file line number
+Diff line change
@@ -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}
@@ Expand All / @@ -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>
         );
       }
@@ Expand All / @@ -46,6 +76,7 @@ Field.displayName = 'Field'; @@
     const useFieldProps = ({
       label,
+      labelPosition,
       labelProps,
       errorMessage,
       errorMessageProps,
@@ Expand All / @@ -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
       };
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

1 comment on commit `a1f4059`

vercel bot commented on `a1f4059` Nov 7, 2023

-Original file line number
+Diff line change
@@ -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;
@@ Expand All / @@ -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;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
     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({});
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -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;
     `;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -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>
       )
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -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 = {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -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') {
@@ Expand Down @@

Commit

There are no files selected for viewing

1 comment on commit a1f4059

vercel bot commented on a1f4059 Nov 7, 2023

Choose a reason for hiding this comment

interbtc-ui-interlay – ./

1 comment on commit `a1f4059`

vercel bot commented on `a1f4059` Nov 7, 2023