feat: UI

Signed-off-by: Pablo Maldonado <pablomaldonadoturci@gmail.com>

web/components/ETHBalance.tsx

@@ -7,7 +7,7 @@ const ETHBalance = () => {
   const { account } = useWeb3React<Web3Provider>();
   const { data } = useETHBalance(account);
 
-  return <p>Balance: Ξ{parseBalance(data ?? 0)}</p>;
+  return <p>Balance: FIL {parseBalance(data ?? 0)}</p>;
 };
 
 export default ETHBalance;

web/components/Header.tsx

@@ -10,8 +10,7 @@ import { useWeb3React } from "@web3-react/core"
 import { Button, Tab, TabList } from "@web3uikit/core"
 import { Bell, MessageCircle, Plus } from "@web3uikit/icons"
 import { useRouter } from "next/router"
-
-const DAI_TOKEN_ADDRESS = "0x6b175474e89094c44da98b954eedeac495271d0f"
+import addresses from "../addresses.json"
 
 const Header = () => {
     const router = useRouter()
@@ -32,7 +31,7 @@ const Header = () => {
     // Get the current route path
     const currentPath = router.pathname
 
-    const keys = ["", "vote", "propose", "dips"]
+    const keys = ["", "vote", "propose"]
 
     const activeTab = 0
 
@@ -57,13 +56,13 @@ const Header = () => {
                     </div>
                 </Link>
                 <Account triedToEagerConnect={triedToEagerConnect} />
-                {/* {isConnected && (
+                {isConnected && (
                     <section>
                         <ETHBalance />
 
-                        <TokenBalance tokenAddress={DAI_TOKEN_ADDRESS} symbol="DAI" />
+                        <TokenBalance tokenAddress={addresses.token} symbol="KICK" />
                     </section>
-                )} */}
+                )}
 
                 <div className="navigation-bar">
                     <TabList
@@ -109,19 +108,6 @@ const Header = () => {
                             }
                             tabKey={2}
                         ></Tab>
-                        <Tab
-                            tabName={
-                                <div
-                                    style={{
-                                        display: "flex",
-                                    }}
-                                >
-                                    <Bell fill="black" fontSize={22} />
-                                    <span style={{ paddingLeft: "4px" }}>DIPs </span>
-                                </div>
-                            }
-                            tabKey={3}
-                        ></Tab>
                     </TabList>
                 </div>
             </div>

web/components/TokenBalance.tsx

@@ -1,22 +1,22 @@
-import type { Web3Provider } from "@ethersproject/providers";
-import { useWeb3React } from "@web3-react/core";
-import useTokenBalance from "../hooks/useTokenBalance";
-import { parseBalance } from "../util";
+import type { Web3Provider } from "@ethersproject/providers"
+import { useWeb3React } from "@web3-react/core"
+import useTokenBalance from "../hooks/useTokenBalance"
+import { parseBalance } from "../util"
 
 type TokenBalanceProps = {
-  tokenAddress: string;
-  symbol: string;
-};
+    tokenAddress: string
+    symbol: string
+}
 
 const TokenBalance = ({ tokenAddress, symbol }: TokenBalanceProps) => {
-  const { account } = useWeb3React<Web3Provider>();
-  const { data } = useTokenBalance(account, tokenAddress);
+    const { account } = useWeb3React<Web3Provider>()
+    const { data } = useTokenBalance(account, tokenAddress)
 
-  return (
-    <p>
-      {`${symbol} Balance`}: {parseBalance(data ?? 0)}
-    </p>
-  );
-};
+    return (
+        <p>
+            {`Balance: ${symbol}`} {parseBalance(data ?? 0)}
+        </p>
+    )
+}
 
-export default TokenBalance;
+export default TokenBalance

web/hooks/useProposals.ts

@@ -0,0 +1,77 @@
+import { ethers } from "ethers"
+import useGovernor from "./useGovernor"
+import { useEffect, useState } from "react"
+import abi from "../contracts/DefiKicksAdapterRegistry.json"
+
+export enum ProposalStatus {
+    Pending,
+    Active,
+    Canceled,
+    Defeated,
+    Succeeded,
+    Queued,
+    Expired,
+    Executed,
+    ResolutionToRequest,
+    ResolutionRequested,
+}
+
+export interface Proposal {
+    name: string
+    description: string
+    link: string
+    votesFor: number
+    votesAgainst: number
+    status: ProposalStatus
+    id: string
+}
+
+export default function useProposals() {
+    const [proposals, setProposals] = useState([])
+    const [loading, setLoading] = useState(true)
+
+    const contract = useGovernor()
+
+    useEffect(() => {
+        const init = async () => {
+            if (!contract) return
+            const filter = contract.filters.ProposalCreated()
+            const proposalsEvents = await contract.queryFilter(filter, 647965, "latest")
+
+            console.log(proposalsEvents)
+            // filter only proposals events with different event.args.proposalId
+
+            const distinctProposalsEvents = proposalsEvents.filter(
+                (event, index, self) =>
+                    index === self.findIndex((e) => e.args.proposalId === event.args.proposalId)
+            )
+
+            const proposals = await Promise.all(
+                distinctProposalsEvents.map(async (event) => {
+                    const status = await contract.state(event.args.proposalId)
+
+                    const iface = new ethers.utils.Interface(abi)
+                    const decodedData = iface.decodeFunctionData(
+                        "addAdapter",
+                        event.args.calldatas[0]
+                    )
+
+                    return {
+                        name: decodedData.name,
+                        description: event.args.description,
+                        link: `https://w3s.link/ipfs/${decodedData.ipfsHash}`,
+                        votesFor: 0,
+                        votesAgainst: 0,
+                        status,
+                        id: event.args.proposalId.toString(),
+                    }
+                })
+            )
+            setProposals(proposals)
+            setLoading(false)
+        }
+        init()
+    }, [contract])
+
+    return { proposals, loading }
+}

web/package.json

@@ -16,6 +16,7 @@
     "@faker-js/faker": "^8.0.2",
     "@helia/json": "^1.0.0",
     "@helia/strings": "^1.0.0",
+    "@material-ui/core": "^4.12.4",
     "@metamask/detect-provider": "^2.0.0",
     "@metamask/onboarding": "^1.0.1",
     "@web3-react/core": "^6.1.9",

web/pages/propose.tsx

@@ -25,7 +25,7 @@ function AdapterForm() {
     // ethers is available in global scope 😉
 
       function run() {
-        // Here you can calculate your TVL this function is will be called by any user with a Lit Action
+        // Here you can calculate your TVL this function will be called by any user with a Lit Action
         // The output will be stored in a Ceramic stream and will be available for everyone 🚀
         const provider = new ethers.providers.JsonRpcProvider(nodeUrl1);
         const latestBlockNumber = await provider.getBlockNumber();