integrate eth bridging payment

frontend/.env.example

@@ -4,4 +4,4 @@ VITE_ETH_CHAIN_ID=
 VITE_WALLET_CONNECT_PROJECT_ID=
 VITE_INDEXER_ADDRESS=
 VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS=
-VITE_ERC20_TREASURY_CONTRACT_ADDRESS=
+VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS=

frontend/src/features/swap/components/swap-form/swap-eth-form.tsx

@@ -2,7 +2,7 @@ import { ETH_CHAIN_ID } from '@/consts';
 import { useEthAccount } from '@/hooks';
 
 import { NETWORK_INDEX } from '../../consts';
-import { useEthFTBalance, useHandleEthSubmit, useEthAccountBalance } from '../../hooks';
+import { useEthFTBalance, useHandleEthSubmit, useEthAccountBalance, useEthFee } from '../../hooks';
 
 import { SwapForm } from './swap-form';
 
@@ -21,6 +21,7 @@ function SwapEthForm({ renderSwapNetworkButton }: Props) {
       useHandleSubmit={useHandleEthSubmit}
       useAccountBalance={useEthAccountBalance}
       useFTBalance={useEthFTBalance}
+      useFee={useEthFee}
       renderSwapNetworkButton={renderSwapNetworkButton}
     />
   );

frontend/src/features/swap/components/swap-form/swap-form.tsx

@@ -5,8 +5,8 @@ import { Input } from '@/components';
 
 import GasSVG from '../../assets/gas.svg?react';
 import { FIELD_NAME, NETWORK_INDEX } from '../../consts';
-import { useSwapForm, useBridge, useVaraConfig } from '../../hooks';
-import { UseHandleSubmit, UseAccountBalance, UseFTBalance } from '../../types';
+import { useSwapForm, useBridge } from '../../hooks';
+import { UseHandleSubmit, UseAccountBalance, UseFTBalance, UseFee } from '../../types';
 import { Balance } from '../balance';
 import { Network } from '../network';
 
@@ -18,6 +18,7 @@ type Props = {
   useAccountBalance: UseAccountBalance;
   useFTBalance: UseFTBalance;
   useHandleSubmit: UseHandleSubmit;
+  useFee: UseFee;
   renderSwapNetworkButton: () => JSX.Element;
 };
 
@@ -27,17 +28,18 @@ function SwapForm({
   useHandleSubmit,
   useAccountBalance,
   useFTBalance,
+  useFee,
   renderSwapNetworkButton,
 }: Props) {
   const isVaraNetwork = networkIndex === NETWORK_INDEX.VARA;
   const FromNetwork = isVaraNetwork ? Network.Vara : Network.Eth;
   const ToNetwork = isVaraNetwork ? Network.Eth : Network.Vara;
 
-  const { address, options, symbol, pair,  ...bridge } = useBridge(networkIndex);
-  const { fee, ...config } = useVaraConfig(isVaraNetwork);
+  const { address, options, symbol, pair, ...bridge } = useBridge(networkIndex);
+  const { fee, ...config } = useFee();
   const accountBalance = useAccountBalance();
   const ftBalance = useFTBalance(address);
-  const { onSubmit, isSubmitting } = useHandleSubmit(address, fee.value);
+  const { onSubmit, isSubmitting, ...submit } = useHandleSubmit(address, fee.value);
 
   const { form, onValueChange, onExpectedValueChange, handleSubmit, setMaxBalance } = useSwapForm(
     isVaraNetwork,
@@ -99,7 +101,12 @@ function SwapForm({
             text="Swap"
             disabled={disabled}
             isLoading={
-              isSubmitting || accountBalance.isLoading || ftBalance.isLoading || config.isLoading || bridge.isLoading
+              isSubmitting ||
+              accountBalance.isLoading ||
+              ftBalance.isLoading ||
+              config.isLoading ||
+              bridge.isLoading ||
+              submit.isLoading
             }
           />
         </footer>

frontend/src/features/swap/components/swap-form/swap-vara-form.tsx

@@ -1,7 +1,7 @@
 import { useAccount } from '@gear-js/react-hooks';
 
 import { NETWORK_INDEX } from '../../consts';
-import { useHandleVaraSubmit, useVaraFTBalance, useVaraAccountBalance } from '../../hooks';
+import { useHandleVaraSubmit, useVaraFTBalance, useVaraAccountBalance, useVaraFee } from '../../hooks';
 
 import { SwapForm } from './swap-form';
 
@@ -19,6 +19,7 @@ function SwapVaraForm({ renderSwapNetworkButton }: Props) {
       useHandleSubmit={useHandleVaraSubmit}
       useAccountBalance={useVaraAccountBalance}
       useFTBalance={useVaraFTBalance}
+      useFee={useVaraFee}
       renderSwapNetworkButton={renderSwapNetworkButton}
     />
   );

frontend/src/features/swap/consts/abi/bridging-payment-abi.ts

@@ -0,0 +1,68 @@
+const BRIDGING_PAYMENT_ABI = [
+  {
+    type: 'constructor',
+    inputs: [
+      { name: '_underlying', type: 'address', internalType: 'address' },
+      { name: '_admin', type: 'address', internalType: 'address' },
+      { name: '_fee', type: 'uint256', internalType: 'uint256' },
+    ],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'getAdmin',
+    inputs: [],
+    outputs: [{ name: '', type: 'address', internalType: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'getFee',
+    inputs: [],
+    outputs: [{ name: '', type: 'uint256', internalType: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'getUnderlyingAddress',
+    inputs: [],
+    outputs: [{ name: '', type: 'address', internalType: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'requestBridging',
+    inputs: [
+      { name: 'token', type: 'address', internalType: 'address' },
+      { name: 'amount', type: 'uint256', internalType: 'uint256' },
+      { name: 'to', type: 'bytes32', internalType: 'bytes32' },
+    ],
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    type: 'function',
+    name: 'setAdmin',
+    inputs: [{ name: 'newAdmin', type: 'address', internalType: 'address' }],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'setFee',
+    inputs: [{ name: 'newFee', type: 'uint256', internalType: 'uint256' }],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'underlying',
+    inputs: [],
+    outputs: [{ name: '', type: 'address', internalType: 'address' }],
+    stateMutability: 'view',
+  },
+  { type: 'event', name: 'FeePaid', inputs: [], anonymous: false },
+  { type: 'error', name: 'NotAnAdmin', inputs: [] },
+] as const;
+
+export { BRIDGING_PAYMENT_ABI };

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

@@ -1,3 +1,3 @@
-import { ERC20_TREASURY_ABI } from './erc20-treasury-abi';
+import { BRIDGING_PAYMENT_ABI } from './bridging-payment-abi';
 
-export { ERC20_TREASURY_ABI };
+export { BRIDGING_PAYMENT_ABI };

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

@@ -0,0 +1,6 @@
+import { HexString } from '@gear-js/api';
+
+// TODO: can be read from vara bridging payment?
+const ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS = import.meta.env.VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS as HexString;
+
+export { ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS };