feat: explorer currency, fix issues

SiaFoundation · Sep 18, 2023 · de6572a · de6572a
1 parent 05a6c94
commit de6572a
Show file tree

Hide file tree

Showing 27 changed files with 360 additions and 222 deletions.
diff --git a/.changeset/chatty-pumpkins-search.md b/.changeset/chatty-pumpkins-search.md
@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Fiat currency is now configurable.
diff --git a/apps/explorer/app/contract/[id]/opengraph-image.tsx b/apps/explorer/app/contract/[id]/opengraph-image.tsx
@@ -7,7 +7,8 @@ import { getOGImage } from '../../../components/OGImageEntity'
 import { siaCentralApi } from '../../../config'
 import { truncate } from '@siafoundation/design-system'
 import { lowerCase } from 'lodash'
-import { siacoinToDollars } from '../../../lib/currency'
+import { siacoinToFiat } from '../../../lib/currency'
+import { CurrencyOption, currencyOptions } from '@siafoundation/react-core'
 
 export const revalidate = 60
 
@@ -19,6 +20,8 @@ export const size = {
 
 export const contentType = 'image/png'
 
+const currency = currencyOptions.find((c) => c.id === 'usd') as CurrencyOption
+
 export default async function Image({ params }) {
   const id = params?.id as string
 
@@ -52,7 +55,10 @@ export default async function Image({ params }) {
     },
     {
       label: 'payout',
-      value: siacoinToDollars(c.contract.payout, r.rates),
+      value: siacoinToFiat(c.contract.payout, {
+        currency,
+        rate: r.rates.sc.usd,
+      }),
     },
   ]
 

diff --git a/apps/explorer/app/host/[id]/opengraph-image.tsx b/apps/explorer/app/host/[id]/opengraph-image.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../../lib/host'
 import { humanBytes, humanSpeed } from '@siafoundation/sia-js'
 import { truncate } from '@siafoundation/design-system'
+import { CurrencyOption, currencyOptions } from '@siafoundation/react-core'
 
 export const revalidate = 60
 
@@ -20,6 +21,8 @@ export const size = {
   height: 630,
 }
 
+const currency = currencyOptions.find((c) => c.id === 'usd') as CurrencyOption
+
 export const contentType = 'image/png'
 
 export default async function Image({ params }) {
@@ -45,15 +48,21 @@ export default async function Image({ params }) {
       label: 'storage',
       value: getStorageCost({
         price: h.host.settings.storage_price,
-        rates: r.rates,
+        exchange: {
+          currency,
+          rate: r.rates.sc.usd,
+        },
       }),
       subvalue: humanBytes(h.host.settings.remaining_storage),
     },
     {
       label: 'download',
       value: getDownloadCost({
         price: h.host.settings.download_price,
-        rates: r.rates,
+        exchange: {
+          currency,
+          rate: r.rates.sc.usd,
+        },
       }),
       subvalue: humanSpeed(
         (h.host.benchmark.data_size * 8) /
@@ -64,7 +73,10 @@ export default async function Image({ params }) {
       label: 'upload',
       value: getUploadCost({
         price: h.host.settings.upload_price,
-        rates: r.rates,
+        exchange: {
+          currency,
+          rate: r.rates.sc.usd,
+        },
       }),
       subvalue: humanSpeed(
         (h.host.benchmark.data_size * 8) / (h.host.benchmark.upload_time / 1000)

diff --git a/apps/explorer/components/Contract/ContractHeader.tsx b/apps/explorer/components/Contract/ContractHeader.tsx
@@ -47,7 +47,7 @@ export async function ContractHeader({
               href={routes.contract.view.replace(':id', renewedFromId)}
             >
               <ArrowLeft16 />
-              Renewed from
+              renewed from
             </LinkButton>
           )}
           <Badge
@@ -60,7 +60,7 @@ export async function ContractHeader({
           </Badge>
           {renewedToId && renewedToId !== id && (
             <LinkButton href={routes.contract.view.replace(':id', renewedToId)}>
-              Renewed to
+              renewed to
               <ArrowRight16 />
             </LinkButton>
           )}

diff --git a/apps/explorer/components/Contract/index.tsx b/apps/explorer/components/Contract/index.tsx
@@ -11,7 +11,8 @@ import { EntityList, EntityListItemProps } from '@siafoundation/design-system'
 import { DatumProps, ExplorerDatum } from '../ExplorerDatum'
 import { ContentLayout } from '../ContentLayout'
 import { ContractHeader } from './ContractHeader'
-import { siacoinToDollars } from '../../lib/currency'
+import { siacoinToFiat } from '../../lib/currency'
+import { useExchangeRate } from '../../hooks/useExchangeRate'
 
 type Props = {
   contract: SiaCentralContract
@@ -21,6 +22,7 @@ type Props = {
 }
 
 export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
+  const exchange = useExchangeRate(rates)
   const values = useMemo(() => {
     return [
       {
@@ -31,9 +33,8 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
       {
         label: 'payout',
         copyable: false,
-        value: `${siacoinToDollars(contract.payout, rates)} (${humanSiacoin(
-          contract.payout
-        )})`,
+        value: siacoinToFiat(contract.payout, exchange),
+        comment: humanSiacoin(contract.payout),
       },
       {
         label: 'transaction ID',
@@ -49,11 +50,13 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
         value: contract.unlock_hash,
       },
       {
-        label: 'revision number',
-        value: contract.revision_number.toLocaleString(),
+        label: 'proof confirmed',
+        copyable: false,
+        value: String(contract.proof_confirmed),
       },
       {
         label: 'negotiation height',
+        copyable: false,
         value: contract.negotiation_height?.toLocaleString() || '-',
       },
       {
@@ -69,6 +72,7 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
       },
       {
         label: 'expiration height',
+        copyable: false,
         value: contract.expiration_height?.toLocaleString() || '-',
       },
       {
@@ -84,7 +88,10 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
       },
       {
         label: 'proof height',
-        value: contract.proof_height?.toLocaleString() || '-',
+        copyable: false,
+        value: contract.proof_height
+          ? contract.proof_height.toLocaleString()
+          : '-',
       },
       {
         label: 'proof time',
@@ -99,6 +106,7 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
       },
       {
         label: 'proof deadline height',
+        copyable: false,
         value: contract.proof_deadline?.toLocaleString() || '-',
       },
       {
@@ -114,6 +122,7 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
       },
       {
         label: 'payout height',
+        copyable: false,
         value: contract.payout_height?.toLocaleString() || '-',
       },
       {
@@ -128,16 +137,16 @@ export function Contract({ contract, rates, renewedFrom, renewedTo }: Props) {
             : '-',
       },
       {
-        label: 'proof confirmed',
-        value: String(contract.proof_confirmed),
+        label: 'revision number',
+        value: contract.revision_number.toLocaleString(),
       },
       {
         label: 'previous revisions',
         copyable: false,
         value: (contract.previous_revisions?.length || 0).toLocaleString(),
       },
     ] as DatumProps[]
-  }, [contract, rates])
+  }, [contract, exchange])
 
   const missedProofOutputs = useMemo(() => {
     if (!contract) {

diff --git a/apps/explorer/components/Home/HostListItem.tsx b/apps/explorer/components/Home/HostListItem.tsx
@@ -25,6 +25,7 @@ import {
 } from '../../lib/host'
 import { useMemo } from 'react'
 import { routes } from '../../config/routes'
+import { useExchangeRate } from '../../hooks/useExchangeRate'
 
 type Props = {
   host: SiaCentralHost
@@ -33,19 +34,20 @@ type Props = {
 }
 
 export function HostListItem({ host, rates, entity }: Props) {
+  const exchange = useExchangeRate(rates)
   const storageCost = useMemo(
-    () => getStorageCost({ price: host.settings.storage_price, rates }),
-    [rates, host]
+    () => getStorageCost({ price: host.settings.storage_price, exchange }),
+    [exchange, host]
   )
 
   const downloadCost = useMemo(
-    () => getDownloadCost({ price: host.settings.download_price, rates }),
-    [rates, host]
+    () => getDownloadCost({ price: host.settings.download_price, exchange }),
+    [exchange, host]
   )
 
   const uploadCost = useMemo(
-    () => getUploadCost({ price: host.settings.upload_price, rates }),
-    [rates, host]
+    () => getUploadCost({ price: host.settings.upload_price, exchange }),
+    [exchange, host]
   )
 
   const downloadSpeed = useMemo(() => getDownloadSpeed(host), [host])

diff --git a/apps/explorer/components/Home/index.tsx b/apps/explorer/components/Home/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Text,
   BlockList,
@@ -18,6 +20,7 @@ import {
 import { hashToAvatar } from '../../lib/avatar'
 import { getDownloadCost, getStorageCost, getUploadCost } from '../../lib/host'
 import { HostListItem } from './HostListItem'
+import { useExchangeRate } from '../../hooks/useExchangeRate'
 
 export function Home({
   metrics,
@@ -32,6 +35,7 @@ export function Home({
   hosts: SiaCentralHost[]
   rates: SiaCentralExchangeRates
 }) {
+  const exchange = useExchangeRate()
   const values = useMemo(() => {
     const list = [
       {
@@ -136,7 +140,7 @@ export function Home({
             >
               {getStorageCost({
                 price: metrics?.average.settings.storage_price,
-                rates,
+                exchange,
               })}
             </Text>
           </Tooltip>
@@ -153,7 +157,7 @@ export function Home({
             >
               {getDownloadCost({
                 price: metrics?.average.settings.download_price,
-                rates,
+                exchange,
               })}
             </Text>
           </Tooltip>
@@ -170,15 +174,15 @@ export function Home({
             >
               {getUploadCost({
                 price: metrics?.average.settings.upload_price,
-                rates,
+                exchange,
               })}
             </Text>
           </Tooltip>
         ),
       },
     ]
     return list
-  }, [metrics, blockHeight, rates])
+  }, [metrics, blockHeight, exchange])
 
   return (
     <ContentLayout

diff --git a/apps/explorer/components/Host/HostHeader.tsx b/apps/explorer/components/Host/HostHeader.tsx
@@ -14,7 +14,7 @@ type Props = {
 
 export function HostHeader({ host, rates }: Props) {
   return (
-    <div className="flex flex-col gap-x-4 gap-y-4 pt-5 sm:pt-10 pb-4">
+    <div className="flex flex-col gap-x-4 gap-y-4">
       <Avatar
         src={hashToAvatar(host.public_key)}
         shape="square"

diff --git a/apps/explorer/components/Host/HostInfo.tsx b/apps/explorer/components/Host/HostInfo.tsx
@@ -37,7 +37,7 @@ export function HostInfo({ host }: Props) {
         className="w-full mt-1 mb-1 !border-gray-200/70 dark:!border-graydark-100"
         color="verySubtle"
       />
-      <div className="flex flex-wrap gap-x-2 gap-y-1 items-center">
+      <div className="flex flex-wrap gap-x-2 gap-y-1 items-center pb-1">
         <Tooltip
           content={
             host.online
@@ -79,6 +79,8 @@ export function HostInfo({ host }: Props) {
               : 'Not accepting contracts'}
           </Text>
         </Tooltip>
+      </div>
+      <div className="flex flex-wrap gap-x-2 gap-y-1 items-center">
         <Tooltip content={`Host version ${host.version}`}>
           <Text size="14" color="subtle" className="flex gap-1 items-center">
             <Fork16 />

diff --git a/apps/explorer/components/Host/HostPricing.tsx b/apps/explorer/components/Host/HostPricing.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   CloudDownload16,
   CloudUpload16,
@@ -19,26 +21,28 @@ import {
   getUploadCost,
   getUploadSpeed,
 } from '../../lib/host'
+import { useExchangeRate } from '../../hooks/useExchangeRate'
 
 type Props = {
   host: SiaCentralHost
   rates: SiaCentralExchangeRates
 }
 
 export function HostPricing({ host, rates }: Props) {
+  const exchange = useExchangeRate(rates)
   const storageCost = useMemo(
-    () => getStorageCost({ price: host.settings.storage_price, rates }),
-    [rates, host]
+    () => getStorageCost({ price: host.settings.storage_price, exchange }),
+    [exchange, host]
   )
 
   const downloadCost = useMemo(
-    () => getDownloadCost({ price: host.settings.download_price, rates }),
-    [rates, host]
+    () => getDownloadCost({ price: host.settings.download_price, exchange }),
+    [exchange, host]
   )
 
   const uploadCost = useMemo(
-    () => getUploadCost({ price: host.settings.upload_price, rates }),
-    [rates, host]
+    () => getUploadCost({ price: host.settings.upload_price, exchange }),
+    [exchange, host]
   )
 
   const downloadSpeed = useMemo(() => getDownloadSpeed(host), [host])
@@ -56,7 +60,7 @@ export function HostPricing({ host, rates }: Props) {
     <div className="flex flex-col">
       <div className="grid grid-cols-3 gap-4">
         <Tooltip content={`Storage cost ${storageCost}/month`}>
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center justify-end">
             <Text color="verySubtle" className="hidden sm:block">
               <VmdkDisk16 />
             </Text>
@@ -66,7 +70,7 @@ export function HostPricing({ host, rates }: Props) {
           </div>
         </Tooltip>
         <Tooltip content={`Download cost ${downloadCost}/month`}>
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center justify-end">
             <Text color="verySubtle" className="hidden sm:block">
               <CloudDownload16 />
             </Text>
@@ -76,7 +80,7 @@ export function HostPricing({ host, rates }: Props) {
           </div>
         </Tooltip>
         <Tooltip content={`Upload cost ${uploadCost}/month`}>
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center justify-end">
             <Text color="verySubtle" className="hidden sm:block">
               <CloudUpload16 />
             </Text>