# Use Withdrawal with frontend

### Process:
1. Call public API to get [chains](https://bridge.api.alphacarbon.network/secure/bridge/public/chains)
2. Call public API to get [tokens](https://bridge.api.alphacarbon.network/secure/bridge/public/tokens)
4. Build contract with contract address and abi
5. Use contract **Abi** methods
6. Call **transferBridgedOut** to withdraw

### Prerequisites:

yarn add axios
yarn add ethers

### Withdraw example

// define api response type
type ApiSuccessResponse<D = never> = D;


// define chain type
enum EChainType {
	'ethereum' = 'ethereum',
	'binance' = 'binance',
	'tron' = 'tron',
	'aminox' = 'aminox',
}
// define chain index
enum EChainTypeIdx {
	'ethereum' = 0,
	'binance',
	'aminox',
	'polygon',
	'tron',
}

// define tokens & chains type
type IChainInfo = {
	chainType: EChainType;
	chainId: number;
};

type ITokenConfig = {
	contractAddress: string;
	decimals: number;
	chainInfo: IChainInfo;
	symbol: string;
};


type IResponseGetTokens = ApiSuccessResponse<{
    [symbol: string]: ITokenConfig[];
}>;

type IChainConfig = {
	chainType: EChainType;
	chainId: number;
	name: string;
	currencySymbol: string;
	blockExplorerUrl: string;
};

type IResponseGetChains = ApiSuccessResponse<IChainConfig[]>;

// get tokens
const tokens = (await axios.get<IResponseGetTokens>'https://bridge.api.alphacarbon.network/secure/bridge/public/tokens'
)).data;

// get chains
const chains = (await axios.get<IResponseGetChains>'https://bridge.api.alphacarbon.network/secure/bridge/public/chains'
)).data;

// get contract
const contract = await new ethers.Contract(
    contractAddress, // token contract address
    bridgeContractAbi, // Abi
    web3Provider.getSigner(), // connected wallet provider
);

// submit withdraw

// decode Tron address
const decodeBase58Address = (base58Sting: string) => {
	if (typeof base58Sting != 'string') return undefined;

	if (base58Sting.length <= 4) return undefined;

	return `0x${Buffer.from(bs58.decode(base58Sting))
		.toString('hex')
		.substring(2, 42)}`;
};

// if to chain is Tron, must decode address
const hexAddress =
    toChain === EChainType.tron
        ? decodeBase58Address(address)
        : address;

// parseUnit submit amount value
const value = ethers.utils.parseUnits(
    String(Number(amount)), // amount is withdraw value
    token!.decimals, // token address decimal
)._hex;

const result = await contract.transferBridgedOut(
    hexAddress, // recipient's address
    value, // hex amount value
    chainId, // to chainid
    EChainTypeIdx[chainType], // use enum EChainTypeIdx with chainType to find index
    { gasLimit: 150000 },
);

### Build Abi.json

[
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "from",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "amount",
                "type": "uint256"
            }
        ],
        "name": "BridgeFee",
        "type": "event"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "from",
                "type": "address"
            },
            {
                "indexed": true,
                "internalType": "address",
                "name": "to",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "value",
                "type": "uint256"
            }
        ],
        "name": "Transfer",
        "type": "event"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "from",
                "type": "address"
            },
            {
                "indexed": true,
                "internalType": "address",
                "name": "to",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "amount",
                "type": "uint256"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "sourceChainId",
                "type": "uint256"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "sourceChainType",
                "type": "uint256"
            }
        ],
        "name": "TransferBridgedIn",
        "type": "event"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "from",
                "type": "address"
            },
            {
                "indexed": true,
                "internalType": "address",
                "name": "bridgeAddress",
                "type": "address"
            },
            {
                "indexed": true,
                "internalType": "address",
                "name": "to",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "amount",
                "type": "uint256"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "targetChainId",
                "type": "uint256"
            },
            {
                "indexed": false,
                "internalType": "uint256",
                "name": "targetChainType",
                "type": "uint256"
            }
        ],
        "name": "TransferBridgedOut",
        "type": "event"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "recipient",
                "type": "address"
            },
            {
                "internalType": "uint256",
                "name": "amount",
                "type": "uint256"
            }
        ],
        "name": "transfer",
        "outputs": [
            {
                "internalType": "bool",
                "name": "",
                "type": "bool"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "to",
                "type": "address"
            },
            {
                "internalType": "uint256",
                "name": "value",
                "type": "uint256"
            },
            {
                "internalType": "uint256",
                "name": "sourceChainId",
                "type": "uint256"
            },
            {
                "internalType": "uint256",
                "name": "sourceChainType",
                "type": "uint256"
            }
        ],
        "name": "transferBridgedIn",
        "outputs": [
            {
                "internalType": "bool",
                "name": "",
                "type": "bool"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "to",
                "type": "address"
            },
            {
                "internalType": "uint256",
                "name": "value",
                "type": "uint256"
            },
            {
                "internalType": "uint256",
                "name": "targetChainId",
                "type": "uint256"
            },
            {
                "internalType": "uint256",
                "name": "targetChainType",
                "type": "uint256"
            }
        ],
        "name": "transferBridgedOut",
        "outputs": [
            {
                "internalType": "bool",
                "name": "",
                "type": "bool"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "account",
                "type": "address"
            }
        ],
        "name": "balanceOf",
        "outputs": [
            {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "decimals",
        "outputs": [
            {
                "internalType": "uint8",
                "name": "",
                "type": "uint8"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "name",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "owner",
        "outputs": [
            {
                "internalType": "address",
                "name": "",
                "type": "address"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "symbol",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "totalSupply",
        "outputs": [
            {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
]

:::info
:pushpin: Refrence:
1. [Ethers](https://docs.ethers.io/v5/api/utils/display-logic/)
:::