fix(examples): update examples with records methods, and balance methods

ar-io · Feb 26, 2024 · a2d2a02 · a2d2a02
1 parent dce4a94
commit a2d2a02
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 11 deletions.
diff --git a/examples/node/index.cjs b/examples/node/index.cjs
@@ -1,11 +1,28 @@
-const { ArIO } = require('../../lib/cjs/node/index.js');
+const {
+  ArIO,
+  ARNS_TESTNET_REGISTRY_TX,
+} = require('../../lib/cjs/node/index.js');
 
 (async () => {
   const arIO = new ArIO({});
   // testnet gateways
   const testnetGateways = await arIO.testnet.getGateways();
-  // devnet gateways
-  const devnetGateways = await arIO.devnet.getGateways();
+  const protocolBalance = await arIO.testnet.getBalance({
+    address: ARNS_TESTNET_REGISTRY_TX,
+  });
+  const ardriveRecord = await arIO.testnet.getRecord({ domain: 'ardrive' });
+  const allRecords = await arIO.testnet.getRecords();
 
-  console.dir({ testnetGateways, devnetGateways }, { depth: 2 });
+  console.dir(
+    {
+      testnetGateways,
+      ardriveRecord,
+      protocolBalance,
+      arnsStats: {
+        'registered domains': Object.keys(allRecords).length,
+        ardrive: allRecords.ardrive,
+      },
+    },
+    { depth: 2 },
+  );
 })();
diff --git a/examples/node/index.mjs b/examples/node/index.mjs
@@ -1,11 +1,25 @@
-import { ArIO } from '../../lib/esm/node/index.js';
+import { ARNS_TESTNET_REGISTRY_TX, ArIO } from '../../lib/esm/node/index.js';
 
 (async () => {
   const arIO = new ArIO({});
   // testnet gateways
   const testnetGateways = await arIO.testnet.getGateways();
-  // devnet gateways
-  const devnetGateways = await arIO.devnet.getGateways();
+  const protocolBalance = await arIO.testnet.getBalance({
+    address: ARNS_TESTNET_REGISTRY_TX,
+  });
+  const ardriveRecord = await arIO.testnet.getRecord({ domain: 'ardrive' });
+  const allRecords = await arIO.testnet.getRecords();
 
-  console.dir({ testnetGateways, devnetGateways }, { depth: 2 });
+  console.dir(
+    {
+      testnetGateways,
+      ardriveRecord,
+      protocolBalance,
+      arnsStats: {
+        'registered domains': Object.keys(allRecords).length,
+        ardrive: allRecords.ardrive,
+      },
+    },
+    { depth: 2 },
+  );
 })();
diff --git a/examples/web/index.html b/examples/web/index.html
@@ -22,11 +22,13 @@
       };
     </script>
   </head>
-  <body class="bg-background flex flex-col items-center p-10">
+  <body class="bg-background flex flex-col items-center p-10 gap-10">
+    <!-- gateways -->
     <div
       class="bg-surface flex flex-col gap-5 items-end justify-center p-5 rounded-md h-full"
-      style="width: 750px"
+      style="width: 750px; height: 500px"
     >
+      <h1 class="text-textPrimary w-full font-bold">Browse Gateways</h1>
       <div class="h-full w-full" style="overflow-y: scroll">
         <table class="w-full bg-background text-textPrimary">
           <thead>
@@ -49,6 +51,94 @@
         Fetch Gateways
       </button>
     </div>
