Merge pull request #14 from codingknite/pull-arweaveid

pull arweaveid

lib/hooks/useArweaveId.tsx

@@ -4,31 +4,23 @@ interface ArweaveIdProps {
   arweaveId: string;
 }
 
-// interface Props {
-//   block: number | undefined | null;
-// }
-
-export function useArweaveId() {
-  // const fetchArweaveId = async() => {
-  //   const response = await fetch(config.googleCloud.nextAPI, {
-  //     method: 'POST',
-  //     body: JSON.stringify({
-  //       blockNumber: block,
-  //     }),
-  //     headers: {
-  //       'Content-Type': 'application/json',
-  //     },
-  //   });
-
-  //   if (response.ok && response.status === 200) {
-  //     const data = (await response.json()) as ArweaveIdProps;
-  //     return data.arweaveId;
-  //   }
-  // };
+interface BlockProps {
+  block: number | undefined | null;
+}
 
+export function useArweaveId({ block }: BlockProps) {
   const fetchArweaveId = async() => {
     const response = await fetch(
       'https://arweaveid-api.vercel.app/api/arweave-id',
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          blockNumber: block,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
     );
 
     if (response.ok && response.status === 200) {
@@ -40,6 +32,7 @@ export function useArweaveId() {
   const { data, error, isLoading } = useQuery({
     queryKey: [ 'getArweaveId' ],
     queryFn: () => fetchArweaveId(),
+    enabled: !block,
   });
 
   return { data, error, isLoading };

package.json

@@ -57,7 +57,7 @@
     "@sentry/react": "7.24.0",
     "@sentry/tracing": "7.24.0",
     "@slise/embed-react": "^2.2.0",
-    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-query-devtools": "^5.4.3",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",

public/icons/name.d.ts

@@ -86,7 +86,8 @@
 	| "moon-with-star"
 	| "moon"
 	| "networks"
-	| "networks/arweave"
+	| "networks/arweave-dark"
+	| "networks/arweave-light"
 	| "networks/icon-placeholder"
 	| "networks/logo-placeholder"
 	| "networks/wvm-icon-2"

ui/block/BlockDetails.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton, useColorMode } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
@@ -45,7 +45,8 @@ interface Props {
 const rollupFeature = config.features.rollup;
 
 const BlockDetails = ({ query }: Props) => {
-  const wvmIconPath = 'networks/arweave';
+  const { colorMode } = useColorMode();
+  const wvmIconPath = colorMode === 'light' ? 'networks/arweave-light' : 'networks/arweave-dark';
   const [ isExpanded, setIsExpanded ] = React.useState(false);
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height_or_hash);
@@ -54,7 +55,15 @@ const BlockDetails = ({ query }: Props) => {
 
   const { data, isPlaceholderData } = query;
 
-  const { data: arweaveId } = useArweaveId();
+  const { data: arweaveId } = useArweaveId({
+    block: data?.height,
+  });
+
+  const truncateArweaveId = (address: string) => {
+    const start = address.slice(0, 30);
+    const end = address.slice(-4);
+    return `${ start }...${ end }`;
+  };
 
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);
@@ -602,14 +611,14 @@ const BlockDetails = ({ query }: Props) => {
             alignSelf="flex-start"
             gap={ 2 }
           >
-            <IconSvg name={ wvmIconPath } display="block" height="8" width="8" borderRadius="full"/>
+            <IconSvg name={ wvmIconPath } display="block" height="4" width="4" marginRight="4px" borderRadius="full"/>
             <Link
               isExternal
               href={ `https://viewblock.io/arweave/tx/${ arweaveId }` }
               rel="noopener noreferrer"
               color="#1AFFB1"
             >
-              <EntityBase.Content text={ arweaveId as string }/>
+              <EntityBase.Content text={ truncateArweaveId(arweaveId) as string }/>
             </Link>
             <CopyToClipboard text={ arweaveId }/>
           </DetailsInfoItem.Value>

ui/tx/details/TxInfo.tsx

@@ -71,7 +71,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
   const wvmIconPath = 'networks/arweave';
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
-  const { data: arweaveId } = useArweaveId();
+  const { data: arweaveId } = useArweaveId({
+    block: data?.block,
+  });
+
+  const truncateArweaveId = (address: string) => {
+    const start = address.slice(0, 30);
+    const end = address.slice(-4);
+    return `${ start }...${ end }`;
+  };
 
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);
@@ -349,14 +357,14 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             Arweave storage proof
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <IconSvg name={ wvmIconPath } display="block" height="8" width="8" borderRadius="full"/>
+            <IconSvg name={ wvmIconPath } display="block" height="4" width="4" borderRadius="full" marginRight="4px"/>
             <Link
               isExternal
               href={ `https://viewblock.io/arweave/tx/${ arweaveId }` }
               rel="noopener noreferrer"
               color="#1AFFB1"
             >
-              <EntityBase.Content text={ arweaveId as string }/>
+              <EntityBase.Content text={ truncateArweaveId(arweaveId) as string }/>
             </Link>
 
             <CopyToClipboard text={ arweaveId }/>

yarn.lock

@@ -5546,10 +5546,10 @@
   dependencies:
     "@typescript-eslint/utils" "^5.54.0"
 
-"@tanstack/query-core@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.25.0.tgz#e08ed0a9fad34c8005d1a282e57280031ac50cdc"
-  integrity sha512-vlobHP64HTuSE68lWF1mEhwSRC5Q7gaT+a/m9S+ItuN+ruSOxe1rFnR9j0ACWQ314BPhBEVKfBQ6mHL0OWfdbQ==
+"@tanstack/query-core@5.51.21":
+  version "5.51.21"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.51.21.tgz#a510469c6c30d3de2a8b8798e340169a4b0fd08f"
+  integrity sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==
 
 "@tanstack/[email protected]":
   version "5.4.2"
@@ -5563,12 +5563,12 @@
   dependencies:
     "@tanstack/query-devtools" "5.4.2"
 
-"@tanstack/react-query@^5.4.3":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.25.0.tgz#f4dac794cf10dd956aa56dbbdf67049a5ba2669d"
-  integrity sha512-u+n5R7mLO7RmeiIonpaCRVXNRWtZEef/aVZ/XGWRPa7trBIvGtzlfo0Ah7ZtnTYfrKEVwnZ/tzRCBcoiqJ/tFw==
+"@tanstack/react-query@^5.51.23":
+  version "5.51.23"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.51.23.tgz#83c223f4cb6054b206de8856b73ca7e41a63ba1f"
+  integrity sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==
   dependencies:
-    "@tanstack/query-core" "5.25.0"
+    "@tanstack/query-core" "5.51.21"
 
 "@testing-library/dom@^9.0.0":
   version "9.3.0"