Merge pull request #30 from codingknite/fix-linked-arweave-addr

fix linked arweave address
weaveVM · Oct 11, 2024 · 53497ec · 53497ec
2 parents 2372efa + 95b3428
commit 53497ec
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 69 deletions.
diff --git a/lib/hooks/useArweaveAddress.tsx b/lib/hooks/useArweaveAddress.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+import { useLambdaState } from './useLambdaState';
+
+interface Props {
+  addressHash: string;
+}
+
+const useArweaveAddress = ({ addressHash }: Props) => {
+  const { data, isLoading } = useLambdaState(addressHash);
+  const [ arweaveAddress, setArweaveAddress ] = useState<string | null>(null);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const searchArksByKey = (state: any, ethereumAddress: string) => {
+    if (!ethereumAddress || !state) {
+      return null;
+    }
+
+    if (state?.ark) {
+      return {
+        ethereumAddress: ethereumAddress.toLowerCase(),
+        arweaveLinkings: state.ark[0].arweave_address,
+        callTXID: state.ark[0].call_txid,
+      };
+    } else {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    const fetchArweaveAddress = async() => {
+      if (addressHash && data) {
+        const result = searchArksByKey(data, addressHash);
+        setArweaveAddress(result ? result.arweaveLinkings : null);
+      }
+    };
+
+    fetchArweaveAddress();
+  }, [ addressHash, data ]);
+
+  return { arweaveAddress, isLoading };
+};
+
+export default useArweaveAddress;
diff --git a/lib/hooks/useLambdaState.tsx b/lib/hooks/useLambdaState.tsx
@@ -2,10 +2,13 @@ import { useQuery } from '@tanstack/react-query';
 
 export function useLambdaState(addressHash: string) {
   const { data, error, isLoading } = useQuery({
-    queryKey: ['lambda-state', addressHash],
-    queryFn: async () => {
-      if (!addressHash) return null;
-      const response = await fetch(`https://ark-lambda-api.vercel.app/api/ark-lambda/eth-info?hash=${addressHash.toLowerCase()}`)
+    queryKey: [ 'lambda-state', addressHash ],
+    queryFn: async() => {
+      if (!addressHash) {
+        return null;
+      }
+
+      const response = await fetch(`https://ark-lambda-api.vercel.app/api/ark-lambda/eth-info?hash=${ addressHash.toLowerCase() }`);
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }

diff --git a/ui/address/AddressArweaveAddress.tsx b/ui/address/AddressArweaveAddress.tsx
diff --git a/ui/address/AddressDetails.tsx b/ui/address/AddressDetails.tsx
@@ -1,9 +1,10 @@
-import { Box, Text, Grid } from '@chakra-ui/react';
+import { Box, Text, Grid, Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useArweaveAddress from 'lib/hooks/useArweaveAddress';
 import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
@@ -13,6 +14,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import * as EntityBase from 'ui/shared/entities/base/components';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 
@@ -23,7 +25,6 @@ import AddressNetWorth from './details/AddressNetWorth';
 import TokenSelect from './tokenSelect/TokenSelect';
 import useAddressCountersQuery from './utils/useAddressCountersQuery';
 import type { AddressQuery } from './utils/useAddressQuery';
-import AddressArweaveAddress from './AddressArweaveAddress';
 
 interface Props {
   addressQuery: AddressQuery;
@@ -32,9 +33,10 @@ interface Props {
 
 const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
   const router = useRouter();
-
   const addressHash = getQueryParamString(router.query.hash);
 
+  const { arweaveAddress, isLoading: loadingArweaveAddress } = useArweaveAddress({ addressHash });
+
   const countersQuery = useAddressCountersQuery({
     hash: addressHash,
     addressQuery,
@@ -168,15 +170,38 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
           ) :
             0 }
         </DetailsInfoItem.Value>
-        <DetailsInfoItem.Label
-          hint="Visit arkprotocol.xyz to link your arweave address with your Ethereum wallet!"
-          isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-        >
-          Linked Arweave Address
-        </DetailsInfoItem.Label>
-        <DetailsInfoItem.Value>
-          <AddressArweaveAddress {...{ addressHash }} />
-        </DetailsInfoItem.Value>
+
+        { loadingArweaveAddress && (
+          <>
+            <DetailsInfoItem.Label>
+              <Skeleton isLoaded={ !loadingArweaveAddress }>
+                loading
+              </Skeleton>
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <Skeleton isLoaded={ !loadingArweaveAddress }>
+                loading
+              </Skeleton>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { arweaveAddress && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Visit arkprotocol.xyz to link your arweave address with your Ethereum wallet!"
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              Linked Arweave Address
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <EntityBase.Link href={ `https://viewblock.io/arweave/address/${ arweaveAddress }` }>
+                { arweaveAddress }
+              </EntityBase.Link>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
         { data.has_token_transfers && (
           <>
             <DetailsInfoItem.Label