fix aci import, introduce more interactions

development/ui/.env.development

@@ -1,4 +1,5 @@
 VUE_APP_NETWORK_ID=ae_uat
 VUE_APP_NETWORK_NAME=testnet
 VUE_APP_NODE_URL=https://testnet.aeternity.io
+VUE_APP_AESCAN_URL=https://testnet.aescan.io
 VUE_APP_CONTRACT_ID=ct_2Jc4iTsMWouenbuPQLZT4f8bPLHH4PJuPvVRQMZ1LECyhCzucB

development/ui/.env.production

@@ -1,5 +1,6 @@
 VUE_APP_NETWORK_ID=ae_mainnet
 VUE_APP_NETWORK_NAME=mainnet
 VUE_APP_NODE_URL=https://mainnet.aeternity.io
+VUE_APP_AESCAN_URL=https://mainnet.aescan.io
 # not deployed yet
 VUE_APP_CONTRACT_ID=

development/ui/src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="container">
-        <img alt="Aeternity" src="./assets/logo.svg" style="width: 250px" />
+        <img alt="Aeternity" src="./assets/logo.svg" style="width: 100px" />
         <h1>AENS Wrapping into AEX-141 NFTs</h1>
         <div id="nav">
             <router-link to="/">Home</router-link> |

development/ui/src/utils/aeternity/aeternity.js

@@ -16,6 +16,7 @@ export const state = reactive({
   balance: null,
   status: 'connecting',
   networkId: process.env.VUE_APP_NETWORK_ID,
+  aeScanUrl: process.env.VUE_APP_AESCAN_URL,
   contractId: 'not initialized yet',
   contract: null
 })
