mirror of https://github.com/certusone/oyster.git
feat: update recent transactions to selected token only
This commit is contained in:
parent
d488e5bdc1
commit
6a0821991a
|
@ -1,4 +1,4 @@
|
|||
import { Button, Table, Tabs, notification } from 'antd';
|
||||
import { Button, Table, notification } from 'antd';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import './index.less';
|
||||
|
@ -14,6 +14,7 @@ import {
|
|||
shortenAddress,
|
||||
Identicon,
|
||||
programIds,
|
||||
TokenAccount,
|
||||
} from '@oyster/common';
|
||||
import { useWormholeTransactions } from '../../hooks/useWormholeTransactions';
|
||||
import { ASSET_CHAIN } from '../../utils/assets';
|
||||
|
@ -29,12 +30,11 @@ import { useBridge } from '../../contexts/bridge';
|
|||
TimeAgo.addDefaultLocale(en);
|
||||
const timeAgo = new TimeAgo('en-US');
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
export const RecentTransactionsTable = (props: {
|
||||
showUserTransactions?: boolean;
|
||||
tokenAccounts: TokenAccount[];
|
||||
}) => {
|
||||
const { loading: loadingTransfers, transfers } = useWormholeTransactions();
|
||||
const { loading: loadingTransfers, transfers } = useWormholeTransactions(props.tokenAccounts);
|
||||
const { provider } = useEthereum();
|
||||
const bridge = useBridge();
|
||||
|
||||
|
@ -331,12 +331,14 @@ export const RecentTransactionsTable = (props: {
|
|||
<div id={'recent-tx-container'}>
|
||||
<div className={'home-subtitle'} style={{ marginBottom: '70px' }}>
|
||||
My Recent Transactions
|
||||
<div>(selected token only)</div>
|
||||
</div>
|
||||
<Table
|
||||
scroll={{
|
||||
scrollToFirstRowOnChange: false,
|
||||
x: 900,
|
||||
}}
|
||||
|
||||
dataSource={transfers.sort((a, b) => b.date - a.date)}
|
||||
columns={userColumns}
|
||||
loading={loadingTransfers}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { notification, Spin, Button } from 'antd';
|
||||
import { contexts } from '@oyster/common';
|
||||
import { contexts, TokenAccount, useUserAccounts } from '@oyster/common';
|
||||
import { Input } from '../Input';
|
||||
|
||||
import './style.less';
|
||||
|
@ -44,6 +44,7 @@ export const Transfer = () => {
|
|||
const bridge = useBridge();
|
||||
const { wallet, connected } = useWallet();
|
||||
const { provider, tokenMap } = useEthereum();
|
||||
const { userAccounts } = useUserAccounts();
|
||||
const hasCorrespondingNetworks = useCorrectNetwork();
|
||||
const {
|
||||
A,
|
||||
|
@ -53,6 +54,8 @@ export const Transfer = () => {
|
|||
setLastTypedAccount,
|
||||
} = useTokenChainPairState();
|
||||
|
||||
|
||||
|
||||
const [request, setRequest] = useState<TransferRequest>({
|
||||
from: ASSET_CHAIN.Ethereum,
|
||||
to: ASSET_CHAIN.Solana,
|
||||
|
@ -82,6 +85,9 @@ export const Transfer = () => {
|
|||
});
|
||||
}, [A, B, mintAddress, A.info]);
|
||||
|
||||
|
||||
const tokenAccounts = useMemo(() => userAccounts.filter(u => u.info.mint.toBase58() === request.info?.mint), [request.info?.mint])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="exchange-card">
|
||||
|
@ -288,7 +294,7 @@ export const Transfer = () => {
|
|||
: LABELS.TRANSFER
|
||||
: LABELS.SET_CORRECT_WALLET_NETWORK}
|
||||
</Button>
|
||||
<RecentTransactionsTable />
|
||||
<RecentTransactionsTable tokenAccounts={tokenAccounts} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -29,6 +29,28 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.action-button{
|
||||
width: 240px;
|
||||
height: 64px;
|
||||
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background-color: @surge-20 !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-feature-settings: 'ss02' on;
|
||||
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: @surge-30 !important;
|
||||
}
|
||||
|
||||
.transfer-button{
|
||||
display: flex;
|
||||
|
||||
|
|
|
@ -2,8 +2,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|||
import {
|
||||
notify,
|
||||
programIds,
|
||||
TokenAccount,
|
||||
useConnection,
|
||||
useConnectionConfig,
|
||||
useUserAccounts,
|
||||
useWallet,
|
||||
} from '@oyster/common';
|
||||
import {
|
||||
|
@ -69,21 +71,15 @@ const queryOwnWrappedMetaTransactions = async (
|
|||
connection: Connection,
|
||||
setTransfers: (arr: WrappedTransferMeta[]) => void,
|
||||
provider: ethers.providers.Web3Provider,
|
||||
tokenAccounts: TokenAccount[],
|
||||
bridge?: SolanaBridge,
|
||||
owner?: PublicKey | null,
|
||||
) => {
|
||||
if (owner && bridge) {
|
||||
if (tokenAccounts && tokenAccounts.length > 0 && bridge) {
|
||||
const transfers = new Map<string, WrappedTransferMeta>();
|
||||
let wh = WormholeFactory.connect(programIds().wormhole.bridge, provider);
|
||||
const res: RpcResponseAndContext<
|
||||
Array<{ pubkey: PublicKey; account: AccountInfo<ParsedAccountData> }>
|
||||
> = await connection.getParsedTokenAccountsByOwner(
|
||||
owner,
|
||||
{ programId: programIds().token },
|
||||
'single',
|
||||
);
|
||||
|
||||
let lockups: LockupWithStatus[] = [];
|
||||
for (const acc of res.value) {
|
||||
for (const acc of tokenAccounts) {
|
||||
const accLockups = await bridge.fetchTransferProposals(acc.pubkey);
|
||||
lockups.push(
|
||||
...accLockups.map(v => {
|
||||
|
@ -318,12 +314,11 @@ const queryWrappedMetaTransactions = async (
|
|||
setTransfers([...transfers.values()]);
|
||||
};
|
||||
|
||||
export const useWormholeTransactions = () => {
|
||||
export const useWormholeTransactions = (tokenAccounts: TokenAccount[]) => {
|
||||
const connection = useConnection();
|
||||
const { tokenMap: ethTokens } = useEthereum();
|
||||
const { tokenMap } = useConnectionConfig();
|
||||
const { coinList } = useCoingecko();
|
||||
const { wallet } = useWallet();
|
||||
const bridge = useBridge();
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
|
@ -352,12 +347,12 @@ export const useWormholeTransactions = () => {
|
|||
connection,
|
||||
setTransfers,
|
||||
provider,
|
||||
tokenAccounts,
|
||||
bridge,
|
||||
wallet?.publicKey,
|
||||
).then(() => setLoading(false));
|
||||
}
|
||||
})();
|
||||
}, [connection, setTransfers, wallet?.publicKey]);
|
||||
}, [connection, setTransfers, tokenAccounts]);
|
||||
|
||||
const coingeckoTimer = useRef<number>(0);
|
||||
const dataSourcePriceQuery = useCallback(async () => {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Row, Col } from 'antd';
|
||||
import { Row, Col, Button } from 'antd';
|
||||
|
||||
import './index.less';
|
||||
|
||||
|
@ -7,7 +7,7 @@ export const HelpView = () => {
|
|||
return (
|
||||
<div
|
||||
className="flexColumn transfer-bg"
|
||||
style={{ flex: 1, minHeight: '90vh', paddingTop: '200px' }}
|
||||
style={{ flex: 1, minHeight: '90vh', paddingTop: '100px' }}
|
||||
>
|
||||
<div className={'description-container'}>
|
||||
<Row>
|
||||
|
@ -29,14 +29,10 @@ export const HelpView = () => {
|
|||
</Row>
|
||||
<Row>
|
||||
<Col xs={24} sm={12}>
|
||||
<div className={'main-logo'}>
|
||||
<a
|
||||
href={'https://github.com/certusone/wormhole'}
|
||||
target={'_blank'}
|
||||
>
|
||||
<div className={'logo-title'}> get started</div>
|
||||
</a>
|
||||
</div>
|
||||
<Button className="action-button"
|
||||
onClick={() => window.open('https://github.com/certusone/wormhole', '_blank')}>
|
||||
View the Code
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={24} sm={12}>
|
||||
<div className={'q-title'}>
|
||||
|
|
|
@ -14,13 +14,13 @@ import { useLocation } from "react-router";
|
|||
|
||||
const ASSETS_URL = 'https://raw.githubusercontent.com/solana-labs/oyster/main/assets/wallets/';
|
||||
export const WALLET_PROVIDERS = [
|
||||
LedgerProvider,
|
||||
{
|
||||
name: "Phantom",
|
||||
url: "https://www.phantom.app",
|
||||
icon: `https://www.phantom.app/img/logo.png`,
|
||||
adapter: PhantomWalletAdapter,
|
||||
},
|
||||
LedgerProvider,
|
||||
{
|
||||
name: "Sollet",
|
||||
url: "https://www.sollet.io",
|
||||
|
@ -30,21 +30,26 @@ export const WALLET_PROVIDERS = [
|
|||
url: "https://solongwallet.com",
|
||||
icon: `${ASSETS_URL}solong.png`,
|
||||
adapter: SolongWalletAdapter,
|
||||
}, {
|
||||
name: "Solflare",
|
||||
url: "https://solflare.com/access-wallet",
|
||||
icon: `${ASSETS_URL}solflare.svg`,
|
||||
}, {
|
||||
name: "MathWallet",
|
||||
url: "https://mathwallet.org",
|
||||
icon: `${ASSETS_URL}mathwallet.svg`,
|
||||
},
|
||||
{
|
||||
name: 'Torus',
|
||||
url: 'https://tor.us',
|
||||
icon: `${ASSETS_URL}torus.svg`,
|
||||
adapter: TorusWalletAdapter,
|
||||
}
|
||||
// TODO: enable when fully functional
|
||||
// {
|
||||
// name: "MathWallet",
|
||||
// url: "https://mathwallet.org",
|
||||
// icon: `${ASSETS_URL}mathwallet.svg`,
|
||||
// },
|
||||
// {
|
||||
// name: 'Torus',
|
||||
// url: 'https://tor.us',
|
||||
// icon: `${ASSETS_URL}torus.svg`,
|
||||
// adapter: TorusWalletAdapter,
|
||||
// }
|
||||
|
||||
// Solflare doesnt allow external connections for all apps
|
||||
// {
|
||||
// name: "Solflare",
|
||||
// url: "https://solflare.com/access-wallet",
|
||||
// icon: `${ASSETS_URL}solflare.svg`,
|
||||
// },
|
||||
];
|
||||
|
||||
const WalletContext = React.createContext<{
|
||||
|
|
Loading…
Reference in New Issue