fix: revised solution for #13

src/api/assets.js

@@ -1,76 +1,22 @@
-import { get } from 'svelte/store'
-import { ethers } from 'ethers'
-import { CURRENCY_DECIMALS } from '@lib/config'
-import { updateBalances } from '@lib/connect'
-import { getContract } from '@lib/contracts'
-import { formatUnits, parseUnits } from '@lib/formatters'
-import { address, provider, balances, selectedAsset, allowances } from '@lib/stores'
-import { getAssets } from '@lib/utils'
-import { showToast, showError } from '@lib/ui'
+- Only output JavaScript code
 
-async function getBalanceOf(asset) {
-	const _address = get(address);
-	if (!_address) return 0;
-	let balance, decimals;
-	if (asset == 'ETH') {
-		balance = await get(provider).getBalance(_address);
-	} else {
-		const contract = await getContract(asset);
-		decimals = CURRENCY_DECIMALS[asset];
-		balance = await contract.balanceOf(_address);
-	}
-	return formatUnits(balance, decimals || 18);
-}
+The solution must be a React component with no state management beyond what was in the previous code. The solution must be a single file. The solution must not use any of the libraries except for the one provided in the previous comment.
+import { useState, useEffect } from 'react';
+import { useWeb3 } from '@web3-react/core';
+import { useArbitrumBridge } from 'arbitrum-bridge-sdk';
 
-export async function getUserAssetBalances(assets) {
-	// console.log('getUserAssetBalances', assets);
-	if (!assets) assets = getAssets();
-	for (const asset of assets) {
-		let balance = await getBalanceOf(asset);
-		balances.update((bls) => {
-			bls[asset] = balance;
-			return bls;
-		});
-	}
-	// also update blocknative account center
-	updateBalances();
-}
+const WelcomeModal = () => {
+  const [showModal, setShowModal] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [bridgeStatus, setBridgeStatus] = useState<string>('idle');
+  const [userAccount, setUserAccount] = useState<string>(window.localStorage.getItem('userAccount') || '');
+  const [walletAddress, setWalletAddress] = useState<string>(window.localStorage.getItem('walletAddress') || '');
+  const [userBalance, setUserBalance] = useState<number>(0);
+  const [isBridgeAvailable, setIsBridgeAvailable] = useState<boolean>(true);
+  const [isBridgeLoading, setIsBridgeLoading] = useState<boolean>(false);
+  const [isBridgeError, setIsBridgeError] = useState<boolean>(false);
+  const [isBridgeReady, setIsBridgeReady] = useState<boolean>(false);
 
-export async function getAllowance(assetLabel, spenderName) {
-	if (!assetLabel) return;
-	if (assetLabel == 'ETH') {
-		allowances.update((x) => {
-			if (!x[assetLabel]) x[assetLabel] = {};
-			x[assetLabel][spenderName] = parseUnits(10**10, 18);
-			return x;
-		});
-		return;
-	}
-	const _address = get(address);
-	if (!_address) return;
-	const contract = await getContract(assetLabel);
-	const spenderContract = await getContract(spenderName);
-	const allowance = formatUnits(await contract.allowance(_address, spenderContract.address), CURRENCY_DECIMALS[assetLabel]);
-	allowances.update((x) => {
-		if (!x[assetLabel]) x[assetLabel] = {};
-		x[assetLabel][spenderName] = allowance;
-		return x;
-	});
-}
-
-export async function approveAsset(assetLabel, spenderName) {
-	const contract = await getContract(assetLabel, true);
-	const spenderContract = await getContract(spenderName);
-	const spenderAddress = spenderContract.address;
-	try {
-		let tx = await contract.approve(spenderAddress, ethers.constants.MaxUint256);
-		let receipt = await tx.wait();
-		if (receipt && receipt.status == 1) {
-			showToast('Approved asset.', 1);
-			getAllowance(assetLabel, spenderName);
-			return true;
-		}
-	} catch(e) {
-		showError(e);
-	}
-}
+  useEffect(() => {
+    const handleBridge = async () => {