feat(frontend): add tokens unlock (#236)

frontend/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@gear-js/api": "0.39.0",
-    "@gear-js/react-hooks": "0.14.1",
+    "@gear-js/react-hooks": "0.14.2",
     "@gear-js/vara-ui": "0.0.10",
     "@hookform/resolvers": "3.9.0",
     "@polkadot/api": "14.3.1",

frontend/src/consts/index.ts

@@ -2,7 +2,7 @@ import { FUNGIBLE_TOKEN_ABI } from './abi';
 import { VARA_NODE_ADDRESS, ETH_NODE_ADDRESS, ETH_CHAIN_ID, WRAPPED_VARA_CONTRACT_ADDRESS } from './env';
 import { TOKEN_SVG } from './icons';
 import { ROUTE } from './routing';
-import { VftManagerProgram, VftProgram } from './sails';
+import { VftManagerProgram, VftProgram, WrappedVaraProgram } from './sails';
 
 export {
   FUNGIBLE_TOKEN_ABI,
@@ -14,4 +14,5 @@ export {
   WRAPPED_VARA_CONTRACT_ADDRESS,
   VftManagerProgram,
   VftProgram,
+  WrappedVaraProgram,
 };

frontend/src/consts/sails/index.ts

@@ -1,4 +1,5 @@
 import { Program as VftProgram } from './extended-vft';
 import { Program as VftManagerProgram } from './vft-manager';
+import { Program as WrappedVaraProgram } from './wrapped-vara';
 
-export { VftManagerProgram, VftProgram };
+export { VftManagerProgram, VftProgram, WrappedVaraProgram };

frontend/src/features/swap/consts/index.ts

@@ -2,7 +2,7 @@ import { BRIDGING_PAYMENT_ABI } from './abi';
 import { BRIDGING_PAYMENT_CONTRACT_ADDRESS, ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS } from './env';
 import { EVENT_NAME } from './eth';
 import { FIELD_NAME, DEFAULT_VALUES, ADDRESS_SCHEMA, ERROR_MESSAGE } from './form';
-import { BridgingPaymentProgram, WrappedVaraProgram } from './sails';
+import { BridgingPaymentProgram } from './sails';
 import { SERVICE_NAME, QUERY_NAME } from './vara';
 
 const NETWORK_INDEX = {
@@ -23,5 +23,4 @@ export {
   SERVICE_NAME,
   QUERY_NAME,
   BridgingPaymentProgram,
-  WrappedVaraProgram,
 };

frontend/src/features/swap/consts/sails/index.ts

@@ -1,4 +1,3 @@
 import { Program as BridgingPaymentProgram } from './bridging-payment';
-import { Program as WrappedVaraProgram } from './wrapped-vara';
 
-export { BridgingPaymentProgram, WrappedVaraProgram };
+export { BridgingPaymentProgram };

frontend/src/features/swap/hooks/vara/use-handle-vara-submit.ts

@@ -2,10 +2,10 @@ import { HexString } from '@gear-js/api';
 import { useProgram, useSendProgramTransaction } from '@gear-js/react-hooks';
 import { useMutation } from '@tanstack/react-query';
 
-import { VftProgram, WRAPPED_VARA_CONTRACT_ADDRESS } from '@/consts';
+import { VftProgram, WrappedVaraProgram, WRAPPED_VARA_CONTRACT_ADDRESS } from '@/consts';
 import { isUndefined } from '@/utils';
 
-import { BridgingPaymentProgram, WrappedVaraProgram, BRIDGING_PAYMENT_CONTRACT_ADDRESS } from '../../consts';
+import { BridgingPaymentProgram, BRIDGING_PAYMENT_CONTRACT_ADDRESS } from '../../consts';
 import { FUNCTION_NAME, SERVICE_NAME } from '../../consts/vara';
 import { FormattedValues } from '../../types';
 

frontend/src/features/token-tracker/components/card/balance-card.module.scss

@@ -1,6 +1,9 @@
 .card {
   padding: 16px;
 
+  display: flex;
+  justify-content: space-between;
+
   border: 1px solid rgba(#e1e1e3, 0.6);
   border-radius: 6px;
 

frontend/src/features/token-tracker/components/card/balance-card.tsx

@@ -1,24 +1,28 @@
+import { PropsWithChildren } from 'react';
+
 import TokenPlaceholderSVG from '@/assets/token-placeholder.svg?react';
 import { Skeleton } from '@/components';
 import { SVGComponent } from '@/types';
 import { cx } from '@/utils';
 
 import styles from './balance-card.module.scss';
 
-type Props = {
+type Props = PropsWithChildren & {
   SVG: SVGComponent;
   value: string;
   symbol: string;
   locked?: boolean;
 };
 
-function BalanceCard({ locked, value, SVG, symbol }: Props) {
+function BalanceCard({ locked, value, SVG, symbol, children }: Props) {
   return (
     <div className={cx(styles.card, locked && styles.locked)}>
       <span className={styles.balance}>
         <SVG />
         {value} {symbol}
       </span>
+
+      {children}
     </div>
   );
 }

frontend/src/features/token-tracker/components/token-tracker-modal/token-tracker-modal.tsx

@@ -1,5 +1,5 @@
-import { getTypedEntries, useAccount } from '@gear-js/react-hooks';
-import { Modal } from '@gear-js/vara-ui';
+import { getTypedEntries, useAccount, useAlert } from '@gear-js/react-hooks';
+import { Modal, Button } from '@gear-js/vara-ui';
 import { formatUnits } from 'viem';
 
 import EthSVG from '@/assets/eth.svg?react';
@@ -8,7 +8,7 @@ import VaraSVG from '@/assets/vara.svg?react';
 import { TOKEN_SVG, WRAPPED_VARA_CONTRACT_ADDRESS } from '@/consts';
 import { useVaraAccountBalance, useEthAccountBalance, useTokens } from '@/hooks';
 
-import { useVaraFTBalances, useEthFTBalances } from '../../hooks';
+import { useVaraFTBalances, useEthFTBalances, useBurnVaraTokens } from '../../hooks';
 import { BalanceCard } from '../card';
 
 import styles from './token-tracker-modal.module.scss';
@@ -21,6 +21,8 @@ type Props = {
 function TokenTrackerModal({ lockedBalance, close }: Props) {
   const { account } = useAccount();
   const { addresses, decimals, symbols } = useTokens();
+  const burn = useBurnVaraTokens();
+  const alert = useAlert();
 
   const networkIndex = account ? 0 : 1;
   const nonNativeAddresses = addresses?.filter((pair) => pair[networkIndex] !== WRAPPED_VARA_CONTRACT_ADDRESS);
@@ -60,6 +62,15 @@ function TokenTrackerModal({ lockedBalance, close }: Props) {
     ));
   };
 
+  const handleUnlockBalanceClick = () => {
+    if (!lockedBalance.value) throw new Error('Locked balance is not found');
+
+    burn
+      .sendTransactionAsync({ args: [lockedBalance.value] })
+      .then(() => alert.success('Tokens unlocked successfully'))
+      .catch((error) => alert.error(error instanceof Error ? error.message : String(error)));
+  };
+
   return (
     // TODO: remove assertion after @gear-js/vara-ui heading is updated to accept ReactNode.
     // fast fix for now, cuz major font update was made without a fallback,
@@ -86,8 +97,11 @@ function TokenTrackerModal({ lockedBalance, close }: Props) {
             value={lockedBalance.formattedValue}
             SVG={TOKEN_SVG[WRAPPED_VARA_CONTRACT_ADDRESS] ?? TokenPlaceholderSVG}
             symbol={symbols[WRAPPED_VARA_CONTRACT_ADDRESS] ?? 'Unit'}
-            locked
-          />
+            locked>
+            {Boolean(lockedBalance.value) && (
+              <Button text="Unlock" size="small" onClick={handleUnlockBalanceClick} isLoading={burn.isPending} />
+            )}
+          </BalanceCard>
         </>
       )}
     </Modal>

frontend/src/features/token-tracker/hooks/index.ts

@@ -1,4 +1,5 @@
+import { useBurnVaraTokens } from './use-burn-vara-tokens';
 import { useEthFTBalances } from './use-eth-ft-balances';
 import { useVaraFTBalances } from './use-vara-ft-balances';
 
-export { useEthFTBalances, useVaraFTBalances };
+export { useEthFTBalances, useVaraFTBalances, useBurnVaraTokens };

frontend/src/features/token-tracker/hooks/use-burn-vara-tokens.ts

@@ -0,0 +1,18 @@
+import { useProgram, useSendProgramTransaction } from '@gear-js/react-hooks';
+
+import { WrappedVaraProgram, WRAPPED_VARA_CONTRACT_ADDRESS } from '@/consts';
+
+function useBurnVaraTokens() {
+  const { data: program } = useProgram({
+    library: WrappedVaraProgram,
+    id: WRAPPED_VARA_CONTRACT_ADDRESS,
+  });
+
+  return useSendProgramTransaction({
+    program,
+    serviceName: 'tokenizer',
+    functionName: 'burn',
+  });
+}
+
+export { useBurnVaraTokens };