Transaction receipt

packages/nextjs/components/blockexplorer/TransactionHash.tsx → packages/nextjs/components/TransactionHash.tsx

@@ -1,14 +1,19 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import Link from "next/link";
+import { ExternalLinkIcon } from "@dynamic-labs/sdk-react-core";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { getBlockExplorerTxLink } from "~~/utils/scaffold-eth";
 
 export const TransactionHash = ({ hash }: { hash: string }) => {
   const [addressCopied, setAddressCopied] = useState(false);
 
+  const txExplorerLink = useMemo(() => getBlockExplorerTxLink(hash), [hash]);
+
   return (
     <div className="flex items-center">
-      <Link href={`/blockexplorer/transaction/${hash}`}>
+      <Link href={txExplorerLink} target="_blank" className="flex flex-row items-center gap-2">
+        <ExternalLinkIcon></ExternalLinkIcon>
         {hash?.substring(0, 6)}...{hash?.substring(hash.length - 4)}
       </Link>
       {addressCopied ? (

packages/nextjs/components/assets/BitcoinIcon.tsx

@@ -0,0 +1,14 @@
+export const BitcoinIcon = ({ width }: { width: number }) => (
+  <svg
+    width={width}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox={`0 0 ${width} ${width}`}
+    fill="white"
+    id="bitcoin"
+  >
+    <path
+      fill="white"
+      d="M19,9a4,4,0,0,0-4-4V3a1,1,0,0,0-2,0V5H11V3A1,1,0,0,0,9,3V5H6A1,1,0,0,0,6,7H7V17H6a1,1,0,0,0,0,2H9v2a1,1,0,0,0,2,0V19h2v2a1,1,0,0,0,2,0V19a4,4,0,0,0,2.62-7A4,4,0,0,0,19,9Zm-4,8H9V13h6a2,2,0,0,1,0,4Zm0-6H9V7h6a2,2,0,0,1,0,4Z"
+    ></path>
+  </svg>
+);

packages/nextjs/components/blockexplorer/TransactionsTable.tsx

@@ -1,5 +1,5 @@
 import { formatEther } from "viem";
-import { TransactionHash } from "~~/components/blockexplorer/TransactionHash";
+import { TransactionHash } from "~~/components/TransactionHash";
 import { Address } from "~~/components/scaffold-eth";
 import { TransactionWithFunction, getTargetNetwork } from "~~/utils/scaffold-eth";
 import { TransactionsTableProps } from "~~/utils/scaffold-eth/";

packages/nextjs/components/blockexplorer/index.tsx

@@ -3,5 +3,5 @@ export * from "./AddressCodeTab";
 export * from "./AddressStorageTab";
 export * from "./PaginationButton";
 export * from "./SearchBar";
-export * from "./TransactionHash";
+export * from "../TransactionHash";
 export * from "./TransactionsTable";

packages/nextjs/components/inputs/FileUploaderInput.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
-import { DownloadLogo } from "../assets/DownloadLogo";
+import { DownloadLogo } from "../assets/Downloadicon";
 import useHttpClient from "~~/hooks/useHttpClient";
 import { IpfsFileModel } from "~~/models/ipfs-file.model";
 import { LightChangeEvent } from "~~/models/light-change-event";
@@ -35,7 +35,9 @@ export const FileUploaderInput = <TParent,>({
   const { id } = query as { id: string };
 
   useEffect(() => {
-    if (value) {
+    if (!value) {
+      setFiles([]);
+    } else {
       if (Array.isArray(value)) {
         setFiles(value);
       } else {

packages/nextjs/components/scaffold-eth/Address.tsx

@@ -29,8 +29,8 @@ const blockieSizeMap = {
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
 export const Address = ({ address, disableAddressLink, format, size = "base" }: TAddressProps) => {
-  const [ens, setEns] = useState<string | null>();
-  const [ensAvatar, setEnsAvatar] = useState<string | null>();
+  const [ens, setEns] = useState<string | undefined>();
+  const [ensAvatar, setEnsAvatar] = useState<string | undefined>();
   const [addressCopied, setAddressCopied] = useState(false);
 
   const { data: fetchedEns } = useEnsName({
@@ -47,11 +47,11 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
 
   // We need to apply this pattern to avoid Hydration errors.
   useEffect(() => {
-    setEns(fetchedEns);
+    setEns(fetchedEns ?? undefined);
   }, [fetchedEns]);
 
   useEffect(() => {
-    setEnsAvatar(fetchedEnsAvatar);
+    setEnsAvatar(fetchedEnsAvatar ?? undefined);
   }, [fetchedEnsAvatar]);
 
   // Skeleton UI
@@ -70,7 +70,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
     return <span className="text-error">Wrong address</span>;
   }
 
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(getTargetNetwork(), address);
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(address);
   let displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4);
 
   if (ens) {

packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx

@@ -1,8 +1,14 @@
-import { AvatarComponent } from "@rainbow-me/rainbowkit";
 import { blo } from "blo";
+import { Address } from "viem";
+
+interface Props {
+  address: Address;
+  ensImage?: string;
+  size: number;
+}
 
 // Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+export const BlockieAvatar = ({ address, ensImage, size }: Props) => (
   // Don't want to use nextJS Image here (and adding remote patterns for the URL)
   // eslint-disable-next-line @next/next/no-img-element
   <img