Fetch currency rates from on-chain price feeds

This adds a few contract addresses for EUR/AUD/JPY rates which should be good
for testing. Also added a dropdown on the settings page to test switching
between currencies that is yet to be wrapped under a feature flag.

Author: hyphenized

background/redux-slices/ui.ts

@@ -83,6 +83,7 @@ export type Events = {
   updateAnalyticsPreferences: Partial<AnalyticsPreferences>
   addCustomNetworkResponse: [string, boolean]
   updateAutoLockInterval: number
+  updateDisplayCurrency: string
   toggleShowTestNetworks: boolean
   clearNotification: string
 }
@@ -383,6 +384,13 @@ export const updateAutoLockInterval = createBackgroundAsyncThunk(
   },
 )
 
+export const updateDisplayCurrency = createBackgroundAsyncThunk(
+  "ui/updateDisplayCurrency",
+  async (newValue: string) => {
+    emitter.emit("updateDisplayCurrency", newValue)
+  },
+)
+
 export const userActivityEncountered = createBackgroundAsyncThunk(
   "ui/userActivityEncountered",
   async (addressNetwork: AddressOnNetwork) => {

background/redux-slices/utils/asset-utils.ts

@@ -205,6 +205,10 @@ export function convertUSDPricePointToCurrency(
   pricePoint: PricePoint,
   currency: DisplayCurrency,
 ) {
+  if (currency.code === "USD") {
+    // noop
+    return pricePoint
+  }
   const { pair, amounts, time } = pricePoint
   const idx = pricePoint.pair.findIndex((asset) => asset.symbol === "USD")
 
@@ -225,7 +229,7 @@ export function convertUSDPricePointToCurrency(
   const rate = new ExchangeRate({
     // Keeping 10 decimals ensures we don't lose precision during conversion
     baseCurrency: { ...currencies[currency.code], decimals: 10n },
-    quoteCurrency: currencies.USD,
+    quoteCurrency: { ...currencies.USD, decimals: 10n },
     rate: FixedPoint(currency.rate),
   })
 

background/services/indexing/db.ts

@@ -121,6 +121,13 @@ function numberArrayCompare(arr1: number[], arr2: number[]) {
   return 0
 }
 
+type FeedRate = {
+  id: string
+  value: bigint
+  decimals: bigint
+  time: number
+}
+
 export class IndexingDatabase extends Dexie {
   private prices!: Dexie.Table<PriceMeasurement, number>
 
@@ -139,6 +146,11 @@ export class IndexingDatabase extends Dexie {
    */
   private customAssets!: Dexie.Table<CustomAsset, number>
 
+  /**
+   * Currency exchange rates
+   */
+  private currencyRates!: Dexie.Table<FeedRate, "id">
+
   /*
    * Tokens whose balances should be checked periodically. It might make sense
    * for this to be tracked against particular accounts in the future.
@@ -256,6 +268,8 @@ export class IndexingDatabase extends Dexie {
           delete customAsset.metadata?.discoveryTxHash
         }),
     )
+
+    this.version(7).stores({ currencyRates: "&id" })
   }
 
   async savePriceMeasurement(
@@ -429,6 +443,14 @@ export class IndexingDatabase extends Dexie {
       tokenList: v as TokenList,
     }))
   }
+
+  async getCurrencyRates(): Promise<FeedRate[]> {
+    return this.currencyRates.toArray()
+  }
+
+  async saveCurrencyRates(rates: FeedRate[]): Promise<void> {
+    await this.currencyRates.bulkPut(rates)
+  }
 }
 
 export async function getOrCreateDb(

background/services/indexing/index.ts

@@ -57,6 +57,7 @@ import {
   isSameAsset,
 } from "../../redux-slices/utils/asset-utils"
 import { wrapIfEnabled } from "../../features"
+import fetchRatesFromPriceFeeds from "./price-feeds"
 
 // Transactions seen within this many blocks of the chain tip will schedule a
 // token refresh sooner than the standard rate.
@@ -1108,11 +1109,32 @@ export default class IndexingService extends BaseService<Events> {
   private async handleCurrencyRatesAlarm(): Promise<void> {
     logger.info("Syncing currency rates...")
 
-    const rate = {
-      code: "EUR",
-      rate: { amount: BigInt("0x06f9d7c8"), decimals: 8n },
-    }
+    const rates = await fetchRatesFromPriceFeeds(this.chainService)
+
+    this.db.saveCurrencyRates(Object.values(rates))
+
+    const currencies = Object.keys(rates).map((id) => {
+      const currencyCode = id.split("/")[0]
+
+      return {
+        code: currencyCode,
+        rate: { amount: rates[id].value, decimals: rates[id].decimals },
+      }
+    })
 
-    this.emitter.emit("updatedCurrencyRates", [rate])
+    this.emitter.emit("updatedCurrencyRates", currencies)
+  }
+
+  async getCurrencyRates() {
+    const rates = await this.db.getCurrencyRates()
+
+    return rates.map((rate) => {
+      const currencyCode = rate.id.split("/")[0]
+
+      return {
+        code: currencyCode,
+        rate: { amount: rate.value, decimals: rate.decimals },
+      }
+    })
   }
 }

background/services/indexing/price-feeds.ts

@@ -22,6 +22,7 @@ type FeedRate = {
   id: string
   value: bigint
   decimals: bigint
+  time: number
 }
 
 export default async function fetchRatesFromPriceFeeds(
@@ -40,10 +41,14 @@ export default async function fetchRatesFromPriceFeeds(
         provider,
       )
 
+      const decimals = contract.callStatic.decimals()
+      const roundData = await contract.callStatic.latestRoundData()
+
       return {
         id,
-        value: (await contract.callStatic.latestRoundData()) as BigNumber,
-        decimals: (await contract.callStatic.decimals()) as number,
+        value: roundData.answer as BigNumber,
+        decimals: (await decimals) as number,
+        time: Date.now(),
       }
     }),
   )
@@ -55,6 +60,7 @@ export default async function fetchRatesFromPriceFeeds(
         id: feed.id,
         value: feed.value.toBigInt(),
         decimals: BigInt(feed.decimals),
+        time: feed.time,
       },
     ]),
   )

background/services/preferences/db.ts

@@ -480,6 +480,27 @@ export class PreferenceDatabase extends Dexie {
         }),
     )
 
+    this.version(24).upgrade((tx) =>
+      tx
+        .table("preferences")
+        .toCollection()
+        .modify((storedPreferences: Preferences) => {
+          const USD: DisplayCurrency = {
+            code: "USD",
+            rate: {
+              amount: 1_000_000_0000n, // 1 USD = 1 USD
+              decimals: 10n,
+            },
+          }
+
+          const update: Partial<Preferences> = {
+            currency: USD,
+          }
+
+          Object.assign(storedPreferences, update)
+        }),
+    )
+
     // This is the old version for populate
     // https://dexie.org/docs/Dexie/Dexie.on.populate-(old-version)
     // The this does not behave according the new docs, but works

background/services/redux/index.ts

@@ -947,16 +947,24 @@ export default class ReduxService extends BaseService<never> {
       this.store.dispatch(
         setDisplayCurrency({
           code: "USD",
-          rate: { amount: 1000000n, decimals: 6n },
+          rate: { amount: 1_000_000_000_0n, decimals: 10n },
         }),
       )
     }
 
-    this.indexingService.emitter.on("updatedCurrencyRates", async (rates) => {
-      // const currency = await this.preferenceService.getCurrency()
+    this.indexingService.emitter.on(
+      "updatedCurrencyRates",
+      async (currencies) => {
+        const currency = await this.preferenceService.getCurrency()
 
-      this.store.dispatch(setDisplayCurrency(rates[0]))
-    })
+        const update = currencies.find((rate) => rate.code === currency.code)
+
+        // Only update if we successfully received an updated rate
+        if (update) {
+          await this.store.dispatch(setDisplayCurrency(update))
+        }
+      },
+    )
 
     this.indexingService.emitter.on("refreshAsset", (asset) => {
       this.store.dispatch(
@@ -1767,6 +1775,24 @@ export default class ReduxService extends BaseService<never> {
     uiSliceEmitter.on("updateAutoLockInterval", async (newTimerValue) => {
       await this.preferenceService.updateAutoLockInterval(newTimerValue)
     })
+
+    uiSliceEmitter.on("updateDisplayCurrency", async (currencyCode) => {
+      const rates = await this.indexingService.getCurrencyRates()
+
+      const fallback = {
+        code: "USD",
+        rate: { amount: 1_000_000_000_0n, decimals: 10n },
+      }
+
+      const currency =
+        // FIXME: Currency won't update if there's no exchange rate available.
+        // This may confuse the user, as it may seem the dropdown did nothing.
+        rates.find((rate) => rate.code === currencyCode) ?? fallback
+
+      // TODO: dispatch preferences db update
+
+      this.store.dispatch(setDisplayCurrency(currency))
+    })
   }
 
   async connectCampaignService() {

ui/pages/Settings.tsx

@@ -17,10 +17,12 @@ import {
   selectUseFlashbots,
   selectAutoLockTimer as selectAutoLockInterval,
   updateAutoLockInterval,
+  updateDisplayCurrency,
 } from "@tallyho/tally-background/redux-slices/ui"
 import { useHistory } from "react-router-dom"
 import { FLASHBOTS_DOCS_URL, MINUTE } from "@tallyho/tally-background/constants"
 import {
+  selectDisplayCurrency,
   selectDisplayCurrencySign,
   userValueDustThreshold,
 } from "@tallyho/tally-background/redux-slices/selectors"
@@ -64,6 +66,13 @@ const AUTO_LOCK_OPTIONS = [
   { label: "60", value: String(60 * MINUTE) },
 ]
 
+const CURRENCY_OPTIONS = [
+  { label: "USD", value: "USD" },
+  { label: "EUR", value: "EUR" },
+  { label: "AUD", value: "AUD" },
+  { label: "JPY", value: "JPY" },
+]
+
 const FOOTER_ACTIONS = [
   {
     icon: "icons/m/discord",
@@ -361,6 +370,24 @@ export default function Settings(): ReactElement {
     ),
   }
 
+  const displayCurrency = useBackgroundSelector(selectDisplayCurrency)
+
+  const currencySettings = {
+    title: "Currency",
+    component: () => (
+      <SharedSelect
+        width={194}
+        options={CURRENCY_OPTIONS}
+        onChange={(currencyCode) =>
+          dispatch(updateDisplayCurrency(currencyCode))
+        }
+        defaultIndex={CURRENCY_OPTIONS.findIndex(
+          (option) => option.value === displayCurrency.code,
+        )}
+      />
+    ),
+  }
+
   const notificationBanner = {
     title: t("settings.showBanners"),
     component: () => (
@@ -415,6 +442,7 @@ export default function Settings(): ReactElement {
         dAppsSettings,
         analytics,
         ...wrapIfEnabled(FeatureFlags.SUPPORT_MULTIPLE_LANGUAGES, languages),
+        currencySettings,
         ...wrapIfEnabled(
           FeatureFlags.SUPPORT_ACHIEVEMENTS_BANNER,
           notificationBanner,