refactor: use coinmarketcap to generate static fiat estimates (#671)

* refactor: use coinmarketcap to generate static fiat estimates

* chore: update .env.template

* docs: update DEVELOPMENT.md

* ci: add new env var to actions

* fix: possible wrong values from fiat-estimates if theres an unsupported token

* fix: token store race cond, broken fiat estimates on projects view & claim project flow

.env.template

@@ -5,3 +5,4 @@ TENDERLY_PROJECT=string
 TENDERLY_ACCESS_SECRET=string
 GELATO_API_KEY=string
 PUBLIC_NETWORK=number
+COINMARKETCAP_API_KEY=string # To get one, sign up for a free developer account with Coinmarketcap

.github/workflows/check.yml

@@ -22,6 +22,7 @@ jobs:
           envkey_TENDERLY_PROJECT: ${{ secrets.TENDERLY_PROJECT }}
           envkey_TENDERLY_USER: ${{ secrets.TENDERLY_USER }}
           envkey_GELATO_API_KEY: ${{ secrets.GELATO_API_KEY }}
+          envkey_COINMARKETCAP_API_KEY: ${{ secrets.COINMARKETCAP_API_KEY }}
           envkey_PUBLIC_NETWORK: 5
 
       - name: Install dependencies

.github/workflows/e2e-tests.yml

@@ -22,6 +22,7 @@ jobs:
           envkey_TENDERLY_PROJECT: ${{ secrets.TENDERLY_PROJECT }}
           envkey_TENDERLY_USER: ${{ secrets.TENDERLY_USER }}
           envkey_GELATO_API_KEY: ${{ secrets.GELATO_API_KEY }}
+          envkey_COINMARKETCAP_API_KEY: ${{ secrets.COINMARKETCAP_API_KEY }}
           envkey_PUBLIC_NETWORK: 5
 
       - name: Install dependencies

docs/DEVELOPMENT.md

@@ -31,7 +31,7 @@ You can preview the production build with `npm run preview`.
 
 ## 🌳 Environment
 
-There are a few environment variables required for the app to function. You can find an overview under `.env.template`. Youʼll need access credentials for Pinata, Tenderly and a Gelato Relay API key for claiming projects. Youʼll also need to set up `PUBLIC_NETWORK`, as described right below.
+There are a few environment variables required for the app to function. You can find an overview under `.env.template`. Youʼll need access credentials for Pinata, Tenderly and a Gelato Relay API key for claiming projects. Youʼll also need to set up `PUBLIC_NETWORK`, as described right below. Lastly, you'll need to sign up for a free Coinmarketcap API developer account and populate the `COINMARKETCAP_API_KEY` var.
 
 ## 🔗 Chain Config
 

src/lib/components/aggregate-fiat-estimate/aggregate-fiat-estimate.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import tokensStore, { type TokenInfoWrapper } from '$lib/stores/tokens/tokens.store';
+  import tokensStore from '$lib/stores/tokens/tokens.store';
   import fiatEstimates from '$lib/utils/fiat-estimates/fiat-estimates';
   import { fade } from 'svelte/transition';
   import WarningIcon from 'radicle-design-system/icons/ExclamationCircle.svelte';
@@ -15,30 +15,24 @@
 
   /** If undefined, component will display a loading state. */
   export let amounts: Amounts | undefined;
-  $: tokens =
-    (amounts &&
-      $tokensStore &&
-      amounts.map((amount) => tokensStore.getByAddress(amount.tokenAddress.toLowerCase()))) ??
-    [];
-  $: knownTokens = tokens.filter((token): token is TokenInfoWrapper => token !== undefined);
-  $: knownSymbols = knownTokens.map((token) => token.info.symbol);
+  $: tokenAddresses = amounts?.map((a) => a.tokenAddress);
 
   const fiatEstimatesStarted = fiatEstimates.started;
   $: {
-    if ($fiatEstimatesStarted) {
-      fiatEstimates.track(knownSymbols);
+    if ($fiatEstimatesStarted && tokenAddresses && tokenAddresses.length > 0) {
+      fiatEstimates.track(tokenAddresses);
     }
   }
 
-  $: priceStore = fiatEstimates.price(knownSymbols);
+  $: priceStore = fiatEstimates.price(tokenAddresses ?? []);
 
   let fiatEstimateCents: number | 'pending' = 'pending';
   let includesUnknownPrice = false;
 
   const connected = tokensStore.connected;
 
   $: {
-    if ($connected && amounts) {
+    if ($connected && amounts && $connected) {
       const prices = $priceStore;
 
       includesUnknownPrice = false;
@@ -47,7 +41,14 @@
         fiatEstimateCents = 'pending';
       } else {
         fiatEstimateCents = amounts.reduce((sum, { tokenAddress, amount }) => {
-          const res = fiatEstimates.convert({ amount, tokenAddress });
+          const token = tokensStore.getByAddress(tokenAddress);
+
+          if (!token) {
+            includesUnknownPrice = true;
+            return sum;
+          }
+
+          const res = fiatEstimates.convert({ amount, tokenAddress }, token.info.decimals);
 
           if (res === 'unsupported') {
             includesUnknownPrice = true;

src/lib/components/token-amounts-table/token-amounts-table.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import addCustomTokenFlowSteps from '$lib/flows/add-custom-token/add-custom-token-flow-steps';
   import modal from '$lib/stores/modal';
-  import tokensStore, { type TokenInfoWrapper } from '$lib/stores/tokens/tokens.store';
+  import tokensStore from '$lib/stores/tokens/tokens.store';
   import fiatEstimatesStore from '$lib/utils/fiat-estimates/fiat-estimates';
   import formatTokenAmount from '$lib/utils/format-token-amount';
   import unreachable from '$lib/utils/unreachable';
@@ -20,22 +20,40 @@
   }
 
   export let amounts: Amount[];
+  $: tokenAddresses = amounts.map((a) => a.tokenAddress);
+  $: tokens = tokenAddresses.map((a) => tokensStore.getByAddress(a));
 
-  $: tokens =
-    ($tokensStore && amounts.map((amount) => tokensStore.getByAddress(amount.tokenAddress))) ?? [];
-  $: knownTokens = tokens.filter((token): token is TokenInfoWrapper => token !== undefined);
-  $: knownSymbols = knownTokens.map((token) => token.info.symbol);
+  $: priceStore = fiatEstimatesStore.price(tokenAddresses ?? []);
 
-  $: priceStore = fiatEstimatesStore.price(knownSymbols);
+  const fiatEstimatesStarted = fiatEstimatesStore.started;
+  $: {
+    if ($fiatEstimatesStarted && tokenAddresses && tokenAddresses.length > 0) {
+      fiatEstimatesStore.track(tokenAddresses);
+    }
+  }
 
   let fiatEstimates: (number | 'pending' | 'unsupported' | undefined)[] = [];
 
+  const connected = tokensStore.connected;
+
   $: {
     $priceStore;
 
-    amounts.forEach(({ tokenAddress, amount }, index) => {
-      fiatEstimates[index] = fiatEstimatesStore.convert({ amount, tokenAddress });
-    });
+    if ($connected) {
+      amounts.forEach(({ tokenAddress, amount }, index) => {
+        const token = tokensStore.getByAddress(tokenAddress);
+
+        if (!token) {
+          fiatEstimates[index] = 'unsupported';
+          return;
+        }
+
+        fiatEstimates[index] = fiatEstimatesStore.convert(
+          { amount, tokenAddress },
+          token.info.decimals,
+        );
+      });
+    }
 
     fiatEstimates = fiatEstimates;
   }