feat: siascan links

SiaFoundation · Dec 5, 2023 · 23f4fb4 · 23f4fb4
1 parent bfa6b96
commit 23f4fb4
Show file tree

Hide file tree

Showing 31 changed files with 444 additions and 157 deletions.
diff --git a/.changeset/funny-zebras-double.md b/.changeset/funny-zebras-double.md
@@ -0,0 +1,8 @@
+---
+'explorer': minor
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Copyable entity values now have a context menu with support for opening Siascan pages.
diff --git a/apps/hostd/components/Profile/index.tsx b/apps/hostd/components/Profile/index.tsx
@@ -12,6 +12,7 @@ import {
 } from '@siafoundation/react-hostd'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
 import { useDialog } from '../../contexts/dialog'
+import { useSiascanUrl } from '../../hooks/useSiascanUrl'
 
 export function Profile() {
   const { openDialog } = useDialog()
@@ -31,6 +32,7 @@ export function Profile() {
   })
   const syncStatus = useSyncStatus()
   const peers = useSyncerPeers()
+  const siascanUrl = useSiascanUrl()
 
   const version = state.data?.version
   const versionUrl = version?.match(/^v\d+\.\d+\.\d+/)
@@ -48,57 +50,58 @@ export function Profile() {
       firstTimeSyncing={syncStatus.firstTimeSyncing}
       moreThan100BlocksToSync={syncStatus.moreThan100BlocksToSync}
     >
-      <div className="flex gap-4 justify-between items-center">
+      <div className="flex gap-2 justify-between items-center">
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Net address
         </Label>
-        <div className="flex-1 flex justify-end overflow-hidden">
+        <div className="flex-1 flex justify-end overflow-hidden -mr-0.5 pr-0.5">
           <ValueCopyable
-            className="overflow-hidden"
             size="14"
             value={settings.data?.netAddress}
-            maxLength={50}
+            maxLength={24}
             label="network address"
+            type="hostIp"
+            siascanUrl={siascanUrl}
           />
         </div>
       </div>
-      <div className="flex gap-4 justify-between items-center">
+      <div className="flex gap-2 justify-between items-center">
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Public key
         </Label>
-        <div className="flex-1 flex justify-end overflow-hidden">
+        <div className="flex-1 flex justify-end overflow-hidden -mr-0.5 pr-0.5">
           <ValueCopyable
-            className="overflow-hidden"
             size="14"
             value={state.data?.publicKey}
-            maxLength={50}
+            maxLength={24}
             label="public key"
+            type="hostPublicKey"
+            siascanUrl={siascanUrl}
           />
         </div>
       </div>
-      <div className="flex gap-4 justify-between items-center">
+      <div className="flex gap-2 justify-between items-center">
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Wallet address
         </Label>
-        <div className="flex-1 flex justify-end overflow-hidden">
+        <div className="flex-1 flex justify-end overflow-hidden -mr-0.5 pr-0.5">
           <ValueCopyable
-            className="overflow-hidden"
             size="14"
-            maxLength={50}
+            maxLength={24}
             value={state.data?.walletAddress}
             type="address"
           />
         </div>
       </div>
-      <div className="flex gap-4 justify-between items-center">
+      <div className="flex gap-2 justify-between items-center">
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Network
         </Label>
         <div className="flex-1 flex justify-end overflow-hidden">
           <Text size="14">{state.data?.network}</Text>
         </div>
       </div>
-      <div className="flex gap-4 justify-between items-center">
+      <div className="flex gap-2 justify-between items-center">
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Version
         </Label>

diff --git a/apps/hostd/contexts/contracts/columns.tsx b/apps/hostd/contexts/contracts/columns.tsx
@@ -26,6 +26,7 @@ type Context = {
     startHeight: number
     endHeight: number
   }
+  siascanUrl: string
 }
 
 type ContractsTableColumn = TableColumn<
