feat: remember custom erc20 addresses, display tokens with balance on top

.config.js

@@ -42,9 +42,9 @@ module.exports = {
 
     // frontend settings
     featuredErc20s: JSON.stringify([
-      '0x722dd3F80BAC40c951b51BdD28Dd19d435762180', // TST: https://ropsten.etherscan.io/address/0x722dd3f80bac40c951b51bdd28dd19d435762180
-      '0xFab46E002BbF0b4509813474841E0716E6730136', // FAU: https://ropsten.etherscan.io/token/0xfab46e002bbf0b4509813474841e0716e6730136
-      '0xbF4D811e6891eD044D245cafcC4CAa96c969204D', // USDT: https://ropsten.etherscan.io/token/0xbf4d811e6891ed044d245cafcc4caa96c969204d
+      '0x722dd3f80bac40c951b51bdd28dd19d435762180', // TST: https://ropsten.etherscan.io/address/0x722dd3f80bac40c951b51bdd28dd19d435762180
+      '0xfab46e002bbf0b4509813474841e0716e6730136', // FAU: https://ropsten.etherscan.io/token/0xfab46e002bbf0b4509813474841e0716e6730136
+      '0xbf4d811e6891ed044d245cafcc4caa96c969204d', // USDT: https://ropsten.etherscan.io/token/0xbf4d811e6891ed044d245cafcc4caa96c969204d
     ]),
     nearNodeUrl: 'https://rpc.testnet.near.org',
     nearWalletUrl: 'https://wallet.testnet.near.org',

src/html/erc20-form.html

@@ -215,15 +215,24 @@ <h2 class="modal-section__label">Select from whitelist</h2>
     });
   });
 
-  async function fillFeaturedErc20s() {
+  function ownedErc20OnTop (token1, token2) {
+    if (token1.balance === '0' && token2.balance !== '0') {
+      return 1
+    } else if (token1.balance !== '0' && token2.balance === '0') {
+      return -1
+    }
+    return 0
+  }
+
+  async function fillErc20List () {
     if (!window.ethInitialized) return;
     if (!window.isValidEthNetwork) return;
     if (window.urlParams.get("erc20") === null) return;
 
-    const featured = await window.utils.getFeaturedErc20s();
+    const allTokens = await window.utils.getAllErc20s();
 
     window.dom.fill("erc20List").with(
-      Object.values(featured).map(
+      Object.values(allTokens).sort(ownedErc20OnTop).map(
         (token) => `
         <label class="space-between">
           <input
@@ -297,6 +306,9 @@ <h2 class="modal-section__label">Select from whitelist</h2>
       return;
     }
 
+    // getErc20Data succeeded so remember this token if not already in storage
+    window.utils.rememberCustomErc20(erc20Address)
+
     if (token.nep141.balance === null) {
       window.dom.hide("sendNaturalErc20");
       return;
@@ -339,6 +351,6 @@ <h2 class="modal-section__label">Select from whitelist</h2>
     amount.focus();
   }
 
-  window.renderers.push(fillFeaturedErc20s);
+  window.renderers.push(fillErc20List);
   window.renderers.push(renderErc20Form);
 </script>

src/html/erc20n-form.html

@@ -209,15 +209,24 @@ <h2 class="modal-section__label">Select from whitelist</h2>
     });
   });
 
-  async function fillFeaturedErc20ns() {
+  function ownedErc20nOnTop (token1, token2) {
+    if (token1.nep141.balance === '0' && token2.nep141.balance !== '0') {
+      return 1
+    } else if (token1.nep141.balance !== '0' && token2.nep141.balance === '0') {
+      return -1
+    }
+    return 0
+  }
+
+  async function fillErc20nList () {
     if (!window.ethInitialized) return;
     if (!window.isValidEthNetwork) return;
     if (window.urlParams.get("erc20n") === null) return;
 
-    const featured = await window.utils.getFeaturedErc20s();
+    const allTokens = await window.utils.getAllErc20s();
 
     window.dom.fill("erc20nList").with(
-      Object.values(featured).map(
+      Object.values(allTokens).sort(ownedErc20nOnTop).map(
         (token) => `
         <label class="space-between">
           <input
@@ -289,6 +298,9 @@ <h2 class="modal-section__label">Select from whitelist</h2>
       return;
     }
 
+    // getErc20Data succeeded so remember this token if not already in storage
+    window.utils.rememberCustomErc20(erc20nAddress)
+
     if (token.nep141.balance === null) {
       window.dom.hide("sendBridgedNep141");
       return;
@@ -326,6 +338,6 @@ <h2 class="modal-section__label">Select from whitelist</h2>
     amount.focus();
   }
 
-  window.renderers.push(fillFeaturedErc20ns);
+  window.renderers.push(fillErc20nList);
   window.renderers.push(renderErc20nForm);
 </script>

src/js/utils.js

@@ -2,6 +2,8 @@ import { bridgedNep141, naturalErc20 } from '@near-eth/nep141-erc20'
 
 import { Decimal } from 'decimal.js'
 
+const CUSTOM_ERC20_STORAGE = 'custom-erc20s'
+
 export function formatLargeNum (n, decimals = 18) {
   // decimals defaults to 18 for old transfers in state that didn't record transfer.decimals
   if (!n) {
@@ -23,9 +25,13 @@ export async function getErc20Data (address) {
   return { ...erc20, allowance, nep141 }
 }
 
-export async function getFeaturedErc20s () {
+export async function getAllErc20s () {
+  const featuredErc20s = JSON.parse(process.env.featuredErc20s)
+  let customErc20s = JSON.parse(localStorage.getItem(CUSTOM_ERC20_STORAGE))
+  if (customErc20s === null) { customErc20s = [] }
+
   return (await Promise.all(
-    JSON.parse(process.env.featuredErc20s).map(getErc20Data)
+    [...customErc20s, ...featuredErc20s].map(getErc20Data)
   )).reduce(
     (acc, token) => {
       acc[token.address] = token
@@ -35,6 +41,18 @@ export async function getFeaturedErc20s () {
   )
 }
 
+export function rememberCustomErc20 (erc20Address) {
+  erc20Address = erc20Address.toLowerCase()
+  if (process.env.featuredErc20s.includes(erc20Address)) return
+
+  const customErc20s = JSON.parse(localStorage.getItem(CUSTOM_ERC20_STORAGE))
+  if (customErc20s === null) {
+    localStorage.setItem(CUSTOM_ERC20_STORAGE, JSON.stringify([erc20Address]))
+  } else if (!customErc20s.includes(erc20Address)) {
+    localStorage.setItem(CUSTOM_ERC20_STORAGE, JSON.stringify([...customErc20s, erc20Address]))
+  }
+}
+
 export const chainIdToEthNetwork = {
   1: 'main',
   3: 'ropsten',