Delegation setup flow (#481)

* Delegation setup flow

* Zero address fallback

* Updated top issue icons

src/app/api/common/metrics/getMetrics.ts

@@ -4,9 +4,9 @@ import { cache } from "react";
 
 async function getMetrics() {
   const { namespace, contracts } = Tenant.current();
-  const totalSupply = await contracts.token.contract.totalSupply();
 
   try {
+    const totalSupply = await contracts.token.contract.totalSupply();
     const votableSupply = await prisma[`${namespace}VotableSupply`].findFirst(
       {}
     );
@@ -18,7 +18,7 @@ async function getMetrics() {
     // Handle prisma errors for new tenants
     return {
       votableSupply: "0",
-      totalSupply: totalSupply.toString(),
+      totalSupply: "0",
     };
   }
 }

src/app/info/components/InfoHero.tsx

@@ -3,9 +3,10 @@ import Image, { StaticImageData } from "next/image";
 import Link from "next/link";
 import Tenant from "@/lib/tenant/tenant";
 import { icons } from "@/assets/icons/icons";
+import { TENANT_NAMESPACES } from "@/lib/constants";
 
 export const InfoHero = () => {
-  const { ui } = Tenant.current();
+  const { ui, namespace } = Tenant.current();
   const page = ui!.page("info");
 
   const rotationClasses = ["-rotate-2", "rotate-4", "-rotate-5", "rotate-1"];
@@ -20,17 +21,20 @@ export const InfoHero = () => {
           {page!.description}
         </p>
       </div>
-      <div className="flex flex-row">
-        {page!.links!.map((link, idx) => (
-          <Card
-            className={rotationClasses[idx % rotationClasses.length]}
-            image={link.image || ""}
-            key={`card-${idx}`}
-            link={link.url}
-            linkText={link.title}
-          />
-        ))}
-      </div>
+
+      {namespace !== TENANT_NAMESPACES.SCROLL && (
+        <div className="flex flex-row">
+          {page!.links!.map((link, idx) => (
+            <Card
+              className={rotationClasses[idx % rotationClasses.length]}
+              image={link.image || ""}
+              key={`card-${idx}`}
+              link={link.url}
+              linkText={link.title}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };

src/components/Dialogs/DelegateDialog/DelegateDialog.tsx

@@ -32,7 +32,7 @@ export function DelegateDialog({
     addressOrENSName: string
   ) => Promise<DelegateePayload | null>;
 }) {
-  const { contracts, slug } = Tenant.current();
+  const { ui, contracts, slug, token } = Tenant.current();
 
   const { address: accountAddress } = useAccount();
 
@@ -42,6 +42,8 @@ export function DelegateDialog({
   const { setRefetchDelegate } = useConnectButtonContext();
   const sameDelegatee = delegate.address === delegatee?.delegatee;
 
+  const isDisabledInTenant = ui.toggle("delegates/delegate")?.enabled === false;
+
   const { data: delegateEnsName } = useEnsName({
     chainId: 1,
     address: delegate.address as `0x${string}`,
@@ -71,16 +73,26 @@ export function DelegateDialog({
     setIsReady(false);
     if (!accountAddress) return;
 
-    const vp = await fetchBalanceForDirectDelegation(accountAddress);
-    setVotingPower(vp.toString());
-
-    const direct = await fetchDirectDelegatee(accountAddress);
-    setDelegatee(direct);
+    try {
+      const vp = await fetchBalanceForDirectDelegation(accountAddress);
+      setVotingPower(vp.toString());
 
-    setIsReady(true);
+      const direct = await fetchDirectDelegatee(accountAddress);
+      setDelegatee(direct);
+    } finally {
+      setIsReady(true);
+    }
   }, [fetchBalanceForDirectDelegation, accountAddress, fetchDirectDelegatee]);
 
   const renderActionButtons = () => {
+    if (isDisabledInTenant) {
+      return (
+        <Button disabled={true}>
+          {token.symbol} delegation is disabled at this time
+        </Button>
+      );
+    }
+
     if (sameDelegatee) {
       return (
         <ShadcnButton variant="outline" className="cursor-not-allowed">

src/hooks/useConnectedDelegate.ts

@@ -8,6 +8,8 @@ import { useConnectButtonContext } from "@/contexts/ConnectButtonContext";
 import { useQuery } from "@tanstack/react-query";
 import { timeout } from "@/lib/utils";
 import { fetchDelegate } from "@/app/delegates/actions";
+import Tenant from "@/lib/tenant/tenant";
+import { ZERO_ADDRESS } from "@/lib/constants";
 
 /**
  * Define maximum number of retries, max retries 10 means 180 seconds waiting in total (advanced delegation voting power
@@ -18,13 +20,16 @@ const MAX_RETRIES = 10;
 // TODO: think about strategy to fetch, since balance and voting power can change on every block,
 // also to prevent additional unnecessary fetches being done right now
 const useConnectedDelegate = () => {
+  const { contracts } = Tenant.current();
+  const isTestToken = contracts.token.address === ZERO_ADDRESS;
+
   const { refetchDelegate, setRefetchDelegate } = useConnectButtonContext();
   const { address } = useAccount();
   const [retries, setRetries] = useState<number>(0);
   const [lastVotingPower, setLastVotingPower] = useState<string | null>(null);
 
   const data = useQuery({
-    enabled: !!address,
+    enabled: !(!address || isTestToken),
     queryKey: ["useConnectedDelegate", address, refetchDelegate, retries],
     queryFn: async () => {
       const [delegate, advancedDelegators, balance] =

src/icons/icons.ts

@@ -39,10 +39,23 @@ import vote from "./vote.svg";
 import wallet from "./wallet.svg";
 import walletConnected from "./walletConnected.svg";
 import world from "./world.svg";
+import wrenchScrewdriverIcon from "./wrenchScredriver.svg";
+import globeAlt from "./globeAlt.svg";
+import presentationChartLine from "./presentationChartLine.svg";
+import scale from "./scale.svg";
+import codeBracketSquare from "./codeBracketSquare.svg";
+import beaker from "./beaker.svg";
+import shieldCheck from "./shieldCheck.svg";
 
 export const icons = {
   anonNoun,
   badge,
+  scale,
+  codeBracketSquare,
+  beaker,
+  shieldCheck,
+  wrenchScrewdriverIcon,
+  presentationChartLine,
   ballot,
   banknotes,
   cardView,
@@ -58,6 +71,7 @@ export const icons = {
   expand,
   github,
   globe,
+  globeAlt,
   info,
   link,
   liquid,

src/lib/constants.ts

@@ -2,6 +2,8 @@ export const INDEXER_DELAY = 3000;
 
 export const SECONDS_IN_HOUR = 3600;
 
+export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+
 export enum FREQUENCY_FILTERS {
   DAY = "24h",
   WEEK = "7d",

src/lib/tenant/configs/contracts/scroll.ts

@@ -9,6 +9,7 @@ import { scroll } from "viem/chains";
 
 import { IGovernorContract } from "@/lib/contracts/common/interfaces/IGovernorContract";
 import { JsonRpcProvider } from "ethers";
+import { ZERO_ADDRESS } from "@/lib/constants";
 
 interface Props {
   isProd: boolean;
@@ -19,9 +20,9 @@ export const scrollTenantContractConfig = ({
   isProd,
   alchemyId,
 }: Props): TenantContracts => {
-  const TOKEN = "0x5300000000000000000000000000000000000004";
-  const GOVERNOR = "0x0000000000000000000000000000000000000000";
-  const TREASURY = "0x0000000000000000000000000000000000000000";
+  const TOKEN = ZERO_ADDRESS;
+  const GOVERNOR = ZERO_ADDRESS;
+  const TREASURY = ZERO_ADDRESS;
   const provider = new JsonRpcProvider(
     `https://scroll-mainnet.g.alchemy.com/v2/${alchemyId}`
   );

src/lib/tenant/configs/ui/scroll.ts

@@ -47,6 +47,49 @@ export const scrollTenantUIConfig = new TenantUI({
     brandSecondary: "#F2F2F2",
   },
 
+  governanceIssues: [
+    {
+      icon: "wrenchScrewdriverIcon",
+      title: "Builders",
+      key: "builders",
+    },
+    {
+      icon: "community",
+      title: "Community",
+      key: "community",
+    },
+    {
+      icon: "globeAlt",
+      title: "Decentralization",
+      key: "decentralization",
+    },
+    {
+      icon: "presentationChartLine",
+      title: "Ecosystem Growth",
+      key: "ecosystemGrowth",
+    },
+    {
+      icon: "scale",
+      title: "Governance",
+      key: "governance",
+    },
+    {
+      icon: "codeBracketSquare",
+      title: "Protocol",
+      key: "protocol",
+    },
+    {
+      icon: "beaker",
+      title: "Research & Development",
+      key: "researchDevelopment",
+    },
+    {
+      icon: "shieldCheck",
+      title: "Security",
+      key: "security",
+    },
+  ],
+
   pages: [
     {
       route: "/",
@@ -148,12 +191,16 @@ export const scrollTenantUIConfig = new TenantUI({
     },
     {
       name: "delegates/endorsed-filter",
-      enabled: true,
+      enabled: false,
     },
     {
       name: "delegates/edit",
       enabled: true,
     },
+    {
+      name: "delegates/delegate",
+      enabled: false,
+    },
     {
       name: "delegates/code-of-conduct",
       enabled: true,

src/lib/tenant/tenantTokenFactory.ts

@@ -40,7 +40,7 @@ export default class TenantTokenFactory {
       case TENANT_NAMESPACES.SCROLL:
         return {
           name: "Scroll",
-          symbol: "SCROLL",
+          symbol: "SCR",
           decimals: 18,
         };
       default: