Peter/feat tx fee with swapped currency (#1340)

* chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <[email protected]> --------- Co-authored-by: Peter Slaný <[email protected]> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz <[email protected]> * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz <[email protected]> * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter <[email protected]> Co-authored-by: Thomas Jeatt <[email protected]> Co-authored-by: Peter Slaný <[email protected]> Co-authored-by: tomjeatt <[email protected]> Co-authored-by: Dominik Harz <[email protected]>
interlay · Jun 26, 2023 · bd49606 · bd49606 · vercel · Jun 26, 2023
1 parent 054763c
commit bd49606
Show file tree

Hide file tree

Showing 226 changed files with 4,829 additions and 3,216 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,7 +2,6 @@ import '../src/component-library/theme/theme.interlay.css';
 import '../src/component-library/theme/theme.kintsugi.css';
 import './sb-preview.css';
 import '../src/i18n';
-import "../src/lib/form/yup.custom"
 import { withThemes } from 'storybook-addon-themes/react';
 import { addDecorator } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "@headlessui/react": "^1.1.1",
     "@heroicons/react": "^2.0.18",
     "@interlay/bridge": "^0.3.13",
-    "@interlay/interbtc-api": "2.3.3",
+    "@interlay/interbtc-api": "2.3.4",
     "@interlay/monetary-js": "0.7.3",
     "@polkadot/api": "9.14.2",
     "@polkadot/extension-dapp": "0.44.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -15,6 +15,7 @@ import ErrorFallback from '@/legacy-components/ErrorFallback';
 import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner';
 import { useSubstrate, useSubstrateSecureState } from '@/lib/substrate';
 import Layout from '@/parts/Layout';
+import Wrapper from '@/parts/Wrapper';
 import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher';
 import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query';
 import { BitcoinNetwork } from '@/types/bitcoin';
@@ -28,7 +29,6 @@ import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag';
 const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge'));
 const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies'));
 const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer'));
-const Transactions = React.lazy(() => import(/* webpackChunkName: 'transactions' */ '@/pages/Transactions'));
 const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX'));
 const Staking = React.lazy(() => import(/* webpackChunkName: 'staking' */ '@/pages/Staking'));
 const Dashboard = React.lazy(() => import(/* webpackChunkName: 'dashboard' */ '@/pages/Dashboard'));
@@ -159,7 +159,7 @@ const App = (): JSX.Element => {
   }, [setSelectedAccount, extensions.length]);
 
   return (
-    <>
+    <Wrapper>
       <Layout>
         {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && <TestnetBanner />}
         <Route
@@ -182,9 +182,6 @@ const App = (): JSX.Element => {
                   <Route path={PAGES.STAKING}>
                     <Staking />
                   </Route>
-                  <Route path={PAGES.TRANSACTIONS}>
-                    <Transactions />
-                  </Route>
                   <Route path={PAGES.TX}>
                     <TX />
                   </Route>
@@ -235,7 +232,7 @@ const App = (): JSX.Element => {
         />
       </Layout>
       <TransactionModal />
-    </>
+    </Wrapper>
   );
 };
 

diff --git a/src/assets/img/dysonsphere.svg b/src/assets/img/dysonsphere.svg
diff --git a/src/assets/img/interlay-logo-with-text.svg b/src/assets/img/interlay-logo-with-text.svg
diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
@@ -157,6 +157,12 @@
   "sign_t&cs": "Sign T&Cs",
   "receivable_assets": "Receivable Assets",
   "dismiss": "Dismiss",
+  "insufficient_token_balance": "Insufficient {{token}} balance",
+  "amount": "Amount",
+  "select_token": "Select Token",
+  "fee_token": "Fee token",
+  "claim_rewards": "Claim Rewards",
+  "tx_fees": "Tx fees",
   "redeem_page": {
     "maximum_in_single_request": "Max redeemable in single request",
     "redeem": "Redeem",
@@ -349,7 +355,7 @@
     "maximum_in_single_request": "Max issuable in single request",
     "maximum_total_request": "Max issuable in total",
     "maximum_in_single_request_error": "Please enter less than {{maxAmount}} {{wrappedTokenSymbol}}.",
-    "request": "Request id  #{{id}}",
+    "request": "Request id",
     "you_received": "You have received",
     "contact_team": "Contact the team for debugging if you think this is an error.",
     "you_did_not_send": "You did not send the BTC transaction in time or transferred amount did not not meet the requested amount of {{wrappedTokenSymbol}}.",
@@ -610,7 +616,9 @@
     "amount_must_be_at_least": "Amount to {{action}} must be at least {{amount}} {{token}}",
     "amount_must_be_at_most": "Amount to {{action}} must be at most {{amount}}",
     "please_enter_no_higher_available_balance": "Please enter an amount no higher than your available balance",
-    "field_amount": "{{field}} amount"
+    "field_amount": "{{field}} amount",
+    "please_enter_a_valid_address": "Please enter a valid address",
+    "ensure_adequate_amount_left_to_cover_fees": "Ensure that an adequate number of coins are left to cover the fees"
   },
   "xcm_transfer": {
     "validation": {
@@ -712,5 +720,25 @@
     "requested_vault_replacement": "Requested vault replacement",
     "claiming_vesting": "Claiming vesting",
     "claimed_vesting": "Claimed vesting"
+  },
+  "bridge": {
+    "max_issuable": "Max issuable",
+    "max_redeemable": "Max redeemable",
+    "in_single_request": "In single request",
+    "in_total": "In total",
+    "manually_select_vault": "Manually Select Vault",
+    "select_vault": "Select Vault",
+    "select_a_vault": "Select a vault",
+    "compensation_amount": "Compensation amount",
+    "bridge_fee": "Bridge Fee",
+    "fee_paids_to_vaults_relayers_maintainers": "The bridge fee paid to the vaults, relayers and maintainers of the system",
+    "security_deposit": "Security Deposit",
+    "security_deposit_token": "Security deposit token",
+    "security_deposit_is_a_denial_of_service_protection": "The security deposit is a denial-of-service protection for Vaults that is refunded to you after the minting process is completed",
+    "bitcoin_network_fee": "Bitcoin Network Fee",
+    "transaction_fee": "Transaction Fee",
+    "fee_for_transaction_to_be_included_in_the_parachain": "The fee for the transaction to be included in the parachain",
+    "premium_redeem": "Premium Redeem",
+    "premium_redeem_info": "If you select premium redeem, you will try to redeem with a vault that is below the secure collateral threshold. This operation has a higher risk since the vault might be liquidated. For this higher risk, you will receive a compensation."
   }
 }
diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts
@@ -1,6 +1,6 @@
 import { CurrencyExt, InterbtcPrimitivesVaultId, newMonetaryAmount } from '@interlay/interbtc-api';
 import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js';
-import Big from 'big.js';
+import Big, { BigSource } from 'big.js';
 
 import { PARACHAIN_URL } from '@/constants';
 import { getTokenPrice } from '@/utils/helpers/prices';
@@ -177,6 +177,14 @@ const newSafeMonetaryAmount: typeof newMonetaryAmount = (...args) => {
   }
 };
 
