certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
parent f7eef7c3b6 52732c7198
commit ba935b8917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 82 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/bridge/src/components/Input/ethereum.tsx
View File

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

44
packages/bridge/src/components/Input/solana.tsx
View File

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

17
packages/bridge/src/components/Input/style.less
View File

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

19
packages/bridge/src/components/Transfer/index.tsx
View File

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

16
packages/bridge/src/routes.tsx
View File

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