diff --git a/packages/bridge/src/components/Input/input.tsx b/packages/bridge/src/components/Input/input.tsx index 1b9682f..3e6a73d 100644 --- a/packages/bridge/src/components/Input/input.tsx +++ b/packages/bridge/src/components/Input/input.tsx @@ -1,12 +1,9 @@ import React, { useState } from 'react'; import { NumericInput } from '@oyster/common'; -import { Card, Select } from 'antd'; +import { Card } from 'antd'; import './style.less'; -import { useEthereum } from '../../contexts'; -import { TokenDisplay } from '../TokenDisplay'; import { ASSET_CHAIN } from '../../models/bridge/constants'; - -const { Option } = Select; +import { TokenSelectModal } from '../TokenSelectModal'; export function Input(props: { title: string; @@ -18,33 +15,6 @@ export function Input(props: { onInputChange: (value: number | undefined) => void; }) { const [lastAmount, setLastAmount] = useState(''); - const { tokens } = useEthereum(); - - const renderReserveAccounts = tokens - .filter(t => (t.tags?.indexOf('longList') || -1) < 0) - .map(token => { - const mint = token.address; - return ( - - ); - }); return ( props.onInputChange && props.onInputChange(props.balance)} + onClick={() => + props.onInputChange && props.onInputChange(props.balance) + } > Balance: {props.balance.toFixed(6)} @@ -90,21 +62,11 @@ export function Input(props: { placeholder="0.00" />
- + props.setAsset(token)} + asset={props.asset} + chain={props.chain} + />
diff --git a/packages/bridge/src/components/TokenSelectModal/index.tsx b/packages/bridge/src/components/TokenSelectModal/index.tsx new file mode 100644 index 0000000..446adb6 --- /dev/null +++ b/packages/bridge/src/components/TokenSelectModal/index.tsx @@ -0,0 +1,104 @@ +import React, { useMemo, useState } from 'react'; +import './style.less'; +import { Modal, Input } from 'antd'; +import { useEthereum } from '../../contexts'; +import { TokenDisplay } from '../TokenDisplay'; +import { ASSET_CHAIN } from '../../models/bridge/constants'; + +export const TokenSelectModal = (props: { + onSelectToken: (token: string) => void; + asset?: string; + chain?: ASSET_CHAIN; +}) => { + const { tokens } = useEthereum(); + const [isModalVisible, setIsModalVisible] = useState(false); + const [selected, setSelected] = useState(''); + const [search, setSearch] = useState(''); + + const showModal = () => { + setIsModalVisible(true); + }; + + const hideModal = () => { + setIsModalVisible(false); + }; + const firstToken = useMemo(() => { + if (!selected) { + return tokens.find(el => el.address === props.asset); + } + return tokens.find(el => el.address === selected); + }, [selected, tokens, props.asset]); + + const renderTokensChain = useMemo(() => { + return tokens + .filter( + t => + (t.tags?.indexOf('longList') || -1) < 0 && + search && + search.length >= 3 && + t.symbol.includes(search.toUpperCase()), + ) + .map(token => { + const mint = token.address; + return ( +
{ + props.onSelectToken(mint); + setSelected(mint); + hideModal(); + }} + style={{ cursor: 'pointer' }} + > +
+ +
+ {token.symbol} +
+
+
+ ); + }); + }, [search, tokens]); + + return ( + <> + {firstToken ? ( +
showModal()} + style={{ cursor: 'pointer' }} + > +
+ +
+
+ ) : null} + hideModal()} + footer={null} + > + setSearch(e.target.value)} + /> +
{[...renderTokensChain]}
+ + + ); +}; diff --git a/packages/bridge/src/components/TokenSelectModal/style.less b/packages/bridge/src/components/TokenSelectModal/style.less new file mode 100644 index 0000000..2b8ae12 --- /dev/null +++ b/packages/bridge/src/components/TokenSelectModal/style.less @@ -0,0 +1,7 @@ +.input-token-search { + margin: 20px 0 20px 0; +} +.assets-scroll { + height: 60vh; + overflow: auto; +} diff --git a/packages/bridge/src/components/Transfer/index.tsx b/packages/bridge/src/components/Transfer/index.tsx index ebcc22a..b959e0c 100644 --- a/packages/bridge/src/components/Transfer/index.tsx +++ b/packages/bridge/src/components/Transfer/index.tsx @@ -46,13 +46,13 @@ export const Transfer = () => { }); useEffect(() => { - if(tokens && !request.asset) { + if (tokens && !request.asset) { setRequest({ ...request, asset: tokens?.[0]?.address, }); } - }, [request, tokens, setRequest]) + }, [request, tokens, setRequest]); const setAssetInformation = async (asset: string) => { setRequest({ @@ -63,7 +63,7 @@ export const Transfer = () => { useEffect(() => { const asset = request.asset; - if(!asset || asset === request?.info?.address) { + if (!asset || asset === request?.info?.address) { return; } @@ -87,9 +87,10 @@ export const Transfer = () => { address: asset, name: symbol, balance: balance, - balanceAsNumber: (new BN(balance.toString()) - .div(new BN(10).pow(new BN(decimals - 2))) - .toNumber()) / 100, + balanceAsNumber: + new BN(balance.toString()) + .div(new BN(10).pow(new BN(decimals - 2))) + .toNumber() / 100, allowance: allowance, decimals: decimals, isWrapped: false, @@ -103,7 +104,10 @@ export const Transfer = () => { let isWrapped = await b.isWrappedAsset(asset); if (isWrapped) { info.chainID = await e.assetChain(); - info.assetAddress = Buffer.from((await e.assetAddress()).slice(2), 'hex'); + info.assetAddress = Buffer.from( + (await e.assetAddress()).slice(2), + 'hex', + ); info.isWrapped = true; } @@ -113,7 +117,7 @@ export const Transfer = () => { info, }); })(); - }, [request, provider]) + }, [request, provider]); return ( <> @@ -122,7 +126,7 @@ export const Transfer = () => { title={`From ${chainToName(request.from)}`} asset={request.asset} chain={request.from} - balance={request.info?.balanceAsNumber || 0 } + balance={request.info?.balanceAsNumber || 0} setAsset={asset => setAssetInformation(asset)} amount={request.amount} onInputChange={amount => { @@ -179,7 +183,7 @@ export const Transfer = () => { (async () => { let steps: ProgressUpdate[] = []; try { - if(request.toChain === ASSET_CHAIN.Solana) { + if (request.toChain === ASSET_CHAIN.Solana) { await toSolana( connection, wallet, @@ -211,8 +215,7 @@ export const Transfer = () => { request.toChain, )} Mainnet`}

- {request.amount?.toString()}{' '} - {request.info?.name} + {request.amount?.toString()} {request.info?.name}

{ window.ethereum.enable(); // @ts-ignore const provider = new ethers.providers.Web3Provider( - (window as any).ethereum , + (window as any).ethereum, ); const signer = provider.getSigner(); signer.getAddress().then(account => setAccounts([account]));