Various improvements

src/app/bridge/page.tsx

@@ -6,6 +6,8 @@ import { SolidButton } from 'src/components/buttons/SolidButton';
 import { ChevronIcon } from 'src/components/icons/Chevron';
 import { Section } from 'src/components/layout/Section';
 import { H1 } from 'src/components/text/headers';
+import { config } from 'src/config/config';
+import { useIsCel2 } from 'src/features/account/hooks';
 import PortalLogo from 'src/images/logos/portal-bridge.jpg';
 import SquidLogo from 'src/images/logos/squid-router.jpg';
 
@@ -14,9 +16,17 @@ interface Bridge {
   operator: string;
   href: string;
   logo: any;
+  cel2Only?: boolean;
 }
 
 const BRIDGES: Bridge[] = [
+  {
+    name: 'Superbridge',
+    operator: 'Superbridge',
+    href: `https://superbridge.app/celo${config.isAlfajores ? '-testnet' : ''}`,
+    logo: '/logos/superbridge.jpg',
+    cel2Only: true,
+  },
   {
     name: 'Squid Router',
     operator: 'Squid',
@@ -32,17 +42,18 @@ const BRIDGES: Bridge[] = [
 ];
 
 export default function Page() {
+  const isCel2 = useIsCel2();
   return (
     <Section className="mt-6" containerClassName="space-y-6">
       <H1>Bridge to Celo</H1>
-      {BRIDGES.map((bridge) => (
+      {BRIDGES.filter((x) => (x.cel2Only ? isCel2 : true)).map((bridge) => (
         <BridgeLink key={bridge.name} {...bridge} />
       ))}
-      {/* <p className="text-center text-sm text-taupe-600">
+      <p className="text-center text-sm text-taupe-600">
         These bridges are independent, third-party service providers.
         <br />
         Celo assumes no responsibility for their operation.
-      </p> */}
+      </p>
     </Section>
   );
 }

src/app/delegate/[address]/page.tsx

@@ -53,7 +53,10 @@ function DelegateeDescription({ delegatee }: { delegatee: Delegatee }) {
         <div className="ml-4 flex flex-col">
           <h1 className="font-serif text-2xl md:text-3xl">{delegatee.name}</h1>
           <div className="flex items-center space-x-2">
-            <ShortAddress address={delegatee.address} className="text-sm text-taupe-600" />
+            <ShortAddress
+              address={delegatee.address}
+              className="font-mono text-sm text-taupe-600"
+            />
             <span className="text-sm text-taupe-600">•</span>
             <span className="text-sm text-taupe-600">{`Since ${dateString}`}</span>
           </div>

src/components/logos/Bug.tsx

@@ -0,0 +1,16 @@
+import { SVGProps, memo } from 'react';
+
+function _Bug(props: SVGProps<SVGSVGElement>) {
+  const { fill, ...rest } = props;
+  return (
+    // Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...rest}>
+      <path
+        d="M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+export const Bug = memo(_Bug);

src/components/logos/SocialLogo.tsx

@@ -1,5 +1,6 @@
 import { SVGProps } from 'react';
 import { A_Blank } from 'src/components/buttons/A_Blank';
+import { Bug } from 'src/components/logos/Bug';
 import { Discord } from 'src/components/logos/Discord';
 import { Github } from 'src/components/logos/Github';
 import { Twitter } from 'src/components/logos/Twitter';
@@ -18,6 +19,7 @@ const LOGOS: Record<SocialLinkType, React.FC<any>> = {
   [SocialLinkType.Twitter]: Twitter,
   [SocialLinkType.Github]: Github,
   [SocialLinkType.Discord]: Discord,
+  [SocialLinkType.Bug]: Bug,
 };
 
 export function SocialLogo({ svgProps, type, className, size = 18 }: Props) {

src/components/nav/Footer.tsx

@@ -12,6 +12,7 @@ export function Footer() {
         <FooterIconLink href={links.github} type={SocialLinkType.Github} />
         <FooterIconLink href={links.twitter} type={SocialLinkType.Twitter} />
         <FooterIconLink href={links.discord} type={SocialLinkType.Discord} />
+        <FooterIconLink href={links.bug} type={SocialLinkType.Bug} />
       </div>
       <div className="flex items-center space-x-1">
         <div className="text-xs text-taupe-400">

src/components/text/CopyInline.tsx

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes } from 'react';
+import { useCopyHandler } from 'src/utils/clipboard';
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+  text: string;
+};
+
+export function CopyInline({ text, ...props }: Props) {
+  const onClick = useCopyHandler(text);
+  return (
+    <button type="button" onClick={onClick} title="Copy" {...props}>
+      {text}
+    </button>
+  );
+}

src/components/text/ShortAddress.tsx

@@ -1,16 +1,11 @@
 import { ButtonHTMLAttributes } from 'react';
+import { CopyInline } from 'src/components/text/CopyInline';
 import { shortenAddress } from 'src/utils/addresses';
-import { useCopyHandler } from 'src/utils/clipboard';
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   address: Address;
 };
 
 export function ShortAddress({ address, ...props }: Props) {
-  const onClick = useCopyHandler(address);
-  return (
-    <button type="button" onClick={onClick} title="Copy address" {...props}>
-      {shortenAddress(address)}
-    </button>
-  );
+  return <CopyInline text={shortenAddress(address)} title="Copy address" {...props} />;
 }

src/config/links.ts

@@ -1,9 +1,11 @@
 import { config } from 'src/config/config';
 
+const github = 'https://github.com/celo-org/celo-mondo';
 export const links = {
   home: 'https://mondo.celo.org',
   discord: 'https://discord.gg/celo',
-  github: 'https://github.com/celo-org/celo-mondo',
+  github,
+  bug: github + '/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=',
   twitter: 'https://twitter.com/celo',
   docs: 'https://docs.celo.org',
   forum: 'https://forum.celo.org',

src/config/types.ts

@@ -5,6 +5,7 @@ export enum SocialLinkType {
   Twitter = 'twitter',
   Github = 'github',
   Discord = 'discord',
+  Bug = 'bug',
 }
 
 export const SocialLinksSchema = z.record(z.nativeEnum(SocialLinkType), z.string().url());

src/features/account/hooks.ts

@@ -1,9 +1,11 @@
 import { accountsABI, lockedGoldABI } from '@celo/abis';
+import { useEffect, useState } from 'react';
 import { useToastError } from 'src/components/notifications/useToastError';
 import { BALANCE_REFRESH_INTERVAL, ZERO_ADDRESS } from 'src/config/consts';
 import { Addresses } from 'src/config/contracts';
+import { isCel2 } from 'src/utils/is-cel2';
 import { isNullish } from 'src/utils/typeof';
-import { useBalance as _useBalance, useReadContract } from 'wagmi';
+import { useBalance as _useBalance, usePublicClient, useReadContract } from 'wagmi';
 
 export function useBalance(address?: Address) {
   const { data, isError, isLoading, error, refetch } = _useBalance({
@@ -72,3 +74,15 @@ export function useAccountDetails(address?: Address) {
     refetch,
   };
 }
+
+export function useIsCel2() {
+  const publicClient = usePublicClient();
+  const [_isCel2, setIsCel2] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (!publicClient) return;
+
+    void isCel2(publicClient).then((value) => setIsCel2(value));
+  }, [publicClient]);
+
+  return _isCel2;
+}

src/features/delegation/components/DelegatorsTable.tsx

@@ -3,9 +3,9 @@ import { SpinnerWithLabel } from 'src/components/animation/Spinner';
 import { sortAndCombineChartData } from 'src/components/charts/chartData';
 import { Collapse } from 'src/components/menus/Collapse';
 import { formatNumberString } from 'src/components/numbers/Amount';
+import { ShortAddress } from 'src/components/text/ShortAddress';
 import { useDelegators } from 'src/features/delegation/hooks/useDelegators';
 import { Delegatee } from 'src/features/delegation/types';
-import { shortenAddress } from 'src/utils/addresses';
 import { fromWei } from 'src/utils/amount';
 import { objKeys } from 'src/utils/objects';
 
@@ -28,7 +28,7 @@ function DelegatorsTableContent({ delegatee }: { delegatee: Delegatee }) {
   const tableData = useMemo(() => {
     if (!delegatorToAmount) return [];
     const data = objKeys(delegatorToAmount).map((address) => ({
-      label: shortenAddress(address),
+      label: address,
       value: fromWei(delegatorToAmount[address]),
     }));
     return sortAndCombineChartData(data, NUM_TO_SHOW);
@@ -51,7 +51,9 @@ function DelegatorsTableContent({ delegatee }: { delegatee: Delegatee }) {
       <tbody>
         {tableData.map((row) => (
           <tr key={row.label}>
-            <td className="py-2 text-sm">{row.label}</td>
+            <td className="py-2 font-mono text-sm text-taupe-600">
+              <ShortAddress address={row.label as `0x${string}`} />
+            </td>
             <td className="text-right text-sm">{`${formatNumberString(row.value)} CELO`}</td>
           </tr>
         ))}

src/features/governance/components/ProposalCard.tsx

@@ -112,7 +112,10 @@ export function ProposalBadgeRow({
       {showProposer && proposer && (
         <>
           <div className="hidden text-xs opacity-50 sm:block">•</div>
-          <ShortAddress address={proposer} className="hidden text-sm text-taupe-600 sm:block" />
+          <ShortAddress
+            address={proposer}
+            className="hidden font-mono text-sm text-taupe-600 sm:block"
+          />
         </>
       )}
       {/* Show one of proposer or executedTimeValue but not both, too crowded */}

src/features/governance/components/ProposalVotersTable.tsx

@@ -3,6 +3,7 @@ import { SpinnerWithLabel } from 'src/components/animation/Spinner';
 import { ChartDataItem, sortAndCombineChartData } from 'src/components/charts/chartData';
 import { Collapse } from 'src/components/menus/Collapse';
 import { formatNumberString } from 'src/components/numbers/Amount';
+import { CopyInline } from 'src/components/text/CopyInline';
 import { MergedProposalData } from 'src/features/governance/hooks/useGovernanceProposals';
 import { useProposalVoters } from 'src/features/governance/hooks/useProposalVoters';
 import { ProposalStage, VoteType } from 'src/features/governance/types';
@@ -17,19 +18,28 @@ import { toTitleCase } from 'src/utils/strings';
 const NUM_TO_SHOW = 20;
 
 export function ProposalVotersTable({ propData }: { propData: MergedProposalData }) {
+  const votersData = useProposalVoters(propData.id);
   return (
     <Collapse
-      button={<h2 className="text-left font-serif text-2xl">Voters</h2>}
+      button={
+        <h2 className="text-left font-serif text-2xl">
+          Voters <VotersCount {...votersData} />
+        </h2>
+      }
       buttonClasses="w-full"
       defaultOpen={propData.stage >= ProposalStage.Execution}
     >
-      <VoterTableContent propData={propData} />
+      <VoterTableContent propData={{ ...propData, votersData }} />
     </Collapse>
   );
 }
 
-function VoterTableContent({ propData }: { propData: MergedProposalData }) {
-  const { isLoading, voters, totals } = useProposalVoters(propData.id);
+function VoterTableContent({
+  propData,
+}: {
+  propData: MergedProposalData & { votersData: ReturnType<typeof useProposalVoters> };
+}) {
+  const { isLoading, voters, totals } = propData.votersData;
   const { addressToGroup } = useValidatorGroups();
 
   const tableData = useMemo(() => {
@@ -82,7 +92,11 @@ function VoterTableContent({ propData }: { propData: MergedProposalData }) {
       <tbody>
         {tableData.map((row) => (
           <tr key={row.label}>
-            <td className="py-2 text-sm">{row.label}</td>
+            <td
+              className={`py-2 text-sm ${row.label.startsWith('0x') ? 'font-mono' : ''} text-taupe-600`}
+            >
+              <CopyInline text={row.label} />
+            </td>
             <td className="px-4 py-2 text-sm font-medium">{toTitleCase(row.type)}</td>
             <td>
               <div className="flex w-fit items-center space-x-2 rounded-full bg-taupe-300 px-2">
@@ -98,3 +112,9 @@ function VoterTableContent({ propData }: { propData: MergedProposalData }) {
     </table>
   );
 }
+
+function VotersCount({ isLoading, voters }: ReturnType<typeof useProposalVoters>) {
+  if (isLoading) return null;
+
+  return <span className="pl-4 text-sm text-taupe-600">{Object.keys(voters!).length}</span>;
+}

src/features/locking/LockForm.tsx

@@ -82,6 +82,9 @@ export function LockForm({
     return validateForm(values, lockedBalances, walletBalance, stakeBalances, isVoting);
   };
 
+  const shouldShowWithdrawalTip = lockedBalances?.pendingFree === 0n && lockedBalances?.locked > 0n;
+  const isUnstaking = lockedBalances && lockedBalances.pendingBlocked > 0n;
+
   return (
     <Formik<LockFormValues>
       initialValues={{
@@ -102,6 +105,20 @@ export function LockForm({
                 Lock CELO to begin.
               </TipBox>
             )}
+            {values.action === LockActionType.Withdraw && shouldShowWithdrawalTip && (
+              <TipBox color="purple">
+                You currently have no available unlocked CELO. Unlocking takes 3 days.{' '}
+                {isUnstaking && (
+                  <>
+                    <br />
+                    <span>
+                      You are currently unlocking {fromWeiRounded(lockedBalances.pendingBlocked)}{' '}
+                      CELO.
+                    </span>
+                  </>
+                )}
+              </TipBox>
+            )}
             <ActionTypeField defaultAction={defaultFormValues?.action} disabled={isInputDisabled} />
             <LockAmountField
               lockedBalances={lockedBalances}

src/features/transactions/TransactionConfirmation.tsx

@@ -28,7 +28,7 @@ export function TransactionConfirmation({
           {confirmation.properties.map(({ label, value }) => (
             <div key={label} className="flex flex-row justify-between">
               <div className="text-sm font-medium">{label}</div>
-              <div className="text-sm font-medium">{value}</div>
+              <div className="overflow-hidden text-ellipsis text-sm font-medium">{value}</div>
             </div>
           ))}
           <div className="flex flex-row justify-between border-t border-taupe-300 pt-2">

tailwind.config.js

@@ -39,7 +39,7 @@ module.exports = {
     fontFamily: {
       sans: ['var(--font-inter)', 'sans-serif'],
       serif: ['var(--font-alpina)', 'serif'],
-      mono: ['Courier New', 'monospace'],
+      mono: ['monospace'],
     },
     fontSize: {
       xs: '0.725rem',