feat: add support for rendering arc62 circulating supply of an asset

Author: p2arthur

.gitignore

@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 .env
+.npmrc
 
 # Editor directories and files
 .DS_Store

.vscode/settings.json

@@ -11,5 +11,8 @@
   },
   "[rust]": {
     "editor.defaultFormatter": "rust-lang.rust-analyzer"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

package.json

@@ -102,10 +102,16 @@
     "zod-form-data": "^2.0.2"
   },
   "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@eslint/js": "^9.15.0",
     "@makerx/prettier-config": "^2.0.0",
     "@makerx/ts-config": "^1.0.1",
     "@makerx/ts-dossier": "^3.0.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.2",
     "@tauri-apps/cli": "^2.0.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.2.2",
@@ -136,15 +142,9 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0",
-    "@semantic-release/changelog": "^6.0.3",
     "vite": "^7.0.5",
     "vite-plugin-node-polyfills": "^0.24.0",
-    "vitest": "^3.2.4",
-    "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.2",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3"
+    "vitest": "^3.2.4"
   },
   "overrides": {
     "ws@>7.0.0 <7.5.9": "7.5.10",

src/features/accounts/data/funded-account.ts

@@ -0,0 +1,37 @@
+import { algorandClient } from '@/features/common/data/algo-client'
+import {
+  betanetId,
+  localnetId,
+  mainnetId,
+  testnetId,
+  fnetId,
+  BETANET_FEE_SINK_ADDRESS,
+  FNET_FEE_SINK_ADDRESS,
+  MAINNET_FEE_SINK_ADDRESS,
+  selectedNetworkAtomId,
+  TESTNET_FEE_SINK_ADDRESS,
+} from '@/features/network/data'
+import { settingsStore } from '@/features/settings/data'
+import { atom } from 'jotai'
+import { Address } from './types'
+
+export const fundedAccountAtom = atom<Promise<Address | undefined>>(async () => {
+  const selectedNetworkId = settingsStore.get(selectedNetworkAtomId)
+  if (selectedNetworkId === mainnetId) {
+    return MAINNET_FEE_SINK_ADDRESS
+  }
+  if (selectedNetworkId === testnetId) {
+    return TESTNET_FEE_SINK_ADDRESS
+  }
+  if (selectedNetworkId === betanetId) {
+    return BETANET_FEE_SINK_ADDRESS
+  }
+  if (selectedNetworkId === fnetId) {
+    return FNET_FEE_SINK_ADDRESS
+  }
+  if (selectedNetworkId === localnetId) {
+    return (await algorandClient.account.localNetDispenser()).addr.toString()
+  }
+
+  return undefined
+})

src/features/accounts/data/index.ts

@@ -1,2 +1,3 @@
 export * from './account'
 export * from './account-result'
+export * from './funded-account'

src/features/assets/components/asset-details.tsx

@@ -27,6 +27,7 @@ import {
   assetActivityLabel,
   assetUnitNameLabel,
   assetUrlLabel,
+  circulatingSupplyLabel,
 } from './labels'
 import { Badge } from '@/features/common/components/badge'
 import { AssetMedia } from './asset-media'
@@ -85,6 +86,12 @@ export function AssetDetails({ asset }: Props) {
         dt: assetTotalSupplyLabel,
         dd: `${new Decimal(asset.total.toString()).div(new Decimal(10).pow(asset.decimals))} ${asset.unitName ?? ''}`,
       },
+      asset.circulatingSupply !== undefined
+        ? {
+            dt: circulatingSupplyLabel,
+            dd: `${new Decimal(asset.circulatingSupply.toString()).div(new Decimal(10).pow(asset.decimals))} ${asset.unitName ?? ''}`,
+          }
+        : undefined,
       {
         dt: assetDecimalsLabel,
         dd: asset.decimals,
@@ -109,7 +116,18 @@ export function AssetDetails({ asset }: Props) {
           }
         : undefined,
     ],
-    [asset.id, asset.name, asset.standardsUsed, asset.type, asset.unitName, asset.total, asset.decimals, asset.defaultFrozen, asset.url]
+    [
+      asset.id,
+      asset.name,
+      asset.standardsUsed,
+      asset.type,
+      asset.unitName,
+      asset.total,
+      asset.decimals,
+      asset.defaultFrozen,
+      asset.url,
+      asset.circulatingSupply,
+    ]
   ).filter(isDefined)
 
   const assetAddresses = useMemo(

src/features/assets/components/labels.ts

@@ -26,3 +26,5 @@ export const assetLiveTransactionsTabId = 'live-transactions'
 export const assetLiveTransactionsTabLabel = 'Live Transactions'
 export const assetHistoricalTransactionsTabId = 'historical-transactions'
 export const assetHistoricalTransactionsTabLabel = 'Historical Transactions'
+
+export const circulatingSupplyLabel = 'Circulating Supply'

src/features/assets/data/asset-metadata.ts

@@ -1,6 +1,6 @@
 import { flattenTransactionResult } from '@/features/transactions/utils/flatten-transaction-result'
 import { TransactionType } from 'algosdk'
-import { Arc3MetadataResult, Arc69MetadataResult, AssetMetadataResult, AssetResult } from './types'
+import { Arc3MetadataResult, Arc62MetadataResult, Arc69MetadataResult, AssetMetadataResult, AssetResult } from './types'
 import { getArc19Url, isArc19Url } from '../utils/arc19'
 import { getArc3Url, isArc3Url } from '../utils/arc3'
 import { base64ToUtf8 } from '@/utils/base64-to-utf8'
@@ -14,6 +14,8 @@ import { TransactionResult } from '@/features/transactions/data/types'
 import algosdk from 'algosdk'
 import { uint8ArrayToBase64 } from '@/utils/uint8-array-to-base64'
 import { indexerTransactionToTransactionResult } from '@/features/transactions/mappers/indexer-transaction-mappers'
+import { getArc62AppId } from '../utils/arc62'
+import { createAssetCirculatingSupplyAtom } from './circulating-supply'
 
 // Currently, we support ARC-3, 19 and 69. Their specs can be found here https://github.com/algorandfoundation/ARCs/tree/main/ARCs
 // ARCs are community standard, therefore, there are edge cases
@@ -24,10 +26,12 @@ import { indexerTransactionToTransactionResult } from '@/features/transactions/m
 // - ARC-19 doesn't specify the metadata format but generally people use the ARC-3 format
 const createAssetMetadataResult = async (
   assetResult: AssetResult,
+  get: Getter,
   latestAssetCreateOrReconfigureTransaction?: TransactionResult
 ): Promise<AssetMetadataResult> => {
   let arc69MetadataResult: Arc69MetadataResult | undefined = undefined
   let arc3MetadataResult: Arc3MetadataResult | undefined = undefined
+  let arc62MetadataResult: Arc62MetadataResult | undefined = undefined
 
   // Get ARC-69 metadata if applicable
   if (latestAssetCreateOrReconfigureTransaction && latestAssetCreateOrReconfigureTransaction.note) {
@@ -59,6 +63,17 @@ const createAssetMetadataResult = async (
           metadata_url: gatewayMetadataUrl,
           metadata,
         }
+
+        const arc62AppId = getArc62AppId(arc3MetadataResult)
+
+        if (arc62AppId) {
+          const circulatingSupply = await get(createAssetCirculatingSupplyAtom(arc62AppId, assetResult.index))
+          if (circulatingSupply !== undefined) {
+            arc62MetadataResult = {
+              circulatingSupply,
+            }
+          }
+        }
       } catch (error) {
         if (error instanceof SyntaxError) {
           // If the metadata url points to an image or video, we construct the faux arc3 metadata, so we can still display the image.
@@ -88,10 +103,11 @@ const createAssetMetadataResult = async (
     }
   }
 
-  if (arc3MetadataResult || arc69MetadataResult) {
+  if (arc3MetadataResult || arc69MetadataResult || arc62MetadataResult) {
     return {
       arc3: arc3MetadataResult,
       arc69: arc69MetadataResult,
+      arc62: arc62MetadataResult,
     }
   }
 
@@ -110,7 +126,7 @@ const noteToArc69Metadata = (note: string | undefined) => {
   return undefined
 }
 
-const getAssetMetadataResult = async (_: Getter, __: Setter, assetResult: AssetResult) => {
+const getAssetMetadataResult = async (get: Getter, __: Setter, assetResult: AssetResult) => {
   if (assetResult.index === 0n) {
     return null
   }
@@ -152,7 +168,7 @@ const getAssetMetadataResult = async (_: Getter, __: Setter, assetResult: AssetR
     return null
   }
 
-  return await createAssetMetadataResult(assetResult, assetConfigTransactionResults[0])
+  return await createAssetMetadataResult(assetResult, get, assetConfigTransactionResults[0])
 }
 
 export const [assetMetadataResultsAtom, getAssetMetadataResultAtom] = readOnlyAtomCache(

src/features/assets/data/circulating-supply.ts

@@ -0,0 +1,31 @@
+import algosdk from 'algosdk'
+import { atom } from 'jotai'
+import { getApplicationResultAtom } from '@/features/applications/data'
+import { fundedAccountAtom } from '@/features/accounts/data'
+import { algorandClient } from '@/features/common/data/algo-client'
+
+export const createAssetCirculatingSupplyAtom = (applicationId: bigint, assetId: bigint) => {
+  return atom(async (get) => {
+    const app = await get(getApplicationResultAtom(applicationId))
+    if (!app) return undefined
+
+    const fundedAddress = await get(fundedAccountAtom)
+    if (!fundedAddress) return undefined
+
+    const result = await algorandClient
+      .newGroup()
+      .addAppCallMethodCall({
+        appId: applicationId,
+        method: algosdk.ABIMethod.fromSignature('arc62_get_circulating_supply(uint64)uint64'),
+        args: [assetId],
+        sender: fundedAddress,
+      })
+      .simulate({ skipSignatures: true, allowUnnamedResources: true })
+
+    const returnValue = result?.returns?.[0]?.returnValue
+    if (returnValue == null) return undefined
+    if (typeof returnValue === 'bigint') return returnValue
+    if (typeof returnValue === 'string' || typeof returnValue === 'number') return BigInt(returnValue)
+    return undefined
+  })
+}

src/features/assets/data/types.ts

@@ -30,6 +30,7 @@ export type Arc3MetadataResult = {
     animation_url_mimetype?: string
     properties?: Arc16MetadataProperties
     extra_metadata?: string
+    ['arc-62']?: Arc62MetadataResult
     [key: string]: unknown
   }
 }
@@ -51,7 +52,12 @@ export type Arc69MetadataResult = {
   }
 }
 
+export type Arc62MetadataResult = {
+  circulatingSupply: bigint
+}
+
 export type AssetMetadataResult = {
   arc3?: Arc3MetadataResult
   arc69?: Arc69MetadataResult
+  arc62?: Arc62MetadataResult
 } | null