Algorand-Developer-Retreat · tasosbit · Apr 4, 2025 · Apr 3, 2025 · Apr 3, 2025 · Apr 3, 2025
diff --git a/projects/asset_labeling-frontend/.env.template b/projects/asset_labeling-frontend/.env.template
@@ -1,3 +1,5 @@
+VITE_APP_ID=24n
+
 # ======================
 # LocalNet configuration
 # uncomment below to use

diff --git a/projects/asset_labeling-frontend/package-lock.json b/projects/asset_labeling-frontend/package-lock.json
diff --git a/projects/asset_labeling-frontend/package.json b/projects/asset_labeling-frontend/package.json
@@ -12,45 +12,41 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^5.0.0",
+    "@playwright/test": "^1.35.0",
+    "@types/jest": "29.5.2",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "postcss": "^8.4.24",
-    "tailwindcss": "3.3.2",
+    "playwright": "^1.35.0",
     "ts-jest": "^29.1.1",
-    "@types/jest": "29.5.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "@playwright/test": "^1.35.0",
-    "playwright": "^1.35.0",
     "vite": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^9.0.0",
-    "@blockshake/defly-connect": "^1.2.1",
-    "@perawallet/connect": "^1.4.1",
-    "@txnlab/use-wallet": "^4.0.0",
-    "@txnlab/use-wallet-react": "^4.0.0",
-    "algosdk": "^3.0.0",
-    "daisyui": "^4.0.0",
-    "notistack": "^3.0.1",
+    "@algorandfoundation/algokit-utils": "^7.1.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/material": "^7.0.1",
+    "@mui/x-data-grid": "^7.28.3",
+    "abel-sdk": "^0.0.2",
+    "algosdk": "^2.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tslib": "^2.6.2"
   },
   "scripts": {
-    "generate:app-clients": "algokit project link --all",
-    "dev": "npm run generate:app-clients && vite",
-    "build": "npm run generate:app-clients && tsc && vite build",
+    "dev": "vite",
+    "build": "vite build",
     "test": "jest --coverage --passWithNoTests",
     "playwright:test": "playwright test",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

diff --git a/projects/asset_labeling-frontend/postcss.config.cjs b/projects/asset_labeling-frontend/postcss.config.cjs
diff --git a/projects/asset_labeling-frontend/public/index.html b/projects/asset_labeling-frontend/public/index.html
@@ -18,7 +18,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Abel | Beta</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/projects/asset_labeling-frontend/src/App.tsx b/projects/asset_labeling-frontend/src/App.tsx
diff --git a/projects/asset_labeling-frontend/src/Assets.tsx b/projects/asset_labeling-frontend/src/Assets.tsx
@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react'
+import { AlgorandClient } from '@algorandfoundation/algokit-utils'
+import { AbelSDK } from 'abel-sdk'
+import { getAlgodConfigFromViteEnvironment } from './config'
+import { DataGrid, GridColDef } from '@mui/x-data-grid'
+import Typography from '@mui/material/Typography'
+import { AssetSmall } from 'abel-sdk/dist/generated/abel-contract-client'
+import Alert from '@mui/material/Alert'
+import ErrorIcon from '@mui/icons-material/Error'
+import InfoIcon from '@mui/icons-material/Info'
+import { Container } from '@mui/material'
+
+const DEFAULT_APP_ID = 2888048711n
+const PAGE_SIZE = 100
+
+type IdProps = {
+  id: bigint | null // The App ID for the AbelSDK
+}
+const AssetTable: React.FC<IdProps> = ({ id: appId }) => {
+  const [abelSdk] = useState(
+    () =>
+      new AbelSDK({
+        algorand: AlgorandClient.fromConfig({ algodConfig: getAlgodConfigFromViteEnvironment() }),
+        appId: appId || DEFAULT_APP_ID,
+      }),
+  )
+  const [assets, setAssets] = useState<bigint[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [assetRows, setAssetRows] = useState<(AssetSmall & { id: bigint })[]>([])
+  const [paginationModel, setPaginationModel] = React.useState({
+    pageSize: PAGE_SIZE,
+    page: 0,
+  })
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: 'ID',
+      width: 100,
+      valueGetter: (v: bigint) => v.toString(),
+    },
+    { field: 'unitName', headerName: 'UNIT', minWidth: 100 },
+    { field: 'name', headerName: 'Name', minWidth: 300 },
+    { field: 'decimals', headerName: 'Decimals', minWidth: 80, valueGetter: (v: bigint) => v.toString() },
+    { field: 'total', headerName: 'Total', minWidth: 200 },
+    { field: 'hasClawback', headerName: 'CB - Clawback', minWidth: 55, type: 'boolean' },
+    { field: 'hasFreeze', headerName: 'FR - Freeze', minWidth: 55, type: 'boolean' },
+    { field: 'labels', headerName: 'Labels', minWidth: 150, type: 'custom', valueGetter: (v: string[]) => v.join(', ') },
+  ]
+
+  useEffect(() => {
+    if (!appId || !assets.length) return
+    async function fetchDetails() {
+      const start = paginationModel.page * paginationModel.pageSize
+      const end = start + paginationModel.pageSize
+      try {
+        setAssetRows(Array.from(await abelSdk.getAssetsSmall(assets.slice(start, end))).map((kv) => kv[1]))
+      } catch (err) {
+        setError('Failed to fetch assets details. Please try again later.')
+      }
+    }
+    fetchDetails()
+  }, [appId, assets, paginationModel])
+
+  // Fetch Assets
+  useEffect(() => {
+    if (!appId) return
+    const fetchAssets = async () => {
+      try {
+        setLoading(true)
+        setAssets(await abelSdk.getAllAssetIDs())
+      } catch (err) {
+        setError('Failed to fetch assets. Please try again later.')
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchAssets()
+  }, [appId, paginationModel])
+  if (!appId)
+    return (
+      <div>
+        <Typography variant="h3">Asset List</Typography>
+        <Alert icon={<InfoIcon fontSize="inherit" />} severity="warning">
+          Please enter an App ID to view assets.
+        </Alert>
+      </div>
+    )
+  return (
+    <Container>
+      <Typography variant="h3">Asset List</Typography>
+      {loading ? (
+        <Alert icon={<InfoIcon fontSize="inherit" />} severity="warning">
+          Loading assets...
+        </Alert>
+      ) : error ? (
+        <Alert icon={<ErrorIcon fontSize="inherit" />} severity="error">
+          {error}
+        </Alert>
+      ) : assets.length > 0 ? (
+        <>
+          <Alert icon={<InfoIcon fontSize="inherit" />} severity="info">
+            {`Showing ${assets.length} assets`}
+          </Alert>
+          <DataGrid
+            paginationMode="server"
+            rowCount={assets.length}
+            paginationModel={paginationModel}
+            onPaginationModelChange={setPaginationModel}
+            pageSizeOptions={[PAGE_SIZE]}
+            rows={assetRows}
+            columns={columns}
+          />
+        </>
+      ) : (
+        <Alert icon={<ErrorIcon fontSize="inherit" />} severity="error">
+          "No Assets Found
+        </Alert>
+      )}
+    </Container>
+  )
+}
+
+export default AssetTable
diff --git a/projects/asset_labeling-frontend/src/Home.tsx b/projects/asset_labeling-frontend/src/Home.tsx
diff --git a/projects/asset_labeling-frontend/src/components/Account.tsx b/projects/asset_labeling-frontend/src/components/Account.tsx