Merge pull request #15 from yamijuan/transfer-ui

added token selection for both inputs
This commit is contained in:
B 2021-03-09 14:22:24 -06:00 committed by GitHub
commit ba935b8917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 82 additions and 79 deletions

View File

@ -1,19 +1,19 @@
import React, { useEffect, useState } from 'react';
import { contexts, utils, ParsedAccount, NumericInput, TokenIcon, TokenDisplay, programIds } from '@oyster/common';
import { Card, Select } from 'antd';
import React, {useState} from 'react';
import {NumericInput, programIds} from '@oyster/common';
import {Card, Select} from 'antd';
import './style.less';
import { useEthereum } from '../../contexts';
import { WrappedAssetFactory } from '../../contracts/WrappedAssetFactory';
import { WormholeFactory } from '../../contracts/WormholeFactory';
import { ASSET_CHAIN } from '../../utils/assets';
import { TransferRequestInfo } from '../../models/bridge';
import {useEthereum} from '../../contexts';
import {WrappedAssetFactory} from '../../contracts/WrappedAssetFactory';
import {WormholeFactory} from '../../contracts/WormholeFactory';
import {TransferRequestInfo} from '../../models/bridge';
import {TokenDisplay} from '../TokenDisplay'
import BN from 'bn.js';
import {ASSET_CHAIN} from "../../models/bridge/constants";
const { Option } = Select;
export function EthereumInput(props: {
title: string;
disabled?: boolean;
hideBalance?: boolean;
asset?: string;
@ -31,10 +31,8 @@ export function EthereumInput(props: {
const mint = token.address;
return (
<Option key={mint} value={mint} name={token.symbol} title={token.name}>
<div key={mint} style={{ display: 'flex', alignItems: 'center' }}>
<img style={{ width: 30, height: 30 }} src={token.logoURI}/>
{token.symbol}
</div>
<TokenDisplay asset={props.asset} token={token} chain={ASSET_CHAIN.Ethereum}/>
<span className={"token-name"}>{token.name}</span>
</Option>
);
});
@ -85,7 +83,7 @@ export function EthereumInput(props: {
return (
<Card
className="ccy-input"
className="ccy-input from-input"
style={{ borderRadius: 20 }}
bodyStyle={{ padding: 0 }}
>
@ -124,30 +122,21 @@ export function EthereumInput(props: {
placeholder="0.00"
/>
<div className="ccy-input-header-right" style={{ display: 'flex' }}>
{!props.disabled ? (
<Select
size="large"
showSearch
style={{ minWidth: 150 }}
placeholder="CCY"
value={props.asset}
onChange={(item: string) => {
updateBalance(item);
}}
filterOption={(input, option) =>
option?.name?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{renderReserveAccounts}
</Select>
) : (
<TokenDisplay
// key={props.reserve.liquidityMint.toBase58()}
name={''}
mintAddress={''}
showBalance={false}
/>
)}
<Select
size="large"
showSearch
style={{ minWidth: 150 }}
placeholder="CCY"
value={props.asset}
onChange={(item: string) => {
updateBalance(item);
}}
filterOption={(input, option) =>
option?.name?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{renderReserveAccounts}
</Select>
</div>
</div>
</Card>

View File

@ -1,17 +1,10 @@
import React, { useEffect, useState } from 'react';
import {
contexts,
utils,
ParsedAccount,
NumericInput,
TokenDisplay,
useUserAccounts,
useMint,
useConnectionConfig
} from '@oyster/common';
import { Card, Select } from 'antd';
import React, {useEffect, useState} from 'react';
import {NumericInput, useConnectionConfig, useMint, useUserAccounts, utils} from '@oyster/common';
import {Card, Select} from 'antd';
import { TokenInfo } from '@uniswap/token-lists';
import './style.less';
const { getTokenName } = utils;
import {TokenDisplay} from '../TokenDisplay'
import {ASSET_CHAIN} from "../../models/bridge/constants";
const { Option } = Select;
@ -19,6 +12,7 @@ const { Option } = Select;
export function SolanaInput(props: {
title: string;
toToken?: TokenInfo;
disabled?: boolean;
amount?: number | null;
onInputChange: (value: number | null) => void;
@ -40,9 +34,9 @@ export function SolanaInput(props: {
<Option key={address} value={address} name={item.symbol} title={address}>
<TokenDisplay
key={address}
name={item.symbol}
mintAddress={address}
showBalance={true}
asset={address}
token={item}
chain={ASSET_CHAIN.Solana}
/>
</Option>
);
@ -70,7 +64,7 @@ export function SolanaInput(props: {
return (
<Card
className="ccy-input"
className="ccy-input to-input"
style={{ borderRadius: 20 }}
bodyStyle={{ padding: 0 }}
>
@ -86,7 +80,7 @@ export function SolanaInput(props: {
</div>
)}
</div>
<div className="ccy-input-header" style={{ padding: '0px 10px 5px 7px' }}>
<div className="ccy-input-header" style={{ padding: '0px 10px 10px 7px' }}>
<NumericInput
value={
parseFloat(lastAmount || '0.00') === props.amount
@ -126,15 +120,13 @@ export function SolanaInput(props: {
>
{renderPopularTokens}
</Select>
) : (
) : ( props.toToken &&
<TokenDisplay
// key={props.reserve.liquidityMint.toBase58()}
name={getTokenName(
tokenMap,
'',
)}
mintAddress={''}
showBalance={false}
key={props.toToken.address}
asset={props.toToken.address}
token={props.toToken}
chain={ASSET_CHAIN.Solana}
/>
)}
</div>

View File

@ -1,7 +1,9 @@
.ccy-input {
margin-top: 10px;
margin-bottom: 10px;
.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
height: 52px;
}
.ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active {
@ -10,13 +12,23 @@
}
.ant-select-selection-item {
display: flex;
.token-name {
display: none;
}
.token-balance {
display: none;
}
}
}
.from-input .token-chain-logo{
position: absolute;
right: 20px;
}
.to-input .token-chain-logo{
position: absolute;
right: 40px;
}
.token-balance {
color: grey;
}
@ -55,6 +67,7 @@
align-items: center;
justify-self: flex-end;
justify-content: flex-end;
}
.ant-select-dropdown {

View File

@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Card, notification, Spin, Button } from 'antd';
import { TokenInfo } from '@uniswap/token-lists';
import { LAMPORTS_PER_SOL } from '@solana/web3.js';
import { LABELS } from '../../constants';
import { contexts, utils, ConnectButton, programIds, formatAmount } from '@oyster/common';
@ -39,6 +40,14 @@ export const Transfer = () => {
from: ASSET_CHAIN.Ethereum,
toChain: ASSET_CHAIN.Solana,
});
const [toToken, setToToken] = useState<TokenInfo | undefined>()
const setAssetInformation = (asset:string) => {
request.asset = asset;
setRequest(request)
setToToken(tokenMap.get(request?.asset || ""))
}
return (
<>
@ -47,7 +56,7 @@ export const Transfer = () => {
title="From Ethereum"
setInfo={(info) => { request.info = info }}
asset={request.asset}
setAsset={(asset) => request.asset = asset}
setAsset={(asset) => setAssetInformation(asset)}
amount={request.amount}
onInputChange={(amount) => {
request.amount = amount || 0;
@ -57,9 +66,11 @@ export const Transfer = () => {
</Button>
<SolanaInput
title="To Solana"
onInputChange={() => {}}
/>
title="To Solana"
disabled={true}
toToken={toToken}
onInputChange={() => {}}
/>
</div>
<ConnectButton type="primary" onClick={async () => {
if(!wallet || !provider) {

View File

@ -28,15 +28,13 @@ export function Routes() {
<AccountsProvider>
<MarketProvider>
<CoingeckoProvider>
<TokenPairProvider>
<AppLayout>
<Switch>
<Route exact path="/" component={() => <HomeView />} />
<Route path="/move" children={<TransferView />} />
<Route exact path="/faucet" children={<FaucetView />} />
</Switch>
</AppLayout>
</TokenPairProvider>
<AppLayout>
<Switch>
<Route exact path="/" component={() => <HomeView />} />
<Route path="/move" children={<TransferView />} />
<Route exact path="/faucet" children={<FaucetView />} />
</Switch>
</AppLayout>
</CoingeckoProvider>
</MarketProvider>
</AccountsProvider>