@@ -114,7 +115,7 @@ const connectToNode = async (selectedNetworkId) => {
 
 const initContract = async () => {
   const { aeSdk, contract, contractId } = toRefs(state)
-  const aci = await import('../../../../smart-contracts/generated_artifacts/aci.json');
+  const { default: aci } = await import('../../../../smart-contracts/generated_artifacts/aci.json');
   contract.value = await aeSdk.value.initializeContract({ aci, address: process.env.VUE_APP_CONTRACT_ID })
   contractId.value = contract.value.$options.address
 }

development/ui/src/views/ContractInteractionView.vue

@@ -3,15 +3,106 @@
         <h2>Contract Interaction</h2>
         <div class="details">
             <span>
-              <strong>Contract ID:</strong>
-              {{ state.contractId }}
+              <strong>Contract ID: </strong>
+              <a :href="`${state.aeScanUrl}/contracts/${state.contractId}`"
+                target="_blank"
+                rel="noreferrer">
+                {{ state.contractId }}
+              </a>
             </span>
             <br /><br />
             <span>
-              <strong>Total Supply:</strong>
+              <strong>Connected Address: </strong>
+              <a :href="`${state.aeScanUrl}/accounts/${state.aeSdk.address}`"
+                target="_blank"
+                rel="noreferrer">
+                {{ state.aeSdk.address }}
+              </a>
+            </span>
+            <br /><br />
+            <span>
+              <strong>Meta Info: </strong>
+              {{ metaInfo }}
+              <button @click="getMetaInfo()">
+                meta_info
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>AEX-141 extensions: </strong>
+              {{ aex141Extensions }}
+              <button @click="getAex141Extensions()">
+                aex141_extensions
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>Total NFT Supply: </strong>
               {{ totalSupply }}
               <button @click="getTotalSupply()">
-                call total_supply
+                total_supply
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>Owned NFT IDs: </strong>
+              {{ ownedNfts }}
+              <button @click="getOwnedNfts()">
+                get_owned_tokens
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>NFT ID: </strong>
+              <input v-model="nftId" placeholder="nftId" @input="resetNftIdResults()" />
+            </span>
+            <br /><br />
+            <span>
+              <strong>NFT metadata for ID '{{ nftId }}': </strong>
+              {{ nftMetadata }}
+              <button @click="getNftMetadata(nftId)">
+                metadata
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>NFT data for ID '{{ nftId }}': </strong>
+              {{ nftData }}
+              <button @click="getNftData(nftId)">
+                get_nft_data
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>Owner of NFT with ID '{{ nftId }}': </strong>
+              <a v-if="nftOwner.startsWith('ak_')" :href="`${state.aeScanUrl}/accounts/${nftOwner}`"
+                target="_blank"
+                rel="noreferrer">
+                {{ nftOwner }}
+              </a>
+              <p v-else>{{ nftOwner }}</p>
+              <button @click="getNftOwner(nftId)">
+                owner
+              </button>
+            </span>
+            <br /><br />
+            <span>
+              <strong>AENS name: </strong>
+              <input v-model="aensName" placeholder="AENS name (e.g. abc.chain)" @input="resetAensNameResults()" />
+            </span>
+            <br /><br />
+            <span>
+              <strong>Owner & NFT ID of name '{{ aensName }}': </strong>
+              <p v-if="Array.isArray(aensOwnerNftId)">
+                <a :href="`${state.aeScanUrl}/accounts/${aensOwnerNftId[1]}`"
+                  target="_blank"
+                  rel="noreferrer">
+                  {{ aensOwnerNftId[1] }}
+                </a> (ID: {{ aensOwnerNftId[0] }})
+              </p>
+              <p v-else>{{ aensOwnerNftId }}</p>
+              <button @click="getOwnerAndNftId(aensName)">
+                resolve_nft_id_and_owner
               </button>
             </span>
         </div>
@@ -22,30 +113,139 @@
   import { ref } from 'vue'
   import { state } from '../utils/aeternity/aeternity'
 
-  // const toString = (value) => (
-  //   typeof value === 'string'
-  //     ? value
-  //     : JSON.stringify(value, (k, v) => (typeof v === 'bigint' ? `${v} (as BigInt)` : v), 2)
-  // )
+  const toString = (value) => (
+    typeof value === 'string'
+      ? value
+      : JSON.stringify(value, (k, v) => (typeof v === 'bigint' ? `${v}` : v), 2)
+  )
+
+  let nftId = ref()
+  let aensName = ref()
 
+  let metaInfo = ref()
+  let aex141Extensions = ref()
   let totalSupply = ref()
+  let ownedNfts = ref()
+  let nftOwner = ref('')
+  let nftMetadata = ref()
+  let nftData = ref()
+  let aensOwnerNftId = ref('')
+
+  async function resetNftIdResults() {
+    nftOwner.value = ''
+    nftMetadata.value = undefined
+    nftData.value = undefined
+  }
+
+  async function resetAensNameResults() {
+    aensOwnerNftId.value = undefined
+  }
+
+  async function getMetaInfo() {
+    metaInfo.value = 'loading...'
+    try {
+      metaInfo.value = toString((await state.contract.meta_info()).decodedResult)
+    } catch (error) {
+      metaInfo.value = 'error loading'
+      throw error
+    }
+  }
+
+  async function getAex141Extensions() {
+    aex141Extensions.value = 'loading...'
+    try {
+      aex141Extensions.value = toString((await state.contract.aex141_extensions()).decodedResult)
+    } catch (error) {
+      aex141Extensions.value = 'error loading'
+      throw error
+    }
+  }
 
   async function getTotalSupply() {
-    totalSupply.value = '???'
+    totalSupply.value = 'loading...'
     try {
-      console.log(state.contract)
-      console.log(await state.contract.total_supply())
+      totalSupply.value = (await state.contract.total_supply()).decodedResult
     } catch (error) {
       totalSupply.value = 'error loading'
       throw error
     }
   }
+
+  async function getOwnedNfts() {
+    ownedNfts.value = 'loading...'
+    try {
+      ownedNfts.value = (await state.contract.get_owned_tokens(state.aeSdk.address)).decodedResult
+    } catch (error) {
+      ownedNfts.value = 'error loading'
+      throw error
+    }
+  }
+
+  async function getNftOwner(nftId) {
+    if(!nftId) {
+      nftOwner.value = 'input for nftId missing'
+      return
+    }
+    nftOwner.value = 'loading...'
+    try {
+      const owner = (await state.contract.owner(nftId)).decodedResult
+      nftOwner.value = owner ? owner : 'nft does not exist'
+    } catch (error) {
+      nftOwner.value = 'error loading'
+      throw error
+    }
+  }
+
+  async function getNftMetadata(nftId) {
+    if(!nftId) {
+      nftMetadata.value = 'input for nftId missing'
+      return
+    }
+    nftMetadata.value = 'loading...'
+    try {
+      const metadata = (await state.contract.metadata(nftId)).decodedResult
+      nftMetadata.value = metadata ? metadata : 'nft does not exist'
+    } catch (error) {
+      nftMetadata.value = 'error loading'
+      throw error
+    }
+  }
+
+  async function getNftData(nftId) {
+    if(!nftId) {
+      nftData.value = 'input for nftId missing'
+      return
+    }
+    nftData.value = 'loading...'
+    try {
+      const data = (await state.contract.get_nft_data(nftId)).decodedResult
+      nftData.value = data ? toString(data) : 'nft does not exist'
+    } catch (error) {
+      nftData.value = 'error loading'
+      throw error
+    }
+  }
+
+  async function getOwnerAndNftId(aensName) {
+    if(!aensName) {
+      aensOwnerNftId.value = 'input for aensName missing'
+      return
+    }
+    aensOwnerNftId.value = 'loading...'
+    try {
+      const result = (await state.contract.resolve_nft_id_and_owner(aensName)).decodedResult
+      aensOwnerNftId.value = result ? result : 'AENS name not wrapped'
+    } catch (error) {
+      aensOwnerNftId.value = 'error loading'
+      throw error
+    }
+  }
 </script>
 
 <style scoped>
   .contract .details {
     margin: 0 auto;
-    max-width: 620px;
+    max-width: 720px;
 
     border: 2px solid #de3f6b;
     border-radius: 15px;