+const safeBitcoinAmount = (amount: BigSource): BitcoinAmount => {
+  try {
+    return new BitcoinAmount(amount);
+  } catch (e) {
+    return new BitcoinAmount(0);
+  }
+};
+
 export {
   convertMonetaryAmountToUsdBig as convertMonetaryAmountToBigUSD,
   convertMonetaryAmountToValueInUSD,
@@ -190,9 +198,11 @@ export {
   formatUSD,
   getLastMidnightTimestamps,
   getPolkadotLink,
+  getRandomArrayElement,
   getRandomVaultIdWithCapacity,
   monetaryToNumber,
   newSafeMonetaryAmount,
+  safeBitcoinAmount,
   shortAddress,
   shortTxId
 };
diff --git a/src/component-library/Accordion/Accordion.style.tsx b/src/component-library/Accordion/Accordion.style.tsx
@@ -28,7 +28,7 @@ const StyledAccordionItemWrapper = styled.div<Pick<StyledAccordionProps, '$isDis
 
 const StyledAccordionItemHeading = styled(H3)`
   margin: 0;
-  font-weight: ${theme.fontWeight.bold};
+  font-weight: ${theme.fontWeight.semibold};
 `;
 
 const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
@@ -49,7 +49,7 @@ const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
 `;
 
 const StyledChevronDown = styled(ChevronDown)<Pick<StyledAccordionProps, '$isExpanded'>>`
-  transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-90deg)'};
+  transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-180deg)'};
   transition: transform ${theme.transition.duration.duration150}ms ease;
 `;
 

diff --git a/src/component-library/Accordion/AccordionItem.tsx b/src/component-library/Accordion/AccordionItem.tsx
@@ -41,7 +41,7 @@ const AccordionItem = <T extends Record<string, unknown>>({
             $isFocusVisible={isFocusVisible}
           >
             {item.props.title}
-            <StyledChevronDown role='img' $isExpanded={isExpanded} />
+            <StyledChevronDown role='img' size='s' $isExpanded={isExpanded} />
           </StyledAccordionItemButton>
         </FocusRing>
       </StyledAccordionItemHeading>

diff --git a/src/component-library/Alert/Alert.tsx b/src/component-library/Alert/Alert.tsx
@@ -1,15 +1,17 @@
-import { ReactNode } from 'react';
-
+import { FlexProps } from '../Flex';
 import { Status } from '../utils/prop-types';
 import { StyledAlert, StyledWarningIcon } from './Alert.style';
 
-interface AlertProps {
-  status: Status;
-  children: ReactNode;
-}
+type Props = {
+  status?: Status;
+};
+
+type InheritAttrs = Omit<FlexProps, keyof Props>;
+
+type AlertProps = Props & InheritAttrs;
 
-const Alert = ({ status, children }: AlertProps): JSX.Element => (
-  <StyledAlert $status={status} role='alert' gap='spacing4' alignItems='center'>
+const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => (
+  <StyledAlert $status={status} role='alert' gap='spacing4' alignItems='center' {...props}>
     <StyledWarningIcon />
     <div>{children}</div>
   </StyledAlert>

diff --git a/src/component-library/Card/Card.style.tsx b/src/component-library/Card/Card.style.tsx
@@ -2,25 +2,33 @@ import styled, { css } from 'styled-components';
 
 import { Flex } from '../Flex';
 import { theme } from '../theme';
-import { CardVariants, Variants } from '../utils/prop-types';
+import { BorderRadius, CardVariants, Spacing, Variants } from '../utils/prop-types';
 
 type StyledCardProps = {
   $variant: CardVariants;
+  $rounded: BorderRadius;
+  $padding: Spacing;
+  $shadowed: boolean;
   $background: Variants;
   $isHoverable?: boolean;
   $isPressable?: boolean;
 };
 
 const StyledCard = styled(Flex)<StyledCardProps>`
