Various improvements

.github/workflows/ci.yml

@@ -26,13 +26,13 @@ jobs:
         # Check out the lockfile from main, reinstall, and then
         # verify the lockfile matches what was committed.
         run: |
-            yarn install --immutable
-            CHANGES=$(git status -s)
-            if [[ ! -z $CHANGES ]]; then
-              echo "Changes found: $CHANGES"
-              git diff
-              exit 1
-            fi
+          yarn install --immutable
+          CHANGES=$(git status -s)
+          if [[ ! -z $CHANGES ]]; then
+            echo "Changes found: $CHANGES"
+            git diff
+            exit 1
+          fi
 
   build:
     runs-on: ubuntu-latest
@@ -85,7 +85,7 @@ jobs:
             .yarn/cache
           key: ${{ runner.os }}-yarn-cache-${{ hashFiles('./yarn.lock') }}
 
-      - name: lint 
+      - name: lint
         run: yarn run lint
 
   test:
@@ -102,6 +102,13 @@ jobs:
             **/node_modules
             .yarn/cache
           key: ${{ runner.os }}-yarn-cache-${{ hashFiles('./yarn.lock') }}
+      - uses: foundry-rs/foundry-toolchain@v1
 
+      - name: build
+        run: yarn run build
+        env:
+          NEXT_PUBLIC_WALLET_CONNECT_ID: ${{ secrets.NEXT_PUBLIC_WALLET_CONNECT_ID }}
       - name: test
         run: yarn run test
+        env:
+          NEXT_PUBLIC_RPC_URL: https://public-archive-nodes.celo-testnet.org

README.md

