update UI

Author: MananTank

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -24,6 +24,7 @@ export function WalletAddress(props: {
   iconClassName?: string;
   client: ThirdwebClient;
   preventOpenOnFocus?: boolean;
+  fallbackIcon?: React.ReactNode;
 }) {
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
@@ -86,6 +87,7 @@ export function WalletAddress(props: {
               iconClassName={props.iconClassName}
               profiles={profiles.data || []}
               thirdwebClient={props.client}
+              fallbackIcon={props.fallbackIcon}
             />
           )}
           <span className="cursor-pointer font-mono">
@@ -177,6 +179,7 @@ function WalletAvatar(props: {
   profiles: SocialProfile[];
   thirdwebClient: ThirdwebClient;
   iconClassName?: string;
+  fallbackIcon?: React.ReactNode;
 }) {
   const avatar = useMemo(() => {
     return props.profiles.find(
@@ -203,6 +206,8 @@ function WalletAvatar(props: {
           className={cn("size-6 object-cover", props.iconClassName)}
           src={resolvedAvatarSrc}
         />
+      ) : props.fallbackIcon ? (
+        props.fallbackIcon
       ) : (
         <Blobbie
           address={props.address}

apps/dashboard/src/@/components/ui/CopyAddressButton.tsx

@@ -25,6 +25,7 @@ export function CopyAddressButton(props: {
       copyIconPosition={props.copyIconPosition}
       textToCopy={props.address}
       textToShow={shortenedAddress}
+      iconClassName={props.iconClassName}
       tooltip={props.tooltip || "Copy Address"}
       variant={props.variant}
     />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageMetadataSetup.ts

@@ -2,7 +2,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { getDeployedEntrypointERC20 } from "thirdweb/assets";
 import { contractType as getContractType } from "thirdweb/extensions/thirdweb";
 import { resolveFunctionSelectors } from "@/lib/selectors";
-import { getValidReward } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/utils/rewards";
+import { getValidReward } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/rewards/utils/rewards";
 import {
   isERC20ClaimConditionsSupported,
   isERC721ClaimConditionsSupported,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageSidebarLinks.ts

@@ -143,8 +143,8 @@ export function getContractPageSidebarLinks(data: {
     {
       exactMatch: true,
       hide: !data.metadata.showClaimRewards,
-      href: `${layoutPrefix}/claim-rewards`,
-      label: "Claim Rewards",
+      href: `${layoutPrefix}/rewards`,
+      label: "Rewards",
     },
   ];
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/components/claim-rewards-page.tsx

@@ -1,5 +1,6 @@
 import type { Meta } from "@storybook/nextjs";
 import { toUnits } from "thirdweb";
+import { base } from "thirdweb/chains";
 import { ThirdwebProvider } from "thirdweb/react";
 import { storybookThirdwebClient } from "@/storybook/utils";
 import { ClaimRewardsPageUI } from "./claim-rewards-page";
@@ -10,7 +11,7 @@ const meta = {
   decorators: [
     (Story) => (
       <ThirdwebProvider>
-        <div className="container max-w-7xl py-10">
+        <div className="container max-w-[1154px] py-10">
           <Story />
         </div>
       </ThirdwebProvider>
@@ -28,10 +29,12 @@ function unclaimedFeesStub(token0Amount: bigint, token1Amount: bigint) {
     token0: {
       address: "0x1234567890123456789012345678901234567890",
       amount: token0Amount,
+      symbol: "FOO",
     },
     token1: {
       address: "0x0987654321098765432109876543210987654321",
       amount: token1Amount,
+      symbol: "BAR",
     },
   };
 }
@@ -41,6 +44,7 @@ export function LargeAmounts() {
     <Variant
       token0Amount={toUnits("100000", 18)}
       token1Amount={toUnits("500000", 18)}
+      includeChainExplorer
     />
   );
 }
@@ -50,24 +54,42 @@ export function SmallAmounts() {
     <Variant
       token0Amount={toUnits("0.001", 18)}
       token1Amount={toUnits("0.0005", 18)}
+      includeChainExplorer
     />
   );
 }
 
-export function ZeroAmounts() {
+export function ZeroAmount() {
+  return (
+    <Variant
+      token0Amount={toUnits("0", 18)}
+      token1Amount={toUnits("0", 18)}
+      includeChainExplorer
+    />
+  );
+}
+
+export function ZeroAmountNoChainExplorer() {
   return (
     <Variant token0Amount={toUnits("0", 18)} token1Amount={toUnits("0", 18)} />
   );
 }
 
-function Variant(props: { token0Amount: bigint; token1Amount: bigint }) {
+function Variant(props: {
+  token0Amount: bigint;
+  token1Amount: bigint;
+  includeChainExplorer?: boolean;
+}) {
   return (
     <ClaimRewardsPageUI
+      referrerBps={5000}
+      chainSlug="base"
       recipient={recipient}
       referrer={referrer}
       client={storybookThirdwebClient}
       handleClaim={() => {}}
       isClaimPending={false}
+      chain={base}
       unclaimedFees={unclaimedFeesStub(props.token0Amount, props.token1Amount)}
     />
   );