feat: sort assets

packages/bridge/src/components/Input/ethereum.tsx

@@ -29,12 +29,11 @@ export function EthereumInput(props: {
 
   const renderReserveAccounts = tokens.filter(t => (t.tags?.indexOf('longList') || -1) < 0).map((token) => {
     const mint = token.address;
-    const name = token.symbol;
     return (
-      <Option key={mint} value={mint} name={name} title={mint}>
+      <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}/>
-          {name}
+          {token.symbol}
         </div>
       </Option>
     );

packages/bridge/src/contexts/ethereum.tsx

@@ -50,13 +50,16 @@ export const EthereumProvider: FunctionComponent = ({children}) => {
 
 
       listResponse.forEach((list, i) => list.tokens.reduce((acc, val) => {
-        const extraTag = i === 2 ? '' : 'longList';
+        const address = val.address.toLowerCase();
+        const extraTag = i === 2 && !acc.has(address) ? 'longList' : '';
+
         const item = {
           ...val,
           logoURI: val.logoURI ? val.logoURI?.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/') : ` https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${val.address}/logo.png `,
           tags: val.tags ? [...val.tags, extraTag] : [extraTag]
         };
-        acc.set(val.address.toLowerCase(), item);
+
+        acc.set(address, item);
         return acc;
       }, map));
 

packages/bridge/src/hooks/useWormholeAccounts.tsx

@@ -139,11 +139,13 @@ const queryWrappedMetaAccounts = async (
       asset.mint = cache.get(key);
       asset.amount = asset.mint?.info.supply.toNumber() || 0;
 
-      setExternalAssets([...assets.values()]);
+      setExternalAssets([...assets.values()]
+        .sort((a, b) => a?.symbol?.localeCompare(b.symbol || '') || 0));
     });
   }
 
-    setExternalAssets([...assets.values()]);
+    setExternalAssets([...assets.values()]
+        .sort((a, b) => a?.symbol?.localeCompare(b.symbol || '') || 0));
   });
 };
 
@@ -263,6 +265,7 @@ export const useWormholeAccounts = () => {
       COINGECKO_POOL_INTERVAL
     );
   }, [externalAssets, setAmountInUSD])
+
   useEffect(() => {
     if (externalAssets && coinList) {
       dataSourcePriceQuery();