+    <!-- balance -->
+    <div
+      class="bg-surface flex flex-col gap-5 items-end justify-center p-5 rounded-md"
+      style="width: 750px"
+    >
+      <h1 class="w-full text-textPrimary font-bold">Get Balance</h1>
+      <form id="balance-form" class="w-full">
+        <div class="flex flex-col">
+          <label for="arweave-id" class="text-textPrimary"
+            >Arweave Address:</label
+          >
+          <input
+            type="text"
+            id="arweave-id"
+            name="arweave-id"
+            class="border border-surface px-4 py-2 rounded-md w-full"
+            placeholder="Enter a wallet address to see IO balance!"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="bg-primary text-textPrimary p-2 rounded-md w-full text-surface hover:shadow-xl mt-2"
+          style="color: black"
+        >
+          Get Balance
+        </button>
+      </form>
+      <div id="balance-result" class="text-textPrimary mt-2">Balance: 0 IO</div>
+    </div>
+    <!-- record -->
+    <div
+      class="bg-surface flex flex-col gap-5 items-end justify-center p-5 rounded-md"
+      style="width: 750px"
+    >
+      <h1 class="w-full text-textPrimary font-bold">Get Record</h1>
+      <form id="record-form" class="w-full">
+        <div class="flex flex-col">
+          <label for="record-input" class="text-textPrimary"
+            >ArNS Domain:</label
+          >
+          <input
+            type="text"
+            id="record-input"
+            name="record-input"
+            class="border border-surface px-4 py-2 rounded-md w-full"
+            placeholder="Enter an ArNS name to see the domain data!"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="bg-primary text-textPrimary p-2 rounded-md w-full text-surface hover:shadow-xl mt-2"
+          style="color: black"
+        >
+          Get record
+        </button>
+      </form>
+      <div id="record-result" class="text-textPrimary mt-2"></div>
+    </div>
+    <!-- get all records -->
+    <div
+      class="bg-surface flex flex-col gap-5 items-end justify-center p-5 rounded-md h-full"
+      style="width: 750px; height: 500px"
+    >
+      <h1 class="text-textPrimary w-full font-bold">Browse Records</h1>
+      <div class="h-full w-full" style="overflow-y: scroll">
+        <table class="w-full bg-background text-textPrimary">
+          <thead>
+            <tr>
+              <th class="px-4 py-2">Domain</th>
+              <th class="px-4 py-2">ANT</th>
+              <th class="px-4 py-2">Purchase type</th>
+            </tr>
+          </thead>
+          <tbody id="records-table-body">
+            <!-- Add more rows as needed -->
+          </tbody>
+        </table>
+      </div>
+      <button
+        id="fetch-records-button"
+        class="animate-bounce bg-primary text-textPrimary p-2 rounded-md w-full text-surface hover:shadow-xl"
+        style="color: black"
+      >
+        Fetch records
+      </button>
+    </div>
     <script type="module">
       import { ArIO } from './web.bundle.min.js';
 
@@ -68,7 +158,7 @@
           .map(([gatewayOwner, gateway]) => {
             return `
               <tr>
-                <td class="border border-surface px-4 py-2 text-primary"><a href="https://${gateway.settings.fqdn}" target="_blank">${gateway.settings.fqdn}</a></td>
+                <td class="border border-surface px-4 py-2 text-primary" style="width: fit-content"><a href="https://${gateway.settings.fqdn}" target="_blank">${gateway.settings.fqdn}</a></td>
                 <td class="border border-surface px-4 py-2 text-primary"><a href="https://arscan.io/address/${gatewayOwner}" target="_blank">${gatewayOwner}</a></td>
                 <td class="border border-surface px-4 py-2">${gateway.operatorStake} IO</td>
               </tr>
@@ -83,6 +173,57 @@
       fetchGatewaysButton.addEventListener('click', () => {
         setGateways();
       });
+
+      const balanceForm = document.getElementById('balance-form');
+      const balanceResult = document.getElementById('balance-result');
+
+      balanceForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        balanceResult.textContent = `Loading...`;
+        const arweaveId = document.getElementById('arweave-id').value;
+        const balance = await arIO.getBalance({ address: arweaveId });
+        balanceResult.textContent = `Balance: ${balance} IO`;
+      });
+
+      const recordForm = document.getElementById('record-form');
+      const recordResult = document.getElementById('record-result');
+
+      recordForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        recordResult.textContent = `Loading...`;
+        const domain = document.getElementById('record-input').value;
+        const record = await arIO.getRecord({ domain });
+        recordResult.textContent = JSON.stringify(record, null, 2);
+      });
+
+      async function setRecords() {
+        const tableBody = document.getElementById('records-table-body');
+        tableBody.innerHTML = `
+              <tr>
+                <td class="border border-surface px-4 py-2">Loading...</td>
+              </tr>
+            `;
+        const records = await arIO.getRecords();
+
+        tableBody.innerHTML = Object.entries(records)
+          .map(([domain, record]) => {
+            return `
+              <tr>
+                <td class="border border-surface px-4 py-2 text-primary"><a href="https://${domain}.arweave.dev" target="_blank">${domain}</a></td>
+                <td class="border border-surface px-4 py-2 text-primary"><a href="https://arscan.io/tx/${record.contractTxId}" target="_blank">${record.contractTxId}</a></td>
+                <td class="border border-surface px-4 py-2">${record.endTimestamp ? 'Lease' : 'Permanent'}</td>
+              </tr>
+            `;
+          })
+          .join('');
+      }
+
+      const fetchRecordsButton = document.getElementById(
+        'fetch-records-button',
+      );
+      fetchRecordsButton.addEventListener('click', () => {
+        setRecords();
+      });
     </script>
   </body>
 </html>