mirror of https://github.com/certusone/oyster.git
Merge pull request #15 from yamijuan/transfer-ui
added token selection for both inputs
This commit is contained in:
commit
ba935b8917
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue