feat(core): tokens provider for optimize, sequence of primary tokens

packages/core/src/contexts/index.ts

@@ -1,4 +1,5 @@
 export * from './seed';
 export * from './solana';
+export * from './tokens';
 export * from './tokenAccounts';
 export * from './transactionsHistory';

packages/core/src/contexts/tokenAccounts/hooks/useTokenAccounts.ts

@@ -7,9 +7,9 @@ import type { PublicKey } from '@solana/web3.js';
 import { zip } from 'ramda';
 
 import { SYSTEM_PROGRAM_ID } from '../../../constants/publicKeys';
-import { useTokens } from '../../../hooks';
 import type { TokenAccount } from '../models';
 import { useWallet } from '@saberhq/use-solana';
+import { useTokens } from '../../tokens';
 
 export const useTokenAccounts = (
   publicKeys: (PublicKey | null | undefined)[] = [],

packages/core/src/contexts/tokens/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useToken';
+export * from './useTokens';

packages/core/src/hooks/useTokens.ts → packages/core/src/contexts/tokens/hooks/useTokens.ts

@@ -5,8 +5,7 @@ import { networkToChainId, Token } from '@saberhq/token-utils';
 import { useSolana } from '@saberhq/use-solana';
 import { PublicKey } from '@solana/web3.js';
 import { zip } from 'ramda';
-
-import { useAllTokens } from './useAllTokens';
+import { useTokensContext } from "../provider";
 
 const normalizeMint = (mint: PublicKey | null | undefined): PublicKey | null | undefined => {
   if (!mint) {
@@ -29,7 +28,7 @@ export const useTokens = (
   mints?: (PublicKey | null | undefined)[],
 ): (Token | null | undefined)[] => {
   const { network } = useSolana();
-  const { tokenMap } = useAllTokens();
+  const { tokenMap } = useTokensContext();
 
   const { normalizedMints, mintsToLoad } = useMemo(() => {
     const normalizedMints = mints?.map(normalizeMint) ?? [];

packages/core/src/contexts/tokens/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './provider';

packages/core/src/contexts/tokens/provider.ts

@@ -0,0 +1,61 @@
+import { createContainer } from 'unstated-next';
+import { useConnectionContext } from "../solana";
+import { networkToChainId, Token } from "@saberhq/token-utils";
+import { useMemo } from "react";
+import { makeTokenMap } from "./utils/makeTokenMap";
+
+const PRIMARY_SYMBOLS = ['SOL', 'USDC', 'BTC', 'USDT', 'ETH'];
+
+export type TokenMap = Record<string, Token>;
+
+export interface UseTokens {
+  tokens: readonly Token[];
+  tokenMap: TokenMap;
+}
+
+const useTokensInternal = (): UseTokens => {
+  const { network } = useConnectionContext();
+  const chainId = networkToChainId(network);
+
+  const standardTokenMap = useMemo(() => makeTokenMap(chainId), [chainId]);
+
+  const tokenMap = useMemo(() => {
+    if (!chainId) {
+      return {};
+    }
+
+    return standardTokenMap;
+  }, [chainId, standardTokenMap]);
+
+  const tokens = useMemo(() => {
+    const newTokenMap = { ...tokenMap };
+
+    // Get Token Mints
+    const newTokens = Object.values(newTokenMap);
+    const primaryMints = PRIMARY_SYMBOLS.map((symbol) => {
+      const token = newTokens.find((itemToken) => itemToken.symbol === symbol);
+      return token?.address;
+    }).filter(Boolean) as string[];
+
+    // Get Primary Tokens and remove it from Token Map
+    const primaryTokens = primaryMints
+      .map((mint) => {
+        const token = newTokenMap[mint];
+        delete newTokenMap[mint];
+
+        return token;
+      })
+      .filter(Boolean) as Token[];
+
+    // Make tokens list with primary and other tokens
+    return [...primaryTokens, ...Object.values(newTokenMap)];
+  }, [tokenMap]);
+
+  return {
+    tokens,
+    tokenMap,
+  };
+};
+
+export const { Provider: TokensProvider, useContainer: useTokensContext } =
+  createContainer(useTokensInternal);

packages/core/src/hooks/index.ts

@@ -1,4 +1 @@
-export * from './useAllTokens';
 export * from './useStorage';
-export * from './useToken';
-export * from './useTokens';

packages/web/src/Providers.tsx

@@ -8,6 +8,7 @@ import {
   SeedProvider,
   SolanaProvider,
   TokenAccountsProvider,
+  TokensProvider,
 } from '@p2p-wallet-web/core';
 import { SailProvider } from '@p2p-wallet-web/sail';
 import assert from 'ts-invariant';
@@ -51,7 +52,9 @@ const CoreProviders: FC = ({ children }) => {
         networkConfigs={NETWORK_CONFIGS}
       >
         <SailProvider initialState={{ waitForConfirmation: true }}>
-          <TokenAccountsProvider>{children}</TokenAccountsProvider>
+          <TokensProvider>
+            <TokenAccountsProvider>{children}</TokenAccountsProvider>
+          </TokensProvider>
         </SailProvider>
       </SolanaProvider>
     </SeedProvider>

packages/web/src/components/common/TokenAvatar/TokenAvatar.tsx

@@ -2,7 +2,7 @@ import type { FunctionComponent, HTMLAttributes } from 'react';
 import { useMemo } from 'react';
 
 import { styled } from '@linaria/react';
-import { useAllTokens } from '@p2p-wallet-web/core';
+import { useTokensContext } from '@p2p-wallet-web/core';
 import type { Token } from '@saberhq/token-utils';
 import classNames from 'classnames';
 
@@ -56,7 +56,7 @@ export const TokenAvatar: FunctionComponent<Props & HTMLAttributes<HTMLDivElemen
   className,
   ...props
 }) => {
-  const { tokenMap, tokens } = useAllTokens();
+  const { tokenMap, tokens } = useTokensContext();
 
   // TODO: remove
   const tokenInfo = useMemo(() => {

packages/web/src/components/pages/receive/ReceiveTokensWidget/ReceiveTokensWidget.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { useMemo, useState } from 'react';
 
 import { styled } from '@linaria/react';
-import { useAllTokens } from '@p2p-wallet-web/core';
+import { useTokensContext } from '@p2p-wallet-web/core';
 import { useIsTablet } from '@p2p-wallet-web/ui';
 import Fuse from 'fuse.js';
 import { useDebounce } from 'use-debounce';
@@ -24,7 +24,7 @@ const Content = styled.div`
 interface Props {}
 
 export const ReceiveTokensWidget: FC<Props> = () => {
-  const { tokens } = useAllTokens();
+  const { tokens } = useTokensContext();
   const isTablet = useIsTablet();
 
   const [searchQuery, setSearchQuery] = useState('');

packages/web/src/components/pages/swap/SwapWidget/SwapTokenForm/TokenAccountRow/TokenAccountRow.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 
 import { styled } from '@linaria/react';
-import { useAllTokens } from '@p2p-wallet-web/core';
+import { useTokensContext } from '@p2p-wallet-web/core';
 
 import { useConfig } from 'app/contexts/solana/swap';
 import type TokenAccount from 'app/contexts/solana/swap/models/TokenAccount';
@@ -66,7 +66,7 @@ type Props = {
 
 export const TokenAccountRow: FC<Props> = ({ tokenAccount, onClick, className }) => {
   const { mintToTokenName, tokenConfigs } = useConfig();
-  const { tokenMap } = useAllTokens();
+  const { tokenMap } = useTokensContext();
 
   const mintAddress = tokenAccount.accountInfo.mint.toBase58();
   const tokenName = mintToTokenName[mintAddress];