mirror of https://github.com/certusone/oyster.git
Merge pull request #9 from yamijuan/solana-tokens
added tokens to solana's input
This commit is contained in:
commit
7b2a2642e6
|
@ -1,5 +1,13 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { contexts, utils, ParsedAccount, NumericInput, TokenIcon, TokenDisplay } from '@oyster/common';
|
||||
import {
|
||||
contexts,
|
||||
utils,
|
||||
ParsedAccount,
|
||||
NumericInput,
|
||||
TokenDisplay,
|
||||
useUserAccounts,
|
||||
useMint
|
||||
} from '@oyster/common';
|
||||
import { Card, Select } from 'antd';
|
||||
import './style.less';
|
||||
const { getTokenName } = utils;
|
||||
|
@ -16,31 +24,51 @@ export function SolanaInput(props: {
|
|||
disabled?: boolean;
|
||||
onInputChange: (value: number | null) => void;
|
||||
hideBalance?: boolean;
|
||||
useWalletBalance?: boolean;
|
||||
useFirstReserve?: boolean;
|
||||
showLeverageSelector?: boolean;
|
||||
leverage?: number;
|
||||
useFirstToken?: boolean;
|
||||
onMintChange?: (value: string) => void;
|
||||
}) {
|
||||
const { tokenMap } = useConnectionConfig();
|
||||
const [acco, setCollateralReserve] = useState<string>();
|
||||
const { tokens, tokenMap } = useConnectionConfig();
|
||||
const { userAccounts } = useUserAccounts();
|
||||
const [balance, setBalance] = useState<number>(0);
|
||||
const [lastAmount, setLastAmount] = useState<string>('');
|
||||
const [currentMint, setCurrentMint] = useState<string>('')
|
||||
|
||||
const mint = useMint(currentMint);
|
||||
|
||||
const renderReserveAccounts = [].map((reserve: any) => {
|
||||
const mint = reserve.info.liquidityMint.toBase58();
|
||||
const address = reserve.pubkey.toBase58();
|
||||
const name = getTokenName(tokenMap, mint);
|
||||
const renderPopularTokens = tokens.map((item) => {
|
||||
const address = item.mintAddress;
|
||||
return (
|
||||
<Option key={address} value={address} name={name} title={address}>
|
||||
<div key={address} style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<TokenIcon mintAddress={mint} />
|
||||
{name}
|
||||
</div>
|
||||
<Option key={address} value={address} name={item.tokenSymbol} title={address}>
|
||||
<TokenDisplay
|
||||
key={address}
|
||||
name={item.tokenSymbol}
|
||||
mintAddress={address}
|
||||
showBalance={true}
|
||||
/>
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if(!currentMint && tokens.length > 0) {
|
||||
setCurrentMint(tokens[0].mintAddress)
|
||||
}
|
||||
}, [tokens, currentMint])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const currentAccount = userAccounts?.find(
|
||||
(a) => a.info.mint.toBase58() === currentMint
|
||||
);
|
||||
if (currentAccount && mint) {
|
||||
setBalance(
|
||||
currentAccount.info.amount.toNumber() / Math.pow(10, mint.decimals)
|
||||
);
|
||||
} else {
|
||||
setBalance(0);
|
||||
}
|
||||
}, [currentMint, mint, userAccounts])
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="ccy-input"
|
||||
|
@ -88,16 +116,16 @@ export function SolanaInput(props: {
|
|||
showSearch
|
||||
style={{ minWidth: 150 }}
|
||||
placeholder="CCY"
|
||||
// value={collateralReserve}
|
||||
// onChange={item => {
|
||||
// if (props.onCollateralReserve) props.onCollateralReserve(item);
|
||||
// setCollateralReserve(item);
|
||||
// }}
|
||||
value={currentMint}
|
||||
onChange={item => {
|
||||
if (props.onMintChange) props.onMintChange(item);
|
||||
setCurrentMint(item);
|
||||
}}
|
||||
filterOption={(input, option) =>
|
||||
option?.name?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
>
|
||||
{renderReserveAccounts}
|
||||
{renderPopularTokens}
|
||||
</Select>
|
||||
) : (
|
||||
<TokenDisplay
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import { Button, Card } from 'antd';
|
||||
import { LAMPORTS_PER_SOL } from '@solana/web3.js';
|
||||
import { LABELS } from '../../constants';
|
||||
import { contexts, utils, ConnectButton } from '@oyster/common';
|
||||
import { useHistory, useLocation } from "react-router-dom";
|
||||
import { SolanaInput, EthereumInput } from "./../Input";
|
||||
|
||||
import './style.less';
|
||||
|
||||
const { useConnection } = contexts.Connection;
|
||||
const { useWallet } = contexts.Wallet;
|
||||
const { notify } = utils;
|
||||
|
||||
export const Wrap = () => {
|
||||
const connection = useConnection();
|
||||
const { wallet } = useWallet();
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="exchange-card">
|
||||
<SolanaInput
|
||||
title="From Solana"
|
||||
onInputChange={() => {}}
|
||||
/>
|
||||
<Button type="primary" className="swap-button">
|
||||
⇅
|
||||
</Button>
|
||||
<EthereumInput
|
||||
title="To Ethereum"
|
||||
onInputChange={() => {}}
|
||||
/>
|
||||
</div>
|
||||
<ConnectButton type="primary">
|
||||
Wrap
|
||||
</ConnectButton>
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,12 @@
|
|||
.input-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.swap-button {
|
||||
border-radius: 2em;
|
||||
width: 32px;
|
||||
padding-left: 8px;
|
||||
}
|
|
@ -5,6 +5,7 @@ import { LABELS } from '../../constants';
|
|||
import { contexts, utils, ConnectButton } from '@oyster/common';
|
||||
import { useHistory, useLocation } from "react-router-dom";
|
||||
import { Transfer } from '../../components/Transfer';
|
||||
import { Wrap } from "../../components/Wrap";
|
||||
const { useConnection } = contexts.Connection;
|
||||
const { useWallet } = contexts.Wallet;
|
||||
const { notify } = utils;
|
||||
|
@ -26,7 +27,7 @@ export const TransferView = () => {
|
|||
key: "sol",
|
||||
tab: <div style={tabStyle}>Wrap</div>,
|
||||
render: () => {
|
||||
return <div>Bring assets to Solana</div>;
|
||||
return <Wrap />;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
Loading…
Reference in New Issue