feat: update recent transactions to selected token only

packages/bridge/src/components/RecentTransactionsTable/index.tsx

@@ -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}

packages/bridge/src/components/Transfer/index.tsx

@@ -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} />
     </>
   );
 };

packages/bridge/src/components/Transfer/style.less

@@ -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;
 

packages/bridge/src/hooks/useWormholeTransactions.tsx

@@ -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 () => {

packages/bridge/src/views/help/index.tsx

@@ -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'}>

packages/common/src/contexts/wallet.tsx

@@ -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<{