Tom/bug/burn form collateral tokens (#1042)

* refactor: loop collateral to get burnable tokens

* refactor: revert previous change and simplify

* refactor: add function to filter tokens

* refactor: fetch collateral currencies and render token values

* wip: form layout and translation

* wip: set data and selected collateral

* chore: remove console log

* refactor: remove single collateral code

* chore: comment

* fix: incorrect USD value

* chore: remove testing code

* refactor: remove native token import

* refactor: add BurnableCollateral type

* refactor: add fullWidth prop and label to token selector

* refactor: collateral icon

* chore: add dictionary item

* chore: remove unnecessary conditional operators

* refactor: handle callback

* refactor: fix failing test

* chore: remove unused code

* refactor: add success notification to burn form

src/assets/locales/en/translation.json

@@ -248,8 +248,10 @@
     }
   },
   "burn_page": {
-    "burn_interbtc": "Burn {{wrappedTokenSymbol}} in exchange for {{collateralTokenSymbol}}",
-    "available": "{{wrappedTokenSymbol}} available to burn",
+    "burn_interbtc": "Burn {{wrappedTokenSymbol}}",
+    "available_total": "Total available {{wrappedTokenSymbol}} to burn",
+    "available_from_collateral": "{{wrappedTokenSymbol}} available to burn from {{collateralTokenSymbol}}",
+    "collateral_selector_label": "In exchange for",
     "burn": "Burn",
     "please_enter_the_amount": "Please enter the amount.",
     "successfully_burned": "Successfully burned.",

src/legacy-components/Tokens/TokenSelector/index.tsx

@@ -25,16 +25,24 @@ interface Props {
   showBalances: boolean;
   currentToken: TokenOption;
   onChange: (type: TokenType) => void;
+  fullWidth?: boolean;
 }
 
-const TokenSelector = ({ variant, tokenOptions, currentToken, onChange, showBalances }: Props): JSX.Element => {
+const TokenSelector = ({
+  variant,
+  tokenOptions,
+  currentToken,
+  onChange,
+  showBalances,
+  fullWidth
+}: Props): JSX.Element => {
   return (
     <>
       {currentToken && (
         <Select variant={variant} key={currentToken.symbol} value={currentToken.symbol} onChange={onChange}>
           {({ open }) => (
             <>
-              <SelectBody className={clsx('w-52')}>
+              <SelectBody className={clsx(fullWidth ? 'w-full' : 'w-52')}>
                 <SelectButton variant={variant}>
                   <span
                     className={clsx('flex', 'items-center', 'space-x-3', {

src/legacy-components/Tokens/index.tsx

@@ -1,4 +1,5 @@
 import { CurrencyExt } from '@interlay/interbtc-api';
+import clsx from 'clsx';
 import * as React from 'react';
 import { withErrorBoundary } from 'react-error-boundary';
 
@@ -24,9 +25,19 @@ interface Props {
   variant?: SelectVariants;
   callbackFunction?: (token: TokenOption) => void;
   showBalances?: boolean;
+  tickers?: Array<string>;
+  label?: string;
+  fullWidth?: boolean;
 }
 
-const Tokens = ({ variant = 'optionSelector', callbackFunction, showBalances = true }: Props): JSX.Element => {
+const Tokens = ({
+  variant = 'optionSelector',
+  callbackFunction,
+  showBalances = true,
+  tickers,
+  label,
+  fullWidth = false
+}: Props): JSX.Element => {
   const [tokenOptions, setTokenOptions] = React.useState<Array<TokenOption> | undefined>(undefined);
   const [currentToken, setCurrentToken] = React.useState<TokenOption | undefined>(undefined);
 
@@ -40,14 +51,14 @@ const Tokens = ({ variant = 'optionSelector', callbackFunction, showBalances = t
     if (!tokenOptions) return;
 
     if (!currentToken) {
-      // Set relay-chain native token as default
-      setCurrentToken(getTokenOption(RELAY_CHAIN_NATIVE_TOKEN.ticker));
+      // Set default
+      setCurrentToken(tickers ? getTokenOption(tickers[0]) : getTokenOption(RELAY_CHAIN_NATIVE_TOKEN.ticker));
     }
 
     if (callbackFunction && currentToken) {
       callbackFunction(currentToken);
     }
-  }, [tokenOptions, currentToken, getTokenOption, callbackFunction]);
+  }, [tokenOptions, currentToken, getTokenOption, callbackFunction, tickers]);
 
   const handleUpdateToken = (tokenType: TokenType) => {
     const token = getTokenOption(tokenType);
@@ -61,7 +72,11 @@ const Tokens = ({ variant = 'optionSelector', callbackFunction, showBalances = t
   React.useEffect(() => {
     if (!balances) return;
 
-    const tokenOptions: Array<TokenOption> = Object.values(balances).map((balance) => ({
+    const filteredBalances = tickers
+      ? Object.values(balances).filter((value) => tickers?.includes(value.currency.ticker))
+      : balances;
+
+    const tokenOptions: Array<TokenOption> = Object.values(filteredBalances).map((balance) => ({
       token: balance.currency,
       balance: getBalance(balance.currency.ticker)?.free.toHuman(5) || '0',
       transferableBalance: getBalance(balance.currency.ticker)?.transferable.toHuman(5) || '0',
@@ -70,7 +85,7 @@ const Tokens = ({ variant = 'optionSelector', callbackFunction, showBalances = t
     }));
 
     setTokenOptions(tokenOptions);
-  }, [balances, getBalance, variant]);
+  }, [balances, getBalance, variant, tickers]);
 
   // Reset currentToken to get updated values if tokenOptions change
   // while a current token is set. This will always happen because
@@ -82,17 +97,19 @@ const Tokens = ({ variant = 'optionSelector', callbackFunction, showBalances = t
   }, [currentToken, getTokenOption, tokenOptions]);
 
   return (
-    <>
+    <div>
+      {label && <label className={clsx('text-sm', 'space-x-0.5')}>{label}</label>}
       {tokenOptions && currentToken ? (
         <TokenSelector
           variant={variant}
           showBalances={showBalances}
           tokenOptions={tokenOptions}
           currentToken={currentToken}
           onChange={handleUpdateToken}
+          fullWidth={fullWidth}
         />
       ) : null}
-    </>
+    </div>
   );
 };