@@ -14,10 +14,13 @@ For support, you can [file an issue](https://github.com/celo-org/celo-mondo/issu
 
 ## Development
 
-To run Celo Mondo against alfajores network set `NEXT_PUBLIC_IS_ALFAJORES` env variable to `1`.
+To run Celo Mondo against alfajores network set `NEXT_PUBLIC_RPC_URL` env variable to `alfajores`.
+
+To run Celo Mondo against any other network (such as your local testnet) set `NEXT_PUBLIC_RPC_URL` env variable to `http://<your-rpc-url>`.
 
 1. Install: `yarn`
 2. Setup: `yarn prepare`
 3. Run locally: `yarn dev`
+4. Test locally: `yarn test`
 
 For more information about the architecture and internals of this app, see [DEVELOPER.md](./DEVELOPER.md).

package.json

@@ -44,20 +44,26 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@celo/devchain-anvil": "12.0.0-canary.49",
     "@tanstack/eslint-plugin-query": "^5.28.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/dompurify": "^3",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
+    "@viem/anvil": "^0.0.10",
     "autoprefixer": "^10.4.20",
     "critters": "^0.0.25",
     "daisyui": "^4.9.0",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.1",
     "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
+    "happy-dom": "^15.11.7",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.38",

src/app/bridge/page.tsx

@@ -23,7 +23,7 @@ const BRIDGES: Bridge[] = [
   {
     name: 'Superbridge',
     operator: 'Superbridge',
-    href: `https://superbridge.app/celo${config.isAlfajores ? '-testnet' : ''}`,
+    href: `https://superbridge.app/celo${config.chain.testnet ? '-testnet' : ''}`,
     logo: '/logos/superbridge.jpg',
     cel2Only: true,
   },

src/app/delegate/api/register/route.test.ts

@@ -10,13 +10,13 @@ const getRequest = (formData: FormData): Request => {
     formData: () => formData,
   } as any as Request;
 };
+const imageBuffer = fs.readFileSync(
+  path.join(__dirname, '../../../../../public/logos/validators/clabs.jpg'),
+);
 
 const getValidFormData = async () => {
   const request = await getValidRequest();
   const data = new FormData();
-  const imageBuffer = fs.readFileSync(
-    path.join(__dirname, '../../../../../public/logos/validators/clabs.jpg'),
-  );
 
   data.append('image', new Blob([imageBuffer], { type: 'image/jpeg' }), 'clabs.jpg');
   data.append('name', request.name);
@@ -52,25 +52,19 @@ it('successfuly calls PR creation', async () => {
   `);
   expect(isAddressAnAccountMock).toHaveBeenCalledTimes(1);
   expect(createDelegationPRMock).toHaveBeenCalledTimes(1);
-  expect(createDelegationPRMock.mock.lastCall).toMatchInlineSnapshot(`
-    [
-      {
-        "address": "0x6A5DD51Da29914e8659b9CC354B414f30c7692c4",
-        "description": "Delegatee description",
-        "image": File {
-          Symbol(kHandle): Blob {},
-          Symbol(kLength): 3801,
-          Symbol(kType): "image/jpeg",
-        },
-        "interests": "blockchain, NFTs",
-        "name": "Delegatee name",
-        "signature": "0x52a3c23ef6c6817691872b77615ef30927453d641acd8c607de458d39e581bcd5411f723102640897af151644086abf4f3a9baf216d684d784194aef2c6730be1c",
-        "twitterUrl": "https://example.com/x",
-        "verificationUrl": "https://example.com/verification",
-        "websiteUrl": "https://example.com",
-      },
-    ]
-  `);
+  const request = createDelegationPRMock.mock.lastCall![0];
+  expect(request.address).toBe('0x6A5DD51Da29914e8659b9CC354B414f30c7692c4');
+  expect(request.description).toBe('Delegatee description');
+  expect(request.image).toBeInstanceOf(File);
+  expect((request.image as File).arrayBuffer()).resolves.toEqual(imageBuffer.buffer);
+  expect(request.interests).toBe('blockchain, NFTs');
+  expect(request.name).toBe('Delegatee name');
+  expect(request.signature).toBe(
+    '0x52a3c23ef6c6817691872b77615ef30927453d641acd8c607de458d39e581bcd5411f723102640897af151644086abf4f3a9baf216d684d784194aef2c6730be1c',
+  );
+  expect(request.twitterUrl).toBe('https://example.com/x');
+  expect(request.verificationUrl).toBe('https://example.com/verification');
+  expect(request.websiteUrl).toBe('https://example.com');
 });
 
 it('handles validation errors', async () => {

src/app/governance/page.tsx

@@ -145,6 +145,8 @@ function useFilteredProposals({
           p.proposal?.url.toLowerCase().includes(query) ||
           p.metadata?.title.toLowerCase().includes(query) ||
           p.metadata?.author.toLowerCase().includes(query) ||
+          String(p.metadata?.cgp).toLowerCase().includes(query) ||
+          String(p.id).toLowerCase().includes(query) ||
           p.metadata?.url?.toLowerCase().includes(query),
       );
   }, [proposals, filter, searchQuery]);

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

@@ -87,7 +87,9 @@ function HeaderSection({ group }: { group?: ValidatorGroup }) {
         <div className="flex items-center space-x-3 sm:space-x-6">
           <ValidatorGroupLogo address={address} size={90} />
           <div>
-            <h1 className="font-serif text-4xl">{group?.name || '...'}</h1>
+            <h1 className="overflow-hidden text-ellipsis font-serif text-4xl">
+              {group?.name || '...'}
+            </h1>
             <div className="mt-2 flex items-center space-x-1.5 sm:space-x-3">
               <OutlineButton
                 className="all:py-1 all:font-normal"

src/components/charts/chartData.ts

@@ -5,6 +5,7 @@ export interface ChartDataItem {
   label: string;
   value: number;
   percentage?: number;
+  address?: `0x${string}`;
 }
 
 export function sortAndCombineChartData(

src/components/text/CopyInline.tsx

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

src/components/text/ShortAddress.tsx

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

src/config/config.ts

@@ -1,17 +1,16 @@
-import { ChainId } from 'src/config/chains';
+import { celo, celoAlfajores, Chain } from 'viem/chains';
 
 interface Config {
   debug: boolean;
   version: string | null;
   appName: string;
-  chainId: number;
   walletConnectProjectId: string;
   fornoApiKey: string;
   celoscanApiKey: string;
   infuraApiKey: string;
   upstashKey: string;
   watchBlockNumber: boolean;
-  isAlfajores: boolean;
+  chain: Chain;
 }
 
 const isDevMode = process?.env?.NODE_ENV === 'development';
@@ -21,21 +20,45 @@ const fornoApiKey = process?.env?.NEXT_PUBLIC_FORNO_API_KEY || '';
 const celoscanApiKey = process?.env?.NEXT_PUBLIC_CELOSCAN_API_KEY || '';
 const infuraApiKey = process?.env?.NEXT_PUBLIC_INFURA_API_KEY || '';
 const upstashKey = process?.env?.UPSTASH_KEY || '';
-const isAlfajores = process?.env?.NEXT_PUBLIC_IS_ALFAJORES === '1' || false;
 
 export const fornoRpcUrl = `https://forno.celo.org?apikey=${fornoApiKey}`;
 export const infuraRpcUrl = `https://celo-mainnet.infura.io/v3/${infuraApiKey}`;
 
+const mainnetUrl = celo.rpcUrls.default.http[0];
+const alfajoresUrl = celoAlfajores.rpcUrls.default.http[0];
+const rpcUrl = process?.env?.NEXT_PUBLIC_RPC_URL || mainnetUrl;
+
+// We assume using a custom RPC url will be mainnet (archive node, local node, ...)
+const isMainnet = ['mainnet', mainnetUrl, process.env.NEXT_PUBLIC_RPC_URL].includes(rpcUrl);
+const isAlfajores = ['alfajores', alfajoresUrl].includes(rpcUrl);
+const isKnownNetwork = isMainnet || isAlfajores;
+
+const chain = {
+  ...(isMainnet ? celo : celoAlfajores),
+  ...(isKnownNetwork
+    ? {}
+    : {
+        rpcUrls: {
+          default: {
+            http: [rpcUrl],
+          },
+        },
+        testnet: true,
+      }),
+} as Chain;
+
+// NOTE: override the viem chain's rpc url in case we use an env variable
+chain.rpcUrls.default.http = [rpcUrl];
+
 export const config: Config = Object.freeze({
   debug: isDevMode,
   version,
   appName: 'Celo Mondo',
-  chainId: isAlfajores ? ChainId.Alfajores : ChainId.Celo,
+  chain,
   walletConnectProjectId,
   fornoApiKey,
   celoscanApiKey,
   infuraApiKey,
   upstashKey,
   watchBlockNumber: false,
-  isAlfajores,
 });

src/config/contracts.ts

@@ -2,6 +2,16 @@ import { registryABI } from '@celo/abis-12';
 import { config } from 'src/config/config';
 import { ZERO_ADDRESS } from 'src/config/consts';
 import { createCeloPublicClient } from 'src/utils/client';
+import { celo, celoAlfajores } from 'viem/chains';
+
+const UNKNOWN_TESTNET_ADDRESSES = {
+  Accounts: ZERO_ADDRESS,
+  Election: ZERO_ADDRESS,
+  EpochManager: ZERO_ADDRESS,
+  Governance: ZERO_ADDRESS,
+  LockedGold: ZERO_ADDRESS,
+  Validators: ZERO_ADDRESS,
+} as const;
 
 const ALFAJORES_ADDRESSES = {
   Accounts: '0xed7f51A34B4e71fbE69B3091FcF879cD14bD73A9',
@@ -23,7 +33,12 @@ const MAINNET_ADDRESSES = {
   Validators: '0xaEb865bCa93DdC8F47b8e29F40C5399cE34d0C58',
 } as const;
 
-export const Addresses = config.isAlfajores ? ALFAJORES_ADDRESSES : MAINNET_ADDRESSES;
+export const Addresses =
+  config.chain.rpcUrls.default.http[0] === celo.rpcUrls.default.http[0]
+    ? MAINNET_ADDRESSES
+    : config.chain.rpcUrls.default.http[0] === celoAlfajores.rpcUrls.default.http[0]
+      ? ALFAJORES_ADDRESSES
+      : UNKNOWN_TESTNET_ADDRESSES;
 
 export const REGISTRY_ADDRESS = '0x000000000000000000000000000000000000ce10';