@@ -52,14 +53,15 @@ export const columns: ContractsTableColumn[] = (
       id: 'contractId',
       label: 'contract ID',
       category: 'general',
-      render: ({ data }) => {
+      render: ({ data, context }) => {
         const { id, renewedFrom, isRenewedFrom, renewedTo, isRenewedTo } = data
         return (
           <div className="flex flex-col gap-1 w-full">
             <ValueCopyable
               size="12"
               value={stripPrefix(id)}
-              label="contract ID"
+              type="contract"
+              siascanUrl={context.siascanUrl}
             />
             {isRenewedFrom && (
               <Tooltip content="Renewed from" align="start">
@@ -70,8 +72,9 @@ export const columns: ContractsTableColumn[] = (
                   <ValueCopyable
                     color="subtle"
                     size="10"
+                    type="contract"
                     value={stripPrefix(renewedFrom)}
-                    label="contract ID"
+                    siascanUrl={context.siascanUrl}
                   />
                 </div>
               </Tooltip>
@@ -86,7 +89,8 @@ export const columns: ContractsTableColumn[] = (
                     color="subtle"
                     size="10"
                     value={stripPrefix(renewedTo)}
-                    label="contract ID"
+                    type="contract"
+                    siascanUrl={context.siascanUrl}
                   />
                 </div>
               </Tooltip>

diff --git a/apps/hostd/contexts/contracts/index.tsx b/apps/hostd/contexts/contracts/index.tsx
@@ -21,6 +21,7 @@ import {
 import { columns } from './columns'
 import { useDataset } from './dataset'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
+import { useSiascanUrl } from '../../hooks/useSiascanUrl'
 
 const defaultLimit = 50
 
@@ -92,14 +93,22 @@ function useContractsMain() {
     [currentHeight, dataset]
   )
 
+  const siascanUrl = useSiascanUrl()
+
+  const cellContext = useMemo(
+    () => ({
+      contractsTimeRange,
+      currentHeight,
+      siascanUrl,
+    }),
+    [contractsTimeRange, currentHeight, siascanUrl]
+  )
+
   return {
     dataState,
     offset,
     limit,
-    cellContext: {
-      contractsTimeRange,
-      currentHeight,
-    },
+    cellContext,
     pageCount: dataset?.length || 0,
     totalCount: response.data?.count,
     columns: filteredTableColumns,

diff --git a/apps/hostd/contexts/transactions/index.tsx b/apps/hostd/contexts/transactions/index.tsx
@@ -1,5 +1,5 @@
 import {
-  EntityListItemProps,
+  TxType,
   daysInMilliseconds,
   getTransactionType,
   secondsInMilliseconds,
@@ -14,10 +14,30 @@ import { createContext, useContext, useMemo } from 'react'
 import { useDialog } from '../dialog'
 import BigNumber from 'bignumber.js'
 import { useRouter } from 'next/router'
+import { useSiascanUrl } from '../../hooks/useSiascanUrl'
 
 const defaultLimit = 50
 const filters = []
 
+export type TransactionDataPending = {
+  type: 'transaction'
+  txType: TxType
+  siascanUrl: string
+}
+
+export type TransactionDataConfirmed = {
+  type: 'transaction'
+  txType: TxType
+  hash: string
+  timestamp: number
+  onClick: () => void
+  unconfirmed: boolean
+  sc: BigNumber
+  siascanUrl: string
+}
+
+export type TransactionData = TransactionDataPending | TransactionDataConfirmed
+
 function useTransactionsMain() {
   const router = useRouter()
   const limit = Number(router.query.limit || defaultLimit)
@@ -42,36 +62,41 @@ function useTransactionsMain() {
   })
 
   const { openDialog } = useDialog()
+  const siascanUrl = useSiascanUrl()
 
-  const dataset: EntityListItemProps[] | null = useMemo(() => {
+  const dataset: TransactionData[] | null = useMemo(() => {
     if (!pending.data || !transactions.data) {
       return null
     }
     return [
-      ...(pending.data || []).map((t): EntityListItemProps => {
+      ...(pending.data || []).map((t): TransactionData => {
+        const notRealTxn = t.source !== 'transaction'
         return {
           type: 'transaction',
           txType: getTransactionType(t.transaction, t.source),
           hash: t.ID,
           timestamp: new Date(t.timestamp).getTime(),
           sc: new BigNumber(t.inflow).minus(t.outflow),
           unconfirmed: true,
+          siascanUrl: notRealTxn ? undefined : siascanUrl,
         }
       }),
       ...(transactions.data || [])
-        .map((t): EntityListItemProps => {
+        .map((t): TransactionData => {
+          const notRealTxn = t.source !== 'transaction'
           return {
             type: 'transaction',
             txType: getTransactionType(t.transaction, t.source),
             hash: t.ID,
             timestamp: new Date(t.timestamp).getTime(),
             onClick: () => openDialog('transactionDetails', t.ID),
             sc: new BigNumber(t.inflow).minus(t.outflow),
+            siascanUrl: notRealTxn ? undefined : siascanUrl,
           }
         })
-        .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)),
+        .sort((a, b) => (a['timestamp'] < b['timestamp'] ? 1 : -1)),
     ]
-  }, [pending, transactions, openDialog])
+  }, [pending, transactions, openDialog, siascanUrl])
 
   const dayPeriods = 30
   const start = useMemo(() => {

diff --git a/apps/hostd/hooks/useSiascanUrl.ts b/apps/hostd/hooks/useSiascanUrl.ts
@@ -0,0 +1,9 @@
+import { webLinks } from '@siafoundation/design-system'
+import { useStateHost } from '@siafoundation/react-hostd'
+
+export function useSiascanUrl() {
+  const state = useStateHost()
+  return state.data?.network === 'Zen Testnet'
+    ? webLinks.explore.testnetZen
+    : webLinks.explore.mainnet
+}
diff --git a/apps/renterd/components/Profile/index.tsx b/apps/renterd/components/Profile/index.tsx
@@ -56,19 +56,20 @@ export function Profile() {
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Wallet address
         </Label>
-        <ValueCopyable
-          className="overflow-hidden"
-          size="14"
-          maxLength={50}
-          value={wallet.data?.address}
-          type="address"
-        />
+        <div className="flex-1 flex justify-end overflow-hidden -mr-0.5 pr-0.5">
+          <ValueCopyable
+            size="14"
+            maxLength={50}
+            value={wallet.data?.address}
+            type="address"
+          />
+        </div>
       </div>
       <div className="flex gap-4 justify-between items-center">
         <Label size="14" color="subtle" noWrap className="w-[100px]">
           Network
         </Label>
-        <div className="flex-1 flex justify-end overflow-hidden">
+        <div className="flex-1 flex justify-end overflow-hidden -mr-0.5 pr-0.5">
           <Text size="14">{state.data?.network}</Text>
         </div>
       </div>

diff --git a/apps/renterd/contexts/contracts/columns.tsx b/apps/renterd/contexts/contracts/columns.tsx
@@ -22,6 +22,7 @@ type Context = {
     startHeight: number
     endHeight: number
   }
+  siascanUrl: string
 }
 
 type ContractsTableColumn = TableColumn<
@@ -47,14 +48,19 @@ export const columns: ContractsTableColumn[] = [
     id: 'contractId',
     label: 'contract ID',
     category: 'general',
-    render: ({ data: { id, isRenewed, renewedFrom } }) => {
+    render: ({
+      data: { id, isRenewed, renewedFrom },
+      context: { siascanUrl },
+    }) => {
       // const { label, color } = getStatus(row)
       return (
         <div className="flex flex-col gap-1 w-full">
           <ValueCopyable
             size="12"
             value={stripPrefix(id)}
+            type="contract"
             label="contract ID"
+            siascanUrl={siascanUrl}
           />
           {isRenewed && (
             <Tooltip content="Renewed from" align="start">
@@ -65,7 +71,9 @@ export const columns: ContractsTableColumn[] = [
                 <ValueCopyable
                   color="subtle"
                   size="10"
+                  type="contract"
                   value={stripPrefix(renewedFrom)}
+                  siascanUrl={siascanUrl}
                   label="contract ID"
                 />
               </div>
@@ -79,13 +87,13 @@ export const columns: ContractsTableColumn[] = [
     id: 'hostIp',
     label: 'host address',
     category: 'general',
-    render: ({ data: { hostIp } }) => {
+    render: ({ data: { hostIp }, context: { siascanUrl } }) => {
       return (
         <ValueCopyable
           size="12"
           value={hostIp}
-          type="ip"
-          label="host address"
+          type="hostIp"
+          siascanUrl={siascanUrl}
         />
       )
     },
@@ -94,8 +102,15 @@ export const columns: ContractsTableColumn[] = [
     id: 'hostKey',
     label: 'host public key',
     category: 'general',
-    render: ({ data: { hostKey } }) => {
-      return <ValueCopyable size="12" value={hostKey} label="host public key" />
+    render: ({ data: { hostKey }, context: { siascanUrl } }) => {
+      return (
+        <ValueCopyable
+          size="12"
+          value={hostKey}
+          type="hostPublicKey"
+          siascanUrl={siascanUrl}
+        />
+      )
     },
   },
   {