add ragequit form

.github/workflows/main.yml

@@ -1,12 +1,57 @@
-# on:
-#   push:
-#     branches: ["feat/pg"]
-# jobs:
-#   my_first_job:
-#     uses: web3-storage/add-to-web3@v2
-#     id: web3
-#     with:
-#         web3_token: ${{ secrets.WEB3_STORAGE_TOKEN }}
-#         path_to_add: 'dist'
-# - run: echo ${{ steps.web3.outputs.cid }}
-# - run: echo ${{ steps.web3.outputs.url }}
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['feat/v3-summoner-v3-wip']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn build
+        env:
+          VITE_RIVET_KEY: ${{ secrets.VITE_RIVET_KEY }}
+          VITE_WALLET_CONNECT_ID: ${{ secrets.VITE_WALLET_CONNECT_ID }}
+          VITE_GRAPH_API_KEY_MAINNET: ${{ secrets.VITE_GRAPH_API_KEY_MAINNET }}
+          VITE_GOERLI_RPC: ${{ secrets.VITE_GOERLI_RPC }}
+          VITE_OPTIMISM_RPC: ${{ secrets.VITE_OPTIMISM_RPC }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

src/App.tsx

@@ -1,13 +1,27 @@
 import { DHConnectProvider } from '@daohaus/connect';
 import { useState } from 'react';
 import { Routes } from './Routes';
+import styled from 'styled-components';
+
+const BackgroundContainer = styled.div`
+background-image: url("https://scarlet-fluffy-lynx-663.mypinata.cloud/ipfs/QmSnuGc5gcBVzkcGLu7HWwmmUvhxY6XhmsqDu9U5KDBLYt/6.png");
+background-repeat: no-repeat;
+background-size: cover;
+background-position: center;
+
+
+`;
 
 export const App = () => {
   const [daoChainId, setDaoChainId] = useState<string | undefined>();
 
   return (
+    <BackgroundContainer>
+
     <DHConnectProvider daoChainId={daoChainId}>
       <Routes setDaoChainId={setDaoChainId} />
     </DHConnectProvider>
+    </BackgroundContainer>
+
   );
 };

src/components/ClaimButton.tsx

@@ -75,7 +75,7 @@ export const ClaimButton = ({
       disabled={isClaimed || isLoading || mismatchedChain}
       isLoading={isLoading}
     >
-      {isClaimed ? "Already Activated" : "Claim airdrop"}
+      {isClaimed ? "Already Activated" : "Claim Governance Drop"}
     </Button>
   );
 };

src/components/DelegateTBA.tsx

@@ -53,6 +53,35 @@ const AddressDisplayWrapper = styled.div`
   gap: 1.5rem;
 `;
 
+const LinkAsButton = styled.a`
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  cursor: pointer;
+  background-color: #383838;
+  border: 0.1rem solid #383838;
+  &:hover {
+  background-color: #663333;
+  border: 0.1rem solid #663333;
+  }
+  align-items: center;
+  align-items: center;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    display: flex;
+    font-size: 1.6rem;
+    font-weight: 700;
+    height: 4.8rem;
+    justify-content: center;
+    letter-spacing: 1.8px;
+    outline: none;
+    padding: 1.2rem;
+    text-decoration: none;
+    transition: 0.2s all;
+    width: fit-content;
+`;
+
+
 type ButtonProps = {
   tokenId: string;
   contractAddress: string;
@@ -167,7 +196,7 @@ export const DelegateTBA = ({ tokenId, contractAddress }: ButtonProps) => {
     return (
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
-          <Button color="secondary" size="sm">
+          <LinkAsButton>
             Delegate{" "}
             {tbaMember?.delegatingTo.toLocaleLowerCase() == currentUser.toLocaleLowerCase() && (<Tooltip triggerEl={<RiCheckboxCircleFill color="hsl(131, 41.0%, 46.5%)" />} content="Delegating to self" />)}
             {tbaMember?.delegatingTo.toLocaleLowerCase() == tba.toLocaleLowerCase() && (<Tooltip content="Delegated to TBA" />)}
@@ -176,7 +205,7 @@ export const DelegateTBA = ({ tokenId, contractAddress }: ButtonProps) => {
               (tbaMember?.delegatingTo.toLocaleLowerCase() != tba.toLocaleLowerCase() && (
                 <Tooltip content="Delegate is not owner or tba" />
               ))}
-          </Button>
+          </LinkAsButton>
         </DialogTrigger>
 
         <DialogContent title="Delegate TBA">

src/components/NftCard.tsx

@@ -23,6 +23,7 @@ import { useState } from "react";
 import { NftImageDetails } from "./NftImageDetails";
 
 import { MdOutlineOpenInNew } from "react-icons/md";
+import { RageQuitTBA } from "./RageQuitTBA";
 
 const ClaimLink = styled(RouterLink)`
   text-decoration: none;
@@ -160,6 +161,10 @@ export const NftCard = ({ nft, isClaim, isHolder }: NftCardProps) => {
                   tokenId={nft.tokenID}
                   contractAddress={nft.contractAddress}
                 />
+                <RageQuitTBA
+                  tokenId={nft.tokenID}
+                  contractAddress={nft.contractAddress}
+                ></RageQuitTBA>
               </ActionButton>
             </LowerSection>
           )}

src/components/RageQuitForm.tsx

@@ -0,0 +1,186 @@
+import { useMemo, useState } from 'react';
+
+import { FormBuilder, useFormBuilder } from '@daohaus/form-builder';
+import { ABI, NETWORK_TOKEN_ETH_ADDRESS, TokenBalance, encodeFunction, handleErrorMessage, isString } from '@daohaus/utils';
+import { COMMON_FORMS } from '@daohaus/moloch-v3-legos';
+import { sortTokensForRageQuit } from '@daohaus/moloch-v3-fields';
+import { FieldValues } from 'react-hook-form';
+
+import { AppFieldLookup } from '../legos/legoConfig';
+import {
+    useConnectedMember,
+    useCurrentDao,
+    useDaoData,
+    useDaoMembers,
+} from '@daohaus/moloch-v3-hooks';
+import { LOCAL_ABI } from '@daohaus/abis';
+import { erc6551AccountAbiV3 } from '@tokenbound/sdk';
+import { useTxBuilder } from '@daohaus/tx-builder';
+import { useToast } from '@daohaus/ui';
+
+export const RageQuit = ({
+    tbaAddress,
+    currentUser
+}: {
+    tbaAddress: string;
+    currentUser: string;
+}) => {
+    const { dao, refetch } = useDaoData();
+    const { refetch: refetchMembers } = useDaoMembers();
+    const { daoChain, daoId } = useCurrentDao();
+    const { fireTransaction } = useTxBuilder();
+    const { errorToast, defaultToast } = useToast();
+    const [txWaiting, setTxWating] = useState(false);
+
+
+    const defaultFields = useMemo(() => {
+        if (dao) {
+            const treasury = dao.vaults.find(
+                (v) => dao.safeAddress === v.safeAddress
+            );
+
+            return {
+                tba: tbaAddress,
+                to: currentUser,
+                tokens:
+                    treasury &&
+                    sortTokensForRageQuit(
+                        treasury.tokenBalances
+                            .filter((token: TokenBalance) => Number(token.balance) > 0)
+                            .map(
+                                (token: TokenBalance) =>
+                                    token.tokenAddress || NETWORK_TOKEN_ETH_ADDRESS
+                            )
+                    ),
+            };
+        }
+    }, [currentUser, dao]);
+
+    const handleSubmit = (formVaules: FieldValues) => {
+
+        if (!dao) {
+            return;
+        }
+        setTxWating(true);
+
+        const encodedRagequit = encodeFunction(LOCAL_ABI.BAAL, "ragequit", [
+            formVaules.to,
+            formVaules.sharesToBurn,
+            formVaules.lootToBurn,
+            formVaules.tokens,
+        ]);
+        if (!isString(encodedRagequit)) {
+            throw new Error("Unable to encode delegate function");
+        }
+
+        console.log(encodedRagequit);
+
+        fireTransaction({
+            tx: {
+                id: "RAGEQUIT_TO_OWNER",
+                contract: {
+                    type: "static",
+                    contractName: "CURRENT_TBA",
+                    abi: erc6551AccountAbiV3 as ABI,
+                    targetAddress: tbaAddress as `0x${string}`,
+                },
+                method: "execute",
+                disablePoll: true,
+                args: [
+                    { type: "static", value: dao.id },
+                    { type: "static", value: 0 },
+                    { type: "static", value: encodedRagequit },
+                    { type: "static", value: 0 },
+                ],
+            },
+            lifeCycleFns: {
+                onTxError: (error) => {
+                    const errMsg = handleErrorMessage({
+                        error,
+                    });
+                    errorToast({ title: "Ragequit Failed", description: errMsg });
+                    setTxWating(false);
+                },
+                onTxSuccess: () => {
+                    defaultToast({
+                        title: "Ragequit Success",
+                        description: "Please wait...",
+                    });
+                    setTxWating(false);
+                },
+            },
+        });
+    }
+
+    if (!dao || !currentUser) {
+        return null;
+    }
+
+
+    //   const encodedRagequit = encodeFunction(LOCAL_ABI.BAAL, "ragequit", [
+
+    //   ]);
+
+    return (
+        <FormBuilder
+            defaultValues={defaultFields}
+            form={{
+                id: 'RAGEQUIT',
+                title: 'Ragequit',
+                subtitle: 'Receive tokens in exchange for its shares and/or loot.',
+                fields: [
+                    {
+                        id: 'tba',
+                        type: 'input',
+                        label: 'Address of TBA',
+                        expectType: 'ethAddress',
+                        placeholder: '0x...',
+                    },
+                    {
+                        id: 'tokenAmounts',
+                        type: 'formSegment',
+                        title: 'Step 1. Select voting and/or non-voting tokens to ragequit',
+                        fields: [
+                            {
+                                id: 'sharesToBurn',
+                                type: 'tbaRageQuitToken',
+                            },
+                            { id: 'lootToBurn', type: 'tbaRageQuitToken' },
+                        ],
+                    },
+                    {
+                        id: 'tokenAddresses',
+                        type: 'formSegment',
+                        title:
+                            'Step 2. Select treasury tokens you want to receive in exchange for your DAO tokens',
+                        fields: [{ id: 'tokens', type: 'ragequitTokenList' }],
+                    },
+                    {
+                        id: 'checkRender',
+                        type: 'checkRender',
+                        gateLabel: 'Ragequit to different address (optional)',
+                        components: [
+                            {
+                                id: 'to',
+                                type: 'input',
+                                label: 'Address to send funds',
+                                expectType: 'ethAddress',
+                                placeholder: '0x...',
+                            },
+                        ],
+                    },
+                ]
+            }}
+            customFields={AppFieldLookup}
+            onSubmit={handleSubmit}
+            //   lifeCycleFns={{
+            //     onPollSuccess: () => {
+            //       onFormComplete();
+            //     },
+            //   }}
+            targetNetwork={daoChain}
+        />
+    );
+}
+
+export default RageQuit;