feat: add mainnet support and adjust CI

* feat: add mainnet support and adjust CI

.github/workflows/deploy.yml

@@ -0,0 +1,109 @@
+name: Deploy app
+on:
+  workflow_call:
+  pull_request:
+  push:
+    branches:
+      - "master"
+
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Determine environment file
+        shell: bash
+        run: |
+          if [ "$BRANCH_NAME" = "master" ]; then
+            echo "ENV_FILE=.env.app.production" >> $GITHUB_ENV
+            echo "BUILD_COMMAND=bun run build-prod" >> $GITHUB_ENV
+            echo "ENABLED_CHAIN_IDS=1" >> $GITHUB_ENV
+            echo "PREFERRED_CHAIN_ID=1" >> $GITHUB_ENV
+          else
+            echo "ENV_FILE=.env.app.development" >> $GITHUB_ENV
+            echo "BUILD_COMMAND=bun run build-dev" >> $GITHUB_ENV
+            echo "ENABLED_CHAIN_IDS=1,11155111" >> $GITHUB_ENV
+            echo "PREFERRED_CHAIN_ID=11155111" >> $GITHUB_ENV
+          fi
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: 'package.json'
+
+      - uses: oven-sh/setup-bun@v2
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.bun/install/cache
+          key: |
+            ${{ runner.os }}-${{ matrix.bun }}-bun-${{ hashFiles('**/bun.lockb') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.bun }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Fill env values with secrets
+        uses: Langsdorf/[email protected]
+        with:
+          file: "env/${{ env.ENV_FILE }}"
+          replace-all: |
+            NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=${{ secrets.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID }}
+            NEXT_PUBLIC_ETHEREUM_RPC_URL=${{ secrets.NEXT_PUBLIC_ETHEREUM_RPC_URL }}
+            NEXT_PUBLIC_SEPOLIA_RPC_URL=${{ secrets.NEXT_PUBLIC_SEPOLIA_RPC_URL }}
+            NEXT_PUBLIC_WEB3_STORAGE_KEY=${{ secrets.NEXT_PUBLIC_WEB3_STORAGE_KEY }}
+            NEXT_PUBLIC_ETHERSCAN_API_KEY=${{ secrets.NEXT_PUBLIC_ETHERSCAN_API_KEY }}
+            NEXT_PUBLIC_IPFS_ENDPOINTS=https://ipfs.io/ipfs,https://api-staging.pwn.xyz/ipfs,https://gateway.pinata.cloud/ipfs,https://dweb.link/ipfs,https://4everland.io/ipfs
+            NEXT_PUBLIC_PREFERRED_CHAIN_ID=${{ env.PREFERRED_CHAIN_ID }}
+            NEXT_PUBLIC_ENABLED_CHAIN_IDS=${{ env.ENABLED_CHAIN_IDS }}
+          upsert: true
+
+      - name: Build
+        run: ${{ env.BUILD_COMMAND }}
+
+      - name: Deploy to Cloudflare
+        id: deploy-cloudflare
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          command: pages deploy out --project-name=pwn-voting-ui --branch=${{ env.BRANCH_NAME }} --commit-hash=${{ github.sha }}
+
+      - name: Add comment to PR with deployed URL
+        if: github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          message: |
+            Deployed on <${{ steps.deploy-cloudflare.outputs.pages-deployment-alias-url }}>!
+          comment-tag: execution
+
+      # TODO make this work!
+      # - name: Deploy to IPFS  
+      #   if: ${{ env.BRANCH_NAME }} == 'master'
+      #   uses: web3-storage/add-to-web3@v3
+      #   id: deploy-ipfs
+      #   with:
+      #     path_to_add: '.output/public'
+      #     proof: './delegation.car'
+      #     secret_key: ${{ secrets.WEB3_STORAGE_KEY }}
+
+      # - name: Update DNSLink
+      #   if: ${{ env.BRANCH_NAME }} == 'master'
+      #   env:
+      #     CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      #     CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
+      #     RECORD_DOMAIN: "pwn.xyz"
+      #     RECORD_NAME: "_dnslink.staking"
+      #   uses: PabiGamito/cloudflare-update-dnslink@master
+      #   with:
+      #     cid: ${{ steps.deploy-ipfs.outputs.cid }}
+
+

.gitignore

@@ -38,3 +38,6 @@ next-env.d.ts
 
 # editor
 .vscode
+
+# https://github.com/nektos/act
+bin/*

README.md

@@ -1,6 +1,6 @@
 ## Steps for testing
 
-1. In your wallet, set the RPC URL for Sepolia network to https://virtual.sepolia.rpc.tenderly.co/f8099806-f215-4c8a-bd88-aa34015f6b34 . This makes sure that we use the forked Sepolia network, where we can e.g. move forward time to test accepting proposals and other scenarios easily without needing to wait x days.
+1. In your wallet, set the RPC URL for Sepolia network to Tenderly fork. This makes sure that we use the forked Sepolia network, where we can e.g. move forward time to test accepting proposals and other scenarios easily without needing to wait x days.
 
 ### Gaining voting power
 
@@ -9,7 +9,7 @@
 
 ### Optimistic (stewards) proposals
 
-1. For testing creating optimistic proposals, you can import our shared dev EOA account from the pwn_secrets KeePass file to your wallet. After that go to app.safe.global, connect this imported wallet and select this safe on Sepolia 0x282D9663815b1F9929a3C84a9a1290BE882E125f . With this safe connect to the Voting UI via WalletConnect.
+1. For testing creating optimistic proposals, you can import our shared dev EOA account. After that go to app.safe.global, connect this imported wallet and select this safe on Sepolia 0x282D9663815b1F9929a3C84a9a1290BE882E125f . With this safe connect to the Voting UI via WalletConnect.
 2. Now you should be able to create optimistic proposals.
 
 # Governance App Template

components/WalletContainer.tsx

@@ -1,42 +1,33 @@
-import { PUB_CHAIN, PUB_RPC_URL } from "@/constants";
+import { PUB_RPC_URL } from "@/constants";
 import { formatHexString } from "@/utils/evm";
-import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { useAppKit } from "@reown/appkit/react";
 import classNames from "classnames";
-import { useEffect } from "react";
 import { createClient, http } from "viem";
-import { createConfig, useAccount, useEnsName, useSwitchChain } from "wagmi";
+import { createConfig, useAccount, useEnsName } from "wagmi";
 import { mainnet } from "wagmi/chains";
 
 const config = createConfig({
-  chains: [PUB_CHAIN],
+  chains: [mainnet],
   ssr: true,
   client({ chain }) {
     return createClient({
       chain,
-      transport: http(PUB_RPC_URL, { batch: true }),
+      transport: http(PUB_RPC_URL[1], { batch: true }),
     });
   },
 });
 
 // TODO: update with ODS wallet module - [https://linear.app/aragon/issue/RD-198/create-ods-walletmodule]
 const WalletContainer = () => {
-  const { open } = useWeb3Modal();
-  const { address, isConnected, chainId } = useAccount();
-  const { switchChain } = useSwitchChain();
+  const { open } = useAppKit();
+  const { address, isConnected } = useAccount();
 
   const { data: ensName } = useEnsName({
     config,
     chainId: mainnet.id,
     address: address,
   });
 
-  useEffect(() => {
-    if (!chainId) return;
-    else if (chainId === PUB_CHAIN.id) return;
-
-    switchChain({ chainId: PUB_CHAIN.id });
-  }, [chainId]);
-
   return (
     <button
       className={classNames(

components/input/calldata-form.tsx

@@ -12,7 +12,6 @@ import {
 } from "viem";
 import { isAddress } from "@/utils/evm";
 import { If } from "../if";
-import { PUB_CHAIN } from "@/constants";
 import { useIsContract } from "@/hooks/useIsContract";
 import { PleaseWaitSpinner } from "../please-wait";
 import { useAbi } from "@/hooks/useAbi";
@@ -24,7 +23,7 @@ interface ICalldataFormProps {
 }
 
 export const CalldataForm: FC<ICalldataFormProps> = ({ onChange, onSubmit }) => {
-  const coinName = PUB_CHAIN.nativeCurrency.symbol;
+  const coinName = "ETH";
   const [to, setTo] = useState<Address>();
   const [calldata, setCalldata] = useState<string>("");
   const [value, setValue] = useState<string>("");

components/input/function-params-form.tsx

@@ -5,7 +5,6 @@ import { type AbiFunction } from "abitype";
 import { If } from "@/components/if";
 import { InputParameter } from "./input-parameter";
 import { type InputValue } from "@/utils/input-values";
-import { PUB_CHAIN } from "@/constants";
 
 interface IFunctionParamsFormProps {
   functionAbi?: AbiFunction;
@@ -19,7 +18,7 @@ export const FunctionParamsForm = ({
   onActionCleared,
   onSubmit,
 }: IFunctionParamsFormProps) => {
-  const coinName = PUB_CHAIN.nativeCurrency.symbol;
+  const coinName = "ETH";
   const [inputValues, setInputValues] = useState<InputValue[]>([]);
   const [value, setValue] = useState<string>("");
 

components/input/withdrawal-form.tsx

@@ -4,15 +4,14 @@ import { InputText, InputNumber, AlertInline } from "@aragon/gov-ui-kit";
 import { type Address, parseEther } from "viem";
 import { isAddress } from "@/utils/evm";
 import { ElseIf, If, Then } from "../if";
-import { PUB_CHAIN } from "@/constants";
 
 interface IWithdrawalFormProps {
   onChange: (action: RawAction) => any;
   onSubmit?: () => any;
 }
 
 export const WithdrawalForm: FC<IWithdrawalFormProps> = ({ onChange, onSubmit }) => {
-  const coinName = PUB_CHAIN.nativeCurrency.symbol;
+  const coinName = "ETH";
   const [to, setTo] = useState<Address>();
   const [value, setValue] = useState<string>("");
 

components/proposalActions/encodedView.tsx

@@ -1,4 +1,3 @@
-import { PUB_CHAIN } from "@/constants";
 import { capitalizeFirstLetter } from "@/utils/text";
 import { type RawAction } from "@/utils/types";
 import { InputText, NumberFormat, formatterUtils } from "@aragon/gov-ui-kit";
@@ -31,7 +30,7 @@ function getEncodedArgs(action: RawAction) {
       { title: "To", value: action.to },
       {
         title: "Value",
-        value: `${formatterUtils.formatNumber(formatEther(action.value, "wei"), { format: NumberFormat.TOKEN_AMOUNT_SHORT })} ${PUB_CHAIN.nativeCurrency.symbol}`,
+        value: `${formatterUtils.formatNumber(formatEther(action.value, "wei"), { format: NumberFormat.TOKEN_AMOUNT_SHORT })} ETH`,
       },
     ];
   }
@@ -45,7 +44,7 @@ function getEncodedArgs(action: RawAction) {
     if (key === "value") {
       return {
         title: capitalizeFirstLetter(key),
-        value: `${formatEther(value as bigint, "wei")} ${PUB_CHAIN.nativeCurrency.symbol}`,
+        value: `${formatEther(value as bigint, "wei")} ETH`,
       };
     }
     return { title: capitalizeFirstLetter(key), value: value.toString() };

components/proposalActions/proposalActions.tsx

@@ -1,4 +1,3 @@
-import { PUB_CHAIN } from "@/constants";
 import { formatHexString } from "@/utils/evm";
 import {
   AccordionContainer,
@@ -18,6 +17,7 @@ import { Else, ElseIf, If, Then } from "../if";
 import { useAction } from "@/hooks/useAction";
 import { decodeCamelCase } from "@/utils/case";
 import { formatEther } from "viem";
+import { useAccount } from "wagmi";
 
 const DEFAULT_DESCRIPTION =
   "When the proposal passes the community vote, the following actions will be executable by the DAO.";
@@ -70,13 +70,15 @@ export const ProposalActions: React.FC<IProposalActionsProps> = (props) => {
 const ActionItem = ({ index, rawAction, onRemove }: { index: number; rawAction: RawAction; onRemove?: () => any }) => {
   const action = useAction(rawAction);
   const title = `Action ${index + 1}`;
-  const coinName = PUB_CHAIN.nativeCurrency.symbol;
+  const coinName = "ETH";
   const isEthTransfer = !action.data || action.data === "0x";
   const functionName = isEthTransfer
     ? `Transfer ${coinName}`
     : decodeCamelCase(action.functionName || "(function call)");
   const functionAbi = action.functionAbi ?? null;
-  const explorerUrl = `${PUB_CHAIN.blockExplorers?.default.url}/address/${action.to}`;
+
+  const { chain } = useAccount();
+  const explorerUrl = `${chain!.blockExplorers?.default.url}/address/${action.to}`;
 
   return (
     <AccordionItem className="border-t border-t-neutral-100 bg-neutral-0" value={title}>

components/proposalVoting/votesDataList/votesDataListItemStructure.tsx

@@ -1,7 +1,7 @@
-import { PUB_CHAIN } from "@/constants";
 import { formatHexString } from "@/utils/evm";
 import { DataListItem, MemberAvatar, Tag, type TagVariant } from "@aragon/gov-ui-kit";
 import classNames from "classnames";
+import { useAccount } from "wagmi";
 
 export type IVotesDataListVariant = "yes" | "approve" | "no" | "abstain" | "veto";
 
@@ -19,7 +19,8 @@ export interface IVotesDataListItemStructureProps {
 export const VotesDataListItemStructure: React.FC<IVotesDataListItemStructureProps> = (props) => {
   const { address, connectedAccount, delegate, ensAvatar, ensName, variant, className, votingPower, ...otherProps } =
     props;
-  const explorerUrl = `${PUB_CHAIN.blockExplorers?.default.url}/address/${address}`;
+  const { chain } = useAccount();
+  const explorerUrl = `${chain!.blockExplorers?.default.url}/address/${address}`;
 
   const label = connectedAccount ? "You" : delegate ? "Your delegate" : null;