Stargaze Names support for Whitelist Execute Tab - Add/Remove member

components/forms/AddressList.tsx

@@ -1,7 +1,12 @@
+import { toUtf8 } from '@cosmjs/encoding'
 import { FormControl } from 'components/FormControl'
 import { AddressInput } from 'components/forms/FormInput'
+import { useWallet } from 'contexts/wallet'
 import { useEffect, useId, useMemo } from 'react'
+import toast from 'react-hot-toast'
 import { FaMinus, FaPlus } from 'react-icons/fa'
+import { SG721_NAME_ADDRESS } from 'utils/constants'
+import { isValidAddress } from 'utils/isValidAddress'
 
 import { useInputState } from './FormInput.hooks'
 
@@ -46,6 +51,7 @@ export interface AddressProps {
 }
 
 export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps) {
+  const wallet = useWallet()
   const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
 
   const htmlId = useId()
@@ -56,10 +62,40 @@ export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps)
     title: ``,
   })
 
+  const resolveAddress = async (name: string) => {
+    if (!wallet.client) throw new Error('Wallet not connected')
+    await wallet.client
+      .queryContractRaw(
+        SG721_NAME_ADDRESS,
+        toUtf8(
+          Buffer.from(
+            `0006${Buffer.from('tokens').toString('hex')}${Buffer.from(name).toString('hex')}`,
+            'hex',
+          ).toString(),
+        ),
+      )
+      .then((res) => {
+        const tokenUri = JSON.parse(new TextDecoder().decode(res as Uint8Array)).token_uri
+        if (tokenUri && isValidAddress(tokenUri)) onChange(id, { address: tokenUri })
+        else {
+          toast.error(`Resolved address is empty or invalid for the name: ${name}.stars`)
+          onChange(id, { address: '' })
+        }
+      })
+      .catch((err) => {
+        toast.error(`Error resolving address for the name: ${name}.stars`)
+        console.error(err)
+        onChange(id, { address: '' })
+      })
+  }
   useEffect(() => {
-    onChange(id, {
-      address: addressState.value,
-    })
+    if (addressState.value.endsWith('.stars')) {
+      void resolveAddress(addressState.value.split('.')[0])
+    } else {
+      onChange(id, {
+        address: addressState.value,
+      })
+    }
   }, [addressState.value, id])
 
   return (
@@ -67,7 +103,7 @@ export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps)
       <AddressInput {...addressState} />
       <div className="flex justify-end items-end pb-2 w-8">
         <button
-          className="flex justify-center items-center p-2 bg-plumbus-80 hover:bg-plumbus-60 rounded-full"
+          className="flex justify-center items-center p-2 bg-stargaze-80 hover:bg-plumbus-60 rounded-full"
           onClick={() => (isLast ? onAdd() : onRemove(id))}
           type="button"
         >