-  box-shadow: ${theme.boxShadow.default};
   color: ${theme.colors.textPrimary};
   background-color: ${({ $background }) => theme.card.bg[$background]};
   border: ${({ $variant }) => ($variant === 'bordered' ? theme.border.default : theme.card.outlined.border)};
-  border-radius: ${theme.rounded.xl};
-  padding: ${theme.spacing.spacing6};
+  border-radius: ${({ $rounded }) => theme.rounded[$rounded]};
+  padding: ${({ $padding }) => theme.spacing[$padding]};
   cursor: ${({ $isPressable }) => $isPressable && 'pointer'};
   outline: none;
 
+  ${({ $shadowed }) =>
+    $shadowed &&
+    css`
+      box-shadow: ${theme.boxShadow.default};
+    `}
+
   ${({ $isHoverable }) =>
     $isHoverable &&
     css`

diff --git a/src/component-library/Card/Card.tsx b/src/component-library/Card/Card.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 
 import { FlexProps } from '../Flex';
 import { useDOMRef } from '../utils/dom';
-import { CardVariants, Variants } from '../utils/prop-types';
+import { BorderRadius, CardVariants, Spacing, Variants } from '../utils/prop-types';
 import { StyledCard } from './Card.style';
 
 type Props = {
@@ -14,6 +14,10 @@ type Props = {
   isHoverable?: boolean;
   isPressable?: boolean;
   isDisabled?: boolean;
+  rounded?: BorderRadius;
+  padding?: Spacing;
+  shadowed?: boolean;
+
   onPress?: (e: PressEvent) => void;
 };
 
@@ -33,6 +37,9 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
       children,
       elementType,
       isDisabled,
+      rounded = 'xl',
+      padding = 'spacing6',
+      shadowed = true,
       ...props
     },
     ref
@@ -50,6 +57,9 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
         $background={background}
         $isHoverable={isHoverable}
         $isPressable={isPressable}
+        $rounded={rounded}
+        $padding={padding}
+        $shadowed={shadowed}
         direction={direction}
         elementType={elementType}
         {...mergeProps(props, isPressable ? buttonProps : {})}

diff --git a/src/component-library/Input/BaseInput.tsx b/src/component-library/Input/BaseInput.tsx
@@ -5,7 +5,7 @@ import { Field, useFieldProps } from '../Field';
 import { HelperTextProps } from '../HelperText';
 import { LabelProps } from '../Label';
 import { hasError } from '../utils/input';
-import { Sizes } from '../utils/prop-types';
+import { Sizes, Spacing } from '../utils/prop-types';
 import { Adornment, StyledBaseInput } from './Input.style';
 
 type Props = {
@@ -17,6 +17,8 @@ type Props = {
   value?: string | ReadonlyArray<string> | number;
   defaultValue?: string | ReadonlyArray<string> | number;
   size?: Sizes;
+  // TODO: temporary
+  padding?: { top?: Spacing; bottom?: Spacing; left?: Spacing; right?: Spacing };
   validationState?: ValidationState;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
@@ -29,7 +31,7 @@ type BaseInputProps = Props & NativeAttrs & InheritAttrs;
 
 const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
   (
-    { startAdornment, endAdornment, bottomAdornment, disabled, size = 'medium', validationState, ...props },
+    { startAdornment, endAdornment, bottomAdornment, disabled, size = 'medium', validationState, padding, ...props },
     ref
   ): JSX.Element => {
     const endAdornmentRef = useRef<HTMLDivElement>(null);
@@ -57,6 +59,7 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
           $hasError={error}
           $isDisabled={!!disabled}
           $endAdornmentWidth={endAdornmentWidth}
+          $padding={padding}
           {...elementProps}
         />
         {bottomAdornment && <Adornment $position='bottom'>{bottomAdornment}</Adornment>}