From 2500da1c240e0bd96ae343ff74e59c55bddd4766 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 30 Jun 2022 14:57:13 -0400
Subject: [PATCH 001/113] Add useProposals and useProposal hooks with mock data

---
 src/hooks/useProposal.ts  |  50 ++++++++++++
 src/hooks/useProposals.ts | 165 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 215 insertions(+)
 create mode 100644 src/hooks/useProposal.ts
 create mode 100644 src/hooks/useProposals.ts

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
new file mode 100644
index 0000000000..249d289e65
--- /dev/null
+++ b/src/hooks/useProposal.ts
@@ -0,0 +1,50 @@
+import { useQuery } from "react-query";
+import { nonNullable } from "src/helpers/types/nonNullable";
+
+import {
+  mockGetNoVotesForProposal,
+  mockGetProposalContent,
+  mockGetProposalHasBeenActivated,
+  mockGetProposalMetadata,
+  mockGetProposalTotalEndorsements,
+  mockGetProposalURI,
+  mockGetYesVotesForProposal,
+  Proposal,
+} from "./useProposals";
+
+const proposalQueryKey = (instructionsIndex: number) => ["useProposal", instructionsIndex].filter(nonNullable);
+
+export const useProposal = (instructionsIndex: number) => {
+  /// const IPFSDContract = "";
+  /// const governanceContract = "";
+
+  const query = useQuery<Proposal, Error>(
+    proposalQueryKey(instructionsIndex),
+    async () => {
+      const proposal = mockGetProposalMetadata(instructionsIndex);
+      const isActive = mockGetProposalHasBeenActivated(instructionsIndex);
+      const endorsements = mockGetProposalTotalEndorsements(instructionsIndex);
+      const yesVotes = mockGetYesVotesForProposal(instructionsIndex);
+      const noVotes = mockGetNoVotesForProposal(instructionsIndex);
+      const proposalURI = mockGetProposalURI(proposal.proposalName);
+      const proposalContent = mockGetProposalContent(proposalURI);
+
+      const currentProposal = {
+        proposalName: proposal.proposalName,
+        proposer: proposal.proposer,
+        submissionTimestamp: proposal.submissionTimestamp,
+        isActive: isActive,
+        endorsements: endorsements,
+        yesVotes: yesVotes,
+        noVotes: noVotes,
+        uri: proposalURI,
+        content: proposalContent,
+      };
+
+      return currentProposal;
+    },
+    { enabled: true },
+  );
+
+  return query as typeof query;
+};
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
new file mode 100644
index 0000000000..9d68f7e540
--- /dev/null
+++ b/src/hooks/useProposals.ts
@@ -0,0 +1,165 @@
+import { useQuery } from "react-query";
+import { nonNullable } from "src/helpers/types/nonNullable";
+
+interface proposalMetadata {
+  proposalName: string;
+  proposer: string;
+  submissionTimestamp: string;
+}
+
+export interface Proposal {
+  proposalName: string;
+  proposer: string;
+  submissionTimestamp: string;
+  isActive: boolean;
+  endorsements: number;
+  yesVotes: number;
+  noVotes: number;
+  uri: string;
+  content: string;
+}
+
+export const mockTotalInstructions = 3;
+export const activeProposal = 3;
+
+export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
+  0: {
+    proposalName: "0x4f49502d310000000000000000000000000000000000000000000000000000",
+    proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
+    submissionTimestamp: "1653948322",
+  },
+  1: {
+    proposalName: "0x4f49502d320000000000000000000000000000000000000000000000000000",
+    proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
+    submissionTimestamp: "1655157922",
+  },
+  2: {
+    proposalName: "0x4f49502d330000000000000000000000000000000000000000000000000000",
+    proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
+    submissionTimestamp: "1655503522",
+  },
+  3: {
+    proposalName: "0x4f49502d340000000000000000000000000000000000000000000000000000",
+    proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
+    submissionTimestamp: "1656626722",
+  },
+};
+
+export const mockProposalTotalEndorsements: { [key: number]: number } = {
+  0: 1000,
+  1: 50,
+  2: 275,
+  3: 432,
+};
+
+export const mockProposalHasBeenActivated: { [key: number]: boolean } = {
+  0: true,
+  1: false,
+  2: true,
+  3: true,
+};
+
+export const mockYesVotesForProposal: { [key: number]: number } = {
+  0: 1234,
+  1: 0,
+  2: 1546,
+  3: 2583,
+};
+
+export const mockNoVotesForProposal: { [key: number]: number } = {
+  0: 152,
+  1: 0,
+  2: 2436,
+  3: 1875,
+};
+
+export const mockProposalURIs: { [key: string]: string } = {
+  "0x4f49502d310000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberone",
+  "0x4f49502d320000000000000000000000000000000000000000000000000000": "ipfs://proposalnumbertwo",
+  "0x4f49502d330000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberthree",
+  "0x4f49502d340000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberfour",
+};
+
+export const mockProposalContent: { [key: string]: string } = {
+  "ipfs://proposalnumberone": "This is OIP-1. The first mock proposal",
+  "ipfs://proposalnumbertwo": "This is OIP-2. The second mock proposal",
+  "ipfs://proposalnumberthree": "This is OIP-3. The third mock proposal",
+  "ipfs://proposalnumberfour": "This is OIP-4. The fourth mock proposal",
+};
+
+export const mockGetTotalInstructions = (): number => {
+  return mockTotalInstructions;
+};
+
+export const mockGetProposalMetadata = (instructionIndex: number) => {
+  return mockProposalMetadata[instructionIndex];
+};
+
+export const mockGetProposalTotalEndorsements = (instructionsIndex: number): number => {
+  return mockProposalTotalEndorsements[instructionsIndex];
+};
+
+export const mockGetProposalHasBeenActivated = (instructionsIndex: number): boolean => {
+  return mockProposalHasBeenActivated[instructionsIndex];
+};
+
+export const mockGetYesVotesForProposal = (instructionsIndex: number): number => {
+  return mockYesVotesForProposal[instructionsIndex];
+};
+
+export const mockGetNoVotesForProposal = (instructionsIndex: number): number => {
+  return mockNoVotesForProposal[instructionsIndex];
+};
+
+export const mockGetProposalURI = (proposalName: string): string => {
+  return mockProposalURIs[proposalName];
+};
+
+export const mockGetProposalContent = (uri: string): string => {
+  return mockProposalContent[uri];
+};
+
+export const proposalsQueryKey = () => ["useProposals"].filter(nonNullable);
+
+export const useProposals = () => {
+  /// const INSTRContract = "";
+  /// const IPFSDContract = "";
+  /// const governanceContract = "";
+
+  const query = useQuery<Proposal[], Error>(
+    proposalsQueryKey(),
+    async () => {
+      const totalInstructions = mockGetTotalInstructions();
+      const allProposals: Proposal[] = [];
+
+      for (let i = 0; i < totalInstructions; i++) {
+        const proposal = mockGetProposalMetadata(i);
+        const isActive = mockGetProposalHasBeenActivated(i);
+        const endorsements = mockGetProposalTotalEndorsements(i);
+        const yesVotes = mockGetYesVotesForProposal(i);
+        const noVotes = mockGetNoVotesForProposal(i);
+        const proposalURI = mockGetProposalURI(proposal.proposalName);
+        const proposalContent = mockGetProposalContent(proposalURI);
+
+        const currentProposal = {
+          proposalName: proposal.proposalName,
+          proposer: proposal.proposer,
+          submissionTimestamp: proposal.submissionTimestamp,
+          isActive: isActive,
+          endorsements: endorsements,
+          yesVotes: yesVotes,
+          noVotes: noVotes,
+          uri: proposalURI,
+          content: proposalContent,
+        };
+
+        allProposals.push(currentProposal);
+      }
+
+      return allProposals;
+    },
+    { enabled: true },
+  );
+
+  return query as typeof query;
+};

From d34d77e640dc5344c937ac6460d955fafac5258c Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Fri, 1 Jul 2022 13:11:59 -0400
Subject: [PATCH 002/113] Documentation for useProposals and useProposal

---
 src/hooks/useProposal.ts  | 14 ++++++++++++++
 src/hooks/useProposals.ts | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 249d289e65..74bab67389 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,6 +1,7 @@
 import { useQuery } from "react-query";
 import { nonNullable } from "src/helpers/types/nonNullable";
 
+/// Import Proposal data type and mock data getters from useProposals
 import {
   mockGetNoVotesForProposal,
   mockGetProposalContent,
@@ -12,8 +13,20 @@ import {
   Proposal,
 } from "./useProposals";
 
+/**
+ * @notice Query key for useProposal which is dependent on instructionsIndex
+ * @param instructionsIndex The index number of the proposal to fetch
+ */
 const proposalQueryKey = (instructionsIndex: number) => ["useProposal", instructionsIndex].filter(nonNullable);
 
+/**
+ * @notice  Fetches the metadata, related endorsements, yes votes, and no votes for the proposal
+ *          at the passed index. Uses the proposal metadata to fetch the IPFS URIs containing the
+ *          proposal content. Puts it into a big Proposal object.
+ * @param instructionsIndex The index number of the proposal to fetch
+ * @returns Query object in which the data attribute holds a Proposal object for the proposal at
+ *          relevant index
+ */
 export const useProposal = (instructionsIndex: number) => {
   /// const IPFSDContract = "";
   /// const governanceContract = "";
@@ -21,6 +34,7 @@ export const useProposal = (instructionsIndex: number) => {
   const query = useQuery<Proposal, Error>(
     proposalQueryKey(instructionsIndex),
     async () => {
+      /// For the specified proposal index, fetch the relevant data points used in the frontend
       const proposal = mockGetProposalMetadata(instructionsIndex);
       const isActive = mockGetProposalHasBeenActivated(instructionsIndex);
       const endorsements = mockGetProposalTotalEndorsements(instructionsIndex);
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 9d68f7e540..913731e9eb 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,12 +1,14 @@
 import { useQuery } from "react-query";
 import { nonNullable } from "src/helpers/types/nonNullable";
 
+/// Data type for return from getProposalMetadata on Governance.sol
 interface proposalMetadata {
   proposalName: string;
   proposer: string;
   submissionTimestamp: string;
 }
 
+/// Data type for returning full proposal informations
 export interface Proposal {
   proposalName: string;
   proposer: string;
@@ -19,9 +21,13 @@ export interface Proposal {
   content: string;
 }
 
+/// Mock totalInstructions value from INSTR.sol
 export const mockTotalInstructions = 3;
+
+/// Mock instructions ID for current active proposal
 export const activeProposal = 3;
 
+/// Mock mapping data for proposalMetadata in Governance.sol
 export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
   0: {
     proposalName: "0x4f49502d310000000000000000000000000000000000000000000000000000",
@@ -45,6 +51,7 @@ export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
   },
 };
 
+/// Mock mapping data on total endorsements in Governance.sol
 export const mockProposalTotalEndorsements: { [key: number]: number } = {
   0: 1000,
   1: 50,
@@ -52,6 +59,7 @@ export const mockProposalTotalEndorsements: { [key: number]: number } = {
   3: 432,
 };
 
+/// Mock mapping data on proposal activation in Governance.sol
 export const mockProposalHasBeenActivated: { [key: number]: boolean } = {
   0: true,
   1: false,
@@ -59,6 +67,7 @@ export const mockProposalHasBeenActivated: { [key: number]: boolean } = {
   3: true,
 };
 
+/// Mock mapping data on proposal yes votes in Governance.sol
 export const mockYesVotesForProposal: { [key: number]: number } = {
   0: 1234,
   1: 0,
@@ -66,6 +75,7 @@ export const mockYesVotesForProposal: { [key: number]: number } = {
   3: 2583,
 };
 
+/// Mock mapping data on proposal no votes in Governance.sol
 export const mockNoVotesForProposal: { [key: number]: number } = {
   0: 152,
   1: 0,
@@ -73,6 +83,7 @@ export const mockNoVotesForProposal: { [key: number]: number } = {
   3: 1875,
 };
 
+/// Mock IPFS URI values by proposal bytes32 name
 export const mockProposalURIs: { [key: string]: string } = {
   "0x4f49502d310000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberone",
   "0x4f49502d320000000000000000000000000000000000000000000000000000": "ipfs://proposalnumbertwo",
@@ -80,6 +91,7 @@ export const mockProposalURIs: { [key: string]: string } = {
   "0x4f49502d340000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberfour",
 };
 
+/// Mock content stores by IPFS URI
 export const mockProposalContent: { [key: string]: string } = {
   "ipfs://proposalnumberone": "This is OIP-1. The first mock proposal",
   "ipfs://proposalnumbertwo": "This is OIP-2. The second mock proposal",
@@ -87,40 +99,59 @@ export const mockProposalContent: { [key: string]: string } = {
   "ipfs://proposalnumberfour": "This is OIP-4. The fourth mock proposal",
 };
 
+/// Function to return mock total instructions in lieu of a contract
 export const mockGetTotalInstructions = (): number => {
   return mockTotalInstructions;
 };
 
+/// Function to return mock proposal metadata in lieu of a contract
 export const mockGetProposalMetadata = (instructionIndex: number) => {
   return mockProposalMetadata[instructionIndex];
 };
 
+/// Function to return mock proposal endoresments in lieu of a contract
 export const mockGetProposalTotalEndorsements = (instructionsIndex: number): number => {
   return mockProposalTotalEndorsements[instructionsIndex];
 };
 
+/// Function to return mock proposal activation data in lieu of a contract
 export const mockGetProposalHasBeenActivated = (instructionsIndex: number): boolean => {
   return mockProposalHasBeenActivated[instructionsIndex];
 };
 
+/// Function to return mock proposal yes votes in lieu of a contract
 export const mockGetYesVotesForProposal = (instructionsIndex: number): number => {
   return mockYesVotesForProposal[instructionsIndex];
 };
 
+/// Function to return mock proposal no votes in lieu of a contract
 export const mockGetNoVotesForProposal = (instructionsIndex: number): number => {
   return mockNoVotesForProposal[instructionsIndex];
 };
 
+/// Function to return mock proposal URI in lieu of a contract
 export const mockGetProposalURI = (proposalName: string): string => {
   return mockProposalURIs[proposalName];
 };
 
+/// Function to return mock proposal content in lieu of content deployed to IPFS
 export const mockGetProposalContent = (uri: string): string => {
   return mockProposalContent[uri];
 };
 
+/**
+ * Query key for useProposals. Doesn't need to be refreshed on address or network changes
+ * Proposals should be fetched no matter what.
+ */
 export const proposalsQueryKey = () => ["useProposals"].filter(nonNullable);
 
+/**
+ * @notice  Fetches proposals from Governance policy, the related endorsements, yes votes,
+ *          and no votes. Uses the proposal metadata to fetch the IPFS URIs containing the
+ *          proposal content. Puts it into a big Proposal object.
+ * @returns Query object in which the data attribute holds an array of Proposal objects for
+ *          all proposals in the Governance policy contract
+ */
 export const useProposals = () => {
   /// const INSTRContract = "";
   /// const IPFSDContract = "";
@@ -129,10 +160,12 @@ export const useProposals = () => {
   const query = useQuery<Proposal[], Error>(
     proposalsQueryKey(),
     async () => {
-      const totalInstructions = mockGetTotalInstructions();
+      /// Get total number of proposal through INSTR module contract's totalInstructions variable
+      const numberOfProposals = mockGetTotalInstructions();
       const allProposals: Proposal[] = [];
 
-      for (let i = 0; i < totalInstructions; i++) {
+      /// For each proposal, fetch the relevant data points used in the frontend
+      for (let i = 0; i < numberOfProposals; i++) {
         const proposal = mockGetProposalMetadata(i);
         const isActive = mockGetProposalHasBeenActivated(i);
         const endorsements = mockGetProposalTotalEndorsements(i);

From 28d2fb88ff94f984a3b4b78d1cf83bd0d1dd4c26 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Fri, 1 Jul 2022 13:15:20 -0400
Subject: [PATCH 003/113] Update component-library for governance components

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e0502914f7..f164454de5 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.8.4",
     "@multifarm/widget": "^0.0.159",
-    "@olympusdao/component-library": "^2.2.1",
+    "@olympusdao/component-library": "^2.2.2-gov.0",
     "@rainbow-me/rainbowkit": "^0.3.7",
     "@reduxjs/toolkit": "^1.8.2",
     "@types/material-ui": "^0.21.12",
diff --git a/yarn.lock b/yarn.lock
index a27e515250..1848cc077d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2795,10 +2795,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@olympusdao/component-library@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.1.tgz#ac783b1392999e37512ecddc529c418246ee578a"
-  integrity sha512-its4KxsiC8wXDZWSKYVnY2Oai9Ai77yaeXP2nsfhIDMzJu8xOtqXSAkCFtTRFEAPtCtI3btMNlJvxjps9e2riw==
+"@olympusdao/component-library@^2.2.2-gov.0":
+  version "2.2.2-gov.0"
+  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-gov.0.tgz#b5d6d6b8c57ecd53e8431897525c5f45886f9bf0"
+  integrity sha512-qBsM4RU4rzU6kdnEACfeTMzI7vH7iXeBX469vepbkv39SG1eZ7UEcZeO3XIwDdN4s+eHqc1h2Ssiyi63flO5+w==
   dependencies:
     "@react-spring/web" "^9.4.5"
 

From ef8b84ff4af383c5007b14367c80f2b21bd14e2f Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 5 Jul 2022 14:48:51 -0400
Subject: [PATCH 004/113] Add proposals dashboard, frame of filter modal

---
 src/App.tsx                                   |  3 +
 src/hooks/useProposals.ts                     | 19 ++---
 src/views/Governance/Governance.scss          |  9 +++
 src/views/Governance/ProposalsDashboard.tsx   | 74 +++++++++++++++++++
 .../components/FilterModal/FilterModal.scss   |  0
 .../components/FilterModal/FilterModal.tsx    | 16 ++++
 .../components/FilterModal/index.ts           |  1 +
 .../components/SearchBar/SearchBar.scss       | 13 ++++
 .../components/SearchBar/SearchBar.tsx        | 20 +++++
 .../Governance/components/SearchBar/index.ts  |  1 +
 10 files changed, 147 insertions(+), 9 deletions(-)
 create mode 100644 src/views/Governance/Governance.scss
 create mode 100644 src/views/Governance/ProposalsDashboard.tsx
 create mode 100644 src/views/Governance/components/FilterModal/FilterModal.scss
 create mode 100644 src/views/Governance/components/FilterModal/FilterModal.tsx
 create mode 100644 src/views/Governance/components/FilterModal/index.ts
 create mode 100644 src/views/Governance/components/SearchBar/SearchBar.scss
 create mode 100644 src/views/Governance/components/SearchBar/SearchBar.tsx
 create mode 100644 src/views/Governance/components/SearchBar/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 8122e1a4d6..a64b963af6 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,6 +38,7 @@ import { dark as darkTheme } from "./themes/dark.js";
 import { girth as gTheme } from "./themes/girth.js";
 import { light as lightTheme } from "./themes/light.js";
 import { multifarmDarkTheme, multifarmLightTheme } from "./themes/multifarm";
+import { ProposalsDashboard } from "./views/Governance/ProposalsDashboard";
 
 // Dynamic Imports for code splitting
 const Bond = lazy(() => import("./views/Bond"));
@@ -273,6 +274,8 @@ function App() {
                     <Route path={"/wallet/history"} element={<Wallet open={true} component="wallet/history" />} />
                     <Route path="/wallet" element={<Wallet open={true} component="wallet" />}></Route>
                     <Route path="*" element={<NotFound />} />
+
+                    <Route path="/governancetest" element={<ProposalsDashboard />} />
                   </Routes>
                 </Suspense>
               </div>
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 913731e9eb..aa4849feb5 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,3 +1,4 @@
+import { ethers } from "ethers";
 import { useQuery } from "react-query";
 import { nonNullable } from "src/helpers/types/nonNullable";
 
@@ -30,22 +31,22 @@ export const activeProposal = 3;
 /// Mock mapping data for proposalMetadata in Governance.sol
 export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
   0: {
-    proposalName: "0x4f49502d310000000000000000000000000000000000000000000000000000",
+    proposalName: "0x4f49502d31000000000000000000000000000000000000000000000000000000",
     proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
     submissionTimestamp: "1653948322",
   },
   1: {
-    proposalName: "0x4f49502d320000000000000000000000000000000000000000000000000000",
+    proposalName: "0x4f49502d32000000000000000000000000000000000000000000000000000000",
     proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
     submissionTimestamp: "1655157922",
   },
   2: {
-    proposalName: "0x4f49502d330000000000000000000000000000000000000000000000000000",
+    proposalName: "0x4f49502d33000000000000000000000000000000000000000000000000000000",
     proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
     submissionTimestamp: "1655503522",
   },
   3: {
-    proposalName: "0x4f49502d340000000000000000000000000000000000000000000000000000",
+    proposalName: "0x4f49502d34000000000000000000000000000000000000000000000000000000",
     proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
     submissionTimestamp: "1656626722",
   },
@@ -85,10 +86,10 @@ export const mockNoVotesForProposal: { [key: number]: number } = {
 
 /// Mock IPFS URI values by proposal bytes32 name
 export const mockProposalURIs: { [key: string]: string } = {
-  "0x4f49502d310000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberone",
-  "0x4f49502d320000000000000000000000000000000000000000000000000000": "ipfs://proposalnumbertwo",
-  "0x4f49502d330000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberthree",
-  "0x4f49502d340000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberfour",
+  "0x4f49502d31000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberone",
+  "0x4f49502d32000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumbertwo",
+  "0x4f49502d33000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberthree",
+  "0x4f49502d34000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberfour",
 };
 
 /// Mock content stores by IPFS URI
@@ -175,7 +176,7 @@ export const useProposals = () => {
         const proposalContent = mockGetProposalContent(proposalURI);
 
         const currentProposal = {
-          proposalName: proposal.proposalName,
+          proposalName: ethers.utils.parseBytes32String(proposal.proposalName),
           proposer: proposal.proposer,
           submissionTimestamp: proposal.submissionTimestamp,
           isActive: isActive,
diff --git a/src/views/Governance/Governance.scss b/src/views/Governance/Governance.scss
new file mode 100644
index 0000000000..67ecd8885d
--- /dev/null
+++ b/src/views/Governance/Governance.scss
@@ -0,0 +1,9 @@
+.proposals-dash {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  .dashboard-actions {
+    margin-bottom: 25px;
+  }
+}
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
new file mode 100644
index 0000000000..624ca80226
--- /dev/null
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -0,0 +1,74 @@
+import "./Governance.scss";
+
+import { t } from "@lingui/macro";
+import { Grid, Link } from "@mui/material";
+import { Paper, Proposal, SecondaryButton } from "@olympusdao/component-library";
+import { useMemo, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { Proposal as ProposalType, useProposals } from "src/hooks/useProposals";
+
+import { FilterModal } from "./components/FilterModal";
+import { SearchBar } from "./components/SearchBar/SearchBar";
+
+export const ProposalsDashboard = () => {
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+
+  const _useProposals = useProposals();
+  const allProposalsData: ProposalType[] = useMemo(() => {
+    if (_useProposals.isLoading || !_useProposals.data) return [];
+    return _useProposals.data;
+  }, [_useProposals]);
+
+  const handleFilterClick = () => {
+    setIsFilterModalOpen(true);
+  };
+
+  const handleFilterModalCancel = () => {
+    setIsFilterModalOpen(false);
+  };
+
+  const renderProposals = () => {
+    return allProposalsData.map(proposal => {
+      return (
+        <Grid item xs={12}>
+          <Link to={`/governancetest/proposals/${proposal.proposalName}`} component={RouterLink}>
+            <Proposal
+              chipLabel="Discussion"
+              proposalTitle={proposal.proposalName}
+              publishedDate={new Date(1659389876)}
+              status="discussion"
+              voteEndDate={new Date(1659389876)}
+              votesAbstain={0}
+              votesAgainst={proposal.noVotes}
+              votesFor={proposal.yesVotes}
+            />
+          </Link>
+        </Grid>
+      );
+    });
+  };
+
+  return (
+    <div className="proposals-dash">
+      <Paper headerText={t`Proposals`}>
+        <Grid
+          className="dashboard-actions"
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <SecondaryButton startIconName="hamburger" onClick={handleFilterClick}>
+            Filter
+          </SecondaryButton>
+          <SearchBar />
+        </Grid>
+        <Grid container direction="column" spacing={2}>
+          {renderProposals()}
+        </Grid>
+      </Paper>
+
+      <FilterModal isModalOpen={isFilterModalOpen} cancelFunc={handleFilterModalCancel} />
+    </div>
+  );
+};
diff --git a/src/views/Governance/components/FilterModal/FilterModal.scss b/src/views/Governance/components/FilterModal/FilterModal.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/views/Governance/components/FilterModal/FilterModal.tsx b/src/views/Governance/components/FilterModal/FilterModal.tsx
new file mode 100644
index 0000000000..37a60f2e93
--- /dev/null
+++ b/src/views/Governance/components/FilterModal/FilterModal.tsx
@@ -0,0 +1,16 @@
+import { Typography } from "@mui/material";
+import { Modal } from "@olympusdao/component-library";
+import { CancelCallback } from "src/views/Give/Interfaces";
+
+type FilterModalProps = {
+  isModalOpen: boolean;
+  cancelFunc: CancelCallback;
+};
+
+export const FilterModal = ({ isModalOpen, cancelFunc }: FilterModalProps) => {
+  return (
+    <Modal open={isModalOpen} onClose={cancelFunc} headerText="Filter by" closePosition="right" minHeight="450px">
+      <Typography variant="h4">Filter Modal</Typography>
+    </Modal>
+  );
+};
diff --git a/src/views/Governance/components/FilterModal/index.ts b/src/views/Governance/components/FilterModal/index.ts
new file mode 100644
index 0000000000..65b7f68c0a
--- /dev/null
+++ b/src/views/Governance/components/FilterModal/index.ts
@@ -0,0 +1 @@
+export { FilterModal } from "./FilterModal";
diff --git a/src/views/Governance/components/SearchBar/SearchBar.scss b/src/views/Governance/components/SearchBar/SearchBar.scss
new file mode 100644
index 0000000000..a374c33171
--- /dev/null
+++ b/src/views/Governance/components/SearchBar/SearchBar.scss
@@ -0,0 +1,13 @@
+.search-bar {
+  display: flex;
+  justify-content: flex-end;
+
+  .search-input {
+    width: 100%;
+    color: #bbbdc0;
+
+    .MuiSvgIcon-root {
+      fill: #bbbdc0;
+    }
+  }
+}
diff --git a/src/views/Governance/components/SearchBar/SearchBar.tsx b/src/views/Governance/components/SearchBar/SearchBar.tsx
new file mode 100644
index 0000000000..d247d97b17
--- /dev/null
+++ b/src/views/Governance/components/SearchBar/SearchBar.tsx
@@ -0,0 +1,20 @@
+import "./SearchBar.scss";
+
+import SearchIcon from "@mui/icons-material/Search";
+import { Grid, InputAdornment, OutlinedInput } from "@mui/material";
+
+export const SearchBar = () => {
+  return (
+    <Grid className="search-bar" item xs={4}>
+      <OutlinedInput
+        className="search-input"
+        startAdornment={
+          <InputAdornment position="start">
+            <SearchIcon />
+          </InputAdornment>
+        }
+        placeholder="Search proposal"
+      />
+    </Grid>
+  );
+};
diff --git a/src/views/Governance/components/SearchBar/index.ts b/src/views/Governance/components/SearchBar/index.ts
new file mode 100644
index 0000000000..5932700db5
--- /dev/null
+++ b/src/views/Governance/components/SearchBar/index.ts
@@ -0,0 +1 @@
+export { SearchBar } from "./SearchBar";

From 84d9befe0b57ba0e6047ac09ecaa8800226bd649 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 7 Jul 2022 13:30:22 -0500
Subject: [PATCH 005/113] remove childPaperBackground compile issue

---
 src/views/Give/Give.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Give/Give.tsx b/src/views/Give/Give.tsx
index 10d8f33657..86ce00eba8 100644
--- a/src/views/Give/Give.tsx
+++ b/src/views/Give/Give.tsx
@@ -47,7 +47,7 @@ function Give({ selectedIndex = 0 }) {
               <Grid item xs={12} sm={10} md={10} lg={8}>
                 <Paper
                   headerText={t`Give`}
-                  childPaperBackground={true}
+                  // childPaperBackground={true}
                   fullWidth
                   className="no-container-padding"
                   zoom={false}

From cedb8b6606db7acb26c3b0b29ee739ac5031e500 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 7 Jul 2022 15:47:27 -0500
Subject: [PATCH 006/113] mocked up modal

---
 .../components/FilterModal/FilterModal.tsx    | 87 ++++++++++++++++++-
 1 file changed, 84 insertions(+), 3 deletions(-)

diff --git a/src/views/Governance/components/FilterModal/FilterModal.tsx b/src/views/Governance/components/FilterModal/FilterModal.tsx
index 37a60f2e93..a5e2e56dee 100644
--- a/src/views/Governance/components/FilterModal/FilterModal.tsx
+++ b/src/views/Governance/components/FilterModal/FilterModal.tsx
@@ -1,5 +1,8 @@
-import { Typography } from "@mui/material";
-import { Modal } from "@olympusdao/component-library";
+import { t } from "@lingui/macro";
+import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
+import { Box, Checkbox, FormControlLabel } from "@mui/material";
+import { Modal, PrimaryButton, SecondaryButton } from "@olympusdao/component-library";
+import { useState } from "react";
 import { CancelCallback } from "src/views/Give/Interfaces";
 
 type FilterModalProps = {
@@ -8,9 +11,87 @@ type FilterModalProps = {
 };
 
 export const FilterModal = ({ isModalOpen, cancelFunc }: FilterModalProps) => {
+  const [checkedActive, setCheckedActive] = useState(false);
+  const [checkedEndorsements, setCheckedEndorsements] = useState(false);
+  const [checkedDiscussions, setCheckedDiscussions] = useState(false);
+  const [checkedDraft, setCheckedDraft] = useState(false);
+  const [checkedClosed, setCheckedClosed] = useState(false);
+
   return (
     <Modal open={isModalOpen} onClose={cancelFunc} headerText="Filter by" closePosition="right" minHeight="450px">
-      <Typography variant="h4">Filter Modal</Typography>
+      <>
+        <Box mt="28px">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={checkedActive}
+                onChange={event => setCheckedActive(event.target.checked)}
+                icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+              />
+            }
+            label={t`Active`}
+          />
+        </Box>
+        <Box mt="28px">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={checkedEndorsements}
+                onChange={event => setCheckedEndorsements(event.target.checked)}
+                icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+              />
+            }
+            label={t`Endorsements`}
+          />
+        </Box>
+        <Box mt="28px">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={checkedDiscussions}
+                onChange={event => setCheckedDiscussions(event.target.checked)}
+                icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+              />
+            }
+            label={t`Discussions`}
+          />
+        </Box>
+        <Box mt="28px">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={checkedDraft}
+                onChange={event => setCheckedDraft(event.target.checked)}
+                icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+              />
+            }
+            label={t`Draft`}
+          />
+        </Box>
+        <Box mt="28px">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={checkedClosed}
+                onChange={event => setCheckedClosed(event.target.checked)}
+                icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+              />
+            }
+            label={t`Closed`}
+          />
+        </Box>
+        <Box display="flex" justifyContent="center">
+          <SecondaryButton template="secondary" sx={{ flexGrow: "1" }}>
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton sx={{ flexGrow: "1" }}>Save</PrimaryButton>
+        </Box>
+      </>
     </Modal>
   );
 };

From faffeab7d209d3333989ee07da448721b801dd56 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 12 Jul 2022 12:51:21 -0500
Subject: [PATCH 007/113] wip - filtration work in progress

---
 src/hooks/useProposals.ts                     | 19 ++++++++++++++-----
 src/views/Governance/ProposalsDashboard.tsx   |  2 +-
 .../components/FilterModal/FilterModal.tsx    |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index aa4849feb5..afcaefbbd9 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -144,7 +144,13 @@ export const mockGetProposalContent = (uri: string): string => {
  * Query key for useProposals. Doesn't need to be refreshed on address or network changes
  * Proposals should be fetched no matter what.
  */
-export const proposalsQueryKey = () => ["useProposals"].filter(nonNullable);
+export const proposalsQueryKey = (filters: { isActive?: boolean }) => {
+  if (filters) {
+    return ["useProposals", filters].filter(nonNullable);
+  } else {
+    return ["useProposals"].filter(nonNullable);
+  }
+};
 
 /**
  * @notice  Fetches proposals from Governance policy, the related endorsements, yes votes,
@@ -153,13 +159,13 @@ export const proposalsQueryKey = () => ["useProposals"].filter(nonNullable);
  * @returns Query object in which the data attribute holds an array of Proposal objects for
  *          all proposals in the Governance policy contract
  */
-export const useProposals = () => {
+export const useProposals = (filters: { isActive?: boolean }) => {
   /// const INSTRContract = "";
   /// const IPFSDContract = "";
   /// const governanceContract = "";
 
   const query = useQuery<Proposal[], Error>(
-    proposalsQueryKey(),
+    proposalsQueryKey(filters),
     async () => {
       /// Get total number of proposal through INSTR module contract's totalInstructions variable
       const numberOfProposals = mockGetTotalInstructions();
@@ -189,8 +195,11 @@ export const useProposals = () => {
 
         allProposals.push(currentProposal);
       }
-
-      return allProposals;
+      if (filters) {
+        return allProposals.filter(proposal => proposal.isActive === filters.isActive);
+      } else {
+        return allProposals;
+      }
     },
     { enabled: true },
   );
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 624ca80226..da6aa3d468 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -13,7 +13,7 @@ import { SearchBar } from "./components/SearchBar/SearchBar";
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
 
-  const _useProposals = useProposals();
+  const _useProposals = useProposals({ isActive: false });
   const allProposalsData: ProposalType[] = useMemo(() => {
     if (_useProposals.isLoading || !_useProposals.data) return [];
     return _useProposals.data;
diff --git a/src/views/Governance/components/FilterModal/FilterModal.tsx b/src/views/Governance/components/FilterModal/FilterModal.tsx
index a5e2e56dee..6e401f440d 100644
--- a/src/views/Governance/components/FilterModal/FilterModal.tsx
+++ b/src/views/Governance/components/FilterModal/FilterModal.tsx
@@ -85,7 +85,7 @@ export const FilterModal = ({ isModalOpen, cancelFunc }: FilterModalProps) => {
             label={t`Closed`}
           />
         </Box>
-        <Box display="flex" justifyContent="center">
+        <Box display="flex" justifyContent="center" mt="28px">
           <SecondaryButton template="secondary" sx={{ flexGrow: "1" }}>
             Cancel
           </SecondaryButton>

From c73c5399d003a71a329462a995ce15c677501c4d Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Wed, 13 Jul 2022 14:27:21 -0400
Subject: [PATCH 008/113] Set up proposal page routing and frame proposal page
 component

---
 src/App.tsx                                   |  4 +-
 src/hooks/useProposal.ts                      |  4 +-
 src/hooks/useProposals.ts                     |  2 +
 src/views/Governance/Governance.tsx           | 15 +++++
 src/views/Governance/ProposalsDashboard.tsx   |  2 +-
 .../components/ProposalPage/ProposalPage.scss |  5 ++
 .../components/ProposalPage/ProposalPage.tsx  | 61 +++++++++++++++++++
 .../components/ProposalPage/index.ts          |  1 +
 src/views/Governance/constants.ts             | 14 +++++
 9 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 src/views/Governance/Governance.tsx
 create mode 100644 src/views/Governance/components/ProposalPage/ProposalPage.scss
 create mode 100644 src/views/Governance/components/ProposalPage/ProposalPage.tsx
 create mode 100644 src/views/Governance/components/ProposalPage/index.ts
 create mode 100644 src/views/Governance/constants.ts

diff --git a/src/App.tsx b/src/App.tsx
index 55aa5dac48..63b27ea632 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,7 +38,7 @@ import { dark as darkTheme } from "./themes/dark.js";
 import { girth as gTheme } from "./themes/girth.js";
 import { light as lightTheme } from "./themes/light.js";
 import { multifarmDarkTheme, multifarmLightTheme } from "./themes/multifarm";
-import { ProposalsDashboard } from "./views/Governance/ProposalsDashboard";
+import { Governance } from "./views/Governance/Governance";
 
 // Dynamic Imports for code splitting
 const Bond = lazy(() => import("./views/Bond"));
@@ -274,7 +274,7 @@ function App() {
                     <Route path="/wallet" element={<Wallet open={true} component="wallet" />}></Route>
                     <Route path="*" element={<NotFound />} />
 
-                    <Route path="/governancetest" element={<ProposalsDashboard />} />
+                    <Route path="/governancetest/*" element={<Governance />} />
                   </Routes>
                 </Suspense>
               </div>
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 74bab67389..b1a8a1f286 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,3 +1,4 @@
+import { ethers } from "ethers";
 import { useQuery } from "react-query";
 import { nonNullable } from "src/helpers/types/nonNullable";
 
@@ -44,7 +45,8 @@ export const useProposal = (instructionsIndex: number) => {
       const proposalContent = mockGetProposalContent(proposalURI);
 
       const currentProposal = {
-        proposalName: proposal.proposalName,
+        id: instructionsIndex,
+        proposalName: ethers.utils.parseBytes32String(proposal.proposalName),
         proposer: proposal.proposer,
         submissionTimestamp: proposal.submissionTimestamp,
         isActive: isActive,
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index afcaefbbd9..5b0c3d25a4 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -11,6 +11,7 @@ interface proposalMetadata {
 
 /// Data type for returning full proposal informations
 export interface Proposal {
+  id: number;
   proposalName: string;
   proposer: string;
   submissionTimestamp: string;
@@ -182,6 +183,7 @@ export const useProposals = (filters: { isActive?: boolean }) => {
         const proposalContent = mockGetProposalContent(proposalURI);
 
         const currentProposal = {
+          id: i,
           proposalName: ethers.utils.parseBytes32String(proposal.proposalName),
           proposer: proposal.proposer,
           submissionTimestamp: proposal.submissionTimestamp,
diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
new file mode 100644
index 0000000000..52a0e123aa
--- /dev/null
+++ b/src/views/Governance/Governance.tsx
@@ -0,0 +1,15 @@
+import { Route, Routes } from "react-router-dom";
+
+import { ProposalPage } from "./components/ProposalPage";
+import { ProposalsDashboard } from "./ProposalsDashboard";
+
+export const Governance = () => {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<ProposalsDashboard />} />
+        <Route path="/proposals/:passedId" element={<ProposalPage />} />
+      </Routes>
+    </>
+  );
+};
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index da6aa3d468..958e0b639b 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -31,7 +31,7 @@ export const ProposalsDashboard = () => {
     return allProposalsData.map(proposal => {
       return (
         <Grid item xs={12}>
-          <Link to={`/governancetest/proposals/${proposal.proposalName}`} component={RouterLink}>
+          <Link to={`/governancetest/proposals/${proposal.id}`} component={RouterLink}>
             <Proposal
               chipLabel="Discussion"
               proposalTitle={proposal.proposalName}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
new file mode 100644
index 0000000000..887c8931dc
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -0,0 +1,5 @@
+.proposal-page {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
new file mode 100644
index 0000000000..3c6179ed1d
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -0,0 +1,61 @@
+import "./ProposalPage.scss";
+
+import { t } from "@lingui/macro";
+import { Grid, Typography } from "@mui/material";
+import { Paper, Tab, Tabs, TertiaryButton, TextButton } from "@olympusdao/component-library";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { useProposal } from "src/hooks/useProposal";
+import { Proposal as ProposalType } from "src/hooks/useProposals";
+
+import { NULL_PROPOSAL } from "../../constants";
+
+export const ProposalPage = () => {
+  const { passedId } = useParams();
+  const proposalId = useMemo(() => {
+    if (!passedId) return -1;
+    return parseInt(passedId);
+  }, [passedId]);
+
+  const _useProposal = useProposal(proposalId);
+  const proposal: ProposalType = useMemo(() => {
+    if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
+    return _useProposal.data;
+  }, [_useProposal]);
+
+  return (
+    <div className="proposal-page">
+      <Paper>
+        <Grid className="page-content" container direction="column">
+          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+            <Grid item>
+              <TextButton startIconName="x">Back</TextButton>
+            </Grid>
+            <Grid item>
+              <TertiaryButton>Create new proposal</TertiaryButton>
+            </Grid>
+          </Grid>
+          <Grid className="proposal-header" container direction="column">
+            <Grid item>
+              <Typography variant="body2">
+                Posted on {proposal.submissionTimestamp} by {proposal.proposer}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Typography variant="h5">{proposal.proposalName}</Typography>
+            </Grid>
+            <Grid item>
+              <Typography variant="body1">{proposal.isActive}</Typography>
+            </Grid>
+          </Grid>
+          <Grid className="proposal-tabs" container>
+            <Tabs>
+              <Tab label={t`Poll Detail`}></Tab>
+              <Tab label={t`Votes`}></Tab>
+            </Tabs>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/index.ts b/src/views/Governance/components/ProposalPage/index.ts
new file mode 100644
index 0000000000..3ddad00079
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/index.ts
@@ -0,0 +1 @@
+export { ProposalPage } from "./ProposalPage";
diff --git a/src/views/Governance/constants.ts b/src/views/Governance/constants.ts
new file mode 100644
index 0000000000..97072ec133
--- /dev/null
+++ b/src/views/Governance/constants.ts
@@ -0,0 +1,14 @@
+import { Proposal } from "src/hooks/useProposals";
+
+export const NULL_PROPOSAL: Proposal = {
+  id: -1,
+  proposalName: "",
+  proposer: "",
+  submissionTimestamp: "",
+  isActive: false,
+  endorsements: 0,
+  yesVotes: 0,
+  noVotes: 0,
+  uri: "",
+  content: "",
+};

From 5ee1368857a7250020562687a355c71fec81b846 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Wed, 13 Jul 2022 21:22:28 -0400
Subject: [PATCH 009/113] Modified alignment

---
 src/hooks/useProposals.ts                     | 12 ++---
 .../components/ProposalPage/ProposalPage.scss | 25 +++++++++++
 .../components/ProposalPage/ProposalPage.tsx  | 44 ++++++++++++++++---
 src/views/Governance/constants.ts             |  2 +-
 4 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 5b0c3d25a4..3c87ca9d5b 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -6,7 +6,7 @@ import { nonNullable } from "src/helpers/types/nonNullable";
 interface proposalMetadata {
   proposalName: string;
   proposer: string;
-  submissionTimestamp: string;
+  submissionTimestamp: number;
 }
 
 /// Data type for returning full proposal informations
@@ -14,7 +14,7 @@ export interface Proposal {
   id: number;
   proposalName: string;
   proposer: string;
-  submissionTimestamp: string;
+  submissionTimestamp: number;
   isActive: boolean;
   endorsements: number;
   yesVotes: number;
@@ -34,22 +34,22 @@ export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
   0: {
     proposalName: "0x4f49502d31000000000000000000000000000000000000000000000000000000",
     proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
-    submissionTimestamp: "1653948322",
+    submissionTimestamp: 1653948322,
   },
   1: {
     proposalName: "0x4f49502d32000000000000000000000000000000000000000000000000000000",
     proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
-    submissionTimestamp: "1655157922",
+    submissionTimestamp: 1655157922,
   },
   2: {
     proposalName: "0x4f49502d33000000000000000000000000000000000000000000000000000000",
     proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
-    submissionTimestamp: "1655503522",
+    submissionTimestamp: 1655503522,
   },
   3: {
     proposalName: "0x4f49502d34000000000000000000000000000000000000000000000000000000",
     proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
-    submissionTimestamp: "1656626722",
+    submissionTimestamp: 1656626722,
   },
 };
 
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
index 887c8931dc..13242a14b8 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -2,4 +2,29 @@
   width: 100%;
   display: flex;
   justify-content: center;
+
+  .page-content {
+    .back-button {
+      display: flex;
+      justify-content: flex-start;
+
+      .MuiButton-root {
+        margin-left: 0px;
+        padding-left: 0px;
+      }
+    }
+  }
+
+  .published-date {
+    margin-top: 6px;
+    line-height: 18px;
+  }
+
+  .proposal-title {
+    font-weight: 700;
+  }
+
+  #simple-tab-0 {
+    margin-left: 0px;
+  }
 }
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 3c6179ed1d..18b478c83b 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,16 +1,19 @@
 import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
-import { Grid, Typography } from "@mui/material";
-import { Paper, Tab, Tabs, TertiaryButton, TextButton } from "@olympusdao/component-library";
+import { Grid, Typography, useTheme } from "@mui/material";
+import { Chip, OHMChipProps, Paper, Tab, Tabs, TertiaryButton, TextButton } from "@olympusdao/component-library";
 import { useMemo } from "react";
 import { useParams } from "react-router-dom";
+import { shorten } from "src/helpers";
 import { useProposal } from "src/hooks/useProposal";
 import { Proposal as ProposalType } from "src/hooks/useProposals";
 
 import { NULL_PROPOSAL } from "../../constants";
 
 export const ProposalPage = () => {
+  const theme = useTheme();
+
   const { passedId } = useParams();
   const proposalId = useMemo(() => {
     if (!passedId) return -1;
@@ -23,12 +26,37 @@ export const ProposalPage = () => {
     return _useProposal.data;
   }, [_useProposal]);
 
+  const dateFormat = new Intl.DateTimeFormat([], {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZoneName: "short",
+    hour: "numeric",
+    minute: "numeric",
+  });
+  const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
+
+  const mapStatus = (status: string) => {
+    switch (status) {
+      case "active":
+        return "success" as OHMChipProps["template"];
+      case "endorsement":
+        return "purple" as OHMChipProps["template"];
+      case "discussion":
+        return "userFeedback" as OHMChipProps["template"];
+      case "closed":
+        return "gray" as OHMChipProps["template"];
+      case "draft":
+        return "darkGray" as OHMChipProps["template"];
+    }
+  };
+
   return (
     <div className="proposal-page">
       <Paper>
         <Grid className="page-content" container direction="column">
           <Grid container direction="row" justifyContent="space-between" alignItems="center">
-            <Grid item>
+            <Grid className="back-button" item>
               <TextButton startIconName="x">Back</TextButton>
             </Grid>
             <Grid item>
@@ -37,15 +65,17 @@ export const ProposalPage = () => {
           </Grid>
           <Grid className="proposal-header" container direction="column">
             <Grid item>
-              <Typography variant="body2">
-                Posted on {proposal.submissionTimestamp} by {proposal.proposer}
+              <Typography className="published-date" variant="body2" color={theme.colors.gray[90]}>
+                Posted on {formattedPublishedDate} by {shorten(proposal.proposer)}
               </Typography>
             </Grid>
             <Grid item>
-              <Typography variant="h5">{proposal.proposalName}</Typography>
+              <Typography className="proposal-title" variant="h4">
+                {proposal.proposalName}
+              </Typography>
             </Grid>
             <Grid item>
-              <Typography variant="body1">{proposal.isActive}</Typography>
+              <Chip label="Active" template={mapStatus("active")} strong />
             </Grid>
           </Grid>
           <Grid className="proposal-tabs" container>
diff --git a/src/views/Governance/constants.ts b/src/views/Governance/constants.ts
index 97072ec133..823a0f420f 100644
--- a/src/views/Governance/constants.ts
+++ b/src/views/Governance/constants.ts
@@ -4,7 +4,7 @@ export const NULL_PROPOSAL: Proposal = {
   id: -1,
   proposalName: "",
   proposer: "",
-  submissionTimestamp: "",
+  submissionTimestamp: 0,
   isActive: false,
   endorsements: 0,
   yesVotes: 0,

From bba87d3064a93e1b87783aafd28a407f7d763830 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 14 Jul 2022 09:23:55 -0400
Subject: [PATCH 010/113] Styling and tab functionality

---
 .../components/ProposalPage/ProposalPage.scss | 33 ++++++++++++
 .../components/ProposalPage/ProposalPage.tsx  | 51 +++++++++++++++----
 2 files changed, 74 insertions(+), 10 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
index 13242a14b8..d277ab604f 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -4,6 +4,10 @@
   justify-content: center;
 
   .page-content {
+    .navigation {
+      margin-bottom: 30px;
+    }
+
     .back-button {
       display: flex;
       justify-content: flex-start;
@@ -12,19 +16,48 @@
         margin-left: 0px;
         padding-left: 0px;
       }
+
+      .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
+        text-decoration: none;
+      }
     }
   }
 
+  .proposal-header {
+    margin-bottom: 36px;
+  }
+
   .published-date {
     margin-top: 6px;
+    margin-bottom: 4px;
     line-height: 18px;
   }
 
   .proposal-title {
+    line-height: 32px;
     font-weight: 700;
   }
 
   #simple-tab-0 {
     margin-left: 0px;
   }
+
+  #simple-tabpanel-0 {
+    .MuiBox-root {
+      padding-left: 0px;
+    }
+  }
+
+  #simple-tabpanel-1 {
+    .MuiBox-root {
+      padding-left: 0px;
+    }
+  }
+
+  .discussion-button {
+    .MuiButton-root {
+      margin-left: 0px;
+      padding-left: 0px;
+    }
+  }
 }
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 18b478c83b..a2fa704345 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,10 +1,19 @@
 import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
-import { Grid, Typography, useTheme } from "@mui/material";
-import { Chip, OHMChipProps, Paper, Tab, Tabs, TertiaryButton, TextButton } from "@olympusdao/component-library";
-import { useMemo } from "react";
-import { useParams } from "react-router-dom";
+import { Grid, Link, Typography, useTheme } from "@mui/material";
+import {
+  Chip,
+  OHMChipProps,
+  Paper,
+  SecondaryButton,
+  Tab,
+  TabPanel,
+  Tabs,
+  TextButton,
+} from "@olympusdao/component-library";
+import { useMemo, useState } from "react";
+import { NavLink as RouterLink, useParams } from "react-router-dom";
 import { shorten } from "src/helpers";
 import { useProposal } from "src/hooks/useProposal";
 import { Proposal as ProposalType } from "src/hooks/useProposals";
@@ -14,6 +23,8 @@ import { NULL_PROPOSAL } from "../../constants";
 export const ProposalPage = () => {
   const theme = useTheme();
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
   const { passedId } = useParams();
   const proposalId = useMemo(() => {
     if (!passedId) return -1;
@@ -55,18 +66,21 @@ export const ProposalPage = () => {
     <div className="proposal-page">
       <Paper>
         <Grid className="page-content" container direction="column">
-          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          <Grid className="navigation" container direction="row" justifyContent="space-between" alignItems="center">
             <Grid className="back-button" item>
-              <TextButton startIconName="x">Back</TextButton>
+              <Link to="/governancetest" component={RouterLink}>
+                <TextButton startIconName="x">Back</TextButton>
+              </Link>
             </Grid>
             <Grid item>
-              <TertiaryButton>Create new proposal</TertiaryButton>
+              <SecondaryButton>Create new proposal</SecondaryButton>
             </Grid>
           </Grid>
           <Grid className="proposal-header" container direction="column">
             <Grid item>
               <Typography className="published-date" variant="body2" color={theme.colors.gray[90]}>
-                Posted on {formattedPublishedDate} by {shorten(proposal.proposer)}
+                Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
+                <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
               </Typography>
             </Grid>
             <Grid item>
@@ -78,11 +92,28 @@ export const ProposalPage = () => {
               <Chip label="Active" template={mapStatus("active")} strong />
             </Grid>
           </Grid>
-          <Grid className="proposal-tabs" container>
-            <Tabs>
+          <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
+            <Tabs
+              centered
+              value={selectedIndex}
+              TabIndicatorProps={{ style: { display: "none" } }}
+              onChange={(_, view: number) => setSelectedIndex(view)}
+            >
               <Tab label={t`Poll Detail`}></Tab>
               <Tab label={t`Votes`}></Tab>
             </Tabs>
+
+            <TabPanel value={selectedIndex} index={0}>
+              <Grid item>
+                <Typography variant="body1">{proposal.content}</Typography>
+              </Grid>
+            </TabPanel>
+            <TabPanel value={selectedIndex} index={1}>
+              <Grid item>Votes will go here</Grid>
+            </TabPanel>
+          </Grid>
+          <Grid className="discussion-button" item>
+            <TextButton endIconName="arrow-up">Discussion</TextButton>
           </Grid>
         </Grid>
       </Paper>

From f78a3505c8130f31484bd708626250697cf62c68 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 14 Jul 2022 09:38:44 -0400
Subject: [PATCH 011/113] Placeholder end date countdown

---
 .../components/ProposalPage/ProposalPage.tsx   | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index a2fa704345..fd4b00e880 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,9 +1,10 @@
 import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
-import { Grid, Link, Typography, useTheme } from "@mui/material";
+import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
 import {
   Chip,
+  Icon,
   OHMChipProps,
   Paper,
   SecondaryButton,
@@ -88,8 +89,19 @@ export const ProposalPage = () => {
                 {proposal.proposalName}
               </Typography>
             </Grid>
-            <Grid item>
-              <Chip label="Active" template={mapStatus("active")} strong />
+            <Grid container direction="row">
+              <Grid item>
+                <Chip label="Active" template={mapStatus("active")} strong />
+              </Grid>
+              <Grid item>
+                <Box pl="9px" display="flex">
+                  <Icon name="timeLeft" style={{ fontSize: "18px", fill: theme.colors.gray[90] }} />
+
+                  <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+                    Ends in 12 hours
+                  </Typography>
+                </Box>
+              </Grid>
             </Grid>
           </Grid>
           <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">

From acd9b6fe6235f8e7120e456ea9b4578aae4177c5 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 14 Jul 2022 09:51:11 -0400
Subject: [PATCH 012/113] Switch from x to left chevron for back button

---
 .../Governance/components/ProposalPage/ProposalPage.scss  | 8 ++++++--
 .../Governance/components/ProposalPage/ProposalPage.tsx   | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
index d277ab604f..2821ae81ca 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -12,9 +12,13 @@
       display: flex;
       justify-content: flex-start;
 
+      .MuiLink-root {
+        display: flex;
+        align-items: center;
+      }
+
       .MuiButton-root {
-        margin-left: 0px;
-        padding-left: 0px;
+        padding-left: 9px;
       }
 
       .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index fd4b00e880..4203163735 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,6 +1,7 @@
 import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
+import { ChevronLeft } from "@mui/icons-material";
 import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
 import {
   Chip,
@@ -70,7 +71,8 @@ export const ProposalPage = () => {
           <Grid className="navigation" container direction="row" justifyContent="space-between" alignItems="center">
             <Grid className="back-button" item>
               <Link to="/governancetest" component={RouterLink}>
-                <TextButton startIconName="x">Back</TextButton>
+                <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
+                <TextButton>Back</TextButton>
               </Link>
             </Grid>
             <Grid item>

From 46c9a11d0cce5cace30a1bd28c924dfe46a4cdda Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Fri, 15 Jul 2022 12:01:05 -0400
Subject: [PATCH 013/113] Adding content for votes section

---
 .../components/ProposalPage/ProposalPage.tsx  | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 4203163735..54806b80dd 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -2,17 +2,20 @@ import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
 import { ChevronLeft } from "@mui/icons-material";
-import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
+import { Box, Grid, Link, OutlinedInput, Typography, useTheme } from "@mui/material";
 import {
   Chip,
   Icon,
   OHMChipProps,
   Paper,
+  PrimaryButton,
+  Radio,
   SecondaryButton,
   Tab,
   TabPanel,
   Tabs,
   TextButton,
+  VoteBreakdown,
 } from "@olympusdao/component-library";
 import { useMemo, useState } from "react";
 import { NavLink as RouterLink, useParams } from "react-router-dom";
@@ -123,7 +126,44 @@ export const ProposalPage = () => {
               </Grid>
             </TabPanel>
             <TabPanel value={selectedIndex} index={1}>
-              <Grid item>Votes will go here</Grid>
+              <Grid container direction="column">
+                <Grid item>
+                  <Typography variant="h6">Cast your vote</Typography>
+                </Grid>
+                <Grid item>
+                  <Typography variant="body2">
+                    Your Yes vote will be approving the policy at{" "}
+                    <span style={{ color: theme.colors.gray[40] }}>this location</span>
+                  </Typography>
+                </Grid>
+                <Grid container direction="row">
+                  <Grid item>
+                    <Radio label="Yes" />
+                    <Radio label="No" />
+                  </Grid>
+                  <Grid item>
+                    <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
+                  </Grid>
+                  <Grid item>
+                    <PrimaryButton>Vote</PrimaryButton>
+                  </Grid>
+                </Grid>
+                <Grid item>
+                  <VoteBreakdown
+                    voteForLabel="Yes"
+                    voteAgainstLabel="No"
+                    voteAbstainLabel="Abstain"
+                    voteForCount={proposal.yesVotes}
+                    voteAgainstCount={proposal.noVotes}
+                    voteAbstainCount={0}
+                  />
+                </Grid>
+                <Grid container direction="column">
+                  <Grid item>
+                    <Typography variant="h6">Top Voters</Typography>
+                  </Grid>
+                </Grid>
+              </Grid>
             </TabPanel>
           </Grid>
           <Grid className="discussion-button" item>

From f9f9fafbd61e02058a151631c10892757dcc38cc Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Mon, 18 Jul 2022 21:03:29 -0400
Subject: [PATCH 014/113] Start create proposal form

---
 src/views/Governance/Governance.tsx           |  2 +
 .../CreateProposal/CreateProposal.scss        | 31 ++++++++
 .../CreateProposal/CreateProposal.tsx         | 79 +++++++++++++++++++
 .../components/CreateProposal/index.ts        |  1 +
 .../components/ProposalPage/ProposalPage.scss | 26 ++++++
 .../components/ProposalPage/ProposalPage.tsx  | 32 ++++----
 6 files changed, 156 insertions(+), 15 deletions(-)
 create mode 100644 src/views/Governance/components/CreateProposal/CreateProposal.scss
 create mode 100644 src/views/Governance/components/CreateProposal/CreateProposal.tsx
 create mode 100644 src/views/Governance/components/CreateProposal/index.ts

diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
index 52a0e123aa..e0f7500601 100644
--- a/src/views/Governance/Governance.tsx
+++ b/src/views/Governance/Governance.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 
+import { CreateProposal } from "./components/CreateProposal";
 import { ProposalPage } from "./components/ProposalPage";
 import { ProposalsDashboard } from "./ProposalsDashboard";
 
@@ -9,6 +10,7 @@ export const Governance = () => {
       <Routes>
         <Route path="/" element={<ProposalsDashboard />} />
         <Route path="/proposals/:passedId" element={<ProposalPage />} />
+        <Route path="/create-proposal" element={<CreateProposal />} />
       </Routes>
     </>
   );
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.scss b/src/views/Governance/components/CreateProposal/CreateProposal.scss
new file mode 100644
index 0000000000..a5e6b188de
--- /dev/null
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.scss
@@ -0,0 +1,31 @@
+.create-proposal-form {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  .back-button {
+    display: flex;
+    justify-content: flex-start;
+
+    .MuiLink-root {
+      display: flex;
+      align-items: center;
+    }
+
+    .MuiButton-root {
+      padding-left: 9px;
+    }
+
+    .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
+      text-decoration: none;
+    }
+  }
+
+  .create-proposal-input {
+    width: 100%;
+  }
+
+  .create-proposal-section {
+    padding: 5px 5px 5px 5px;
+  }
+}
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
new file mode 100644
index 0000000000..7ee3756417
--- /dev/null
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -0,0 +1,79 @@
+import "./CreateProposal.scss";
+
+import { ChevronLeft } from "@mui/icons-material";
+import { Grid, Link, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
+import { Paper, TextButton } from "@olympusdao/component-library";
+import { Link as RouterLink } from "react-router-dom";
+
+export const CreateProposal = () => {
+  return (
+    <div className="create-proposal-form">
+      <Paper>
+        <Grid container direction="column" spacing={2}>
+          <Grid className="back-button" item>
+            <Link to="/governancetest" component={RouterLink}>
+              <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
+              <TextButton>Back</TextButton>
+            </Link>
+          </Grid>
+          <Grid className="create-proposal-section" container direction="column" xs={12}>
+            <Grid item>
+              <Typography variant="body2">Title</Typography>
+            </Grid>
+            <Grid item>
+              <OutlinedInput className="create-proposal-input" />
+            </Grid>
+          </Grid>
+          <Grid className="create-proposal-section" container direction="column">
+            <Grid container direction="row">
+              <Grid item>
+                <Typography variant="body2">Description</Typography>
+              </Grid>
+              <Grid item>
+                <Typography variant="body2">0/14,400</Typography>
+              </Grid>
+            </Grid>
+            <Grid item>
+              <OutlinedInput className="create-proposal-input" />
+            </Grid>
+          </Grid>
+          <Grid className="create-proposal-section" container direction="column">
+            <Grid item>
+              <Typography variant="body2">Discussion</Typography>
+            </Grid>
+            <Grid item>
+              <OutlinedInput
+                className="create-proposal-input"
+                placeholder="e.g. https://forum.olympusday.finance/..."
+              />
+            </Grid>
+          </Grid>
+          <Grid container direction="row">
+            <Grid className="create-proposal-section" container direction="column" xs={6}>
+              <Grid item>
+                <Typography variant="body2">Action</Typography>
+              </Grid>
+              <Grid item>
+                <Select className="create-proposal-section" defaultValue="installModule" fullWidth>
+                  <MenuItem value="installModule">Install Module</MenuItem>
+                  <MenuItem value="upgradeModule">Upgrade Module</MenuItem>
+                  <MenuItem value="approvePolicy">Approve Policy</MenuItem>
+                  <MenuItem value="terminatePolicy">Terminate Policy</MenuItem>
+                  <MenuItem value="changeExecutor">Change Executor</MenuItem>
+                </Select>
+              </Grid>
+            </Grid>
+            <Grid className="create-proposal-section" container direction="column" xs={6}>
+              <Grid item>
+                <Typography variant="body2">Target</Typography>
+              </Grid>
+              <Grid item>
+                <OutlinedInput className="create-proposal-input" placeholder="Contract address" />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+};
diff --git a/src/views/Governance/components/CreateProposal/index.ts b/src/views/Governance/components/CreateProposal/index.ts
new file mode 100644
index 0000000000..881e6fe273
--- /dev/null
+++ b/src/views/Governance/components/CreateProposal/index.ts
@@ -0,0 +1 @@
+export { CreateProposal } from "./CreateProposal";
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
index 2821ae81ca..4151225f73 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -53,6 +53,32 @@
   }
 
   #simple-tabpanel-1 {
+    width: 100%;
+
+    .cast-vote-header {
+      margin-bottom: 6px;
+    }
+
+    .install-location {
+      margin-bottom: 20px;
+    }
+
+    .vote-submission-section {
+      margin-bottom: 45px;
+    }
+
+    .your-comment {
+      width: 100%;
+    }
+
+    .vote-breakdown {
+      margin-bottom: 27px;
+
+      .PaperCard-container {
+        padding: 18px;
+      }
+    }
+
     .MuiBox-root {
       padding-left: 0px;
     }
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 54806b80dd..c68987cb9d 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -94,7 +94,7 @@ export const ProposalPage = () => {
                 {proposal.proposalName}
               </Typography>
             </Grid>
-            <Grid container direction="row">
+            <Grid container direction="row" alignItems="center">
               <Grid item>
                 <Chip label="Active" template={mapStatus("active")} strong />
               </Grid>
@@ -121,34 +121,39 @@ export const ProposalPage = () => {
             </Tabs>
 
             <TabPanel value={selectedIndex} index={0}>
-              <Grid item>
-                <Typography variant="body1">{proposal.content}</Typography>
+              <Grid container direction="column">
+                <Grid item>
+                  <Typography variant="body1">{proposal.content}</Typography>
+                </Grid>
+                <Grid className="discussion-button" item>
+                  <TextButton endIconName="arrow-up">Discussion</TextButton>
+                </Grid>
               </Grid>
             </TabPanel>
             <TabPanel value={selectedIndex} index={1}>
               <Grid container direction="column">
-                <Grid item>
+                <Grid className="cast-vote-header" item>
                   <Typography variant="h6">Cast your vote</Typography>
                 </Grid>
-                <Grid item>
-                  <Typography variant="body2">
+                <Grid className="install-location" item>
+                  <Typography variant="body2" color={theme.colors.gray[90]}>
                     Your Yes vote will be approving the policy at{" "}
                     <span style={{ color: theme.colors.gray[40] }}>this location</span>
                   </Typography>
                 </Grid>
-                <Grid container direction="row">
-                  <Grid item>
+                <Grid className="vote-submission-section" container direction="row" alignItems="center" spacing={2}>
+                  <Grid item xs={3}>
                     <Radio label="Yes" />
                     <Radio label="No" />
                   </Grid>
-                  <Grid item>
+                  <Grid item xs={6}>
                     <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
                   </Grid>
-                  <Grid item>
-                    <PrimaryButton>Vote</PrimaryButton>
+                  <Grid item xs={3}>
+                    <PrimaryButton fullWidth>Vote</PrimaryButton>
                   </Grid>
                 </Grid>
-                <Grid item>
+                <Grid className="vote-breakdown" item>
                   <VoteBreakdown
                     voteForLabel="Yes"
                     voteAgainstLabel="No"
@@ -166,9 +171,6 @@ export const ProposalPage = () => {
               </Grid>
             </TabPanel>
           </Grid>
-          <Grid className="discussion-button" item>
-            <TextButton endIconName="arrow-up">Discussion</TextButton>
-          </Grid>
         </Grid>
       </Paper>
     </div>

From 6800e6419d1002ac260819c146e5c4e57d33a295 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 19 Jul 2022 11:12:14 -0400
Subject: [PATCH 015/113] Clean up create proposals page code

---
 .../components/BackButton/BackButton.scss     |  17 +++
 .../components/BackButton/BackButton.tsx      |  17 +++
 .../Governance/components/BackButton/index.ts |   1 +
 .../CreateProposal/CreateProposal.scss        |  28 ++---
 .../CreateProposal/CreateProposal.tsx         | 116 ++++++++----------
 .../CreateProposal/components/TextEntry.tsx   |  35 ++++++
 .../components/ProposalPage/ProposalPage.scss |  18 ---
 .../components/ProposalPage/ProposalPage.tsx  |  16 ++-
 8 files changed, 136 insertions(+), 112 deletions(-)
 create mode 100644 src/views/Governance/components/BackButton/BackButton.scss
 create mode 100644 src/views/Governance/components/BackButton/BackButton.tsx
 create mode 100644 src/views/Governance/components/BackButton/index.ts
 create mode 100644 src/views/Governance/components/CreateProposal/components/TextEntry.tsx

diff --git a/src/views/Governance/components/BackButton/BackButton.scss b/src/views/Governance/components/BackButton/BackButton.scss
new file mode 100644
index 0000000000..f62ce0f6d3
--- /dev/null
+++ b/src/views/Governance/components/BackButton/BackButton.scss
@@ -0,0 +1,17 @@
+.back-button {
+  display: flex;
+  justify-content: flex-start;
+
+  .MuiLink-root {
+    display: flex;
+    align-items: center;
+  }
+
+  .MuiButton-root {
+    padding-left: 9px;
+  }
+
+  .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
+    text-decoration: none;
+  }
+}
diff --git a/src/views/Governance/components/BackButton/BackButton.tsx b/src/views/Governance/components/BackButton/BackButton.tsx
new file mode 100644
index 0000000000..5d62bbddef
--- /dev/null
+++ b/src/views/Governance/components/BackButton/BackButton.tsx
@@ -0,0 +1,17 @@
+import "./BackButton.scss";
+
+import { ChevronLeft } from "@mui/icons-material";
+import { Grid, Link } from "@mui/material";
+import { TextButton } from "@olympusdao/component-library";
+import { Link as RouterLink } from "react-router-dom";
+
+export const BackButton = () => {
+  return (
+    <Grid className="back-button" item>
+      <Link to="/governancetest" component={RouterLink}>
+        <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
+        <TextButton>Back</TextButton>
+      </Link>
+    </Grid>
+  );
+};
diff --git a/src/views/Governance/components/BackButton/index.ts b/src/views/Governance/components/BackButton/index.ts
new file mode 100644
index 0000000000..f2438ee192
--- /dev/null
+++ b/src/views/Governance/components/BackButton/index.ts
@@ -0,0 +1 @@
+export { BackButton } from "./BackButton";
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.scss b/src/views/Governance/components/CreateProposal/CreateProposal.scss
index a5e6b188de..106f7b559f 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.scss
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.scss
@@ -3,29 +3,15 @@
   display: flex;
   justify-content: center;
 
-  .back-button {
-    display: flex;
-    justify-content: flex-start;
-
-    .MuiLink-root {
-      display: flex;
-      align-items: center;
-    }
-
-    .MuiButton-root {
-      padding-left: 9px;
-    }
-
-    .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
-      text-decoration: none;
-    }
-  }
-
-  .create-proposal-input {
+  .input-box {
     width: 100%;
   }
 
-  .create-proposal-section {
-    padding: 5px 5px 5px 5px;
+  .create-proposal-entry {
+    padding: 10px 5px 10px 5px;
+
+    .entry-title {
+      margin-bottom: 6px;
+    }
   }
 }
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 7ee3756417..58c63a39de 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -1,76 +1,64 @@
 import "./CreateProposal.scss";
 
-import { ChevronLeft } from "@mui/icons-material";
-import { Grid, Link, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
-import { Paper, TextButton } from "@olympusdao/component-library";
-import { Link as RouterLink } from "react-router-dom";
+import { Grid, MenuItem, Select, Typography } from "@mui/material";
+import { Paper } from "@olympusdao/component-library";
+import { useState } from "react";
+
+import { BackButton } from "../BackButton";
+import { TextEntry } from "./components/TextEntry";
 
 export const CreateProposal = () => {
+  const [proposalTitle, setProposalTitle] = useState("");
+  const [proposalDescription, setProposalDescription] = useState("");
+  const [proposalDiscussion, setProposalDiscussion] = useState("");
+  const [proposalAction, setProposalAction] = useState("installModule");
+  const [proposalContract, setProposalContract] = useState("");
+
+  const selectionInput = () => {
+    return (
+      <Grid className="create-proposal-entry" container direction="column" xs={6}>
+        <Grid className="entry-title" item>
+          <Typography variant="body2">Action</Typography>
+        </Grid>
+        <Grid item>
+          <Select defaultValue="installModule" onChange={(e: any) => setProposalAction(e.target.value)} fullWidth>
+            <MenuItem value="installModule">Install Module</MenuItem>
+            <MenuItem value="upgradeModule">Upgrade Module</MenuItem>
+            <MenuItem value="approvePolicy">Approve Policy</MenuItem>
+            <MenuItem value="terminatePolicy">Terminate Policy</MenuItem>
+            <MenuItem value="changeExecutor">Change Executor</MenuItem>
+          </Select>
+        </Grid>
+      </Grid>
+    );
+  };
+
   return (
     <div className="create-proposal-form">
       <Paper>
         <Grid container direction="column" spacing={2}>
-          <Grid className="back-button" item>
-            <Link to="/governancetest" component={RouterLink}>
-              <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
-              <TextButton>Back</TextButton>
-            </Link>
-          </Grid>
-          <Grid className="create-proposal-section" container direction="column" xs={12}>
-            <Grid item>
-              <Typography variant="body2">Title</Typography>
-            </Grid>
-            <Grid item>
-              <OutlinedInput className="create-proposal-input" />
-            </Grid>
-          </Grid>
-          <Grid className="create-proposal-section" container direction="column">
-            <Grid container direction="row">
-              <Grid item>
-                <Typography variant="body2">Description</Typography>
-              </Grid>
-              <Grid item>
-                <Typography variant="body2">0/14,400</Typography>
-              </Grid>
-            </Grid>
-            <Grid item>
-              <OutlinedInput className="create-proposal-input" />
-            </Grid>
-          </Grid>
-          <Grid className="create-proposal-section" container direction="column">
-            <Grid item>
-              <Typography variant="body2">Discussion</Typography>
-            </Grid>
-            <Grid item>
-              <OutlinedInput
-                className="create-proposal-input"
-                placeholder="e.g. https://forum.olympusday.finance/..."
-              />
-            </Grid>
-          </Grid>
+          <BackButton />
+          <TextEntry inputTitle="Title" gridSize={12} handleChange={setProposalTitle} />
+          <TextEntry
+            inputTitle="Description"
+            secondaryTitle={`${proposalDescription.length}/14,400`}
+            gridSize={12}
+            handleChange={setProposalDescription}
+          />
+          <TextEntry
+            inputTitle="Discussion"
+            gridSize={12}
+            placeholder="e.g. https://forum.olympusday.finance/..."
+            handleChange={setProposalDiscussion}
+          />
           <Grid container direction="row">
-            <Grid className="create-proposal-section" container direction="column" xs={6}>
-              <Grid item>
-                <Typography variant="body2">Action</Typography>
-              </Grid>
-              <Grid item>
-                <Select className="create-proposal-section" defaultValue="installModule" fullWidth>
-                  <MenuItem value="installModule">Install Module</MenuItem>
-                  <MenuItem value="upgradeModule">Upgrade Module</MenuItem>
-                  <MenuItem value="approvePolicy">Approve Policy</MenuItem>
-                  <MenuItem value="terminatePolicy">Terminate Policy</MenuItem>
-                  <MenuItem value="changeExecutor">Change Executor</MenuItem>
-                </Select>
-              </Grid>
-            </Grid>
-            <Grid className="create-proposal-section" container direction="column" xs={6}>
-              <Grid item>
-                <Typography variant="body2">Target</Typography>
-              </Grid>
-              <Grid item>
-                <OutlinedInput className="create-proposal-input" placeholder="Contract address" />
-              </Grid>
-            </Grid>
+            {selectionInput()}
+            <TextEntry
+              inputTitle="Target"
+              placeholder="Contract address"
+              gridSize={6}
+              handleChange={setProposalContract}
+            />
           </Grid>
         </Grid>
       </Paper>
diff --git a/src/views/Governance/components/CreateProposal/components/TextEntry.tsx b/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
new file mode 100644
index 0000000000..4461afcac9
--- /dev/null
+++ b/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
@@ -0,0 +1,35 @@
+import { Grid, OutlinedInput, Typography } from "@mui/material";
+
+type TextEntryProps = {
+  inputTitle: string;
+  gridSize: number;
+  handleChange: (value: string) => void;
+  secondaryTitle?: string;
+  placeholder?: string;
+};
+
+export const TextEntry = ({ inputTitle, gridSize, handleChange, secondaryTitle, placeholder }: TextEntryProps) => {
+  return (
+    <Grid className="create-proposal-entry" direction="column" xs={gridSize}>
+      <Grid className="entry-title" container direction="row">
+        <Grid item>
+          <Typography variant="body2">{inputTitle}</Typography>
+        </Grid>
+        {secondaryTitle ? (
+          <Grid item>
+            <Typography variant="body2">{secondaryTitle}</Typography>
+          </Grid>
+        ) : (
+          <></>
+        )}
+      </Grid>
+      <Grid item>
+        <OutlinedInput
+          className="input-box"
+          placeholder={placeholder}
+          onChange={(e: any) => handleChange(e.target.value)}
+        />
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
index 4151225f73..e05a148cc9 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -7,24 +7,6 @@
     .navigation {
       margin-bottom: 30px;
     }
-
-    .back-button {
-      display: flex;
-      justify-content: flex-start;
-
-      .MuiLink-root {
-        display: flex;
-        align-items: center;
-      }
-
-      .MuiButton-root {
-        padding-left: 9px;
-      }
-
-      .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
-        text-decoration: none;
-      }
-    }
   }
 
   .proposal-header {
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index c68987cb9d..e007343163 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,7 +1,6 @@
 import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
-import { ChevronLeft } from "@mui/icons-material";
 import { Box, Grid, Link, OutlinedInput, Typography, useTheme } from "@mui/material";
 import {
   Chip,
@@ -18,12 +17,14 @@ import {
   VoteBreakdown,
 } from "@olympusdao/component-library";
 import { useMemo, useState } from "react";
-import { NavLink as RouterLink, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import { shorten } from "src/helpers";
 import { useProposal } from "src/hooks/useProposal";
 import { Proposal as ProposalType } from "src/hooks/useProposals";
 
 import { NULL_PROPOSAL } from "../../constants";
+import { BackButton } from "../BackButton";
 
 export const ProposalPage = () => {
   const theme = useTheme();
@@ -72,14 +73,11 @@ export const ProposalPage = () => {
       <Paper>
         <Grid className="page-content" container direction="column">
           <Grid className="navigation" container direction="row" justifyContent="space-between" alignItems="center">
-            <Grid className="back-button" item>
-              <Link to="/governancetest" component={RouterLink}>
-                <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
-                <TextButton>Back</TextButton>
-              </Link>
-            </Grid>
+            <BackButton />
             <Grid item>
-              <SecondaryButton>Create new proposal</SecondaryButton>
+              <Link to="/governancetest/create-proposal" component={RouterLink}>
+                <SecondaryButton>Create new proposal</SecondaryButton>
+              </Link>
             </Grid>
           </Grid>
           <Grid className="proposal-header" container direction="column">

From 9ce3226e38c34d4bfb310d468dea2e9024d17b48 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 19 Jul 2022 11:22:10 -0400
Subject: [PATCH 016/113] Add continue button

---
 .../components/CreateProposal/CreateProposal.scss           | 6 ++++++
 .../Governance/components/CreateProposal/CreateProposal.tsx | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.scss b/src/views/Governance/components/CreateProposal/CreateProposal.scss
index 106f7b559f..72846aa0dd 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.scss
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.scss
@@ -11,7 +11,13 @@
     padding: 10px 5px 10px 5px;
 
     .entry-title {
+      justify-content: space-between;
       margin-bottom: 6px;
     }
   }
+
+  .continue-button {
+    width: 25%;
+    margin-top: 12px;
+  }
 }
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 58c63a39de..cc7cbdf29b 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -1,7 +1,7 @@
 import "./CreateProposal.scss";
 
 import { Grid, MenuItem, Select, Typography } from "@mui/material";
-import { Paper } from "@olympusdao/component-library";
+import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import { useState } from "react";
 
 import { BackButton } from "../BackButton";
@@ -60,6 +60,7 @@ export const CreateProposal = () => {
               handleChange={setProposalContract}
             />
           </Grid>
+          <PrimaryButton className="continue-button">Continue</PrimaryButton>
         </Grid>
       </Paper>
     </div>

From f18dab487a9379eb4140908e58b1e0856ef41877 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 19 Jul 2022 12:00:55 -0400
Subject: [PATCH 017/113] Clean up proposals page implementation

---
 .../components/ProposalPage/ProposalPage.tsx  | 126 ++++++------------
 .../components/PollDetailsTab.tsx             |  16 +++
 .../ProposalPage/components/VotesTab.tsx      |  48 +++++++
 src/views/Governance/interfaces.ts            |   5 +
 4 files changed, 107 insertions(+), 88 deletions(-)
 create mode 100644 src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
 create mode 100644 src/views/Governance/components/ProposalPage/components/VotesTab.tsx
 create mode 100644 src/views/Governance/interfaces.ts

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index e007343163..30b3c99dd1 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,21 +1,8 @@
 import "./ProposalPage.scss";
 
 import { t } from "@lingui/macro";
-import { Box, Grid, Link, OutlinedInput, Typography, useTheme } from "@mui/material";
-import {
-  Chip,
-  Icon,
-  OHMChipProps,
-  Paper,
-  PrimaryButton,
-  Radio,
-  SecondaryButton,
-  Tab,
-  TabPanel,
-  Tabs,
-  TextButton,
-  VoteBreakdown,
-} from "@olympusdao/component-library";
+import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
+import { Chip, Icon, OHMChipProps, Paper, SecondaryButton, Tab, TabPanel, Tabs } from "@olympusdao/component-library";
 import { useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
@@ -25,6 +12,8 @@ import { Proposal as ProposalType } from "src/hooks/useProposals";
 
 import { NULL_PROPOSAL } from "../../constants";
 import { BackButton } from "../BackButton";
+import { PollDetailsTab } from "./components/PollDetailsTab";
+import { VotesTab } from "./components/VotesTab";
 
 export const ProposalPage = () => {
   const theme = useTheme();
@@ -68,6 +57,37 @@ export const ProposalPage = () => {
     }
   };
 
+  const proposalHeader = () => {
+    return (
+      <Grid className="proposal-header" container direction="column">
+        <Grid item>
+          <Typography className="published-date" variant="body2" color={theme.colors.gray[90]}>
+            Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
+            <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography className="proposal-title" variant="h4">
+            {proposal.proposalName}
+          </Typography>
+        </Grid>
+        <Grid container direction="row" alignItems="center">
+          <Grid item>
+            <Chip label="Active" template={mapStatus("active")} strong />
+          </Grid>
+          <Grid item>
+            <Box pl="9px" display="flex">
+              <Icon name="timeLeft" style={{ fontSize: "18px", fill: theme.colors.gray[90] }} />
+              <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+                Ends in 12 hours
+              </Typography>
+            </Box>
+          </Grid>
+        </Grid>
+      </Grid>
+    );
+  };
+
   return (
     <div className="proposal-page">
       <Paper>
@@ -80,33 +100,7 @@ export const ProposalPage = () => {
               </Link>
             </Grid>
           </Grid>
-          <Grid className="proposal-header" container direction="column">
-            <Grid item>
-              <Typography className="published-date" variant="body2" color={theme.colors.gray[90]}>
-                Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
-                <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography className="proposal-title" variant="h4">
-                {proposal.proposalName}
-              </Typography>
-            </Grid>
-            <Grid container direction="row" alignItems="center">
-              <Grid item>
-                <Chip label="Active" template={mapStatus("active")} strong />
-              </Grid>
-              <Grid item>
-                <Box pl="9px" display="flex">
-                  <Icon name="timeLeft" style={{ fontSize: "18px", fill: theme.colors.gray[90] }} />
-
-                  <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                    Ends in 12 hours
-                  </Typography>
-                </Box>
-              </Grid>
-            </Grid>
-          </Grid>
+          {proposalHeader()}
           <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
             <Tabs
               centered
@@ -119,54 +113,10 @@ export const ProposalPage = () => {
             </Tabs>
 
             <TabPanel value={selectedIndex} index={0}>
-              <Grid container direction="column">
-                <Grid item>
-                  <Typography variant="body1">{proposal.content}</Typography>
-                </Grid>
-                <Grid className="discussion-button" item>
-                  <TextButton endIconName="arrow-up">Discussion</TextButton>
-                </Grid>
-              </Grid>
+              <PollDetailsTab proposal={proposal} />
             </TabPanel>
             <TabPanel value={selectedIndex} index={1}>
-              <Grid container direction="column">
-                <Grid className="cast-vote-header" item>
-                  <Typography variant="h6">Cast your vote</Typography>
-                </Grid>
-                <Grid className="install-location" item>
-                  <Typography variant="body2" color={theme.colors.gray[90]}>
-                    Your Yes vote will be approving the policy at{" "}
-                    <span style={{ color: theme.colors.gray[40] }}>this location</span>
-                  </Typography>
-                </Grid>
-                <Grid className="vote-submission-section" container direction="row" alignItems="center" spacing={2}>
-                  <Grid item xs={3}>
-                    <Radio label="Yes" />
-                    <Radio label="No" />
-                  </Grid>
-                  <Grid item xs={6}>
-                    <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
-                  </Grid>
-                  <Grid item xs={3}>
-                    <PrimaryButton fullWidth>Vote</PrimaryButton>
-                  </Grid>
-                </Grid>
-                <Grid className="vote-breakdown" item>
-                  <VoteBreakdown
-                    voteForLabel="Yes"
-                    voteAgainstLabel="No"
-                    voteAbstainLabel="Abstain"
-                    voteForCount={proposal.yesVotes}
-                    voteAgainstCount={proposal.noVotes}
-                    voteAbstainCount={0}
-                  />
-                </Grid>
-                <Grid container direction="column">
-                  <Grid item>
-                    <Typography variant="h6">Top Voters</Typography>
-                  </Grid>
-                </Grid>
-              </Grid>
+              <VotesTab proposal={proposal} />
             </TabPanel>
           </Grid>
         </Grid>
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
new file mode 100644
index 0000000000..b2616b0a76
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -0,0 +1,16 @@
+import { Grid, Typography } from "@mui/material";
+import { TextButton } from "@olympusdao/component-library";
+import { ProposalTabProps } from "src/views/Governance/interfaces";
+
+export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
+  return (
+    <Grid container direction="column">
+      <Grid item>
+        <Typography variant="body1">{proposal.content}</Typography>
+      </Grid>
+      <Grid className="discussion-button" item>
+        <TextButton endIconName="arrow-up">Discussion</TextButton>
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
new file mode 100644
index 0000000000..da6ee04ee6
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -0,0 +1,48 @@
+import { Grid, OutlinedInput, Typography, useTheme } from "@mui/material";
+import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
+import { ProposalTabProps } from "src/views/Governance/interfaces";
+
+export const VotesTab = ({ proposal }: ProposalTabProps) => {
+  const theme = useTheme();
+
+  return (
+    <Grid container direction="column">
+      <Grid className="cast-vote-header" item>
+        <Typography variant="h6">Cast your vote</Typography>
+      </Grid>
+      <Grid className="install-location" item>
+        <Typography variant="body2" color={theme.colors.gray[90]}>
+          Your Yes vote will be approving the policy at{" "}
+          <span style={{ color: theme.colors.gray[40] }}>this location</span>
+        </Typography>
+      </Grid>
+      <Grid className="vote-submission-section" container direction="row" alignItems="center" spacing={2}>
+        <Grid item xs={3}>
+          <Radio label="Yes" />
+          <Radio label="No" />
+        </Grid>
+        <Grid item xs={6}>
+          <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
+        </Grid>
+        <Grid item xs={3}>
+          <PrimaryButton fullWidth>Vote</PrimaryButton>
+        </Grid>
+      </Grid>
+      <Grid className="vote-breakdown" item>
+        <VoteBreakdown
+          voteForLabel="Yes"
+          voteAgainstLabel="No"
+          voteAbstainLabel="Abstain"
+          voteForCount={proposal.yesVotes}
+          voteAgainstCount={proposal.noVotes}
+          voteAbstainCount={0}
+        />
+      </Grid>
+      <Grid container direction="column">
+        <Grid item>
+          <Typography variant="h6">Top Voters</Typography>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/src/views/Governance/interfaces.ts b/src/views/Governance/interfaces.ts
new file mode 100644
index 0000000000..8aef786ad7
--- /dev/null
+++ b/src/views/Governance/interfaces.ts
@@ -0,0 +1,5 @@
+import { Proposal as ProposalType } from "src/hooks/useProposals";
+
+export type ProposalTabProps = {
+  proposal: ProposalType;
+};

From de64850b9dd94e78b26e2ebbf2e8bdc6e30fc8f4 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 21 Jul 2022 13:48:11 -0400
Subject: [PATCH 018/113] Mock proposal states

---
 src/hooks/useProposal.ts                      |  3 ++
 src/hooks/useProposals.ts                     | 31 +++++++++++++++----
 src/views/Governance/ProposalsDashboard.tsx   |  7 +++--
 .../components/ProposalPage/ProposalPage.tsx  |  3 +-
 src/views/Governance/constants.ts             |  1 +
 src/views/Governance/helpers/index.ts         |  3 ++
 6 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 src/views/Governance/helpers/index.ts

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index b1a8a1f286..ee54e1b8ba 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -8,6 +8,7 @@ import {
   mockGetProposalContent,
   mockGetProposalHasBeenActivated,
   mockGetProposalMetadata,
+  mockGetProposalState,
   mockGetProposalTotalEndorsements,
   mockGetProposalURI,
   mockGetYesVotesForProposal,
@@ -43,6 +44,7 @@ export const useProposal = (instructionsIndex: number) => {
       const noVotes = mockGetNoVotesForProposal(instructionsIndex);
       const proposalURI = mockGetProposalURI(proposal.proposalName);
       const proposalContent = mockGetProposalContent(proposalURI);
+      const proposalState = mockGetProposalState(proposal.proposalName);
 
       const currentProposal = {
         id: instructionsIndex,
@@ -50,6 +52,7 @@ export const useProposal = (instructionsIndex: number) => {
         proposer: proposal.proposer,
         submissionTimestamp: proposal.submissionTimestamp,
         isActive: isActive,
+        state: proposalState,
         endorsements: endorsements,
         yesVotes: yesVotes,
         noVotes: noVotes,
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 3c87ca9d5b..dd3529f5ea 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -16,6 +16,7 @@ export interface Proposal {
   proposer: string;
   submissionTimestamp: number;
   isActive: boolean;
+  state: Status;
   endorsements: number;
   yesVotes: number;
   noVotes: number;
@@ -23,11 +24,13 @@ export interface Proposal {
   content: string;
 }
 
+export type Status = "active" | "endorsement" | "discussion" | "draft" | "closed";
+
 /// Mock totalInstructions value from INSTR.sol
 export const mockTotalInstructions = 3;
 
 /// Mock instructions ID for current active proposal
-export const activeProposal = 3;
+export const activeProposal = 0;
 
 /// Mock mapping data for proposalMetadata in Governance.sol
 export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
@@ -64,9 +67,9 @@ export const mockProposalTotalEndorsements: { [key: number]: number } = {
 /// Mock mapping data on proposal activation in Governance.sol
 export const mockProposalHasBeenActivated: { [key: number]: boolean } = {
   0: true,
-  1: false,
-  2: true,
-  3: true,
+  1: true,
+  2: false,
+  3: false,
 };
 
 /// Mock mapping data on proposal yes votes in Governance.sol
@@ -93,7 +96,7 @@ export const mockProposalURIs: { [key: string]: string } = {
   "0x4f49502d34000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberfour",
 };
 
-/// Mock content stores by IPFS URI
+/// Mock content stored at IPFS URI
 export const mockProposalContent: { [key: string]: string } = {
   "ipfs://proposalnumberone": "This is OIP-1. The first mock proposal",
   "ipfs://proposalnumbertwo": "This is OIP-2. The second mock proposal",
@@ -101,6 +104,14 @@ export const mockProposalContent: { [key: string]: string } = {
   "ipfs://proposalnumberfour": "This is OIP-4. The fourth mock proposal",
 };
 
+/// Mock proposal state (don't know if this will be stored at IPFS URI or in-contract)
+export const mockProposalState: { [key: string]: Status } = {
+  "0x4f49502d31000000000000000000000000000000000000000000000000000000": "active",
+  "0x4f49502d32000000000000000000000000000000000000000000000000000000": "discussion",
+  "0x4f49502d33000000000000000000000000000000000000000000000000000000": "closed",
+  "0x4f49502d34000000000000000000000000000000000000000000000000000000": "draft",
+};
+
 /// Function to return mock total instructions in lieu of a contract
 export const mockGetTotalInstructions = (): number => {
   return mockTotalInstructions;
@@ -141,6 +152,11 @@ export const mockGetProposalContent = (uri: string): string => {
   return mockProposalContent[uri];
 };
 
+/// Function to return mock proposal state in lieu of contract/content deployed to IPFS
+export const mockGetProposalState = (proposalName: string): Status => {
+  return mockProposalState[proposalName];
+};
+
 /**
  * Query key for useProposals. Doesn't need to be refreshed on address or network changes
  * Proposals should be fetched no matter what.
@@ -173,7 +189,7 @@ export const useProposals = (filters: { isActive?: boolean }) => {
       const allProposals: Proposal[] = [];
 
       /// For each proposal, fetch the relevant data points used in the frontend
-      for (let i = 0; i < numberOfProposals; i++) {
+      for (let i = 0; i <= numberOfProposals; i++) {
         const proposal = mockGetProposalMetadata(i);
         const isActive = mockGetProposalHasBeenActivated(i);
         const endorsements = mockGetProposalTotalEndorsements(i);
@@ -181,6 +197,7 @@ export const useProposals = (filters: { isActive?: boolean }) => {
         const noVotes = mockGetNoVotesForProposal(i);
         const proposalURI = mockGetProposalURI(proposal.proposalName);
         const proposalContent = mockGetProposalContent(proposalURI);
+        const proposalState = mockGetProposalState(proposal.proposalName);
 
         const currentProposal = {
           id: i,
@@ -188,6 +205,7 @@ export const useProposals = (filters: { isActive?: boolean }) => {
           proposer: proposal.proposer,
           submissionTimestamp: proposal.submissionTimestamp,
           isActive: isActive,
+          state: proposalState,
           endorsements: endorsements,
           yesVotes: yesVotes,
           noVotes: noVotes,
@@ -196,6 +214,7 @@ export const useProposals = (filters: { isActive?: boolean }) => {
         };
 
         allProposals.push(currentProposal);
+        console.log(allProposals);
       }
       if (filters) {
         return allProposals.filter(proposal => proposal.isActive === filters.isActive);
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 958e0b639b..a63f00f689 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -9,6 +9,7 @@ import { Proposal as ProposalType, useProposals } from "src/hooks/useProposals";
 
 import { FilterModal } from "./components/FilterModal";
 import { SearchBar } from "./components/SearchBar/SearchBar";
+import { toCapitalCase } from "./helpers";
 
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
@@ -30,13 +31,13 @@ export const ProposalsDashboard = () => {
   const renderProposals = () => {
     return allProposalsData.map(proposal => {
       return (
-        <Grid item xs={12}>
+        <Grid key={proposal.proposalName} item xs={12}>
           <Link to={`/governancetest/proposals/${proposal.id}`} component={RouterLink}>
             <Proposal
-              chipLabel="Discussion"
+              chipLabel={toCapitalCase(proposal.state)}
               proposalTitle={proposal.proposalName}
               publishedDate={new Date(1659389876)}
-              status="discussion"
+              status={proposal.state}
               voteEndDate={new Date(1659389876)}
               votesAbstain={0}
               votesAgainst={proposal.noVotes}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 30b3c99dd1..8f76d32903 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -11,6 +11,7 @@ import { useProposal } from "src/hooks/useProposal";
 import { Proposal as ProposalType } from "src/hooks/useProposals";
 
 import { NULL_PROPOSAL } from "../../constants";
+import { toCapitalCase } from "../../helpers";
 import { BackButton } from "../BackButton";
 import { PollDetailsTab } from "./components/PollDetailsTab";
 import { VotesTab } from "./components/VotesTab";
@@ -73,7 +74,7 @@ export const ProposalPage = () => {
         </Grid>
         <Grid container direction="row" alignItems="center">
           <Grid item>
-            <Chip label="Active" template={mapStatus("active")} strong />
+            <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
           </Grid>
           <Grid item>
             <Box pl="9px" display="flex">
diff --git a/src/views/Governance/constants.ts b/src/views/Governance/constants.ts
index 823a0f420f..d67cab9521 100644
--- a/src/views/Governance/constants.ts
+++ b/src/views/Governance/constants.ts
@@ -6,6 +6,7 @@ export const NULL_PROPOSAL: Proposal = {
   proposer: "",
   submissionTimestamp: 0,
   isActive: false,
+  state: "closed",
   endorsements: 0,
   yesVotes: 0,
   noVotes: 0,
diff --git a/src/views/Governance/helpers/index.ts b/src/views/Governance/helpers/index.ts
new file mode 100644
index 0000000000..3c95f95ff6
--- /dev/null
+++ b/src/views/Governance/helpers/index.ts
@@ -0,0 +1,3 @@
+export const toCapitalCase = (value: string): string => {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};

From 7ad6c9c731a61d6d83ce72ac4feae56937c13dcd Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 21 Jul 2022 14:15:16 -0400
Subject: [PATCH 019/113] Update snapshots, unsure why Give was failing

---
 .../Give/__tests__/__snapshots__/Give.unit.test.jsx.snap      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap b/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap
index 18392aa1af..fee2e38530 100644
--- a/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap
+++ b/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap
@@ -1168,7 +1168,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                 class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-18ow2ad-MuiGrid-root"
               >
                 <button
-                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-1i9s4yu-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-17q2gsh-MuiButtonBase-root-MuiButton-root"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -2050,7 +2050,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                               class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-18ow2ad-MuiGrid-root"
                             >
                               <button
-                                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-1i9s4yu-MuiButtonBase-root-MuiButton-root"
+                                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-17q2gsh-MuiButtonBase-root-MuiButton-root"
                                 disabled=""
                                 tabindex="-1"
                                 type="button"

From 244044c07cff5d78efc984c8f1ce21735704f87b Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 27 Jul 2022 06:38:03 -0500
Subject: [PATCH 020/113] proposals state

---
 src/hooks/useProposals.ts                   | 55 ++++++++++++++++++---
 src/views/Governance/ProposalsDashboard.tsx |  3 +-
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 3c87ca9d5b..e5ef17c37c 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -23,6 +23,18 @@ export interface Proposal {
   content: string;
 }
 
+export interface ProposalAndState extends Proposal, IProposalState {}
+
+/**
+ * the proposals current state
+ * - currenly only Active & Endorsements status are stored on chain
+ * - all other states would be stored off-chain, either from the forum
+ * - TODO(appleseed): how does a proposal get to "closed" state?
+ */
+export interface IProposalState {
+  state: "active" | "endorsements" | "discussion" | "draft" | "closed";
+}
+
 /// Mock totalInstructions value from INSTR.sol
 export const mockTotalInstructions = 3;
 
@@ -145,7 +157,7 @@ export const mockGetProposalContent = (uri: string): string => {
  * Query key for useProposals. Doesn't need to be refreshed on address or network changes
  * Proposals should be fetched no matter what.
  */
-export const proposalsQueryKey = (filters: { isActive?: boolean }) => {
+export const proposalsQueryKey = (filters: IProposalState) => {
   if (filters) {
     return ["useProposals", filters].filter(nonNullable);
   } else {
@@ -153,6 +165,27 @@ export const proposalsQueryKey = (filters: { isActive?: boolean }) => {
   }
 };
 
+export const filterStatement = ({ proposal, filters }: { proposal: ProposalAndState; filters: IProposalState }) => {
+  let result = proposal.isActive;
+  if (filters) {
+    switch (filters.state) {
+      case "active":
+        result = proposal.isActive;
+        break;
+      case "endorsements":
+        result = proposal.isActive === false;
+        break;
+      case "discussion":
+      case "draft":
+      case "closed":
+        break;
+      default:
+        console.log(`Sorry, we are out of somethings wrong.`);
+    }
+  }
+  return result;
+};
+
 /**
  * @notice  Fetches proposals from Governance policy, the related endorsements, yes votes,
  *          and no votes. Uses the proposal metadata to fetch the IPFS URIs containing the
@@ -160,17 +193,17 @@ export const proposalsQueryKey = (filters: { isActive?: boolean }) => {
  * @returns Query object in which the data attribute holds an array of Proposal objects for
  *          all proposals in the Governance policy contract
  */
-export const useProposals = (filters: { isActive?: boolean }) => {
+export const useProposals = (filters: IProposalState) => {
   /// const INSTRContract = "";
   /// const IPFSDContract = "";
   /// const governanceContract = "";
 
-  const query = useQuery<Proposal[], Error>(
+  const query = useQuery<ProposalAndState[], Error>(
     proposalsQueryKey(filters),
     async () => {
       /// Get total number of proposal through INSTR module contract's totalInstructions variable
       const numberOfProposals = mockGetTotalInstructions();
-      const allProposals: Proposal[] = [];
+      const allProposals: ProposalAndState[] = [];
 
       /// For each proposal, fetch the relevant data points used in the frontend
       for (let i = 0; i < numberOfProposals; i++) {
@@ -182,7 +215,16 @@ export const useProposals = (filters: { isActive?: boolean }) => {
         const proposalURI = mockGetProposalURI(proposal.proposalName);
         const proposalContent = mockGetProposalContent(proposalURI);
 
-        const currentProposal = {
+        /**
+         * contains parsing logic to determine a proposal's state
+         * - TODO(appleseed): still need to determine methodolgy for "discussion", "draft" and "closed" states
+         * @returns {IProposalState} IProposalState
+         */
+        const proposalState = () => {
+          return isActive ? "active" : "endorsements";
+        };
+
+        const currentProposal: ProposalAndState = {
           id: i,
           proposalName: ethers.utils.parseBytes32String(proposal.proposalName),
           proposer: proposal.proposer,
@@ -193,12 +235,13 @@ export const useProposals = (filters: { isActive?: boolean }) => {
           noVotes: noVotes,
           uri: proposalURI,
           content: proposalContent,
+          state: proposalState(),
         };
 
         allProposals.push(currentProposal);
       }
       if (filters) {
-        return allProposals.filter(proposal => proposal.isActive === filters.isActive);
+        return allProposals.filter(proposal => filterStatement({ proposal, filters }));
       } else {
         return allProposals;
       }
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 958e0b639b..f58462a554 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -12,8 +12,7 @@ import { SearchBar } from "./components/SearchBar/SearchBar";
 
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-
-  const _useProposals = useProposals({ isActive: false });
+  const _useProposals = useProposals({ state: "active" });
   const allProposalsData: ProposalType[] = useMemo(() => {
     if (_useProposals.isLoading || !_useProposals.data) return [];
     return _useProposals.data;

From c2e55febac608be40ecc5168b8872e2e276e21cc Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 28 Jul 2022 12:06:29 -0500
Subject: [PATCH 021/113] add contract abis

---
 src/abi/OlympusGovernance.json | 282 +++++++++++++++++++++++++++++++++
 src/abi/OlympusVoteIssuer.json |  82 ++++++++++
 2 files changed, 364 insertions(+)
 create mode 100644 src/abi/OlympusGovernance.json
 create mode 100644 src/abi/OlympusVoteIssuer.json

diff --git a/src/abi/OlympusGovernance.json b/src/abi/OlympusGovernance.json
new file mode 100644
index 0000000000..49a9568ee3
--- /dev/null
+++ b/src/abi/OlympusGovernance.json
@@ -0,0 +1,282 @@
+{
+  "abi": [
+    {
+      "inputs": [{ "internalType": "contract Kernel", "name": "kernel_", "type": "address" }],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    { "inputs": [], "name": "ActiveProposalNotExpired", "type": "error" },
+    { "inputs": [], "name": "CannotEndorseInvalidProposal", "type": "error" },
+    { "inputs": [], "name": "CannotEndorseNullProposal", "type": "error" },
+    { "inputs": [], "name": "CannotReclaimTokensForActiveVote", "type": "error" },
+    { "inputs": [], "name": "CannotReclaimZeroVotes", "type": "error" },
+    { "inputs": [], "name": "ExecutionTimelockStillActive", "type": "error" },
+    { "inputs": [], "name": "NoActiveProposalDetected", "type": "error" },
+    { "inputs": [], "name": "NotAuthorizedToActivateProposal", "type": "error" },
+    { "inputs": [], "name": "NotEnoughEndorsementsToActivateProposal", "type": "error" },
+    { "inputs": [], "name": "NotEnoughVotesToExecute", "type": "error" },
+    { "inputs": [], "name": "NotEnoughVotesToPropose", "type": "error" },
+    {
+      "inputs": [{ "internalType": "Keycode", "name": "keycode_", "type": "bytes5" }],
+      "name": "Policy_ModuleDoesNotExist",
+      "type": "error"
+    },
+    {
+      "inputs": [{ "internalType": "address", "name": "caller_", "type": "address" }],
+      "name": "Policy_OnlyKernel",
+      "type": "error"
+    },
+    { "inputs": [], "name": "ProposalAlreadyActivated", "type": "error" },
+    { "inputs": [], "name": "SubmittedProposalHasExpired", "type": "error" },
+    { "inputs": [], "name": "UserAlreadyVoted", "type": "error" },
+    { "inputs": [], "name": "VotingTokensAlreadyReclaimed", "type": "error" },
+    {
+      "anonymous": false,
+      "inputs": [
+        { "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
+        { "indexed": false, "internalType": "uint256", "name": "timestamp", "type": "uint256" }
+      ],
+      "name": "ProposalActivated",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        { "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
+        { "indexed": false, "internalType": "address", "name": "voter", "type": "address" },
+        { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
+      ],
+      "name": "ProposalEndorsed",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [{ "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" }],
+      "name": "ProposalExecuted",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [{ "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" }],
+      "name": "ProposalSubmitted",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        { "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
+        { "indexed": false, "internalType": "address", "name": "voter", "type": "address" },
+        { "indexed": false, "internalType": "bool", "name": "for_", "type": "bool" },
+        { "indexed": false, "internalType": "uint256", "name": "userVotes", "type": "uint256" }
+      ],
+      "name": "WalletVoted",
+      "type": "event"
+    },
+    {
+      "inputs": [],
+      "name": "INSTR",
+      "outputs": [{ "internalType": "contract DefaultInstructions", "name": "", "type": "address" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "VOTES",
+      "outputs": [{ "internalType": "contract DefaultVotes", "name": "", "type": "address" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
+      "name": "activateProposal",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "activeProposal",
+      "outputs": [
+        { "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
+        { "internalType": "uint256", "name": "activationTimestamp", "type": "uint256" }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "configureDependencies",
+      "outputs": [{ "internalType": "Keycode[]", "name": "dependencies", "type": "bytes5[]" }],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
+      "name": "endorseProposal",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    { "inputs": [], "name": "executeProposal", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
+    {
+      "inputs": [],
+      "name": "getActiveProposal",
+      "outputs": [
+        {
+          "components": [
+            { "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
+            { "internalType": "uint256", "name": "activationTimestamp", "type": "uint256" }
+          ],
+          "internalType": "struct ActivatedProposal",
+          "name": "",
+          "type": "tuple"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
+      "name": "getMetadata",
+      "outputs": [
+        {
+          "components": [
+            { "internalType": "bytes32", "name": "proposalName", "type": "bytes32" },
+            { "internalType": "address", "name": "proposer", "type": "address" },
+            { "internalType": "uint256", "name": "submissionTimestamp", "type": "uint256" }
+          ],
+          "internalType": "struct ProposalMetadata",
+          "name": "",
+          "type": "tuple"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "name": "getProposalMetadata",
+      "outputs": [
+        { "internalType": "bytes32", "name": "proposalName", "type": "bytes32" },
+        { "internalType": "address", "name": "proposer", "type": "address" },
+        { "internalType": "uint256", "name": "submissionTimestamp", "type": "uint256" }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "kernel",
+      "outputs": [{ "internalType": "contract Kernel", "name": "", "type": "address" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "name": "noVotesForProposal",
+      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "name": "proposalHasBeenActivated",
+      "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
+      "name": "reclaimVotes",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "requestPermissions",
+      "outputs": [
+        {
+          "components": [
+            { "internalType": "Keycode", "name": "keycode", "type": "bytes5" },
+            { "internalType": "bytes4", "name": "funcSelector", "type": "bytes4" }
+          ],
+          "internalType": "struct Permissions[]",
+          "name": "requests",
+          "type": "tuple[]"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "components": [
+            { "internalType": "enum Actions", "name": "action", "type": "uint8" },
+            { "internalType": "address", "name": "target", "type": "address" }
+          ],
+          "internalType": "struct Instruction[]",
+          "name": "instructions_",
+          "type": "tuple[]"
+        },
+        { "internalType": "bytes32", "name": "proposalName_", "type": "bytes32" }
+      ],
+      "name": "submitProposal",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        { "internalType": "uint256", "name": "", "type": "uint256" },
+        { "internalType": "address", "name": "", "type": "address" }
+      ],
+      "name": "tokenClaimsForProposal",
+      "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "name": "totalEndorsementsForProposal",
+      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        { "internalType": "uint256", "name": "", "type": "uint256" },
+        { "internalType": "address", "name": "", "type": "address" }
+      ],
+      "name": "userEndorsementsForProposal",
+      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        { "internalType": "uint256", "name": "", "type": "uint256" },
+        { "internalType": "address", "name": "", "type": "address" }
+      ],
+      "name": "userVotesForProposal",
+      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "bool", "name": "for_", "type": "bool" }],
+      "name": "vote",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "name": "yesVotesForProposal",
+      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ]
+}
diff --git a/src/abi/OlympusVoteIssuer.json b/src/abi/OlympusVoteIssuer.json
new file mode 100644
index 0000000000..cd7df6eb30
--- /dev/null
+++ b/src/abi/OlympusVoteIssuer.json
@@ -0,0 +1,82 @@
+{
+  "abi": [
+    {
+      "inputs": [{ "internalType": "contract Kernel", "name": "kernel_", "type": "address" }],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "inputs": [{ "internalType": "Keycode", "name": "keycode_", "type": "bytes5" }],
+      "name": "Policy_ModuleDoesNotExist",
+      "type": "error"
+    },
+    {
+      "inputs": [{ "internalType": "address", "name": "caller_", "type": "address" }],
+      "name": "Policy_OnlyKernel",
+      "type": "error"
+    },
+    {
+      "inputs": [{ "internalType": "Role", "name": "role_", "type": "bytes32" }],
+      "name": "Policy_OnlyRole",
+      "type": "error"
+    },
+    {
+      "inputs": [],
+      "name": "VOTES",
+      "outputs": [{ "internalType": "contract DefaultVotes", "name": "", "type": "address" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        { "internalType": "address", "name": "wallet_", "type": "address" },
+        { "internalType": "uint256", "name": "amt_", "type": "uint256" }
+      ],
+      "name": "burn",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "configureDependencies",
+      "outputs": [{ "internalType": "Keycode[]", "name": "dependencies", "type": "bytes5[]" }],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "kernel",
+      "outputs": [{ "internalType": "contract Kernel", "name": "", "type": "address" }],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        { "internalType": "address", "name": "wallet_", "type": "address" },
+        { "internalType": "uint256", "name": "amt_", "type": "uint256" }
+      ],
+      "name": "mint",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "requestPermissions",
+      "outputs": [
+        {
+          "components": [
+            { "internalType": "Keycode", "name": "keycode", "type": "bytes5" },
+            { "internalType": "bytes4", "name": "funcSelector", "type": "bytes4" }
+          ],
+          "internalType": "struct Permissions[]",
+          "name": "requests",
+          "type": "tuple[]"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ]
+}

From 325ddcd928cbff40eb2b1cf7cc31625d57853afe Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 28 Jul 2022 12:30:33 -0500
Subject: [PATCH 022/113] add contract addresses

---
 src/constants/addresses.ts | 10 ++++++++++
 src/constants/contracts.ts | 16 ++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index 3b07938de6..bfbcdf83ac 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -170,3 +170,13 @@ export const BALANCER_VAULT_ADDRESSSES = {
 export const DEV_FAUCET = {
   [NetworkId.TESTNET_GOERLI]: "0x405940141AeE885347ef4C47d933eF4cA6A674D8",
 };
+
+export const GOVERNANCE_ADDRESSES = {
+  [NetworkId.MAINNET]: "",
+  [NetworkId.TESTNET_GOERLI]: "0xaAd5e6e1362b458E38140B7E8c6d5D71b933a56f",
+};
+
+export const VOTE_ISSUER_ADDRESSES = {
+  [NetworkId.MAINNET]: "",
+  [NetworkId.TESTNET_GOERLI]: "0xB737239c3d0FfcB30184D3d1156A6D91a023233D",
+};
diff --git a/src/constants/contracts.ts b/src/constants/contracts.ts
index 3faa3ed696..6c1a5cd605 100644
--- a/src/constants/contracts.ts
+++ b/src/constants/contracts.ts
@@ -7,8 +7,10 @@ import {
   FuseProxy__factory,
   OlympusGiving__factory,
   OlympusGivingOld__factory,
+  OlympusGovernance__factory,
   OlympusProV2__factory,
   OlympusStakingv2__factory,
+  OlympusVoteIssuer__factory,
   PrizePool__factory,
   Zap__factory,
 } from "src/typechain";
@@ -23,11 +25,13 @@ import {
   FUSE_POOL_18_ADDRESSES,
   FUSE_POOL_36_ADDRESSES,
   GIVE_ADDRESSES,
+  GOVERNANCE_ADDRESSES,
   MIGRATOR_ADDRESSES,
   OLD_GIVE_ADDRESSES,
   OP_BOND_DEPOSITORY_ADDRESSES,
   PT_PRIZE_POOL_ADDRESSES,
   STAKING_ADDRESSES,
+  VOTE_ISSUER_ADDRESSES,
   ZAP_ADDRESSES,
 } from "./addresses";
 
@@ -114,3 +118,15 @@ export const OLD_GIVE_CONTRACT = new Contract({
   name: "Olympus Give Contract V1",
   addresses: OLD_GIVE_ADDRESSES,
 });
+
+export const GOVERNANCE_CONTRACT = new Contract({
+  factory: OlympusGovernance__factory,
+  name: "Olympus Governance",
+  addresses: GOVERNANCE_ADDRESSES,
+});
+
+export const VOTE_ISSUER_CONTRACT = new Contract({
+  factory: OlympusVoteIssuer__factory,
+  name: "Olympus Vote Issuer",
+  addresses: VOTE_ISSUER_ADDRESSES,
+});

From 9c84cc65645ab5faa13cec90e1184c0837172746 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 28 Jul 2022 13:20:48 -0500
Subject: [PATCH 023/113] query hooks

---
 src/hooks/useProposal.ts  | 20 ++++++------
 src/hooks/useProposals.ts | 66 ++++++++++++++++++++++++++++++++-------
 2 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index ee54e1b8ba..8e32cd171a 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -4,14 +4,14 @@ import { nonNullable } from "src/helpers/types/nonNullable";
 
 /// Import Proposal data type and mock data getters from useProposals
 import {
-  mockGetNoVotesForProposal,
+  MockGetNoVotesForProposal,
   mockGetProposalContent,
-  mockGetProposalHasBeenActivated,
-  mockGetProposalMetadata,
+  MockGetProposalHasBeenActivated,
+  MockGetProposalMetadata,
   mockGetProposalState,
-  mockGetProposalTotalEndorsements,
+  MockGetProposalTotalEndorsements,
   mockGetProposalURI,
-  mockGetYesVotesForProposal,
+  MockGetYesVotesForProposal,
   Proposal,
 } from "./useProposals";
 
@@ -37,11 +37,11 @@ export const useProposal = (instructionsIndex: number) => {
     proposalQueryKey(instructionsIndex),
     async () => {
       /// For the specified proposal index, fetch the relevant data points used in the frontend
-      const proposal = mockGetProposalMetadata(instructionsIndex);
-      const isActive = mockGetProposalHasBeenActivated(instructionsIndex);
-      const endorsements = mockGetProposalTotalEndorsements(instructionsIndex);
-      const yesVotes = mockGetYesVotesForProposal(instructionsIndex);
-      const noVotes = mockGetNoVotesForProposal(instructionsIndex);
+      const proposal = MockGetProposalMetadata(instructionsIndex);
+      const isActive = MockGetProposalHasBeenActivated(instructionsIndex);
+      const endorsements = MockGetProposalTotalEndorsements(instructionsIndex);
+      const yesVotes = MockGetYesVotesForProposal(instructionsIndex);
+      const noVotes = MockGetNoVotesForProposal(instructionsIndex);
       const proposalURI = mockGetProposalURI(proposal.proposalName);
       const proposalContent = mockGetProposalContent(proposalURI);
       const proposalState = mockGetProposalState(proposal.proposalName);
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index afb9dff355..44548dd217 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,6 +1,8 @@
 import { ethers } from "ethers";
 import { useQuery } from "react-query";
+import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { nonNullable } from "src/helpers/types/nonNullable";
+import { useNetwork } from "wagmi";
 
 /// Data type for return from getProposalMetadata on Governance.sol
 interface proposalMetadata {
@@ -120,41 +122,81 @@ export const mockProposalState: { [key: string]: PStatus } = {
   "0x4f49502d34000000000000000000000000000000000000000000000000000000": "draft",
 };
 
-/// Function to return mock total instructions in lieu of a contract
+//TODO: Not implemented in Contract. Follow up with SC Team
 export const mockGetTotalInstructions = (): number => {
   return mockTotalInstructions;
 };
 
 /// Function to return mock proposal metadata in lieu of a contract
-export const mockGetProposalMetadata = (instructionIndex: number) => {
-  return mockProposalMetadata[instructionIndex];
+export const MockGetProposalMetadata = (instructionsIndex: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data, isFetched, isLoading } = useQuery(["GetProposalMetadata", instructionsIndex], async () => {
+    return await contract.getProposalMetadata(instructionsIndex);
+  });
+  //TODO: Swap Return statement to return contract results
+  return mockProposalMetadata[instructionsIndex];
+  //return { data, isFetched, isLoading };
 };
 
 /// Function to return mock proposal endoresments in lieu of a contract
-export const mockGetProposalTotalEndorsements = (instructionsIndex: number): number => {
+export const MockGetProposalTotalEndorsements = (instructionsIndex: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data, isFetched, isLoading } = useQuery(["GetProposalTotalEndorsements", instructionsIndex], async () => {
+    return await contract.totalEndorsementsForProposal(instructionsIndex);
+  });
+
+  //TODO: Swap Return statement to return contract results
   return mockProposalTotalEndorsements[instructionsIndex];
+  //return { data, isFetched, isLoading };
 };
 
 /// Function to return mock proposal activation data in lieu of a contract
-export const mockGetProposalHasBeenActivated = (instructionsIndex: number): boolean => {
+export const MockGetProposalHasBeenActivated = (instructionsIndex: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data, isFetched, isLoading } = useQuery(["ProposalHasBeenActivated", instructionsIndex], async () => {
+    return await contract.proposalHasBeenActivated(instructionsIndex);
+  });
+
+  //TODO: Swap Return statement to return contract results
   return mockProposalHasBeenActivated[instructionsIndex];
+  //return { data, isFetched, isLoading };
 };
 
 /// Function to return mock proposal yes votes in lieu of a contract
-export const mockGetYesVotesForProposal = (instructionsIndex: number): number => {
+export const MockGetYesVotesForProposal = (instructionsIndex: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data, isFetched, isLoading } = useQuery(["YesVotesForProposal", instructionsIndex], async () => {
+    return await contract.yesVotesForProposal(instructionsIndex);
+  });
+
+  //TODO: Swap Return statement to return contract results
   return mockYesVotesForProposal[instructionsIndex];
+  //return { data, isFetched, isLoading };
 };
 
 /// Function to return mock proposal no votes in lieu of a contract
-export const mockGetNoVotesForProposal = (instructionsIndex: number): number => {
+export const MockGetNoVotesForProposal = (instructionsIndex: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data, isFetched, isLoading } = useQuery(["NoVotesForProposal", instructionsIndex], async () => {
+    return await contract.noVotesForProposal(instructionsIndex);
+  });
+  //TODO: Swap Return statement to return contract results
   return mockNoVotesForProposal[instructionsIndex];
+  //return { data, isFetched, isLoading };
 };
 
+//TODO: Not implemented in Contract. Follow up with SC Team
 /// Function to return mock proposal URI in lieu of a contract
 export const mockGetProposalURI = (proposalName: string): string => {
   return mockProposalURIs[proposalName];
 };
 
+//TODO: Not implemented in Contract. Follow up with SC Team
 /// Function to return mock proposal content in lieu of content deployed to IPFS
 export const mockGetProposalContent = (uri: string): string => {
   return mockProposalContent[uri];
@@ -219,11 +261,11 @@ export const useProposals = (filters: IProposalState) => {
 
       /// For each proposal, fetch the relevant data points used in the frontend
       for (let i = 0; i <= numberOfProposals; i++) {
-        const proposal = mockGetProposalMetadata(i);
-        const isActive = mockGetProposalHasBeenActivated(i);
-        const endorsements = mockGetProposalTotalEndorsements(i);
-        const yesVotes = mockGetYesVotesForProposal(i);
-        const noVotes = mockGetNoVotesForProposal(i);
+        const proposal = MockGetProposalMetadata(i);
+        const isActive = MockGetProposalHasBeenActivated(i);
+        const endorsements = MockGetProposalTotalEndorsements(i);
+        const yesVotes = MockGetYesVotesForProposal(i);
+        const noVotes = MockGetNoVotesForProposal(i);
         const proposalURI = mockGetProposalURI(proposal.proposalName);
         const proposalContent = mockGetProposalContent(proposalURI);
         /**

From 416f90ccb11613944dfe75fe0ff362bf699b7b54 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 28 Jul 2022 13:24:09 -0500
Subject: [PATCH 024/113] annotations. add query hooks for contracts

---
 src/hooks/useProposal.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 8e32cd171a..d1460914a8 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -28,6 +28,7 @@ const proposalQueryKey = (instructionsIndex: number) => ["useProposal", instruct
  * @param instructionsIndex The index number of the proposal to fetch
  * @returns Query object in which the data attribute holds a Proposal object for the proposal at
  *          relevant index
+ *  * TODO: This needs to be refactored to use dependent queries. We cannot nest useQuery calls as mocked here.
  */
 export const useProposal = (instructionsIndex: number) => {
   /// const IPFSDContract = "";

From b92d6b6e72dcb148cdcd2f4b38f37aa3f5713be2 Mon Sep 17 00:00:00 2001
From: brightiron <95196612+brightiron@users.noreply.github.com>
Date: Mon, 1 Aug 2022 12:01:52 -0500
Subject: [PATCH 025/113] OCG Sync Alpha  (#2113)

* updating alpha snapshots

* build(deps-dev): bump @babel/plugin-proposal-private-methods (#2038)

Bumps [@babel/plugin-proposal-private-methods](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-proposal-private-methods) from 7.17.12 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-plugin-proposal-private-methods)

---
updated-dependencies:
- dependency-name: "@babel/plugin-proposal-private-methods"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* updating v3 colors

* zap input styling to align with other inputs

* build(deps-dev): bump @babel/preset-react from 7.17.12 to 7.18.6 (#2052)

Bumps [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) from 7.17.12 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-preset-react)

---
updated-dependencies:
- dependency-name: "@babel/preset-react"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* updating component library

* build(deps-dev): bump eslint-plugin-prettier from 4.0.0 to 4.2.1 (#2057)

Bumps [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) from 4.0.0 to 4.2.1.
- [Release notes](https://github.com/prettier/eslint-plugin-prettier/releases)
- [Changelog](https://github.com/prettier/eslint-plugin-prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/eslint-plugin-prettier/compare/v4.0.0...v4.2.1)

---
updated-dependencies:
- dependency-name: eslint-plugin-prettier
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* remove apy copy & replace with annual rebases (#2054)

* remove apy copy & replace with annual rebases

* update next rebase amount to your next rebase

* adjusting tooltip APY reference

Co-authored-by: brightiron <brightiron@protonmail.com>

* build(deps-dev): bump @babel/runtime from 7.18.3 to 7.18.6 (#2058)

Bumps [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime) from 7.18.3 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-runtime)

---
updated-dependencies:
- dependency-name: "@babel/runtime"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump @babel/plugin-transform-destructuring (#2043)

Bumps [@babel/plugin-transform-destructuring](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-destructuring) from 7.18.0 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-plugin-transform-destructuring)

---
updated-dependencies:
- dependency-name: "@babel/plugin-transform-destructuring"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump @babel/plugin-proposal-class-properties (#2037)

Bumps [@babel/plugin-proposal-class-properties](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-proposal-class-properties) from 7.17.12 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-plugin-proposal-class-properties)

---
updated-dependencies:
- dependency-name: "@babel/plugin-proposal-class-properties"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* updating dark color palette. changing background and nav

* updating snapshots

* update snapshots

* add test back

* update test

* build(deps-dev): bump @babel/plugin-syntax-flow from 7.17.12 to 7.18.6 (#2063)

Bumps [@babel/plugin-syntax-flow](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-syntax-flow) from 7.17.12 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-plugin-syntax-flow)

---
updated-dependencies:
- dependency-name: "@babel/plugin-syntax-flow"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump @typescript-eslint/eslint-plugin (#2062)

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.30.0 to 5.30.6.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.30.6/packages/eslint-plugin)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump @lingui/macro from 3.13.3 to 3.14.0 (#2044)

Bumps [@lingui/macro](https://github.com/lingui/js-lingui) from 3.13.3 to 3.14.0.
- [Release notes](https://github.com/lingui/js-lingui/releases)
- [Changelog](https://github.com/lingui/js-lingui/blob/main/CHANGELOG.md)
- [Commits](https://github.com/lingui/js-lingui/compare/v3.13.3...v3.14.0)

---
updated-dependencies:
- dependency-name: "@lingui/macro"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @mui/material from 5.8.3 to 5.8.7 (#2040)

* build(deps): bump @mui/material from 5.8.3 to 5.8.7

Bumps [@mui/material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material) from 5.8.3 to 5.8.7.
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v5.8.7/packages/mui-material)

---
updated-dependencies:
- dependency-name: "@mui/material"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* update snapshots

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: brightiron <brightiron@protonmail.com>

* build(deps): bump wagmi from 0.5.6 to 0.5.9 (#2074)

Bumps [wagmi](https://github.com/tmm/wagmi) from 0.5.6 to 0.5.9.
- [Release notes](https://github.com/tmm/wagmi/releases)
- [Commits](https://github.com/tmm/wagmi/compare/wagmi@0.5.6...wagmi@0.5.9)

---
updated-dependencies:
- dependency-name: wagmi
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump jest-puppeteer from 6.1.0 to 6.1.1 (#2072)

Bumps [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) from 6.1.0 to 6.1.1.
- [Release notes](https://github.com/smooth-code/jest-puppeteer/releases)
- [Changelog](https://github.com/smooth-code/jest-puppeteer/blob/master/CHANGELOG.md)
- [Commits](https://github.com/smooth-code/jest-puppeteer/compare/v6.1.0...v6.1.1)

---
updated-dependencies:
- dependency-name: jest-puppeteer
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump @babel/plugin-proposal-private-property-in-object (#2075)

Bumps [@babel/plugin-proposal-private-property-in-object](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-proposal-private-property-in-object) from 7.17.12 to 7.18.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.18.6/packages/babel-plugin-proposal-private-property-in-object)

---
updated-dependencies:
- dependency-name: "@babel/plugin-proposal-private-property-in-object"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps-dev): bump eslint from 8.18.0 to 8.19.0 (#2071)

Bumps [eslint](https://github.com/eslint/eslint) from 8.18.0 to 8.19.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.18.0...v8.19.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* update snapshot

Co-authored-by: appleseed-iii <80423742+appleseed-iii@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json                                  |  30 +-
 src/__tests__/App.unit.test.jsx               |  13 +-
 .../CallToAction.unit.test.tsx.snap           |   2 +-
 .../GrantCard.unit.test.tsx.snap              |  20 +-
 .../ProjectCard.unit.test.tsx.snap            |  10 +-
 .../__snapshots__/Sidebar.unit.test.tsx.snap  |  28 +-
 src/components/StagingNotification.tsx        |  31 +-
 src/themes/dark.js                            |  12 +-
 src/themes/darkPalette.js                     |   6 +-
 src/themes/light.js                           |  10 +-
 src/views/Give/CausesDashboard.tsx            |   2 +-
 src/views/Give/Give.tsx                       |   8 +-
 src/views/Give/RedeemYield.tsx                |   6 +-
 .../__snapshots__/Give.unit.test.jsx.snap     |  34 +-
 .../RedeemYield.unit.test.jsx.snap            |  18 +-
 .../__snapshots__/Stake.unit.test.tsx.snap    |  64 +-
 .../StakeMobile.unit.test.jsx.snap            |  10 +-
 .../components/StakeFiveDayYield.tsx          |   2 +-
 .../StakeInputArea/StakeInputArea.tsx         |  15 +-
 .../components/StakeNextRebaseAmount.tsx      |   2 +-
 .../StakeArea/components/StakeRebaseYield.tsx |   2 +-
 .../TreasuryDashboard.unit.test.tsx.snap      |  12 +-
 .../TreasuryMobile.unit.test.tsx.snap         |  12 +-
 .../components/Metric/Metric.tsx              |   2 +-
 src/views/TreasuryDashboard/treasuryData.ts   |   8 +-
 src/views/V1-Stake/V1-Stake.jsx               |   8 +-
 .../__snapshots__/V1-Stake.unit.test.tsx.snap | 152 ++--
 .../MigrateInputArea.unit.test.jsx.snap       |   8 +-
 .../__snapshots__/Wrap.unit.test.tsx.snap     |  36 +-
 .../WrapInputArea.unit.test.jsx.snap          |  24 +-
 src/views/Zap/Zap.scss                        |   2 +-
 src/views/Zap/ZapStakeAction.tsx              |  16 +-
 yarn.lock                                     | 666 ++++++++++--------
 33 files changed, 679 insertions(+), 592 deletions(-)

diff --git a/package.json b/package.json
index 7be0971ecc..cc20959277 100644
--- a/package.json
+++ b/package.json
@@ -40,9 +40,9 @@
     "@ledgerhq/iframe-provider": "^0.4.2",
     "@lingui/react": "^3.14.0",
     "@mui/icons-material": "^5.8.3",
-    "@mui/material": "^5.8.4",
+    "@mui/material": "^5.8.7",
     "@multifarm/widget": "^0.0.159",
-    "@olympusdao/component-library": "^2.2.2-gov.0",
+    "@olympusdao/component-library": "^2.2.2-alpha.3",
     "@rainbow-me/rainbowkit": "^0.4.1",
     "@reduxjs/toolkit": "^1.8.2",
     "@types/material-ui": "^0.21.12",
@@ -68,27 +68,27 @@
     "react-uid": "^2.3.2",
     "recharts": "^2.1.12",
     "typescript": "^4.7.4",
-    "wagmi": "^0.5.6"
+    "wagmi": "^0.5.9"
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
-    "@babel/plugin-proposal-private-methods": "^7.17.12",
-    "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-flow": "^7.14.5",
-    "@babel/plugin-transform-destructuring": "^7.18.0",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-destructuring": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.18.6",
     "@babel/plugin-transform-regenerator": "^7.18.0",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/runtime": "^7.18.3",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/runtime": "^7.18.6",
     "@chainsafe/dappeteer": "^2.4.1",
     "@ethersproject/abi": "^5.6.3",
     "@ethersproject/bytes": "^5.6.1",
     "@lingui/cli": "^3.14.0",
     "@lingui/core": "^3.13.0",
-    "@lingui/macro": "^3.13.3",
+    "@lingui/macro": "^3.14.0",
     "@testing-library/dom": "^8.14.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
@@ -104,20 +104,20 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/shelljs": "^0.8.9",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/parser": "^5.28.0",
     "assert": "^2.0.0",
     "autoprefixer": "^10.4.7",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "css-mediaquery": "^0.1.2",
-    "eslint": "^8.18.0",
+    "eslint": "^8.19.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
@@ -128,7 +128,7 @@
     "husky": "^8.0.1",
     "jest": "^28.1.2",
     "jest-extended": "^2.0.0",
-    "jest-puppeteer": "^6.1.0",
+    "jest-puppeteer": "^6.1.1",
     "jest-when": "^3.5.1",
     "less-plugin-npm-import": "^2.1.0",
     "lint-staged": "^13.0.3",
diff --git a/src/__tests__/App.unit.test.jsx b/src/__tests__/App.unit.test.jsx
index ddb9af83ac..4bd33c58ea 100755
--- a/src/__tests__/App.unit.test.jsx
+++ b/src/__tests__/App.unit.test.jsx
@@ -3,7 +3,7 @@ import "src/helpers/index";
 import * as EthersContract from "@ethersproject/contracts";
 import { BigNumber } from "ethers";
 import App from "src/App";
-import { connectWallet, disconnectedWallet } from "src/testHelpers";
+import { connectWallet, createMatchMedia, disconnectedWallet } from "src/testHelpers";
 import * as Contract from "src/typechain";
 
 import { act, render, renderRoute, screen } from "../testUtils";
@@ -114,6 +114,17 @@ describe("Staging Notification Checks", () => {
   it("Should display a notification banner when hostname = staging.olympusdao.finance", async () => {
     connectWallet();
     render(<App />);
+    expect(screen.getByTestId("staging-notification")).toHaveStyle({ marginLeft: "264px" });
+    expect(
+      screen.getByText("You are on the staging site. Any interaction could result in loss of assets."),
+    ).toBeInTheDocument();
+  });
+  it("Should display no left Margin on Mobile", async () => {
+    connectWallet();
+    window.matchMedia = createMatchMedia("300px");
+    render(<App />);
+    expect(screen.getByTestId("staging-notification")).toHaveStyle({ marginLeft: "0px" });
+
     expect(
       screen.getByText("You are on the staging site. Any interaction could result in loss of assets."),
     ).toBeInTheDocument();
diff --git a/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap b/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap
index dd5cc72698..8914ede503 100644
--- a/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap
+++ b/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`<CallToAction/> should render component 1`] = `
                 class="actionable"
               >
                 <a
-                  class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-60u5o6-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-mwop3n-MuiButtonBase-root-MuiButton-root"
                   href="https://docs.olympusdao.finance/main/basics/migration"
                   style="margin-right: 10.5px;"
                   tabindex="0"
diff --git a/src/components/GiveProject/__tests__/__snapshots__/GrantCard.unit.test.tsx.snap b/src/components/GiveProject/__tests__/__snapshots__/GrantCard.unit.test.tsx.snap
index 2d0ba9d953..cca528aecd 100644
--- a/src/components/GiveProject/__tests__/__snapshots__/GrantCard.unit.test.tsx.snap
+++ b/src/components/GiveProject/__tests__/__snapshots__/GrantCard.unit.test.tsx.snap
@@ -537,7 +537,7 @@ exports[`<GrantCard/> should render page 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         Milestones
                       </p>
@@ -592,7 +592,7 @@ exports[`<GrantCard/> should render page 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         About
                       </p>
@@ -992,7 +992,7 @@ exports[`<GrantCard/> should render page with multiple milestones 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         Milestones
                       </p>
@@ -1061,7 +1061,7 @@ exports[`<GrantCard/> should render page with multiple milestones 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         About
                       </p>
@@ -1445,7 +1445,7 @@ exports[`<GrantCard/> should render page without image 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         Milestones
                       </p>
@@ -1500,7 +1500,7 @@ exports[`<GrantCard/> should render page without image 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         About
                       </p>
@@ -1889,7 +1889,7 @@ exports[`<GrantCard/> should render page without milestone description 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         Milestones
                       </p>
@@ -1944,7 +1944,7 @@ exports[`<GrantCard/> should render page without milestone description 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         About
                       </p>
@@ -2310,7 +2310,7 @@ exports[`<GrantCard/> should render page without milestones 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         Milestones
                       </p>
@@ -2346,7 +2346,7 @@ exports[`<GrantCard/> should render page without milestones 1`] = `
                       class="MuiBox-root css-u4p24i"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                       >
                         About
                       </p>
diff --git a/src/components/GiveProject/__tests__/__snapshots__/ProjectCard.unit.test.tsx.snap b/src/components/GiveProject/__tests__/__snapshots__/ProjectCard.unit.test.tsx.snap
index feb2f59118..0ae15855a1 100644
--- a/src/components/GiveProject/__tests__/__snapshots__/ProjectCard.unit.test.tsx.snap
+++ b/src/components/GiveProject/__tests__/__snapshots__/ProjectCard.unit.test.tsx.snap
@@ -145,7 +145,7 @@ exports[`<ProjectCard/> should render card 1`] = `
               href="#/projects/project-1"
             >
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -300,7 +300,7 @@ exports[`<ProjectCard/> should render card without image 1`] = `
               href="#/projects/project-1"
             >
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -751,7 +751,7 @@ exports[`<ProjectCard/> should render page 1`] = `
                     class="MuiBox-root css-u4p24i"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                     >
                       About
                     </p>
@@ -1237,7 +1237,7 @@ exports[`<ProjectCard/> should render page without finish date 1`] = `
                     class="MuiBox-root css-u4p24i"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                     >
                       About
                     </p>
@@ -1718,7 +1718,7 @@ exports[`<ProjectCard/> should render page without image 1`] = `
                     class="MuiBox-root css-u4p24i"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                     >
                       About
                     </p>
diff --git a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap
index b7d88118cc..44f43ef46d 100644
--- a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap
+++ b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<Sidebar/> should render component 1`] = `
         class="MuiDrawer-root MuiDrawer-docked css-6jemim-MuiDrawer-docked"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1dwg92n-MuiPaper-root-MuiDrawer-paper"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1l360wv-MuiPaper-root-MuiDrawer-paper"
         >
           <div
             class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 dapp-sidebar css-14vh17f-MuiPaper-root"
@@ -60,7 +60,7 @@ exports[`<Sidebar/> should render component 1`] = `
                     id="navbarNav"
                   >
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -94,7 +94,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <div
                         class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAccordion-root Mui-expanded MuiAccordion-gutters Accordion-root undefined css-u06kr9-MuiPaper-root-MuiAccordion-root"
@@ -177,7 +177,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </div>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -209,7 +209,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -241,7 +241,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -273,7 +273,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -310,7 +310,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -372,7 +372,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       />
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover external-site-link  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -422,7 +422,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       />
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover external-site-link  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -467,7 +467,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover external-site-link  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -512,7 +512,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover external-site-link  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -557,7 +557,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover external-site-link  css-1nffzm5-MuiTypography-root-MuiLink-root"
@@ -600,7 +600,7 @@ exports[`<Sidebar/> should render component 1`] = `
                       </a>
                     </div>
                     <div
-                      class="NavItem-root nav-item-container css-1l68yb7"
+                      class="NavItem-root nav-item-container css-20fmbk"
                     >
                       <a
                         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover external-site-link  css-1nffzm5-MuiTypography-root-MuiLink-root"
diff --git a/src/components/StagingNotification.tsx b/src/components/StagingNotification.tsx
index 7d41aba6ec..7894bed645 100644
--- a/src/components/StagingNotification.tsx
+++ b/src/components/StagingNotification.tsx
@@ -1,19 +1,42 @@
-import { Box } from "@mui/material";
+import { Box, useMediaQuery } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { WarningNotification } from "@olympusdao/component-library";
 import { Environment } from "src/helpers/environment/Environment/Environment";
 
+const PREFIX = "StagingNotification";
+
+const classes = {
+  contentShift: `${PREFIX}-contentShift`,
+  notification: `${PREFIX}-notification`,
+};
+
+const StyledNotification = styled("div")(() => ({
+  [`& .${classes.contentShift}`]: {
+    marginLeft: 0,
+  },
+
+  [`& .${classes.notification}`]: {
+    marginLeft: "264px",
+  },
+}));
+
 const StagingNotification = () => {
+  const isSmallScreen = useMediaQuery("(max-width: 600px)");
   return (
-    <>
+    <StyledNotification>
       {Environment.getStagingFlag() === "true" && (
-        <Box style={{ marginTop: "0px" }} data-testid="staging-notification" sx={{ zIndex: 10 }}>
+        <Box
+          style={{ marginTop: "0px" }}
+          className={`${isSmallScreen ? classes.contentShift : classes.notification}`}
+          data-testid="staging-notification"
+        >
           <WarningNotification dismissible={true}>
             You are on the staging site. Any interaction could result in loss of assets.{" "}
             <a href="https://app.olympusdao.finance">Exit Here</a>
           </WarningNotification>
         </Box>
       )}
-    </>
+    </StyledNotification>
   );
 };
 
diff --git a/src/themes/dark.js b/src/themes/dark.js
index a15e8445ac..ddb009ac8d 100644
--- a/src/themes/dark.js
+++ b/src/themes/dark.js
@@ -48,7 +48,7 @@ export const dark = responsiveFontSizes(
             styleOverrides: `
             ${fonts}
             body {
-              background-color:${colors.gray[700]};
+              background-color:${colors.gray[600]};
             }
             `,
           },
@@ -124,11 +124,19 @@ export const dark = responsiveFontSizes(
             styleOverrides: {
               root: {
                 ".MuiPaper-root": {
-                  background: colors.paper.background,
+                  background: colors.gray[700],
                 },
               },
             },
           },
+          MuiDrawer: {
+            styleOverrides: {
+              paper: {
+                backgroundColor: colors.gray[700],
+                zIndex: 7,
+              },
+            },
+          },
           MuiLink: {
             styleOverrides: {
               root: {
diff --git a/src/themes/darkPalette.js b/src/themes/darkPalette.js
index b17aec6272..feb0d77966 100644
--- a/src/themes/darkPalette.js
+++ b/src/themes/darkPalette.js
@@ -22,10 +22,10 @@ export const darkPalette = {
     pnlGain: "#3D9C70",
   },
   gray: {
-    700: "#151721",
-    600: "#20222A",
+    700: "#141722",
+    600: "#2C2E37",
     500: "#3F4552",
-    90: "#676B74",
+    90: "#8A8B90",
     40: "#BBBDC0",
     10: "#EEE9E2",
   },
diff --git a/src/themes/light.js b/src/themes/light.js
index f22eae60eb..90d3779c3b 100644
--- a/src/themes/light.js
+++ b/src/themes/light.js
@@ -98,11 +98,19 @@ export const light = responsiveFontSizes(
             styleOverrides: {
               root: {
                 ".MuiPaper-root": {
-                  background: colors.paper.card,
+                  background: colors.gray[700],
                 },
               },
             },
           },
+          MuiDrawer: {
+            styleOverrides: {
+              paper: {
+                backgroundColor: colors.gray[700],
+                zIndex: 7,
+              },
+            },
+          },
           MuiAlert: {
             styleOverrides: {
               root: {
diff --git a/src/views/Give/CausesDashboard.tsx b/src/views/Give/CausesDashboard.tsx
index eb3e6afb02..68756ed411 100644
--- a/src/views/Give/CausesDashboard.tsx
+++ b/src/views/Give/CausesDashboard.tsx
@@ -110,7 +110,7 @@ export default function CausesDashboard({ giveAssetType, changeAssetType }: Caus
               </Grid>
               <Grid item xs />
               <Grid item xs={12} sm={4} container justifyContent="center">
-                <PrimaryButton fullWidth size="small" onClick={() => handleCustomGiveButtonClick()} disabled={!address}>
+                <PrimaryButton fullWidth onClick={() => handleCustomGiveButtonClick()} disabled={!address}>
                   <Trans>Select Custom Recipient</Trans>
                 </PrimaryButton>
               </Grid>
diff --git a/src/views/Give/Give.tsx b/src/views/Give/Give.tsx
index 86ce00eba8..de452af468 100644
--- a/src/views/Give/Give.tsx
+++ b/src/views/Give/Give.tsx
@@ -45,13 +45,7 @@ function Give({ selectedIndex = 0 }) {
           element={
             <Grid container direction="column" alignItems="center" className="give-container">
               <Grid item xs={12} sm={10} md={10} lg={8}>
-                <Paper
-                  headerText={t`Give`}
-                  // childPaperBackground={true}
-                  fullWidth
-                  className="no-container-padding"
-                  zoom={false}
-                >
+                <Paper headerText={t`Give`} fullWidth className="no-container-padding" zoom={false}>
                   {!isSupportedChain(chain.id) ? (
                     <Typography variant="h6">
                       Note: You are currently using an unsupported network. Please switch to Ethereum to experience the
diff --git a/src/views/Give/RedeemYield.tsx b/src/views/Give/RedeemYield.tsx
index ea7576c2f3..46c09e6879 100644
--- a/src/views/Give/RedeemYield.tsx
+++ b/src/views/Give/RedeemYield.tsx
@@ -240,19 +240,19 @@ export default function RedeemYield() {
             data-testid="data-redeemable-balance"
           />
           <DataRow
-            title={t`Next Reward Amount`}
+            title={t`Your Next Rebase`}
             balance={`${nextRewardValue.toString(DECIMAL_FORMAT)} ${t`sOHM`}`}
             isLoading={isStakingRebaseRateLoading}
             data-testid="data-next-reward-amount"
           />
           <DataRow
-            title={t`Next Reward Yield`}
+            title={t`Next Rebase Yield`}
             balance={`${stakingRebasePercentage.toString(DECIMAL_FORMAT)}%`}
             isLoading={isStakingRebaseRateLoading}
             data-testid="data-next-reward-yield"
           />
           <DataRow
-            title={t`ROI (5-Day Rate)`}
+            title={t`Rebases (5-Day Rate)`}
             balance={`${fiveDayRateValue.toString(DECIMAL_FORMAT)}%`}
             isLoading={isStakingRebaseRateLoading}
             data-testid="data-roi"
diff --git a/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap b/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap
index fee2e38530..eca54ec694 100644
--- a/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap
+++ b/src/views/Give/__tests__/__snapshots__/Give.unit.test.jsx.snap
@@ -443,7 +443,7 @@ exports[`Give View Connected should render project card with Donate Yield Button
                     class="MuiBox-root css-u4p24i"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                     >
                       About
                     </p>
@@ -620,7 +620,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                     href="#/projects/impact-market"
                   >
                     <button
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -745,7 +745,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                     href="#/projects/angel-protocol"
                   >
                     <button
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -870,7 +870,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                     href="#/projects/gitcoin"
                   >
                     <button
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -995,7 +995,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                     href="#/projects/kolektivo"
                   >
                     <button
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -1120,7 +1120,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                     href="#/projects/popcorndao"
                   >
                     <button
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -1168,7 +1168,7 @@ exports[`Give View Disconnected should render Causes Dashboard 1`] = `
                 class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-18ow2ad-MuiGrid-root"
               >
                 <button
-                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-17q2gsh-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-1i9s4yu-MuiButtonBase-root-MuiButton-root"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -1219,7 +1219,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                   class="MuiBox-root css-u4p24i"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                   >
                     Give
                   </p>
@@ -1502,7 +1502,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                                   href="#/projects/impact-market"
                                 >
                                   <button
-                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                                     tabindex="0"
                                     type="button"
                                   >
@@ -1627,7 +1627,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                                   href="#/projects/angel-protocol"
                                 >
                                   <button
-                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                                     tabindex="0"
                                     type="button"
                                   >
@@ -1752,7 +1752,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                                   href="#/projects/gitcoin"
                                 >
                                   <button
-                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                                     tabindex="0"
                                     type="button"
                                   >
@@ -1877,7 +1877,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                                   href="#/projects/kolektivo"
                                 >
                                   <button
-                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                                     tabindex="0"
                                     type="button"
                                   >
@@ -2002,7 +2002,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                                   href="#/projects/popcorndao"
                                 >
                                   <button
-                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                                     tabindex="0"
                                     type="button"
                                   >
@@ -2050,7 +2050,7 @@ exports[`Give View Disconnected should render Causes Dashboard as Default 1`] =
                               class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-18ow2ad-MuiGrid-root"
                             >
                               <button
-                                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-17q2gsh-MuiButtonBase-root-MuiButton-root"
+                                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root Mui-disabled custom-root  css-1i9s4yu-MuiButtonBase-root-MuiButton-root"
                                 disabled=""
                                 tabindex="-1"
                                 type="button"
@@ -2306,7 +2306,7 @@ sOHM deposit until you withdraw your sOHM principal from the vault.
                   class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-3 css-7uaub7-MuiGrid-root"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://docs.olympusdao.finance/main/basics/basics/olympusgive"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2417,7 +2417,7 @@ exports[`Give View Disconnected should render Yield Recipients Screen with Donat
             href="#/give"
           >
             <button
-              class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-60u5o6-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-mwop3n-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
@@ -2870,7 +2870,7 @@ exports[`Give View Disconnected should render project card with connect wallet b
                     class="MuiBox-root css-u4p24i"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                     >
                       About
                     </p>
diff --git a/src/views/Give/__tests__/__snapshots__/RedeemYield.unit.test.jsx.snap b/src/views/Give/__tests__/__snapshots__/RedeemYield.unit.test.jsx.snap
index 5078cf8a5b..a94f3e0fc3 100644
--- a/src/views/Give/__tests__/__snapshots__/RedeemYield.unit.test.jsx.snap
+++ b/src/views/Give/__tests__/__snapshots__/RedeemYield.unit.test.jsx.snap
@@ -105,7 +105,7 @@ exports[`Redeem Yield should render Redeem Yield Screen 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                Next Reward Amount
+                Your Next Rebase
               </p>
             </div>
             <p
@@ -124,7 +124,7 @@ exports[`Redeem Yield should render Redeem Yield Screen 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                Next Reward Yield
+                Next Rebase Yield
               </p>
             </div>
             <p
@@ -143,7 +143,7 @@ exports[`Redeem Yield should render Redeem Yield Screen 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                ROI (5-Day Rate)
+                Rebases (5-Day Rate)
               </p>
             </div>
             <p
@@ -333,7 +333,7 @@ exports[`Redeem Yield should show extra content if project wallet 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                Next Reward Amount
+                Your Next Rebase
               </p>
             </div>
             <p
@@ -352,7 +352,7 @@ exports[`Redeem Yield should show extra content if project wallet 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                Next Reward Yield
+                Next Rebase Yield
               </p>
             </div>
             <p
@@ -371,7 +371,7 @@ exports[`Redeem Yield should show extra content if project wallet 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                ROI (5-Day Rate)
+                Rebases (5-Day Rate)
               </p>
             </div>
             <p
@@ -496,7 +496,7 @@ exports[`Redeem Yield should show redeemable balance as 100 sOHM 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                Next Reward Amount
+                Your Next Rebase
               </p>
             </div>
             <p
@@ -515,7 +515,7 @@ exports[`Redeem Yield should show redeemable balance as 100 sOHM 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                Next Reward Yield
+                Next Rebase Yield
               </p>
             </div>
             <p
@@ -534,7 +534,7 @@ exports[`Redeem Yield should show redeemable balance as 100 sOHM 1`] = `
               <p
                 class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
               >
-                ROI (5-Day Rate)
+                Rebases (5-Day Rate)
               </p>
             </div>
             <p
diff --git a/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap b/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
index 8da8337f1b..0dd5db7779 100644
--- a/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
+++ b/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<Stake/> should render component 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake
                 </p>
@@ -97,11 +97,11 @@ exports[`<Stake/> should render component 1`] = `
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY
+                              Annualized Rebases
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -131,7 +131,7 @@ exports[`<Stake/> should render component 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -182,7 +182,7 @@ exports[`<Stake/> should render component 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -241,7 +241,7 @@ exports[`<Stake/> should render component 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Farm Pool
                 </p>
@@ -745,7 +745,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -934,7 +934,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1097,7 +1097,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://traderjoexyz.com/farm/0xB674f93952F02F2538214D4572Aa47F262e990Ff-0x188bED1968b795d5c9022F6a0bb5931Ac4c18F00"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1324,7 +1324,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.spiritswap.finance/#/farms/allfarms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1551,7 +1551,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://beets.fi/#/pool/0xf7bf0f161d3240488807ffa23894452246049916000200000000000000000198"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1750,7 +1750,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://zipswap.fi/#/farm/0x3f6da9334142477718bE2ecC3577d1A28dceAAe1"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2321,7 +2321,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://jonesdao.io/farms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2531,7 +2531,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.balancer.fi/#/pool/0xc45d42f801105e861e86658648e3678ad7aa70f900010000000000000000011e"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2723,7 +2723,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://curve.fi/factory-crypto/21/deposit"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2915,7 +2915,7 @@ exports[`<Stake/> should render component 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://www.convexfinance.com/stake"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2978,7 +2978,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake
                 </p>
@@ -3047,11 +3047,11 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY
+                              Annualized Rebases
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -3081,7 +3081,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -3132,7 +3132,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -3191,7 +3191,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Farm Pool
                 </p>
@@ -3695,7 +3695,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -3884,7 +3884,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4047,7 +4047,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://traderjoexyz.com/farm/0xB674f93952F02F2538214D4572Aa47F262e990Ff-0x188bED1968b795d5c9022F6a0bb5931Ac4c18F00"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4274,7 +4274,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.spiritswap.finance/#/farms/allfarms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4501,7 +4501,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://beets.fi/#/pool/0xf7bf0f161d3240488807ffa23894452246049916000200000000000000000198"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4700,7 +4700,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://zipswap.fi/#/farm/0x3f6da9334142477718bE2ecC3577d1A28dceAAe1"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5271,7 +5271,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://jonesdao.io/farms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5481,7 +5481,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.balancer.fi/#/pool/0xc45d42f801105e861e86658648e3678ad7aa70f900010000000000000000011e"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5673,7 +5673,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://curve.fi/factory-crypto/21/deposit"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5865,7 +5865,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://www.convexfinance.com/stake"
                     rel="noopener noreferrer"
                     tabindex="0"
diff --git a/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap b/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap
index b8c24814e1..721b360e6d 100644
--- a/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap
+++ b/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap
@@ -28,7 +28,7 @@ exports[`Mobile Resolution should render all supported multi chain staking contr
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake
                 </p>
@@ -97,11 +97,11 @@ exports[`Mobile Resolution should render all supported multi chain staking contr
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY
+                              Annualized Rebases
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -131,7 +131,7 @@ exports[`Mobile Resolution should render all supported multi chain staking contr
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -182,7 +182,7 @@ exports[`Mobile Resolution should render all supported multi chain staking contr
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
diff --git a/src/views/Stake/components/StakeArea/components/StakeFiveDayYield.tsx b/src/views/Stake/components/StakeArea/components/StakeFiveDayYield.tsx
index fdcd142cfc..006e6a361b 100644
--- a/src/views/Stake/components/StakeArea/components/StakeFiveDayYield.tsx
+++ b/src/views/Stake/components/StakeArea/components/StakeFiveDayYield.tsx
@@ -6,7 +6,7 @@ import { useStakingRebaseRate } from "src/hooks/useStakingRebaseRate";
 export const StakeFiveDayYield = () => {
   const { data: rebaseRate } = useStakingRebaseRate();
 
-  const props: PropsOf<typeof DataRow> = { title: t`ROI (5-Day Rate)` };
+  const props: PropsOf<typeof DataRow> = { title: t`Rebases (5-Day Rate)` };
 
   if (rebaseRate) {
     const fiveDayRate = (Math.pow(1 + rebaseRate, 5 * 3) - 1) * 100;
diff --git a/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx b/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx
index 87c1acc518..b19e076a3d 100644
--- a/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx
+++ b/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx
@@ -82,13 +82,6 @@ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => {
 
   return (
     <StyledBox mb={3}>
-      {currentAction === "UNSTAKE" && liveInverseBonds && (
-        <InfoNotification>
-          {t`Unstaking your OHM? Trade for Treasury Stables with no slippage & zero trading fees via`}
-          &nbsp;
-          <Link href={`#/bonds`}>{t`Inverse Bonds`}</Link>
-        </InfoNotification>
-      )}
       <Tabs
         centered
         textColor="primary"
@@ -105,7 +98,13 @@ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => {
 
         <Tab aria-label="unstake-button" label={t`Unstake`} />
       </Tabs>
-
+      {currentAction === "UNSTAKE" && liveInverseBonds && (
+        <InfoNotification>
+          {t`Unstaking your OHM? Trade for Treasury Stables with no slippage & zero trading fees via`}
+          &nbsp;
+          <Link href={`#/bonds`}>{t`Inverse Bonds`}</Link>
+        </InfoNotification>
+      )}
       <Box my={2}>
         <TokenAllowanceGuard
           tokenAddressMap={addresses}
diff --git a/src/views/Stake/components/StakeArea/components/StakeNextRebaseAmount.tsx b/src/views/Stake/components/StakeArea/components/StakeNextRebaseAmount.tsx
index e13cc33c0b..1400de0ac9 100644
--- a/src/views/Stake/components/StakeArea/components/StakeNextRebaseAmount.tsx
+++ b/src/views/Stake/components/StakeArea/components/StakeNextRebaseAmount.tsx
@@ -51,7 +51,7 @@ export const StakeNextRebaseAmount = () => {
     .filter(nonNullable)
     .reduce((res, bal) => res.add(bal), new DecimalBigNumber("0", 18));
 
-  const props: PropsOf<typeof DataRow> = { title: t`Next Reward Amount` };
+  const props: PropsOf<typeof DataRow> = { title: t`Your Next Rebase` };
 
   if (rebaseRate && sohmBalances && totalGohmBalance && currentIndex) {
     const nextRewardAmount = rebaseRate * totalGohmBalance.mul(currentIndex).add(totalSohmBalance).toApproxNumber();
diff --git a/src/views/Stake/components/StakeArea/components/StakeRebaseYield.tsx b/src/views/Stake/components/StakeArea/components/StakeRebaseYield.tsx
index 6f6984f62c..9fea68f424 100644
--- a/src/views/Stake/components/StakeArea/components/StakeRebaseYield.tsx
+++ b/src/views/Stake/components/StakeArea/components/StakeRebaseYield.tsx
@@ -6,7 +6,7 @@ import { useStakingRebaseRate } from "src/hooks/useStakingRebaseRate";
 export const StakeRebaseYield = () => {
   const { data: rebaseRate } = useStakingRebaseRate();
 
-  const props: PropsOf<typeof DataRow> = { title: t`Next Reward Yield` };
+  const props: PropsOf<typeof DataRow> = { title: t`Next Rebase Yield` };
 
   if (rebaseRate) props.balance = `${formatNumber(rebaseRate * 100, 4)}%`;
   else props.isLoading = true;
diff --git a/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryDashboard.unit.test.tsx.snap b/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryDashboard.unit.test.tsx.snap
index 5e59ce5f24..a66727a697 100644
--- a/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryDashboard.unit.test.tsx.snap
+++ b/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryDashboard.unit.test.tsx.snap
@@ -150,7 +150,7 @@ exports[`<TreasuryDashboard/> should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -180,7 +180,7 @@ exports[`<TreasuryDashboard/> should render component 1`] = `
                               </p>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -231,7 +231,7 @@ exports[`<TreasuryDashboard/> should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -282,7 +282,7 @@ exports[`<TreasuryDashboard/> should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -333,7 +333,7 @@ exports[`<TreasuryDashboard/> should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -384,7 +384,7 @@ exports[`<TreasuryDashboard/> should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
diff --git a/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryMobile.unit.test.tsx.snap b/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryMobile.unit.test.tsx.snap
index d8f9301ad9..736a236e78 100644
--- a/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryMobile.unit.test.tsx.snap
+++ b/src/views/TreasuryDashboard/__tests__/__snapshots__/TreasuryMobile.unit.test.tsx.snap
@@ -154,7 +154,7 @@ exports[`<TreasuryDashboard/> Mobile should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -184,7 +184,7 @@ exports[`<TreasuryDashboard/> Mobile should render component 1`] = `
                               </p>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -235,7 +235,7 @@ exports[`<TreasuryDashboard/> Mobile should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -286,7 +286,7 @@ exports[`<TreasuryDashboard/> Mobile should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -337,7 +337,7 @@ exports[`<TreasuryDashboard/> Mobile should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
@@ -388,7 +388,7 @@ exports[`<TreasuryDashboard/> Mobile should render component 1`] = `
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                               style="width: 100%;"
                             >
                               <span
diff --git a/src/views/TreasuryDashboard/components/Metric/Metric.tsx b/src/views/TreasuryDashboard/components/Metric/Metric.tsx
index 61339a9a9c..a993f36840 100644
--- a/src/views/TreasuryDashboard/components/Metric/Metric.tsx
+++ b/src/views/TreasuryDashboard/components/Metric/Metric.tsx
@@ -186,7 +186,7 @@ export const StakingAPY: React.FC<AbstractedMetricProps> = props => {
 
   const _props: MetricProps = {
     ...props,
-    label: t`APY`,
+    label: t`Annualized Rebases`,
   };
 
   if (rebaseRate) {
diff --git a/src/views/TreasuryDashboard/treasuryData.ts b/src/views/TreasuryDashboard/treasuryData.ts
index d1f6583974..178a7d2a55 100644
--- a/src/views/TreasuryDashboard/treasuryData.ts
+++ b/src/views/TreasuryDashboard/treasuryData.ts
@@ -189,8 +189,8 @@ export const tooltipItems = {
   coin: ["DAI", "FRAX", "ETH", "LUSD", "BTC", "UST", "Other"],
   rfv: ["DAI", "FRAX", "LUSD", "UST"],
   holder: ["OHMies"],
-  apy: ["APY"],
-  runway: [t`Current`, "7.5K APY", "5K APY", "2.5K APY"],
+  apy: ["Rebase Rate (RR)"], // NOTE(appleseed): these aren't currently used
+  runway: [t`Current`, "7.5K RR", "5K RR", "2.5K RR"], // NOTE(appleseed): these aren't currently used
   pol: [t`SLP Treasury`, t`Market SLP`],
 };
 
@@ -205,8 +205,8 @@ export const tooltipInfoMessages = () => {
     pol: t`Protocol Owned Liquidity, is the amount of LP the treasury owns and controls. The more POL the better for the protocol and its users.`,
     holder: t`Holders, represents the total number of Ohmies (sOHM holders)`,
     staked: t`OHM Staked is the ratio of sOHM to circulating supply of OHM (staked vs total)`,
-    apy: t`Annual Percentage Yield, is the normalized representation of an interest rate, based on a compounding period over one year. Note that APYs provided are rather ballpark level indicators and not so much precise future results.`,
-    runway: t`Runway, is the number of days sOHM emissions can be sustained at a given rate. Lower APY = longer runway`,
+    apy: t`Annual Percentage Yield, is the normalized representation of an interest rate, based on a compounding period over one year. Note that Rebase Rates provided are rather ballpark level indicators and not so much precise future results.`,
+    runway: t`Runway, is the number of days sOHM emissions can be sustained at a given rate. Lower Annualized Rebases  = longer runway`,
   };
 };
 
diff --git a/src/views/V1-Stake/V1-Stake.jsx b/src/views/V1-Stake/V1-Stake.jsx
index 827bfb817d..51ddd29b76 100644
--- a/src/views/V1-Stake/V1-Stake.jsx
+++ b/src/views/V1-Stake/V1-Stake.jsx
@@ -191,7 +191,7 @@ function V1Stake({ setMigrationModalOpen }) {
             <MetricCollection>
               <Metric
                 className="stake-apy"
-                label={`${t`APY`} (v1)`}
+                label={`${t`Annualized Rebases`} (v1)`}
                 metric={`${formattedTrimmedStakingAPY}%`}
                 isLoading={stakingAPY ? false : true}
               />
@@ -395,14 +395,14 @@ function V1Stake({ setMigrationModalOpen }) {
                     </AccordionDetails>
                   </Accordion>
                   <Divider />
-                  <DataRow title={t`Next Reward Amount`} balance={`${nextRewardValue} sOHM`} isLoading={isAppLoading} />
+                  <DataRow title={t`Your Next Rebase`} balance={`${nextRewardValue} sOHM`} isLoading={isAppLoading} />
                   <DataRow
-                    title={t`Next Reward Yield`}
+                    title={t`Next Rebase Yield`}
                     balance={`${stakingRebasePercentage}%`}
                     isLoading={isAppLoading}
                   />
                   <DataRow
-                    title={t`ROI (5-Day Rate)`}
+                    title={t`Rebases (5-Day Rate)`}
                     balance={`${trim(Number(fiveDayRate) * 100, 4)}%`}
                     isLoading={isAppLoading}
                   />
diff --git a/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap b/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
index b4a5e2498c..d0fe2763eb 100644
--- a/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
+++ b/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake (3, 3)
                 </p>
@@ -84,11 +84,11 @@ exports[`<Stake/> should render component. not connected 1`] = `
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY (v1)
+                              Annualized Rebases (v1)
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -118,7 +118,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -148,7 +148,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -212,7 +212,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Farm Pool
                 </p>
@@ -716,7 +716,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -905,7 +905,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1068,7 +1068,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://traderjoexyz.com/farm/0xB674f93952F02F2538214D4572Aa47F262e990Ff-0x188bED1968b795d5c9022F6a0bb5931Ac4c18F00"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1295,7 +1295,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.spiritswap.finance/#/farms/allfarms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1522,7 +1522,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://beets.fi/#/pool/0xf7bf0f161d3240488807ffa23894452246049916000200000000000000000198"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -1721,7 +1721,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://zipswap.fi/#/farm/0x3f6da9334142477718bE2ecC3577d1A28dceAAe1"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2292,7 +2292,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://jonesdao.io/farms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2502,7 +2502,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.balancer.fi/#/pool/0xc45d42f801105e861e86658648e3678ad7aa70f900010000000000000000011e"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2694,7 +2694,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://curve.fi/factory-crypto/21/deposit"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2886,7 +2886,7 @@ exports[`<Stake/> should render component. not connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://www.convexfinance.com/stake"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -2949,7 +2949,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake (3, 3)
                 </p>
@@ -3005,11 +3005,11 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY (v1)
+                              Annualized Rebases (v1)
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -3039,7 +3039,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -3069,7 +3069,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -3145,7 +3145,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                     class="stake-action-row v1-row  MuiBox-root css-70qvj9"
                   >
                     <a
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-60u5o6-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-mwop3n-MuiButtonBase-root-MuiButton-root"
                       href="https://docs.olympusdao.finance/main/basics/migration"
                       style="margin-right: 10.5px;"
                       tabindex="0"
@@ -3361,7 +3361,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        Next Reward Amount
+                        Your Next Rebase
                       </p>
                     </div>
                     <p
@@ -3380,7 +3380,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        Next Reward Yield
+                        Next Rebase Yield
                       </p>
                     </div>
                     <p
@@ -3399,7 +3399,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        ROI (5-Day Rate)
+                        Rebases (5-Day Rate)
                       </p>
                     </div>
                     <p
@@ -3432,7 +3432,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Farm Pool
                 </p>
@@ -3957,7 +3957,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4160,7 +4160,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4337,7 +4337,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://traderjoexyz.com/farm/0xB674f93952F02F2538214D4572Aa47F262e990Ff-0x188bED1968b795d5c9022F6a0bb5931Ac4c18F00"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4578,7 +4578,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.spiritswap.finance/#/farms/allfarms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -4819,7 +4819,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://beets.fi/#/pool/0xf7bf0f161d3240488807ffa23894452246049916000200000000000000000198"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5032,7 +5032,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://zipswap.fi/#/farm/0x3f6da9334142477718bE2ecC3577d1A28dceAAe1"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5617,7 +5617,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://jonesdao.io/farms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -5841,7 +5841,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.balancer.fi/#/pool/0xc45d42f801105e861e86658648e3678ad7aa70f900010000000000000000011e"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -6047,7 +6047,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://curve.fi/factory-crypto/21/deposit"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -6253,7 +6253,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://www.convexfinance.com/stake"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -6316,7 +6316,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake (3, 3)
                 </p>
@@ -6372,11 +6372,11 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY (v1)
+                              Annualized Rebases (v1)
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -6406,7 +6406,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -6436,7 +6436,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -6512,7 +6512,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                     class="stake-action-row v1-row  MuiBox-root css-70qvj9"
                   >
                     <a
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-60u5o6-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-mwop3n-MuiButtonBase-root-MuiButton-root"
                       href="https://docs.olympusdao.finance/main/basics/migration"
                       style="margin-right: 10.5px;"
                       tabindex="0"
@@ -6728,7 +6728,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        Next Reward Amount
+                        Your Next Rebase
                       </p>
                     </div>
                     <p
@@ -6747,7 +6747,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        Next Reward Yield
+                        Next Rebase Yield
                       </p>
                     </div>
                     <p
@@ -6766,7 +6766,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        ROI (5-Day Rate)
+                        Rebases (5-Day Rate)
                       </p>
                     </div>
                     <p
@@ -6799,7 +6799,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Farm Pool
                 </p>
@@ -7324,7 +7324,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -7527,7 +7527,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -7704,7 +7704,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://traderjoexyz.com/farm/0xB674f93952F02F2538214D4572Aa47F262e990Ff-0x188bED1968b795d5c9022F6a0bb5931Ac4c18F00"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -7945,7 +7945,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.spiritswap.finance/#/farms/allfarms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -8186,7 +8186,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://beets.fi/#/pool/0xf7bf0f161d3240488807ffa23894452246049916000200000000000000000198"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -8399,7 +8399,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://zipswap.fi/#/farm/0x3f6da9334142477718bE2ecC3577d1A28dceAAe1"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -8984,7 +8984,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://jonesdao.io/farms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -9208,7 +9208,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.balancer.fi/#/pool/0xc45d42f801105e861e86658648e3678ad7aa70f900010000000000000000011e"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -9414,7 +9414,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://curve.fi/factory-crypto/21/deposit"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -9620,7 +9620,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://www.convexfinance.com/stake"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -9683,7 +9683,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Single Stake (3, 3)
                 </p>
@@ -9739,11 +9739,11 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                             <p
                               class="MuiTypography-root MuiTypography-body1 Metric-label css-1lub2vt-MuiTypography-root"
                             >
-                              APY (v1)
+                              Annualized Rebases (v1)
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -9773,7 +9773,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -9803,7 +9803,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -9879,7 +9879,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                     class="stake-action-row v1-row  MuiBox-root css-70qvj9"
                   >
                     <a
-                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-60u5o6-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButtonBase-root custom-root  css-mwop3n-MuiButtonBase-root-MuiButton-root"
                       href="https://docs.olympusdao.finance/main/basics/migration"
                       style="margin-right: 10.5px;"
                       tabindex="0"
@@ -10095,7 +10095,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        Next Reward Amount
+                        Your Next Rebase
                       </p>
                     </div>
                     <p
@@ -10114,7 +10114,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        Next Reward Yield
+                        Next Rebase Yield
                       </p>
                     </div>
                     <p
@@ -10133,7 +10133,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1 css-fjb5bl-MuiTypography-root"
                       >
-                        ROI (5-Day Rate)
+                        Rebases (5-Day Rate)
                       </p>
                     </div>
                     <p
@@ -10166,7 +10166,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Farm Pool
                 </p>
@@ -10691,7 +10691,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -10894,7 +10894,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.sushi.com/farm?filter=2x"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -11071,7 +11071,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://traderjoexyz.com/farm/0xB674f93952F02F2538214D4572Aa47F262e990Ff-0x188bED1968b795d5c9022F6a0bb5931Ac4c18F00"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -11312,7 +11312,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.spiritswap.finance/#/farms/allfarms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -11553,7 +11553,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://beets.fi/#/pool/0xf7bf0f161d3240488807ffa23894452246049916000200000000000000000198"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -11766,7 +11766,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://zipswap.fi/#/farm/0x3f6da9334142477718bE2ecC3577d1A28dceAAe1"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -12351,7 +12351,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://jonesdao.io/farms"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -12575,7 +12575,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://app.balancer.fi/#/pool/0xc45d42f801105e861e86658648e3678ad7aa70f900010000000000000000011e"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -12781,7 +12781,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://curve.fi/factory-crypto/21/deposit"
                     rel="noopener noreferrer"
                     tabindex="0"
@@ -12987,7 +12987,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                   style="padding: 8px 0px;"
                 >
                   <a
-                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-ouiggg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-disableElevation MuiButton-fullWidth MuiButtonBase-root custom-root  css-1j77ta-MuiButtonBase-root-MuiButton-root"
                     href="https://www.convexfinance.com/stake"
                     rel="noopener noreferrer"
                     tabindex="0"
diff --git a/src/views/Wrap/__tests__/__snapshots__/MigrateInputArea.unit.test.jsx.snap b/src/views/Wrap/__tests__/__snapshots__/MigrateInputArea.unit.test.jsx.snap
index 2d123d4f73..5833242de7 100644
--- a/src/views/Wrap/__tests__/__snapshots__/MigrateInputArea.unit.test.jsx.snap
+++ b/src/views/Wrap/__tests__/__snapshots__/MigrateInputArea.unit.test.jsx.snap
@@ -31,7 +31,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -106,7 +106,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -157,7 +157,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -208,7 +208,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
diff --git a/src/views/Wrap/__tests__/__snapshots__/Wrap.unit.test.tsx.snap b/src/views/Wrap/__tests__/__snapshots__/Wrap.unit.test.tsx.snap
index 4b68a1a454..59235366d3 100644
--- a/src/views/Wrap/__tests__/__snapshots__/Wrap.unit.test.tsx.snap
+++ b/src/views/Wrap/__tests__/__snapshots__/Wrap.unit.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<Wrap/> Should Render Wrap Input Area with Wallet Connected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -103,7 +103,7 @@ exports[`<Wrap/> Should Render Wrap Input Area with Wallet Connected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -154,7 +154,7 @@ exports[`<Wrap/> Should Render Wrap Input Area with Wallet Connected 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -205,7 +205,7 @@ exports[`<Wrap/> Should Render Wrap Input Area with Wallet Connected 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -387,7 +387,7 @@ exports[`<Wrap/> Should Render Wrap Input Area with Wallet Connected 1`] = `
                 Got wsOHM on Avalanche or Arbitrum? Click below to switch networks and migrate to gOHM (no bridge required!)
               </p>
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1yyqz5n-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1r151zb-MuiButtonBase-root-MuiButton-root"
                 style="margin: 0.3rem;"
                 tabindex="0"
                 type="button"
@@ -411,7 +411,7 @@ exports[`<Wrap/> Should Render Wrap Input Area with Wallet Connected 1`] = `
                 Avalanche
               </button>
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1yyqz5n-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1r151zb-MuiButtonBase-root-MuiButton-root"
                 style="margin: 0.3rem;"
                 tabindex="0"
                 type="button"
@@ -763,7 +763,7 @@ exports[`<Wrap/> Should show Connect Button when not Connected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -838,7 +838,7 @@ exports[`<Wrap/> Should show Connect Button when not Connected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -889,7 +889,7 @@ exports[`<Wrap/> Should show Connect Button when not Connected 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -940,7 +940,7 @@ exports[`<Wrap/> Should show Connect Button when not Connected 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1015,7 +1015,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Arbitrum 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -1090,7 +1090,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Arbitrum 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1141,7 +1141,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Arbitrum 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1192,7 +1192,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Arbitrum 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1466,7 +1466,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Avalanche 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -1541,7 +1541,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Avalanche 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1592,7 +1592,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Avalanche 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1643,7 +1643,7 @@ exports[`<Wrap/> should Render Migrate Input Area on Avalanche 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
diff --git a/src/views/Wrap/__tests__/__snapshots__/WrapInputArea.unit.test.jsx.snap b/src/views/Wrap/__tests__/__snapshots__/WrapInputArea.unit.test.jsx.snap
index bd94902768..7f5ac98987 100644
--- a/src/views/Wrap/__tests__/__snapshots__/WrapInputArea.unit.test.jsx.snap
+++ b/src/views/Wrap/__tests__/__snapshots__/WrapInputArea.unit.test.jsx.snap
@@ -31,7 +31,7 @@ exports[`Wrap Input Area Display Unwrap to sOHM when gOHM is selected 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -106,7 +106,7 @@ exports[`Wrap Input Area Display Unwrap to sOHM when gOHM is selected 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -157,7 +157,7 @@ exports[`Wrap Input Area Display Unwrap to sOHM when gOHM is selected 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -208,7 +208,7 @@ exports[`Wrap Input Area Display Unwrap to sOHM when gOHM is selected 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -454,7 +454,7 @@ exports[`Wrap Input Area Display Unwrap to sOHM when gOHM is selected 1`] = `
                 Got wsOHM on Avalanche or Arbitrum? Click below to switch networks and migrate to gOHM (no bridge required!)
               </p>
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1yyqz5n-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1r151zb-MuiButtonBase-root-MuiButton-root"
                 style="margin: 0.3rem;"
                 tabindex="0"
                 type="button"
@@ -478,7 +478,7 @@ exports[`Wrap Input Area Display Unwrap to sOHM when gOHM is selected 1`] = `
                 Avalanche
               </button>
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1yyqz5n-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1r151zb-MuiButtonBase-root-MuiButton-root"
                 style="margin: 0.3rem;"
                 tabindex="0"
                 type="button"
@@ -833,7 +833,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                 class="MuiBox-root css-u4p24i"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 header-text css-1v1in9t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 header-text css-1r0s3mh-MuiTypography-root"
                 >
                   Wrap / Unwrap
                 </p>
@@ -908,7 +908,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                             </p>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -959,7 +959,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1010,7 +1010,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                             </div>
                           </div>
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-152iexv-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-1q5p5g-MuiTypography-root"
                             style="width: 100%;"
                           >
                             <span
@@ -1256,7 +1256,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                 Got wsOHM on Avalanche or Arbitrum? Click below to switch networks and migrate to gOHM (no bridge required!)
               </p>
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1yyqz5n-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1r151zb-MuiButtonBase-root-MuiButton-root"
                 style="margin: 0.3rem;"
                 tabindex="0"
                 type="button"
@@ -1280,7 +1280,7 @@ exports[`Wrap Input Area Should Render Input when has Token Approval 1`] = `
                 Avalanche
               </button>
               <button
-                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1yyqz5n-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-disableElevation MuiButtonBase-root custom-root  css-1r151zb-MuiButtonBase-root-MuiButton-root"
                 style="margin: 0.3rem;"
                 tabindex="0"
                 type="button"
diff --git a/src/views/Zap/Zap.scss b/src/views/Zap/Zap.scss
index 35067c4085..99f456ce9a 100644
--- a/src/views/Zap/Zap.scss
+++ b/src/views/Zap/Zap.scss
@@ -128,7 +128,7 @@
 
 .zap-input {
   width: 100%;
-  margin-block: 12px;
+  margin-bottom: 12px;
   min-height: 70px;
 }
 
diff --git a/src/views/Zap/ZapStakeAction.tsx b/src/views/Zap/ZapStakeAction.tsx
index c34efb4aee..6d53973e04 100644
--- a/src/views/Zap/ZapStakeAction.tsx
+++ b/src/views/Zap/ZapStakeAction.tsx
@@ -281,7 +281,7 @@ const ZapStakeAction: React.FC = () => {
   return (
     <Root>
       <ZapStakeHeader images={inputTokenImages} />
-      <Typography>
+      <Typography fontSize="15px" lineHeight="24px" mb="3px">
         <Trans>You Pay</Trans>
       </Typography>
       <FormControl className="zap-input" variant="outlined" color="primary">
@@ -313,10 +313,10 @@ const ZapStakeAction: React.FC = () => {
                       <ButtonBase onClick={handleOpen}>
                         <Avatar
                           src={selectedTokenBalance ? selectedTokenBalance.tokenImageUrl : ""}
-                          style={{ height: "30px", width: "30px" }}
+                          style={{ height: "17.5px", width: "17.5px" }}
                         />
                         <Box width="10px" />
-                        <Typography>{selectedTokenBalance && selectedTokenBalance.symbol}</Typography>
+                        <Typography fontSize="15px">{selectedTokenBalance && selectedTokenBalance.symbol}</Typography>
                         {downIcon}
                       </ButtonBase>
                     </Box>
@@ -347,7 +347,7 @@ const ZapStakeAction: React.FC = () => {
           <Box className="zap-input" data-testid="zap-input">
             <Button variant="contained" className="zap-input" onClick={handleOpen} color="primary">
               <Box flexDirection="row" display="flex" alignItems="center" justifyContent="end" flexGrow={1}>
-                <Typography>
+                <Typography fontSize="15px" fontWeight="500">
                   <Trans>Select Token</Trans>
                 </Typography>
                 {downIcon}
@@ -359,7 +359,7 @@ const ZapStakeAction: React.FC = () => {
       <Box minHeight="24px" display="flex" justifyContent="center" alignItems="center" width="100%">
         {downIcon}
       </Box>
-      <Typography>
+      <Typography fontSize="15px" marginBottom="3px" lineHeight="24px">
         <Trans>You Get</Trans>
       </Typography>
       <FormControl className="zap-input" variant="outlined" color="primary">
@@ -375,7 +375,7 @@ const ZapStakeAction: React.FC = () => {
               data-testid="zap-output"
             >
               <Box flexDirection="row" display="flex" alignItems="center" justifyContent="end" flexGrow={1}>
-                <Typography>
+                <Typography fontWeight="500" fontSize="15px">
                   <Trans>Select Token</Trans>
                 </Typography>
                 {downIcon}
@@ -405,9 +405,9 @@ const ZapStakeAction: React.FC = () => {
                   <Box flexDirection="column" display="flex">
                     <Box flexDirection="row" display="flex" alignItems="center" justifyContent="flex-end">
                       <ButtonBase onClick={handleOutputOpen}>
-                        <Token name={outputGOHM ? "wsOHM" : "sOHM"} />
+                        <Token name={outputGOHM ? "wsOHM" : "sOHM"} style={{ fontSize: "22px" }} />
                         <Box width="10px" />
-                        <Typography>{outputGOHM ? "gOHM" : "sOHM"}</Typography>
+                        <Typography fontSize="15px">{outputGOHM ? "gOHM" : "sOHM"}</Typography>
                         {downIcon}
                       </ButtonBase>
                     </Box>
diff --git a/yarn.lock b/yarn.lock
index 549be1f4ac..404381f6e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -43,6 +43,13 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.10", "@babel/compat-data@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.6.tgz#8b37d24e88e8e21c499d4328db80577d8882fa53"
@@ -87,6 +94,15 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.18.6":
+  version "7.18.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.7.tgz#2aa78da3c05aadfc82dbac16c99552fc802284bd"
+  integrity sha512-shck+7VLlY72a2w9c3zYWuE1pwOKEiQHV7GTUbSnhyl5eu3i04t30tBY82ZRWrDfo3gkakCFtevExnxbkf2a3A==
+  dependencies:
+    "@babel/types" "^7.18.7"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -112,44 +128,18 @@
     browserslist "^4.20.2"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.0":
-  version "7.17.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz#9699f14a88833a7e055ce57dcd3ffdcd25186b21"
-  integrity sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-member-expression-to-functions" "^7.16.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-
-"@babel/helper-create-class-features-plugin@^7.17.12":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz#fac430912606331cb075ea8d82f9a4c145a4da19"
-  integrity sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-member-expression-to-functions" "^7.17.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-
-"@babel/helper-create-class-features-plugin@^7.17.6":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
-  integrity sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==
+"@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.0", "@babel/helper-create-class-features-plugin@^7.17.6", "@babel/helper-create-class-features-plugin@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.6.tgz#6f15f8459f3b523b39e00a99982e2c040871ed72"
+  integrity sha512-YfDzdnoxHGV8CzqHGyCbFvXg5QESPFkXlHtvdCkesLjjVMT2Adxe4FGUR5ChIb3DxSaXO12iIOCWoXdsUVwnqw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-member-expression-to-functions" "^7.17.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-function-name" "^7.18.6"
+    "@babel/helper-member-expression-to-functions" "^7.18.6"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
 
 "@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.0":
   version "7.17.0"
@@ -185,6 +175,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd"
   integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==
 
+"@babel/helper-environment-visitor@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.6.tgz#b7eee2b5b9d70602e59d1a6cad7dd24de7ca6cd7"
+  integrity sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@@ -209,6 +204,14 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-function-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.6.tgz#8334fecb0afba66e6d87a7e8c6bb7fed79926b83"
+  integrity sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-get-function-arity@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
@@ -223,6 +226,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-member-expression-to-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.7.tgz#42b9ca4b2b200123c3b7e726b0ae5153924905b0"
@@ -230,12 +240,12 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-member-expression-to-functions@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
-  integrity sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==
+"@babel/helper-member-expression-to-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.6.tgz#44802d7d602c285e1692db0bad9396d007be2afc"
+  integrity sha512-CeHxqwwipekotzPDUuJOfIMtcIHBuc7WAzLmTYWctVigqS5RktNMQ5bEwQSuGewzYnCtTWa3BARXeiLxDTv+Ng==
   dependencies:
-    "@babel/types" "^7.17.0"
+    "@babel/types" "^7.18.6"
 
 "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
@@ -265,6 +275,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.17.12", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
@@ -290,6 +307,17 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-replace-supers@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.6.tgz#efedf51cfccea7b7b8c0f00002ab317e7abfe420"
+  integrity sha512-fTf7zoXnUGl9gF25fXCWE26t7Tvtyn6H4hkLSYhATwJvw2uYxd3aoXplMSe0g9XbwK7bmxNes7+FGO0rB/xC0g==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-member-expression-to-functions" "^7.18.6"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/traverse" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-simple-access@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
@@ -318,6 +346,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -328,12 +363,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
-"@babel/helper-validator-option@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
-  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
-
-"@babel/helper-validator-option@^7.18.6":
+"@babel/helper-validator-option@^7.16.7", "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
@@ -366,11 +396,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.18.5":
   version "7.18.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.5.tgz#337062363436a893a2d22faa60be5bb37091c83c"
   integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==
 
+"@babel/parser@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.6.tgz#845338edecad65ebffef058d3be851f1d28a63bc"
+  integrity sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -396,21 +440,13 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.16.0", "@babel/plugin-proposal-class-properties@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
-  integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-proposal-class-properties@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.17.12.tgz#84f65c0cc247d46f40a6da99aadd6438315d80a4"
-  integrity sha512-U0mI9q8pW5Q9EaTHFPwSVusPMV/DV9Mm8p7csqROFLtIE9rBF5piLqyrBGigftALrBcsBGu4m38JneAe7ZDLXw==
+"@babel/plugin-proposal-class-properties@^7.16.0", "@babel/plugin-proposal-class-properties@^7.16.7", "@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-proposal-class-static-block@^7.16.7":
   version "7.16.7"
@@ -517,40 +553,22 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-private-methods@^7.16.0", "@babel/plugin-proposal-private-methods@^7.16.11":
-  version "7.16.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
-  integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.16.10"
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-proposal-private-methods@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.17.12.tgz#c2ca3a80beb7539289938da005ad525a038a819c"
-  integrity sha512-SllXoxo19HmxhDWm3luPz+cPhtoTSKLJE9PXshsfrOzBqs60QP0r8OaJItrPhAj0d7mZMnNF0Y1UUggCDgMz1A==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
-
-"@babel/plugin-proposal-private-property-in-object@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
-  integrity sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==
+"@babel/plugin-proposal-private-methods@^7.16.0", "@babel/plugin-proposal-private-methods@^7.16.11", "@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-create-class-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz#b02efb7f106d544667d91ae97405a9fd8c93952d"
-  integrity sha512-/6BtVi57CJfrtDNKfK5b66ydK2J5pXUKBKSPD2G1whamMuEnZWgoOIfO8Vf9F/DoD4izBLD/Au4NMQfruzzykg==
+"@babel/plugin-proposal-private-property-in-object@^7.16.7", "@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
+  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
@@ -610,19 +628,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.14.5":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.17.12.tgz#23d852902acd19f42923fca9d0f196984d124e73"
-  integrity sha512-B8QIgBvkIG6G2jgsOHQUist7Sm0EBLDCx8sen072IwqNuzMegZNXrYnSv77cYzA8mLDZAfQYqsLIhimiP1s2HQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-
-"@babel/plugin-syntax-flow@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.7.tgz#202b147e5892b8452bbb0bb269c7ed2539ab8832"
-  integrity sha512-UDo3YGQO0jH6ytzVwgSLv9i/CzMcUjbKenL67dTrAZPPv6GFAtDhe6jqnvmoKzC/7htNTohhos+onPtDMqJwaQ==
+"@babel/plugin-syntax-flow@^7.16.7", "@babel/plugin-syntax-flow@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz#774d825256f2379d06139be0c723c4dd444f3ca1"
+  integrity sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
@@ -766,26 +777,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-destructuring@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.7.tgz#ca9588ae2d63978a4c29d3f33282d8603f618e23"
-  integrity sha512-VqAwhTHBnu5xBVDCvrvqJbtLUa++qZaWC0Fgr2mqokBlulZARGyIvZDoqbPlPaKImQ9dKAcCzbv+ul//uqu70A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-transform-destructuring@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
-  integrity sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-transform-destructuring@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.0.tgz#dc4f92587e291b4daa78aa20cc2d7a63aa11e858"
-  integrity sha512-Mo69klS79z6KEfrLg/1WkmVnB8javh75HX4pi2btjvlIoasuxilEyjtsQW6XPrubNd7AQy0MMaNIaQE4e7+PQw==
+"@babel/plugin-transform-destructuring@^7.16.7", "@babel/plugin-transform-destructuring@^7.17.7", "@babel/plugin-transform-destructuring@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.6.tgz#a98b0e42c7ffbf5eefcbcf33280430f230895c6f"
+  integrity sha512-tgy3u6lRp17ilY8r1kP4i2+HDUwxlVqq3RTc943eAWSzGgpU1qhiKpqZ5CMyHReIYPHdo3Kg8v8edKtDqSVEyQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.16.7"
@@ -957,21 +954,21 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
-  integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
+"@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx-development@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
-  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
+"@babel/plugin-transform-react-jsx-development@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz#dbe5c972811e49c7405b630e4d0d2e1380c0ddc5"
+  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
   dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.16.7"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx@^7.16.7", "@babel/plugin-transform-react-jsx@^7.17.12", "@babel/plugin-transform-react-jsx@^7.18.6":
+"@babel/plugin-transform-react-jsx@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz#2721e96d31df96e3b7ad48ff446995d26bc028ff"
   integrity sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw==
@@ -982,13 +979,13 @@
     "@babel/plugin-syntax-jsx" "^7.18.6"
     "@babel/types" "^7.18.6"
 
-"@babel/plugin-transform-react-pure-annotations@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz#232bfd2f12eb551d6d7d01d13fe3f86b45eb9c67"
-  integrity sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==
+"@babel/plugin-transform-react-pure-annotations@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz#561af267f19f3e5d59291f9950fd7b9663d0d844"
+  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-regenerator@^7.16.7":
   version "7.16.7"
@@ -1262,29 +1259,17 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.12.5", "@babel/preset-react@^7.16.0":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.7.tgz#4c18150491edc69c183ff818f9f2aecbe5d93852"
-  integrity sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-transform-react-display-name" "^7.16.7"
-    "@babel/plugin-transform-react-jsx" "^7.16.7"
-    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
-    "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
-
-"@babel/preset-react@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.17.12.tgz#62adbd2d1870c0de3893095757ed5b00b492ab3d"
-  integrity sha512-h5U+rwreXtZaRBEQhW1hOJLMq8XNJBQ/9oymXiCXTuT/0uOwpbT0gUt+sXeOqoXBgNuUKI7TaObVwoEyWkpFgA==
+"@babel/preset-react@^7.12.5", "@babel/preset-react@^7.16.0", "@babel/preset-react@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d"
+  integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-transform-react-display-name" "^7.16.7"
-    "@babel/plugin-transform-react-jsx" "^7.17.12"
-    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
-    "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-react-display-name" "^7.18.6"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
+    "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
 
 "@babel/preset-typescript@^7.16.0":
   version "7.16.7"
@@ -1303,10 +1288,10 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
-  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1319,6 +1304,15 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/template@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
+  integrity sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.18.0", "@babel/traverse@^7.18.2", "@babel/traverse@^7.18.5", "@babel/traverse@^7.7.2":
   version "7.18.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.5.tgz#94a8195ad9642801837988ab77f36e992d9a20cd"
@@ -1335,7 +1329,23 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.11.5", "@babel/types@^7.12.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.18.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4", "@babel/types@^7.18.6", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4", "@babel/types@^7.4.4":
+"@babel/traverse@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.6.tgz#a228562d2f46e89258efa4ddd0416942e2fd671d"
+  integrity sha512-zS/OKyqmD7lslOtFqbscH6gMLFYOfG1YPqCKfAW5KrTeolKqvB8UelR49Fpr6y93kYkW2Ik00mT1LOGiAGvizw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-function-name" "^7.18.6"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.6"
+    "@babel/types" "^7.18.6"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.11.5", "@babel/types@^7.12.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.18.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4", "@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4", "@babel/types@^7.4.4":
   version "7.18.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.7.tgz#a4a2c910c15040ea52cdd1ddb1614a65c8041726"
   integrity sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==
@@ -1471,7 +1481,7 @@
     source-map "^0.5.7"
     stylis "4.0.13"
 
-"@emotion/cache@^11.7.1", "@emotion/cache@^11.9.3":
+"@emotion/cache@^11.9.3":
   version "11.9.3"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb"
   integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
@@ -1487,7 +1497,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.2", "@emotion/is-prop-valid@^1.1.3":
+"@emotion/is-prop-valid@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
   integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
@@ -2462,6 +2472,15 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz#b876e3feefb9c8d3aa84014da28b5e52a0640d72"
@@ -2472,6 +2491,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.0.tgz#1179863356ac8fbea64a5a4bcde93a4871012c01"
   integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==
 
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.11"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
@@ -2585,7 +2609,7 @@
     pseudolocale "^1.1.0"
     ramda "^0.27.1"
 
-"@lingui/conf@^3.13.3", "@lingui/conf@^3.14.0":
+"@lingui/conf@^3.14.0":
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/@lingui/conf/-/conf-3.14.0.tgz#1b2c20d556b6ea78e530a07a934be219a0d6c662"
   integrity sha512-5GMAbIRad9FavqYsfZCRAwjcOLzE7tONDJe9lSYE5SSJbbG01RI5kR5P0B84DUhTI6cGXau+1dAcP9K+JbEx+g==
@@ -2606,13 +2630,13 @@
     make-plural "^6.2.2"
     messageformat-parser "^4.1.3"
 
-"@lingui/macro@^3.13.3":
-  version "3.13.3"
-  resolved "https://registry.yarnpkg.com/@lingui/macro/-/macro-3.13.3.tgz#699b60e6676c3c9e3c9eed6564155fc9e23d6aa8"
-  integrity sha512-nPldmgPGNfGTVW3TTkSZiaPI5jDQKwv/Hfmjzwo/VzfXpcjxoqz0oDGQBx8mbdKcMgpq+g6fV2Y5aCosTazdqg==
+"@lingui/macro@^3.14.0":
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/@lingui/macro/-/macro-3.14.0.tgz#4d97cd548967c2b4b2b2f92715eec4d69e84545c"
+  integrity sha512-NxTRrhrZ/cUO9PX/4vWys90Ku58+ExxHuE30IuDnnDldWhWlOdycmjDt9tB+yIiUdFym/veSxBs+h114FzG5mA==
   dependencies:
     "@babel/runtime" "^7.11.2"
-    "@lingui/conf" "^3.13.3"
+    "@lingui/conf" "^3.14.0"
     ramda "^0.27.1"
 
 "@lingui/react@^3.14.0":
@@ -2639,17 +2663,17 @@
   resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
   integrity sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q==
 
-"@mui/base@5.0.0-alpha.85":
-  version "5.0.0-alpha.85"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.85.tgz#e9e19678bf72dae228d0f25d33dfe20462aac833"
-  integrity sha512-ONlQJOmQrxmR+pYF9AqH69FOG4ofwzVzNltwb2xKAQIW3VbsNZahcHIpzhFd70W6EIU+QHzB9TzamSM+Fg/U7w==
+"@mui/base@5.0.0-alpha.88":
+  version "5.0.0-alpha.88"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.88.tgz#0930d1849c74ba62a28ab2d8533de88764173ba4"
+  integrity sha512-uL7ej2F/3GUnZewsDQSHUVHoSBT3AQcTIdfdy6QeCHy7X26mtbcIvTRcjl2PzbbNQplppavSTibPiQG/giJ+ng==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@emotion/is-prop-valid" "^1.1.2"
+    "@emotion/is-prop-valid" "^1.1.3"
     "@mui/types" "^7.1.4"
-    "@mui/utils" "^5.8.4"
+    "@mui/utils" "^5.8.6"
     "@popperjs/core" "^2.11.5"
-    clsx "^1.1.1"
+    clsx "^1.2.0"
     prop-types "^15.8.1"
     react-is "^17.0.2"
 
@@ -2660,52 +2684,53 @@
   dependencies:
     "@babel/runtime" "^7.17.2"
 
-"@mui/material@^5.8.4":
-  version "5.8.4"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.4.tgz#b9cdae0c79ea770bc9cc3aafb7f750ed8ebe1b5d"
-  integrity sha512-KlOJS1JGhwuhdoF4fulmz41h/YxyMdZSc+ncz+HAah0GKn8ovAs5774f1w0lIasxbtI1Ziunwvmnu9PvvUKdMw==
+"@mui/material@^5.8.7":
+  version "5.8.7"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.7.tgz#28617c5b8a9e354e300f19fc38e1286ba1e15ad3"
+  integrity sha512-Oo62UhrgEi+BMLr3nUEASJgScE2/hhq14CbBUmrVV3GQlEGtqMZsy26Vb0AqEmphFeN3TXlsbM9aeW5yq8ZFlw==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/base" "5.0.0-alpha.85"
-    "@mui/system" "^5.8.4"
+    "@mui/base" "5.0.0-alpha.88"
+    "@mui/system" "^5.8.7"
     "@mui/types" "^7.1.4"
-    "@mui/utils" "^5.8.4"
-    "@types/react-transition-group" "^4.4.4"
-    clsx "^1.1.1"
+    "@mui/utils" "^5.8.6"
+    "@types/react-transition-group" "^4.4.5"
+    clsx "^1.2.0"
     csstype "^3.1.0"
     prop-types "^15.8.1"
     react-is "^17.0.2"
     react-transition-group "^4.4.2"
 
-"@mui/private-theming@^5.8.4":
-  version "5.8.4"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.8.4.tgz#8ff896601cf84eb9f8394db7674ee4dd2a3343f7"
-  integrity sha512-3Lp0VAEjtQygJ70MWEyHkKvg327O6YoBH6ZNEy6fIsrK6gmRIj+YrlvJ7LQCbowY+qDGnbdMrTBd1hfThlI8lg==
+"@mui/private-theming@^5.8.6":
+  version "5.8.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.8.6.tgz#db2bafeda1699e43e67b3ff4f770d6b7a234501f"
+  integrity sha512-yHsJk1qU9r/q0DlnxGRJPHyM0Y/nUv8FTNgDTiI9I58GWuVuZqeTUr7JRvPh6ybeP/FLtW5eXEavRK9wxVk4uQ==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/utils" "^5.8.4"
+    "@mui/utils" "^5.8.6"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.8.0":
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz#89ed42efe7c8749e5a60af035bc5d3a6bea362bf"
-  integrity sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==
+"@mui/styled-engine@^5.8.7":
+  version "5.8.7"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.7.tgz#63d0779c07677fe76d4705a02c7ae99f89b50780"
+  integrity sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@emotion/cache" "^11.7.1"
+    "@emotion/cache" "^11.9.3"
+    csstype "^3.1.0"
     prop-types "^15.8.1"
 
-"@mui/system@^5.8.4":
-  version "5.8.4"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.8.4.tgz#88306aefcc3a60528f69dcd2d66516831859c328"
-  integrity sha512-eeYZXlOn4p+tYwqqDlci6wW4knJ68aGx5A24YU9ubYZ5o0IwveoNP3LC9sHAMxigk/mUTqL4bpSMJ2HbTn2aQg==
+"@mui/system@^5.8.7":
+  version "5.8.7"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.8.7.tgz#6a7ab6ac8d3e6a6c7abcbea84b5697cbb225beb8"
+  integrity sha512-yFoFbfO42FWeSUDrFPixYjpqySQMqVMOSbSlAxiKnwFpvXGGn/bkfQTboCRNO31fvES29FJLQd4mwwMHd5mXng==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/private-theming" "^5.8.4"
-    "@mui/styled-engine" "^5.8.0"
+    "@mui/private-theming" "^5.8.6"
+    "@mui/styled-engine" "^5.8.7"
     "@mui/types" "^7.1.4"
-    "@mui/utils" "^5.8.4"
-    clsx "^1.1.1"
+    "@mui/utils" "^5.8.6"
+    clsx "^1.2.0"
     csstype "^3.1.0"
     prop-types "^15.8.1"
 
@@ -2714,10 +2739,10 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.4.tgz#4185c05d6df63ec673cda15feab80440abadc764"
   integrity sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==
 
-"@mui/utils@^5.8.4":
-  version "5.8.4"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.8.4.tgz#5c46b5900bd2452b3ce54a7a1c94a3e2a8a75c34"
-  integrity sha512-BHYErfrjqqh76KaDAm8wZlhEip1Uj7Cmco65NcsF3BWrAl3FWngACpaPZeEbTgmaEwyWAQEE6LZhsmy43hfyqQ==
+"@mui/utils@^5.8.6":
+  version "5.8.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.8.6.tgz#543de64a64bb9135316ecfd91d75a8740544d79f"
+  integrity sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==
   dependencies:
     "@babel/runtime" "^7.17.2"
     "@types/prop-types" "^15.7.5"
@@ -2763,10 +2788,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@olympusdao/component-library@^2.2.2-gov.0":
-  version "2.2.2-gov.0"
-  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-gov.0.tgz#b5d6d6b8c57ecd53e8431897525c5f45886f9bf0"
-  integrity sha512-qBsM4RU4rzU6kdnEACfeTMzI7vH7iXeBX469vepbkv39SG1eZ7UEcZeO3XIwDdN4s+eHqc1h2Ssiyi63flO5+w==
+"@olympusdao/component-library@^2.2.2-alpha.3":
+  version "2.2.2-alpha.3"
+  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-alpha.3.tgz#e2fd940bb2601a90f4c7adde68619c6af4bf1588"
+  integrity sha512-yAs8sBIageAQf0ZBtAtSvFBPkGYAW5WoY4+QQcE/OueaSsXoxrnRwKIe7iG5lo4I2diU6TU4kUWte7RwB6JMdQ==
   dependencies:
     "@react-spring/web" "^9.4.5"
 
@@ -3649,10 +3674,10 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.4":
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
-  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+"@types/react-transition-group@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
   dependencies:
     "@types/react" "*"
 
@@ -3791,14 +3816,14 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^5.30.0", "@typescript-eslint/eslint-plugin@^5.5.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.0.tgz#524a11e15c09701733033c96943ecf33f55d9ca1"
-  integrity sha512-lvhRJ2pGe2V9MEU46ELTdiHgiAFZPKtLhiU5wlnaYpMc2+c1R8fh8i80ZAa665drvjHKUJyRRGg3gEm1If54ow==
+"@typescript-eslint/eslint-plugin@^5.30.6", "@typescript-eslint/eslint-plugin@^5.5.0":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.6.tgz#9c6017b6c1d04894141b4a87816388967f64c359"
+  integrity sha512-J4zYMIhgrx4MgnZrSDD7sEnQp7FmhKNOaqaOpaoQ/SfdMfRB/0yvK74hTnvH+VQxndZynqs5/Hn4t+2/j9bADg==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.30.0"
-    "@typescript-eslint/type-utils" "5.30.0"
-    "@typescript-eslint/utils" "5.30.0"
+    "@typescript-eslint/scope-manager" "5.30.6"
+    "@typescript-eslint/type-utils" "5.30.6"
+    "@typescript-eslint/utils" "5.30.6"
     debug "^4.3.4"
     functional-red-black-tree "^1.0.1"
     ignore "^5.2.0"
@@ -3839,20 +3864,20 @@
     "@typescript-eslint/types" "5.28.0"
     "@typescript-eslint/visitor-keys" "5.28.0"
 
-"@typescript-eslint/scope-manager@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz#bf585ee801ab4ad84db2f840174e171a6bb002c7"
-  integrity sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==
+"@typescript-eslint/scope-manager@5.30.6":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.6.tgz#ce1b49ff5ce47f55518d63dbe8fc9181ddbd1a33"
+  integrity sha512-Hkq5PhLgtVoW1obkqYH0i4iELctEKixkhWLPTYs55doGUKCASvkjOXOd/pisVeLdO24ZX9D6yymJ/twqpJiG3g==
   dependencies:
-    "@typescript-eslint/types" "5.30.0"
-    "@typescript-eslint/visitor-keys" "5.30.0"
+    "@typescript-eslint/types" "5.30.6"
+    "@typescript-eslint/visitor-keys" "5.30.6"
 
-"@typescript-eslint/type-utils@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.0.tgz#98f3af926a5099153f092d4dad87148df21fbaae"
-  integrity sha512-GF8JZbZqSS+azehzlv/lmQQ3EU3VfWYzCczdZjJRxSEeXDQkqFhCBgFhallLDbPwQOEQ4MHpiPfkjKk7zlmeNg==
+"@typescript-eslint/type-utils@5.30.6":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.6.tgz#a64aa9acbe609ab77f09f53434a6af2b9685f3af"
+  integrity sha512-GFVVzs2j0QPpM+NTDMXtNmJKlF842lkZKDSanIxf+ArJsGeZUIaeT4jGg+gAgHt7AcQSFwW7htzF/rbAh2jaVA==
   dependencies:
-    "@typescript-eslint/utils" "5.30.0"
+    "@typescript-eslint/utils" "5.30.6"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
@@ -3866,10 +3891,10 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.28.0.tgz#cffd9bcdce28db6daaa146e48a0be4387a6f4e9d"
   integrity sha512-2OOm8ZTOQxqkPbf+DAo8oc16sDlVR5owgJfKheBkxBKg1vAfw2JsSofH9+16VPlN9PWtv8Wzhklkqw3k/zCVxA==
 
-"@typescript-eslint/types@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.0.tgz#db7d81d585a3da3801432a9c1d2fafbff125e110"
-  integrity sha512-vfqcBrsRNWw/LBXyncMF/KrUTYYzzygCSsVqlZ1qGu1QtGs6vMkt3US0VNSQ05grXi5Yadp3qv5XZdYLjpp8ag==
+"@typescript-eslint/types@5.30.6":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.6.tgz#86369d0a7af8c67024115ac1da3e8fb2d38907e1"
+  integrity sha512-HdnP8HioL1F7CwVmT4RaaMX57RrfqsOMclZc08wGMiDYJBsLGBM7JwXM4cZJmbWLzIR/pXg1kkrBBVpxTOwfUg==
 
 "@typescript-eslint/typescript-estree@5.22.0":
   version "5.22.0"
@@ -3897,13 +3922,13 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz#4565ee8a6d2ac368996e20b2344ea0eab1a8f0bb"
-  integrity sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==
+"@typescript-eslint/typescript-estree@5.30.6":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.6.tgz#a84a0d6a486f9b54042da1de3d671a2c9f14484e"
+  integrity sha512-Z7TgPoeYUm06smfEfYF0RBkpF8csMyVnqQbLYiGgmUSTaSXTP57bt8f0UFXstbGxKIreTwQCujtaH0LY9w9B+A==
   dependencies:
-    "@typescript-eslint/types" "5.30.0"
-    "@typescript-eslint/visitor-keys" "5.30.0"
+    "@typescript-eslint/types" "5.30.6"
+    "@typescript-eslint/visitor-keys" "5.30.6"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -3922,15 +3947,15 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/utils@5.30.0", "@typescript-eslint/utils@^5.13.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.0.tgz#1dac771fead5eab40d31860716de219356f5f754"
-  integrity sha512-0bIgOgZflLKIcZsWvfklsaQTM3ZUbmtH0rJ1hKyV3raoUYyeZwcjQ8ZUJTzS7KnhNcsVT1Rxs7zeeMHEhGlltw==
+"@typescript-eslint/utils@5.30.6", "@typescript-eslint/utils@^5.13.0":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.6.tgz#1de2da14f678e7d187daa6f2e4cdb558ed0609dc"
+  integrity sha512-xFBLc/esUbLOJLk9jKv0E9gD/OH966M40aY9jJ8GiqpSkP2xOV908cokJqqhVd85WoIvHVHYXxSFE4cCSDzVvA==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.30.0"
-    "@typescript-eslint/types" "5.30.0"
-    "@typescript-eslint/typescript-estree" "5.30.0"
+    "@typescript-eslint/scope-manager" "5.30.6"
+    "@typescript-eslint/types" "5.30.6"
+    "@typescript-eslint/typescript-estree" "5.30.6"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
@@ -3950,12 +3975,12 @@
     "@typescript-eslint/types" "5.28.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.0.tgz#07721d23daca2ec4c2da7f1e660d41cd78bacac3"
-  integrity sha512-6WcIeRk2DQ3pHKxU1Ni0qMXJkjO/zLjBymlYBy/53qxe7yjEFSvzKLDToJjURUhSl2Fzhkl4SMXQoETauF74cw==
+"@typescript-eslint/visitor-keys@5.30.6":
+  version "5.30.6"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.6.tgz#94dd10bb481c8083378d24de1742a14b38a2678c"
+  integrity sha512-41OiCjdL2mCaSDi2SvYbzFLlqqlm5v1ZW9Ym55wXKL/Rx6OOB1IbuFGo71Fj6Xy90gJDFTlgOS+vbmtGHPTQQA==
   dependencies:
-    "@typescript-eslint/types" "5.30.0"
+    "@typescript-eslint/types" "5.30.6"
     eslint-visitor-keys "^3.3.0"
 
 "@ungap/promise-all-settled@1.1.2":
@@ -3997,10 +4022,10 @@
   resolved "https://registry.yarnpkg.com/@vanilla-extract/sprinkles/-/sprinkles-1.4.1.tgz#8c8703ddedaac355c1187db909119816c0fc771c"
   integrity sha512-aW6CfMMToX4a+baLuVxwcT0FSACjX3xrNt8wdi/3LLRlLAfhyue8OK7kJxhcYNZfydBeWTP59aRy8p5FUTIeew==
 
-"@wagmi/core@^0.4.5":
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-0.4.5.tgz#c13fff0752101b83c8356bd5e910697a9e2ac594"
-  integrity sha512-K4bmB9xn7Jr1dEYo0YFhCDBI7NOEnzXCgmbtST8rLx1wjdoS18fTRG559Gc/jdxJmcOChTH+NwYSJgMyw8vLEA==
+"@wagmi/core@^0.4.7":
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-0.4.8.tgz#996c9040310e3126cb75f08b7240229f484a52f0"
+  integrity sha512-QhBujyV1Rf5oTsekTFlx/LmJnQ4+AO7FLwGX6H+PnyvkEQPe1oKv6VtbyghTQZMwFakjDSKf9QTKdtgZbhx/1w==
   dependencies:
     eventemitter3 "^4.0.7"
     zustand "^4.0.0-rc.1"
@@ -4845,13 +4870,20 @@ axe-core@^4.4.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c"
   integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
 
-axios@^0.21.0, axios@^0.21.1:
+axios@^0.21.0:
   version "0.21.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
   integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.25.0.tgz#349cfbb31331a9b4453190791760a8d35b093e0a"
+  integrity sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==
+  dependencies:
+    follow-redirects "^1.14.7"
+
 axios@^0.27.2:
   version "0.27.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
@@ -5684,11 +5716,16 @@ clone@^2.0.0, clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
-clsx@1.1.1, clsx@^1.1.0, clsx@^1.1.1:
+clsx@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^1.1.0, clsx@^1.1.1, clsx@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.0.tgz#b0e415ea7537dbac01b169c5cec1caeb11d86566"
+  integrity sha512-EPRP7XJsM1y0iCU3Z7C7jFKdQboXSeHgEfzQUTlz7m5NP3hDrlz48aUsmNGp4pC+JOW9WA3vIRqlYuo/bl4Drw==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -7169,10 +7206,10 @@ eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-jsx-a11y@^6.6.0:
     minimatch "^3.1.2"
     semver "^6.3.0"
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
-  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+eslint-plugin-prettier@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
@@ -7269,10 +7306,10 @@ eslint-webpack-plugin@^3.1.1:
     normalize-path "^3.0.0"
     schema-utils "^3.1.1"
 
-eslint@^8.18.0, eslint@^8.3.0:
-  version "8.18.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.18.0.tgz#78d565d16c993d0b73968c523c0446b13da784fd"
-  integrity sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==
+eslint@^8.19.0, eslint@^8.3.0:
+  version "8.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.19.0.tgz#7342a3cbc4fbc5c106a1eefe0fd0b50b6b1a7d28"
+  integrity sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==
   dependencies:
     "@eslint/eslintrc" "^1.3.0"
     "@humanwhocodes/config-array" "^0.9.2"
@@ -7709,10 +7746,10 @@ expand-tilde@^1.2.2:
   dependencies:
     os-homedir "^1.0.1"
 
-expect-puppeteer@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/expect-puppeteer/-/expect-puppeteer-6.1.0.tgz#507bf3488e656c2f11fb1306ecaccc108a4bbaa5"
-  integrity sha512-5yk64xOe+yTRLeZTg1uuGYmUw5bMsI/YX7Q9tXsovYFBq8bvagJH4XMYLQ7/nU+1dJawLH0KJehuJULD33oU+w==
+expect-puppeteer@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/expect-puppeteer/-/expect-puppeteer-6.1.1.tgz#f446cd2a6f9db895077e4fe591db432b5d7f34b5"
+  integrity sha512-cnQF96qdoEcOD63j5NQMc0RtW9WRMW/WHKXEKsuDQ2tszhVH3qC7zkXXS4D0LTt9qCB3DEExioqylsQXvqPrUw==
 
 expect@^27.5.1:
   version "27.5.1"
@@ -8047,7 +8084,7 @@ follow-redirects@^1.0.0, follow-redirects@^1.12.1, follow-redirects@^1.14.9:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
 
-follow-redirects@^1.14.0:
+follow-redirects@^1.14.0, follow-redirects@^1.14.7:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
@@ -9580,10 +9617,10 @@ jest-config@^28.1.2:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
-jest-dev-server@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/jest-dev-server/-/jest-dev-server-6.0.3.tgz#0cde74e7138ad2f42402749b1675a4de4f41a839"
-  integrity sha512-joKPQQWSaBMsNNdCWvwCQvhD6ox4IH+5H5pecbRRSxiRi2BfVCGGOWQ4/MGwV1NJ9z9XEq1qy5JLYTJlv9RVzA==
+jest-dev-server@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/jest-dev-server/-/jest-dev-server-6.1.1.tgz#44262a63f4b978c6af7ca323129331256c868ed7"
+  integrity sha512-z5LnaGDvlIkdMv/rppSO4+rq+GyQKf1xI9oiBxf9/2EBeN2hxRaWiMvaLNDnHPZj2PAhBXsycrKslDDoZO2Xtw==
   dependencies:
     chalk "^4.1.2"
     cwd "^0.10.0"
@@ -9591,7 +9628,7 @@ jest-dev-server@^6.0.3:
     prompts "^2.4.2"
     spawnd "^6.0.2"
     tree-kill "^1.2.2"
-    wait-on "^6.0.0"
+    wait-on "^6.0.1"
 
 jest-diff@^27.0.0:
   version "27.4.6"
@@ -9708,14 +9745,14 @@ jest-environment-node@^28.1.2:
     jest-mock "^28.1.1"
     jest-util "^28.1.1"
 
-jest-environment-puppeteer@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/jest-environment-puppeteer/-/jest-environment-puppeteer-6.0.3.tgz#45734fe8389c99b1a58d49cfd2a35f0fb4bf5a59"
-  integrity sha512-oZE/W8swhDSZpZ+Vm1C2JyoKECsvqcFOlaf3/+G0AtizZfGNkRILdi1U7k9MHLOqGEB5sfFWXG0vpJ8bTNP1dQ==
+jest-environment-puppeteer@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-puppeteer/-/jest-environment-puppeteer-6.1.1.tgz#2d4f862745bb799777c29768b03aeda0f609f07f"
+  integrity sha512-Ces37g8Gdj7QaVxszeoXlvmsZxcEJN9EPUdJt8fGMLA+6ARVFKyVmFgP9xVeGyjTvzsXdtIiJdeOKMLMeD8r2A==
   dependencies:
     chalk "^4.1.2"
     cwd "^0.10.0"
-    jest-dev-server "^6.0.3"
+    jest-dev-server "^6.1.1"
     jest-environment-node "^27.4.4"
     merge-deep "^3.0.3"
 
@@ -9934,13 +9971,13 @@ jest-pnp-resolver@^1.2.2:
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
   integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
 
-jest-puppeteer@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jest-puppeteer/-/jest-puppeteer-6.1.0.tgz#74449a2930c06cc130ab55d2b71dad71cf8362e1"
-  integrity sha512-mPNV3pKkGlwyq+7UyuDLjm8Ev4zJmkzH46jCwsOy+vsr0t+TvfPcwtVR4x+NIP2lPgYnjIlSPsnRjgkP9y95mQ==
+jest-puppeteer@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/jest-puppeteer/-/jest-puppeteer-6.1.1.tgz#7d459c94efe45ac7d5085a9c499f7e727add9a6c"
+  integrity sha512-cBOszleUpyipDMNYmcmH3x+687x03ZvOVz7W8X5y5TgD+j4MK+BcumwGdE1YwVS21kPLjJUu1pIdEzEDuFEBfA==
   dependencies:
-    expect-puppeteer "^6.1.0"
-    jest-environment-puppeteer "^6.0.3"
+    expect-puppeteer "^6.1.1"
+    jest-environment-puppeteer "^6.1.1"
 
 jest-regex-util@^27.5.1:
   version "27.5.1"
@@ -10373,7 +10410,7 @@ jest@^28.1.2:
     import-local "^3.0.2"
     jest-cli "^28.1.2"
 
-joi@^17.4.0:
+joi@^17.6.0:
   version "17.6.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
   integrity sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==
@@ -13683,7 +13720,14 @@ rxjs@^6.6.0, rxjs@^6.6.3:
   dependencies:
     tslib "^1.9.0"
 
-rxjs@^7.1.0, rxjs@^7.5.5:
+rxjs@^7.5.4:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
+  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
+  dependencies:
+    tslib "^2.1.0"
+
+rxjs@^7.5.5:
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.5.tgz#2ebad89af0f560f460ad5cc4213219e1f7dd4e9f"
   integrity sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==
@@ -15232,13 +15276,13 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-wagmi@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-0.5.6.tgz#5333e1914cbdca1bca307cb89672b0041a27c8ba"
-  integrity sha512-Y3mTZObLBWGxMgFRR5g4qD8G8C3LFgfrt5anseAhVVrtn0O9btN/s3yTzrC6Tf+Una1rgpJydUnaQashZ9IsCg==
+wagmi@^0.5.9:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-0.5.9.tgz#7e1c3eaa4b5cc5680072c66b59622c2cb5a7bfff"
+  integrity sha512-B9wL+1J3J/9sVqj3DMJtTYuBSx0QdFFu6QwPlw2zVvB995lWivG2vABTYwoWuyUbXwcVvSVHEgPyFBRx5zoPqw==
   dependencies:
     "@coinbase/wallet-sdk" "^3.3.0"
-    "@wagmi/core" "^0.4.5"
+    "@wagmi/core" "^0.4.7"
     "@walletconnect/ethereum-provider" "^1.7.8"
     react-query "^4.0.0-beta.23"
     use-sync-external-store "^1.1.0"
@@ -15248,16 +15292,16 @@ wait-for-expect@^3.0.2:
   resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463"
   integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==
 
-wait-on@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-6.0.0.tgz#7e9bf8e3d7fe2daecbb7a570ac8ca41e9311c7e7"
-  integrity sha512-tnUJr9p5r+bEYXPUdRseolmz5XqJTTj98JgOsfBn7Oz2dxfE2g3zw1jE+Mo8lopM3j3et/Mq1yW7kKX6qw7RVw==
+wait-on@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-6.0.1.tgz#16bbc4d1e4ebdd41c5b4e63a2e16dbd1f4e5601e"
+  integrity sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==
   dependencies:
-    axios "^0.21.1"
-    joi "^17.4.0"
+    axios "^0.25.0"
+    joi "^17.6.0"
     lodash "^4.17.21"
     minimist "^1.2.5"
-    rxjs "^7.1.0"
+    rxjs "^7.5.4"
 
 walker@^1.0.7, walker@^1.0.8:
   version "1.0.8"

From c32fc35db07b70e9eed71a7af58a0cd2c9704526 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 2 Aug 2022 21:19:51 -0500
Subject: [PATCH 026/113] add Governance Instructions contract

---
 src/abi/OlympusGovInstructions.json | 250 ++++++++++++++++++++++++++++
 src/constants/addresses.ts          |   5 +
 src/constants/contracts.ts          |   8 +
 3 files changed, 263 insertions(+)
 create mode 100644 src/abi/OlympusGovInstructions.json

diff --git a/src/abi/OlympusGovInstructions.json b/src/abi/OlympusGovInstructions.json
new file mode 100644
index 0000000000..e4f3a3de3b
--- /dev/null
+++ b/src/abi/OlympusGovInstructions.json
@@ -0,0 +1,250 @@
+{
+    "abi": [
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "kernel_",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "constructor"
+        },
+        {
+            "inputs": [],
+            "name": "INSTR_InstructionsCannotBeEmpty",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "INSTR_InvalidChangeExecutorAction",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "INSTR_InvalidModuleKeycode",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "INSTR_InvalidTargetNotAContract",
+            "type": "error"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "policy_",
+                    "type": "address"
+                }
+            ],
+            "name": "Module_PolicyNotAuthorized",
+            "type": "error"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "caller_",
+                    "type": "address"
+                }
+            ],
+            "name": "Policy_OnlyKernel",
+            "type": "error"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "instructionsId",
+                    "type": "uint256"
+                }
+            ],
+            "name": "InstructionsStored",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "bytes4",
+                    "name": "funcSelector_",
+                    "type": "bytes4"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "address",
+                    "name": "policy_",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "bool",
+                    "name": "permission_",
+                    "type": "bool"
+                }
+            ],
+            "name": "PermissionSet",
+            "type": "event"
+        },
+        {
+            "inputs": [],
+            "name": "INIT",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "KEYCODE",
+            "outputs": [
+                {
+                    "internalType": "Keycode",
+                    "name": "",
+                    "type": "bytes5"
+                }
+            ],
+            "stateMutability": "pure",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VERSION",
+            "outputs": [
+                {
+                    "internalType": "uint8",
+                    "name": "major",
+                    "type": "uint8"
+                },
+                {
+                    "internalType": "uint8",
+                    "name": "minor",
+                    "type": "uint8"
+                }
+            ],
+            "stateMutability": "pure",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "instructionsId_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "getInstructions",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "enum Actions",
+                            "name": "action",
+                            "type": "uint8"
+                        },
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        }
+                    ],
+                    "internalType": "struct Instruction[]",
+                    "name": "",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "kernel",
+            "outputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "enum Actions",
+                            "name": "action",
+                            "type": "uint8"
+                        },
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        }
+                    ],
+                    "internalType": "struct Instruction[]",
+                    "name": "instructions_",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "store",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "name": "storedInstructions",
+            "outputs": [
+                {
+                    "internalType": "enum Actions",
+                    "name": "action",
+                    "type": "uint8"
+                },
+                {
+                    "internalType": "address",
+                    "name": "target",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "totalInstructions",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index bfbcdf83ac..03ce8987b7 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -176,6 +176,11 @@ export const GOVERNANCE_ADDRESSES = {
   [NetworkId.TESTNET_GOERLI]: "0xaAd5e6e1362b458E38140B7E8c6d5D71b933a56f",
 };
 
+export const GOV_INSTRUCTIONS_ADDRESSES = {
+  [NetworkId.MAINNET]: "",
+  [NetworkId.TESTNET_GOERLI]: "0xcad1fa1617d7b71C785dae33b7d7e62E649eEc66",
+};
+
 export const VOTE_ISSUER_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   [NetworkId.TESTNET_GOERLI]: "0xB737239c3d0FfcB30184D3d1156A6D91a023233D",
diff --git a/src/constants/contracts.ts b/src/constants/contracts.ts
index 6c1a5cd605..792ef52446 100644
--- a/src/constants/contracts.ts
+++ b/src/constants/contracts.ts
@@ -8,6 +8,7 @@ import {
   OlympusGiving__factory,
   OlympusGivingOld__factory,
   OlympusGovernance__factory,
+  OlympusGovInstructions__factory,
   OlympusProV2__factory,
   OlympusStakingv2__factory,
   OlympusVoteIssuer__factory,
@@ -25,6 +26,7 @@ import {
   FUSE_POOL_18_ADDRESSES,
   FUSE_POOL_36_ADDRESSES,
   GIVE_ADDRESSES,
+  GOV_INSTRUCTIONS_ADDRESSES,
   GOVERNANCE_ADDRESSES,
   MIGRATOR_ADDRESSES,
   OLD_GIVE_ADDRESSES,
@@ -125,6 +127,12 @@ export const GOVERNANCE_CONTRACT = new Contract({
   addresses: GOVERNANCE_ADDRESSES,
 });
 
+export const GOV_INSTRUCTIONS_CONTRACT = new Contract({
+  factory: OlympusGovInstructions__factory,
+  name: "Olympus Governance Instructions",
+  addresses: GOV_INSTRUCTIONS_ADDRESSES,
+});
+
 export const VOTE_ISSUER_CONTRACT = new Contract({
   factory: OlympusVoteIssuer__factory,
   name: "Olympus Vote Issuer",

From 54c6c878393a8360fb20c5a3ea890f3f75e22656 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 2 Aug 2022 21:26:14 -0500
Subject: [PATCH 027/113] wip modifying hooks to query proposals

---
 src/hooks/useProposal.ts                    |  62 ++++++------
 src/hooks/useProposals.ts                   |  68 +++++++++++--
 src/views/Governance/ProposalsDashboard.tsx | 102 ++++++++++++++++----
 3 files changed, 176 insertions(+), 56 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index d1460914a8..ac3b7ffee6 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,19 +1,14 @@
 import { ethers } from "ethers";
 import { useQuery } from "react-query";
+import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { parseBigNumber } from "src/helpers";
+import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
+import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
+import { useNetwork } from "wagmi";
 
 /// Import Proposal data type and mock data getters from useProposals
-import {
-  MockGetNoVotesForProposal,
-  mockGetProposalContent,
-  MockGetProposalHasBeenActivated,
-  MockGetProposalMetadata,
-  mockGetProposalState,
-  MockGetProposalTotalEndorsements,
-  mockGetProposalURI,
-  MockGetYesVotesForProposal,
-  Proposal,
-} from "./useProposals";
+import { mockGetProposalContent, mockGetProposalState, mockGetProposalURI, Proposal } from "./useProposals";
 
 /**
  * @notice Query key for useProposal which is dependent on instructionsIndex
@@ -33,37 +28,50 @@ const proposalQueryKey = (instructionsIndex: number) => ["useProposal", instruct
 export const useProposal = (instructionsIndex: number) => {
   /// const IPFSDContract = "";
   /// const governanceContract = "";
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const queryKey = proposalQueryKey(instructionsIndex);
+  const useDependentQuery = createDependentQuery(queryKey);
+  // dependent queries, may be more clear as Promises
+  const metadata = useDependentQuery("GetProposalMetadata", () => contract.getProposalMetadata(instructionsIndex));
+  const isActive = useDependentQuery("ProposalHasBeenActivated", () =>
+    contract.proposalHasBeenActivated(instructionsIndex),
+  );
+  const endorsements = useDependentQuery("TotalEndorsementsForProposal", () =>
+    contract.totalEndorsementsForProposal(instructionsIndex),
+  );
+  const yesVotes = useDependentQuery("YesVotesForProposal", () => contract.yesVotesForProposal(instructionsIndex));
+  const noVotes = useDependentQuery("NoVotesForProposal", () => contract.noVotesForProposal(instructionsIndex));
 
   const query = useQuery<Proposal, Error>(
-    proposalQueryKey(instructionsIndex),
+    queryKey,
     async () => {
+      queryAssertion(metadata && isActive !== undefined && endorsements && yesVotes && noVotes, queryKey);
       /// For the specified proposal index, fetch the relevant data points used in the frontend
-      const proposal = MockGetProposalMetadata(instructionsIndex);
-      const isActive = MockGetProposalHasBeenActivated(instructionsIndex);
-      const endorsements = MockGetProposalTotalEndorsements(instructionsIndex);
-      const yesVotes = MockGetYesVotesForProposal(instructionsIndex);
-      const noVotes = MockGetNoVotesForProposal(instructionsIndex);
-      const proposalURI = mockGetProposalURI(proposal.proposalName);
-      const proposalContent = mockGetProposalContent(proposalURI);
-      const proposalState = mockGetProposalState(proposal.proposalName);
+      // TODO(appleseed): handle these three
+      const proposalURI = mockGetProposalURI("0x4f49502d31000000000000000000000000000000000000000000000000000000");
+      const proposalContent = mockGetProposalContent("ipfs://proposalnumberone");
+      const proposalState = mockGetProposalState("0x4f49502d31000000000000000000000000000000000000000000000000000000");
 
       const currentProposal = {
         id: instructionsIndex,
-        proposalName: ethers.utils.parseBytes32String(proposal.proposalName),
-        proposer: proposal.proposer,
-        submissionTimestamp: proposal.submissionTimestamp,
+        proposalName: ethers.utils.parseBytes32String(metadata.proposalName),
+        proposer: metadata.proposer,
+        submissionTimestamp: parseBigNumber(metadata.submissionTimestamp, 0),
         isActive: isActive,
         state: proposalState,
-        endorsements: endorsements,
-        yesVotes: yesVotes,
-        noVotes: noVotes,
+        endorsements: parseBigNumber(endorsements, 0),
+        yesVotes: parseBigNumber(yesVotes, 0),
+        noVotes: parseBigNumber(noVotes, 0),
         uri: proposalURI,
         content: proposalContent,
       };
 
       return currentProposal;
     },
-    { enabled: true },
+    {
+      enabled: !!metadata && isActive !== undefined && !!endorsements && !!yesVotes && !!noVotes,
+    },
   );
 
   return query as typeof query;
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 44548dd217..37fd6030af 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,11 +1,14 @@
 import { ethers } from "ethers";
-import { useQuery } from "react-query";
-import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { useQuery, UseQueryResult } from "react-query";
+import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { parseBigNumber } from "src/helpers";
+import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
+import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
 import { useNetwork } from "wagmi";
 
 /// Data type for return from getProposalMetadata on Governance.sol
-interface proposalMetadata {
+export interface proposalMetadata {
   proposalName: string;
   proposer: string;
   submissionTimestamp: number;
@@ -26,6 +29,12 @@ export interface Proposal {
   content: string;
 }
 
+export interface IActiveProposal {
+  instructionsId: number;
+  activationTimestamp: number;
+  timeRemaining: number;
+}
+
 /**
  * the proposals current state
  * - currenly only Active & Endorsements status are stored on chain
@@ -122,11 +131,46 @@ export const mockProposalState: { [key: string]: PStatus } = {
   "0x4f49502d34000000000000000000000000000000000000000000000000000000": "draft",
 };
 
-//TODO: Not implemented in Contract. Follow up with SC Team
+/**
+ * returns a unix time differential (in seconds)
+ * @param numDays number of days you want
+ */
+const unixDays = (numDays: number) => {
+  return numDays * 24 * 60 * 60;
+};
+
+export const useActiveProposal = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  return useQuery<IActiveProposal, Error>(["getActiveProposal"], async () => {
+    const activeProposal = await contract.getActiveProposal();
+    /**
+     * number of seconds remaining in proposal
+     */
+    const activationTimestamp = parseBigNumber(activeProposal.activationTimestamp, 0);
+    const timeRemaining = activationTimestamp + unixDays(14) - Date.now() / 1000;
+    return {
+      instructionsId: parseBigNumber(activeProposal.instructionsId, 0),
+      activationTimestamp,
+      timeRemaining,
+    };
+  });
+};
+
 export const mockGetTotalInstructions = (): number => {
   return mockTotalInstructions;
 };
 
+export const useGetTotalInstructions = (): UseQueryResult<number, Error> => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOV_INSTRUCTIONS_CONTRACT.getEthersContract(chain.id);
+  return useQuery<number, Error>(["GetTotalInstructions"], async () => {
+    const total = await contract.totalInstructions();
+    // NOTE(appleseed): not using DecimalBigNumber.toAproxNumber() because this seems simplere
+    return parseBigNumber(total, 0);
+  });
+};
+
 /// Function to return mock proposal metadata in lieu of a contract
 export const MockGetProposalMetadata = (instructionsIndex: number) => {
   const { chain = { id: 1 } } = useNetwork();
@@ -251,16 +295,22 @@ export const useProposals = (filters: IProposalState) => {
   /// const INSTRContract = "";
   /// const IPFSDContract = "";
   /// const governanceContract = "";
-
+  // TODO(appleseed): this needs to be rewritten
+  const queryKey = proposalsQueryKey(filters);
+  const useDependentQuery = createDependentQuery(queryKey);
+  /// Get total number of proposal through INSTR module contract's totalInstructions variable
+  const { data: numberOfProposals } = useGetTotalInstructions();
   const query = useQuery<Proposal[], Error>(
-    proposalsQueryKey(filters),
+    queryKey,
     async () => {
-      /// Get total number of proposal through INSTR module contract's totalInstructions variable
-      const numberOfProposals = mockGetTotalInstructions();
+      queryAssertion(numberOfProposals, queryKey);
       const allProposals: Proposal[] = [];
 
       /// For each proposal, fetch the relevant data points used in the frontend
-      for (let i = 0; i <= numberOfProposals; i++) {
+      // NOTE(appleseed): 1. iterate in reverse order, 2. don't query any proposals that are older than 2 weeks
+      // NOTE(cont'd): otherwise we'll have too many api calls
+      // TODO(cont'd): 3. build separate functionality (via the graph) that queries for older proposals
+      for (let i = numberOfProposals; i > 0; i--) {
         const proposal = MockGetProposalMetadata(i);
         const isActive = MockGetProposalHasBeenActivated(i);
         const endorsements = MockGetProposalTotalEndorsements(i);
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 2781e4170e..e32ba4d5d8 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -2,10 +2,17 @@ import "./Governance.scss";
 
 import { t } from "@lingui/macro";
 import { Grid, Link } from "@mui/material";
+import { Skeleton } from "@mui/material";
 import { Paper, Proposal, SecondaryButton } from "@olympusdao/component-library";
 import { useMemo, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { Proposal as ProposalType, useProposals } from "src/hooks/useProposals";
+import { useProposal } from "src/hooks/useProposal";
+import {
+  Proposal as ProposalType,
+  useActiveProposal,
+  useGetTotalInstructions,
+  useProposals,
+} from "src/hooks/useProposals";
 
 import { FilterModal } from "./components/FilterModal";
 import { SearchBar } from "./components/SearchBar/SearchBar";
@@ -13,6 +20,9 @@ import { toCapitalCase } from "./helpers";
 
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+  const { data: numberOfProposals = 0 } = useGetTotalInstructions();
+  console.log("number", numberOfProposals);
+  const { data: activeProposal } = useActiveProposal();
   const _useProposals = useProposals({ state: "active" });
   const allProposalsData: ProposalType[] = useMemo(() => {
     if (_useProposals.isLoading || !_useProposals.data) return [];
@@ -28,24 +38,27 @@ export const ProposalsDashboard = () => {
   };
 
   const renderProposals = () => {
-    return allProposalsData.map(proposal => {
-      return (
-        <Grid key={proposal.proposalName} item xs={12}>
-          <Link to={`/governancetest/proposals/${proposal.id}`} component={RouterLink}>
-            <Proposal
-              chipLabel={toCapitalCase(proposal.state)}
-              proposalTitle={proposal.proposalName}
-              publishedDate={new Date(1659389876)}
-              status={proposal.state}
-              voteEndDate={new Date(1659389876)}
-              votesAbstain={0}
-              votesAgainst={proposal.noVotes}
-              votesFor={proposal.yesVotes}
-            />
-          </Link>
-        </Grid>
-      );
-    });
+    for (let i = numberOfProposals; i > numberOfProposals - 10; i--) {
+      return <ProposalContainer instructionsId={i} />;
+    }
+    // return allProposalsData.map(proposal => {
+    //   return (
+    //     <Grid key={proposal.proposalName} item xs={12}>
+    //       <Link to={`/governancetest/proposals/${proposal.id}`} component={RouterLink}>
+    //         <Proposal
+    //           chipLabel={toCapitalCase(proposal.state)}
+    //           proposalTitle={proposal.proposalName}
+    //           publishedDate={new Date(1659389876)}
+    //           status={proposal.state}
+    //           voteEndDate={new Date(1659389876)}
+    //           votesAbstain={0}
+    //           votesAgainst={proposal.noVotes}
+    //           votesFor={proposal.yesVotes}
+    //         />
+    //       </Link>
+    //     </Grid>
+    //   );
+    // });
   };
 
   return (
@@ -64,7 +77,15 @@ export const ProposalsDashboard = () => {
           <SearchBar />
         </Grid>
         <Grid container direction="column" spacing={2}>
-          {renderProposals()}
+          <>
+            {activeProposal && (
+              <ProposalContainer
+                instructionsId={activeProposal?.instructionsId}
+                timeRemaining={activeProposal?.timeRemaining}
+              />
+            )}
+            {renderProposals()}
+          </>
         </Grid>
       </Paper>
 
@@ -72,3 +93,44 @@ export const ProposalsDashboard = () => {
     </div>
   );
 };
+
+const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId: number; timeRemaining?: number }) => {
+  const { data: proposal, isLoading } = useProposal(instructionsId);
+
+  // TODO(appleseed): add timeremaining indicator
+  return (
+    <>
+      {isLoading || !proposal ? (
+        <Grid key={instructionsId} item xs={12}>
+          <Skeleton>
+            <Proposal
+              chipLabel={toCapitalCase("active")}
+              proposalTitle={"proposal.proposalName"}
+              publishedDate={new Date(1659389876)}
+              status={"active"}
+              voteEndDate={new Date(1659389876)}
+              votesAbstain={0}
+              votesAgainst={0}
+              votesFor={0}
+            />
+          </Skeleton>
+        </Grid>
+      ) : (
+        <Grid key={instructionsId} item xs={12}>
+          <Link to={`/governancetest/proposals/${proposal?.id}`} component={RouterLink}>
+            <Proposal
+              chipLabel={toCapitalCase(proposal?.state)}
+              proposalTitle={proposal?.proposalName}
+              publishedDate={new Date(proposal?.submissionTimestamp)}
+              status={proposal?.state}
+              voteEndDate={timeRemaining ? new Date(timeRemaining) : undefined}
+              votesAbstain={0}
+              votesAgainst={proposal?.noVotes}
+              votesFor={proposal?.yesVotes}
+            />
+          </Link>
+        </Grid>
+      )}
+    </>
+  );
+};

From 1cab4614bab66717daa626cce60fbb1ec95435c8 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 3 Aug 2022 13:19:46 -0500
Subject: [PATCH 028/113] update contract parsing for proposals, need metadata
 next

---
 src/hooks/useProposal.ts                      | 46 ++++++++++++++++---
 src/hooks/useProposals.ts                     | 45 ++++++++++++++++--
 src/views/Governance/ProposalsDashboard.tsx   |  6 +--
 .../components/ProposalPage/ProposalPage.tsx  | 19 +++++---
 src/views/Governance/interfaces.ts            |  4 +-
 5 files changed, 98 insertions(+), 22 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index ac3b7ffee6..d024c9abbd 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -8,7 +8,13 @@ import { nonNullable } from "src/helpers/types/nonNullable";
 import { useNetwork } from "wagmi";
 
 /// Import Proposal data type and mock data getters from useProposals
-import { mockGetProposalContent, mockGetProposalState, mockGetProposalURI, Proposal } from "./useProposals";
+import {
+  IAnyProposal,
+  mockGetProposalContent,
+  mockGetProposalURI,
+  parseProposalState,
+  timeRemaining,
+} from "./useProposals";
 
 /**
  * @notice Query key for useProposal which is dependent on instructionsIndex
@@ -42,22 +48,29 @@ export const useProposal = (instructionsIndex: number) => {
   );
   const yesVotes = useDependentQuery("YesVotesForProposal", () => contract.yesVotesForProposal(instructionsIndex));
   const noVotes = useDependentQuery("NoVotesForProposal", () => contract.noVotesForProposal(instructionsIndex));
+  const proposalState = parseProposalState({ isActive });
 
-  const query = useQuery<Proposal, Error>(
+  const query = useQuery<IAnyProposal, Error>(
     queryKey,
     async () => {
-      queryAssertion(metadata && isActive !== undefined && endorsements && yesVotes && noVotes, queryKey);
+      queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes, queryKey);
       /// For the specified proposal index, fetch the relevant data points used in the frontend
       // TODO(appleseed): handle these three
       const proposalURI = mockGetProposalURI("0x4f49502d31000000000000000000000000000000000000000000000000000000");
       const proposalContent = mockGetProposalContent("ipfs://proposalnumberone");
-      const proposalState = mockGetProposalState("0x4f49502d31000000000000000000000000000000000000000000000000000000");
-
+      /**
+       * submissionTimestamp as a Unix Time from the contract
+       */
+      const submissionTimestamp = parseBigNumber(metadata.submissionTimestamp, 0);
+      const unixTimeRemaining = timeRemaining({ state: proposalState, submissionTimestamp });
+      const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : undefined;
       const currentProposal = {
         id: instructionsIndex,
         proposalName: ethers.utils.parseBytes32String(metadata.proposalName),
         proposer: metadata.proposer,
-        submissionTimestamp: parseBigNumber(metadata.submissionTimestamp, 0),
+        // NOTE(appleseed): multiply submissionTimestamp by 1000 to convert to JS Time from Unix Time
+        submissionTimestamp: submissionTimestamp * 1000,
+        timeRemaining: jsTimeRemaining,
         isActive: isActive,
         state: proposalState,
         endorsements: parseBigNumber(endorsements, 0),
@@ -70,9 +83,28 @@ export const useProposal = (instructionsIndex: number) => {
       return currentProposal;
     },
     {
-      enabled: !!metadata && isActive !== undefined && !!endorsements && !!yesVotes && !!noVotes,
+      enabled: !!metadata && !!proposalState && !!endorsements && !!yesVotes && !!noVotes,
     },
   );
 
   return query as typeof query;
 };
+
+/**
+ * submit proposal at:
+ * https://goerli.etherscan.io/address/0xaAd5e6e1362b458E38140B7E8c6d5D71b933a56f#writeContract
+ *
+ * params:
+ * [[2,"0x5a46373152Fe723f052117fdc8E5282677808A70"]]
+ * 0x6d792070726f706f73616c000000000000000000000000000000000000000000
+ *
+ * proposalname (2nd param above):
+ * ethers.utils.formatBytes32String("my proposal name")
+ *
+ * gotcha:
+ * there are rules in Instructions.store() around contract addresses & naming for modules, etc
+ *
+ * deploy a new proposal for the 2nd element of the 1st param:
+ * # from bophades repo
+ * forge create src/policies/Governance.sol:Governance --constructor-args 0x3B294580Fcf1F60B94eca4f4CE78A2f52D23cC83 --rpc-url https://eth-goerli.g.alchemy.com/v2/_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC --private-key yours
+ */
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 37fd6030af..96e2fcd85e 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -29,6 +29,11 @@ export interface Proposal {
   content: string;
 }
 
+export interface IAnyProposal extends Omit<Proposal, "isActive"> {
+  timeRemaining?: number | undefined;
+  isActive: boolean | undefined;
+}
+
 export interface IActiveProposal {
   instructionsId: number;
   activationTimestamp: number;
@@ -135,10 +140,43 @@ export const mockProposalState: { [key: string]: PStatus } = {
  * returns a unix time differential (in seconds)
  * @param numDays number of days you want
  */
-const unixDays = (numDays: number) => {
+export const unixDays = (numDays: number) => {
   return numDays * 24 * 60 * 60;
 };
 
+/**
+ * timeRemaining as a Unix Time from the contract
+ * @param submissionTimestamp should be a Unix Time (1/1000 of JS Time)
+ * @returns a Unix Time unless the proposal is not active or endorsements status, then returns undefined (no expiration)
+ */
+export const timeRemaining = ({
+  state,
+  submissionTimestamp,
+}: {
+  state: PStatus;
+  submissionTimestamp: number;
+}): number | undefined => {
+  if (state === "active") {
+    // TODO(appleseed): setup a config to make these duration requirements (from the contract) easily modifiable
+    return submissionTimestamp + unixDays(7) - Date.now() / 1000;
+  } else if (state === "endorsement") {
+    return submissionTimestamp + unixDays(14) - Date.now() / 1000;
+  } else {
+    return undefined;
+  }
+};
+
+export const parseProposalState = ({ isActive }: { isActive: boolean | undefined }): PStatus => {
+  switch (isActive) {
+    case true:
+      return "active";
+    case false:
+      return "endorsement";
+    default:
+      return "discussion";
+  }
+};
+
 export const useActiveProposal = () => {
   const { chain = { id: 1 } } = useNetwork();
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
@@ -148,11 +186,12 @@ export const useActiveProposal = () => {
      * number of seconds remaining in proposal
      */
     const activationTimestamp = parseBigNumber(activeProposal.activationTimestamp, 0);
-    const timeRemaining = activationTimestamp + unixDays(14) - Date.now() / 1000;
+    const unixTimeRemaining = timeRemaining({ state: "active", submissionTimestamp: activationTimestamp });
+    const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : 0;
     return {
       instructionsId: parseBigNumber(activeProposal.instructionsId, 0),
       activationTimestamp,
-      timeRemaining,
+      timeRemaining: jsTimeRemaining,
     };
   });
 };
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index e32ba4d5d8..79216d3f4c 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -106,9 +106,9 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
             <Proposal
               chipLabel={toCapitalCase("active")}
               proposalTitle={"proposal.proposalName"}
-              publishedDate={new Date(1659389876)}
+              publishedDate={new Date()}
               status={"active"}
-              voteEndDate={new Date(1659389876)}
+              voteEndDate={new Date()}
               votesAbstain={0}
               votesAgainst={0}
               votesFor={0}
@@ -123,7 +123,7 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
               proposalTitle={proposal?.proposalName}
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
-              voteEndDate={timeRemaining ? new Date(timeRemaining) : undefined}
+              voteEndDate={timeRemaining ? new Date(timeRemaining) : new Date()}
               votesAbstain={0}
               votesAgainst={proposal?.noVotes}
               votesFor={proposal?.yesVotes}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 8f76d32903..79b588d5c7 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -7,8 +7,9 @@ import { useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { shorten } from "src/helpers";
+import { prettifySeconds } from "src/helpers/timeUtil";
 import { useProposal } from "src/hooks/useProposal";
-import { Proposal as ProposalType } from "src/hooks/useProposals";
+import { IAnyProposal, PStatus } from "src/hooks/useProposals";
 
 import { NULL_PROPOSAL } from "../../constants";
 import { toCapitalCase } from "../../helpers";
@@ -28,7 +29,7 @@ export const ProposalPage = () => {
   }, [passedId]);
 
   const _useProposal = useProposal(proposalId);
-  const proposal: ProposalType = useMemo(() => {
+  const proposal: IAnyProposal = useMemo(() => {
     if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
     return _useProposal.data;
   }, [_useProposal]);
@@ -43,7 +44,7 @@ export const ProposalPage = () => {
   });
   const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
 
-  const mapStatus = (status: string) => {
+  const mapStatus = (status: PStatus) => {
     switch (status) {
       case "active":
         return "success" as OHMChipProps["template"];
@@ -78,10 +79,14 @@ export const ProposalPage = () => {
           </Grid>
           <Grid item>
             <Box pl="9px" display="flex">
-              <Icon name="timeLeft" style={{ fontSize: "18px", fill: theme.colors.gray[90] }} />
-              <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                Ends in 12 hours
-              </Typography>
+              {proposal.timeRemaining && (
+                <>
+                  <Icon name="timeLeft" style={{ fontSize: "18px", fill: theme.colors.gray[90] }} />
+                  <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+                    {`Ends in ${prettifySeconds(proposal.timeRemaining / 1000)}`}
+                  </Typography>
+                </>
+              )}
             </Box>
           </Grid>
         </Grid>
diff --git a/src/views/Governance/interfaces.ts b/src/views/Governance/interfaces.ts
index 8aef786ad7..20d720af15 100644
--- a/src/views/Governance/interfaces.ts
+++ b/src/views/Governance/interfaces.ts
@@ -1,5 +1,5 @@
-import { Proposal as ProposalType } from "src/hooks/useProposals";
+import { IAnyProposal } from "src/hooks/useProposals";
 
 export type ProposalTabProps = {
-  proposal: ProposalType;
+  proposal: IAnyProposal;
 };

From 85c32ad725430f2b5d5789ed5c36b2a333b0d763 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 3 Aug 2022 14:09:14 -0500
Subject: [PATCH 029/113] fix loading

---
 src/hooks/useProposals.ts                   |  7 ++
 src/views/Governance/ProposalsDashboard.tsx | 90 +++++++++------------
 2 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 96e2fcd85e..f2307b742c 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -177,10 +177,17 @@ export const parseProposalState = ({ isActive }: { isActive: boolean | undefined
   }
 };
 
+/**
+ * @NOTE (appleseed) - this may be unnecessary (it might repeat the same proposal as `renderProposals` in `<ProposalsDashboard>`)
+ * @returns the activeProposal (without metadata)
+ */
 export const useActiveProposal = () => {
   const { chain = { id: 1 } } = useNetwork();
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
   return useQuery<IActiveProposal, Error>(["getActiveProposal"], async () => {
+    /**
+     * @NOTE `getActiveProposal` returns [0, 0] when nothing is active
+     */
     const activeProposal = await contract.getActiveProposal();
     /**
      * number of seconds remaining in proposal
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 79216d3f4c..6ecf3df68e 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -4,15 +4,10 @@ import { t } from "@lingui/macro";
 import { Grid, Link } from "@mui/material";
 import { Skeleton } from "@mui/material";
 import { Paper, Proposal, SecondaryButton } from "@olympusdao/component-library";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { useProposal } from "src/hooks/useProposal";
-import {
-  Proposal as ProposalType,
-  useActiveProposal,
-  useGetTotalInstructions,
-  useProposals,
-} from "src/hooks/useProposals";
+import { useActiveProposal, useGetTotalInstructions } from "src/hooks/useProposals";
 
 import { FilterModal } from "./components/FilterModal";
 import { SearchBar } from "./components/SearchBar/SearchBar";
@@ -20,14 +15,9 @@ import { toCapitalCase } from "./helpers";
 
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-  const { data: numberOfProposals = 0 } = useGetTotalInstructions();
-  console.log("number", numberOfProposals);
+  const { data: numberOfProposals, isLoading } = useGetTotalInstructions();
+  console.log("numberOfProposals", numberOfProposals);
   const { data: activeProposal } = useActiveProposal();
-  const _useProposals = useProposals({ state: "active" });
-  const allProposalsData: ProposalType[] = useMemo(() => {
-    if (_useProposals.isLoading || !_useProposals.data) return [];
-    return _useProposals.data;
-  }, [_useProposals]);
 
   const handleFilterClick = () => {
     setIsFilterModalOpen(true);
@@ -38,27 +28,18 @@ export const ProposalsDashboard = () => {
   };
 
   const renderProposals = () => {
-    for (let i = numberOfProposals; i > numberOfProposals - 10; i--) {
-      return <ProposalContainer instructionsId={i} />;
+    const coercedNumber = Number(numberOfProposals);
+    // TODO(appleseed): properly handle 0 proposals
+    if (numberOfProposals && coercedNumber > 0) {
+      // TODO(appleseed): just parsing last 10 proposals right now
+      const proposals = [];
+      for (let i = coercedNumber; i > Math.max(coercedNumber - 10, 0); i--) {
+        console.log("redner", i, i - 1, Math.max(coercedNumber - 10, 0));
+        proposals.push(<ProposalContainer instructionsId={i} />);
+      }
+      return proposals;
     }
-    // return allProposalsData.map(proposal => {
-    //   return (
-    //     <Grid key={proposal.proposalName} item xs={12}>
-    //       <Link to={`/governancetest/proposals/${proposal.id}`} component={RouterLink}>
-    //         <Proposal
-    //           chipLabel={toCapitalCase(proposal.state)}
-    //           proposalTitle={proposal.proposalName}
-    //           publishedDate={new Date(1659389876)}
-    //           status={proposal.state}
-    //           voteEndDate={new Date(1659389876)}
-    //           votesAbstain={0}
-    //           votesAgainst={proposal.noVotes}
-    //           votesFor={proposal.yesVotes}
-    //         />
-    //       </Link>
-    //     </Grid>
-    //   );
-    // });
+    return <ProposalSkeleton />;
   };
 
   return (
@@ -78,13 +59,13 @@ export const ProposalsDashboard = () => {
         </Grid>
         <Grid container direction="column" spacing={2}>
           <>
-            {activeProposal && (
+            {Number(activeProposal?.activationTimestamp) > 0 && (
               <ProposalContainer
-                instructionsId={activeProposal?.instructionsId}
-                timeRemaining={activeProposal?.timeRemaining}
+                instructionsId={Number(activeProposal?.instructionsId)}
+                timeRemaining={Number(activeProposal?.timeRemaining)}
               />
             )}
-            {renderProposals()}
+            {isLoading ? <ProposalSkeleton /> : renderProposals()}
           </>
         </Grid>
       </Paper>
@@ -97,24 +78,10 @@ export const ProposalsDashboard = () => {
 const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId: number; timeRemaining?: number }) => {
   const { data: proposal, isLoading } = useProposal(instructionsId);
 
-  // TODO(appleseed): add timeremaining indicator
   return (
     <>
       {isLoading || !proposal ? (
-        <Grid key={instructionsId} item xs={12}>
-          <Skeleton>
-            <Proposal
-              chipLabel={toCapitalCase("active")}
-              proposalTitle={"proposal.proposalName"}
-              publishedDate={new Date()}
-              status={"active"}
-              voteEndDate={new Date()}
-              votesAbstain={0}
-              votesAgainst={0}
-              votesFor={0}
-            />
-          </Skeleton>
-        </Grid>
+        <ProposalSkeleton id={instructionsId} />
       ) : (
         <Grid key={instructionsId} item xs={12}>
           <Link to={`/governancetest/proposals/${proposal?.id}`} component={RouterLink}>
@@ -134,3 +101,20 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
     </>
   );
 };
+
+export const ProposalSkeleton = ({ id = 0 }: { id?: number }) => {
+  return (
+    <Skeleton>
+      <Proposal
+        chipLabel={toCapitalCase("active")}
+        proposalTitle={"proposal.proposalName"}
+        publishedDate={new Date()}
+        status={"active"}
+        voteEndDate={new Date()}
+        votesAbstain={0}
+        votesAgainst={0}
+        votesFor={0}
+      />
+    </Skeleton>
+  );
+};

From 9cc678460b03a34056b48386c2ef73075d626b48 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 3 Aug 2022 16:58:37 -0500
Subject: [PATCH 030/113] proposal content.metadata parsing

---
 src/hooks/useProposal.ts                      | 28 +++++++++----------
 src/hooks/useProposals.ts                     | 27 ++++++++++++++++++
 src/views/Governance/ProposalsDashboard.tsx   |  2 --
 .../components/PollDetailsTab.tsx             |  4 ++-
 4 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index d024c9abbd..c3e8aadaa7 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -8,13 +8,7 @@ import { nonNullable } from "src/helpers/types/nonNullable";
 import { useNetwork } from "wagmi";
 
 /// Import Proposal data type and mock data getters from useProposals
-import {
-  IAnyProposal,
-  mockGetProposalContent,
-  mockGetProposalURI,
-  parseProposalState,
-  timeRemaining,
-} from "./useProposals";
+import { IAnyProposal, parseProposalContent, parseProposalState, timeRemaining } from "./useProposals";
 
 /**
  * @notice Query key for useProposal which is dependent on instructionsIndex
@@ -48,16 +42,22 @@ export const useProposal = (instructionsIndex: number) => {
   );
   const yesVotes = useDependentQuery("YesVotesForProposal", () => contract.yesVotesForProposal(instructionsIndex));
   const noVotes = useDependentQuery("NoVotesForProposal", () => contract.noVotesForProposal(instructionsIndex));
+  // TODO(appleseed): need proposalURI_ functionality on deployment
+  // TODO(appleseed): upload proposal content to ipfs as proper json!!
+  const proposalURI = "ipfs://bafkreidmgcatj7skn6ufob5stdc7hnt76nvyb7dpc62l72fhrbluiychly";
+  const proposalContent = useDependentQuery("ProposalContent", () => parseProposalContent({ uri: proposalURI }));
   const proposalState = parseProposalState({ isActive });
+  // const proposalContent = mockGetProposalContent(
+  //   "ipfs://bafkreibazhtsv5a7sheab5wxbuclgxqges42vvd2tbbeiw5q2udzjfo64i",
+  // );
 
   const query = useQuery<IAnyProposal, Error>(
     queryKey,
     async () => {
-      queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes, queryKey);
+      queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes && proposalContent, queryKey);
       /// For the specified proposal index, fetch the relevant data points used in the frontend
-      // TODO(appleseed): handle these three
-      const proposalURI = mockGetProposalURI("0x4f49502d31000000000000000000000000000000000000000000000000000000");
-      const proposalContent = mockGetProposalContent("ipfs://proposalnumberone");
+      const content = proposalContent.description;
+      const discussionURL = proposalContent.discussion;
       /**
        * submissionTimestamp as a Unix Time from the contract
        */
@@ -76,14 +76,14 @@ export const useProposal = (instructionsIndex: number) => {
         endorsements: parseBigNumber(endorsements, 0),
         yesVotes: parseBigNumber(yesVotes, 0),
         noVotes: parseBigNumber(noVotes, 0),
-        uri: proposalURI,
-        content: proposalContent,
+        uri: discussionURL,
+        content,
       };
 
       return currentProposal;
     },
     {
-      enabled: !!metadata && !!proposalState && !!endorsements && !!yesVotes && !!noVotes,
+      enabled: !!metadata && !!proposalState && !!endorsements && !!yesVotes && !!noVotes && !!proposalContent,
     },
   );
 
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index f2307b742c..b38991727a 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,3 +1,4 @@
+import axios from "axios";
 import { ethers } from "ethers";
 import { useQuery, UseQueryResult } from "react-query";
 import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
@@ -177,6 +178,32 @@ export const parseProposalState = ({ isActive }: { isActive: boolean | undefined
   }
 };
 
+/**
+ * expects a uri that returns json metadata with three keys:
+ * - name {string}
+ * - description {string}
+ * - discussion {string} - url link to discussion
+ */
+export const parseProposalContent = async ({ uri }: { uri: string }) => {
+  let readURI = uri;
+  if (~uri.indexOf("ipfs:/")) {
+    readURI = `https://ipfs.io/ipfs/${uri.replace("ipfs:/", "")}`;
+  }
+  try {
+    const res = await axios.get(readURI);
+    console.log("result", res);
+    console.log(res.data, res.data["description"], res.data.discussion);
+    return {
+      name: res.data["name"] as string,
+      description: res.data["description"] as string,
+      discussion: res.data["discussion"] as string,
+    };
+  } catch (error) {
+    // handle error
+    console.log(error);
+  }
+};
+
 /**
  * @NOTE (appleseed) - this may be unnecessary (it might repeat the same proposal as `renderProposals` in `<ProposalsDashboard>`)
  * @returns the activeProposal (without metadata)
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 6ecf3df68e..1fd816ec0d 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -16,7 +16,6 @@ import { toCapitalCase } from "./helpers";
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const { data: numberOfProposals, isLoading } = useGetTotalInstructions();
-  console.log("numberOfProposals", numberOfProposals);
   const { data: activeProposal } = useActiveProposal();
 
   const handleFilterClick = () => {
@@ -34,7 +33,6 @@ export const ProposalsDashboard = () => {
       // TODO(appleseed): just parsing last 10 proposals right now
       const proposals = [];
       for (let i = coercedNumber; i > Math.max(coercedNumber - 10, 0); i--) {
-        console.log("redner", i, i - 1, Math.max(coercedNumber - 10, 0));
         proposals.push(<ProposalContainer instructionsId={i} />);
       }
       return proposals;
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index b2616b0a76..6d5cd3768b 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -9,7 +9,9 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
         <Typography variant="body1">{proposal.content}</Typography>
       </Grid>
       <Grid className="discussion-button" item>
-        <TextButton endIconName="arrow-up">Discussion</TextButton>
+        <TextButton href={proposal.uri} endIconName="arrow-up">
+          Discussion
+        </TextButton>
       </Grid>
     </Grid>
   );

From 3776bb5b7184ddc4209fb85e51b6a467967de3eb Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 3 Aug 2022 17:21:24 -0500
Subject: [PATCH 031/113] markdown parsing

---
 .../ProposalPage/components/PollDetailsTab.tsx      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 6d5cd3768b..330d3e4c98 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,12 +1,21 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid } from "@mui/material";
 import { TextButton } from "@olympusdao/component-library";
+import MarkdownIt from "markdown-it";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
+  const getRenderedDetails = () => {
+    console.log(proposal?.content);
+    return {
+      __html: MarkdownIt({ linkify: true, typographer: true }).render(proposal ? proposal.content : ""),
+    };
+  };
+
   return (
     <Grid container direction="column">
       <Grid item>
-        <Typography variant="body1">{proposal.content}</Typography>
+        {/* TODO(appleseed): ... verify this is ok, XSS security wise */}
+        <div dangerouslySetInnerHTML={getRenderedDetails()} />
       </Grid>
       <Grid className="discussion-button" item>
         <TextButton href={proposal.uri} endIconName="arrow-up">

From a4180b249ddf136e661c0763eaec2972f29fcac3 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 08:43:17 -0500
Subject: [PATCH 032/113] fix image overflow issue

---
 package.json                                  |   2 +-
 .../components/PollDetailsTab.tsx             |  28 +-
 yarn.lock                                     | 540 ++++++++++++++++--
 3 files changed, 523 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 7be0971ecc..4ea5f266f6 100644
--- a/package.json
+++ b/package.json
@@ -53,13 +53,13 @@
     "ethers": "^5.6.9",
     "graphql": "^15.8.0",
     "graphql-request": "^4.3.0",
-    "markdown-it": "^13.0.1",
     "react": "17.0.2",
     "react-countdown": "^2.3.2",
     "react-dom": "17.0.2",
     "react-ga": "^3.3.1",
     "react-ga4": "^1.4.1",
     "react-is": "^18.2.0",
+    "react-markdown": "^8.0.3",
     "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 330d3e4c98..e850bbd9f6 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,22 +1,26 @@
-import { Grid } from "@mui/material";
+import { Grid, styled } from "@mui/material";
 import { TextButton } from "@olympusdao/component-library";
-import MarkdownIt from "markdown-it";
+import ReactMarkdown from "react-markdown";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
-  const getRenderedDetails = () => {
-    console.log(proposal?.content);
-    return {
-      __html: MarkdownIt({ linkify: true, typographer: true }).render(proposal ? proposal.content : ""),
-    };
-  };
+  const StyledGridItem = styled(Grid)(() => ({
+    "p > img": {
+      maxWidth: "100%",
+    },
+  }));
+  // const getRenderedDetails = () => {
+  //   console.log(proposal?.content);
+  //   return {
+  //     __html: MarkdownIt({ linkify: true, typographer: true }).render(proposal ? proposal.content : ""),
+  //   };
+  // };
 
   return (
     <Grid container direction="column">
-      <Grid item>
-        {/* TODO(appleseed): ... verify this is ok, XSS security wise */}
-        <div dangerouslySetInnerHTML={getRenderedDetails()} />
-      </Grid>
+      <StyledGridItem item>
+        <ReactMarkdown children={proposal.content} />
+      </StyledGridItem>
       <Grid className="discussion-button" item>
         <TextButton href={proposal.uri} endIconName="arrow-up">
           Discussion
diff --git a/yarn.lock b/yarn.lock
index 549be1f4ac..7177d97ce4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3321,6 +3321,13 @@
   resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.1.tgz#0902ee5849b89a45390c2c9dccbb536a75a88511"
   integrity sha512-JQ+sPiPlRUHmlL4e3DBUNbxVEb6p7dis78/uSDbQpkeCKVoepChZMWGPIVA2JIH0ylfkA9S+TZUdShlgDpFKrw==
 
+"@types/debug@^4.0.0":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
+  integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==
+  dependencies:
+    "@types/ms" "*"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -3409,6 +3416,13 @@
   dependencies:
     graphql "*"
 
+"@types/hast@^2.0.0":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/history@^4.7.11":
   version "4.7.11"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
@@ -3525,7 +3539,14 @@
     "@types/react" "*"
     "@types/react-addons-linked-state-mixin" "*"
 
-"@types/mdurl@*":
+"@types/mdast@^3.0.0":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
+  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/mdurl@*", "@types/mdurl@^1.0.0":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
   integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
@@ -3540,6 +3561,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
 "@types/node@*":
   version "17.0.14"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.14.tgz#33b9b94f789a8fedd30a68efdbca4dbb06b61f20"
@@ -3577,7 +3603,7 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/prop-types@^15.7.5":
+"@types/prop-types@^15.0.0", "@types/prop-types@^15.7.5":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -3741,6 +3767,11 @@
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
+"@types/unist@*", "@types/unist@^2.0.0":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
 "@types/use-sync-external-store@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
@@ -5063,6 +5094,11 @@ backoff@^2.5.0:
   dependencies:
     precond "0.2"
 
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -5486,6 +5522,11 @@ char-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
 charcodes@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
@@ -5759,6 +5800,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
+  integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
+
 command-exists@^1.2.8:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.9.tgz#c50725af3808c8ab0260fd60b01fbfa25b954f69"
@@ -6364,7 +6410,7 @@ debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -6405,6 +6451,13 @@ decimal.js@^10.2.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -6504,6 +6557,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -6581,6 +6639,11 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
+diff@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+
 dijkstrajs@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
@@ -6874,11 +6937,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@~3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
-  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
-
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -7772,7 +7830,7 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@~3.0.2:
+extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -8609,6 +8667,11 @@ hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-util-whitespace@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz#4fc1086467cc1ef5ba20673cb6b03cec3a970f1c"
+  integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==
+
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -8936,6 +8999,11 @@ ini@^1.3.4, ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 inquirer@^7.3.3:
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
@@ -9051,6 +9119,11 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
 is-callable@^1.1.4, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
@@ -9208,6 +9281,11 @@ is-plain-obj@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
   integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
 
+is-plain-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
 is-plain-object@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -10638,6 +10716,11 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+kleur@^4.0.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
 klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
@@ -10830,13 +10913,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-linkify-it@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
-  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
-  dependencies:
-    uc.micro "^1.0.1"
-
 lint-staged@^13.0.3:
   version "13.0.3"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.3.tgz#d7cdf03a3830b327a2b63c6aec953d71d9dc48c6"
@@ -11056,17 +11132,6 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
-markdown-it@^13.0.1:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
-  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
-  dependencies:
-    argparse "^2.0.1"
-    entities "~3.0.1"
-    linkify-it "^4.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
 match-sorter@^6.0.2:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
@@ -11096,6 +11161,55 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdast-util-definitions@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz#2c1d684b28e53f84938bb06317944bee8efa79db"
+  integrity sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-from-markdown@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz#84df2924ccc6c995dec1e2368b2b208ad0a76268"
+  integrity sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
+mdast-util-to-hast@^12.1.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.2.0.tgz#4dbff7ab2b20b8d12fc8fe98bf804d97e7358cbf"
+  integrity sha512-YDwT5KhGzLgPpSnQhAlK1+WpCW4gsPmNNAxUNMkMTDhxQyPp2eX86WOelnKnLKEvSpfxqJbPbInHFkefXZBhEA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    "@types/mdurl" "^1.0.0"
+    mdast-util-definitions "^5.0.0"
+    mdurl "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    trim-lines "^3.0.0"
+    unist-builder "^3.0.0"
+    unist-util-generated "^2.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-to-string@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
+  integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -11106,7 +11220,7 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdurl@^1.0.1:
+mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@@ -11212,6 +11326,201 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
+micromark-core-commonmark@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad"
+  integrity sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-factory-destination "^1.0.0"
+    micromark-factory-label "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-factory-title "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-html-tag-name "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromark-factory-destination@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz#fef1cb59ad4997c496f887b6977aa3034a5a277e"
+  integrity sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.0.2.tgz#6be2551fa8d13542fcbbac478258fb7a20047137"
+  integrity sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-space@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz#cebff49968f2b9616c0fcb239e96685cb9497633"
+  integrity sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.0.2.tgz#7e09287c3748ff1693930f176e1c4a328382494f"
+  integrity sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-whitespace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz#e991e043ad376c1ba52f4e49858ce0794678621c"
+  integrity sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.1.0.tgz#d97c54d5742a0d9611a68ca0cd4124331f264d86"
+  integrity sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz#5b40d83f3d53b84c4c6bce30ed4257e9a4c79d06"
+  integrity sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz#cbd7b447cb79ee6997dd274a46fc4eb806460a20"
+  integrity sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz#91418e1e74fb893e3628b8d496085639124ff3d5"
+  integrity sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz#dcc85f13b5bd93ff8d2868c3dba28039d490b946"
+  integrity sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.0.2.tgz#942252ab7a76dec2dbf089cc32505ee2bc3acf02"
+  integrity sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.0.1.tgz#2c1c22d3800870ad770ece5686ebca5920353383"
+  integrity sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==
+
+micromark-util-html-tag-name@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz#eb227118befd51f48858e879b7a419fc0df20497"
+  integrity sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz#4a3539cb8db954bbec5203952bfe8cedadae7828"
+  integrity sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz#a7c363f49a0162e931960c44f3127ab58f031d88"
+  integrity sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.0.0.tgz#27dc875397cd15102274c6c6da5585d34d4f12b2"
+  integrity sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz#ff6f1af6ac836f8bfdbf9b02f40431760ad89105"
+  integrity sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz#b90344db62042ce454f351cf0bebcc0a6da4920e"
+  integrity sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.0.2.tgz#f4220fdb319205812f99c40f8c87a9be83eded20"
+  integrity sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==
+
+micromark@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.0.10.tgz#1eac156f0399d42736458a14b0ca2d86190b457c"
+  integrity sha512-ryTDy6UUunOXy2HPjelppgJ2sNfcPz1pLlMdA6Rz9jPzhLikWXv/irpWV/I2jd68Uhmny7hHxAlAhk4+vWggpg==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    micromark-core-commonmark "^1.0.1"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
 micromatch@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
@@ -11390,6 +11699,11 @@ mocha@^9.2.0:
     yargs-parser "20.2.4"
     yargs-unparser "2.0.0"
 
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -12730,7 +13044,7 @@ prompts@2.4.2, prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -12739,6 +13053,11 @@ prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^6.0.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.1.1.tgz#5ca85510a3019726cb9afed4197b7b8ac5926a22"
+  integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -13027,6 +13346,27 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-markdown@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.3.tgz#e8aba0d2f5a1b2124d476ee1fff9448a2f57e4b3"
+  integrity sha512-We36SfqaKoVNpN1QqsZwWSv/OZt5J15LNgTLWynwAN5b265hrQrsjMtlRNwUvS+YyR3yDM8HpTNc4pK9H/Gc0A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/prop-types" "^15.0.0"
+    "@types/unist" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    prop-types "^15.0.0"
+    property-information "^6.0.0"
+    react-is "^18.0.0"
+    remark-parse "^10.0.0"
+    remark-rehype "^10.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.3.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+    vfile "^5.0.0"
+
 react-query@^3.39.1:
   version "3.39.1"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.1.tgz#3876c0fdac7a3b5a84e195534e5fa8fbdd628847"
@@ -13445,6 +13785,25 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-parse@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
+  integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark-rehype@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
+  integrity sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-hast "^12.1.0"
+    unified "^10.0.0"
+
 remove-accents@0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
@@ -13690,6 +14049,13 @@ rxjs@^7.1.0, rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
+sade@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -14143,6 +14509,11 @@ sourcemap-codec@^1.4.4:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+space-separated-tokens@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
+  integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
+
 spawnd@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/spawnd/-/spawnd-6.0.2.tgz#a2631cab24ce5e3525e720af4058f10a0905147c"
@@ -14461,6 +14832,13 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@@ -14783,6 +15161,16 @@ tree-kill@^1.2.2:
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
+trough@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
+  integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
+
 "true-case-path@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-2.2.1.tgz#c5bf04a5bbec3fd118be4084461b3a27c4d796bf"
@@ -14980,11 +15368,6 @@ typical@^5.2.0:
   resolved "https://registry.yarnpkg.com/typical/-/typical-5.2.0.tgz#4daaac4f2b5315460804f0acf6cb69c52bb93066"
   integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==
 
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -15041,6 +15424,19 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
   integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
+unified@^10.0.0:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+  integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    bail "^2.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^5.0.0"
+
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
@@ -15048,6 +15444,54 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
+unist-builder@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-3.0.0.tgz#728baca4767c0e784e1e64bb44b5a5a753021a04"
+  integrity sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-generated@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.0.tgz#86fafb77eb6ce9bfa6b663c3f5ad4f8e56a60113"
+  integrity sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==
+
+unist-util-is@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.1.1.tgz#e8aece0b102fa9bc097b0fef8f870c496d4a6236"
+  integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
+
+unist-util-position@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.3.tgz#5290547b014f6222dff95c48d5c3c13a88fadd07"
+  integrity sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-stringify-position@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.2.tgz#5c6aa07c90b1deffd9153be170dce628a869a447"
+  integrity sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-visit-parents@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.0.tgz#44bbc5d25f2411e7dfc5cecff12de43296aa8521"
+  integrity sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
+  integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
 universalify@^0.1.0, universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -15171,6 +15615,16 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uvu@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -15213,6 +15667,24 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-message@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.2.tgz#a2908f64d9e557315ec9d7ea3a910f658ac05f7d"
+  integrity sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+
+vfile@^5.0.0:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.4.tgz#bbb8c96b956693bbf70b2c67fdb5781dff769b93"
+  integrity sha512-KI+7cnst03KbEyN1+JE504zF5bJBZa+J+CrevLeyIMq0aPU681I2rQ5p4PlnQ6exFtWiUrg26QUdFMnAKR6PIw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
 void-elements@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"

From fc829405c4ccf0cf8bd9b9f03579893245bcb906 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 08:43:52 -0500
Subject: [PATCH 033/113] remove unused code

---
 .../components/ProposalPage/components/PollDetailsTab.tsx   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index e850bbd9f6..049b2afa7a 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -9,12 +9,6 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
       maxWidth: "100%",
     },
   }));
-  // const getRenderedDetails = () => {
-  //   console.log(proposal?.content);
-  //   return {
-  //     __html: MarkdownIt({ linkify: true, typographer: true }).render(proposal ? proposal.content : ""),
-  //   };
-  // };
 
   return (
     <Grid container direction="column">

From db24980971a6e77027485858ec9e7b8293721eb3 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 08:46:58 -0500
Subject: [PATCH 034/113] temp add back as other components are using it

---
 package.json |  1 +
 yarn.lock    | 30 +++++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4ea5f266f6..cffe702afa 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "react-ga4": "^1.4.1",
     "react-is": "^18.2.0",
     "react-markdown": "^8.0.3",
+    "markdown-it": "^13.0.1",
     "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
diff --git a/yarn.lock b/yarn.lock
index 7177d97ce4..9feded97cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6937,6 +6937,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -10913,6 +10918,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^13.0.3:
   version "13.0.3"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.3.tgz#d7cdf03a3830b327a2b63c6aec953d71d9dc48c6"
@@ -11132,6 +11144,17 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 match-sorter@^6.0.2:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
@@ -11220,7 +11243,7 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdurl@^1.0.0:
+mdurl@^1.0.0, mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@@ -15368,6 +15391,11 @@ typical@^5.2.0:
   resolved "https://registry.yarnpkg.com/typical/-/typical-5.2.0.tgz#4daaac4f2b5315460804f0acf6cb69c52bb93066"
   integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"

From ca985e8ff253d58c786686a99a0a7825a090abcb Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 09:03:23 -0500
Subject: [PATCH 035/113] a tags should use mui link component to receive
 styling

---
 .../ProposalPage/components/PollDetailsTab.tsx           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 049b2afa7a..c589d5f60b 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,4 +1,4 @@
-import { Grid, styled } from "@mui/material";
+import { Grid, Link, styled } from "@mui/material";
 import { TextButton } from "@olympusdao/component-library";
 import ReactMarkdown from "react-markdown";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
@@ -13,7 +13,12 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
   return (
     <Grid container direction="column">
       <StyledGridItem item>
-        <ReactMarkdown children={proposal.content} />
+        <ReactMarkdown
+          components={{
+            a: Link,
+          }}
+          children={proposal.content}
+        />
       </StyledGridItem>
       <Grid className="discussion-button" item>
         <TextButton href={proposal.uri} endIconName="arrow-up">

From b5ad8f90ba789102df49e98cb60495859a5321ac Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 4 Aug 2022 16:30:45 -0500
Subject: [PATCH 036/113] web3Storage functionality, need to tie to form

---
 .env.example                                  |    5 +-
 package.json                                  |    3 +-
 src/helpers/Web3Storage.ts                    |   33 +
 .../environment/Environment/Environment.ts    |    7 +
 src/hooks/useProposal.ts                      |    4 +-
 src/hooks/useProposals.ts                     |   23 +-
 .../CreateProposal/CreateProposal.tsx         |    4 +-
 .../CreateProposal/components/TextEntry.tsx   |    3 +-
 .../components/ProposalPage/ProposalPage.scss |    4 +
 .../components/ProposalPage/ProposalPage.tsx  |   18 +-
 yarn.lock                                     | 1071 ++++++++++++++++-
 11 files changed, 1139 insertions(+), 36 deletions(-)
 create mode 100644 src/helpers/Web3Storage.ts

diff --git a/.env.example b/.env.example
index c8898e7e88..41c39dde3c 100644
--- a/.env.example
+++ b/.env.example
@@ -40,4 +40,7 @@ REACT_APP_ARBITRUM_NODE_URL=""
 REACT_APP_ARBITRUM_TESTNET_NODE_URL=""
 
 REACT_APP_AVALANCHE_NODE_URL=""
-REACT_APP_AVALANCHE_TESTNET_NODE_URL=""
\ No newline at end of file
+REACT_APP_AVALANCHE_TESTNET_NODE_URL=""
+
+# Optional - for On-Chain Governance - get from https://web3.storage/tokens/
+REACT_APP_WEB3_STORAGE_KEY=""
\ No newline at end of file
diff --git a/package.json b/package.json
index cffe702afa..40b7245690 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,8 @@
     "react-uid": "^2.3.2",
     "recharts": "^2.1.12",
     "typescript": "^4.7.4",
-    "wagmi": "^0.5.6"
+    "wagmi": "^0.5.6",
+    "web3.storage": "^4.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
diff --git a/src/helpers/Web3Storage.ts b/src/helpers/Web3Storage.ts
new file mode 100644
index 0000000000..6c796ea22c
--- /dev/null
+++ b/src/helpers/Web3Storage.ts
@@ -0,0 +1,33 @@
+import { IProposalContent } from "src/hooks/useProposals";
+import { Filelike, Web3Storage } from "web3.storage";
+
+import { Environment } from "./environment/Environment/Environment";
+
+/**
+ * uploads a given file to Web3.Storage with the API Key
+ */
+const uploadToIPFS = async (files: Iterable<Filelike>) => {
+  const accessToken = Environment.getWeb3StorageKey();
+  if (accessToken) {
+    // NOTE(appleseed): the below endpoint is required in typescript, it is simply the default from: https://github.com/web3-storage/web3.storage/blob/main/packages/client/src/lib.js#L92
+    const client = new Web3Storage({ token: accessToken, endpoint: new URL("https://api.web3.storage") });
+    const cid = await client.put(files);
+    console.log("stored files with cid:", cid);
+    return cid;
+  }
+};
+
+/**
+ * expects a js object, turns it into a json file
+ * @returns an Iterable<Filelike>
+ */
+const makeJsonFile = (object: IProposalContent): Iterable<Filelike> => {
+  // You can create File objects from a Blob of binary data
+  // see: https://developer.mozilla.org/en-US/docs/Web/API/Blob
+  // Here we're just storing a JSON object, but you can store images,
+  // audio, or whatever you want!
+  const blob = new Blob([JSON.stringify(object)], { type: "application/json" });
+
+  const files = [new File([blob], "proposal.json")];
+  return files;
+};
diff --git a/src/helpers/environment/Environment/Environment.ts b/src/helpers/environment/Environment/Environment.ts
index a5d3e3984b..1d70cae01a 100644
--- a/src/helpers/environment/Environment/Environment.ts
+++ b/src/helpers/environment/Environment/Environment.ts
@@ -46,6 +46,13 @@ export class Environment {
       fallback: "96e0cc51-a62e-42ca-acee-910ea7d2a241",
     });
 
+  public static getWeb3StorageKey = () =>
+    this._get({
+      first: true,
+      key: "REACT_APP_WEB3_STORAGE_KEY",
+      err: "Please provide an Web3.Storage API key in your .env file",
+    });
+
   /**
    * a feature flag for denoting when we are on the staging server
    * @returns {string} true or false
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index c3e8aadaa7..660c412740 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -56,8 +56,8 @@ export const useProposal = (instructionsIndex: number) => {
     async () => {
       queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes && proposalContent, queryKey);
       /// For the specified proposal index, fetch the relevant data points used in the frontend
-      const content = proposalContent.description;
-      const discussionURL = proposalContent.discussion;
+      const content: string = proposalContent.description;
+      const discussionURL: string = proposalContent.external_url;
       /**
        * submissionTimestamp as a Unix Time from the contract
        */
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index b38991727a..e29f06b978 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -41,6 +41,12 @@ export interface IActiveProposal {
   timeRemaining: number;
 }
 
+export interface IProposalContent {
+  name: string;
+  description: string;
+  external_url: string;
+}
+
 /**
  * the proposals current state
  * - currenly only Active & Endorsements status are stored on chain
@@ -182,25 +188,28 @@ export const parseProposalState = ({ isActive }: { isActive: boolean | undefined
  * expects a uri that returns json metadata with three keys:
  * - name {string}
  * - description {string}
- * - discussion {string} - url link to discussion
+ * - external_url {string} - url link to discussion
  */
-export const parseProposalContent = async ({ uri }: { uri: string }) => {
+export const parseProposalContent = async ({ uri }: { uri: string }): Promise<IProposalContent> => {
   let readURI = uri;
   if (~uri.indexOf("ipfs:/")) {
     readURI = `https://ipfs.io/ipfs/${uri.replace("ipfs:/", "")}`;
   }
   try {
     const res = await axios.get(readURI);
-    console.log("result", res);
-    console.log(res.data, res.data["description"], res.data.discussion);
     return {
-      name: res.data["name"] as string,
-      description: res.data["description"] as string,
-      discussion: res.data["discussion"] as string,
+      name: res.data.name as string,
+      description: res.data.description as string,
+      external_url: res.data.external_url as string,
     };
   } catch (error) {
     // handle error
     console.log(error);
+    return {
+      name: "",
+      description: "",
+      external_url: "",
+    };
   }
 };
 
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index cc7cbdf29b..16278e543b 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -60,7 +60,9 @@ export const CreateProposal = () => {
               handleChange={setProposalContract}
             />
           </Grid>
-          <PrimaryButton className="continue-button">Continue</PrimaryButton>
+          <PrimaryButton className="continue-button" onClick={uploadToIPFS}>
+            Continue
+          </PrimaryButton>
         </Grid>
       </Paper>
     </div>
diff --git a/src/views/Governance/components/CreateProposal/components/TextEntry.tsx b/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
index 4461afcac9..2d4a155bc2 100644
--- a/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
+++ b/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
@@ -1,7 +1,7 @@
 import { Grid, OutlinedInput, Typography } from "@mui/material";
 
 type TextEntryProps = {
-  inputTitle: string;
+  inputTitle: "Title" | "Description" | "Discussion" | "Target";
   gridSize: number;
   handleChange: (value: string) => void;
   secondaryTitle?: string;
@@ -24,6 +24,7 @@ export const TextEntry = ({ inputTitle, gridSize, handleChange, secondaryTitle,
         )}
       </Grid>
       <Grid item>
+        {/* TODO(appleseed): make description box expandable & markdown editor... */}
         <OutlinedInput
           className="input-box"
           placeholder={placeholder}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
index e05a148cc9..376172c8d7 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -3,6 +3,10 @@
   display: flex;
   justify-content: center;
 
+  // temporary paper fix
+  .MuiPaper-root > .MuiGrid-container > .MuiGrid-item {
+    width: 100%;
+  }
   .page-content {
     .navigation {
       margin-bottom: 30px;
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 79b588d5c7..0f2c35fdaf 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -97,15 +97,21 @@ export const ProposalPage = () => {
   return (
     <div className="proposal-page">
       <Paper>
-        <Grid className="page-content" container direction="column">
-          <Grid className="navigation" container direction="row" justifyContent="space-between" alignItems="center">
+        <Box className="page-content">
+          <Box
+            display="flex"
+            className="navigation"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
             <BackButton />
-            <Grid item>
+            <Box>
               <Link to="/governancetest/create-proposal" component={RouterLink}>
                 <SecondaryButton>Create new proposal</SecondaryButton>
               </Link>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
           {proposalHeader()}
           <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
             <Tabs
@@ -125,7 +131,7 @@ export const ProposalPage = () => {
               <VotesTab proposal={proposal} />
             </TabPanel>
           </Grid>
-        </Grid>
+        </Box>
       </Paper>
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index 9feded97cd..e074001afd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -36,6 +36,11 @@
     tslib "^2.3.0"
     zen-observable-ts "^1.2.5"
 
+"@assemblyscript/loader@^0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@assemblyscript/loader/-/loader-0.9.4.tgz#a483c54c1253656bb33babd464e3154a173e1577"
+  integrity sha512-HazVq9zwTVwGmqdwYzu7WyQ6FQVZ7SwET0KKQuKm55jD0IfUpZgN0OPIiZG3zV1iSrVYcN0bdwLRXI/VNCYsUA==
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
@@ -2020,6 +2025,38 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@ipld/car@^3.0.1", "@ipld/car@^3.1.4", "@ipld/car@^3.2.3":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/@ipld/car/-/car-3.2.4.tgz#115951ba2255ec51d865773a074e422c169fb01c"
+  integrity sha512-rezKd+jk8AsTGOoJKqzfjLJ3WVft7NZNH95f0pfPbicROvzTyvHCNy567HzSUd6gRXZ9im29z5ZEv9Hw49jSYw==
+  dependencies:
+    "@ipld/dag-cbor" "^7.0.0"
+    multiformats "^9.5.4"
+    varint "^6.0.0"
+
+"@ipld/dag-cbor@^6.0.3":
+  version "6.0.15"
+  resolved "https://registry.yarnpkg.com/@ipld/dag-cbor/-/dag-cbor-6.0.15.tgz#aebe7a26c391cae98c32faedb681b1519e3d2372"
+  integrity sha512-Vm3VTSTwlmGV92a3C5aeY+r2A18zbH2amehNhsX8PBa3muXICaWrN8Uri85A5hLH7D7ElhE8PdjxD6kNqUmTZA==
+  dependencies:
+    cborg "^1.5.4"
+    multiformats "^9.5.4"
+
+"@ipld/dag-cbor@^7.0.0", "@ipld/dag-cbor@^7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@ipld/dag-cbor/-/dag-cbor-7.0.2.tgz#a64c2ae6fa32decf655fbb9bee8f543cfae4c3f6"
+  integrity sha512-V9EhJVWXqzjjRs0kiZfUXOaq8y6R2C4AAmfGoMeszqGOBgfACr5tFAgAwZY0e8z/OpmJWpCrZhzPRTZV0c/gjA==
+  dependencies:
+    cborg "^1.6.0"
+    multiformats "^9.5.4"
+
+"@ipld/dag-pb@^2.0.2":
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/@ipld/dag-pb/-/dag-pb-2.1.17.tgz#baafe2fc6bbd1654c402a804ea54b8860cfb2912"
+  integrity sha512-AmzOdmdv5hT8iGsrbpzm5R0Fvk7DEbtwcglG2gJLvW9q3zwb+E681hY4EwEELypM1Rfnp/JDA9dGqYcpEi/iAg==
+  dependencies:
+    multiformats "^9.5.4"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2742,6 +2779,24 @@
     rollup-plugin-dotenv "^0.3.0"
     swr "1.1.2"
 
+"@multiformats/murmur3@^1.0.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@multiformats/murmur3/-/murmur3-1.1.3.tgz#70349166992e5f981f1ddff0200fa775b2bf6606"
+  integrity sha512-wAPLUErGR8g6Lt+bAZn6218k9YQPym+sjszsXL6o4zfxbA22P+gxWZuuD9wDbwL55xrKO5idpcuQUX7/E3oHcw==
+  dependencies:
+    multiformats "^9.5.4"
+    murmurhash3js-revisited "^3.0.0"
+
+"@noble/ed25519@^1.5.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@noble/ed25519/-/ed25519-1.6.1.tgz#bad3e77008c7825a0859304ab8b4177703cd438d"
+  integrity sha512-Gptpue6qPmg7p1E5LBO5GDtXw5WMc2DVtUmu4EQequOcoCvum1dT9sY6s9M8aSJWq9YopCN4jmTOAvqMdw3q7w==
+
+"@noble/secp256k1@^1.3.0":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.6.3.tgz#7eed12d9f4404b416999d0c87686836c4c5c9b94"
+  integrity sha512-T04e4iTurVy7I8Sw4+c5OSN9/RkPlo1uKxAomtxQNLq8j1uPAqnsqG1bqvY3Jv7c13gyr6dui0zmh/I3+f/JaQ==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -2800,6 +2855,59 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
   integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
 
+"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
+  integrity sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==
+
+"@protobufjs/base64@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/base64/-/base64-1.1.2.tgz#4c85730e59b9a1f1f349047dbf24296034bb2735"
+  integrity sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==
+
+"@protobufjs/codegen@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@protobufjs/codegen/-/codegen-2.0.4.tgz#7ef37f0d010fb028ad1ad59722e506d9262815cb"
+  integrity sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==
+
+"@protobufjs/eventemitter@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz#355cbc98bafad5978f9ed095f397621f1d066b70"
+  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
+
+"@protobufjs/fetch@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/fetch/-/fetch-1.1.0.tgz#ba99fb598614af65700c1619ff06d454b0d84c45"
+  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.1"
+    "@protobufjs/inquire" "^1.1.0"
+
+"@protobufjs/float@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/float/-/float-1.0.2.tgz#5e9e1abdcb73fc0a7cb8b291df78c8cbd97b87d1"
+  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
+
+"@protobufjs/inquire@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/inquire/-/inquire-1.1.0.tgz#ff200e3e7cf2429e2dcafc1140828e8cc638f089"
+  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
+
+"@protobufjs/path@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/path/-/path-1.1.2.tgz#6cc2b20c5c9ad6ad0dccfd21ca7673d8d7fbf68d"
+  integrity sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==
+
+"@protobufjs/pool@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/pool/-/pool-1.1.0.tgz#09fd15f2d6d3abfa9b65bc366506d6ad7846ff54"
+  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
+
+"@protobufjs/utf8@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
+  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
+
 "@rainbow-me/rainbowkit@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@rainbow-me/rainbowkit/-/rainbowkit-0.4.1.tgz#805ffb5d877d6c299514c4c8a612c5e2b7979e71"
@@ -3518,6 +3626,11 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
   integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
 
+"@types/long@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
+  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
+
 "@types/lru-cache@^5.1.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.1.tgz#c48c2e27b65d2a153b19bfc1a317e30872e01eef"
@@ -3556,11 +3669,16 @@
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
   integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
 
-"@types/minimatch@*":
+"@types/minimatch@*", "@types/minimatch@^3.0.4":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
+"@types/minimist@^1.2.0":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
+  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
+
 "@types/ms@*":
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
@@ -3571,11 +3689,21 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.14.tgz#33b9b94f789a8fedd30a68efdbca4dbb06b61f20"
   integrity sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==
 
+"@types/node@>=13.7.0":
+  version "18.6.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.3.tgz#4e4a95b6fe44014563ceb514b2598b3e623d1c98"
+  integrity sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==
+
 "@types/node@^14.11.2":
   version "14.18.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.10.tgz#774f43868964f3cfe4ced1f5417fe15818a4eaea"
   integrity sha512-6iihJ/Pp5fsFJ/aEDGyvT4pHGmCpq7ToQ/yf4bl5SbVAvwpspYJ+v3jO7n8UyjhQVHTy+KNszOozDdv+O6sovQ==
 
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
+  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -4249,6 +4377,55 @@
   dependencies:
     "@walletconnect/window-getters" "^1.0.0"
 
+"@web-std/blob@^3.0.1", "@web-std/blob@^3.0.3", "@web-std/blob@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@web-std/blob/-/blob-3.0.4.tgz#dd67a685547331915428d69e723c7da2015c3fc5"
+  integrity sha512-+dibyiw+uHYK4dX5cJ7HA+gtDAaUUe6JsOryp2ZpAC7h4ICsh49E34JwHoEKPlPvP0llCrNzz45vvD+xX5QDBg==
+  dependencies:
+    "@web-std/stream" "1.0.0"
+    web-encoding "1.1.5"
+
+"@web-std/fetch@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@web-std/fetch/-/fetch-3.0.3.tgz#507e1371825298aae61172b0da439570437d3982"
+  integrity sha512-PtaKr6qvw2AmKChugzhQWuTa12dpbogHRBxwcleAZ35UhWucnfD4N+g3f7qYK2OeioSWTK3yMf6n/kOOfqxHaQ==
+  dependencies:
+    "@web-std/blob" "^3.0.3"
+    "@web-std/form-data" "^3.0.2"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    data-uri-to-buffer "^3.0.1"
+
+"@web-std/file@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@web-std/file/-/file-3.0.2.tgz#b84cc9ed754608b18dcf78ac62c40dbcc6a94692"
+  integrity sha512-pIH0uuZsmY8YFvSHP1NsBIiMT/1ce0suPrX74fEeO3Wbr1+rW0fUGEe4d0R99iLwXtyCwyserqCFI4BJkJlkRA==
+  dependencies:
+    "@web-std/blob" "^3.0.3"
+
+"@web-std/form-data@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@web-std/form-data/-/form-data-3.0.2.tgz#c71d9def6a593138ea92fe3d1ffbce19f43e869c"
+  integrity sha512-rhc8IRw66sJ0FHcnC84kT3mTN6eACTuNftkt1XSl1Ef6WRKq4Pz65xixxqZymAZl1K3USpwhLci4SKNn4PYxWQ==
+  dependencies:
+    web-encoding "1.1.5"
+
+"@web-std/stream@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@web-std/stream/-/stream-1.0.0.tgz#01066f40f536e4329d9b696dc29872f3a14b93c1"
+  integrity sha512-jyIbdVl+0ZJyKGTV0Ohb9E6UnxP+t7ZzX4Do3AHjZKxUXKMs9EmqnBDQgHF7bEw0EzbQygOjtt/7gvtmi//iCQ==
+  dependencies:
+    web-streams-polyfill "^3.1.1"
+
+"@web3-storage/multipart-parser@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@web3-storage/multipart-parser/-/multipart-parser-1.0.0.tgz#6b69dc2a32a5b207ba43e556c25cc136a56659c4"
+  integrity sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==
+
+"@web3-storage/parse-link-header@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@web3-storage/parse-link-header/-/parse-link-header-3.1.0.tgz#4562724987649dd6d3e07c87be1826804d212ef7"
+  integrity sha512-K1undnK70vLLauqdE8bq/l98isTF2FDhcP0UPpXVSjkSWe3xhAn5eRXk5jfA1E5ycNm84Ws/rQFUD7ue11nciw==
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -4401,6 +4578,11 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zxing/text-encoding@0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@@ -4653,6 +4835,19 @@ antlr4ts@^0.5.0-alpha.4:
   resolved "https://registry.yarnpkg.com/antlr4ts/-/antlr4ts-0.5.0-alpha.4.tgz#71702865a87478ed0b40c0709f422cf14d51652a"
   integrity sha512-WPQDt1B74OfPv/IMS2ekXAKkTZIHl88uMetg6q3OTqgFxZ/dxDXI0EWLyZid/1Pe6hTftyg5N7gel5wNAGxXyQ==
 
+any-signal@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/any-signal/-/any-signal-2.1.2.tgz#8d48270de0605f8b218cf9abe8e9c6a0e7418102"
+  integrity sha512-B+rDnWasMi/eWcajPcCWSlYc7muXOrcYrqgyzcdKisl2H/WTlQ0gip1KyQfr0ZlxJdsuWCj/LWwQm7fhyhRfIQ==
+  dependencies:
+    abort-controller "^3.0.0"
+    native-abort-controller "^1.0.3"
+
+any-signal@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/any-signal/-/any-signal-3.0.1.tgz#49cae34368187a3472e31de28fb5cb1430caa9a6"
+  integrity sha512-xgZgJtKEa9YmDqXodIgl7Fl1C8yNXr8w6gXjqK3LW4GcEiYT+6AQfJSE/8SPsEpLLmcvbv8YU+qet94UewHxqg==
+
 anymatch@^3.0.3, anymatch@~3.1.1, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -4756,6 +4951,11 @@ array.prototype.flatmap@^1.3.0:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
+
 asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -5181,11 +5381,41 @@ bl@^4.0.3, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bl@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-5.0.0.tgz#6928804a41e9da9034868e1c50ca88f21f57aea2"
+  integrity sha512-8vxFNZ0pflFfi0WXA3WQXlj6CaMEwsmh63I1CNp0q+wWv8sD0ARx1KovSQd0l2GkwrMIOyedq0EF1FxI+RCZLQ==
+  dependencies:
+    buffer "^6.0.3"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 blakejs@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/blakejs/-/blakejs-1.1.1.tgz#bf313053978b2cd4c444a48795710be05c785702"
   integrity sha512-bLG6PHOCZJKNshTjGRBvET0vTciwQE6zFKOKKXPDJfwFBd4Ac0yBfPZqcGvGJap50l7ktvlpFqc2jGVaUgbJgg==
 
+blob-to-it@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/blob-to-it/-/blob-to-it-1.0.4.tgz#f6caf7a4e90b7bb9215fa6a318ed6bd8ad9898cb"
+  integrity sha512-iCmk0W4NdbrWgRRuxOriU8aM5ijeVLI61Zulsmg/lUHNr7pYjoj+U77opLefNagevtrrbMt3JQ5Qip7ar178kA==
+  dependencies:
+    browser-readablestream-to-it "^1.0.3"
+
+blockstore-core@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/blockstore-core/-/blockstore-core-1.0.5.tgz#2e34b6a7faae0d4b6c98dc8573c6f998eb457f36"
+  integrity sha512-i/9CUMMvBALVbtSqUIuiWB3tk//a4Q2I2CEWiBuYNnhJvk/DWplXjLt8Sqc5VGkRVXVPSsEuH8fUtqJt5UFYcA==
+  dependencies:
+    err-code "^3.0.1"
+    interface-blockstore "^2.0.2"
+    interface-store "^2.0.1"
+    it-all "^1.0.4"
+    it-drain "^1.0.4"
+    it-filter "^1.0.2"
+    it-take "^1.0.1"
+    multiformats "^9.4.7"
+
 bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -5278,6 +5508,11 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
+browser-readablestream-to-it@^1.0.1, browser-readablestream-to-it@^1.0.2, browser-readablestream-to-it@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/browser-readablestream-to-it/-/browser-readablestream-to-it-1.0.3.tgz#ac3e406c7ee6cdf0a502dd55db33bab97f7fba76"
+  integrity sha512-+12sHB+Br8HIh6VAMVEG5r3UXCyESIgDW7kzk3BjIXa43DVqVwL7GC5TW3jeh+72dtcH99pPVpw0X8i0jt+/kw==
+
 browser-stdout@1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
@@ -5393,7 +5628,7 @@ buffer@^5.2.1, buffer@^5.4.3, buffer@^5.5.0, buffer@^5.6.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-buffer@^6.0.3:
+buffer@^6.0.1, buffer@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
@@ -5447,6 +5682,15 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -5477,6 +5721,16 @@ caniuse-lite@^1.0.30001332:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001343.tgz#8e1107e30d9a4d2f63782b48ae0a3ce34e2f9c2a"
   integrity sha512-8KeCrAtPMabo/XW14B+R9sZYoClx1n0b+WYgwDKZPtWR3TcdvWzdSy7mPyFEmR5WU1St9v1PW6sdO5dkFOEzfA==
 
+carbites@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/carbites/-/carbites-1.0.6.tgz#0eac206c87b60e09b758a4e820af000dda4f8dd1"
+  integrity sha512-dS9IQvnrb5VIRvSTNz5Ff+mB9d2MFfi5mojtJi7Rlss79VeF190jr0sZdA7eW0CGHotvHkZaWuM6wgfD9PEFRg==
+  dependencies:
+    "@ipld/car" "^3.0.1"
+    "@ipld/dag-cbor" "^6.0.3"
+    "@ipld/dag-pb" "^2.0.2"
+    multiformats "^9.0.4"
+
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
@@ -5487,6 +5741,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+cborg@^1.3.3, cborg@^1.5.4, cborg@^1.6.0, cborg@^1.8.0:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/cborg/-/cborg-1.9.4.tgz#85354ee6e0fe017dd34e300c3dcd044407a27800"
+  integrity sha512-ltobKo17xKYJolhg8UxQhvzcqXhjtUnovwe9Xx59Izo32gLwozGoJs/efp+8dZ5+zu9pNJYnHtmp6iJnDUapww==
+
 chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -5612,6 +5871,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+class-is@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/class-is/-/class-is-1.1.0.tgz#9d3c0fba0440d211d843cec3dedfa48055005825"
+  integrity sha512-rhjH9AG1fvabIDoGRVH587413LPjTZgmDF9fOFCbFJQV4yuocX1mHxxvXI4g3cGwbVY9wAYIoKlg1N79frJKQw==
+
 class-validator@^0.13.2:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/class-validator/-/class-validator-0.13.2.tgz#64b031e9f3f81a1e1dcd04a5d604734608b24143"
@@ -6384,6 +6648,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-uri-to-buffer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
+  integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
+
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -6410,7 +6679,7 @@ debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -6431,7 +6700,15 @@ debug@^3.1.1, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.2.0:
+decamelize-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
@@ -6666,6 +6943,15 @@ dns-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
   integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
+dns-over-http-resolver@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/dns-over-http-resolver/-/dns-over-http-resolver-1.2.3.tgz#194d5e140a42153f55bb79ac5a64dd2768c36af9"
+  integrity sha512-miDiVSI6KSNbi4SVifzO/reD8rMnxgrlnkrlkugOLQpWQTe2qMdHsZp5DmfKjxNE+/T3VAAYLQUZMv9SMr6+AA==
+  dependencies:
+    debug "^4.3.1"
+    native-fetch "^3.0.0"
+    receptacle "^1.3.2"
+
 dns-packet@^5.2.2:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.3.1.tgz#eb94413789daec0f0ebe2fcc230bdc9d7c91b43d"
@@ -6837,6 +7123,13 @@ ejs@3.1.8, ejs@^3.1.6:
   dependencies:
     jake "^10.8.5"
 
+electron-fetch@^1.7.2:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/electron-fetch/-/electron-fetch-1.7.4.tgz#af975ab92a14798bfaa025f88dcd2e54a7b0b769"
+  integrity sha512-+fBLXEy4CJWQ5bz8dyaeSG1hD6JJ15kBZyj3eh24pIVrd3hLM47H/umffrdQfS6GZ0falF0g9JT9f3Rs6AVUhw==
+  dependencies:
+    encoding "^0.1.13"
+
 electron-to-chromium@^1.3.719:
   version "1.4.63"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.63.tgz#866db72d1221fda89419dc22669d03833e11625d"
@@ -6910,6 +7203,13 @@ encoding-down@^6.3.0:
     level-codec "^9.0.0"
     level-errors "^2.0.0"
 
+encoding@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -6947,6 +7247,11 @@ env-paths@^2.2.0:
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
+err-code@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/err-code/-/err-code-3.0.1.tgz#a444c7b992705f2b120ee320b09972eef331c920"
+  integrity sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==
+
 errno@~0.1.1:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -7712,7 +8017,7 @@ eventemitter3@4.0.7, eventemitter3@^4.0.0, eventemitter3@^4.0.1, eventemitter3@^
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
-events@^3.0.0, events@^3.2.0:
+events@^3.0.0, events@^3.2.0, events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -7904,6 +8209,11 @@ fast-equals@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927"
   integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w==
 
+fast-fifo@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.1.0.tgz#17d1a3646880b9891dfa0c54e69c5fef33cad779"
+  integrity sha512-Kl29QoNbNvn4nhDsLYjyIAaIqaJB6rBx5p3sL9VjaefJ+eMFBWVZiaoguaoZfzEKr5RhAti0UgM8703akGPJ6g==
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -7987,6 +8297,16 @@ filelist@^1.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+files-from-path@^0.2.4:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/files-from-path/-/files-from-path-0.2.6.tgz#a093918d67ebfe1d50fffef926855574146cf571"
+  integrity sha512-Mz4UNkv+WcRLxcCXAORbfpwYiXI60SN9C1ZfeyGFv0xQUmblgbOkSWwFwX+Ov/TaR3FEyzwDyPnCQjpPRGSxKA==
+  dependencies:
+    err-code "^3.0.1"
+    graceful-fs "^4.2.9"
+    ipfs-unixfs "^6.0.5"
+    it-glob "^0.0.13"
+
 filesize@^8.0.6:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
@@ -8326,6 +8646,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-iterator@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-iterator/-/get-iterator-1.0.2.tgz#cd747c02b4c084461fac14f48f6b45a80ed25c82"
+  integrity sha512-v+dm9bNVfOYsY1OrhaCrmyOcYoSeVvbt+hHZ0Au+T+p1y+0Uyj9aMaGIeUTT6xdpRbWzDeYKvfOslPhggQMcsg==
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -8527,6 +8852,14 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hamt-sharding@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hamt-sharding/-/hamt-sharding-2.0.1.tgz#f45686d0339e74b03b233bee1bde9587727129b6"
+  integrity sha512-vnjrmdXG9dDs1m/H4iJ6z0JFI2NtgsW5keRkTcM85NGak69Mkf5PHUqBz+Xs0T4sg0ppvj9O5EGAJo40FTxmmA==
+  dependencies:
+    sparse-array "^1.3.1"
+    uint8arrays "^3.0.0"
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -8545,6 +8878,11 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 hardhat@^2.9.9:
   version "2.9.9"
   resolved "https://registry.yarnpkg.com/hardhat/-/hardhat-2.9.9.tgz#05c1015eb73e0230309534b00deeb080724aace0"
@@ -8717,6 +9055,18 @@ hoopy@^0.1.4:
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+hosted-git-info@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
+  integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -8901,7 +9251,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.6.3:
+iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -8913,6 +9263,13 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+idb-keyval@^6.0.3:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.0.tgz#3af94a3cc0689d6ee0bc9e045d2a3340ea897173"
+  integrity sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==
+  dependencies:
+    safari-14-idb-fix "^3.0.0"
+
 idb@^6.1.4:
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b"
@@ -9028,6 +9385,28 @@ inquirer@^7.3.3:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+interface-blockstore@^2.0.2, interface-blockstore@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/interface-blockstore/-/interface-blockstore-2.0.3.tgz#b85270eb5180e65e46c9f66980a0fa4d98f5d73e"
+  integrity sha512-OwVUnlNcx7H5HloK0Myv6c/C1q9cNG11HX6afdeU6q6kbuNj8jKCwVnmJHhC94LZaJ+9hvVOk4IUstb3Esg81w==
+  dependencies:
+    interface-store "^2.0.2"
+    multiformats "^9.0.4"
+
+interface-datastore@^6.0.2:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/interface-datastore/-/interface-datastore-6.1.1.tgz#5150a00de2e7513eaadba58bcafd059cb50004c1"
+  integrity sha512-AmCS+9CT34pp2u0QQVXjKztkuq3y5T+BIciuiHDDtDZucZD8VudosnSdUyXJV6IsRkN5jc4RFDhCk1O6Q3Gxjg==
+  dependencies:
+    interface-store "^2.0.2"
+    nanoid "^3.0.2"
+    uint8arrays "^3.0.0"
+
+interface-store@^2.0.1, interface-store@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/interface-store/-/interface-store-2.0.2.tgz#83175fd2b0c501585ed96db54bb8ba9d55fce34c"
+  integrity sha512-rScRlhDcz6k199EkHqT8NpM87ebN89ICOzILoBHgaG36/WX50N32BnU/kpZgCGPLhARRAWUUX5/cyaIjt7Kipg==
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -9061,6 +9440,11 @@ io-ts@1.10.4:
   dependencies:
     fp-ts "^1.0.0"
 
+ip-regex@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
+  integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -9071,6 +9455,150 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
+ipfs-car@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/ipfs-car/-/ipfs-car-0.7.0.tgz#72955d2b6904e87edfa17bbe5c00c1b3fcb79bb9"
+  integrity sha512-9ser6WWZ1ZMTCGbcVkRXUzOrpQ4SIiLfzIEnk+3LQsXbV09yeZg3ijhRuEXozEIYE68Go9JmOFshamsK9iKlNQ==
+  dependencies:
+    "@ipld/car" "^3.2.3"
+    "@web-std/blob" "^3.0.1"
+    bl "^5.0.0"
+    blockstore-core "^1.0.2"
+    browser-readablestream-to-it "^1.0.2"
+    idb-keyval "^6.0.3"
+    interface-blockstore "^2.0.2"
+    ipfs-core-types "^0.8.3"
+    ipfs-core-utils "^0.12.1"
+    ipfs-unixfs-exporter "^7.0.4"
+    ipfs-unixfs-importer "^9.0.4"
+    ipfs-utils "^9.0.2"
+    it-all "^1.0.5"
+    it-last "^1.0.5"
+    it-pipe "^1.1.0"
+    meow "^9.0.0"
+    move-file "^2.1.0"
+    multiformats "^9.6.3"
+    stream-to-it "^0.2.3"
+    streaming-iterables "^6.0.0"
+    uint8arrays "^3.0.0"
+
+ipfs-core-types@^0.8.3, ipfs-core-types@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/ipfs-core-types/-/ipfs-core-types-0.8.4.tgz#4d483dc6035714ea48a0b02e3f82b6c6d55c8525"
+  integrity sha512-sbRZA1QX3xJ6ywTiVQZMOxhlhp4osAZX2SXx3azOLxAtxmGWDMkHYt722VV4nZ2GyJy8qyk5GHQIZ0uvQnpaTg==
+  dependencies:
+    interface-datastore "^6.0.2"
+    multiaddr "^10.0.0"
+    multiformats "^9.4.13"
+
+ipfs-core-utils@^0.12.1:
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/ipfs-core-utils/-/ipfs-core-utils-0.12.2.tgz#f5365ac884fd93a3bcb6e7b6f17cebe09d841501"
+  integrity sha512-RfxP3rPhXuqKIUmTAUhmee6fmaV3A7LMnjOUikRKpSyqESz/DR7aGK7tbttMxkZdkSEr0rFXlqbyb0vVwmn0wQ==
+  dependencies:
+    any-signal "^2.1.2"
+    blob-to-it "^1.0.1"
+    browser-readablestream-to-it "^1.0.1"
+    debug "^4.1.1"
+    err-code "^3.0.1"
+    ipfs-core-types "^0.8.4"
+    ipfs-unixfs "^6.0.3"
+    ipfs-utils "^9.0.2"
+    it-all "^1.0.4"
+    it-map "^1.0.4"
+    it-peekable "^1.0.2"
+    it-to-stream "^1.0.0"
+    merge-options "^3.0.4"
+    multiaddr "^10.0.0"
+    multiaddr-to-uri "^8.0.0"
+    multiformats "^9.4.13"
+    nanoid "^3.1.23"
+    parse-duration "^1.0.0"
+    timeout-abort-controller "^1.1.1"
+    uint8arrays "^3.0.0"
+
+ipfs-unixfs-exporter@^7.0.4:
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/ipfs-unixfs-exporter/-/ipfs-unixfs-exporter-7.0.11.tgz#48c4c7605601bddc27cf1de97a2ad81a87e5fe32"
+  integrity sha512-qTYa69J7HbI2EIYNUddKPg9Y3rHkYZV0bNdmzZKA5+ZbwRVoUEuBW/cguEqTp22zHygh3sMnzYZFm0naVIdMgQ==
+  dependencies:
+    "@ipld/dag-cbor" "^7.0.2"
+    "@ipld/dag-pb" "^2.0.2"
+    "@multiformats/murmur3" "^1.0.3"
+    err-code "^3.0.1"
+    hamt-sharding "^2.0.0"
+    interface-blockstore "^2.0.3"
+    ipfs-unixfs "^6.0.0"
+    it-last "^1.0.5"
+    multiformats "^9.4.2"
+    uint8arrays "^3.0.0"
+
+ipfs-unixfs-importer@^9.0.4:
+  version "9.0.10"
+  resolved "https://registry.yarnpkg.com/ipfs-unixfs-importer/-/ipfs-unixfs-importer-9.0.10.tgz#2527ea0b4e018a9e80fa981101485babcd05c494"
+  integrity sha512-W+tQTVcSmXtFh7FWYWwPBGXJ1xDgREbIyI1E5JzDcimZLIyT5gGMfxR3oKPxxWj+GKMpP5ilvMQrbsPzWcm3Fw==
+  dependencies:
+    "@ipld/dag-pb" "^2.0.2"
+    "@multiformats/murmur3" "^1.0.3"
+    bl "^5.0.0"
+    err-code "^3.0.1"
+    hamt-sharding "^2.0.0"
+    interface-blockstore "^2.0.3"
+    ipfs-unixfs "^6.0.0"
+    it-all "^1.0.5"
+    it-batch "^1.0.8"
+    it-first "^1.0.6"
+    it-parallel-batch "^1.0.9"
+    merge-options "^3.0.4"
+    multiformats "^9.4.2"
+    rabin-wasm "^0.1.4"
+    uint8arrays "^3.0.0"
+
+ipfs-unixfs@^6.0.0, ipfs-unixfs@^6.0.3, ipfs-unixfs@^6.0.5:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/ipfs-unixfs/-/ipfs-unixfs-6.0.9.tgz#f6613b8e081d83faa43ed96e016a694c615a9374"
+  integrity sha512-0DQ7p0/9dRB6XCb0mVCTli33GzIzSVx5udpJuVM47tGcD+W+Bl4LsnoLswd3ggNnNEakMv1FdoFITiEnchXDqQ==
+  dependencies:
+    err-code "^3.0.1"
+    protobufjs "^6.10.2"
+
+ipfs-utils@^9.0.2:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/ipfs-utils/-/ipfs-utils-9.0.7.tgz#b8644b9d053e4dd258f69773b146ac243921aa1f"
+  integrity sha512-Umvb0Zydy2zZiTmQBGLfLISr8vOmXX8cxEIP+N8zGHrtRShG/j32yl1xd/BtS+Hbg0FIbVm3opwvxB2gmta0YA==
+  dependencies:
+    any-signal "^3.0.0"
+    buffer "^6.0.1"
+    electron-fetch "^1.7.2"
+    err-code "^3.0.1"
+    is-electron "^2.2.0"
+    iso-url "^1.1.5"
+    it-glob "^1.0.1"
+    it-to-stream "^1.0.0"
+    merge-options "^3.0.4"
+    nanoid "^3.1.20"
+    native-fetch "^3.0.0"
+    node-fetch "https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz"
+    react-native-fetch-api "^2.0.0"
+    stream-to-it "^0.2.2"
+
+ipns@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/ipns/-/ipns-0.16.0.tgz#656bf36d78a6a9eb829ff798b4ca875ba9a3d0d4"
+  integrity sha512-fBYkRjN3/fc6IQujUF4WBEyOXegK715w+wx9IErV6H2B5JXsMnHOBceUKn3L90dj+wJfHs6T+hM/OZiTT6mQCw==
+  dependencies:
+    cborg "^1.3.3"
+    debug "^4.2.0"
+    err-code "^3.0.1"
+    interface-datastore "^6.0.2"
+    libp2p-crypto "^0.21.0"
+    long "^4.0.0"
+    multiformats "^9.4.5"
+    peer-id "^0.16.0"
+    protobufjs "^6.10.2"
+    timestamp-nano "^1.0.0"
+    uint8arrays "^3.0.0"
+
 is-alphabetical@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
@@ -9141,6 +9669,13 @@ is-core-module@^2.2.0, is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.5.0, is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
 is-date-object@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
@@ -9158,6 +9693,11 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
+is-electron@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-electron/-/is-electron-2.2.1.tgz#751b1dd8a74907422faa5c35aaa0cf66d98086e9"
+  integrity sha512-r8EEQQsqT+Gn0aXFx7lTFygYQhILLCB+wn0WCDL5LZRINeLH/Rvw1j2oKodELLXYNImQ3CRlVsY8wW4cGOsyuw==
+
 is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -9241,6 +9781,13 @@ is-invalid-path@^0.1.0:
   dependencies:
     is-glob "^2.0.0"
 
+is-ip@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-ip/-/is-ip-3.1.0.tgz#2ae5ddfafaf05cb8008a62093cf29734f657c5d8"
+  integrity sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==
+  dependencies:
+    ip-regex "^4.0.0"
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -9276,6 +9823,11 @@ is-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
+
 is-plain-obj@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
@@ -9424,6 +9976,19 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+iso-random-stream@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/iso-random-stream/-/iso-random-stream-2.0.2.tgz#a24f77c34cfdad9d398707d522a6a0cc640ff27d"
+  integrity sha512-yJvs+Nnelic1L2vH2JzWvvPQFA4r7kSTnpST/+LkAQjSz0hos2oqLD+qIVi9Qk38Hoe7mNDt3j0S27R58MVjLQ==
+  dependencies:
+    events "^3.3.0"
+    readable-stream "^3.4.0"
+
+iso-url@^1.1.5:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/iso-url/-/iso-url-1.2.1.tgz#db96a49d8d9a64a1c889fc07cc525d093afb1811"
+  integrity sha512-9JPDgCN4B7QPkLtYAAOrEuAWvP9rWvR5offAr0/SeF046wIkglqH3VXgYYP6NcsKslH80UIVgmPqNe3j7tG2ng==
+
 isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
@@ -9487,6 +10052,91 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+it-all@^1.0.4, it-all@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/it-all/-/it-all-1.0.6.tgz#852557355367606295c4c3b7eff0136f07749335"
+  integrity sha512-3cmCc6Heqe3uWi3CVM/k51fa/XbMFpQVzFoDsV0IZNHSQDyAXl3c4MjHkFX5kF3922OGj7Myv1nSEUgRtcuM1A==
+
+it-batch@^1.0.8, it-batch@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/it-batch/-/it-batch-1.0.9.tgz#7e95aaacb3f9b1b8ca6c8b8367892171d6a5b37f"
+  integrity sha512-7Q7HXewMhNFltTsAMdSz6luNhyhkhEtGGbYek/8Xb/GiqYMtwUmopE1ocPSiJKKp3rM4Dt045sNFoUu+KZGNyA==
+
+it-drain@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/it-drain/-/it-drain-1.0.5.tgz#0466d4e286b37bcd32599d4e99b37a87cb8cfdf6"
+  integrity sha512-r/GjkiW1bZswC04TNmUnLxa6uovme7KKwPhc+cb1hHU65E3AByypHH6Pm91WHuvqfFsm+9ws0kPtDBV3/8vmIg==
+
+it-filter@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/it-filter/-/it-filter-1.0.3.tgz#66ea0cc4bf84af71bebd353c05a9c5735fcba751"
+  integrity sha512-EI3HpzUrKjTH01miLHWmhNWy3Xpbx4OXMXltgrNprL5lDpF3giVpHIouFpr5l+evXw6aOfxhnt01BIB+4VQA+w==
+
+it-first@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/it-first/-/it-first-1.0.7.tgz#a4bef40da8be21667f7d23e44dae652f5ccd7ab1"
+  integrity sha512-nvJKZoBpZD/6Rtde6FXqwDqDZGF1sCADmr2Zoc0hZsIvnE449gRFnGctxDf09Bzc/FWnHXAdaHVIetY6lrE0/g==
+
+it-glob@^0.0.13:
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/it-glob/-/it-glob-0.0.13.tgz#78913fe835fcf0d46afcdb6634eb069acdfc4fbc"
+  integrity sha512-0Hcd5BraJUPzL28NWiFbdNrcdyNxNTKKdU3sjdFiYynNTQpwlG2UKW31X7bp+XhJwux/oPzIquo5ioztVmc2RQ==
+  dependencies:
+    "@types/minimatch" "^3.0.4"
+    minimatch "^3.0.4"
+
+it-glob@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/it-glob/-/it-glob-1.0.2.tgz#bab9b04d6aaac42884502f3a0bfee84c7a29e15e"
+  integrity sha512-Ch2Dzhw4URfB9L/0ZHyY+uqOnKvBNeS/SMcRiPmJfpHiM0TsUZn+GkpcZxAoF3dJVdPm/PuIk3A4wlV7SUo23Q==
+  dependencies:
+    "@types/minimatch" "^3.0.4"
+    minimatch "^3.0.4"
+
+it-last@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/it-last/-/it-last-1.0.6.tgz#4106232e5905ec11e16de15a0e9f7037eaecfc45"
+  integrity sha512-aFGeibeiX/lM4bX3JY0OkVCFkAw8+n9lkukkLNivbJRvNz8lI3YXv5xcqhFUV2lDJiraEK3OXRDbGuevnnR67Q==
+
+it-map@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/it-map/-/it-map-1.0.6.tgz#6aa547e363eedcf8d4f69d8484b450bc13c9882c"
+  integrity sha512-XT4/RM6UHIFG9IobGlQPFQUrlEKkU4eBUFG3qhWhfAdh1JfF2x11ShCrKCdmZ0OiZppPfoLuzcfA4cey6q3UAQ==
+
+it-parallel-batch@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/it-parallel-batch/-/it-parallel-batch-1.0.10.tgz#43aa348e30cc360fa6bedc183b631d6f9c81e20e"
+  integrity sha512-3+4gW15xdf/BOx9zij0QVnB1bDGSLOTABlaVm7ebHH1S9gDUgd5aLNb0WsFXPTfKe104iC6lxdzfbMGh1B07rg==
+  dependencies:
+    it-batch "^1.0.9"
+
+it-peekable@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/it-peekable/-/it-peekable-1.0.3.tgz#8ebe933767d9c5aa0ae4ef8e9cb3a47389bced8c"
+  integrity sha512-5+8zemFS+wSfIkSZyf0Zh5kNN+iGyccN02914BY4w/Dj+uoFEoPSvj5vaWn8pNZJNSxzjW0zHRxC3LUb2KWJTQ==
+
+it-pipe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/it-pipe/-/it-pipe-1.1.0.tgz#f5964c6bb785dd776f11a62d1e75964787ab95ce"
+  integrity sha512-lF0/3qTVeth13TOnHVs0BTFaziwQF7m5Gg+E6JV0BXcLKutC92YjSi7bASgkPOXaLEb+YvNZrPorGMBIJvZfxg==
+
+it-take@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/it-take/-/it-take-1.0.2.tgz#b5f1570014db7c3454897898b69bb7ac9c3bffc1"
+  integrity sha512-u7I6qhhxH7pSevcYNaMECtkvZW365ARqAIt9K+xjdK1B2WUDEjQSfETkOCT8bxFq/59LqrN3cMLUtTgmDBaygw==
+
+it-to-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/it-to-stream/-/it-to-stream-1.0.0.tgz#6c47f91d5b5df28bda9334c52782ef8e97fe3a4a"
+  integrity sha512-pLULMZMAB/+vbdvbZtebC0nWBTbG581lk6w8P7DfIIIKUfa8FbY7Oi0FxZcFPbxvISs7A9E+cMpLDBc1XhpAOA==
+  dependencies:
+    buffer "^6.0.3"
+    fast-fifo "^1.0.0"
+    get-iterator "^1.0.2"
+    p-defer "^3.0.0"
+    p-fifo "^1.0.0"
+    readable-stream "^3.6.0"
+
 iterall@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
@@ -10704,7 +11354,7 @@ kind-of@^3.0.2:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^6.0.2:
+kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -10903,6 +11553,20 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libp2p-crypto@^0.21.0:
+  version "0.21.2"
+  resolved "https://registry.yarnpkg.com/libp2p-crypto/-/libp2p-crypto-0.21.2.tgz#7f9875436f24ca3887b077210b217b702bd72916"
+  integrity sha512-EXFrhSpiHtJ+/L8xXDvQNK5VjUMG51u878jzZcaT5XhuN/zFg6PWJFnl/qB2Y2j7eMWnvCRP7Kp+ua2H36cG4g==
+  dependencies:
+    "@noble/ed25519" "^1.5.1"
+    "@noble/secp256k1" "^1.3.0"
+    err-code "^3.0.1"
+    iso-random-stream "^2.0.0"
+    multiformats "^9.4.5"
+    node-forge "^1.2.1"
+    protobufjs "^6.11.2"
+    uint8arrays "^3.0.0"
+
 libphonenumber-js@^1.9.43:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.6.tgz#a453efe9d692cc9457abb20a712dec34472a7164"
@@ -11070,6 +11734,11 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+long@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
+  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -11144,6 +11813,16 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+map-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+  integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
+
+map-obj@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
+  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
+
 markdown-it@^13.0.1:
   version "13.0.1"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
@@ -11289,6 +11968,24 @@ memorystream@^0.3.1:
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
   integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
 
+meow@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
+  integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize "^1.2.0"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.18.0"
+    yargs-parser "^20.2.3"
+
 merge-deep@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.3.tgz#1a2b2ae926da8b2ae93a0ac15d90cd1922766003"
@@ -11303,6 +12000,13 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -11655,6 +12359,15 @@ minimatch@^3.0.4, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimist-options@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
@@ -11722,6 +12435,13 @@ mocha@^9.2.0:
     yargs-parser "20.2.4"
     yargs-unparser "2.0.0"
 
+move-file@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/move-file/-/move-file-2.1.0.tgz#3bec9d34fbe4832df6865f112cda4492b56e8507"
+  integrity sha512-i9qLW6gqboJ5Ht8bauZi7KlTnQ3QFpBCvMvFfEcHADKgHGeJ9BZMO7SFCTwHPV9Qa0du9DYY1Yx3oqlGt30nXA==
+  dependencies:
+    path-exists "^4.0.0"
+
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -11742,6 +12462,25 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+multiaddr-to-uri@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/multiaddr-to-uri/-/multiaddr-to-uri-8.0.0.tgz#65efe4b1f9de5f6b681aa42ff36a7c8db7625e58"
+  integrity sha512-dq4p/vsOOUdVEd1J1gl+R2GFrXJQH8yjLtz4hodqdVbieg39LvBOdMQRdQnfbg5LSM/q1BYNVf5CBbwZFFqBgA==
+  dependencies:
+    multiaddr "^10.0.0"
+
+multiaddr@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/multiaddr/-/multiaddr-10.0.1.tgz#0d15848871370860a4d266bb44d93b3dac5d90ef"
+  integrity sha512-G5upNcGzEGuTHkzxezPrrD6CaIHR9uo+7MwqhNVcXTs33IInon4y7nMiGxl2CY5hG7chvYQUQhz5V52/Qe3cbg==
+  dependencies:
+    dns-over-http-resolver "^1.2.3"
+    err-code "^3.0.1"
+    is-ip "^3.1.0"
+    multiformats "^9.4.5"
+    uint8arrays "^3.0.0"
+    varint "^6.0.0"
+
 multicast-dns@^7.2.4:
   version "7.2.4"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.4.tgz#cf0b115c31e922aeb20b64e6556cbeb34cf0dd19"
@@ -11750,6 +12489,16 @@ multicast-dns@^7.2.4:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+multiformats@^9.0.4, multiformats@^9.4.13, multiformats@^9.4.2, multiformats@^9.4.5, multiformats@^9.4.7, multiformats@^9.5.4, multiformats@^9.6.3:
+  version "9.7.1"
+  resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-9.7.1.tgz#ab348e5fd6f8e7fb3fd56033211bda48854e2173"
+  integrity sha512-TaVmGEBt0fhxiNJMGphBfB+oGvUxFs8KgGvgl8d3C+GWtrFcvXdJ2196eg+dYhmSFClmgFfSfJEklo+SZzdNuw==
+
+murmurhash3js-revisited@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash3js-revisited/-/murmurhash3js-revisited-3.0.0.tgz#6bd36e25de8f73394222adc6e41fa3fac08a5869"
+  integrity sha512-/sF3ee6zvScXMb1XFJ8gDsSnY+X8PbOyjIuBhtgis10W2Jx4ZjIhikUCIF9c4gpJxVnQIsPAFrSwTCuAjicP6g==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -11767,11 +12516,21 @@ nanoid@3.2.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
-nanoid@^3.3.4:
+nanoid@^3.0.2, nanoid@^3.1.20, nanoid@^3.1.23, nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+native-abort-controller@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/native-abort-controller/-/native-abort-controller-1.0.4.tgz#39920155cc0c18209ff93af5bc90be856143f251"
+  integrity sha512-zp8yev7nxczDJMoP6pDxyD20IU0T22eX8VwN2ztDccKvSZhRaV33yP1BGwKSZfXuqWUzsXopVFjBdau9OOAwMQ==
+
+native-fetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/native-fetch/-/native-fetch-3.0.0.tgz#06ccdd70e79e171c365c75117959cf4fe14a09bb"
+  integrity sha512-G3Z7vx0IFb/FQ4JxvtqGABsOTIqRWvgQz6e+erkB+JJD6LrszQtMozEHI4EkmgZQvnGHrpLVzUWk7t4sJCIkVw==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -11807,7 +12566,11 @@ node-fetch@2.6.7, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-forge@1.3.1, node-forge@^1:
+"node-fetch@https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz":
+  version "2.6.7"
+  resolved "https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz#1b5d62978f2ed07b99444f64f0df39f960a6d34d"
+
+node-forge@1.3.1, node-forge@^1, node-forge@^1.2.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
@@ -11849,6 +12612,26 @@ node-watch@^0.7.1:
   resolved "https://registry.yarnpkg.com/node-watch/-/node-watch-0.7.3.tgz#6d4db88e39c8d09d3ea61d6568d80e5975abc7ab"
   integrity sha512-3l4E8uMPY1HdMMryPRUAl+oIHtXtyiTlIiESNSVSNxcPfzAFzeTbXFQkZfAwBbo0B1qMSG8nUABx+Gd+YrbKrQ==
 
+normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-package-data@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e"
+  integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    is-core-module "^2.5.0"
+    semver "^7.3.4"
+    validate-npm-package-license "^3.0.1"
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -12113,6 +12896,19 @@ outdent@^0.8.0:
   resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
   integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
 
+p-defer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-3.0.0.tgz#d1dceb4ee9b2b604b1d94ffec83760175d4e6f83"
+  integrity sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw==
+
+p-fifo@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-fifo/-/p-fifo-1.0.0.tgz#e29d5cf17c239ba87f51dde98c1d26a9cfe20a63"
+  integrity sha512-IjoCxXW48tqdtDFz6fqo5q1UfFVjjVZe8TC1QRflvNUJtNfCUhxOUw6MOVZhDPjqhSzc26xKdugsO17gmzd5+A==
+  dependencies:
+    fast-fifo "^1.0.0"
+    p-defer "^3.0.0"
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -12207,6 +13003,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-duration@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-duration/-/parse-duration-1.0.2.tgz#b9aa7d3a1363cc7e8845bea8fd3baf8a11df5805"
+  integrity sha512-Dg27N6mfok+ow1a2rj/nRjtCfaKrHUZV2SJpEn/s8GaVUSlf4GGRCRP1c13Hj+wfPKVMrFDqLMLITkYKgKxyyg==
+
 parse-headers@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.4.tgz#9eaf2d02bed2d1eff494331ce3df36d7924760bf"
@@ -12296,6 +13097,17 @@ pbkdf2@^3.0.17:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+peer-id@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/peer-id/-/peer-id-0.16.0.tgz#0913062cfa4378707fe69c949b5720b3efadbf32"
+  integrity sha512-EmL7FurFUduU9m1PS9cfJ5TAuCvxKQ7DKpfx3Yj6IKWyBRtosriFuOag/l3ni/dtPgPLwiA4R9IvpL7hsDLJuQ==
+  dependencies:
+    class-is "^1.1.0"
+    libp2p-crypto "^0.21.0"
+    multiformats "^9.4.5"
+    protobufjs "^6.10.2"
+    uint8arrays "^3.0.0"
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -13081,6 +13893,25 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.1.1.tgz#5ca85510a3019726cb9afed4197b7b8ac5926a22"
   integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
 
+protobufjs@^6.10.2, protobufjs@^6.11.2:
+  version "6.11.3"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.3.tgz#637a527205a35caa4f3e2a9a4a13ddffe0e7af74"
+  integrity sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/long" "^4.0.1"
+    "@types/node" ">=13.7.0"
+    long "^4.0.0"
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -13216,11 +14047,28 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 quick-lru@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+rabin-wasm@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/rabin-wasm/-/rabin-wasm-0.1.5.tgz#5b625ca007d6a2cbc1456c78ae71d550addbc9c9"
+  integrity sha512-uWgQTo7pim1Rnj5TuWcCewRDTf0PEFTSlaUjWP4eY9EbLV9em08v89oCz/WO+wRxpYuO36XEHp4wgYQnAgOHzA==
+  dependencies:
+    "@assemblyscript/loader" "^0.9.4"
+    bl "^5.0.0"
+    debug "^4.3.1"
+    minimist "^1.2.5"
+    node-fetch "^2.6.1"
+    readable-stream "^3.6.0"
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -13390,6 +14238,13 @@ react-markdown@^8.0.3:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-native-fetch-api@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-fetch-api/-/react-native-fetch-api-2.0.0.tgz#c4af188b4fce3f3eaf1f1ff4e61dae1a00d4ffa0"
+  integrity sha512-GOA8tc1EVYLnHvma/TU9VTgLOyralO7eATRuCDchQveXW9Fr9vXygyq9iwqmM7YRZ8qRJfEt9xOS7OYMdJvRFw==
+  dependencies:
+    p-defer "^3.0.0"
+
 react-query@^3.39.1:
   version "3.39.1"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.1.tgz#3876c0fdac7a3b5a84e195534e5fa8fbdd628847"
@@ -13602,6 +14457,25 @@ react@17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
 readable-stream@^1.0.33:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
@@ -13658,6 +14532,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+receptacle@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/receptacle/-/receptacle-1.3.2.tgz#a7994c7efafc7a01d0e2041839dab6c4951360d2"
+  integrity sha512-HrsFvqZZheusncQRiEE7GatOAETrARKV/lnfYicIm8lbvp/JQOdADOfhjBd2DajvoszEyxSM6RlAAIZgEoeu/A==
+  dependencies:
+    ms "^2.1.1"
+
 recharts-scale@^0.4.4:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
@@ -13951,6 +14832,15 @@ resolve@^1.1.6, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.10.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
@@ -13972,6 +14862,11 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+retimer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/retimer/-/retimer-2.0.0.tgz#e8bd68c5e5a8ec2f49ccb5c636db84c04063bbca"
+  integrity sha512-KLXY85WkEq2V2bKex/LOO1ViXVn2KGYe4PYysAdYdjmraYIUsVkXu8O4am+8+5UbaaGl1qho4aqAAPHNQ4GSbg==
+
 retry@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -14079,6 +14974,11 @@ sade@^1.7.3:
   dependencies:
     mri "^1.1.0"
 
+safari-14-idb-fix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-3.0.0.tgz#450fc049b996ec7f3fd9ca2f89d32e0761583440"
+  integrity sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog==
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -14221,22 +15121,22 @@ semaphore@>=1.0.1, semaphore@^1.0.3:
   resolved "https://registry.yarnpkg.com/semaphore/-/semaphore-1.1.0.tgz#aaad8b86b20fe8e9b32b16dc2ee682a8cd26a8aa"
   integrity sha512-O4OZEaNtkMd/K0i6js9SL+gqy0ZCBMgUvlSqHKi4IBdjhe7wB8pwztUk1BbZ1fmrvpwFrPbHzqd2w5pTcJH6LA==
 
+"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2, semver@^7.3.5, semver@^7.3.7:
+semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -14537,6 +15437,11 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
   integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
 
+sparse-array@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/sparse-array/-/sparse-array-1.3.2.tgz#0e1a8b71706d356bc916fe754ff496d450ec20b0"
+  integrity sha512-ZT711fePGn3+kQyLuv1fpd3rNSkNF8vd5Kv2D+qnOANeyKs3fx6bUMGWRPvgTTcYV64QMqZKZwcuaQSP3AZ0tg==
+
 spawnd@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/spawnd/-/spawnd-6.0.2.tgz#a2631cab24ce5e3525e720af4058f10a0905147c"
@@ -14546,6 +15451,32 @@ spawnd@^6.0.2:
     signal-exit "^3.0.6"
     tree-kill "^1.2.2"
 
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
+  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
+
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
@@ -14646,6 +15577,18 @@ stream-http@^3.2.0:
     readable-stream "^3.6.0"
     xtend "^4.0.2"
 
+stream-to-it@^0.2.2, stream-to-it@^0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/stream-to-it/-/stream-to-it-0.2.4.tgz#d2fd7bfbd4a899b4c0d6a7e6a533723af5749bd0"
+  integrity sha512-4vEbkSs83OahpmBybNJXlJd7d6/RxzkkSdT3I0mnGt79Xd2Kk+e1JqbvAvsQfCeKj3aKb0QIWkyK3/n0j506vQ==
+  dependencies:
+    get-iterator "^1.0.2"
+
+streaming-iterables@^6.0.0, streaming-iterables@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/streaming-iterables/-/streaming-iterables-6.2.0.tgz#e8079bc56272335b287e2f13274602fbef008e56"
+  integrity sha512-3AYC8oB60WyD1ic7uHmN/vm2oRGzRnQ3XFBl/bFMDi1q1+nc5/vjMmiE4vroIya3jG59t87VpyAj/iXYxyw9AA==
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
@@ -15092,6 +16035,11 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
+throttled-queue@^2.1.2:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/throttled-queue/-/throttled-queue-2.1.4.tgz#4e2008c73ab3f72ba1bb09496c3cc9c5b745dbee"
+  integrity sha512-YGdk8sdmr4ge3g+doFj/7RLF5kLM+Mi7DEciu9PHxnMJZMeVuZeTj31g4VE7ekUffx/IdbvrtOCiz62afg0mkg==
+
 through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -15102,6 +16050,19 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+timeout-abort-controller@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/timeout-abort-controller/-/timeout-abort-controller-1.1.1.tgz#2c3c3c66f13c783237987673c276cbd7a9762f29"
+  integrity sha512-BsF9i3NAJag6T0ZEjki9j654zoafI2X6ayuNd6Tp8+Ul6Tr5s4jo973qFeiWrRSweqvskC+AHDKUmIW4b7pdhQ==
+  dependencies:
+    abort-controller "^3.0.0"
+    retimer "^2.0.0"
+
+timestamp-nano@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/timestamp-nano/-/timestamp-nano-1.0.0.tgz#03bf0b43c2bdcb913a6a02fbaae6f97d68650f3a"
+  integrity sha512-NO/1CZigzlCWQiWdIGv8ebXt6Uk77zdLz2NE7KcZRU5Egj2+947lzUpk30xQUQlq5dRY25j7ZulG4RfA2DHYfA==
+
 tippy.js@^6.3.1:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
@@ -15189,6 +16150,11 @@ trim-lines@^3.0.0:
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
   integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
 
+trim-newlines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
+  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
+
 trough@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
@@ -15316,6 +16282,11 @@ type-fest@^0.16.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
   integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
 
+type-fest@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
+  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
+
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
@@ -15326,11 +16297,21 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
 type-fest@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
 type-graphql@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/type-graphql/-/type-graphql-1.1.1.tgz#dc0710d961713b92d3fee927981fa43bf71667a4"
@@ -15396,6 +16377,13 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
+uint8arrays@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.0.tgz#8186b8eafce68f28bd29bd29d683a311778901e2"
+  integrity sha512-ei5rfKtoRO8OyOIor2Rz5fhzjThwIHJZ3uyDPnDHTXbP0aMQ1RN/6AI5B5d9dBxJOU+BvOAk7ZQ1xphsX8Lrog==
+  dependencies:
+    multiformats "^9.4.2"
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -15611,7 +16599,7 @@ util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
-util@^0.12.0, util@^0.12.4:
+util@^0.12.0, util@^0.12.3, util@^0.12.4:
   version "0.12.4"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
   integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
@@ -15676,11 +16664,24 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
 validator@^13.7.0:
   version "13.7.0"
   resolved "https://registry.yarnpkg.com/validator/-/validator-13.7.0.tgz#4f9658ba13ba8f3d82ee881d3516489ea85c0857"
   integrity sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==
 
+varint@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/varint/-/varint-6.0.0.tgz#9881eb0ce8feaea6512439d19ddf84bf551661d0"
+  integrity sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -15788,6 +16789,20 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-encoding@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/web-encoding/-/web-encoding-1.1.5.tgz#fc810cf7667364a6335c939913f5051d3e0c4864"
+  integrity sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==
+  dependencies:
+    util "^0.12.3"
+  optionalDependencies:
+    "@zxing/text-encoding" "0.9.0"
+
+web-streams-polyfill@^3.1.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
+  integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
+
 web3-provider-engine@16.0.1:
   version "16.0.1"
   resolved "https://registry.yarnpkg.com/web3-provider-engine/-/web3-provider-engine-16.0.1.tgz#2600a39ede364cdc0a1fc773bf40a94f2177e605"
@@ -15816,6 +16831,28 @@ web3-provider-engine@16.0.1:
     xhr "^2.2.0"
     xtend "^4.0.1"
 
+web3.storage@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/web3.storage/-/web3.storage-4.3.0.tgz#88f778a0e2463701a1d2434e9835d930fa7aa18f"
+  integrity sha512-9IKn+4dyF7cMXC9etVzW3qmCV/6sL+Za4kcUUn7D3qRt4s1DrKUGJdAe9VvYcpHwbnnYoKNBu06lGO++daDo8w==
+  dependencies:
+    "@ipld/car" "^3.1.4"
+    "@web-std/blob" "^3.0.4"
+    "@web-std/fetch" "^3.0.3"
+    "@web-std/file" "^3.0.2"
+    "@web3-storage/parse-link-header" "^3.1.0"
+    browser-readablestream-to-it "^1.0.3"
+    carbites "^1.0.6"
+    cborg "^1.8.0"
+    files-from-path "^0.2.4"
+    ipfs-car "^0.7.0"
+    ipns "^0.16.0"
+    libp2p-crypto "^0.21.0"
+    p-retry "^4.5.0"
+    streaming-iterables "^6.2.0"
+    throttled-queue "^2.1.2"
+    uint8arrays "^3.0.0"
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -16399,7 +17436,7 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2:
+yargs-parser@^20.2.2, yargs-parser@^20.2.3:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==

From bdef463fe68bf0105d1c249e1a1e152e1e09dc5c Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 4 Aug 2022 18:44:16 -0500
Subject: [PATCH 037/113] wip - connected ipfs to form, needs cleanup

---
 src/helpers/Web3Storage.ts                    | 21 +++++++++++++++++--
 .../CreateProposal/CreateProposal.tsx         | 14 ++++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/helpers/Web3Storage.ts b/src/helpers/Web3Storage.ts
index 6c796ea22c..96afaa2d15 100644
--- a/src/helpers/Web3Storage.ts
+++ b/src/helpers/Web3Storage.ts
@@ -6,7 +6,7 @@ import { Environment } from "./environment/Environment/Environment";
 /**
  * uploads a given file to Web3.Storage with the API Key
  */
-const uploadToIPFS = async (files: Iterable<Filelike>) => {
+export const uploadToIPFS = async (files: Iterable<Filelike>) => {
   const accessToken = Environment.getWeb3StorageKey();
   if (accessToken) {
     // NOTE(appleseed): the below endpoint is required in typescript, it is simply the default from: https://github.com/web3-storage/web3.storage/blob/main/packages/client/src/lib.js#L92
@@ -17,11 +17,28 @@ const uploadToIPFS = async (files: Iterable<Filelike>) => {
   }
 };
 
+/**
+ * adhering to ERC-721 metadata standards & mimicking Lens.Protocol:
+ * @link https://docs.lens.xyz/docs/metadata-standards#metadata-structure
+ * @example
+ * ```
+ * {
+ *   name: "My Proposal",
+ *   description: "really long text",
+ *   content: "same as description",
+ *   external_url: "https://forum.wherever.com"
+ * }
+ * ```
+ */
+interface IProposalJson extends IProposalContent {
+  content: string;
+}
+
 /**
  * expects a js object, turns it into a json file
  * @returns an Iterable<Filelike>
  */
-const makeJsonFile = (object: IProposalContent): Iterable<Filelike> => {
+export const makeJsonFile = (object: IProposalJson): Iterable<Filelike> => {
   // You can create File objects from a Blob of binary data
   // see: https://developer.mozilla.org/en-US/docs/Web/API/Blob
   // Here we're just storing a JSON object, but you can store images,
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 16278e543b..c0db19088f 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -3,6 +3,7 @@ import "./CreateProposal.scss";
 import { Grid, MenuItem, Select, Typography } from "@mui/material";
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import { useState } from "react";
+import { makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
 
 import { BackButton } from "../BackButton";
 import { TextEntry } from "./components/TextEntry";
@@ -33,6 +34,17 @@ export const CreateProposal = () => {
     );
   };
 
+  const handleFormSubmission = async () => {
+    const files = makeJsonFile({
+      name: proposalTitle,
+      description: proposalDescription,
+      content: proposalDescription,
+      external_url: proposalDiscussion,
+    });
+    const cid = await uploadToIPFS(files);
+    console.log("after", cid);
+  };
+
   return (
     <div className="create-proposal-form">
       <Paper>
@@ -60,7 +72,7 @@ export const CreateProposal = () => {
               handleChange={setProposalContract}
             />
           </Grid>
-          <PrimaryButton className="continue-button" onClick={uploadToIPFS}>
+          <PrimaryButton className="continue-button" onClick={handleFormSubmission}>
             Continue
           </PrimaryButton>
         </Grid>

From cf3c5ea7a61467509b49a68d012a82d12ab4528a Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 19:47:04 -0500
Subject: [PATCH 038/113] updating creation form

---
 package.json                                  |   3 +-
 .../CreateProposal/CreateProposal.tsx         |  88 ++-
 .../CreateProposal/components/TextEntry.tsx   |  36 +-
 yarn.lock                                     | 630 +++++++++++++++++-
 4 files changed, 689 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index cffe702afa..8b0d811258 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@rainbow-me/rainbowkit": "^0.4.1",
     "@reduxjs/toolkit": "^1.8.2",
     "@types/material-ui": "^0.21.12",
+    "@uiw/react-md-editor": "^3.17.0",
     "@walletconnect/web3-provider": "^1.7.8",
     "axios": "^0.27.2",
     "class-validator": "^0.13.2",
@@ -53,6 +54,7 @@
     "ethers": "^5.6.9",
     "graphql": "^15.8.0",
     "graphql-request": "^4.3.0",
+    "markdown-it": "^13.0.1",
     "react": "17.0.2",
     "react-countdown": "^2.3.2",
     "react-dom": "17.0.2",
@@ -60,7 +62,6 @@
     "react-ga4": "^1.4.1",
     "react-is": "^18.2.0",
     "react-markdown": "^8.0.3",
-    "markdown-it": "^13.0.1",
     "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index cc7cbdf29b..6cd1b07598 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -1,8 +1,10 @@
 import "./CreateProposal.scss";
 
-import { Grid, MenuItem, Select, Typography } from "@mui/material";
+import { Box, Grid, InputLabel, Select, styled, Typography } from "@mui/material";
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
-import { useState } from "react";
+import MDEditor from "@uiw/react-md-editor";
+import { FC, useState } from "react";
+import ReactMarkdown from "react-markdown";
 
 import { BackButton } from "../BackButton";
 import { TextEntry } from "./components/TextEntry";
@@ -14,55 +16,71 @@ export const CreateProposal = () => {
   const [proposalAction, setProposalAction] = useState("installModule");
   const [proposalContract, setProposalContract] = useState("");
 
-  const selectionInput = () => {
+  const StyledInputLabel = styled(InputLabel)(() => ({
+    lineHeight: "24px",
+    fontSize: "15px",
+    marginBottom: "3px",
+  }));
+
+  const SelectionInput: FC = () => {
     return (
-      <Grid className="create-proposal-entry" container direction="column" xs={6}>
-        <Grid className="entry-title" item>
-          <Typography variant="body2">Action</Typography>
-        </Grid>
-        <Grid item>
-          <Select defaultValue="installModule" onChange={(e: any) => setProposalAction(e.target.value)} fullWidth>
-            <MenuItem value="installModule">Install Module</MenuItem>
-            <MenuItem value="upgradeModule">Upgrade Module</MenuItem>
-            <MenuItem value="approvePolicy">Approve Policy</MenuItem>
-            <MenuItem value="terminatePolicy">Terminate Policy</MenuItem>
-            <MenuItem value="changeExecutor">Change Executor</MenuItem>
+      <Grid item xs={6}>
+        <Box paddingTop="10px" paddingBottom="10px">
+          <StyledInputLabel>Action</StyledInputLabel>
+          <Select
+            key="action"
+            native={true}
+            defaultValue="installModule"
+            sx={{ blur: "none" }}
+            onChange={e => setProposalAction(e.target.value)}
+            fullWidth
+          >
+            <option value="installModule">Install Module</option>
+            <option value="upgradeModule">Upgrade Module</option>
+            <option value="approvePolicy">Approve Policy</option>
+            <option value="terminatePolicy">Terminate Policy</option>
+            <option value="changeExecutor">Change Executor</option>
           </Select>
-        </Grid>
+        </Box>
       </Grid>
     );
   };
 
   return (
-    <div className="create-proposal-form">
+    <Box display="flex" justifyContent="center">
       <Paper>
-        <Grid container direction="column" spacing={2}>
+        <Grid container direction="column" paddingLeft="4.5px" paddingRight="4.5px">
           <BackButton />
-          <TextEntry inputTitle="Title" gridSize={12} handleChange={setProposalTitle} />
-          <TextEntry
-            inputTitle="Description"
-            secondaryTitle={`${proposalDescription.length}/14,400`}
-            gridSize={12}
-            handleChange={setProposalDescription}
+          <TextEntry label="Title" handleChange={setProposalTitle} />
+          <StyledInputLabel>Description</StyledInputLabel>
+          <MDEditor
+            preview="edit"
+            value={proposalDescription}
+            onChange={value => value && setProposalDescription(value)}
+            height={400}
+            visibleDragbar={false}
           />
+          <Box display="flex" flexDirection="row" justifyContent="flex-end">
+            <Typography>{proposalDescription.length}/14,400</Typography>
+          </Box>
+          <ReactMarkdown children={proposalDescription} />
           <TextEntry
-            inputTitle="Discussion"
-            gridSize={12}
+            label="Discussion"
             placeholder="e.g. https://forum.olympusday.finance/..."
             handleChange={setProposalDiscussion}
           />
-          <Grid container direction="row">
-            {selectionInput()}
-            <TextEntry
-              inputTitle="Target"
-              placeholder="Contract address"
-              gridSize={6}
-              handleChange={setProposalContract}
-            />
+
+          <Grid container direction="row" spacing="10">
+            <SelectionInput />
+            <Grid item xs={6}>
+              <TextEntry label="Target" placeholder="Contract address" handleChange={setProposalContract} />
+            </Grid>
           </Grid>
-          <PrimaryButton className="continue-button">Continue</PrimaryButton>
         </Grid>
+        <Box display="flex" justifyContent="flex-end">
+          <PrimaryButton sx={{ marginLeft: "0px" }}>Continue</PrimaryButton>
+        </Box>
       </Paper>
-    </div>
+    </Box>
   );
 };
diff --git a/src/views/Governance/components/CreateProposal/components/TextEntry.tsx b/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
index 4461afcac9..9881a5bbb1 100644
--- a/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
+++ b/src/views/Governance/components/CreateProposal/components/TextEntry.tsx
@@ -1,35 +1,19 @@
-import { Grid, OutlinedInput, Typography } from "@mui/material";
+import { Box, styled } from "@mui/material";
+import { Input } from "@olympusdao/component-library";
 
 type TextEntryProps = {
-  inputTitle: string;
-  gridSize: number;
+  label: string;
   handleChange: (value: string) => void;
-  secondaryTitle?: string;
   placeholder?: string;
 };
 
-export const TextEntry = ({ inputTitle, gridSize, handleChange, secondaryTitle, placeholder }: TextEntryProps) => {
+const StyledProposalBox = styled(Box)(() => ({
+  padding: "10px 0px 10px 0px",
+}));
+export const TextEntry = ({ label, handleChange, placeholder }: TextEntryProps) => {
   return (
-    <Grid className="create-proposal-entry" direction="column" xs={gridSize}>
-      <Grid className="entry-title" container direction="row">
-        <Grid item>
-          <Typography variant="body2">{inputTitle}</Typography>
-        </Grid>
-        {secondaryTitle ? (
-          <Grid item>
-            <Typography variant="body2">{secondaryTitle}</Typography>
-          </Grid>
-        ) : (
-          <></>
-        )}
-      </Grid>
-      <Grid item>
-        <OutlinedInput
-          className="input-box"
-          placeholder={placeholder}
-          onChange={(e: any) => handleChange(e.target.value)}
-        />
-      </Grid>
-    </Grid>
+    <StyledProposalBox>
+      <Input id={label} label={label} placeholder={placeholder} onChange={(e: any) => handleChange(e.target.value)} />
+    </StyledProposalBox>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 9feded97cd..7511b10e82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1310,6 +1310,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.14.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -3581,6 +3588,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/parse5@^6.0.0":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
+  integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
+
 "@types/pbkdf2@^3.0.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/pbkdf2/-/pbkdf2-3.1.0.tgz#039a0e9b67da0cdc4ee5dab865caa6b267bb66b1"
@@ -3598,6 +3610,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.0.tgz#efcbd41937f9ae7434c714ab698604822d890759"
   integrity sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==
 
+"@types/prismjs@^1.0.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
@@ -3989,6 +4006,38 @@
     "@typescript-eslint/types" "5.30.0"
     eslint-visitor-keys "^3.3.0"
 
+"@uiw/copy-to-clipboard@~1.0.12":
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/@uiw/copy-to-clipboard/-/copy-to-clipboard-1.0.12.tgz#46f563bd6f3007895f95855e5b4bb692c7251933"
+  integrity sha512-3tt7FVSbjtBCNBhffy7k26rpnEmk8GQj9QkTGZBIfpHU7mG3Buryt69u6xooYM7/gmv7GIqD4QxxIauIp2HHKg==
+
+"@uiw/react-markdown-preview@^4.0.22":
+  version "4.0.23"
+  resolved "https://registry.yarnpkg.com/@uiw/react-markdown-preview/-/react-markdown-preview-4.0.23.tgz#aca92a33ef741325204d3db446110bf75a3b63c0"
+  integrity sha512-cmmd0pKQgr4ckIc3wmgnLfRHpp1D+DvXGfp+OiZmJ54VOR/WaFw03JLf2hNMj+Iqgwp+BlHu8W1DIAKDyUVjCw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@uiw/copy-to-clipboard" "~1.0.12"
+    react-markdown "~8.0.0"
+    rehype-attr "~2.0.7"
+    rehype-autolink-headings "~6.1.1"
+    rehype-ignore "^1.0.1"
+    rehype-prism-plus "1.4.1"
+    rehype-raw "~6.1.1"
+    rehype-rewrite "~3.0.6"
+    rehype-slug "~5.0.1"
+    remark-gfm "~3.0.1"
+    unist-util-visit "^4.1.0"
+
+"@uiw/react-md-editor@^3.17.0":
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/@uiw/react-md-editor/-/react-md-editor-3.17.0.tgz#ec130f6be6b9714bd9842760e0f70ab98d34e6c0"
+  integrity sha512-j5BziAZ7u68mkn+fahlcKb2Dv7ARd+JsqmCOffcriCW5IrWoaJEHjXdcDzuAOTOB1bP65EnSsfoO18Z720sAWg==
+  dependencies:
+    "@babel/runtime" "^7.14.6"
+    "@uiw/react-markdown-preview" "^4.0.22"
+    rehype "~12.0.1"
+
 "@ungap/promise-all-settled@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
@@ -5121,6 +5170,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
+bcp-47-match@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bcp-47-match/-/bcp-47-match-2.0.2.tgz#3323e221eb5b40ddc3b91ed29d847ab459d549c4"
+  integrity sha512-zy5swVXwQ25ttElhoN9Dgnqm6VFlMkeDNljvHSGqGNr4zClUosdFzxD+fQHJVmx3g3KY+r//wV/fmBHsa1ErnA==
+
 bcp-47@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/bcp-47/-/bcp-47-1.0.8.tgz#bf63ae4269faabe7c100deac0811121a48b6a561"
@@ -5487,6 +5541,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+ccount@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
 chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -5522,11 +5581,26 @@ char-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+character-entities-html4@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
+  integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
+
+character-entities-legacy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
+  integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
+
 character-entities@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
+character-reference-invalid@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
+  integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
+
 charcodes@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
@@ -6170,6 +6244,11 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-selector-parser@^1.0.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
+  integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -6656,6 +6735,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+direction@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/direction/-/direction-2.0.1.tgz#71800dd3c4fa102406502905d3866e65bdebb985"
+  integrity sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==
+
 dlv@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
@@ -7100,6 +7184,11 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -8368,6 +8457,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-slugger@^1.1.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
+  integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
+
 glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -8672,11 +8766,150 @@ hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-to-hyperscript@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-10.0.1.tgz#3decd7cb4654bca8883f6fcbd4fb3695628c4296"
+  integrity sha512-dhIVGoKCQVewFi+vz3Vt567E4ejMppS1haBRL6TEmeLeJVB1i/FJIIg/e6s1Bwn0g5qtYojHEKvyGA+OZuyifw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.3.0"
+    unist-util-is "^5.0.0"
+    web-namespaces "^2.0.0"
+
+hast-util-from-parse5@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-7.1.0.tgz#c129dd3a24dd8a867ab8a029ca47e27aa54864b7"
+  integrity sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/parse5" "^6.0.0"
+    "@types/unist" "^2.0.0"
+    hastscript "^7.0.0"
+    property-information "^6.0.0"
+    vfile "^5.0.0"
+    vfile-location "^4.0.0"
+    web-namespaces "^2.0.0"
+
+hast-util-has-property@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz#c15cd6180f3e535540739fcc9787bcffb5708cae"
+  integrity sha512-4Qf++8o5v14us4Muv3HRj+Er6wTNGA/N9uCaZMty4JWvyFKLdhULrv4KE1b65AthsSO9TXSZnjuxS8ecIyhb0w==
+
+hast-util-heading-rank@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-2.1.0.tgz#c39f34fa8330ebfec03a08b5d5019ed56122029c"
+  integrity sha512-w+Rw20Q/iWp2Bcnr6uTrYU6/ftZLbHKhvc8nM26VIWpDqDMlku2iXUVTeOlsdoih/UKQhY7PHQ+vZ0Aqq8bxtQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
+hast-util-is-element@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz#fc0b0dc7cef3895e839b8d66979d57b0338c68f3"
+  integrity sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+
+hast-util-parse-selector@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-3.1.0.tgz#a519e27e8b61bd5a98fad494ed06131ce68d9c3f"
+  integrity sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
+hast-util-raw@^7.2.0:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-7.2.2.tgz#1974360b2d7f15b5ce26c2a4bac892d5d8185a18"
+  integrity sha512-0x3BhhdlBcqRIKyc095lBSDvmQNMY3Eulj2PLsT5XCyKYrxssI5yr3P4Kv/PBo1s/DMkZy2voGkMXECnFCZRLQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/parse5" "^6.0.0"
+    hast-util-from-parse5 "^7.0.0"
+    hast-util-to-parse5 "^7.0.0"
+    html-void-elements "^2.0.0"
+    parse5 "^6.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+    vfile "^5.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
+hast-util-select@~5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/hast-util-select/-/hast-util-select-5.0.2.tgz#8c603ebacf0f47e154c5fa2e5b7efc520813866b"
+  integrity sha512-QGN5o7N8gq1BhUX96ApLE8izOXlf+IPkOVGXcp9Dskdd3w0OqZrn6faPAmS0/oVogwJOd0lWFSYmBK75e+030g==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+    bcp-47-match "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    css-selector-parser "^1.0.0"
+    direction "^2.0.0"
+    hast-util-has-property "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    hast-util-to-string "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    not "^0.1.0"
+    nth-check "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    unist-util-visit "^4.0.0"
+    zwitch "^2.0.0"
+
+hast-util-to-html@^8.0.0:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-8.0.3.tgz#4e37580872e143ea9ce0dba87918b19e4ea997e3"
+  integrity sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    ccount "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    html-void-elements "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    stringify-entities "^4.0.2"
+    unist-util-is "^5.0.0"
+
+hast-util-to-parse5@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-7.0.0.tgz#a39808e69005d10afeed1866029a1fb137df3f7c"
+  integrity sha512-YHiS6aTaZ3N0Q3nxaY/Tj98D6kM8QX5Q8xqgg8G45zR7PvWnPGPP0vcKCgb/moIydEJ/QWczVrX0JODCVeoV7A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/parse5" "^6.0.0"
+    hast-to-hyperscript "^10.0.0"
+    property-information "^6.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
+hast-util-to-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz#b008b0a4ea472bf34dd390b7eea1018726ae152a"
+  integrity sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
 hast-util-whitespace@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz#4fc1086467cc1ef5ba20673cb6b03cec3a970f1c"
   integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==
 
+hastscript@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-7.0.2.tgz#d811fc040817d91923448a28156463b2e40d590a"
+  integrity sha512-uA8ooUY4ipaBvKcMuPehTAB/YfFLSSzCwFSwT6ltJbocFUKH/GDHLN+tflq7lSRf9H86uOuxOFkh1KgIy3Gg2g==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-parse-selector "^3.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -8764,6 +8997,11 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
+html-void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
+  integrity sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
+
 html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
@@ -9076,6 +9314,11 @@ is-alphabetical@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
   integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
 
+is-alphabetical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
+  integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
+
 is-alphanumerical@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
@@ -9084,6 +9327,14 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
+is-alphanumerical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
+  integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==
+  dependencies:
+    is-alphabetical "^2.0.0"
+    is-decimal "^2.0.0"
+
 is-arguments@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -9153,6 +9404,11 @@ is-decimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
   integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
 
+is-decimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
+  integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
+
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
@@ -9229,6 +9485,11 @@ is-hex-prefixed@1.0.0:
   resolved "https://registry.yarnpkg.com/is-hex-prefixed/-/is-hex-prefixed-1.0.0.tgz#7d8d37e6ad77e5d127148913c573e082d777f554"
   integrity sha1-fY035q135dEnFIkTxXPggtd39VQ=
 
+is-hexadecimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
+  integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
+
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
@@ -11070,6 +11331,11 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+longest-streak@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.0.1.tgz#c97315b7afa0e7d9525db9a5a2953651432bdc5d"
+  integrity sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -11155,6 +11421,11 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+markdown-table@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.2.tgz#9b59eb2c1b22fe71954a65ff512887065a7bb57c"
+  integrity sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==
+
 match-sorter@^6.0.2:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
@@ -11193,6 +11464,15 @@ mdast-util-definitions@^5.0.0:
     "@types/unist" "^2.0.0"
     unist-util-visit "^4.0.0"
 
+mdast-util-find-and-replace@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.1.tgz#249901ef43c5f41d6e8a8d446b3b63b17e592d7c"
+  integrity sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==
+  dependencies:
+    escape-string-regexp "^5.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
 mdast-util-from-markdown@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz#84df2924ccc6c995dec1e2368b2b208ad0a76268"
@@ -11211,6 +11491,63 @@ mdast-util-from-markdown@^1.0.0:
     unist-util-stringify-position "^3.0.0"
     uvu "^0.5.0"
 
+mdast-util-gfm-autolink-literal@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.2.tgz#4032dcbaddaef7d4f2f3768ed830475bb22d3970"
+  integrity sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    ccount "^2.0.0"
+    mdast-util-find-and-replace "^2.0.0"
+    micromark-util-character "^1.0.0"
+
+mdast-util-gfm-footnote@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.1.tgz#11d2d40a1a673a399c459e467fa85e00223191fe"
+  integrity sha512-p+PrYlkw9DeCRkTVw1duWqPRHX6Ywh2BNKJQcZbCwAuP/59B0Lk9kakuAd7KbQprVO4GzdW8eS5++A9PUSqIyw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+    micromark-util-normalize-identifier "^1.0.0"
+
+mdast-util-gfm-strikethrough@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.1.tgz#a4a74c36864ec6a6e3bbd31e1977f29beb475789"
+  integrity sha512-zKJbEPe+JP6EUv0mZ0tQUyLQOC+FADt0bARldONot/nefuISkaZFlmVK4tU6JgfyZGrky02m/I6PmehgAgZgqg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm-table@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.4.tgz#0dbb25f04fd9c0877dc63b76203ecbdf5d945755"
+  integrity sha512-aEuoPwZyP4iIMkf2cLWXxx3EQ6Bmh2yKy9MVCg4i6Sd3cX80dcLEfXO/V4ul3pGH9czBK4kp+FAl+ZHmSUt9/w==
+  dependencies:
+    markdown-table "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm-task-list-item@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.1.tgz#6f35f09c6e2bcbe88af62fdea02ac199cc802c5c"
+  integrity sha512-KZ4KLmPdABXOsfnM6JHUIjxEvcx2ulk656Z/4Balw071/5qgnhz+H1uGtf2zIGnrnvDC8xR4Fj9uKbjAFGNIeA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-2.0.1.tgz#16fcf70110ae689a06d77e8f4e346223b64a0ea6"
+  integrity sha512-42yHBbfWIFisaAfV1eixlabbsa6q7vHeSPY+cg+BBjX51M8xhgMacqH9g6TftB/9+YkcI0ooV4ncfrJslzm/RQ==
+  dependencies:
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-gfm-autolink-literal "^1.0.0"
+    mdast-util-gfm-footnote "^1.0.0"
+    mdast-util-gfm-strikethrough "^1.0.0"
+    mdast-util-gfm-table "^1.0.0"
+    mdast-util-gfm-task-list-item "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
 mdast-util-to-hast@^12.1.0:
   version "12.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.2.0.tgz#4dbff7ab2b20b8d12fc8fe98bf804d97e7358cbf"
@@ -11228,7 +11565,20 @@ mdast-util-to-hast@^12.1.0:
     unist-util-position "^4.0.0"
     unist-util-visit "^4.0.0"
 
-mdast-util-to-string@^3.1.0:
+mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.3.0.tgz#38b6cdc8dc417de642a469c4fc2abdf8c931bd1e"
+  integrity sha512-6tUSs4r+KK4JGTTiQ7FfHmVOaDrLQJPmpjD6wPMlHGUVXoG9Vjc3jIeP+uyBWRf8clwB2blM+W7+KrlMYQnftA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    longest-streak "^3.0.0"
+    mdast-util-to-string "^3.0.0"
+    micromark-util-decode-string "^1.0.0"
+    unist-util-visit "^4.0.0"
+    zwitch "^2.0.0"
+
+mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
   integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
@@ -11349,7 +11699,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromark-core-commonmark@^1.0.1:
+micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad"
   integrity sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==
@@ -11371,6 +11721,86 @@ micromark-core-commonmark@^1.0.1:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
+micromark-extension-gfm-autolink-literal@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.3.tgz#dc589f9c37eaff31a175bab49f12290edcf96058"
+  integrity sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-footnote@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.0.4.tgz#cbfd8873b983e820c494498c6dac0105920818d5"
+  integrity sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==
+  dependencies:
+    micromark-core-commonmark "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-strikethrough@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.4.tgz#162232c284ffbedd8c74e59c1525bda217295e18"
+  integrity sha512-/vjHU/lalmjZCT5xt7CcHVJGq8sYRm80z24qAKXzaHzem/xsDYb2yLL+NNVbYvmpLx3O7SYPuGL5pzusL9CLIQ==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-table@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.5.tgz#7b708b728f8dc4d95d486b9e7a2262f9cddbcbb4"
+  integrity sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-tagfilter@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.1.tgz#fb2e303f7daf616db428bb6a26e18fda14a90a4d"
+  integrity sha512-Ty6psLAcAjboRa/UKUbbUcwjVAv5plxmpUTy2XC/3nJFL37eHej8jrHrRzkqcpipJliuBH30DTs7+3wqNcQUVA==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-extension-gfm-task-list-item@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.3.tgz#7683641df5d4a09795f353574d7f7f66e47b7fc4"
+  integrity sha512-PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz#40f3209216127a96297c54c67f5edc7ef2d1a2a2"
+  integrity sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==
+  dependencies:
+    micromark-extension-gfm-autolink-literal "^1.0.0"
+    micromark-extension-gfm-footnote "^1.0.0"
+    micromark-extension-gfm-strikethrough "^1.0.0"
+    micromark-extension-gfm-table "^1.0.0"
+    micromark-extension-gfm-tagfilter "^1.0.0"
+    micromark-extension-gfm-task-list-item "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-types "^1.0.0"
+
 micromark-factory-destination@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz#fef1cb59ad4997c496f887b6977aa3034a5a277e"
@@ -11864,6 +12294,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+not@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/not/-/not-0.1.0.tgz#c9691c1746c55dcfbe54cbd8bd4ff041bc2b519d"
+  integrity sha512-5PDmaAsVfnWUgTUbJ3ERwn7u79Z0dYxN9ErxCpVJJqe2RK0PJ3z+iFUxuqjwtlDDegXvtWoxD/3Fzxox7tFGWA==
+
 npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
@@ -11885,6 +12320,13 @@ nth-check@^1.0.2:
   dependencies:
     boolbase "~1.0.0"
 
+nth-check@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nth-check@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
@@ -12207,6 +12649,20 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-entities@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.0.tgz#f67c856d4e3fe19b1a445c3fabe78dcdc1053eeb"
+  integrity sha512-5nk9Fn03x3rEhGaX1FU6IDwG/k+GxLXlFAkgrbM1asuAFl3BhdQWvASaIsmwWypRNcZKHPYnIuOSfIWEyEQnPQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    character-entities "^2.0.0"
+    character-entities-legacy "^3.0.0"
+    character-reference-invalid "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    is-alphanumerical "^2.0.0"
+    is-decimal "^2.0.0"
+    is-hexadecimal "^2.0.0"
+
 parse-headers@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.4.tgz#9eaf2d02bed2d1eff494331ce3df36d7924760bf"
@@ -12222,12 +12678,17 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-numeric-range@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz#7c63b61190d61e4d53a1197f0c83c47bb670ffa3"
+  integrity sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
-parse5@6.0.1:
+parse5@6.0.1, parse5@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -13369,7 +13830,7 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@^8.0.3:
+react-markdown@^8.0.3, react-markdown@~8.0.0:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.3.tgz#e8aba0d2f5a1b2124d476ee1fff9448a2f57e4b3"
   integrity sha512-We36SfqaKoVNpN1QqsZwWSv/OZt5J15LNgTLWynwAN5b265hrQrsjMtlRNwUvS+YyR3yDM8HpTNc4pK9H/Gc0A==
@@ -13729,6 +14190,16 @@ redux@^4.1.2:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+refractor@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-4.7.0.tgz#aad649d7857acdc0d5792f1a7900867256941ac0"
+  integrity sha512-X3JUDE7nq1csWs7Etg5v7hW10RzF4lYesEn/KDbllocj0itZrs3paO2ZEgYUXrlgXzY3IN+eDRByyIvzcfF9Tg==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/prismjs" "^1.0.0"
+    hastscript "^7.0.0"
+    parse-entities "^4.0.0"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -13803,11 +14274,123 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-attr@~2.0.7:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/rehype-attr/-/rehype-attr-2.0.8.tgz#d3d0120d241ae8982e73dc3ae18eae419d3918c7"
+  integrity sha512-EISuHQNPUN2InK+R1tmiAp3IxvNw4utF3MY6+6QoltAXwSqgvC3RVhfaOVUxyakTb4KJmfii3s0b/a7DlQYZTg==
+  dependencies:
+    unified "~10.1.1"
+    unist-util-visit "~4.1.0"
+
+rehype-autolink-headings@~6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/rehype-autolink-headings/-/rehype-autolink-headings-6.1.1.tgz#0cb874a56f3de6ead1c2268d7f0fc5006f244db5"
+  integrity sha512-NMYzZIsHM3sA14nC5rAFuUPIOfg+DFmf9EY1YMhaNlB7+3kK/ZlE6kqPfuxr1tsJ1XWkTrMtMoyHosU70d35mA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    extend "^3.0.0"
+    hast-util-has-property "^2.0.0"
+    hast-util-heading-rank "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+
+rehype-ignore@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-ignore/-/rehype-ignore-1.0.1.tgz#94975a1ecb006e6b718bbb98c99bf6588660a77c"
+  integrity sha512-NTio4u/QWk3wLargxk70nntVPR7yfJR66ISCJAYje1iZqKiedkNKkMfATFwXW0yynqoFbT1w+R6Xs0GtXIAjDA==
+  dependencies:
+    hast-util-select "~5.0.1"
+    unified "~10.1.2"
+    unist-util-visit "~4.1.0"
+
+rehype-parse@^8.0.0, rehype-parse@^8.0.2:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-8.0.4.tgz#3d17c9ff16ddfef6bbcc8e6a25a99467b482d688"
+  integrity sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-from-parse5 "^7.0.0"
+    parse5 "^6.0.0"
+    unified "^10.0.0"
+
+rehype-prism-plus@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/rehype-prism-plus/-/rehype-prism-plus-1.4.1.tgz#abe8ab7ccee3a5e912f592dc0991b271ebfaf102"
+  integrity sha512-CRRplleECLeroPuNBsWnzzFAYZz6bBKkwhh5PtWxr2OaJCTy1XLNrpBbyKp71tHgyFwmk9NKYSFzg5gdMbtJ/w==
+  dependencies:
+    hast-util-to-string "^2.0.0"
+    parse-numeric-range "^1.3.0"
+    refractor "^4.7.0"
+    rehype-parse "^8.0.2"
+    unist-util-filter "^4.0.0"
+    unist-util-visit "^4.0.0"
+
+rehype-raw@~6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-6.1.1.tgz#81bbef3793bd7abacc6bf8335879d1b6c868c9d4"
+  integrity sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-raw "^7.2.0"
+    unified "^10.0.0"
+
+rehype-rewrite@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/rehype-rewrite/-/rehype-rewrite-3.0.6.tgz#21e86982c7f2c169121bf10dd191f3768c6a6b29"
+  integrity sha512-REDTNCvsKcAazy8IQWzKp66AhSUDSOIKssSCqNqCcT9sN7JCwAAm3mWGTUdUzq80ABuy8d0D6RBwbnewu1aY1g==
+  dependencies:
+    hast-util-select "~5.0.1"
+    unified "~10.1.1"
+    unist-util-visit "~4.1.0"
+
+rehype-slug@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-5.0.1.tgz#6e732d0c55b3b1e34187e74b7363fb53229e5f52"
+  integrity sha512-X5v3wV/meuOX9NFcGhJvUpEjIvQl2gDvjg3z40RVprYFt7q3th4qMmYLULiu3gXvbNX1ppx+oaa6JyY1W67pTA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    github-slugger "^1.1.1"
+    hast-util-has-property "^2.0.0"
+    hast-util-heading-rank "^2.0.0"
+    hast-util-to-string "^2.0.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+
+rehype-stringify@^9.0.0:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-9.0.3.tgz#70e3bd6d4d29e7acf36b802deed350305d2c3c17"
+  integrity sha512-kWiZ1bgyWlgOxpqD5HnxShKAdXtb2IUljn3hQAhySeak6IOQPPt6DeGnsIh4ixm7yKJWzm8TXFuC/lPfcWHJqw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-to-html "^8.0.0"
+    unified "^10.0.0"
+
+rehype@~12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/rehype/-/rehype-12.0.1.tgz#68a317662576dcaa2565a3952e149d6900096bf6"
+  integrity sha512-ey6kAqwLM3X6QnMDILJthGvG1m1ULROS9NT4uG9IDCuv08SFyLlreSuvOa//DgEvbXx62DS6elGVqusWhRUbgw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    rehype-parse "^8.0.0"
+    rehype-stringify "^9.0.0"
+    unified "^10.0.0"
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-gfm@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"
+  integrity sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-gfm "^2.0.0"
+    micromark-extension-gfm "^2.0.0"
+    unified "^10.0.0"
+
 remark-parse@^10.0.0:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
@@ -14776,6 +15359,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-entities@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.3.tgz#cfabd7039d22ad30f3cc435b0ca2c1574fc88ef8"
+  integrity sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==
+  dependencies:
+    character-entities-html4 "^2.0.0"
+    character-entities-legacy "^3.0.0"
+
 stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
@@ -15452,7 +16043,7 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
   integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
-unified@^10.0.0:
+unified@^10.0.0, unified@~10.1.1, unified@~10.1.2:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
   integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
@@ -15479,6 +16070,15 @@ unist-builder@^3.0.0:
   dependencies:
     "@types/unist" "^2.0.0"
 
+unist-util-filter@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-filter/-/unist-util-filter-4.0.0.tgz#59bc7960bb2cfd34cc086301090540bdb5580a86"
+  integrity sha512-H4iTOv2p+n83xjhx7eGFA3zSx7Xcv3Iv9lNQRpXiR8dmm9LtslhyjVlQrZLbkk4jwUrJgc8PPGkOOrfhb76s4Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
 unist-util-generated@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.0.tgz#86fafb77eb6ce9bfa6b663c3f5ad4f8e56a60113"
@@ -15511,7 +16111,7 @@ unist-util-visit-parents@^5.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^5.0.0"
 
-unist-util-visit@^4.0.0:
+unist-util-visit@^4.0.0, unist-util-visit@^4.1.0, unist-util-visit@~4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
   integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
@@ -15695,6 +16295,14 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-location@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-4.0.1.tgz#06f2b9244a3565bef91f099359486a08b10d3a95"
+  integrity sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    vfile "^5.0.0"
+
 vfile-message@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.2.tgz#a2908f64d9e557315ec9d7ea3a910f658ac05f7d"
@@ -15788,6 +16396,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-namespaces@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
+  integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
+
 web3-provider-engine@16.0.1:
   version "16.0.1"
   resolved "https://registry.yarnpkg.com/web3-provider-engine/-/web3-provider-engine-16.0.1.tgz#2600a39ede364cdc0a1fc773bf40a94f2177e605"
@@ -16514,3 +17127,8 @@ zustand@^4.0.0-rc.1:
   integrity sha512-qgcs7zLqBdHu0PuT3GW4WCIY5SgXdsv30GQMu9Qpp1BA2aS+sNS8l4x0hWuyEhjXkN+701aGWawhKDv6oWJAcw==
   dependencies:
     use-sync-external-store "1.1.0"
+
+zwitch@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.2.tgz#91f8d0e901ffa3d66599756dde7f57b17c95dce1"
+  integrity sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==

From 316947e05d8d152f6fba45b3d5cf0d7518d2d0d0 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 20:06:48 -0500
Subject: [PATCH 039/113] refactor markdown preview to reusable component

---
 .../CreateProposal/CreateProposal.tsx         |  6 ++---
 .../MarkdownPreview/MarkdownPreview.tsx       | 22 +++++++++++++++++++
 .../components/MarkdownPreview/index.tsx      |  1 +
 .../components/PollDetailsTab.tsx             | 22 +++++--------------
 4 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
 create mode 100644 src/views/Governance/components/MarkdownPreview/index.tsx

diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index f4277a8d40..1895e3b718 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -1,13 +1,11 @@
-import "./CreateProposal.scss";
-
 import { Box, Grid, InputLabel, Select, styled, Typography } from "@mui/material";
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import MDEditor from "@uiw/react-md-editor";
 import { FC, useState } from "react";
-import ReactMarkdown from "react-markdown";
 import { makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
 
 import { BackButton } from "../BackButton";
+import { MarkdownPreview } from "../MarkdownPreview";
 import { TextEntry } from "./components/TextEntry";
 
 export const CreateProposal = () => {
@@ -75,7 +73,7 @@ export const CreateProposal = () => {
           <Box display="flex" flexDirection="row" justifyContent="flex-end">
             <Typography>{proposalDescription.length}/14,400</Typography>
           </Box>
-          <ReactMarkdown children={proposalDescription} />
+          <MarkdownPreview content={proposalDescription} />
           <TextEntry
             label="Discussion"
             placeholder="e.g. https://forum.olympusday.finance/..."
diff --git a/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx b/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
new file mode 100644
index 0000000000..1621afa70b
--- /dev/null
+++ b/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
@@ -0,0 +1,22 @@
+import { Box, Link, styled } from "@mui/material";
+import ReactMarkdown from "react-markdown";
+
+export const MarkdownPreview = (props: { content: string }) => {
+  const { content } = props;
+  const StyledBoxItem = styled(Box)(() => ({
+    "p > img": {
+      maxWidth: "100%",
+    },
+  }));
+
+  return (
+    <StyledBoxItem>
+      <ReactMarkdown
+        components={{
+          a: Link,
+        }}
+        children={content}
+      />
+    </StyledBoxItem>
+  );
+};
diff --git a/src/views/Governance/components/MarkdownPreview/index.tsx b/src/views/Governance/components/MarkdownPreview/index.tsx
new file mode 100644
index 0000000000..094a9e46f0
--- /dev/null
+++ b/src/views/Governance/components/MarkdownPreview/index.tsx
@@ -0,0 +1 @@
+export { MarkdownPreview } from "./MarkdownPreview";
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index c589d5f60b..cc9fcfe95f 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,25 +1,15 @@
-import { Grid, Link, styled } from "@mui/material";
+import { Grid } from "@mui/material";
 import { TextButton } from "@olympusdao/component-library";
-import ReactMarkdown from "react-markdown";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
-export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
-  const StyledGridItem = styled(Grid)(() => ({
-    "p > img": {
-      maxWidth: "100%",
-    },
-  }));
+import { MarkdownPreview } from "../../MarkdownPreview";
 
+export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
   return (
     <Grid container direction="column">
-      <StyledGridItem item>
-        <ReactMarkdown
-          components={{
-            a: Link,
-          }}
-          children={proposal.content}
-        />
-      </StyledGridItem>
+      <Grid item>
+        <MarkdownPreview content={proposal.content} />
+      </Grid>
       <Grid className="discussion-button" item>
         <TextButton href={proposal.uri} endIconName="arrow-up">
           Discussion

From d6b4d8a25689daf14ff2fa4f069b5d9020402e99 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Thu, 4 Aug 2022 21:54:43 -0500
Subject: [PATCH 040/113] allowedImgDomains list. Hides proposal images by
 default that arent on approved domain lists

---
 .../MarkdownPreview/MarkdownPreview.tsx       | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx b/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
index 1621afa70b..1e6736e3c8 100644
--- a/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
+++ b/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
@@ -1,4 +1,6 @@
-import { Box, Link, styled } from "@mui/material";
+import { Box, Link, styled, useTheme } from "@mui/material";
+import { TertiaryButton } from "@olympusdao/component-library";
+import { ClassAttributes, ImgHTMLAttributes, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
 export const MarkdownPreview = (props: { content: string }) => {
@@ -9,11 +11,40 @@ export const MarkdownPreview = (props: { content: string }) => {
     },
   }));
 
+  const allowedImgDomains = ["i.imgur.com"];
+  const PreviewImage = (
+    props: JSX.IntrinsicAttributes & ClassAttributes<HTMLImageElement> & ImgHTMLAttributes<HTMLImageElement>,
+  ) => {
+    const srcUrl = new URL(props.src ? props.src : "");
+
+    const whitelistedDomain = allowedImgDomains.find(domain => domain === srcUrl.hostname);
+
+    const returnedComponent = whitelistedDomain ? <img {...props} /> : <Warning {...props} />;
+    return returnedComponent;
+  };
+
+  const Warning = (props: any) => {
+    const theme = useTheme();
+    const [displayImage, setDisplayImage] = useState(false);
+    return displayImage ? (
+      <img {...props} />
+    ) : (
+      <Box display="flex" border={`1px dashed ${theme.colors.gray[10]}`} padding="40px" justifyContent="center">
+        <Box display="flex" flexDirection="column">
+          Image is not hosted on an approved pinning domain. Image may have been updated after proposal submission.
+          <Box display="flex" mt="25px" justifyContent="center">
+            <TertiaryButton onClick={() => setDisplayImage(true)}>View Image Anyway</TertiaryButton>
+          </Box>
+        </Box>
+      </Box>
+    );
+  };
   return (
     <StyledBoxItem>
       <ReactMarkdown
         components={{
           a: Link,
+          img: ({ node, ...props }) => <PreviewImage {...props} />,
         }}
         children={content}
       />

From 06c4ffa3f5d8879f2d6d645943e276a10c569243 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 5 Aug 2022 11:37:28 -0500
Subject: [PATCH 041/113] refactor / update proposal view based on latest
 design

---
 src/themes/global.js                          |  3 +
 .../components/BackButton/BackButton.scss     | 17 ----
 .../components/BackButton/BackButton.tsx      | 15 ++--
 .../components/ProposalPage/ProposalPage.scss | 79 ------------------
 .../components/ProposalPage/ProposalPage.tsx  | 82 ++++++++++---------
 .../components/PollDetailsTab.tsx             | 23 +++---
 6 files changed, 66 insertions(+), 153 deletions(-)
 delete mode 100644 src/views/Governance/components/BackButton/BackButton.scss
 delete mode 100644 src/views/Governance/components/ProposalPage/ProposalPage.scss

diff --git a/src/themes/global.js b/src/themes/global.js
index 8356c2c086..22a939239b 100644
--- a/src/themes/global.js
+++ b/src/themes/global.js
@@ -231,6 +231,9 @@ const commonSettings = {
     MuiTab: {
       styleOverrides: {
         root: {
+          "&.MuiTab-root": {
+            fontSize: "15px",
+          },
           minWidth: "min-content !important",
           padding: "0px",
           margin: "0px 10px",
diff --git a/src/views/Governance/components/BackButton/BackButton.scss b/src/views/Governance/components/BackButton/BackButton.scss
deleted file mode 100644
index f62ce0f6d3..0000000000
--- a/src/views/Governance/components/BackButton/BackButton.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.back-button {
-  display: flex;
-  justify-content: flex-start;
-
-  .MuiLink-root {
-    display: flex;
-    align-items: center;
-  }
-
-  .MuiButton-root {
-    padding-left: 9px;
-  }
-
-  .css-ihuj2u-MuiTypography-root-MuiLink-root.active {
-    text-decoration: none;
-  }
-}
diff --git a/src/views/Governance/components/BackButton/BackButton.tsx b/src/views/Governance/components/BackButton/BackButton.tsx
index 5d62bbddef..e46f50afd0 100644
--- a/src/views/Governance/components/BackButton/BackButton.tsx
+++ b/src/views/Governance/components/BackButton/BackButton.tsx
@@ -1,16 +1,19 @@
-import "./BackButton.scss";
-
 import { ChevronLeft } from "@mui/icons-material";
-import { Grid, Link } from "@mui/material";
-import { TextButton } from "@olympusdao/component-library";
+import { Box, Grid, Link, Typography } from "@mui/material";
 import { Link as RouterLink } from "react-router-dom";
 
 export const BackButton = () => {
   return (
     <Grid className="back-button" item>
       <Link to="/governancetest" component={RouterLink}>
-        <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
-        <TextButton>Back</TextButton>
+        <Box display="flex" flexDirection="row">
+          <Box pr="9px">
+            <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
+          </Box>
+          <Typography fontSize="15px" fontWeight={500}>
+            Back
+          </Typography>
+        </Box>
       </Link>
     </Grid>
   );
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
deleted file mode 100644
index 376172c8d7..0000000000
--- a/src/views/Governance/components/ProposalPage/ProposalPage.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.proposal-page {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-
-  // temporary paper fix
-  .MuiPaper-root > .MuiGrid-container > .MuiGrid-item {
-    width: 100%;
-  }
-  .page-content {
-    .navigation {
-      margin-bottom: 30px;
-    }
-  }
-
-  .proposal-header {
-    margin-bottom: 36px;
-  }
-
-  .published-date {
-    margin-top: 6px;
-    margin-bottom: 4px;
-    line-height: 18px;
-  }
-
-  .proposal-title {
-    line-height: 32px;
-    font-weight: 700;
-  }
-
-  #simple-tab-0 {
-    margin-left: 0px;
-  }
-
-  #simple-tabpanel-0 {
-    .MuiBox-root {
-      padding-left: 0px;
-    }
-  }
-
-  #simple-tabpanel-1 {
-    width: 100%;
-
-    .cast-vote-header {
-      margin-bottom: 6px;
-    }
-
-    .install-location {
-      margin-bottom: 20px;
-    }
-
-    .vote-submission-section {
-      margin-bottom: 45px;
-    }
-
-    .your-comment {
-      width: 100%;
-    }
-
-    .vote-breakdown {
-      margin-bottom: 27px;
-
-      .PaperCard-container {
-        padding: 18px;
-      }
-    }
-
-    .MuiBox-root {
-      padding-left: 0px;
-    }
-  }
-
-  .discussion-button {
-    .MuiButton-root {
-      margin-left: 0px;
-      padding-left: 0px;
-    }
-  }
-}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 0f2c35fdaf..1294e0a39b 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,8 +1,16 @@
-import "./ProposalPage.scss";
-
 import { t } from "@lingui/macro";
 import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
-import { Chip, Icon, OHMChipProps, Paper, SecondaryButton, Tab, TabPanel, Tabs } from "@olympusdao/component-library";
+import {
+  Chip,
+  Icon,
+  OHMChipProps,
+  Paper,
+  PrimaryButton,
+  SecondaryButton,
+  Tab,
+  TabPanel,
+  Tabs,
+} from "@olympusdao/component-library";
 import { useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
@@ -61,59 +69,52 @@ export const ProposalPage = () => {
 
   const proposalHeader = () => {
     return (
-      <Grid className="proposal-header" container direction="column">
+      <Grid container direction="column" pt="9px" mb="9px">
         <Grid item>
-          <Typography className="published-date" variant="body2" color={theme.colors.gray[90]}>
+          <Typography lineHeight="18px" variant="body2" color={theme.colors.gray[90]}>
             Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
             <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
           </Typography>
         </Grid>
         <Grid item>
-          <Typography className="proposal-title" variant="h4">
+          <Typography fontSize="24px" lineHeight="32px" fontWeight={700}>
             {proposal.proposalName}
           </Typography>
         </Grid>
-        <Grid container direction="row" alignItems="center">
-          <Grid item>
-            <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
-          </Grid>
-          <Grid item>
-            <Box pl="9px" display="flex">
-              {proposal.timeRemaining && (
-                <>
-                  <Icon name="timeLeft" style={{ fontSize: "18px", fill: theme.colors.gray[90] }} />
-                  <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                    {`Ends in ${prettifySeconds(proposal.timeRemaining / 1000)}`}
-                  </Typography>
-                </>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
+        <Box display="flex" flexDirection="row" mt="4px">
+          <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
+          <Box pl="9px" display="flex" alignItems="center">
+            {proposal.timeRemaining && (
+              <>
+                <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
+                <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+                  {`Ends in ${prettifySeconds(proposal.timeRemaining / 1000)}`}
+                </Typography>
+              </>
+            )}
+          </Box>
+        </Box>
       </Grid>
     );
   };
 
   return (
-    <div className="proposal-page">
+    <Box display="flex" justifyContent="center">
       <Paper>
-        <Box className="page-content">
-          <Box
-            display="flex"
-            className="navigation"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <BackButton />
-            <Box>
+        <Box>
+          <BackButton />
+          <Grid container mb="10px">
+            <Grid item sm={6}>
+              {proposalHeader()}
+            </Grid>
+            <Grid display="flex" item sm={6} justifyContent="flex-end">
               <Link to="/governancetest/create-proposal" component={RouterLink}>
                 <SecondaryButton>Create new proposal</SecondaryButton>
               </Link>
-            </Box>
-          </Box>
-          {proposalHeader()}
-          <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
+              <PrimaryButton>Delegate Vote</PrimaryButton>
+            </Grid>
+          </Grid>
+          <Box display="flex" justifyContent="center">
             <Tabs
               centered
               value={selectedIndex}
@@ -123,7 +124,8 @@ export const ProposalPage = () => {
               <Tab label={t`Poll Detail`}></Tab>
               <Tab label={t`Votes`}></Tab>
             </Tabs>
-
+          </Box>
+          <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
             <TabPanel value={selectedIndex} index={0}>
               <PollDetailsTab proposal={proposal} />
             </TabPanel>
@@ -133,6 +135,6 @@ export const ProposalPage = () => {
           </Grid>
         </Box>
       </Paper>
-    </div>
+    </Box>
   );
 };
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index cc9fcfe95f..5b1917514b 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,20 +1,21 @@
-import { Grid } from "@mui/material";
-import { TextButton } from "@olympusdao/component-library";
+import { Box } from "@mui/material";
+import { Paper, TertiaryButton } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 import { MarkdownPreview } from "../../MarkdownPreview";
 
 export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
   return (
-    <Grid container direction="column">
-      <Grid item>
+    <Paper enableBackground fullWidth>
+      <Box display="flex" flexDirection="column">
         <MarkdownPreview content={proposal.content} />
-      </Grid>
-      <Grid className="discussion-button" item>
-        <TextButton href={proposal.uri} endIconName="arrow-up">
-          Discussion
-        </TextButton>
-      </Grid>
-    </Grid>
+
+        <Box display="flex" flexDirection="row" justifyContent="flex-end">
+          <TertiaryButton target="_blank" href={proposal.uri}>
+            Discussion
+          </TertiaryButton>
+        </Box>
+      </Box>
+    </Paper>
   );
 };

From 8d1b3b59a3a0e0d8721ad705a4c592f97ad268e0 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 5 Aug 2022 11:54:34 -0500
Subject: [PATCH 042/113] full width for vote page

---
 .../Governance/components/ProposalPage/ProposalPage.scss      | 3 +++
 src/views/Governance/components/ProposalPage/ProposalPage.tsx | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Governance/components/ProposalPage/ProposalPage.scss

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.scss b/src/views/Governance/components/ProposalPage/ProposalPage.scss
new file mode 100644
index 0000000000..8da2f70c3c
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.scss
@@ -0,0 +1,3 @@
+#simple-tabpanel-1 {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 1294e0a39b..d1dd27a1b7 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,3 +1,5 @@
+import "./ProposalPage.scss";
+
 import { t } from "@lingui/macro";
 import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
 import {
@@ -99,7 +101,7 @@ export const ProposalPage = () => {
   };
 
   return (
-    <Box display="flex" justifyContent="center">
+    <Box display="flex" justifyContent="center" width="100%">
       <Paper>
         <Box>
           <BackButton />

From 04613e50e1e0c9149c4bc9548a00f440785c0b4b Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 5 Aug 2022 17:56:37 -0500
Subject: [PATCH 043/113] dashboard

---
 src/views/Governance/ProposalsDashboard.tsx   | 30 ++++++++++++++-----
 .../components/SearchBar/SearchBar.scss       | 13 --------
 .../components/SearchBar/SearchBar.tsx        | 21 ++++++++-----
 3 files changed, 36 insertions(+), 28 deletions(-)
 delete mode 100644 src/views/Governance/components/SearchBar/SearchBar.scss

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 1fd816ec0d..463c76c8db 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -1,9 +1,8 @@
 import "./Governance.scss";
 
-import { t } from "@lingui/macro";
-import { Grid, Link } from "@mui/material";
+import { Box, Grid, Link, Typography } from "@mui/material";
 import { Skeleton } from "@mui/material";
-import { Paper, Proposal, SecondaryButton } from "@olympusdao/component-library";
+import { Paper, PrimaryButton, Proposal, SecondaryButton, Tab, Tabs } from "@olympusdao/component-library";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { useProposal } from "src/hooks/useProposal";
@@ -42,8 +41,24 @@ export const ProposalsDashboard = () => {
 
   return (
     <div className="proposals-dash">
-      <Paper headerText={t`Proposals`}>
-        <Grid
+      <Paper>
+        <Box display="flex" justifyContent="space-between" alignItems="center" flexWrap="wrap">
+          <Typography fontSize="27px" fontWeight="500" lineHeight="33px">
+            Proposals
+          </Typography>
+          <Box display="flex" minWidth="310px">
+            <SecondaryButton>Create new Proposal</SecondaryButton>
+            <PrimaryButton>Delegate Vote</PrimaryButton>
+          </Box>
+        </Box>
+        <Box display="flex" justifyContent="center">
+          <Tabs>
+            <Tab label="Treasury" />
+            <Tab label="Community" />
+          </Tabs>
+        </Box>
+        <SearchBar />
+        {/* <Grid
           className="dashboard-actions"
           container
           direction="row"
@@ -53,8 +68,7 @@ export const ProposalsDashboard = () => {
           <SecondaryButton startIconName="hamburger" onClick={handleFilterClick}>
             Filter
           </SecondaryButton>
-          <SearchBar />
-        </Grid>
+        </Grid> */}
         <Grid container direction="column" spacing={2}>
           <>
             {Number(activeProposal?.activationTimestamp) > 0 && (
@@ -102,7 +116,7 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
 
 export const ProposalSkeleton = ({ id = 0 }: { id?: number }) => {
   return (
-    <Skeleton>
+    <Skeleton width="100%">
       <Proposal
         chipLabel={toCapitalCase("active")}
         proposalTitle={"proposal.proposalName"}
diff --git a/src/views/Governance/components/SearchBar/SearchBar.scss b/src/views/Governance/components/SearchBar/SearchBar.scss
deleted file mode 100644
index a374c33171..0000000000
--- a/src/views/Governance/components/SearchBar/SearchBar.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.search-bar {
-  display: flex;
-  justify-content: flex-end;
-
-  .search-input {
-    width: 100%;
-    color: #bbbdc0;
-
-    .MuiSvgIcon-root {
-      fill: #bbbdc0;
-    }
-  }
-}
diff --git a/src/views/Governance/components/SearchBar/SearchBar.tsx b/src/views/Governance/components/SearchBar/SearchBar.tsx
index d247d97b17..13e185017a 100644
--- a/src/views/Governance/components/SearchBar/SearchBar.tsx
+++ b/src/views/Governance/components/SearchBar/SearchBar.tsx
@@ -1,20 +1,27 @@
-import "./SearchBar.scss";
-
 import SearchIcon from "@mui/icons-material/Search";
-import { Grid, InputAdornment, OutlinedInput } from "@mui/material";
+import { Box, Input, InputAdornment, useTheme } from "@mui/material";
 
 export const SearchBar = () => {
+  const theme = useTheme();
   return (
-    <Grid className="search-bar" item xs={4}>
-      <OutlinedInput
+    <Box mb="9px">
+      <Input
+        fullWidth
+        disableUnderline
         className="search-input"
+        sx={{
+          backgroundColor: theme.colors.gray[700],
+          fontSize: "15px",
+          borderColor: "transparent",
+          borderRadius: "6px",
+        }}
         startAdornment={
           <InputAdornment position="start">
-            <SearchIcon />
+            <SearchIcon sx={{ fill: theme.colors.gray[500] }} />
           </InputAdornment>
         }
         placeholder="Search proposal"
       />
-    </Grid>
+    </Box>
   );
 };

From 5ae843910310342faba1bb1a41cb8ddcc750238e Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 5 Aug 2022 17:58:10 -0500
Subject: [PATCH 044/113] link

---
 src/views/Governance/ProposalsDashboard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 463c76c8db..901a5fe286 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -47,7 +47,9 @@ export const ProposalsDashboard = () => {
             Proposals
           </Typography>
           <Box display="flex" minWidth="310px">
-            <SecondaryButton>Create new Proposal</SecondaryButton>
+            <Link to="/governancetest/create-proposal" component={RouterLink}>
+              <SecondaryButton>Create new Proposal</SecondaryButton>
+            </Link>
             <PrimaryButton>Delegate Vote</PrimaryButton>
           </Box>
         </Box>

From be18470f96a0e78232262f3bfe73385ab3fdf353 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 5 Aug 2022 18:31:36 -0500
Subject: [PATCH 045/113] votes tab

---
 src/views/Governance/ProposalsDashboard.tsx   |   4 +-
 .../ProposalPage/components/VotesTab.tsx      | 109 +++++++++++-------
 2 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 901a5fe286..4f371d4ee5 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -105,7 +105,7 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
               voteEndDate={timeRemaining ? new Date(timeRemaining) : new Date()}
-              votesAbstain={0}
+              quorum={0}
               votesAgainst={proposal?.noVotes}
               votesFor={proposal?.yesVotes}
             />
@@ -125,7 +125,7 @@ export const ProposalSkeleton = ({ id = 0 }: { id?: number }) => {
         publishedDate={new Date()}
         status={"active"}
         voteEndDate={new Date()}
-        votesAbstain={0}
+        quorum={0}
         votesAgainst={0}
         votesFor={0}
       />
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index da6ee04ee6..2140913123 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -1,48 +1,77 @@
-import { Grid, OutlinedInput, Typography, useTheme } from "@mui/material";
-import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
+import { Box, Typography, useTheme } from "@mui/material";
+import { Metric, PrimaryButton, SecondaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
+// import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
 
   return (
-    <Grid container direction="column">
-      <Grid className="cast-vote-header" item>
-        <Typography variant="h6">Cast your vote</Typography>
-      </Grid>
-      <Grid className="install-location" item>
-        <Typography variant="body2" color={theme.colors.gray[90]}>
-          Your Yes vote will be approving the policy at{" "}
-          <span style={{ color: theme.colors.gray[40] }}>this location</span>
-        </Typography>
-      </Grid>
-      <Grid className="vote-submission-section" container direction="row" alignItems="center" spacing={2}>
-        <Grid item xs={3}>
-          <Radio label="Yes" />
-          <Radio label="No" />
-        </Grid>
-        <Grid item xs={6}>
-          <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
-        </Grid>
-        <Grid item xs={3}>
-          <PrimaryButton fullWidth>Vote</PrimaryButton>
-        </Grid>
-      </Grid>
-      <Grid className="vote-breakdown" item>
-        <VoteBreakdown
-          voteForLabel="Yes"
-          voteAgainstLabel="No"
-          voteAbstainLabel="Abstain"
-          voteForCount={proposal.yesVotes}
-          voteAgainstCount={proposal.noVotes}
-          voteAbstainCount={0}
-        />
-      </Grid>
-      <Grid container direction="column">
-        <Grid item>
-          <Typography variant="h6">Top Voters</Typography>
-        </Grid>
-      </Grid>
-    </Grid>
+    <>
+      {" "}
+      <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
+        <Box display="flex" flexDirection="column">
+          <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
+            Cast your vote
+          </Typography>
+        </Box>
+        <Metric label="Your voting power" metric={"15,530.00 OHM"} />
+        <Box display="flex" flexDirection="row" justifyContent="center">
+          <SecondaryButton sx={{ minWidth: "120px" }}>Yes</SecondaryButton>
+          <TertiaryButton sx={{ minWidth: "120px" }}>No</TertiaryButton>
+        </Box>
+        <Box display="flex" flexDirection="row" justifyContent="center">
+          <PrimaryButton sx={{ minWidth: "120px" }}>Vote</PrimaryButton>
+        </Box>
+      </Box>
+      <VoteBreakdown
+        voteForLabel="Yes"
+        voteAgainstLabel="No"
+        voteParticipationLabel="Total Participants"
+        voteForCount={proposal.yesVotes}
+        voteAgainstCount={proposal.noVotes}
+        totalHoldersCount={0}
+        quorum={0}
+      />
+    </>
+
+    // <Grid container direction="column">
+    //   <Grid className="cast-vote-header" item>
+    //     <Typography variant="h6">Cast your vote</Typography>
+    //   </Grid>
+    //   <Grid className="install-location" item>
+    //     <Typography variant="body2" color={theme.colors.gray[90]}>
+    //       Your Yes vote will be approving the policy at{" "}
+    //       <span style={{ color: theme.colors.gray[40] }}>this location</span>
+    //     </Typography>
+    //   </Grid>
+    //   <Grid className="vote-submission-section" container direction="row" alignItems="center" spacing={2}>
+    //     <Grid item xs={3}>
+    //       <Radio label="Yes" />
+    //       <Radio label="No" />
+    //     </Grid>
+    //     <Grid item xs={6}>
+    //       <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
+    //     </Grid>
+    //     <Grid item xs={3}>
+    //       <PrimaryButton fullWidth>Vote</PrimaryButton>
+    //     </Grid>
+    //   </Grid>
+    //   <Grid className="vote-breakdown" item>
+    //     <VoteBreakdown
+    //       voteForLabel="Yes"
+    //       voteAgainstLabel="No"
+    //       voteAbstainLabel="Abstain"
+    //       voteForCount={proposal.yesVotes}
+    //       voteAgainstCount={proposal.noVotes}
+    //       voteAbstainCount={0}
+    //     />
+    //   </Grid>
+    //   <Grid container direction="column">
+    //     <Grid item>
+    //       <Typography variant="h6">Top Voters</Typography>
+    //     </Grid>
+    //   </Grid>
+    // </Grid>
   );
 };

From 184683990483ee2efba198f8b48f95e74c53231c Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 5 Aug 2022 19:06:23 -0500
Subject: [PATCH 046/113] updating component library

---
 package.json                                  |   2 +-
 .../ProposalPage/components/VotesTab.tsx      |  88 ++++++++-------
 yarn.lock                                     | 100 +++++++++---------
 3 files changed, 98 insertions(+), 92 deletions(-)

diff --git a/package.json b/package.json
index 6cbe928ccd..b4c72456b9 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.8.7",
     "@multifarm/widget": "^0.0.159",
-    "@olympusdao/component-library": "^2.2.2-alpha.3",
+    "@olympusdao/component-library": "^2.2.2-alpha.12",
     "@rainbow-me/rainbowkit": "^0.4.1",
     "@reduxjs/toolkit": "^1.8.2",
     "@types/material-ui": "^0.21.12",
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 2140913123..5803b15586 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -1,4 +1,15 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  styled,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { Metric, PrimaryButton, SecondaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
 // import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
@@ -6,9 +17,15 @@ import { ProposalTabProps } from "src/views/Governance/interfaces";
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
 
+  const StyledTableCell = styled(TableCell)(() => ({
+    padding: "0px",
+    fontSize: "12px",
+    lineHeight: "18px",
+    fontWeight: "400",
+  }));
+
   return (
     <>
-      {" "}
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
         <Box display="flex" flexDirection="column">
           <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
@@ -24,6 +41,9 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
           <PrimaryButton sx={{ minWidth: "120px" }}>Vote</PrimaryButton>
         </Box>
       </Box>
+      <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
+        Vote Breakdown
+      </Typography>
       <VoteBreakdown
         voteForLabel="Yes"
         voteAgainstLabel="No"
@@ -33,45 +53,31 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
         totalHoldersCount={0}
         quorum={0}
       />
+      <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
+        Top Voters
+      </Typography>
+      <TableContainer>
+        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <StyledTableCell>Voter</StyledTableCell>
+              <StyledTableCell align="right">Proposals voted</StyledTableCell>
+              <StyledTableCell align="right">Total Votes</StyledTableCell>
+              <StyledTableCell align="right">Voting Power</StyledTableCell>
+              <StyledTableCell align="right"></StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <StyledTableCell>name</StyledTableCell>
+              <StyledTableCell align="right">52</StyledTableCell>
+              <StyledTableCell align="right">26</StyledTableCell>
+              <StyledTableCell align="right">9.06%</StyledTableCell>
+              <StyledTableCell align="right">Delegate</StyledTableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
     </>
-
-    // <Grid container direction="column">
-    //   <Grid className="cast-vote-header" item>
-    //     <Typography variant="h6">Cast your vote</Typography>
-    //   </Grid>
-    //   <Grid className="install-location" item>
-    //     <Typography variant="body2" color={theme.colors.gray[90]}>
-    //       Your Yes vote will be approving the policy at{" "}
-    //       <span style={{ color: theme.colors.gray[40] }}>this location</span>
-    //     </Typography>
-    //   </Grid>
-    //   <Grid className="vote-submission-section" container direction="row" alignItems="center" spacing={2}>
-    //     <Grid item xs={3}>
-    //       <Radio label="Yes" />
-    //       <Radio label="No" />
-    //     </Grid>
-    //     <Grid item xs={6}>
-    //       <OutlinedInput className="your-comment" placeholder="Your comment (Optional)" />
-    //     </Grid>
-    //     <Grid item xs={3}>
-    //       <PrimaryButton fullWidth>Vote</PrimaryButton>
-    //     </Grid>
-    //   </Grid>
-    //   <Grid className="vote-breakdown" item>
-    //     <VoteBreakdown
-    //       voteForLabel="Yes"
-    //       voteAgainstLabel="No"
-    //       voteAbstainLabel="Abstain"
-    //       voteForCount={proposal.yesVotes}
-    //       voteAgainstCount={proposal.noVotes}
-    //       voteAbstainCount={0}
-    //     />
-    //   </Grid>
-    //   <Grid container direction="column">
-    //     <Grid item>
-    //       <Typography variant="h6">Top Voters</Typography>
-    //     </Grid>
-    //   </Grid>
-    // </Grid>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 9d62eaae3a..14050eb70a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2850,12 +2850,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@olympusdao/component-library@^2.2.2-alpha.3":
-  version "2.2.2-alpha.3"
-  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-alpha.3.tgz#e2fd940bb2601a90f4c7adde68619c6af4bf1588"
-  integrity sha512-yAs8sBIageAQf0ZBtAtSvFBPkGYAW5WoY4+QQcE/OueaSsXoxrnRwKIe7iG5lo4I2diU6TU4kUWte7RwB6JMdQ==
+"@olympusdao/component-library@^2.2.2-alpha.12":
+  version "2.2.2-alpha.12"
+  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-alpha.12.tgz#8830c13353c752952a8086cf946a15eb5dfab2ca"
+  integrity sha512-D4s4LlvWWaOc1Yj+4OPp4GTwz0ADOV3x1W4mj+qSJAV5BrPEwHE3vIsETssUltNpcwJXwvHRYeGE5Db3wj1nTg==
   dependencies:
-    "@react-spring/web" "^9.4.5"
+    "@react-spring/web" "^9.5.0"
 
 "@pedrouid/environment@^1.0.1":
   version "1.0.1"
@@ -2952,51 +2952,51 @@
     qrcode "1.5.0"
     react-remove-scroll "2.5.4"
 
-"@react-spring/animated@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.5.tgz#dd9921c716a4f4a3ed29491e0c0c9f8ca0eb1a54"
-  integrity sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==
-  dependencies:
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
-"@react-spring/core@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.5.tgz#4616e1adc18dd10f5731f100ebdbe9518b89ba3c"
-  integrity sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==
-  dependencies:
-    "@react-spring/animated" "~9.4.5"
-    "@react-spring/rafz" "~9.4.5"
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
-"@react-spring/rafz@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.5.tgz#84f809f287f2a66bbfbc66195db340482f886bd7"
-  integrity sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==
-
-"@react-spring/shared@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.5.tgz#4c3ad817bca547984fb1539204d752a412a6d829"
-  integrity sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==
-  dependencies:
-    "@react-spring/rafz" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
-"@react-spring/types@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c"
-  integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==
-
-"@react-spring/web@^9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.5.tgz#b92f05b87cdc0963a59ee149e677dcaff09f680e"
-  integrity sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==
-  dependencies:
-    "@react-spring/animated" "~9.4.5"
-    "@react-spring/core" "~9.4.5"
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
+"@react-spring/animated@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.5.2.tgz#42785b4f369d9715e9ee32c04b78483e7bb85489"
+  integrity sha512-oRlX+MmYLbK8IuUZR7SQUnRjXxJ4PMIZeBkBd1SUWVgVJAHMTfJzPltzm+I6p59qX+qLlklYHfnWaonQKDqLuQ==
+  dependencies:
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/core@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.5.2.tgz#c8450783ce87a82d3f9ab21e2650e42922398ff7"
+  integrity sha512-UMRtFH6EfebMp/NMDGCUY5+hZFXsg9iT9hzt/iPzJSz2WMXKBjLoFZHJXcmiVOrIhzHmg1O0pFECn1Wp6pZ5Gw==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/rafz" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/rafz@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.5.2.tgz#1264d5df09717cf46d55055da2c55ff84f59073f"
+  integrity sha512-xHSRXKKBI/wDUkZGrspkOm4VlgN6lZi8Tw9Jzibp9QKf3neoof+U2mDNgklvnLaasymtUwAq9o4ZfFvQIVNgPQ==
+
+"@react-spring/shared@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.5.2.tgz#e0a252e06daa3927964460fef05d8092e7d78ffc"
+  integrity sha512-/OSf2sjwY4BUnjZL6xMC+H3WxOOhMUCk+yZwgdj40XuyUpk6E6tYyiPeD9Yq5GLsZHodkvE1syVMRVReL4ndAg==
+  dependencies:
+    "@react-spring/rafz" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/types@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.5.2.tgz#cce1b03afbafb23edfb9cd8c517cc7462abffb65"
+  integrity sha512-n/wBRSHPqTmEd4BFWY6TeR1o/UY+3ujoqMxLjqy90CcY/ozJzDRuREL3c+pxMeTF2+B7dX33dTPCtFMX51nbxg==
+
+"@react-spring/web@^9.5.0":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.5.2.tgz#762ee6b3c8fea40281e1298f5cf1c0515ad6a794"
+  integrity sha512-cusTjbOGTgtbsnpBDjb6Ia+B0lQLE0Fk5rGDog6Sww7hWnLIQ521PMiOBnAWtkntB9eXDUfj7L91nwJviEC0lw==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
 
 "@reduxjs/toolkit@^1.8.2":
   version "1.8.2"

From 8e06deb237e16f0c6201a1f0f557c7e5e5d2c0d0 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Fri, 5 Aug 2022 21:25:42 -0500
Subject: [PATCH 047/113] ugly, but functioning contract creation

---
 src/helpers/Web3Storage.ts                    | 28 ++++++---
 src/hooks/useProposal.ts                      | 59 ++++++++++++++++---
 src/hooks/useProposals.ts                     |  8 +++
 .../CreateProposal/CreateProposal.tsx         | 39 ++++++++----
 4 files changed, 105 insertions(+), 29 deletions(-)

diff --git a/src/helpers/Web3Storage.ts b/src/helpers/Web3Storage.ts
index 96afaa2d15..f98f1d3256 100644
--- a/src/helpers/Web3Storage.ts
+++ b/src/helpers/Web3Storage.ts
@@ -1,19 +1,31 @@
 import { IProposalContent } from "src/hooks/useProposals";
 import { Filelike, Web3Storage } from "web3.storage";
+import { CIDString } from "web3.storage/dist/src/lib/interface";
 
 import { Environment } from "./environment/Environment/Environment";
 
+export interface IPFSFileData {
+  path: string;
+  cid: CIDString;
+  fileName: string;
+}
+
 /**
  * uploads a given file to Web3.Storage with the API Key
  */
-export const uploadToIPFS = async (files: Iterable<Filelike>) => {
+export const uploadToIPFS = async (file: Filelike) => {
   const accessToken = Environment.getWeb3StorageKey();
   if (accessToken) {
     // NOTE(appleseed): the below endpoint is required in typescript, it is simply the default from: https://github.com/web3-storage/web3.storage/blob/main/packages/client/src/lib.js#L92
     const client = new Web3Storage({ token: accessToken, endpoint: new URL("https://api.web3.storage") });
-    const cid = await client.put(files);
+    // NOTE(appleseed): web3Storage client expects an array of files.
+    const cid = await client.put([file]);
     console.log("stored files with cid:", cid);
-    return cid;
+    return {
+      path: `${cid}/${file.name}`,
+      cid,
+      fileName: file.name,
+    };
   }
 };
 
@@ -30,21 +42,21 @@ export const uploadToIPFS = async (files: Iterable<Filelike>) => {
  * }
  * ```
  */
-interface IProposalJson extends IProposalContent {
+export interface IProposalJson extends IProposalContent {
   content: string;
 }
 
 /**
  * expects a js object, turns it into a json file
- * @returns an Iterable<Filelike>
+ * @returns an Filelike
  */
-export const makeJsonFile = (object: IProposalJson): Iterable<Filelike> => {
+export const makeJsonFile = (object: IProposalJson, fileName: string): Filelike => {
   // You can create File objects from a Blob of binary data
   // see: https://developer.mozilla.org/en-US/docs/Web/API/Blob
   // Here we're just storing a JSON object, but you can store images,
   // audio, or whatever you want!
   const blob = new Blob([JSON.stringify(object)], { type: "application/json" });
 
-  const files = [new File([blob], "proposal.json")];
-  return files;
+  const file = new File([blob], fileName);
+  return file;
 };
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 660c412740..8a373cb031 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,14 +1,16 @@
+import { t } from "@lingui/macro";
 import { ethers } from "ethers";
-import { useQuery } from "react-query";
+import { useMutation, useQuery } from "react-query";
 import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber } from "src/helpers";
 import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
 import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
-import { useNetwork } from "wagmi";
+import { IPFSFileData, IProposalJson, makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
+import { useNetwork, useSigner } from "wagmi";
 
 /// Import Proposal data type and mock data getters from useProposals
-import { IAnyProposal, parseProposalContent, parseProposalState, timeRemaining } from "./useProposals";
+import { IAnyProposal, parseProposalContent, parseProposalState, ProposalAction, timeRemaining } from "./useProposals";
 
 /**
  * @notice Query key for useProposal which is dependent on instructionsIndex
@@ -42,14 +44,17 @@ export const useProposal = (instructionsIndex: number) => {
   );
   const yesVotes = useDependentQuery("YesVotesForProposal", () => contract.yesVotesForProposal(instructionsIndex));
   const noVotes = useDependentQuery("NoVotesForProposal", () => contract.noVotesForProposal(instructionsIndex));
+
   // TODO(appleseed): need proposalURI_ functionality on deployment
-  // TODO(appleseed): upload proposal content to ipfs as proper json!!
-  const proposalURI = "ipfs://bafkreidmgcatj7skn6ufob5stdc7hnt76nvyb7dpc62l72fhrbluiychly";
+  // TODO(appleseed): temporary randomness on proposal URI for now
+  const uris = [
+    "ipfs://bafkreidmgcatj7skn6ufob5stdc7hnt76nvyb7dpc62l72fhrbluiychly",
+    "ipfs://bafybeigyvefco3cr6htyuzgv3gz4d2ctmdoptr2mlyvffv7uj6i276xgca/proposal.json",
+  ];
+  const proposalURI = uris[Math.floor(Math.random() * uris.length)];
+
   const proposalContent = useDependentQuery("ProposalContent", () => parseProposalContent({ uri: proposalURI }));
   const proposalState = parseProposalState({ isActive });
-  // const proposalContent = mockGetProposalContent(
-  //   "ipfs://bafkreibazhtsv5a7sheab5wxbuclgxqges42vvd2tbbeiw5q2udzjfo64i",
-  // );
 
   const query = useQuery<IAnyProposal, Error>(
     queryKey,
@@ -90,6 +95,16 @@ export const useProposal = (instructionsIndex: number) => {
   return query as typeof query;
 };
 
+export type TInstructionSet = {
+  action: ProposalAction;
+  target: string;
+};
+
+export interface ISubmitProposal {
+  name: string;
+  proposalURI: string;
+  instructions: TInstructionSet[];
+}
 /**
  * submit proposal at:
  * https://goerli.etherscan.io/address/0xaAd5e6e1362b458E38140B7E8c6d5D71b933a56f#writeContract
@@ -108,3 +123,31 @@ export const useProposal = (instructionsIndex: number) => {
  * # from bophades repo
  * forge create src/policies/Governance.sol:Governance --constructor-args 0x3B294580Fcf1F60B94eca4f4CE78A2f52D23cC83 --rpc-url https://eth-goerli.g.alchemy.com/v2/_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC --private-key yours
  */
+export const useSubmitProposal = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data: signer } = useSigner();
+
+  // TODO(appleseed): update ANY types below
+  return useMutation<any, Error, { proposal: ISubmitProposal }>(async ({ proposal }: { proposal: ISubmitProposal }) => {
+    if (!signer) throw new Error(t`Signer is not set`);
+
+    await contract.connect(signer).submitProposal(
+      proposal.instructions,
+      ethers.utils.formatBytes32String(proposal.name),
+      // TODO(appleseed): add back in name after contract update
+      // proposal.proposalURI,
+    );
+  });
+};
+
+export const useIPFSUpload = () => {
+  return useMutation<IPFSFileData | undefined, Error, { proposal: IProposalJson }>(
+    async ({ proposal }: { proposal: IProposalJson }) => {
+      const files = makeJsonFile(proposal, "proposal.json");
+      const fileInfo = await uploadToIPFS(files);
+      console.log("after", fileInfo);
+      return fileInfo;
+    },
+  );
+};
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index e29f06b978..ef267cc702 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -8,6 +8,14 @@ import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
 import { useNetwork } from "wagmi";
 
+export enum ProposalAction {
+  InstallModule,
+  UpgradeModule,
+  ApprovePolicy,
+  TerminatePolicy,
+  ChangeExecutor,
+}
+
 /// Data type for return from getProposalMetadata on Governance.sol
 export interface proposalMetadata {
   proposalName: string;
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 1895e3b718..731bedf0a3 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -2,17 +2,22 @@ import { Box, Grid, InputLabel, Select, styled, Typography } from "@mui/material
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import MDEditor from "@uiw/react-md-editor";
 import { FC, useState } from "react";
-import { makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
+import { useIPFSUpload, useSubmitProposal } from "src/hooks/useProposal";
+import { ProposalAction } from "src/hooks/useProposals";
 
 import { BackButton } from "../BackButton";
 import { MarkdownPreview } from "../MarkdownPreview";
 import { TextEntry } from "./components/TextEntry";
 
 export const CreateProposal = () => {
+  const ipfsUpload = useIPFSUpload();
+  const submitProposal = useSubmitProposal();
+
   const [proposalTitle, setProposalTitle] = useState("");
   const [proposalDescription, setProposalDescription] = useState("");
   const [proposalDiscussion, setProposalDiscussion] = useState("");
-  const [proposalAction, setProposalAction] = useState("installModule");
+  // TODO(appleseed): need to allow multiple instructions
+  const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.InstallModule);
   const [proposalContract, setProposalContract] = useState("");
 
   const StyledInputLabel = styled(InputLabel)(() => ({
@@ -26,19 +31,20 @@ export const CreateProposal = () => {
       <Grid item xs={6}>
         <Box paddingTop="10px" paddingBottom="10px">
           <StyledInputLabel>Action</StyledInputLabel>
+          {/* // TODO(appleseed): need to allow multiple instructions */}
           <Select
             key="action"
             native={true}
-            defaultValue="installModule"
+            value={proposalAction}
             sx={{ blur: "none" }}
-            onChange={e => setProposalAction(e.target.value)}
+            onChange={e => setProposalAction(Number(e.target.value))}
             fullWidth
           >
-            <option value="installModule">Install Module</option>
-            <option value="upgradeModule">Upgrade Module</option>
-            <option value="approvePolicy">Approve Policy</option>
-            <option value="terminatePolicy">Terminate Policy</option>
-            <option value="changeExecutor">Change Executor</option>
+            <option value={ProposalAction.InstallModule}>Install Module</option>
+            <option value={ProposalAction.UpgradeModule}>Upgrade Module</option>
+            <option value={ProposalAction.ApprovePolicy}>Approve Policy</option>
+            <option value={ProposalAction.TerminatePolicy}>Terminate Policy</option>
+            <option value={ProposalAction.ChangeExecutor}>Change Executor</option>
           </Select>
         </Box>
       </Grid>
@@ -46,14 +52,21 @@ export const CreateProposal = () => {
   };
 
   const handleFormSubmission = async () => {
-    const files = makeJsonFile({
+    const proposal = {
       name: proposalTitle,
       description: proposalDescription,
       content: proposalDescription,
       external_url: proposalDiscussion,
-    });
-    const cid = await uploadToIPFS(files);
-    console.log("after", cid);
+    };
+    const fileData = await ipfsUpload.mutateAsync({ proposal });
+    if (fileData) {
+      const proposalURI = `ipfs://${fileData.path}`;
+      // TODO(appleseed): need to allow multiple instructions
+      const instructions = [{ action: proposalAction, target: proposalContract }];
+      submitProposal.mutate({ proposal: { name: proposal.name, instructions, proposalURI } });
+    } else {
+      // TODO(appleseed): there was a problem uploading your proposal to IPFS
+    }
   };
 
   return (

From d386cf034e3fd06631f7bfbe44ae6ce3daefc95d Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Mon, 8 Aug 2022 12:22:39 -0500
Subject: [PATCH 048/113] rename routes to /governance. add sidenav

---
 src/App.tsx                                                   | 2 +-
 src/components/Sidebar/NavContent.tsx                         | 3 +--
 src/views/Governance/ProposalsDashboard.tsx                   | 4 ++--
 src/views/Governance/components/BackButton/BackButton.tsx     | 2 +-
 src/views/Governance/components/ProposalPage/ProposalPage.tsx | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 63b27ea632..c3dfec50ed 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -274,7 +274,7 @@ function App() {
                     <Route path="/wallet" element={<Wallet open={true} component="wallet" />}></Route>
                     <Route path="*" element={<NotFound />} />
 
-                    <Route path="/governancetest/*" element={<Governance />} />
+                    <Route path="/governance/*" element={<Governance />} />
                   </Routes>
                 </Suspense>
               </div>
diff --git a/src/components/Sidebar/NavContent.tsx b/src/components/Sidebar/NavContent.tsx
index 358fbc5441..5bd81732cf 100644
--- a/src/components/Sidebar/NavContent.tsx
+++ b/src/components/Sidebar/NavContent.tsx
@@ -67,6 +67,7 @@ const NavContent: React.VFC = () => {
                   <NavItem to="/wrap" icon="wrap" label={t`Wrap`} />
 
                   <NavItem icon="bridge" label={t`Bridge`} to="/bridge" />
+                  <NavItem to="/governance" icon="governance" label={t`Governance`} />
 
                   <Box className="menu-divider">
                     <Divider />
@@ -88,8 +89,6 @@ const NavContent: React.VFC = () => {
 
               <NavItem href="https://forum.olympusdao.finance/" icon="forum" label={t`Forum`} />
 
-              <NavItem href="https://vote.olympusdao.finance/" icon="governance" label={t`Governance`} />
-
               <NavItem href="https://docs.olympusdao.finance/" icon="docs" label={t`Docs`} />
 
               <NavItem href="https://immunefi.com/bounty/olympus/" icon="alert-circle" label={t`Bug Bounty`} />
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 4f371d4ee5..dd52291732 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -47,7 +47,7 @@ export const ProposalsDashboard = () => {
             Proposals
           </Typography>
           <Box display="flex" minWidth="310px">
-            <Link to="/governancetest/create-proposal" component={RouterLink}>
+            <Link to="/governance/create-proposal" component={RouterLink}>
               <SecondaryButton>Create new Proposal</SecondaryButton>
             </Link>
             <PrimaryButton>Delegate Vote</PrimaryButton>
@@ -98,7 +98,7 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
         <ProposalSkeleton id={instructionsId} />
       ) : (
         <Grid key={instructionsId} item xs={12}>
-          <Link to={`/governancetest/proposals/${proposal?.id}`} component={RouterLink}>
+          <Link to={`/governance/proposals/${proposal?.id}`} component={RouterLink}>
             <Proposal
               chipLabel={toCapitalCase(proposal?.state)}
               proposalTitle={proposal?.proposalName}
diff --git a/src/views/Governance/components/BackButton/BackButton.tsx b/src/views/Governance/components/BackButton/BackButton.tsx
index e46f50afd0..b99e0b7a51 100644
--- a/src/views/Governance/components/BackButton/BackButton.tsx
+++ b/src/views/Governance/components/BackButton/BackButton.tsx
@@ -5,7 +5,7 @@ import { Link as RouterLink } from "react-router-dom";
 export const BackButton = () => {
   return (
     <Grid className="back-button" item>
-      <Link to="/governancetest" component={RouterLink}>
+      <Link to="/governance" component={RouterLink}>
         <Box display="flex" flexDirection="row">
           <Box pr="9px">
             <ChevronLeft viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index d1dd27a1b7..3d77566bcc 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -110,7 +110,7 @@ export const ProposalPage = () => {
               {proposalHeader()}
             </Grid>
             <Grid display="flex" item sm={6} justifyContent="flex-end">
-              <Link to="/governancetest/create-proposal" component={RouterLink}>
+              <Link to="/governance/create-proposal" component={RouterLink}>
                 <SecondaryButton>Create new proposal</SecondaryButton>
               </Link>
               <PrimaryButton>Delegate Vote</PrimaryButton>

From 54f17dcc38127e0438f4fb3ddc8f55b433ef8c98 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Mon, 8 Aug 2022 13:12:15 -0500
Subject: [PATCH 049/113] moving from tabs to routes

---
 src/views/Governance/Governance.tsx           |   2 +-
 .../components/ProposalPage/ProposalPage.tsx  | 154 +++++++++---------
 .../ProposalPage/components/VotesTab.tsx      |  13 +-
 3 files changed, 88 insertions(+), 81 deletions(-)

diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
index e0f7500601..708f7306e3 100644
--- a/src/views/Governance/Governance.tsx
+++ b/src/views/Governance/Governance.tsx
@@ -9,7 +9,7 @@ export const Governance = () => {
     <>
       <Routes>
         <Route path="/" element={<ProposalsDashboard />} />
-        <Route path="/proposals/:passedId" element={<ProposalPage />} />
+        <Route path="/proposals/:passedId/*" element={<ProposalPage />} />
         <Route path="/create-proposal" element={<CreateProposal />} />
       </Routes>
     </>
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 3d77566bcc..592dcbdef0 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -10,11 +10,10 @@ import {
   PrimaryButton,
   SecondaryButton,
   Tab,
-  TabPanel,
   Tabs,
 } from "@olympusdao/component-library";
-import { useMemo, useState } from "react";
-import { useParams } from "react-router-dom";
+import { FC, useMemo } from "react";
+import { NavLink, Outlet, Route, Routes, useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { shorten } from "src/helpers";
 import { prettifySeconds } from "src/helpers/timeUtil";
@@ -27,11 +26,7 @@ import { BackButton } from "../BackButton";
 import { PollDetailsTab } from "./components/PollDetailsTab";
 import { VotesTab } from "./components/VotesTab";
 
-export const ProposalPage = () => {
-  const theme = useTheme();
-
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
+export const ProposalPage: FC = () => {
   const { passedId } = useParams();
   const proposalId = useMemo(() => {
     if (!passedId) return -1;
@@ -43,7 +38,55 @@ export const ProposalPage = () => {
     if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
     return _useProposal.data;
   }, [_useProposal]);
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<PageWrapper proposal={proposal} />}>
+          <Route index element={<PollDetailsTab proposal={proposal} />} />
+          <Route path="votes" element={<VotesTab proposal={proposal} />} />
+        </Route>
+      </Routes>
+    </>
+  );
+};
 
+export const PageWrapper = (props: { proposal: IAnyProposal }) => (
+  <Box display="flex" justifyContent="center" width="100%">
+    <Paper>
+      <Box>
+        <BackButton />
+        <Grid container mb="10px">
+          <Grid item sm={6}>
+            <ProposalHeader proposal={props.proposal} />
+          </Grid>
+          <Grid display="flex" item sm={6} justifyContent="flex-end">
+            <Link to="/governance/create-proposal" component={RouterLink}>
+              <SecondaryButton>Create new proposal</SecondaryButton>
+            </Link>
+            <PrimaryButton>Delegate Vote</PrimaryButton>
+          </Grid>
+        </Grid>
+        <Box display="flex" justifyContent="center">
+          <Tabs value={false} centered textColor="primary" indicatorColor="primary">
+            <Link component={NavLink} to={`/governance/proposals/${props.proposal.id}`} end>
+              <Tab label={t`Poll Detail`}></Tab>
+            </Link>
+            <Link component={NavLink} to={`/governance/proposals/${props.proposal.id}/votes`}>
+              <Tab label={t`Votes`}></Tab>
+            </Link>
+          </Tabs>
+        </Box>
+        <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
+          <Outlet />
+        </Grid>
+      </Box>
+    </Paper>
+  </Box>
+);
+
+const ProposalHeader = (props: { proposal: IAnyProposal }) => {
+  const { proposal } = props;
+  const theme = useTheme();
   const dateFormat = new Intl.DateTimeFormat([], {
     month: "short",
     day: "numeric",
@@ -52,8 +95,6 @@ export const ProposalPage = () => {
     hour: "numeric",
     minute: "numeric",
   });
-  const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
-
   const mapStatus = (status: PStatus) => {
     switch (status) {
       case "active":
@@ -68,75 +109,34 @@ export const ProposalPage = () => {
         return "darkGray" as OHMChipProps["template"];
     }
   };
-
-  const proposalHeader = () => {
-    return (
-      <Grid container direction="column" pt="9px" mb="9px">
-        <Grid item>
-          <Typography lineHeight="18px" variant="body2" color={theme.colors.gray[90]}>
-            Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
-            <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Typography fontSize="24px" lineHeight="32px" fontWeight={700}>
-            {proposal.proposalName}
-          </Typography>
-        </Grid>
-        <Box display="flex" flexDirection="row" mt="4px">
-          <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
-          <Box pl="9px" display="flex" alignItems="center">
-            {proposal.timeRemaining && (
-              <>
-                <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
-                <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                  {`Ends in ${prettifySeconds(proposal.timeRemaining / 1000)}`}
-                </Typography>
-              </>
-            )}
-          </Box>
-        </Box>
-      </Grid>
-    );
-  };
+  const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
 
   return (
-    <Box display="flex" justifyContent="center" width="100%">
-      <Paper>
-        <Box>
-          <BackButton />
-          <Grid container mb="10px">
-            <Grid item sm={6}>
-              {proposalHeader()}
-            </Grid>
-            <Grid display="flex" item sm={6} justifyContent="flex-end">
-              <Link to="/governance/create-proposal" component={RouterLink}>
-                <SecondaryButton>Create new proposal</SecondaryButton>
-              </Link>
-              <PrimaryButton>Delegate Vote</PrimaryButton>
-            </Grid>
-          </Grid>
-          <Box display="flex" justifyContent="center">
-            <Tabs
-              centered
-              value={selectedIndex}
-              TabIndicatorProps={{ style: { display: "none" } }}
-              onChange={(_, view: number) => setSelectedIndex(view)}
-            >
-              <Tab label={t`Poll Detail`}></Tab>
-              <Tab label={t`Votes`}></Tab>
-            </Tabs>
-          </Box>
-          <Grid className="proposal-tabs" container direction="column" alignItems="flex-start">
-            <TabPanel value={selectedIndex} index={0}>
-              <PollDetailsTab proposal={proposal} />
-            </TabPanel>
-            <TabPanel value={selectedIndex} index={1}>
-              <VotesTab proposal={proposal} />
-            </TabPanel>
-          </Grid>
+    <Grid container direction="column" pt="9px" mb="9px">
+      <Grid item>
+        <Typography lineHeight="18px" variant="body2" color={theme.colors.gray[90]}>
+          Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
+          <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Typography fontSize="24px" lineHeight="32px" fontWeight={700}>
+          {proposal.proposalName}
+        </Typography>
+      </Grid>
+      <Box display="flex" flexDirection="row" mt="4px">
+        <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
+        <Box pl="9px" display="flex" alignItems="center">
+          {proposal.timeRemaining && (
+            <>
+              <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
+              <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+                {`Ends in ${prettifySeconds(proposal.timeRemaining / 1000)}`}
+              </Typography>
+            </>
+          )}
         </Box>
-      </Paper>
-    </Box>
+      </Box>
+    </Grid>
   );
 };
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 5803b15586..f22e032b8e 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -10,7 +10,14 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import { Metric, PrimaryButton, SecondaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
+import {
+  Metric,
+  Paper,
+  PrimaryButton,
+  SecondaryButton,
+  TertiaryButton,
+  VoteBreakdown,
+} from "@olympusdao/component-library";
 // import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
@@ -25,7 +32,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   }));
 
   return (
-    <>
+    <Paper fullWidth>
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
         <Box display="flex" flexDirection="column">
           <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
@@ -78,6 +85,6 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
           </TableBody>
         </Table>
       </TableContainer>
-    </>
+    </Paper>
   );
 };

From df10f77c4ef64560119b0f64265ca077355c19b6 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 9 Aug 2022 18:33:49 -0400
Subject: [PATCH 050/113] Initial commit for voting hooks

---
 src/hooks/useVoting.ts | 81 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/hooks/useVoting.ts

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
new file mode 100644
index 0000000000..317d374f8d
--- /dev/null
+++ b/src/hooks/useVoting.ts
@@ -0,0 +1,81 @@
+import { t } from "@lingui/macro";
+import { BigNumber, ContractReceipt } from "ethers";
+import { useMutation } from "react-query";
+import { useDispatch } from "react-redux";
+import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { error as createErrorToast, info as createInfoToast } from "src/slices/MessagesSlice";
+import { useNetwork, useSigner } from "wagmi";
+
+interface Vote {
+  instructionsId: BigNumber;
+  vote: boolean;
+}
+
+interface ActivatedProposal {
+  instructionsId: BigNumber;
+  activationTimestamp: BigNumber;
+}
+
+export const useEndorse = () => {
+  const dispatch = useDispatch();
+  const { chain = { id: 1 } } = useNetwork();
+  const { data: signer } = useSigner();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+
+  if (!signer) throw new Error("No signer connected, cannot endorse");
+  contract.connect(signer);
+
+  return useMutation<ContractReceipt, Error, number>(
+    // Pass in instructionsId to endorse
+    async instructionsId => {
+      //TODO: validate the instructions id input, make sure it is valid
+      const idAsBigNumber = BigNumber.from(instructionsId);
+      const transaction = await contract.endorseProposal(idAsBigNumber);
+
+      return transaction.wait();
+    },
+    {
+      onError: error => {
+        console.error(error.message);
+        dispatch(createErrorToast(error.message));
+      },
+      onSuccess: () => {
+        dispatch(createInfoToast(t`Successfully endorsed proposal`));
+      },
+    },
+  );
+};
+
+export const useVote = () => {
+  const dispatch = useDispatch();
+  const { chain = { id: 1 } } = useNetwork();
+  const { data: signer } = useSigner();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+
+  if (!signer) throw new Error("No signer connected, cannot endorse");
+  contract.connect(signer);
+
+  return useMutation<ContractReceipt, Error, Vote>(
+    // Pass in whether vote is yes or no
+    async ({ instructionsId, vote }) => {
+      const activeProposal: ActivatedProposal = await contract.activeProposal();
+      const activeProposalId = activeProposal.instructionsId;
+
+      // Validate inputs
+      if (!instructionsId.eq(activeProposalId)) throw new Error(t`You can only vote for the activated proposal`);
+
+      const transaction = await contract.vote(vote);
+
+      return transaction.wait();
+    },
+    {
+      onError: error => {
+        console.error(error.message);
+        dispatch(createErrorToast(error.message));
+      },
+      onSuccess: () => {
+        dispatch(createInfoToast(t`Successfully voted for proposal`));
+      },
+    },
+  );
+};

From 88be2f3d545430793f065b2766afc648d251d3bb Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Wed, 10 Aug 2022 15:21:14 -0400
Subject: [PATCH 051/113] Update voting hooks, tie in vote hook to VotesTab

---
 src/hooks/useVoting.ts                        | 36 ++++++++++---------
 .../ProposalPage/components/VotesTab.tsx      | 25 +++++++++++--
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 317d374f8d..2b1360cb64 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -18,20 +18,23 @@ interface ActivatedProposal {
 
 export const useEndorse = () => {
   const dispatch = useDispatch();
+
   const { chain = { id: 1 } } = useNetwork();
   const { data: signer } = useSigner();
+
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
 
-  if (!signer) throw new Error("No signer connected, cannot endorse");
-  contract.connect(signer);
+  return useMutation<ContractReceipt, Error, { instructionsId: BigNumber }>(
+    async ({ instructionsId }: { instructionsId: BigNumber }) => {
+      if (!signer) throw new Error("No signer connected, cannot endorse");
 
-  return useMutation<ContractReceipt, Error, number>(
-    // Pass in instructionsId to endorse
-    async instructionsId => {
-      //TODO: validate the instructions id input, make sure it is valid
-      const idAsBigNumber = BigNumber.from(instructionsId);
-      const transaction = await contract.endorseProposal(idAsBigNumber);
+      // NOTE (lienid): can't decide if it is worth calling totalInstructions on the INSTR contract
+      //                to make sure that the passed ID is valid. If it is being fed through by the
+      //                site then there's no reason it should be invalid. Also don't know if -1 may
+      //                ever be passed as some sort of default value
+      if (instructionsId.eq(-1)) throw new Error(t`Cannot endorse proposal with invalid ID`);
 
+      const transaction = await contract.connect(signer).endorseProposal(instructionsId);
       return transaction.wait();
     },
     {
@@ -48,24 +51,23 @@ export const useEndorse = () => {
 
 export const useVote = () => {
   const dispatch = useDispatch();
+
   const { chain = { id: 1 } } = useNetwork();
   const { data: signer } = useSigner();
+
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
 
-  if (!signer) throw new Error("No signer connected, cannot endorse");
-  contract.connect(signer);
+  return useMutation<ContractReceipt, Error, { voteData: Vote }>(
+    async ({ voteData }: { voteData: Vote }) => {
+      if (!signer) throw new Error("No signer connected, cannot endorse");
 
-  return useMutation<ContractReceipt, Error, Vote>(
-    // Pass in whether vote is yes or no
-    async ({ instructionsId, vote }) => {
       const activeProposal: ActivatedProposal = await contract.activeProposal();
       const activeProposalId = activeProposal.instructionsId;
 
-      // Validate inputs
-      if (!instructionsId.eq(activeProposalId)) throw new Error(t`You can only vote for the activated proposal`);
-
-      const transaction = await contract.vote(vote);
+      if (!voteData.instructionsId.eq(activeProposalId))
+        throw new Error(t`You can only vote for the activated proposal`);
 
+      const transaction = await contract.connect(signer).vote(voteData.vote);
       return transaction.wait();
     },
     {
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index f22e032b8e..67065a999f 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -18,11 +18,16 @@ import {
   TertiaryButton,
   VoteBreakdown,
 } from "@olympusdao/component-library";
+import { BigNumber } from "ethers";
+import { useState } from "react";
+import { useVote } from "src/hooks/useVoting";
 // import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
+  const [vote, setVote] = useState<boolean>(false);
+  const submitVote = useVote();
 
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
@@ -31,6 +36,14 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
     fontWeight: "400",
   }));
 
+  const handleVoteSelection = (voteFor: boolean) => {
+    setVote(voteFor);
+  };
+
+  const handleVoteSubmission = () => {
+    submitVote.mutate({ voteData: { instructionsId: BigNumber.from(proposal.id), vote: vote } });
+  };
+
   return (
     <Paper fullWidth>
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
@@ -41,11 +54,17 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
         </Box>
         <Metric label="Your voting power" metric={"15,530.00 OHM"} />
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <SecondaryButton sx={{ minWidth: "120px" }}>Yes</SecondaryButton>
-          <TertiaryButton sx={{ minWidth: "120px" }}>No</TertiaryButton>
+          <SecondaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSelection(true)}>
+            Yes
+          </SecondaryButton>
+          <TertiaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSelection(false)}>
+            No
+          </TertiaryButton>
         </Box>
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <PrimaryButton sx={{ minWidth: "120px" }}>Vote</PrimaryButton>
+          <PrimaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSubmission}>
+            Vote
+          </PrimaryButton>
         </Box>
       </Box>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">

From 50dbca17619e74a066dcff5bc7d5b8236d3cdac7 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Wed, 10 Aug 2022 15:37:57 -0400
Subject: [PATCH 052/113] Bump useProposal and useProposals to react query 4

---
 src/hooks/useProposal.ts  | 13 +++++++++----
 src/hooks/useProposals.ts |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 8a373cb031..9ba90afb94 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,16 +1,21 @@
 import { t } from "@lingui/macro";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { ethers } from "ethers";
-import { useMutation, useQuery } from "react-query";
 import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber } from "src/helpers";
 import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
 import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
 import { IPFSFileData, IProposalJson, makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
-import { useNetwork, useSigner } from "wagmi";
-
 /// Import Proposal data type and mock data getters from useProposals
-import { IAnyProposal, parseProposalContent, parseProposalState, ProposalAction, timeRemaining } from "./useProposals";
+import {
+  IAnyProposal,
+  parseProposalContent,
+  parseProposalState,
+  ProposalAction,
+  timeRemaining,
+} from "src/hooks/useProposals";
+import { useNetwork, useSigner } from "wagmi";
 
 /**
  * @notice Query key for useProposal which is dependent on instructionsIndex
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index ef267cc702..2d7a9caa15 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,6 +1,6 @@
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import axios from "axios";
 import { ethers } from "ethers";
-import { useQuery, UseQueryResult } from "react-query";
 import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber } from "src/helpers";
 import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";

From 07d11dabe374ccf60e6b3b95ddb59d96068eb1e5 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Wed, 10 Aug 2022 15:53:21 -0400
Subject: [PATCH 053/113] Fix VotesTab onClick functions

---
 src/hooks/useVoting.ts                        |  2 +-
 .../ProposalPage/components/VotesTab.tsx      | 20 ++++---------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 2b1360cb64..2379076608 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
+import { useMutation } from "@tanstack/react-query";
 import { BigNumber, ContractReceipt } from "ethers";
-import { useMutation } from "react-query";
 import { useDispatch } from "react-redux";
 import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { error as createErrorToast, info as createInfoToast } from "src/slices/MessagesSlice";
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 67065a999f..e5b759c8bc 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -10,18 +10,10 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import {
-  Metric,
-  Paper,
-  PrimaryButton,
-  SecondaryButton,
-  TertiaryButton,
-  VoteBreakdown,
-} from "@olympusdao/component-library";
+import { Metric, Paper, PrimaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
 import { BigNumber } from "ethers";
 import { useState } from "react";
 import { useVote } from "src/hooks/useVoting";
-// import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
@@ -36,10 +28,6 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
     fontWeight: "400",
   }));
 
-  const handleVoteSelection = (voteFor: boolean) => {
-    setVote(voteFor);
-  };
-
   const handleVoteSubmission = () => {
     submitVote.mutate({ voteData: { instructionsId: BigNumber.from(proposal.id), vote: vote } });
   };
@@ -54,10 +42,10 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
         </Box>
         <Metric label="Your voting power" metric={"15,530.00 OHM"} />
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <SecondaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSelection(true)}>
+          <TertiaryButton sx={{ minWidth: "120px" }} onClick={() => setVote(true)}>
             Yes
-          </SecondaryButton>
-          <TertiaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSelection(false)}>
+          </TertiaryButton>
+          <TertiaryButton sx={{ minWidth: "120px" }} onClick={() => setVote(false)}>
             No
           </TertiaryButton>
         </Box>

From 6630fa58f72f94f486819c4e7916d074bbec284c Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 11 Aug 2022 15:25:05 -0400
Subject: [PATCH 054/113] Add button fill on vote selection

---
 .../ProposalPage/components/VotesTab.tsx       | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index e5b759c8bc..734875c664 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -18,7 +18,7 @@ import { ProposalTabProps } from "src/views/Governance/interfaces";
 
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
-  const [vote, setVote] = useState<boolean>(false);
+  const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
 
   const StyledTableCell = styled(TableCell)(() => ({
@@ -29,7 +29,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   }));
 
   const handleVoteSubmission = () => {
-    submitVote.mutate({ voteData: { instructionsId: BigNumber.from(proposal.id), vote: vote } });
+    submitVote.mutate({ voteData: { instructionsId: BigNumber.from(proposal.id), vote: vote === "yes" } });
   };
 
   return (
@@ -42,15 +42,23 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
         </Box>
         <Metric label="Your voting power" metric={"15,530.00 OHM"} />
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <TertiaryButton sx={{ minWidth: "120px" }} onClick={() => setVote(true)}>
+          <TertiaryButton
+            variant={vote === "yes" ? "contained" : "outlined"}
+            sx={{ minWidth: "120px" }}
+            onClick={() => setVote("yes")}
+          >
             Yes
           </TertiaryButton>
-          <TertiaryButton sx={{ minWidth: "120px" }} onClick={() => setVote(false)}>
+          <TertiaryButton
+            variant={vote === "no" ? "contained" : "outlined"}
+            sx={{ minWidth: "120px" }}
+            onClick={() => setVote("no")}
+          >
             No
           </TertiaryButton>
         </Box>
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <PrimaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSubmission}>
+          <PrimaryButton sx={{ minWidth: "120px" }} onClick={handleVoteSubmission} disabled={vote === ""}>
             Vote
           </PrimaryButton>
         </Box>

From f0fc4906f52fbd05a73e6b66f91dd13f7757d192 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 12 Aug 2022 15:15:12 -0500
Subject: [PATCH 055/113] use wallet balance. disable vote buttons if not
 active. or if not connected

---
 src/helpers/index.tsx                         | 12 +++++--
 .../ProposalPage/components/VotesTab.tsx      | 33 +++++++++++++++----
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx
index d0348c2c3a..bdf257f7b3 100644
--- a/src/helpers/index.tsx
+++ b/src/helpers/index.tsx
@@ -1,10 +1,10 @@
 import { BigNumber, BigNumberish } from "@ethersproject/bignumber";
 import { formatUnits } from "@ethersproject/units";
 import axios from "axios";
+import { NetworkId } from "src/constants";
 import { OHM_DAI_LP_TOKEN } from "src/constants/tokens";
-
-import { NetworkId } from "../constants";
-import { Environment } from "./environment/Environment/Environment";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
+import { Environment } from "src/helpers/environment/Environment/Environment";
 
 /**
  * gets marketPrice from Ohm-DAI v2
@@ -52,6 +52,12 @@ export function formatCurrency(c: number, precision = 0, currency = "USD") {
   }).format(c);
 }
 
+export const formatBalance = (decimals: number, balance?: DecimalBigNumber) => {
+  const zero = new DecimalBigNumber("0");
+  const number = balance ? balance : zero;
+  return number.toString({ decimals, trim: false, format: true });
+};
+
 export function trim(number = 0, precision = 0) {
   // why would number ever be undefined??? what are we trimming?
   const array = Number(number).toFixed(8).split(".");
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index f22e032b8e..08ba851158 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -18,11 +18,21 @@ import {
   TertiaryButton,
   VoteBreakdown,
 } from "@olympusdao/component-library";
+import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
+import { formatBalance } from "src/helpers";
+import { useGohmBalance } from "src/hooks/useBalance";
+import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 // import { PrimaryButton, Radio, VoteBreakdown } from "@olympusdao/component-library";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
+import { useAccount } from "wagmi";
 
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
+  const networks = useTestableNetworks();
+  const { isConnected } = useAccount();
+  const gohmBalance = useGohmBalance()[networks.MAINNET].data;
+
+  console.log(proposal);
 
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
@@ -30,6 +40,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
     lineHeight: "18px",
     fontWeight: "400",
   }));
+  console.log(gohmBalance);
 
   return (
     <Paper fullWidth>
@@ -39,14 +50,22 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
             Cast your vote
           </Typography>
         </Box>
-        <Metric label="Your voting power" metric={"15,530.00 OHM"} />
-        <Box display="flex" flexDirection="row" justifyContent="center">
-          <SecondaryButton sx={{ minWidth: "120px" }}>Yes</SecondaryButton>
-          <TertiaryButton sx={{ minWidth: "120px" }}>No</TertiaryButton>
-        </Box>
+        {isConnected && <Metric label="Your voting power" metric={`${formatBalance(2, gohmBalance)} OHM`} />}
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <PrimaryButton sx={{ minWidth: "120px" }}>Vote</PrimaryButton>
+          <SecondaryButton sx={{ minWidth: "120px" }} disabled={!isConnected || !proposal.isActive}>
+            Yes
+          </SecondaryButton>
+          <TertiaryButton sx={{ minWidth: "120px" }} disabled={!isConnected || !proposal.isActive}>
+            No
+          </TertiaryButton>
         </Box>
+        <WalletConnectedGuard>
+          <Box display="flex" flexDirection="row" justifyContent="center">
+            <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive}>
+              Vote
+            </PrimaryButton>
+          </Box>
+        </WalletConnectedGuard>
       </Box>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
         Vote Breakdown
@@ -64,7 +83,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
         Top Voters
       </Typography>
       <TableContainer>
-        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <Table aria-label="simple table">
           <TableHead>
             <TableRow>
               <StyledTableCell>Voter</StyledTableCell>

From 77835b214cf2625887c8afe8ba67c89c5ec8cb00 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 12 Aug 2022 15:24:27 -0500
Subject: [PATCH 056/113] resolves unable to delete all content from markdown
 editor

---
 .../components/CreateProposal/CreateProposal.tsx         | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 731bedf0a3..362cc81472 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -4,10 +4,9 @@ import MDEditor from "@uiw/react-md-editor";
 import { FC, useState } from "react";
 import { useIPFSUpload, useSubmitProposal } from "src/hooks/useProposal";
 import { ProposalAction } from "src/hooks/useProposals";
-
-import { BackButton } from "../BackButton";
-import { MarkdownPreview } from "../MarkdownPreview";
-import { TextEntry } from "./components/TextEntry";
+import { BackButton } from "src/views/Governance/components/BackButton";
+import { TextEntry } from "src/views/Governance/components/CreateProposal/components/TextEntry";
+import { MarkdownPreview } from "src/views/Governance/components/MarkdownPreview";
 
 export const CreateProposal = () => {
   const ipfsUpload = useIPFSUpload();
@@ -79,7 +78,7 @@ export const CreateProposal = () => {
           <MDEditor
             preview="edit"
             value={proposalDescription}
-            onChange={value => value && setProposalDescription(value)}
+            onChange={value => (value ? setProposalDescription(value) : setProposalDescription(""))}
             height={400}
             visibleDragbar={false}
           />

From 7a75125db01e009c4941fcc45e72f8750cb33850 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 12 Aug 2022 15:24:42 -0500
Subject: [PATCH 057/113] must have a value error

---
 src/views/Governance/ProposalsDashboard.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index dd52291732..4a62c34ce0 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -1,4 +1,4 @@
-import "./Governance.scss";
+import "src/views/Governance/Governance.scss";
 
 import { Box, Grid, Link, Typography } from "@mui/material";
 import { Skeleton } from "@mui/material";
@@ -7,10 +7,9 @@ import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { useProposal } from "src/hooks/useProposal";
 import { useActiveProposal, useGetTotalInstructions } from "src/hooks/useProposals";
-
-import { FilterModal } from "./components/FilterModal";
-import { SearchBar } from "./components/SearchBar/SearchBar";
-import { toCapitalCase } from "./helpers";
+import { FilterModal } from "src/views/Governance/components/FilterModal";
+import { SearchBar } from "src/views/Governance/components/SearchBar/SearchBar";
+import { toCapitalCase } from "src/views/Governance/helpers";
 
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
@@ -55,8 +54,8 @@ export const ProposalsDashboard = () => {
         </Box>
         <Box display="flex" justifyContent="center">
           <Tabs>
-            <Tab label="Treasury" />
-            <Tab label="Community" />
+            <Tab label="Treasury" value="0" />
+            <Tab label="Community" value="1" />
           </Tabs>
         </Box>
         <SearchBar />

From f89c1836c08f2883436f7ec7867b5c4951759c24 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 12 Aug 2022 15:44:01 -0500
Subject: [PATCH 058/113] console log

---
 .../Governance/components/ProposalPage/components/VotesTab.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 08ba851158..a0797cdddf 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -32,15 +32,12 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const { isConnected } = useAccount();
   const gohmBalance = useGohmBalance()[networks.MAINNET].data;
 
-  console.log(proposal);
-
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
     fontSize: "12px",
     lineHeight: "18px",
     fontWeight: "400",
   }));
-  console.log(gohmBalance);
 
   return (
     <Paper fullWidth>

From f9b28cfa871c2a25b4df372794ee018fdfa2230c Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Fri, 12 Aug 2022 16:09:25 -0500
Subject: [PATCH 059/113] adding rehype sanitize

---
 package.json                                     |  1 +
 src/views/Governance/ProposalsDashboard.tsx      |  8 ++++----
 .../components/CreateProposal/CreateProposal.tsx |  4 ++++
 yarn.lock                                        | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 302d30699e..1634f15013 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "react-step-progress-bar": "^1.0.3",
     "react-uid": "^2.3.2",
     "recharts": "^2.1.12",
+    "rehype-sanitize": "^5.0.1",
     "typescript": "^4.7.4",
     "wagmi": "^0.5.9",
     "web3.storage": "^4.3.0"
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 4a62c34ce0..b5d628009d 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -31,7 +31,7 @@ export const ProposalsDashboard = () => {
       // TODO(appleseed): just parsing last 10 proposals right now
       const proposals = [];
       for (let i = coercedNumber; i > Math.max(coercedNumber - 10, 0); i--) {
-        proposals.push(<ProposalContainer instructionsId={i} />);
+        proposals.push(<ProposalContainer key={i} instructionsId={i} />);
       }
       return proposals;
     }
@@ -53,9 +53,9 @@ export const ProposalsDashboard = () => {
           </Box>
         </Box>
         <Box display="flex" justifyContent="center">
-          <Tabs>
-            <Tab label="Treasury" value="0" />
-            <Tab label="Community" value="1" />
+          <Tabs value={false}>
+            <Tab label="Treasury" />
+            <Tab label="Community" />
           </Tabs>
         </Box>
         <SearchBar />
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 362cc81472..87d226cb19 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -2,6 +2,7 @@ import { Box, Grid, InputLabel, Select, styled, Typography } from "@mui/material
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import MDEditor from "@uiw/react-md-editor";
 import { FC, useState } from "react";
+import rehypeSanitize from "rehype-sanitize";
 import { useIPFSUpload, useSubmitProposal } from "src/hooks/useProposal";
 import { ProposalAction } from "src/hooks/useProposals";
 import { BackButton } from "src/views/Governance/components/BackButton";
@@ -81,6 +82,9 @@ export const CreateProposal = () => {
             onChange={value => (value ? setProposalDescription(value) : setProposalDescription(""))}
             height={400}
             visibleDragbar={false}
+            previewOptions={{
+              rehypePlugins: [[rehypeSanitize]],
+            }}
           />
           <Box display="flex" flexDirection="row" justifyContent="flex-end">
             <Typography>{proposalDescription.length}/14,400</Typography>
diff --git a/yarn.lock b/yarn.lock
index 38e961b918..1117fbadaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10286,6 +10286,13 @@ hast-util-raw@^7.2.0:
     web-namespaces "^2.0.0"
     zwitch "^2.0.0"
 
+hast-util-sanitize@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-4.0.0.tgz#71a02ca2e50d04b852a5500846418070ca364f60"
+  integrity sha512-pw56+69jq+QSr/coADNvWTmBPDy+XsmwaF5KnUys4/wM1jt/fZdl7GPxhXXXYdXnz3Gj3qMkbUCH2uKjvX0MgQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
 hast-util-select@~5.0.1:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/hast-util-select/-/hast-util-select-5.0.2.tgz#8c603ebacf0f47e154c5fa2e5b7efc520813866b"
@@ -16722,6 +16729,15 @@ rehype-rewrite@~3.0.6:
     unified "~10.1.1"
     unist-util-visit "~4.1.0"
 
+rehype-sanitize@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-sanitize/-/rehype-sanitize-5.0.1.tgz#dac01a7417bdd329260c74c74449697b4be5eb56"
+  integrity sha512-da/jIOjq8eYt/1r9GN6GwxIR3gde7OZ+WV8pheu1tL8K0D9KxM2AyMh+UEfke+FfdM3PvGHeYJU0Td5OWa7L5A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-sanitize "^4.0.0"
+    unified "^10.0.0"
+
 rehype-slug@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-5.0.1.tgz#6e732d0c55b3b1e34187e74b7363fb53229e5f52"

From 48f43f2ce86835847882c68ec30dd6014e159afb Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Mon, 15 Aug 2022 11:32:19 -0500
Subject: [PATCH 060/113] delegate modal. refactor to avoid duplication

---
 src/views/Governance/ProposalsDashboard.tsx   | 10 ++---
 .../ActionButtons/ActionButtons.tsx           | 28 ++++++++++++
 .../components/ActionButtons/index.ts         |  1 +
 .../DelegateModal/DelegateModal.tsx           | 45 +++++++++++++++++++
 .../components/DelegateModal/index.ts         |  1 +
 .../components/ProposalPage/ProposalPage.tsx  | 31 ++++---------
 6 files changed, 87 insertions(+), 29 deletions(-)
 create mode 100644 src/views/Governance/components/ActionButtons/ActionButtons.tsx
 create mode 100644 src/views/Governance/components/ActionButtons/index.ts
 create mode 100644 src/views/Governance/components/DelegateModal/DelegateModal.tsx
 create mode 100644 src/views/Governance/components/DelegateModal/index.ts

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index b5d628009d..679d3ac400 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -2,11 +2,12 @@ import "src/views/Governance/Governance.scss";
 
 import { Box, Grid, Link, Typography } from "@mui/material";
 import { Skeleton } from "@mui/material";
-import { Paper, PrimaryButton, Proposal, SecondaryButton, Tab, Tabs } from "@olympusdao/component-library";
+import { Paper, Proposal, Tab, Tabs } from "@olympusdao/component-library";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { useProposal } from "src/hooks/useProposal";
 import { useActiveProposal, useGetTotalInstructions } from "src/hooks/useProposals";
+import ActionButtons from "src/views/Governance/components/ActionButtons";
 import { FilterModal } from "src/views/Governance/components/FilterModal";
 import { SearchBar } from "src/views/Governance/components/SearchBar/SearchBar";
 import { toCapitalCase } from "src/views/Governance/helpers";
@@ -45,12 +46,7 @@ export const ProposalsDashboard = () => {
           <Typography fontSize="27px" fontWeight="500" lineHeight="33px">
             Proposals
           </Typography>
-          <Box display="flex" minWidth="310px">
-            <Link to="/governance/create-proposal" component={RouterLink}>
-              <SecondaryButton>Create new Proposal</SecondaryButton>
-            </Link>
-            <PrimaryButton>Delegate Vote</PrimaryButton>
-          </Box>
+          <ActionButtons />
         </Box>
         <Box display="flex" justifyContent="center">
           <Tabs value={false}>
diff --git a/src/views/Governance/components/ActionButtons/ActionButtons.tsx b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
new file mode 100644
index 0000000000..4762635965
--- /dev/null
+++ b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
@@ -0,0 +1,28 @@
+import { Box, Link } from "@mui/material";
+import { PrimaryButton, SecondaryButton } from "@olympusdao/component-library";
+import { FC, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import DelegateModal from "src/views/Governance/components/DelegateModal";
+
+/**
+ * Component for Displaying ActionButtons
+ */
+const ActionButtons: FC = () => {
+  const [open, setOpen] = useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Box display="flex" minWidth="310px">
+      <Link to="/governance/create-proposal" component={RouterLink}>
+        <SecondaryButton>Create new Proposal</SecondaryButton>
+      </Link>
+      <PrimaryButton onClick={() => setOpen(true)}>Delegate Vote</PrimaryButton>
+
+      <DelegateModal open={open} handleClose={handleClose} />
+    </Box>
+  );
+};
+
+export default ActionButtons;
diff --git a/src/views/Governance/components/ActionButtons/index.ts b/src/views/Governance/components/ActionButtons/index.ts
new file mode 100644
index 0000000000..b11e646db5
--- /dev/null
+++ b/src/views/Governance/components/ActionButtons/index.ts
@@ -0,0 +1 @@
+export { default } from "./ActionButtons";
diff --git a/src/views/Governance/components/DelegateModal/DelegateModal.tsx b/src/views/Governance/components/DelegateModal/DelegateModal.tsx
new file mode 100644
index 0000000000..ffbfb22c75
--- /dev/null
+++ b/src/views/Governance/components/DelegateModal/DelegateModal.tsx
@@ -0,0 +1,45 @@
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { Input, Modal, OHMModalProps, PrimaryButton } from "@olympusdao/component-library";
+import { FC } from "react";
+
+type DelegateModalProps = {
+  open: OHMModalProps["open"];
+  handleClose: OHMModalProps["onClose"];
+};
+
+/*
+TODO: Need to add address where votes are currently delegated and display in the input area.
+TODO: Need to implement the hook when PrimaryButton is clicked. Should delegate votes.
+If votes aren't delegated anywhere this input should either be empty or it should populate the current address
+*/
+
+/**
+ * Component for Displaying DelegateModal
+ */
+const DelegateModal: FC<DelegateModalProps> = ({ open, handleClose }) => {
+  const theme = useTheme();
+  return (
+    <Modal
+      topLeft={<></>}
+      headerText="Delegate Vote"
+      open={open}
+      onClose={handleClose}
+      maxWidth="465px"
+      minHeight="278px"
+    >
+      <>
+        <Typography color={theme.colors.gray[90]} textAlign="center" lineHeight="18px" mb="18px">
+          Delegate all your voting power to this address.
+          <br /> You can always re-delegate to yourself or someone else.
+        </Typography>
+        <Input id="delegate" />
+        <Box mt="18px">
+          <PrimaryButton fullWidth>Delegate Votes</PrimaryButton>
+        </Box>
+      </>
+    </Modal>
+  );
+};
+
+export default DelegateModal;
diff --git a/src/views/Governance/components/DelegateModal/index.ts b/src/views/Governance/components/DelegateModal/index.ts
new file mode 100644
index 0000000000..63a4c1e4ab
--- /dev/null
+++ b/src/views/Governance/components/DelegateModal/index.ts
@@ -0,0 +1 @@
+export { default } from "./DelegateModal";
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 592dcbdef0..92cd523c45 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,30 +1,20 @@
-import "./ProposalPage.scss";
+import "src/views/Governance/components/ProposalPage/ProposalPage.scss";
 
 import { t } from "@lingui/macro";
 import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
-import {
-  Chip,
-  Icon,
-  OHMChipProps,
-  Paper,
-  PrimaryButton,
-  SecondaryButton,
-  Tab,
-  Tabs,
-} from "@olympusdao/component-library";
+import { Chip, Icon, OHMChipProps, Paper, Tab, Tabs } from "@olympusdao/component-library";
 import { FC, useMemo } from "react";
 import { NavLink, Outlet, Route, Routes, useParams } from "react-router-dom";
-import { Link as RouterLink } from "react-router-dom";
 import { shorten } from "src/helpers";
 import { prettifySeconds } from "src/helpers/timeUtil";
 import { useProposal } from "src/hooks/useProposal";
 import { IAnyProposal, PStatus } from "src/hooks/useProposals";
-
-import { NULL_PROPOSAL } from "../../constants";
-import { toCapitalCase } from "../../helpers";
-import { BackButton } from "../BackButton";
-import { PollDetailsTab } from "./components/PollDetailsTab";
-import { VotesTab } from "./components/VotesTab";
+import ActionButtons from "src/views/Governance/components/ActionButtons";
+import { BackButton } from "src/views/Governance/components/BackButton";
+import { PollDetailsTab } from "src/views/Governance/components/ProposalPage/components/PollDetailsTab";
+import { VotesTab } from "src/views/Governance/components/ProposalPage/components/VotesTab";
+import { NULL_PROPOSAL } from "src/views/Governance/constants";
+import { toCapitalCase } from "src/views/Governance/helpers";
 
 export const ProposalPage: FC = () => {
   const { passedId } = useParams();
@@ -60,10 +50,7 @@ export const PageWrapper = (props: { proposal: IAnyProposal }) => (
             <ProposalHeader proposal={props.proposal} />
           </Grid>
           <Grid display="flex" item sm={6} justifyContent="flex-end">
-            <Link to="/governance/create-proposal" component={RouterLink}>
-              <SecondaryButton>Create new proposal</SecondaryButton>
-            </Link>
-            <PrimaryButton>Delegate Vote</PrimaryButton>
+            <ActionButtons />
           </Grid>
         </Grid>
         <Box display="flex" justifyContent="center">

From ff6bd437113084d14d5b2d6084657feb84a32438 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 16 Aug 2022 15:55:39 -0400
Subject: [PATCH 061/113] Add verification of valid address to delegate modal

---
 .../DelegateModal/DelegateModal.tsx           | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/views/Governance/components/DelegateModal/DelegateModal.tsx b/src/views/Governance/components/DelegateModal/DelegateModal.tsx
index ffbfb22c75..b39d71dc17 100644
--- a/src/views/Governance/components/DelegateModal/DelegateModal.tsx
+++ b/src/views/Governance/components/DelegateModal/DelegateModal.tsx
@@ -1,7 +1,8 @@
+import { isAddress } from "@ethersproject/address";
 import { Box, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Input, Modal, OHMModalProps, PrimaryButton } from "@olympusdao/component-library";
-import { FC } from "react";
+import { FC, useState } from "react";
 
 type DelegateModalProps = {
   open: OHMModalProps["open"];
@@ -19,6 +20,23 @@ If votes aren't delegated anywhere this input should either be empty or it shoul
  */
 const DelegateModal: FC<DelegateModalProps> = ({ open, handleClose }) => {
   const theme = useTheme();
+  const [delegatedAddress, setDelegatedAddress] = useState("");
+  const [isDelegatedAddressValid, setIsDelegatedAddressValid] = useState(true);
+
+  const handleSetDelegatedAddress = (value: string) => {
+    setDelegatedAddress(value);
+    checkIsAddressValid(value);
+  };
+
+  const checkIsAddressValid = (value: string) => {
+    if (!isAddress(value)) {
+      setIsDelegatedAddressValid(false);
+      return;
+    }
+
+    setIsDelegatedAddressValid(true);
+  };
+
   return (
     <Modal
       topLeft={<></>}
@@ -33,9 +51,16 @@ const DelegateModal: FC<DelegateModalProps> = ({ open, handleClose }) => {
           Delegate all your voting power to this address.
           <br /> You can always re-delegate to yourself or someone else.
         </Typography>
-        <Input id="delegate" />
+        <Input
+          placeholder="0x..."
+          id="delegate"
+          error={!isDelegatedAddressValid}
+          onChange={(e: any) => handleSetDelegatedAddress(e.target.value)}
+        />
         <Box mt="18px">
-          <PrimaryButton fullWidth>Delegate Votes</PrimaryButton>
+          <PrimaryButton disabled={!isDelegatedAddressValid} fullWidth>
+            Delegate Votes
+          </PrimaryButton>
         </Box>
       </>
     </Modal>

From 45d3442e9cc3051e61b3fce0489f06a6da54f670 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 16 Aug 2022 16:06:41 -0400
Subject: [PATCH 062/113] Fix misalignment of ProposalSkeleton

---
 src/views/Governance/ProposalsDashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index b5d628009d..e3131c702e 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -70,7 +70,7 @@ export const ProposalsDashboard = () => {
             Filter
           </SecondaryButton>
         </Grid> */}
-        <Grid container direction="column" spacing={2}>
+        <Grid container direction="column" spacing={2} xs={12} ml={0}>
           <>
             {Number(activeProposal?.activationTimestamp) > 0 && (
               <ProposalContainer

From 3f1cee6eecdfcd1f3f7370f2c5c72ad911923c0f Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Thu, 18 Aug 2022 15:14:29 -0400
Subject: [PATCH 063/113] switch to isValidAddress helper

---
 .../Governance/components/DelegateModal/DelegateModal.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/views/Governance/components/DelegateModal/DelegateModal.tsx b/src/views/Governance/components/DelegateModal/DelegateModal.tsx
index b39d71dc17..695d1b8da3 100644
--- a/src/views/Governance/components/DelegateModal/DelegateModal.tsx
+++ b/src/views/Governance/components/DelegateModal/DelegateModal.tsx
@@ -1,8 +1,8 @@
-import { isAddress } from "@ethersproject/address";
 import { Box, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Input, Modal, OHMModalProps, PrimaryButton } from "@olympusdao/component-library";
 import { FC, useState } from "react";
+import { isValidAddress } from "src/helpers/misc/isValidAddress";
 
 type DelegateModalProps = {
   open: OHMModalProps["open"];
@@ -25,15 +25,11 @@ const DelegateModal: FC<DelegateModalProps> = ({ open, handleClose }) => {
 
   const handleSetDelegatedAddress = (value: string) => {
     setDelegatedAddress(value);
-    checkIsAddressValid(value);
-  };
 
-  const checkIsAddressValid = (value: string) => {
-    if (!isAddress(value)) {
+    if (!isValidAddress(value)) {
       setIsDelegatedAddressValid(false);
       return;
     }
-
     setIsDelegatedAddressValid(true);
   };
 

From b36376952a38e3850f7262f27e34dd40fbdcb8e2 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 23 Aug 2022 16:22:46 -0400
Subject: [PATCH 064/113] Fix alignment on ProposalContainer

---
 src/views/Governance/ProposalsDashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index e5e36134ce..709807abfc 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -92,7 +92,7 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
       {isLoading || !proposal ? (
         <ProposalSkeleton id={instructionsId} />
       ) : (
-        <Grid key={instructionsId} item xs={12}>
+        <Grid key={instructionsId} item xs={12} style={{ paddingLeft: "0px" }}>
           <Link to={`/governance/proposals/${proposal?.id}`} component={RouterLink}>
             <Proposal
               chipLabel={toCapitalCase(proposal?.state)}

From 2bd5016cccaee0f0167cb60ff96c86843f2c750f Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 23 Aug 2022 16:45:13 -0400
Subject: [PATCH 065/113] Fix bug noted on proposal time remaining

---
 src/hooks/useProposals.ts                   | 4 ++--
 src/views/Governance/ProposalsDashboard.tsx | 9 +++------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 2d7a9caa15..8ee7e1eb53 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -173,9 +173,9 @@ export const timeRemaining = ({
 }): number | undefined => {
   if (state === "active") {
     // TODO(appleseed): setup a config to make these duration requirements (from the contract) easily modifiable
-    return submissionTimestamp + unixDays(7) - Date.now() / 1000;
+    return submissionTimestamp + unixDays(7);
   } else if (state === "endorsement") {
-    return submissionTimestamp + unixDays(14) - Date.now() / 1000;
+    return submissionTimestamp + unixDays(14);
   } else {
     return undefined;
   }
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 709807abfc..a97ef4e751 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -69,10 +69,7 @@ export const ProposalsDashboard = () => {
         <Grid container direction="column" spacing={2} xs={12} ml={0}>
           <>
             {Number(activeProposal?.activationTimestamp) > 0 && (
-              <ProposalContainer
-                instructionsId={Number(activeProposal?.instructionsId)}
-                timeRemaining={Number(activeProposal?.timeRemaining)}
-              />
+              <ProposalContainer instructionsId={Number(activeProposal?.instructionsId)} />
             )}
             {isLoading ? <ProposalSkeleton /> : renderProposals()}
           </>
@@ -84,7 +81,7 @@ export const ProposalsDashboard = () => {
   );
 };
 
-const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId: number; timeRemaining?: number }) => {
+const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
   const { data: proposal, isLoading } = useProposal(instructionsId);
 
   return (
@@ -99,7 +96,7 @@ const ProposalContainer = ({ instructionsId, timeRemaining }: { instructionsId:
               proposalTitle={proposal?.proposalName}
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
-              voteEndDate={timeRemaining ? new Date(timeRemaining) : new Date()}
+              voteEndDate={proposal?.timeRemaining ? new Date(proposal.timeRemaining) : new Date()}
               quorum={0}
               votesAgainst={proposal?.noVotes}
               votesFor={proposal?.yesVotes}

From 7503280e4861ac95ed068fa6914e15e2046ab317 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 23 Aug 2022 17:12:46 -0400
Subject: [PATCH 066/113] Tweak display of time remaining on proposal page

---
 .../Governance/components/ProposalPage/ProposalPage.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 92cd523c45..659facc677 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -97,6 +97,11 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
     }
   };
   const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
+  let boundedTimeRemaining = 0;
+
+  if (proposal.timeRemaining && proposal.timeRemaining - Date.now() > 0) {
+    boundedTimeRemaining = (proposal.timeRemaining - Date.now()) / 1000;
+  }
 
   return (
     <Grid container direction="column" pt="9px" mb="9px">
@@ -118,7 +123,7 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
             <>
               <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
               <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                {`Ends in ${prettifySeconds(proposal.timeRemaining / 1000)}`}
+                {boundedTimeRemaining == 0 ? `Finished` : `Ends in ${prettifySeconds(boundedTimeRemaining)}`}
               </Typography>
             </>
           )}

From 32f402aadb539792bc1bef3854249889421efaf1 Mon Sep 17 00:00:00 2001
From: Lienid <0xLienid@protonmail.com>
Date: Tue, 23 Aug 2022 18:59:39 -0400
Subject: [PATCH 067/113] Copy tweak

---
 src/views/Governance/components/ProposalPage/ProposalPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 659facc677..18400549c7 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -97,8 +97,8 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
     }
   };
   const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
-  let boundedTimeRemaining = 0;
 
+  let boundedTimeRemaining = 0;
   if (proposal.timeRemaining && proposal.timeRemaining - Date.now() > 0) {
     boundedTimeRemaining = (proposal.timeRemaining - Date.now()) / 1000;
   }
@@ -123,7 +123,7 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
             <>
               <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
               <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                {boundedTimeRemaining == 0 ? `Finished` : `Ends in ${prettifySeconds(boundedTimeRemaining)}`}
+                {boundedTimeRemaining == 0 ? `Vote Finished` : `Ends in ${prettifySeconds(boundedTimeRemaining)}`}
               </Typography>
             </>
           )}

From 7cb5bfc6c36fa49c74b1e32189005c1f7bc7069d Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 12:16:31 -0500
Subject: [PATCH 068/113] replace relative paths w absolute

---
 src/views/Governance/Governance.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
index 708f7306e3..d040fea75c 100644
--- a/src/views/Governance/Governance.tsx
+++ b/src/views/Governance/Governance.tsx
@@ -1,8 +1,7 @@
 import { Route, Routes } from "react-router-dom";
-
-import { CreateProposal } from "./components/CreateProposal";
-import { ProposalPage } from "./components/ProposalPage";
-import { ProposalsDashboard } from "./ProposalsDashboard";
+import { CreateProposal } from "src/views/Governance/components/CreateProposal";
+import { ProposalPage } from "src/views/Governance/components/ProposalPage";
+import { ProposalsDashboard } from "src/views/Governance/ProposalsDashboard";
 
 export const Governance = () => {
   return (

From 1ca107adc5c368356bf5fc3a4aa0806ee62e2a7b Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 12:28:42 -0500
Subject: [PATCH 069/113] update contract addresses & abi

---
 src/abi/OlympusGovernance.json                | 1032 ++++++++++++-----
 src/constants/addresses.ts                    |    6 +-
 src/hooks/useProposal.ts                      |    6 +-
 src/hooks/useProposals.ts                     |   40 +-
 src/views/Governance/ProposalsDashboard.tsx   |    4 +-
 .../components/ProposalPage/ProposalPage.tsx  |    4 +-
 src/views/Governance/constants.ts             |    4 +-
 7 files changed, 784 insertions(+), 312 deletions(-)

diff --git a/src/abi/OlympusGovernance.json b/src/abi/OlympusGovernance.json
index 49a9568ee3..9c1e6fc86c 100644
--- a/src/abi/OlympusGovernance.json
+++ b/src/abi/OlympusGovernance.json
@@ -1,282 +1,754 @@
 {
-  "abi": [
-    {
-      "inputs": [{ "internalType": "contract Kernel", "name": "kernel_", "type": "address" }],
-      "stateMutability": "nonpayable",
-      "type": "constructor"
-    },
-    { "inputs": [], "name": "ActiveProposalNotExpired", "type": "error" },
-    { "inputs": [], "name": "CannotEndorseInvalidProposal", "type": "error" },
-    { "inputs": [], "name": "CannotEndorseNullProposal", "type": "error" },
-    { "inputs": [], "name": "CannotReclaimTokensForActiveVote", "type": "error" },
-    { "inputs": [], "name": "CannotReclaimZeroVotes", "type": "error" },
-    { "inputs": [], "name": "ExecutionTimelockStillActive", "type": "error" },
-    { "inputs": [], "name": "NoActiveProposalDetected", "type": "error" },
-    { "inputs": [], "name": "NotAuthorizedToActivateProposal", "type": "error" },
-    { "inputs": [], "name": "NotEnoughEndorsementsToActivateProposal", "type": "error" },
-    { "inputs": [], "name": "NotEnoughVotesToExecute", "type": "error" },
-    { "inputs": [], "name": "NotEnoughVotesToPropose", "type": "error" },
-    {
-      "inputs": [{ "internalType": "Keycode", "name": "keycode_", "type": "bytes5" }],
-      "name": "Policy_ModuleDoesNotExist",
-      "type": "error"
-    },
-    {
-      "inputs": [{ "internalType": "address", "name": "caller_", "type": "address" }],
-      "name": "Policy_OnlyKernel",
-      "type": "error"
-    },
-    { "inputs": [], "name": "ProposalAlreadyActivated", "type": "error" },
-    { "inputs": [], "name": "SubmittedProposalHasExpired", "type": "error" },
-    { "inputs": [], "name": "UserAlreadyVoted", "type": "error" },
-    { "inputs": [], "name": "VotingTokensAlreadyReclaimed", "type": "error" },
-    {
-      "anonymous": false,
-      "inputs": [
-        { "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
-        { "indexed": false, "internalType": "uint256", "name": "timestamp", "type": "uint256" }
-      ],
-      "name": "ProposalActivated",
-      "type": "event"
-    },
-    {
-      "anonymous": false,
-      "inputs": [
-        { "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
-        { "indexed": false, "internalType": "address", "name": "voter", "type": "address" },
-        { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" }
-      ],
-      "name": "ProposalEndorsed",
-      "type": "event"
-    },
-    {
-      "anonymous": false,
-      "inputs": [{ "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" }],
-      "name": "ProposalExecuted",
-      "type": "event"
-    },
-    {
-      "anonymous": false,
-      "inputs": [{ "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" }],
-      "name": "ProposalSubmitted",
-      "type": "event"
-    },
-    {
-      "anonymous": false,
-      "inputs": [
-        { "indexed": false, "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
-        { "indexed": false, "internalType": "address", "name": "voter", "type": "address" },
-        { "indexed": false, "internalType": "bool", "name": "for_", "type": "bool" },
-        { "indexed": false, "internalType": "uint256", "name": "userVotes", "type": "uint256" }
-      ],
-      "name": "WalletVoted",
-      "type": "event"
-    },
-    {
-      "inputs": [],
-      "name": "INSTR",
-      "outputs": [{ "internalType": "contract DefaultInstructions", "name": "", "type": "address" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "VOTES",
-      "outputs": [{ "internalType": "contract DefaultVotes", "name": "", "type": "address" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
-      "name": "activateProposal",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "activeProposal",
-      "outputs": [
-        { "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
-        { "internalType": "uint256", "name": "activationTimestamp", "type": "uint256" }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "configureDependencies",
-      "outputs": [{ "internalType": "Keycode[]", "name": "dependencies", "type": "bytes5[]" }],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
-      "name": "endorseProposal",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    { "inputs": [], "name": "executeProposal", "outputs": [], "stateMutability": "nonpayable", "type": "function" },
-    {
-      "inputs": [],
-      "name": "getActiveProposal",
-      "outputs": [
-        {
-          "components": [
-            { "internalType": "uint256", "name": "instructionsId", "type": "uint256" },
-            { "internalType": "uint256", "name": "activationTimestamp", "type": "uint256" }
-          ],
-          "internalType": "struct ActivatedProposal",
-          "name": "",
-          "type": "tuple"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
-      "name": "getMetadata",
-      "outputs": [
-        {
-          "components": [
-            { "internalType": "bytes32", "name": "proposalName", "type": "bytes32" },
-            { "internalType": "address", "name": "proposer", "type": "address" },
-            { "internalType": "uint256", "name": "submissionTimestamp", "type": "uint256" }
-          ],
-          "internalType": "struct ProposalMetadata",
-          "name": "",
-          "type": "tuple"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "name": "getProposalMetadata",
-      "outputs": [
-        { "internalType": "bytes32", "name": "proposalName", "type": "bytes32" },
-        { "internalType": "address", "name": "proposer", "type": "address" },
-        { "internalType": "uint256", "name": "submissionTimestamp", "type": "uint256" }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "kernel",
-      "outputs": [{ "internalType": "contract Kernel", "name": "", "type": "address" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "name": "noVotesForProposal",
-      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "name": "proposalHasBeenActivated",
-      "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "instructionsId_", "type": "uint256" }],
-      "name": "reclaimVotes",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "requestPermissions",
-      "outputs": [
-        {
-          "components": [
-            { "internalType": "Keycode", "name": "keycode", "type": "bytes5" },
-            { "internalType": "bytes4", "name": "funcSelector", "type": "bytes4" }
-          ],
-          "internalType": "struct Permissions[]",
-          "name": "requests",
-          "type": "tuple[]"
+    "abi": [
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "kernel_",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "constructor"
+        },
+        {
+            "inputs": [],
+            "name": "ActiveProposalNotExpired",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "CannotEndorseInvalidProposal",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "CannotEndorseNullProposal",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "CannotReclaimTokensForActiveVote",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "CannotReclaimZeroVotes",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "ExecutionTimelockStillActive",
+            "type": "error"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "caller_",
+                    "type": "address"
+                }
+            ],
+            "name": "KernelAdapter_OnlyKernel",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "NoActiveProposalDetected",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "NotAuthorizedToActivateProposal",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "NotEnoughEndorsementsToActivateProposal",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "NotEnoughVotesToExecute",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "NotEnoughVotesToPropose",
+            "type": "error"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "Keycode",
+                    "name": "keycode_",
+                    "type": "bytes5"
+                }
+            ],
+            "name": "Policy_ModuleDoesNotExist",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "ProposalAlreadyActivated",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "SubmittedProposalHasExpired",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "UserAlreadyVoted",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "VotingTokensAlreadyReclaimed",
+            "type": "error"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "proposalId",
+                    "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "timestamp",
+                    "type": "uint256"
+                }
+            ],
+            "name": "ProposalActivated",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "proposalId",
+                    "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "address",
+                    "name": "voter",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "ProposalEndorsed",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "proposalId",
+                    "type": "uint256"
+                }
+            ],
+            "name": "ProposalExecuted",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "proposalId",
+                    "type": "uint256"
+                }
+            ],
+            "name": "ProposalSubmitted",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "proposalId",
+                    "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "address",
+                    "name": "voter",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "bool",
+                    "name": "for_",
+                    "type": "bool"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "userVotes",
+                    "type": "uint256"
+                }
+            ],
+            "name": "WalletVoted",
+            "type": "event"
+        },
+        {
+            "inputs": [],
+            "name": "ACTIVATION_DEADLINE",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "ENDORSEMENT_THRESHOLD",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "EXECUTION_THRESHOLD",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "GRACE_PERIOD",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "INSTR",
+            "outputs": [
+                {
+                    "internalType": "contract DefaultInstructions",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VOTER_REWARD_RATE",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VOTES",
+            "outputs": [
+                {
+                    "internalType": "contract DefaultVotes",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "proposalId_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "activateProposal",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "activeProposal",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "proposalId",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "activationTimestamp",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "newKernel_",
+                    "type": "address"
+                }
+            ],
+            "name": "changeKernel",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "configureDependencies",
+            "outputs": [
+                {
+                    "internalType": "Keycode[]",
+                    "name": "dependencies",
+                    "type": "bytes5[]"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "proposalId_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "endorseProposal",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "executeProposal",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getActiveProposal",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "uint256",
+                            "name": "proposalId",
+                            "type": "uint256"
+                        },
+                        {
+                            "internalType": "uint256",
+                            "name": "activationTimestamp",
+                            "type": "uint256"
+                        }
+                    ],
+                    "internalType": "struct IGovernance.ActivatedProposal",
+                    "name": "",
+                    "type": "tuple"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "proposalId_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "getMetadata",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "bytes32",
+                            "name": "title",
+                            "type": "bytes32"
+                        },
+                        {
+                            "internalType": "address",
+                            "name": "submitter",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "uint256",
+                            "name": "submissionTimestamp",
+                            "type": "uint256"
+                        },
+                        {
+                            "internalType": "string",
+                            "name": "proposalURI",
+                            "type": "string"
+                        }
+                    ],
+                    "internalType": "struct IGovernance.ProposalMetadata",
+                    "name": "",
+                    "type": "tuple"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "name": "getProposalMetadata",
+            "outputs": [
+                {
+                    "internalType": "bytes32",
+                    "name": "title",
+                    "type": "bytes32"
+                },
+                {
+                    "internalType": "address",
+                    "name": "submitter",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "submissionTimestamp",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "string",
+                    "name": "proposalURI",
+                    "type": "string"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "isActive",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "kernel",
+            "outputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "name": "noVotesForProposal",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "name": "proposalHasBeenActivated",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "proposalId_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "reclaimVotes",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "requestPermissions",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "Keycode",
+                            "name": "keycode",
+                            "type": "bytes5"
+                        },
+                        {
+                            "internalType": "bytes4",
+                            "name": "funcSelector",
+                            "type": "bytes4"
+                        }
+                    ],
+                    "internalType": "struct Permissions[]",
+                    "name": "requests",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "bool",
+                    "name": "activate_",
+                    "type": "bool"
+                }
+            ],
+            "name": "setActiveStatus",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "enum Actions",
+                            "name": "action",
+                            "type": "uint8"
+                        },
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        }
+                    ],
+                    "internalType": "struct Instruction[]",
+                    "name": "instructions_",
+                    "type": "tuple[]"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "title_",
+                    "type": "bytes32"
+                },
+                {
+                    "internalType": "string",
+                    "name": "proposalURI_",
+                    "type": "string"
+                }
+            ],
+            "name": "submitProposal",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "tokenClaimsForProposal",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "name": "totalEndorsementsForProposal",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "userEndorsementsForProposal",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "userVotesForProposal",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "bool",
+                    "name": "for_",
+                    "type": "bool"
+                }
+            ],
+            "name": "vote",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "name": "yesVotesForProposal",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
         }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "components": [
-            { "internalType": "enum Actions", "name": "action", "type": "uint8" },
-            { "internalType": "address", "name": "target", "type": "address" }
-          ],
-          "internalType": "struct Instruction[]",
-          "name": "instructions_",
-          "type": "tuple[]"
-        },
-        { "internalType": "bytes32", "name": "proposalName_", "type": "bytes32" }
-      ],
-      "name": "submitProposal",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        { "internalType": "uint256", "name": "", "type": "uint256" },
-        { "internalType": "address", "name": "", "type": "address" }
-      ],
-      "name": "tokenClaimsForProposal",
-      "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "name": "totalEndorsementsForProposal",
-      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        { "internalType": "uint256", "name": "", "type": "uint256" },
-        { "internalType": "address", "name": "", "type": "address" }
-      ],
-      "name": "userEndorsementsForProposal",
-      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        { "internalType": "uint256", "name": "", "type": "uint256" },
-        { "internalType": "address", "name": "", "type": "address" }
-      ],
-      "name": "userVotesForProposal",
-      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "bool", "name": "for_", "type": "bool" }],
-      "name": "vote",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "name": "yesVotesForProposal",
-      "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
-      "stateMutability": "view",
-      "type": "function"
-    }
-  ]
-}
+    ]
+}
\ No newline at end of file
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index 03ce8987b7..9d4715d084 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -173,15 +173,15 @@ export const DEV_FAUCET = {
 
 export const GOVERNANCE_ADDRESSES = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xaAd5e6e1362b458E38140B7E8c6d5D71b933a56f",
+  [NetworkId.TESTNET_GOERLI]: "0xf1c6848e7b7bc93401262cdeab40dcbaf92e16ac",
 };
 
 export const GOV_INSTRUCTIONS_ADDRESSES = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xcad1fa1617d7b71C785dae33b7d7e62E649eEc66",
+  [NetworkId.TESTNET_GOERLI]: "0xa8810f94ABe49Ffe0AA49a1c30930a40C450f288",
 };
 
 export const VOTE_ISSUER_ADDRESSES = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xB737239c3d0FfcB30184D3d1156A6D91a023233D",
+  [NetworkId.TESTNET_GOERLI]: "0x65e44BEaf20bc8BED9643Bf996A59d478db1090b",
 };
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 9ba90afb94..1ce7f39909 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -76,8 +76,8 @@ export const useProposal = (instructionsIndex: number) => {
       const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : undefined;
       const currentProposal = {
         id: instructionsIndex,
-        proposalName: ethers.utils.parseBytes32String(metadata.proposalName),
-        proposer: metadata.proposer,
+        title: ethers.utils.parseBytes32String(metadata.title),
+        submitter: metadata.submitter,
         // NOTE(appleseed): multiply submissionTimestamp by 1000 to convert to JS Time from Unix Time
         submissionTimestamp: submissionTimestamp * 1000,
         timeRemaining: jsTimeRemaining,
@@ -118,7 +118,7 @@ export interface ISubmitProposal {
  * [[2,"0x5a46373152Fe723f052117fdc8E5282677808A70"]]
  * 0x6d792070726f706f73616c000000000000000000000000000000000000000000
  *
- * proposalname (2nd param above):
+ * title (2nd param above):
  * ethers.utils.formatBytes32String("my proposal name")
  *
  * gotcha:
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 8ee7e1eb53..38c54ee988 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -18,16 +18,16 @@ export enum ProposalAction {
 
 /// Data type for return from getProposalMetadata on Governance.sol
 export interface proposalMetadata {
-  proposalName: string;
-  proposer: string;
+  title: string;
+  submitter: string;
   submissionTimestamp: number;
 }
 
 /// Data type for returning full proposal informations
 export interface Proposal {
   id: number;
-  proposalName: string;
-  proposer: string;
+  title: string;
+  submitter: string;
   submissionTimestamp: number;
   isActive: boolean;
   state: PStatus;
@@ -74,23 +74,23 @@ export const activeProposal = 0;
 /// Mock mapping data for proposalMetadata in Governance.sol
 export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
   0: {
-    proposalName: "0x4f49502d31000000000000000000000000000000000000000000000000000000",
-    proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
+    title: "0x4f49502d31000000000000000000000000000000000000000000000000000000",
+    submitter: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
     submissionTimestamp: 1653948322,
   },
   1: {
-    proposalName: "0x4f49502d32000000000000000000000000000000000000000000000000000000",
-    proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
+    title: "0x4f49502d32000000000000000000000000000000000000000000000000000000",
+    submitter: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
     submissionTimestamp: 1655157922,
   },
   2: {
-    proposalName: "0x4f49502d33000000000000000000000000000000000000000000000000000000",
-    proposer: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
+    title: "0x4f49502d33000000000000000000000000000000000000000000000000000000",
+    submitter: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
     submissionTimestamp: 1655503522,
   },
   3: {
-    proposalName: "0x4f49502d34000000000000000000000000000000000000000000000000000000",
-    proposer: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
+    title: "0x4f49502d34000000000000000000000000000000000000000000000000000000",
+    submitter: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
     submissionTimestamp: 1656626722,
   },
 };
@@ -326,8 +326,8 @@ export const MockGetNoVotesForProposal = (instructionsIndex: number) => {
 
 //TODO: Not implemented in Contract. Follow up with SC Team
 /// Function to return mock proposal URI in lieu of a contract
-export const mockGetProposalURI = (proposalName: string): string => {
-  return mockProposalURIs[proposalName];
+export const mockGetProposalURI = (title: string): string => {
+  return mockProposalURIs[title];
 };
 
 //TODO: Not implemented in Contract. Follow up with SC Team
@@ -337,8 +337,8 @@ export const mockGetProposalContent = (uri: string): string => {
 };
 
 /// Function to return mock proposal state in lieu of contract/content deployed to IPFS
-export const mockGetProposalState = (proposalName: string): PStatus => {
-  return mockProposalState[proposalName];
+export const mockGetProposalState = (title: string): PStatus => {
+  return mockProposalState[title];
 };
 
 /**
@@ -406,19 +406,19 @@ export const useProposals = (filters: IProposalState) => {
         const endorsements = MockGetProposalTotalEndorsements(i);
         const yesVotes = MockGetYesVotesForProposal(i);
         const noVotes = MockGetNoVotesForProposal(i);
-        const proposalURI = mockGetProposalURI(proposal.proposalName);
+        const proposalURI = mockGetProposalURI(proposal.title);
         const proposalContent = mockGetProposalContent(proposalURI);
         /**
          * should become parsing logic to determine a proposal's state
          * - TODO(appleseed): still need to determine methodolgy for "discussion", "draft" and "closed" states
          * @returns {PStatus} IProposalState
          */
-        const proposalState = mockGetProposalState(proposal.proposalName);
+        const proposalState = mockGetProposalState(proposal.title);
 
         const currentProposal: Proposal = {
           id: i,
-          proposalName: ethers.utils.parseBytes32String(proposal.proposalName),
-          proposer: proposal.proposer,
+          title: ethers.utils.parseBytes32String(proposal.title),
+          submitter: proposal.submitter,
           submissionTimestamp: proposal.submissionTimestamp,
           isActive: isActive,
           state: proposalState,
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index a97ef4e751..1b38229d44 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -93,7 +93,7 @@ const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
           <Link to={`/governance/proposals/${proposal?.id}`} component={RouterLink}>
             <Proposal
               chipLabel={toCapitalCase(proposal?.state)}
-              proposalTitle={proposal?.proposalName}
+              proposalTitle={proposal?.title}
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
               voteEndDate={proposal?.timeRemaining ? new Date(proposal.timeRemaining) : new Date()}
@@ -113,7 +113,7 @@ export const ProposalSkeleton = ({ id = 0 }: { id?: number }) => {
     <Skeleton width="100%">
       <Proposal
         chipLabel={toCapitalCase("active")}
-        proposalTitle={"proposal.proposalName"}
+        proposalTitle={"proposal.title"}
         publishedDate={new Date()}
         status={"active"}
         voteEndDate={new Date()}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 18400549c7..218bf4c933 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -108,12 +108,12 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
       <Grid item>
         <Typography lineHeight="18px" variant="body2" color={theme.colors.gray[90]}>
           Posted on <span style={{ color: theme.colors.gray[40] }}>{formattedPublishedDate}</span> by:{" "}
-          <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.proposer)}</span>
+          <span style={{ color: theme.colors.gray[40] }}>{shorten(proposal.submitter)}</span>
         </Typography>
       </Grid>
       <Grid item>
         <Typography fontSize="24px" lineHeight="32px" fontWeight={700}>
-          {proposal.proposalName}
+          {proposal.title}
         </Typography>
       </Grid>
       <Box display="flex" flexDirection="row" mt="4px">
diff --git a/src/views/Governance/constants.ts b/src/views/Governance/constants.ts
index d67cab9521..5943038405 100644
--- a/src/views/Governance/constants.ts
+++ b/src/views/Governance/constants.ts
@@ -2,8 +2,8 @@ import { Proposal } from "src/hooks/useProposals";
 
 export const NULL_PROPOSAL: Proposal = {
   id: -1,
-  proposalName: "",
-  proposer: "",
+  title: "",
+  submitter: "",
   submissionTimestamp: 0,
   isActive: false,
   state: "closed",

From 07c41db070bd65be474afabbf6a3bc4ed3c948f8 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 12:33:17 -0500
Subject: [PATCH 070/113] more abi & type updates / tuneup

---
 src/hooks/useProposal.ts                                 | 2 +-
 src/hooks/useProposals.ts                                | 6 +++---
 src/hooks/useVoting.ts                                   | 9 ++++-----
 .../components/CreateProposal/CreateProposal.tsx         | 4 ++--
 .../components/ProposalPage/components/VotesTab.tsx      | 2 +-
 5 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 1ce7f39909..78c6fe7bd4 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -141,7 +141,7 @@ export const useSubmitProposal = () => {
       proposal.instructions,
       ethers.utils.formatBytes32String(proposal.name),
       // TODO(appleseed): add back in name after contract update
-      // proposal.proposalURI,
+      proposal.proposalURI,
     );
   });
 };
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 38c54ee988..9b3956b119 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -11,8 +11,8 @@ import { useNetwork } from "wagmi";
 export enum ProposalAction {
   InstallModule,
   UpgradeModule,
-  ApprovePolicy,
-  TerminatePolicy,
+  ActivatePolicy,
+  DeactivatePolicy,
   ChangeExecutor,
 }
 
@@ -240,7 +240,7 @@ export const useActiveProposal = () => {
     const unixTimeRemaining = timeRemaining({ state: "active", submissionTimestamp: activationTimestamp });
     const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : 0;
     return {
-      instructionsId: parseBigNumber(activeProposal.instructionsId, 0),
+      instructionsId: parseBigNumber(activeProposal.proposalId, 0),
       activationTimestamp,
       timeRemaining: jsTimeRemaining,
     };
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 2379076608..131fba4b4c 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -7,12 +7,12 @@ import { error as createErrorToast, info as createInfoToast } from "src/slices/M
 import { useNetwork, useSigner } from "wagmi";
 
 interface Vote {
-  instructionsId: BigNumber;
+  proposalId: BigNumber;
   vote: boolean;
 }
 
 interface ActivatedProposal {
-  instructionsId: BigNumber;
+  proposalId: BigNumber;
   activationTimestamp: BigNumber;
 }
 
@@ -62,10 +62,9 @@ export const useVote = () => {
       if (!signer) throw new Error("No signer connected, cannot endorse");
 
       const activeProposal: ActivatedProposal = await contract.activeProposal();
-      const activeProposalId = activeProposal.instructionsId;
+      const activeProposalId = activeProposal.proposalId;
 
-      if (!voteData.instructionsId.eq(activeProposalId))
-        throw new Error(t`You can only vote for the activated proposal`);
+      if (!voteData.proposalId.eq(activeProposalId)) throw new Error(t`You can only vote for the activated proposal`);
 
       const transaction = await contract.connect(signer).vote(voteData.vote);
       return transaction.wait();
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 87d226cb19..f814d61500 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -42,8 +42,8 @@ export const CreateProposal = () => {
           >
             <option value={ProposalAction.InstallModule}>Install Module</option>
             <option value={ProposalAction.UpgradeModule}>Upgrade Module</option>
-            <option value={ProposalAction.ApprovePolicy}>Approve Policy</option>
-            <option value={ProposalAction.TerminatePolicy}>Terminate Policy</option>
+            <option value={ProposalAction.ActivatePolicy}>Approve Policy</option>
+            <option value={ProposalAction.DeactivatePolicy}>Terminate Policy</option>
             <option value={ProposalAction.ChangeExecutor}>Change Executor</option>
           </Select>
         </Box>
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index a2b6159b89..85bcc50966 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -44,7 +44,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   }));
 
   const handleVoteSubmission = () => {
-    submitVote.mutate({ voteData: { instructionsId: BigNumber.from(proposal.id), vote: vote === "yes" } });
+    submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
   };
 
   return (

From ecc1d180b269e165ee650ed93c97b91560710272 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 13:29:43 -0500
Subject: [PATCH 071/113] update proposal parsing

---
 src/helpers/Web3Storage.ts |  3 +--
 src/helpers/index.tsx      |  8 ++++++++
 src/hooks/useProposal.ts   | 25 +++++++++----------------
 src/hooks/useProposals.ts  | 14 ++++++++------
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/helpers/Web3Storage.ts b/src/helpers/Web3Storage.ts
index f98f1d3256..7900d7ba19 100644
--- a/src/helpers/Web3Storage.ts
+++ b/src/helpers/Web3Storage.ts
@@ -1,9 +1,8 @@
+import { Environment } from "src/helpers/environment/Environment/Environment";
 import { IProposalContent } from "src/hooks/useProposals";
 import { Filelike, Web3Storage } from "web3.storage";
 import { CIDString } from "web3.storage/dist/src/lib/interface";
 
-import { Environment } from "./environment/Environment/Environment";
-
 export interface IPFSFileData {
   path: string;
   cid: CIDString;
diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx
index bdf257f7b3..b13b2821eb 100644
--- a/src/helpers/index.tsx
+++ b/src/helpers/index.tsx
@@ -122,6 +122,14 @@ export const formatNumber = (number: number, precision = 0) => {
   }).format(number);
 };
 
+/**
+ * trims string to 31 characters max
+ * - bytes32 string must be less than 32 bytes (31 characters)
+ */
+export const stringToBytes32String = (str: string) => {
+  return str.slice(0, 31);
+};
+
 export const isTestnet = (networkId: NetworkId) => {
   const testnets = [
     NetworkId.ARBITRUM_TESTNET,
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 78c6fe7bd4..bf27d2e896 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { ethers } from "ethers";
 import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
-import { parseBigNumber } from "src/helpers";
+import { parseBigNumber, stringToBytes32String } from "src/helpers";
 import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
 import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
@@ -50,22 +50,14 @@ export const useProposal = (instructionsIndex: number) => {
   const yesVotes = useDependentQuery("YesVotesForProposal", () => contract.yesVotesForProposal(instructionsIndex));
   const noVotes = useDependentQuery("NoVotesForProposal", () => contract.noVotesForProposal(instructionsIndex));
 
-  // TODO(appleseed): need proposalURI_ functionality on deployment
-  // TODO(appleseed): temporary randomness on proposal URI for now
-  const uris = [
-    "ipfs://bafkreidmgcatj7skn6ufob5stdc7hnt76nvyb7dpc62l72fhrbluiychly",
-    "ipfs://bafybeigyvefco3cr6htyuzgv3gz4d2ctmdoptr2mlyvffv7uj6i276xgca/proposal.json",
-  ];
-  const proposalURI = uris[Math.floor(Math.random() * uris.length)];
-
-  const proposalContent = useDependentQuery("ProposalContent", () => parseProposalContent({ uri: proposalURI }));
   const proposalState = parseProposalState({ isActive });
 
   const query = useQuery<IAnyProposal, Error>(
     queryKey,
     async () => {
-      queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes && proposalContent, queryKey);
+      queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes, queryKey);
       /// For the specified proposal index, fetch the relevant data points used in the frontend
+      const proposalContent = await parseProposalContent({ uri: metadata.proposalURI });
       const content: string = proposalContent.description;
       const discussionURL: string = proposalContent.external_url;
       /**
@@ -76,7 +68,7 @@ export const useProposal = (instructionsIndex: number) => {
       const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : undefined;
       const currentProposal = {
         id: instructionsIndex,
-        title: ethers.utils.parseBytes32String(metadata.title),
+        title: proposalContent.name,
         submitter: metadata.submitter,
         // NOTE(appleseed): multiply submissionTimestamp by 1000 to convert to JS Time from Unix Time
         submissionTimestamp: submissionTimestamp * 1000,
@@ -93,7 +85,7 @@ export const useProposal = (instructionsIndex: number) => {
       return currentProposal;
     },
     {
-      enabled: !!metadata && !!proposalState && !!endorsements && !!yesVotes && !!noVotes && !!proposalContent,
+      enabled: !!metadata && !!proposalState && !!endorsements && !!yesVotes && !!noVotes,
     },
   );
 
@@ -137,9 +129,10 @@ export const useSubmitProposal = () => {
   return useMutation<any, Error, { proposal: ISubmitProposal }>(async ({ proposal }: { proposal: ISubmitProposal }) => {
     if (!signer) throw new Error(t`Signer is not set`);
 
+    // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
     await contract.connect(signer).submitProposal(
       proposal.instructions,
-      ethers.utils.formatBytes32String(proposal.name),
+      ethers.utils.formatBytes32String(stringToBytes32String(proposal.name)),
       // TODO(appleseed): add back in name after contract update
       proposal.proposalURI,
     );
@@ -149,8 +142,8 @@ export const useSubmitProposal = () => {
 export const useIPFSUpload = () => {
   return useMutation<IPFSFileData | undefined, Error, { proposal: IProposalJson }>(
     async ({ proposal }: { proposal: IProposalJson }) => {
-      const files = makeJsonFile(proposal, "proposal.json");
-      const fileInfo = await uploadToIPFS(files);
+      const file = makeJsonFile(proposal, "proposal.json");
+      const fileInfo = await uploadToIPFS(file);
       console.log("after", fileInfo);
       return fileInfo;
     },
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 9b3956b119..6e41e8c52b 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -198,7 +198,13 @@ export const parseProposalState = ({ isActive }: { isActive: boolean | undefined
  * - description {string}
  * - external_url {string} - url link to discussion
  */
-export const parseProposalContent = async ({ uri }: { uri: string }): Promise<IProposalContent> => {
+export const parseProposalContent = async ({ uri }: { uri: string | undefined }): Promise<IProposalContent> => {
+  const placeholder = {
+    name: "",
+    description: "",
+    external_url: "",
+  };
+  if (!uri) return placeholder;
   let readURI = uri;
   if (~uri.indexOf("ipfs:/")) {
     readURI = `https://ipfs.io/ipfs/${uri.replace("ipfs:/", "")}`;
@@ -213,11 +219,7 @@ export const parseProposalContent = async ({ uri }: { uri: string }): Promise<IP
   } catch (error) {
     // handle error
     console.log(error);
-    return {
-      name: "",
-      description: "",
-      external_url: "",
-    };
+    return placeholder;
   }
 };
 

From d455154dbcb11b05403772f316c544e75f98aecf Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 14:28:03 -0500
Subject: [PATCH 072/113] update uniswap test for random tvl error

---
 .../__tests__/UniswapBasedPools.unit.test.jsx         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/views/Stake/components/ExternalStakePools/__tests__/UniswapBasedPools.unit.test.jsx b/src/views/Stake/components/ExternalStakePools/__tests__/UniswapBasedPools.unit.test.jsx
index e0c6e52870..b376b2f3d2 100644
--- a/src/views/Stake/components/ExternalStakePools/__tests__/UniswapBasedPools.unit.test.jsx
+++ b/src/views/Stake/components/ExternalStakePools/__tests__/UniswapBasedPools.unit.test.jsx
@@ -3,7 +3,7 @@ import * as helpers from "src/helpers";
 import { useStaticPairContract } from "src/hooks/useContract";
 import { useGohmPrice } from "src/hooks/usePrices";
 import { render, screen } from "src/testUtils";
-import Stake from "src/views/Stake/Stake";
+import { ExternalStakePools } from "src/views/Stake/components/ExternalStakePools/ExternalStakePools";
 jest.mock("src/hooks/usePrices");
 jest.mock("src/hooks/useContract");
 
@@ -23,9 +23,14 @@ describe("Uniswap Based Farm Pool", () => {
       balanceOf: jest.fn().mockReturnValue(BigNumber.from("0xb76e0e83cbaa98e9ed")),
     });
     helpers.getTokenPrice = jest.fn().mockReturnValue(87.39);
+    render(<ExternalStakePools />);
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
   });
   it("should display the correct TVL", async () => {
-    render(<Stake />);
-    expect(await screen.findByText("$26,248,739")).toBeInTheDocument();
+    //This covers hook interactions and proper rounding on the presentation layer.
+    const waitforText = await screen.findAllByText("$26,248,739");
+    expect(waitforText[0]).toBeInTheDocument();
   });
 });

From a2debae5f96c838172544e399b2c8c95e2bd0891 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 16:42:43 -0500
Subject: [PATCH 073/113] init ticket
 https://github.com/OlympusDAO/internal-tasks/issues/41

---
 .../Governance/components/ProposalPage/components/VotesTab.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 85bcc50966..7e9143681a 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -28,6 +28,9 @@ import { useVote } from "src/hooks/useVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
+/**
+ * parses proposal status & displays endorsements or votes
+ */
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
   const networks = useTestableNetworks();

From e5880dc5f0f0c728333bf45d65595bd6ed651420 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 30 Aug 2022 17:05:42 -0500
Subject: [PATCH 074/113] handle endorsement submission

---
 src/hooks/useVoting.ts                        |  8 +-
 .../ProposalPage/components/VotesTab.tsx      | 82 +++++++++++++------
 2 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 131fba4b4c..802fb17164 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -24,17 +24,17 @@ export const useEndorse = () => {
 
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
 
-  return useMutation<ContractReceipt, Error, { instructionsId: BigNumber }>(
-    async ({ instructionsId }: { instructionsId: BigNumber }) => {
+  return useMutation<ContractReceipt, Error, { proposalId: BigNumber }>(
+    async ({ proposalId }: { proposalId: BigNumber }) => {
       if (!signer) throw new Error("No signer connected, cannot endorse");
 
       // NOTE (lienid): can't decide if it is worth calling totalInstructions on the INSTR contract
       //                to make sure that the passed ID is valid. If it is being fed through by the
       //                site then there's no reason it should be invalid. Also don't know if -1 may
       //                ever be passed as some sort of default value
-      if (instructionsId.eq(-1)) throw new Error(t`Cannot endorse proposal with invalid ID`);
+      if (proposalId.eq(-1)) throw new Error(t`Cannot endorse proposal with invalid ID`);
 
-      const transaction = await contract.connect(signer).endorseProposal(instructionsId);
+      const transaction = await contract.connect(signer).endorseProposal(proposalId);
       return transaction.wait();
     },
     {
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 7e9143681a..94e453dd6b 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -24,12 +24,13 @@ import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
 import { useGohmBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { useVote } from "src/hooks/useVoting";
+import { useEndorse, useVote } from "src/hooks/useVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
 /**
  * parses proposal status & displays endorsements or votes
+ * @TODO may be better to refactor this into separate components
  */
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
@@ -38,6 +39,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const gohmBalance = useGohmBalance()[networks.MAINNET].data;
   const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
+  const submitEndorsement = useEndorse();
 
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
@@ -50,38 +52,66 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
     submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
   };
 
+  const handleEndorseSubmission = () => {
+    submitEndorsement.mutate({ proposalId: BigNumber.from(proposal.id) });
+  };
+
   return (
     <Paper fullWidth>
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
         <Box display="flex" flexDirection="column">
           <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
-            Cast your vote
+            {proposal.isActive ? `Cast your vote` : `Endorsements`}
           </Typography>
         </Box>
-        {isConnected && <Metric label="Your voting power" metric={`${formatBalance(2, gohmBalance)} gOHM`} />}
-        <Box display="flex" flexDirection="row" justifyContent="center">
-          <SecondaryButton
-            sx={{ minWidth: "120px" }}
-            disabled={!isConnected || !proposal.isActive}
-            onClick={() => setVote("yes")}
-          >
-            Yes
-          </SecondaryButton>
-          <TertiaryButton
-            sx={{ minWidth: "120px" }}
-            disabled={!isConnected || !proposal.isActive}
-            onClick={() => setVote("no")}
-          >
-            No
-          </TertiaryButton>
-        </Box>
-        <WalletConnectedGuard>
-          <Box display="flex" flexDirection="row" justifyContent="center">
-            <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
-              Vote
-            </PrimaryButton>
-          </Box>
-        </WalletConnectedGuard>
+        {isConnected && proposal.isActive ? (
+          <Metric label="Your voting power" metric={`${formatBalance(2, gohmBalance)} gOHM`} />
+        ) : isConnected && !proposal.isActive ? (
+          <Metric label="Your voting power" metric={`1 Endorsement`} />
+        ) : (
+          <></>
+        )}
+        {proposal.isActive ? (
+          <>
+            <Box display="flex" flexDirection="row" justifyContent="center">
+              <SecondaryButton
+                sx={{ minWidth: "120px" }}
+                disabled={!isConnected || !proposal.isActive}
+                onClick={() => setVote("yes")}
+              >
+                Yes
+              </SecondaryButton>
+              <TertiaryButton
+                sx={{ minWidth: "120px" }}
+                disabled={!isConnected || !proposal.isActive}
+                onClick={() => setVote("no")}
+              >
+                No
+              </TertiaryButton>
+            </Box>
+            <WalletConnectedGuard>
+              <Box display="flex" flexDirection="row" justifyContent="center">
+                <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
+                  Vote
+                </PrimaryButton>
+              </Box>
+            </WalletConnectedGuard>
+          </>
+        ) : (
+          <>
+            <WalletConnectedGuard>
+              <Box display="flex" flexDirection="row" justifyContent="center">
+                <PrimaryButton
+                  sx={{ minWidth: "120px" }}
+                  disabled={!!proposal.isActive}
+                  onClick={handleEndorseSubmission}
+                >
+                  Endorse
+                </PrimaryButton>
+              </Box>
+            </WalletConnectedGuard>
+          </>
+        )}
       </Box>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
         Vote Breakdown

From e65a4c4eeb9384cd51c1260e4052c228e95f72f1 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 31 Aug 2022 16:18:24 -0500
Subject: [PATCH 075/113] parse user endorsements & user vote token value

---
 src/constants/addresses.ts                    |  5 ++
 src/hooks/useBalance.ts                       |  2 +
 src/hooks/useVoting.ts                        | 24 +++++++-
 .../ProposalPage/components/VotesTab.tsx      | 60 +++++++++++++------
 4 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index 8b7d2f2290..fee2f825c7 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -162,3 +162,8 @@ export const VOTE_ISSUER_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   [NetworkId.TESTNET_GOERLI]: "0x65e44BEaf20bc8BED9643Bf996A59d478db1090b",
 };
+
+export const VOTE_TOKEN_ADDRESSES = {
+  [NetworkId.MAINNET]: "",
+  [NetworkId.TESTNET_GOERLI]: "0xad50790dbaf78572019575bc5dce2abff1544fd0",
+};
diff --git a/src/hooks/useBalance.ts b/src/hooks/useBalance.ts
index 74f4439fed..d1f285377e 100644
--- a/src/hooks/useBalance.ts
+++ b/src/hooks/useBalance.ts
@@ -11,6 +11,7 @@ import {
   SOHM_ADDRESSES,
   V1_OHM_ADDRESSES,
   V1_SOHM_ADDRESSES,
+  VOTE_TOKEN_ADDRESSES,
   WSOHM_ADDRESSES,
 } from "src/constants/addresses";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
@@ -91,3 +92,4 @@ export const useWsohmBalance = () => useBalance(WSOHM_ADDRESSES);
 export const useV1OhmBalance = () => useBalance(V1_OHM_ADDRESSES);
 export const useV1SohmBalance = () => useBalance(V1_SOHM_ADDRESSES);
 export const useGohmTokemakBalance = () => useBalance(GOHM_TOKEMAK_ADDRESSES);
+export const useVoteBalance = () => useBalance(VOTE_TOKEN_ADDRESSES);
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 802fb17164..42dfb81fda 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -1,10 +1,11 @@
 import { t } from "@lingui/macro";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { BigNumber, ContractReceipt } from "ethers";
 import { useDispatch } from "react-redux";
 import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { error as createErrorToast, info as createInfoToast } from "src/slices/MessagesSlice";
-import { useNetwork, useSigner } from "wagmi";
+import { useAccount, useNetwork, useSigner } from "wagmi";
 
 interface Vote {
   proposalId: BigNumber;
@@ -16,6 +17,25 @@ interface ActivatedProposal {
   activationTimestamp: BigNumber;
 }
 
+/**
+ * returns the total endorsement value (# of tokens) for the connected wallet for the current proposal
+ */
+export const useUserEndorsement = (proposalId: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const { isConnected, address } = useAccount();
+
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+
+  return useQuery<DecimalBigNumber, Error>(
+    ["getUserEndorsement", proposalId, address],
+    async () => {
+      const endorsementValue = await contract.userEndorsementsForProposal(proposalId, address as string);
+      return new DecimalBigNumber(endorsementValue, 3);
+    },
+    { enabled: !!isConnected && !!address },
+  );
+};
+
 export const useEndorse = () => {
   const dispatch = useDispatch();
 
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 94e453dd6b..517cae7cf8 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Skeleton,
   styled,
   Table,
   TableBody,
@@ -22,9 +23,9 @@ import { BigNumber } from "ethers";
 import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
-import { useGohmBalance } from "src/hooks/useBalance";
+import { useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { useEndorse, useVote } from "src/hooks/useVoting";
+import { useEndorse, useUserEndorsement, useVote } from "src/hooks/useVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
@@ -36,10 +37,11 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
   const networks = useTestableNetworks();
   const { isConnected } = useAccount();
-  const gohmBalance = useGohmBalance()[networks.MAINNET].data;
+  const votesBalance = useVoteBalance()[networks.MAINNET].data;
   const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
   const submitEndorsement = useEndorse();
+  const { data: endorsementsValue, isLoading: isLoadingEndorsementsValue } = useUserEndorsement(proposal.id);
 
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
@@ -64,12 +66,11 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
             {proposal.isActive ? `Cast your vote` : `Endorsements`}
           </Typography>
         </Box>
-        {isConnected && proposal.isActive ? (
-          <Metric label="Your voting power" metric={`${formatBalance(2, gohmBalance)} gOHM`} />
-        ) : isConnected && !proposal.isActive ? (
-          <Metric label="Your voting power" metric={`1 Endorsement`} />
-        ) : (
-          <></>
+        {isConnected && (
+          <Metric
+            label={`Your ${proposal.isActive ? `voting` : `endorsements`} power`}
+            metric={`${formatBalance(2, votesBalance)} gOHM`}
+          />
         )}
         {proposal.isActive ? (
           <>
@@ -110,21 +111,42 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
                 </PrimaryButton>
               </Box>
             </WalletConnectedGuard>
+            {isLoadingEndorsementsValue && (
+              <Skeleton>
+                <Metric label={`Your have previously endorsed this proposal with `} metric={`1 gOHM`} />
+              </Skeleton>
+            )}
+            {endorsementsValue && (
+              <Metric
+                label={`You have previously endorsed this proposal with `}
+                metric={`${formatBalance(2, endorsementsValue)} gOHM`}
+              />
+            )}
           </>
         )}
       </Box>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
-        Vote Breakdown
+        {proposal.isActive ? `Vote Breakdown` : `Endorsements Breakdown`}
       </Typography>
-      <VoteBreakdown
-        voteForLabel="Yes"
-        voteAgainstLabel="No"
-        voteParticipationLabel="Total Participants"
-        voteForCount={proposal.yesVotes}
-        voteAgainstCount={proposal.noVotes}
-        totalHoldersCount={0}
-        quorum={0}
-      />
+      {proposal.isActive ? (
+        <VoteBreakdown
+          voteForLabel="Yes"
+          voteAgainstLabel="No"
+          voteParticipationLabel="Total Participants"
+          voteForCount={proposal.yesVotes}
+          voteAgainstCount={proposal.noVotes}
+          totalHoldersCount={0}
+          quorum={0}
+        />
+      ) : (
+        <VoteBreakdown
+          voteForLabel="Endorsed"
+          voteParticipationLabel="Total Participants"
+          voteForCount={proposal.yesVotes}
+          totalHoldersCount={0}
+          quorum={0}
+        />
+      )}
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
         Top Voters
       </Typography>

From 3998302dc2cdb0e45cde1f90df02cf9564032229 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Wed, 31 Aug 2022 16:41:01 -0500
Subject: [PATCH 076/113] add total voting supply

---
 src/constants/contracts.ts                    |  8 ++++++++
 src/hooks/useProposal.ts                      |  6 +++---
 src/hooks/useVoting.ts                        | 19 ++++++++++++++++++-
 .../ProposalPage/components/VotesTab.tsx      | 19 +++++++++++--------
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/constants/contracts.ts b/src/constants/contracts.ts
index 336d890426..fe025f0b71 100644
--- a/src/constants/contracts.ts
+++ b/src/constants/contracts.ts
@@ -15,6 +15,7 @@ import {
   PT_PRIZE_POOL_ADDRESSES,
   STAKING_ADDRESSES,
   VOTE_ISSUER_ADDRESSES,
+  VOTE_TOKEN_ADDRESSES,
   ZAP_ADDRESSES,
 } from "src/constants/addresses";
 import { Contract } from "src/helpers/contracts/Contract";
@@ -24,6 +25,7 @@ import {
   CrossChainMigrator__factory,
   FiatDAOContract__factory,
   FuseProxy__factory,
+  IERC20__factory,
   OlympusGiving__factory,
   OlympusGivingOld__factory,
   OlympusGovernance__factory,
@@ -137,3 +139,9 @@ export const VOTE_ISSUER_CONTRACT = new Contract({
   name: "Olympus Vote Issuer",
   addresses: VOTE_ISSUER_ADDRESSES,
 });
+
+export const VOTE_TOKEN_CONTRACT = new Contract({
+  factory: IERC20__factory,
+  name: "Olympus Vote Token",
+  addresses: VOTE_TOKEN_ADDRESSES,
+});
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index bf27d2e896..479506aa96 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -75,9 +75,9 @@ export const useProposal = (instructionsIndex: number) => {
         timeRemaining: jsTimeRemaining,
         isActive: isActive,
         state: proposalState,
-        endorsements: parseBigNumber(endorsements, 0),
-        yesVotes: parseBigNumber(yesVotes, 0),
-        noVotes: parseBigNumber(noVotes, 0),
+        endorsements: parseBigNumber(endorsements, 3),
+        yesVotes: parseBigNumber(yesVotes, 3),
+        noVotes: parseBigNumber(noVotes, 3),
         uri: discussionURL,
         content,
       };
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 42dfb81fda..554134feec 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { BigNumber, ContractReceipt } from "ethers";
 import { useDispatch } from "react-redux";
-import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { GOVERNANCE_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { error as createErrorToast, info as createInfoToast } from "src/slices/MessagesSlice";
 import { useAccount, useNetwork, useSigner } from "wagmi";
@@ -36,6 +36,23 @@ export const useUserEndorsement = (proposalId: number) => {
   );
 };
 
+/**
+ * returns the total supply of the Vote Token
+ */
+export const useVotingSupply = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = VOTE_TOKEN_CONTRACT.getEthersContract(chain.id);
+
+  return useQuery<DecimalBigNumber, Error>(
+    ["getVoteTokenTotalSupply", chain?.id],
+    async () => {
+      const votingSupply = await contract.totalSupply();
+      return new DecimalBigNumber(votingSupply, 3);
+    },
+    { enabled: !!chain?.id },
+  );
+};
+
 export const useEndorse = () => {
   const dispatch = useDispatch();
 
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 517cae7cf8..e154e1eba6 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -25,7 +25,7 @@ import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
 import { useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { useEndorse, useUserEndorsement, useVote } from "src/hooks/useVoting";
+import { useEndorse, useUserEndorsement, useVote, useVotingSupply } from "src/hooks/useVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
@@ -42,6 +42,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const submitVote = useVote();
   const submitEndorsement = useEndorse();
   const { data: endorsementsValue, isLoading: isLoadingEndorsementsValue } = useUserEndorsement(proposal.id);
+  const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
 
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
@@ -131,20 +132,22 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
       {proposal.isActive ? (
         <VoteBreakdown
           voteForLabel="Yes"
-          voteAgainstLabel="No"
-          voteParticipationLabel="Total Participants"
           voteForCount={proposal.yesVotes}
+          voteAgainstLabel="No"
           voteAgainstCount={proposal.noVotes}
-          totalHoldersCount={0}
-          quorum={0}
+          voteParticipationLabel="Total Participants"
+          totalHoldersCount={totalVoteSupply?.toApproxNumber() || 0}
+          // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
+          quorum={totalVoteSupply?.mul("0.33")?.toApproxNumber() || 0}
         />
       ) : (
         <VoteBreakdown
           voteForLabel="Endorsed"
+          voteForCount={proposal.endorsements}
           voteParticipationLabel="Total Participants"
-          voteForCount={proposal.yesVotes}
-          totalHoldersCount={0}
-          quorum={0}
+          totalHoldersCount={totalVoteSupply?.toApproxNumber() || 0}
+          // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
+          quorum={totalVoteSupply?.mul("0.25")?.toApproxNumber() || 0}
         />
       )}
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">

From 76d743ce2b02651cf279367d08e867fbc7ec58c8 Mon Sep 17 00:00:00 2001
From: 0xLienid <92545857+0xLienid@users.noreply.github.com>
Date: Sun, 11 Sep 2022 18:11:14 -0400
Subject: [PATCH 077/113] Add pending status to create proposal button (#2232)

---
 .../components/CreateProposal/CreateProposal.tsx         | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index f814d61500..c87a00b0be 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -51,6 +51,11 @@ export const CreateProposal = () => {
     );
   };
 
+  const canSubmit = () => {
+    if (submitProposal.isLoading) return false;
+    return true;
+  };
+
   const handleFormSubmission = async () => {
     const proposal = {
       name: proposalTitle,
@@ -104,7 +109,9 @@ export const CreateProposal = () => {
           </Grid>
         </Grid>
         <Box display="flex" justifyContent="flex-end">
-          <PrimaryButton onClick={handleFormSubmission}>Continue</PrimaryButton>
+          <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission}>
+            {submitProposal.isLoading ? "Submitting..." : "Continue"}
+          </PrimaryButton>
         </Box>
       </Paper>
     </Box>

From 26403a733fa84a82b53bf67b43201aacb996b667 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 22 Sep 2022 13:48:35 -0500
Subject: [PATCH 078/113] update cancelcallback refrence

---
 src/views/Governance/components/FilterModal/FilterModal.tsx | 2 +-
 src/views/Governance/interfaces.ts                          | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/Governance/components/FilterModal/FilterModal.tsx b/src/views/Governance/components/FilterModal/FilterModal.tsx
index 6e401f440d..b148ad1128 100644
--- a/src/views/Governance/components/FilterModal/FilterModal.tsx
+++ b/src/views/Governance/components/FilterModal/FilterModal.tsx
@@ -3,7 +3,7 @@ import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
 import { Box, Checkbox, FormControlLabel } from "@mui/material";
 import { Modal, PrimaryButton, SecondaryButton } from "@olympusdao/component-library";
 import { useState } from "react";
-import { CancelCallback } from "src/views/Give/Interfaces";
+import { CancelCallback } from "src/views/Governance/interfaces";
 
 type FilterModalProps = {
   isModalOpen: boolean;
diff --git a/src/views/Governance/interfaces.ts b/src/views/Governance/interfaces.ts
index 20d720af15..9ddc9a5947 100644
--- a/src/views/Governance/interfaces.ts
+++ b/src/views/Governance/interfaces.ts
@@ -3,3 +3,7 @@ import { IAnyProposal } from "src/hooks/useProposals";
 export type ProposalTabProps = {
   proposal: IAnyProposal;
 };
+
+export interface CancelCallback {
+  (): void;
+}

From 7b37b734b716b5a0e34cb4926624943d73a5927d Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 3 Nov 2022 13:54:21 -0500
Subject: [PATCH 079/113] fix tests

---
 .../__snapshots__/Sidebar.unit.test.tsx.snap  | 34 -------------------
 src/hooks/useVoting.ts                        |  7 ++--
 .../__snapshots__/Stake.unit.test.tsx.snap    |  8 ++---
 .../StakeMobile.unit.test.jsx.snap            |  4 +--
 .../__snapshots__/V1-Stake.unit.test.tsx.snap | 12 +++----
 5 files changed, 14 insertions(+), 51 deletions(-)

diff --git a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap
index 0413c91fc0..4c0a699d21 100644
--- a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap
+++ b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap
@@ -209,40 +209,6 @@ exports[`<Sidebar/> should render component 1`] = `
                         </div>
                       </a>
                     </div>
-                    <div
-                      class="NavItem-root nav-item-container css-20fmbk"
-                    >
-                      <a
-                        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover button-dapp-menu  css-1nffzm5-MuiTypography-root-MuiLink-root"
-                        href="#/governance"
-                      >
-                        <div
-                          class="link-container MuiBox-root css-b2udjo"
-                        >
-                          <div
-                            class="activePill MuiBox-root css-hfhjvs"
-                          />
-                          <div
-                            class="NavItem-title title MuiBox-root css-13buc9q"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1fx2bp7-MuiSvgIcon-root"
-                              focusable="false"
-                              style="font-size: 21px;"
-                              viewBox="0 0 20 20"
-                            >
-                              <path
-                                clip-rule="evenodd"
-                                d="M 7.5 3.334 C 6.119 3.334 5 4.453 5 5.834 C 5 7.214 6.119 8.334 7.5 8.334 C 8.881 8.334 10 7.214 10 5.834 C 10 4.453 8.881 3.334 7.5 3.334 Z M 3.333 5.834 C 3.333 3.532 5.199 1.667 7.5 1.667 C 9.801 1.667 11.667 3.532 11.667 5.834 C 11.667 8.135 9.801 10 7.5 10 C 5.199 10 3.333 8.135 3.333 5.834 Z M 12.526 2.402 C 12.64 1.956 13.093 1.687 13.54 1.801 C 14.436 2.031 15.231 2.552 15.798 3.283 C 16.365 4.014 16.673 4.913 16.673 5.838 C 16.673 6.763 16.365 7.662 15.798 8.393 C 15.231 9.124 14.436 9.645 13.54 9.874 C 13.093 9.988 12.64 9.72 12.526 9.274 C 12.412 8.828 12.681 8.374 13.127 8.26 C 13.663 8.122 14.141 7.809 14.481 7.371 C 14.822 6.932 15.007 6.393 15.007 5.838 C 15.007 5.283 14.822 4.743 14.481 4.305 C 14.141 3.866 13.663 3.554 13.127 3.416 C 12.681 3.302 12.412 2.848 12.526 2.402 Z M 1.22 12.887 C 2.002 12.106 3.062 11.667 4.167 11.667 L 10.833 11.667 C 11.938 11.667 12.998 12.106 13.78 12.887 C 14.561 13.669 15 14.729 15 15.834 L 15 17.5 C 15 17.96 14.627 18.334 14.167 18.334 C 13.706 18.334 13.333 17.96 13.333 17.5 L 13.333 15.834 C 13.333 15.17 13.07 14.535 12.601 14.066 C 12.132 13.597 11.496 13.334 10.833 13.334 L 4.167 13.334 C 3.504 13.334 2.868 13.597 2.399 14.066 C 1.93 14.535 1.667 15.17 1.667 15.834 L 1.667 17.5 C 1.667 17.96 1.294 18.334 0.833 18.334 C 0.373 18.334 0 17.96 0 17.5 L 0 15.834 C 0 14.729 0.439 13.669 1.22 12.887 Z M 15.86 12.4 C 15.975 11.955 16.428 11.687 16.875 11.802 C 17.768 12.033 18.561 12.554 19.126 13.283 C 19.692 14.013 19.998 14.91 20 15.833 L 20 17.5 C 20 17.96 19.627 18.334 19.167 18.334 C 18.706 18.334 18.333 17.96 18.333 17.5 L 18.333 15.834 C 18.333 15.28 18.148 14.742 17.808 14.305 C 17.47 13.867 16.995 13.554 16.458 13.416 C 16.013 13.301 15.745 12.846 15.86 12.4 Z"
-                                fill-rule="evenodd"
-                              />
-                            </svg>
-                            Governance
-                          </div>
-                        </div>
-                      </a>
-                    </div>
                     <div
                       class="menu-divider MuiBox-root css-0"
                     >
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 554134feec..37ce0e894c 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -4,7 +4,6 @@ import { BigNumber, ContractReceipt } from "ethers";
 import { useDispatch } from "react-redux";
 import { GOVERNANCE_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
-import { error as createErrorToast, info as createInfoToast } from "src/slices/MessagesSlice";
 import { useAccount, useNetwork, useSigner } from "wagmi";
 
 interface Vote {
@@ -77,10 +76,9 @@ export const useEndorse = () => {
     {
       onError: error => {
         console.error(error.message);
-        dispatch(createErrorToast(error.message));
       },
       onSuccess: () => {
-        dispatch(createInfoToast(t`Successfully endorsed proposal`));
+        console.log(`Successfully endorsed proposal`);
       },
     },
   );
@@ -109,10 +107,9 @@ export const useVote = () => {
     {
       onError: error => {
         console.error(error.message);
-        dispatch(createErrorToast(error.message));
       },
       onSuccess: () => {
-        dispatch(createInfoToast(t`Successfully voted for proposal`));
+        console.log(`Successfully voted for proposal`);
       },
     },
   );
diff --git a/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap b/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
index 81f05add57..f40b901d13 100644
--- a/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
+++ b/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
@@ -172,7 +172,7 @@ exports[`<Stake/> should render component 1`] = `
                 <button
                   aria-label="stake-button"
                   aria-selected="true"
-                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                   role="tab"
                   tabindex="0"
                   type="button"
@@ -182,7 +182,7 @@ exports[`<Stake/> should render component 1`] = `
                 <button
                   aria-label="unstake-button"
                   aria-selected="false"
-                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                   role="tab"
                   tabindex="-1"
                   type="button"
@@ -3116,7 +3116,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                 <button
                   aria-label="stake-button"
                   aria-selected="true"
-                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                   role="tab"
                   tabindex="0"
                   type="button"
@@ -3126,7 +3126,7 @@ exports[`<Stake/> should render correct staking headers 1`] = `
                 <button
                   aria-label="unstake-button"
                   aria-selected="false"
-                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                   role="tab"
                   tabindex="-1"
                   type="button"
diff --git a/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap b/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap
index f58dc27d9a..38a9e3c30d 100644
--- a/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap
+++ b/src/views/Stake/__tests__/__snapshots__/StakeMobile.unit.test.jsx.snap
@@ -172,7 +172,7 @@ exports[`Mobile Resolution should render all supported multi chain staking contr
                 <button
                   aria-label="stake-button"
                   aria-selected="true"
-                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                   role="tab"
                   tabindex="0"
                   type="button"
@@ -182,7 +182,7 @@ exports[`Mobile Resolution should render all supported multi chain staking contr
                 <button
                   aria-label="unstake-button"
                   aria-selected="false"
-                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                  class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                   role="tab"
                   tabindex="-1"
                   type="button"
diff --git a/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap b/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
index 36bc528618..1683a01b7e 100644
--- a/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
+++ b/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
@@ -2923,7 +2923,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                           aria-controls="simple-tabpanel-0"
                           aria-label="stake-button"
                           aria-selected="true"
-                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-co9dyu-MuiButtonBase-root-MuiTab-root"
+                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                           id="simple-tab-0"
                           role="tab"
                           tabindex="0"
@@ -2935,7 +2935,7 @@ exports[`<Stake/> should render the stake input Area when connected 1`] = `
                           aria-controls="simple-tabpanel-1"
                           aria-label="unstake-button"
                           aria-selected="false"
-                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-co9dyu-MuiButtonBase-root-MuiTab-root"
+                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                           id="simple-tab-1"
                           role="tab"
                           tabindex="-1"
@@ -6062,7 +6062,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                           aria-controls="simple-tabpanel-0"
                           aria-label="stake-button"
                           aria-selected="true"
-                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-co9dyu-MuiButtonBase-root-MuiTab-root"
+                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                           id="simple-tab-0"
                           role="tab"
                           tabindex="0"
@@ -6074,7 +6074,7 @@ exports[`<Stake/> should render the v1 migration modal 1`] = `
                           aria-controls="simple-tabpanel-1"
                           aria-label="unstake-button"
                           aria-selected="false"
-                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-co9dyu-MuiButtonBase-root-MuiTab-root"
+                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                           id="simple-tab-1"
                           role="tab"
                           tabindex="-1"
@@ -9201,7 +9201,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                           aria-controls="simple-tabpanel-0"
                           aria-label="stake-button"
                           aria-selected="true"
-                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-co9dyu-MuiButtonBase-root-MuiTab-root"
+                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                           id="simple-tab-0"
                           role="tab"
                           tabindex="0"
@@ -9213,7 +9213,7 @@ exports[`<Stake/> should render the v1 migration modal and banner 1`] = `
                           aria-controls="simple-tabpanel-1"
                           aria-label="unstake-button"
                           aria-selected="false"
-                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-co9dyu-MuiButtonBase-root-MuiTab-root"
+                          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                           id="simple-tab-1"
                           role="tab"
                           tabindex="-1"

From 1506db6b623be831916e3cc586237db00ce38018 Mon Sep 17 00:00:00 2001
From: appleseed-iii <80423742+appleseed-iii@users.noreply.github.com>
Date: Fri, 4 Nov 2022 08:42:18 -0500
Subject: [PATCH 080/113] ocg: added new addresses, need updated abis (#2304)

* added new addresses, need updated abis

* update governance & governance instructions abis

* prettify json

* revise parsing of useProposal for new contracts

* update contract logic as far as possible

* update addresses & abis, need to update useActiveProposal next

* remove endorsements process

* proposal creation & parsing fixed
---
 package.json                                  |   2 +-
 src/abi/OlympusGovInstructions.json           |  64 +-
 src/abi/OlympusGovMockGOhm.json               | 358 ++++++++
 src/abi/OlympusGovVotes.json                  | 857 ++++++++++++++++++
 src/abi/OlympusGovernance.json                | 463 ++++------
 .../TopBar/Wallet/WalletAddressEns.tsx        |   6 +-
 src/constants/addresses.ts                    |  38 +-
 src/constants/contracts.ts                    |   1 +
 src/helpers/contracts/Contract.ts             |   9 +-
 .../environment/Environment/Environment.ts    |  17 +-
 src/hooks/useArchiveNodeProvider.ts           |  18 +
 src/hooks/useProposal.ts                      | 102 ++-
 src/hooks/useProposals.ts                     | 325 ++-----
 src/hooks/useVoting.ts                        | 188 ++--
 src/views/Governance/ProposalsDashboard.tsx   |  16 +-
 .../ActionButtons/ActionButtons.tsx           |   7 +-
 .../CreateProposal/CreateProposal.tsx         |   1 +
 .../ProposalPage/components/VotesTab.tsx      | 178 ++--
 yarn.lock                                     | 432 ++++++---
 19 files changed, 2174 insertions(+), 908 deletions(-)
 create mode 100644 src/abi/OlympusGovMockGOhm.json
 create mode 100644 src/abi/OlympusGovVotes.json
 create mode 100644 src/hooks/useArchiveNodeProvider.ts

diff --git a/package.json b/package.json
index 5869a3aa32..20700021dc 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "rehype-sanitize": "^5.0.1",
     "tinycolor2": "^1.4.2",
     "typescript": "^4.8.4",
-    "wagmi": "^0.6.8",
+    "wagmi": "^0.7.10",
     "web3.storage": "^4.3.0"
   },
   "devDependencies": {
diff --git a/src/abi/OlympusGovInstructions.json b/src/abi/OlympusGovInstructions.json
index e4f3a3de3b..10c9cb1530 100644
--- a/src/abi/OlympusGovInstructions.json
+++ b/src/abi/OlympusGovInstructions.json
@@ -22,13 +22,25 @@
             "type": "error"
         },
         {
-            "inputs": [],
-            "name": "INSTR_InvalidModuleKeycode",
+            "inputs": [
+                {
+                    "internalType": "Keycode",
+                    "name": "keycode_",
+                    "type": "bytes5"
+                }
+            ],
+            "name": "InvalidKeycode",
             "type": "error"
         },
         {
-            "inputs": [],
-            "name": "INSTR_InvalidTargetNotAContract",
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "caller_",
+                    "type": "address"
+                }
+            ],
+            "name": "KernelAdapter_OnlyKernel",
             "type": "error"
         },
         {
@@ -39,18 +51,18 @@
                     "type": "address"
                 }
             ],
-            "name": "Module_PolicyNotAuthorized",
+            "name": "Module_PolicyNotPermitted",
             "type": "error"
         },
         {
             "inputs": [
                 {
                     "internalType": "address",
-                    "name": "caller_",
+                    "name": "target_",
                     "type": "address"
                 }
             ],
-            "name": "Policy_OnlyKernel",
+            "name": "TargetNotAContract",
             "type": "error"
         },
         {
@@ -66,31 +78,6 @@
             "name": "InstructionsStored",
             "type": "event"
         },
-        {
-            "anonymous": false,
-            "inputs": [
-                {
-                    "indexed": false,
-                    "internalType": "bytes4",
-                    "name": "funcSelector_",
-                    "type": "bytes4"
-                },
-                {
-                    "indexed": false,
-                    "internalType": "address",
-                    "name": "policy_",
-                    "type": "address"
-                },
-                {
-                    "indexed": false,
-                    "internalType": "bool",
-                    "name": "permission_",
-                    "type": "bool"
-                }
-            ],
-            "name": "PermissionSet",
-            "type": "event"
-        },
         {
             "inputs": [],
             "name": "INIT",
@@ -129,6 +116,19 @@
             "stateMutability": "pure",
             "type": "function"
         },
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "newKernel_",
+                    "type": "address"
+                }
+            ],
+            "name": "changeKernel",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
         {
             "inputs": [
                 {
diff --git a/src/abi/OlympusGovMockGOhm.json b/src/abi/OlympusGovMockGOhm.json
new file mode 100644
index 0000000000..7f07082503
--- /dev/null
+++ b/src/abi/OlympusGovMockGOhm.json
@@ -0,0 +1,358 @@
+{
+    "abi": [
+        {
+            "inputs": [
+                {
+                    "internalType": "string",
+                    "name": "_name",
+                    "type": "string"
+                },
+                {
+                    "internalType": "string",
+                    "name": "_symbol",
+                    "type": "string"
+                },
+                {
+                    "internalType": "uint8",
+                    "name": "_decimals",
+                    "type": "uint8"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "constructor"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "spender",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "Approval",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "from",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "to",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "Transfer",
+            "type": "event"
+        },
+        {
+            "inputs": [],
+            "name": "DOMAIN_SEPARATOR",
+            "outputs": [
+                {
+                    "internalType": "bytes32",
+                    "name": "",
+                    "type": "bytes32"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "allowance",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "spender",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "approve",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "balanceOf",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "from",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "value",
+                    "type": "uint256"
+                }
+            ],
+            "name": "burn",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "decimals",
+            "outputs": [
+                {
+                    "internalType": "uint8",
+                    "name": "",
+                    "type": "uint8"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "to",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "value",
+                    "type": "uint256"
+                }
+            ],
+            "name": "mint",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "name",
+            "outputs": [
+                {
+                    "internalType": "string",
+                    "name": "",
+                    "type": "string"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "nonces",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "spender",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "value",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "deadline",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint8",
+                    "name": "v",
+                    "type": "uint8"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "r",
+                    "type": "bytes32"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "s",
+                    "type": "bytes32"
+                }
+            ],
+            "name": "permit",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "symbol",
+            "outputs": [
+                {
+                    "internalType": "string",
+                    "name": "",
+                    "type": "string"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "totalSupply",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "to",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "transfer",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "from",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "to",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "transferFrom",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/abi/OlympusGovVotes.json b/src/abi/OlympusGovVotes.json
new file mode 100644
index 0000000000..92925313a6
--- /dev/null
+++ b/src/abi/OlympusGovVotes.json
@@ -0,0 +1,857 @@
+{
+    "abi": [
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "kernel_",
+                    "type": "address"
+                },
+                {
+                    "internalType": "contract ERC20",
+                    "name": "gOhm_",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "constructor"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "caller_",
+                    "type": "address"
+                }
+            ],
+            "name": "KernelAdapter_OnlyKernel",
+            "type": "error"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "policy_",
+                    "type": "address"
+                }
+            ],
+            "name": "Module_PolicyNotPermitted",
+            "type": "error"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "spender",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "Approval",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "caller",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "assets",
+                    "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "shares",
+                    "type": "uint256"
+                }
+            ],
+            "name": "Deposit",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "from",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "to",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "Transfer",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "caller",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "receiver",
+                    "type": "address"
+                },
+                {
+                    "indexed": true,
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "assets",
+                    "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "shares",
+                    "type": "uint256"
+                }
+            ],
+            "name": "Withdraw",
+            "type": "event"
+        },
+        {
+            "inputs": [],
+            "name": "DOMAIN_SEPARATOR",
+            "outputs": [
+                {
+                    "internalType": "bytes32",
+                    "name": "",
+                    "type": "bytes32"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "INIT",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "KEYCODE",
+            "outputs": [
+                {
+                    "internalType": "Keycode",
+                    "name": "",
+                    "type": "bytes5"
+                }
+            ],
+            "stateMutability": "pure",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VERSION",
+            "outputs": [
+                {
+                    "internalType": "uint8",
+                    "name": "major",
+                    "type": "uint8"
+                },
+                {
+                    "internalType": "uint8",
+                    "name": "minor",
+                    "type": "uint8"
+                }
+            ],
+            "stateMutability": "pure",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "allowance",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "spender",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
+                }
+            ],
+            "name": "approve",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "asset",
+            "outputs": [
+                {
+                    "internalType": "contract ERC20",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "balanceOf",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "newKernel_",
+                    "type": "address"
+                }
+            ],
+            "name": "changeKernel",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares",
+                    "type": "uint256"
+                }
+            ],
+            "name": "convertToAssets",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets",
+                    "type": "uint256"
+                }
+            ],
+            "name": "convertToShares",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "decimals",
+            "outputs": [
+                {
+                    "internalType": "uint8",
+                    "name": "",
+                    "type": "uint8"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets_",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "receiver_",
+                    "type": "address"
+                }
+            ],
+            "name": "deposit",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "gOHM",
+            "outputs": [
+                {
+                    "internalType": "contract ERC20",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "kernel",
+            "outputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "lastActionTimestamp",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "lastDepositTimestamp",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "maxDeposit",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "maxMint",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                }
+            ],
+            "name": "maxRedeem",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                }
+            ],
+            "name": "maxWithdraw",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares_",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "receiver_",
+                    "type": "address"
+                }
+            ],
+            "name": "mint",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "name",
+            "outputs": [
+                {
+                    "internalType": "string",
+                    "name": "",
+                    "type": "string"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "name": "nonces",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "owner",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "spender",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "value",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "deadline",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint8",
+                    "name": "v",
+                    "type": "uint8"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "r",
+                    "type": "bytes32"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "s",
+                    "type": "bytes32"
+                }
+            ],
+            "name": "permit",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets",
+                    "type": "uint256"
+                }
+            ],
+            "name": "previewDeposit",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares",
+                    "type": "uint256"
+                }
+            ],
+            "name": "previewMint",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares",
+                    "type": "uint256"
+                }
+            ],
+            "name": "previewRedeem",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets",
+                    "type": "uint256"
+                }
+            ],
+            "name": "previewWithdraw",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares_",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "receiver_",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "owner_",
+                    "type": "address"
+                }
+            ],
+            "name": "redeem",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "_wallet",
+                    "type": "address"
+                }
+            ],
+            "name": "resetActionTimestamp",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "symbol",
+            "outputs": [
+                {
+                    "internalType": "string",
+                    "name": "",
+                    "type": "string"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "totalAssets",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "totalSupply",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "to_",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "amt_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "transfer",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "from_",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "to_",
+                    "type": "address"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "amount_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "transferFrom",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets_",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "address",
+                    "name": "receiver_",
+                    "type": "address"
+                },
+                {
+                    "internalType": "address",
+                    "name": "owner_",
+                    "type": "address"
+                }
+            ],
+            "name": "withdraw",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/abi/OlympusGovernance.json b/src/abi/OlympusGovernance.json
index 9c1e6fc86c..2f145fb2f8 100644
--- a/src/abi/OlympusGovernance.json
+++ b/src/abi/OlympusGovernance.json
@@ -13,32 +13,27 @@
         },
         {
             "inputs": [],
-            "name": "ActiveProposalNotExpired",
+            "name": "CollateralAlreadyReturned",
             "type": "error"
         },
         {
             "inputs": [],
-            "name": "CannotEndorseInvalidProposal",
+            "name": "DepositedAfterActivation",
             "type": "error"
         },
         {
             "inputs": [],
-            "name": "CannotEndorseNullProposal",
-            "type": "error"
-        },
-        {
-            "inputs": [],
-            "name": "CannotReclaimTokensForActiveVote",
+            "name": "ExecutionTimelockStillActive",
             "type": "error"
         },
         {
             "inputs": [],
-            "name": "CannotReclaimZeroVotes",
+            "name": "ExecutionWindowExpired",
             "type": "error"
         },
         {
             "inputs": [],
-            "name": "ExecutionTimelockStillActive",
+            "name": "ExecutorNotSubmitter",
             "type": "error"
         },
         {
@@ -54,17 +49,7 @@
         },
         {
             "inputs": [],
-            "name": "NoActiveProposalDetected",
-            "type": "error"
-        },
-        {
-            "inputs": [],
-            "name": "NotAuthorizedToActivateProposal",
-            "type": "error"
-        },
-        {
-            "inputs": [],
-            "name": "NotEnoughEndorsementsToActivateProposal",
+            "name": "NotAuthorized",
             "type": "error"
         },
         {
@@ -74,7 +59,7 @@
         },
         {
             "inputs": [],
-            "name": "NotEnoughVotesToPropose",
+            "name": "PastVotingPeriod",
             "type": "error"
         },
         {
@@ -95,7 +80,22 @@
         },
         {
             "inputs": [],
-            "name": "SubmittedProposalHasExpired",
+            "name": "ProposalAlreadyExecuted",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "ProposalIsNotActive",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "UnableToActivate",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "UnmetCollateralDuration",
             "type": "error"
         },
         {
@@ -105,7 +105,7 @@
         },
         {
             "inputs": [],
-            "name": "VotingTokensAlreadyReclaimed",
+            "name": "WarmupNotCompleted",
             "type": "error"
         },
         {
@@ -120,11 +120,11 @@
                 {
                     "indexed": false,
                     "internalType": "uint256",
-                    "name": "timestamp",
+                    "name": "tokensReclaimed_",
                     "type": "uint256"
                 }
             ],
-            "name": "ProposalActivated",
+            "name": "CollateralReclaimed",
             "type": "event"
         },
         {
@@ -138,18 +138,25 @@
                 },
                 {
                     "indexed": false,
-                    "internalType": "address",
-                    "name": "voter",
-                    "type": "address"
-                },
+                    "internalType": "uint256",
+                    "name": "timestamp",
+                    "type": "uint256"
+                }
+            ],
+            "name": "ProposalActivated",
+            "type": "event"
+        },
+        {
+            "anonymous": false,
+            "inputs": [
                 {
                     "indexed": false,
                     "internalType": "uint256",
-                    "name": "amount",
+                    "name": "proposalId",
                     "type": "uint256"
                 }
             ],
-            "name": "ProposalEndorsed",
+            "name": "ProposalExecuted",
             "type": "event"
         },
         {
@@ -160,9 +167,21 @@
                     "internalType": "uint256",
                     "name": "proposalId",
                     "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "address",
+                    "name": "voter",
+                    "type": "address"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "uint256",
+                    "name": "amount",
+                    "type": "uint256"
                 }
             ],
-            "name": "ProposalExecuted",
+            "name": "ProposalRegistered",
             "type": "event"
         },
         {
@@ -173,6 +192,18 @@
                     "internalType": "uint256",
                     "name": "proposalId",
                     "type": "uint256"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "string",
+                    "name": "title",
+                    "type": "string"
+                },
+                {
+                    "indexed": false,
+                    "internalType": "string",
+                    "name": "proposalURI",
+                    "type": "string"
                 }
             ],
             "name": "ProposalSubmitted",
@@ -196,7 +227,7 @@
                 {
                     "indexed": false,
                     "internalType": "bool",
-                    "name": "for_",
+                    "name": "approve",
                     "type": "bool"
                 },
                 {
@@ -206,7 +237,7 @@
                     "type": "uint256"
                 }
             ],
-            "name": "WalletVoted",
+            "name": "VotesCast",
             "type": "event"
         },
         {
@@ -224,7 +255,7 @@
         },
         {
             "inputs": [],
-            "name": "ENDORSEMENT_THRESHOLD",
+            "name": "ACTIVATION_TIMELOCK",
             "outputs": [
                 {
                     "internalType": "uint256",
@@ -237,7 +268,7 @@
         },
         {
             "inputs": [],
-            "name": "EXECUTION_THRESHOLD",
+            "name": "COLLATERAL_DURATION",
             "outputs": [
                 {
                     "internalType": "uint256",
@@ -250,7 +281,7 @@
         },
         {
             "inputs": [],
-            "name": "GRACE_PERIOD",
+            "name": "COLLATERAL_MINIMUM",
             "outputs": [
                 {
                     "internalType": "uint256",
@@ -263,12 +294,12 @@
         },
         {
             "inputs": [],
-            "name": "INSTR",
+            "name": "COLLATERAL_REQUIREMENT",
             "outputs": [
                 {
-                    "internalType": "contract DefaultInstructions",
+                    "internalType": "uint256",
                     "name": "",
-                    "type": "address"
+                    "type": "uint256"
                 }
             ],
             "stateMutability": "view",
@@ -276,7 +307,7 @@
         },
         {
             "inputs": [],
-            "name": "VOTER_REWARD_RATE",
+            "name": "EXECUTION_DEADLINE",
             "outputs": [
                 {
                     "internalType": "uint256",
@@ -289,42 +320,63 @@
         },
         {
             "inputs": [],
-            "name": "VOTES",
+            "name": "EXECUTION_THRESHOLD",
             "outputs": [
                 {
-                    "internalType": "contract DefaultVotes",
+                    "internalType": "uint256",
                     "name": "",
-                    "type": "address"
+                    "type": "uint256"
                 }
             ],
             "stateMutability": "view",
             "type": "function"
         },
         {
-            "inputs": [
+            "inputs": [],
+            "name": "EXECUTION_TIMELOCK",
+            "outputs": [
                 {
                     "internalType": "uint256",
-                    "name": "proposalId_",
+                    "name": "",
                     "type": "uint256"
                 }
             ],
-            "name": "activateProposal",
-            "outputs": [],
-            "stateMutability": "nonpayable",
+            "stateMutability": "view",
             "type": "function"
         },
         {
             "inputs": [],
-            "name": "activeProposal",
+            "name": "INSTR",
             "outputs": [
                 {
-                    "internalType": "uint256",
-                    "name": "proposalId",
-                    "type": "uint256"
-                },
+                    "internalType": "contract INSTRv1",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VOTES",
+            "outputs": [
+                {
+                    "internalType": "contract VOTESv1",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VOTING_PERIOD",
+            "outputs": [
                 {
                     "internalType": "uint256",
-                    "name": "activationTimestamp",
+                    "name": "",
                     "type": "uint256"
                 }
             ],
@@ -332,29 +384,40 @@
             "type": "function"
         },
         {
-            "inputs": [
+            "inputs": [],
+            "name": "WARMUP_PERIOD",
+            "outputs": [
                 {
-                    "internalType": "contract Kernel",
-                    "name": "newKernel_",
-                    "type": "address"
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
                 }
             ],
-            "name": "changeKernel",
-            "outputs": [],
-            "stateMutability": "nonpayable",
+            "stateMutability": "view",
             "type": "function"
         },
         {
-            "inputs": [],
-            "name": "configureDependencies",
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "a",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "b",
+                    "type": "uint256"
+                }
+            ],
+            "name": "_max",
             "outputs": [
                 {
-                    "internalType": "Keycode[]",
-                    "name": "dependencies",
-                    "type": "bytes5[]"
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
                 }
             ],
-            "stateMutability": "nonpayable",
+            "stateMutability": "pure",
             "type": "function"
         },
         {
@@ -365,41 +428,35 @@
                     "type": "uint256"
                 }
             ],
-            "name": "endorseProposal",
+            "name": "activateProposal",
             "outputs": [],
             "stateMutability": "nonpayable",
             "type": "function"
         },
         {
-            "inputs": [],
-            "name": "executeProposal",
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "newKernel_",
+                    "type": "address"
+                }
+            ],
+            "name": "changeKernel",
             "outputs": [],
             "stateMutability": "nonpayable",
             "type": "function"
         },
         {
             "inputs": [],
-            "name": "getActiveProposal",
+            "name": "configureDependencies",
             "outputs": [
                 {
-                    "components": [
-                        {
-                            "internalType": "uint256",
-                            "name": "proposalId",
-                            "type": "uint256"
-                        },
-                        {
-                            "internalType": "uint256",
-                            "name": "activationTimestamp",
-                            "type": "uint256"
-                        }
-                    ],
-                    "internalType": "struct IGovernance.ActivatedProposal",
-                    "name": "",
-                    "type": "tuple"
+                    "internalType": "Keycode[]",
+                    "name": "dependencies",
+                    "type": "bytes5[]"
                 }
             ],
-            "stateMutability": "view",
+            "stateMutability": "nonpayable",
             "type": "function"
         },
         {
@@ -410,37 +467,9 @@
                     "type": "uint256"
                 }
             ],
-            "name": "getMetadata",
-            "outputs": [
-                {
-                    "components": [
-                        {
-                            "internalType": "bytes32",
-                            "name": "title",
-                            "type": "bytes32"
-                        },
-                        {
-                            "internalType": "address",
-                            "name": "submitter",
-                            "type": "address"
-                        },
-                        {
-                            "internalType": "uint256",
-                            "name": "submissionTimestamp",
-                            "type": "uint256"
-                        },
-                        {
-                            "internalType": "string",
-                            "name": "proposalURI",
-                            "type": "string"
-                        }
-                    ],
-                    "internalType": "struct IGovernance.ProposalMetadata",
-                    "name": "",
-                    "type": "tuple"
-                }
-            ],
-            "stateMutability": "view",
+            "name": "executeProposal",
+            "outputs": [],
+            "stateMutability": "nonpayable",
             "type": "function"
         },
         {
@@ -453,11 +482,6 @@
             ],
             "name": "getProposalMetadata",
             "outputs": [
-                {
-                    "internalType": "bytes32",
-                    "name": "title",
-                    "type": "bytes32"
-                },
                 {
                     "internalType": "address",
                     "name": "submitter",
@@ -469,9 +493,39 @@
                     "type": "uint256"
                 },
                 {
-                    "internalType": "string",
-                    "name": "proposalURI",
-                    "type": "string"
+                    "internalType": "uint256",
+                    "name": "collateralAmt",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "activationTimestamp",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "totalRegisteredVotes",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "yesVotes",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "uint256",
+                    "name": "noVotes",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "bool",
+                    "name": "isExecuted",
+                    "type": "bool"
+                },
+                {
+                    "internalType": "bool",
+                    "name": "isCollateralReturned",
+                    "type": "bool"
                 }
             ],
             "stateMutability": "view",
@@ -503,44 +557,6 @@
             "stateMutability": "view",
             "type": "function"
         },
-        {
-            "inputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "name": "noVotesForProposal",
-            "outputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
-        },
-        {
-            "inputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "name": "proposalHasBeenActivated",
-            "outputs": [
-                {
-                    "internalType": "bool",
-                    "name": "",
-                    "type": "bool"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
-        },
         {
             "inputs": [
                 {
@@ -549,7 +565,7 @@
                     "type": "uint256"
                 }
             ],
-            "name": "reclaimVotes",
+            "name": "reclaimCollateral",
             "outputs": [],
             "stateMutability": "nonpayable",
             "type": "function"
@@ -612,9 +628,9 @@
                     "type": "tuple[]"
                 },
                 {
-                    "internalType": "bytes32",
+                    "internalType": "string",
                     "name": "title_",
-                    "type": "bytes32"
+                    "type": "string"
                 },
                 {
                     "internalType": "string",
@@ -631,98 +647,12 @@
             "inputs": [
                 {
                     "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                },
-                {
-                    "internalType": "address",
-                    "name": "",
-                    "type": "address"
-                }
-            ],
-            "name": "tokenClaimsForProposal",
-            "outputs": [
-                {
-                    "internalType": "bool",
-                    "name": "",
-                    "type": "bool"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
-        },
-        {
-            "inputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "name": "totalEndorsementsForProposal",
-            "outputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
-        },
-        {
-            "inputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                },
-                {
-                    "internalType": "address",
-                    "name": "",
-                    "type": "address"
-                }
-            ],
-            "name": "userEndorsementsForProposal",
-            "outputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
-        },
-        {
-            "inputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
+                    "name": "proposalId_",
                     "type": "uint256"
                 },
-                {
-                    "internalType": "address",
-                    "name": "",
-                    "type": "address"
-                }
-            ],
-            "name": "userVotesForProposal",
-            "outputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
-        },
-        {
-            "inputs": [
                 {
                     "internalType": "bool",
-                    "name": "for_",
+                    "name": "approve_",
                     "type": "bool"
                 }
             ],
@@ -730,25 +660,6 @@
             "outputs": [],
             "stateMutability": "nonpayable",
             "type": "function"
-        },
-        {
-            "inputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "name": "yesVotesForProposal",
-            "outputs": [
-                {
-                    "internalType": "uint256",
-                    "name": "",
-                    "type": "uint256"
-                }
-            ],
-            "stateMutability": "view",
-            "type": "function"
         }
     ]
 }
\ No newline at end of file
diff --git a/src/components/TopBar/Wallet/WalletAddressEns.tsx b/src/components/TopBar/Wallet/WalletAddressEns.tsx
index e2243545a0..833a6bc6ca 100644
--- a/src/components/TopBar/Wallet/WalletAddressEns.tsx
+++ b/src/components/TopBar/Wallet/WalletAddressEns.tsx
@@ -4,9 +4,9 @@ import { shorten } from "src/helpers";
 import { useAccount, useEnsAvatar, useEnsName } from "wagmi";
 
 export default function WalletAddressEns() {
-  const { address = "" } = useAccount();
-  const { data: ensName } = useEnsName({ address });
-  const { data: ensAvatar } = useEnsAvatar({ addressOrName: address });
+  const { address } = useAccount();
+  const { data: ensName } = useEnsName({ address, enabled: !!address });
+  const { data: ensAvatar } = useEnsAvatar({ addressOrName: address, enabled: !!address });
 
   if (!address) return null;
 
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index c8b16ef6b8..f64431d994 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -159,16 +159,23 @@ export const DEV_FAUCET = {
   [NetworkId.TESTNET_GOERLI]: "0x405940141AeE885347ef4C47d933eF4cA6A674D8",
 };
 
+/**
+ * now called Parthenon
+ */
 export const GOVERNANCE_ADDRESSES = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xf1c6848e7b7bc93401262cdeab40dcbaf92e16ac",
+  // [NetworkId.TESTNET_GOERLI]: "0xf1c6848e7b7bc93401262cdeab40dcbaf92e16ac",
+  // [NetworkId.TESTNET_GOERLI]: "0x0fa391b3ae3a7fc5fa24a4bc7236db854390b7b4",
+  [NetworkId.TESTNET_GOERLI]: "0x904fe39c25f53a00A19Cf155B1B73b1CB67F23F8",
 };
 
 export const GOV_INSTRUCTIONS_ADDRESSES = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xa8810f94ABe49Ffe0AA49a1c30930a40C450f288",
+  // [NetworkId.TESTNET_GOERLI]: "0xa8810f94ABe49Ffe0AA49a1c30930a40C450f288",
+  [NetworkId.TESTNET_GOERLI]: "0x42bb80bad7e1e8bfd59417c5ae49f09e6988a795",
 };
 
+/** NOT USED */
 export const VOTE_ISSUER_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   [NetworkId.TESTNET_GOERLI]: "0x65e44BEaf20bc8BED9643Bf996A59d478db1090b",
@@ -176,7 +183,32 @@ export const VOTE_ISSUER_ADDRESSES = {
 
 export const VOTE_TOKEN_ADDRESSES = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xad50790dbaf78572019575bc5dce2abff1544fd0",
+  // [NetworkId.TESTNET_GOERLI]: "0xad50790dbaf78572019575bc5dce2abff1544fd0",
+  // [NetworkId.TESTNET_GOERLI]: "0x7Aef3bDa16bBD12033d93C05df877d0f165F2214",
+  [NetworkId.TESTNET_GOERLI]: "0x02741c86c45455c87baa381622f93ebb1141fa63",
+};
+
+/**
+ * GOVERNANCE -
+ * the testing flow should go as follows:
+ * 1) Mint OHM from the Mock OHM contract
+ * 2) Deposit OHM into the vOHM Vault contract to receive voting tokens ("vOHM")
+ * 3) Use vOHM to vote in Parthenon.sol
+ */
+
+// export const GOVERNANCE_MOCK_OHM = {
+//   [NetworkId.MAINNET]: "",
+//   [NetworkId.TESTNET_GOERLI]: "0xcd69d22753dafbf93843c600110e32df046dd165",
+// };
+export const GOVERNANCE_MOCK_GOHM = {
+  [NetworkId.MAINNET]: "",
+  [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
+};
+
+export const GOVERNANCE_VOHM_VAULT = {
+  [NetworkId.MAINNET]: "",
+  // [NetworkId.TESTNET_GOERLI]: "0x4fd8cc1a43377454ac50f9a312fd4fd7974811cb",
+  [NetworkId.TESTNET_GOERLI]: "0x0BF5064643998f3211b4555Ce6855D511D33191a",
 };
 
 export const BOND_AGGREGATOR_ADDRESSES = {
diff --git a/src/constants/contracts.ts b/src/constants/contracts.ts
index 93b0db728a..87b7977ce0 100644
--- a/src/constants/contracts.ts
+++ b/src/constants/contracts.ts
@@ -112,6 +112,7 @@ export const GOV_INSTRUCTIONS_CONTRACT = new Contract({
   addresses: GOV_INSTRUCTIONS_ADDRESSES,
 });
 
+/** NOT USED */
 export const VOTE_ISSUER_CONTRACT = new Contract({
   factory: OlympusVoteIssuer__factory,
   name: "Olympus Vote Issuer",
diff --git a/src/helpers/contracts/Contract.ts b/src/helpers/contracts/Contract.ts
index b22bb50f88..3d723805ee 100644
--- a/src/helpers/contracts/Contract.ts
+++ b/src/helpers/contracts/Contract.ts
@@ -1,6 +1,6 @@
 import { Contract as EthersContract } from "@ethersproject/contracts";
 import { Provider } from "@ethersproject/providers";
-import { Signer } from "ethers";
+import { ethers, Signer } from "ethers";
 import { AddressMap } from "src/constants/addresses";
 import { Providers } from "src/helpers/providers/Providers/Providers";
 import { NetworkId } from "src/networkDetails";
@@ -57,13 +57,14 @@ export class Contract<TFactory extends Factory = Factory, TAddressMap extends Ad
    * call the `connect()` method on the returned contract
    *
    * @param networkId The network you want the contract on
+   * @param provider optional custom provider, i.e. for governance where we need archive node
    */
-  getEthersContract = (networkId: keyof TAddressMap) => {
+  getEthersContract = (networkId: keyof TAddressMap, provider?: ethers.providers.Provider) => {
     if (!this._contractCache[networkId]) {
       const address = this.getAddress(networkId);
-      const provider = Providers.getStaticProvider(networkId as NetworkId);
+      const localProvider = provider || Providers.getStaticProvider(networkId as NetworkId);
 
-      this._contractCache[networkId] = this._factory.connect(address, provider) as ReturnType<TFactory["connect"]>;
+      this._contractCache[networkId] = this._factory.connect(address, localProvider) as ReturnType<TFactory["connect"]>;
     }
 
     return this._contractCache[networkId];
diff --git a/src/helpers/environment/Environment/Environment.ts b/src/helpers/environment/Environment/Environment.ts
index 9df255cf7b..82d1d961bf 100644
--- a/src/helpers/environment/Environment/Environment.ts
+++ b/src/helpers/environment/Environment/Environment.ts
@@ -1,4 +1,4 @@
-import { NetworkId } from "src/networkDetails";
+import { EthereumNetwork, NetworkId } from "src/networkDetails";
 
 export class Environment {
   public static env = process.env;
@@ -64,6 +64,21 @@ export class Environment {
       fallback: "false",
     });
 
+  public static getArchiveNodeUrl = (networkId: EthereumNetwork) => {
+    switch (networkId) {
+      case NetworkId.MAINNET:
+        return this._get({
+          key: `REACT_APP_ETHEREUM_ARCHIVE_NODE_URL`,
+          err: "Please provide a REACT_APP_ETHEREUM_ARCHIVE_NODE_URL for governance to function properly",
+        });
+      case NetworkId.TESTNET_GOERLI:
+        return this._get({
+          key: `REACT_APP_ETHEREUM_TESTNET_ARCHIVE_NODE_URL`,
+          err: "Please provide a REACT_APP_ETHEREUM_TESTNET_ARCHIVE_NODE_URL for governance to function properly",
+        });
+    }
+  };
+
   public static getNodeUrls = (networkId: NetworkId) => {
     switch (networkId) {
       case NetworkId.MAINNET:
diff --git a/src/hooks/useArchiveNodeProvider.ts b/src/hooks/useArchiveNodeProvider.ts
new file mode 100644
index 0000000000..4a677be089
--- /dev/null
+++ b/src/hooks/useArchiveNodeProvider.ts
@@ -0,0 +1,18 @@
+import { Provider } from "@ethersproject/providers";
+import { ethers } from "ethers";
+import { useMemo } from "react";
+import { Environment } from "src/helpers/environment/Environment/Environment";
+import { EthereumNetwork } from "src/networkDetails";
+
+export const useArchiveNodeProvider = (networkId: EthereumNetwork) => {
+  const provider: Provider | undefined = useMemo(() => {
+    if (networkId) {
+      const url = Environment.getArchiveNodeUrl(networkId);
+      if (url == undefined) throw new Error("You need an archive node for governance to function properly");
+      // NOTE(appleseed) we just choose the first archive node url if you provided multiple...
+      return new ethers.providers.StaticJsonRpcProvider(url[0]);
+    }
+  }, [networkId]);
+
+  return provider;
+};
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 479506aa96..9c692c00b4 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -3,10 +3,9 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { ethers } from "ethers";
 import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber, stringToBytes32String } from "src/helpers";
-import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
-import { queryAssertion } from "src/helpers/react-query/queryAssertion";
 import { nonNullable } from "src/helpers/types/nonNullable";
 import { IPFSFileData, IProposalJson, makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
+import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
 /// Import Proposal data type and mock data getters from useProposals
 import {
   IAnyProposal,
@@ -14,6 +13,7 @@ import {
   parseProposalState,
   ProposalAction,
   timeRemaining,
+  useGetProposalURIFromEvent,
 } from "src/hooks/useProposals";
 import { useNetwork, useSigner } from "wagmi";
 
@@ -36,56 +36,64 @@ export const useProposal = (instructionsIndex: number) => {
   /// const IPFSDContract = "";
   /// const governanceContract = "";
   const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const archiveProvider = useArchiveNodeProvider(chain?.id);
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id, archiveProvider);
   const queryKey = proposalQueryKey(instructionsIndex);
-  const useDependentQuery = createDependentQuery(queryKey);
-  // dependent queries, may be more clear as Promises
-  const metadata = useDependentQuery("GetProposalMetadata", () => contract.getProposalMetadata(instructionsIndex));
-  const isActive = useDependentQuery("ProposalHasBeenActivated", () =>
-    contract.proposalHasBeenActivated(instructionsIndex),
-  );
-  const endorsements = useDependentQuery("TotalEndorsementsForProposal", () =>
-    contract.totalEndorsementsForProposal(instructionsIndex),
+  const { data: proposalURI } = useGetProposalURIFromEvent({
+    proposalId: instructionsIndex,
+  });
+  const { data: metadata, isFetched: metadataIsFetched } = useQuery(
+    ["GetProposalMetadata", instructionsIndex],
+    async () => {
+      return await contract.getProposalMetadata(instructionsIndex);
+    },
   );
-  const yesVotes = useDependentQuery("YesVotesForProposal", () => contract.yesVotesForProposal(instructionsIndex));
-  const noVotes = useDependentQuery("NoVotesForProposal", () => contract.noVotesForProposal(instructionsIndex));
-
-  const proposalState = parseProposalState({ isActive });
 
   const query = useQuery<IAnyProposal, Error>(
     queryKey,
     async () => {
-      queryAssertion(metadata && proposalState && endorsements && yesVotes && noVotes, queryKey);
-      /// For the specified proposal index, fetch the relevant data points used in the frontend
-      const proposalContent = await parseProposalContent({ uri: metadata.proposalURI });
-      const content: string = proposalContent.description;
-      const discussionURL: string = proposalContent.external_url;
-      /**
-       * submissionTimestamp as a Unix Time from the contract
-       */
-      const submissionTimestamp = parseBigNumber(metadata.submissionTimestamp, 0);
-      const unixTimeRemaining = timeRemaining({ state: proposalState, submissionTimestamp });
-      const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : undefined;
-      const currentProposal = {
-        id: instructionsIndex,
-        title: proposalContent.name,
-        submitter: metadata.submitter,
-        // NOTE(appleseed): multiply submissionTimestamp by 1000 to convert to JS Time from Unix Time
-        submissionTimestamp: submissionTimestamp * 1000,
-        timeRemaining: jsTimeRemaining,
-        isActive: isActive,
-        state: proposalState,
-        endorsements: parseBigNumber(endorsements, 3),
-        yesVotes: parseBigNumber(yesVotes, 3),
-        noVotes: parseBigNumber(noVotes, 3),
-        uri: discussionURL,
-        content,
-      };
+      if (metadata === undefined) {
+        // this should be impossible if the enabled block checks !!metadata, too
+        // but it's necessary to fix the metadata | undefined typing in the rest of this query
+        throw new Error("something went wrong with proposalMetadata.");
+      } else {
+        /// For the specified proposal index, fetch the relevant data points used in the frontend
+        const proposalContent = await parseProposalContent({ uri: proposalURI });
+        const content: string = proposalContent.description;
+        const discussionURL: string = proposalContent.external_url;
+        /**
+         * submissionTimestamp as a Unix Time from the contract
+         */
+        const submissionTimestamp = parseBigNumber(metadata.submissionTimestamp, 0);
+        const activationTimestamp = parseBigNumber(metadata.activationTimestamp, 0);
+        const isActive = activationTimestamp !== 0;
+        const proposalState = parseProposalState({ isActive });
+        const endorsements = parseBigNumber(metadata.totalRegisteredVotes, 3);
+        const yesVotes = parseBigNumber(metadata.yesVotes, 3);
+        const noVotes = parseBigNumber(metadata.noVotes, 3);
+        const unixTimeRemaining = timeRemaining({ state: proposalState, submissionTimestamp });
+        const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : undefined;
+        const currentProposal = {
+          id: instructionsIndex,
+          title: proposalContent.name,
+          submitter: metadata.submitter,
+          // NOTE(appleseed): multiply submissionTimestamp by 1000 to convert to JS Time from Unix Time
+          submissionTimestamp: submissionTimestamp * 1000,
+          timeRemaining: jsTimeRemaining,
+          isActive: isActive,
+          state: proposalState,
+          endorsements,
+          yesVotes,
+          noVotes,
+          uri: discussionURL,
+          content,
+        };
 
-      return currentProposal;
+        return currentProposal;
+      }
     },
     {
-      enabled: !!metadata && !!proposalState && !!endorsements && !!yesVotes && !!noVotes,
+      enabled: !!chain && !!archiveProvider && !!contract && proposalURI.length > 0 && !!metadata && metadataIsFetched,
     },
   );
 
@@ -104,14 +112,18 @@ export interface ISubmitProposal {
 }
 /**
  * submit proposal at:
- * https://goerli.etherscan.io/address/0xaAd5e6e1362b458E38140B7E8c6d5D71b933a56f#writeContract
+ * https://goerli.etherscan.io/tx/0x7150ffcc290038deab9c89b1630df273273d2b428e6ee6fb6bec0ddeefe25b18
  *
  * params:
  * [[2,"0x5a46373152Fe723f052117fdc8E5282677808A70"]]
  * 0x6d792070726f706f73616c000000000000000000000000000000000000000000
+ * [{"action": "2", "target": "0x5a46373152Fe723f052117fdc8E5282677808A70"}]
  *
  * title (2nd param above):
  * ethers.utils.formatBytes32String("my proposal name")
+ * 0x6d792070726f706f73616c206e616d6500000000000000000000000000000000
+ *
+ * proposalURI: ipfs://bafybeicyta5tlfodbxkgofjoy46iexwhl2d773rjl4cryklqyx7dzikx2u/proposal.json
  *
  * gotcha:
  * there are rules in Instructions.store() around contract addresses & naming for modules, etc
@@ -119,6 +131,8 @@ export interface ISubmitProposal {
  * deploy a new proposal for the 2nd element of the 1st param:
  * # from bophades repo
  * forge create src/policies/Governance.sol:Governance --constructor-args 0x3B294580Fcf1F60B94eca4f4CE78A2f52D23cC83 --rpc-url https://eth-goerli.g.alchemy.com/v2/_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC --private-key yours
+ *
+ * TODO(appleseed) must APPROVE vOHM to be spent on Gov Contract: https://goerli.etherscan.io/tx/0x687575662aaf247992c47599dfef947bbe64f2022ee59df6e065e72e194b07cf
  */
 export const useSubmitProposal = () => {
   const { chain = { id: 1 } } = useNetwork();
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 6e41e8c52b..314dfd48fe 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -1,11 +1,10 @@
-import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { ethers } from "ethers";
-import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
-import { parseBigNumber } from "src/helpers";
-import { createDependentQuery } from "src/helpers/react-query/createDependentQuery";
-import { queryAssertion } from "src/helpers/react-query/queryAssertion";
+import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { nonNullable } from "src/helpers/types/nonNullable";
+import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
+import { ProposalSubmittedEvent } from "src/typechain/OlympusGovernance";
 import { useNetwork } from "wagmi";
 
 export enum ProposalAction {
@@ -65,91 +64,6 @@ export type PStatus = "active" | "endorsement" | "discussion" | "draft" | "close
 export interface IProposalState {
   state: PStatus;
 }
-/// Mock totalInstructions value from INSTR.sol
-export const mockTotalInstructions = 3;
-
-/// Mock instructions ID for current active proposal
-export const activeProposal = 0;
-
-/// Mock mapping data for proposalMetadata in Governance.sol
-export const mockProposalMetadata: { [key: number]: proposalMetadata } = {
-  0: {
-    title: "0x4f49502d31000000000000000000000000000000000000000000000000000000",
-    submitter: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
-    submissionTimestamp: 1653948322,
-  },
-  1: {
-    title: "0x4f49502d32000000000000000000000000000000000000000000000000000000",
-    submitter: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
-    submissionTimestamp: 1655157922,
-  },
-  2: {
-    title: "0x4f49502d33000000000000000000000000000000000000000000000000000000",
-    submitter: "0x6e36b2f9f2BcC273f090ff049952Fa4B5Cc67567",
-    submissionTimestamp: 1655503522,
-  },
-  3: {
-    title: "0x4f49502d34000000000000000000000000000000000000000000000000000000",
-    submitter: "0x0adfA199aB9485CE53859CD237836bFE6019F5Fa",
-    submissionTimestamp: 1656626722,
-  },
-};
-
-/// Mock mapping data on total endorsements in Governance.sol
-export const mockProposalTotalEndorsements: { [key: number]: number } = {
-  0: 1000,
-  1: 50,
-  2: 275,
-  3: 432,
-};
-
-/// Mock mapping data on proposal activation in Governance.sol
-export const mockProposalHasBeenActivated: { [key: number]: boolean } = {
-  0: true,
-  1: true,
-  2: false,
-  3: false,
-};
-
-/// Mock mapping data on proposal yes votes in Governance.sol
-export const mockYesVotesForProposal: { [key: number]: number } = {
-  0: 1234,
-  1: 0,
-  2: 1546,
-  3: 2583,
-};
-
-/// Mock mapping data on proposal no votes in Governance.sol
-export const mockNoVotesForProposal: { [key: number]: number } = {
-  0: 152,
-  1: 0,
-  2: 2436,
-  3: 1875,
-};
-
-/// Mock IPFS URI values by proposal bytes32 name
-export const mockProposalURIs: { [key: string]: string } = {
-  "0x4f49502d31000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberone",
-  "0x4f49502d32000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumbertwo",
-  "0x4f49502d33000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberthree",
-  "0x4f49502d34000000000000000000000000000000000000000000000000000000": "ipfs://proposalnumberfour",
-};
-
-/// Mock content stored at IPFS URI
-export const mockProposalContent: { [key: string]: string } = {
-  "ipfs://proposalnumberone": "This is OIP-1. The first mock proposal",
-  "ipfs://proposalnumbertwo": "This is OIP-2. The second mock proposal",
-  "ipfs://proposalnumberthree": "This is OIP-3. The third mock proposal",
-  "ipfs://proposalnumberfour": "This is OIP-4. The fourth mock proposal",
-};
-
-/// Mock proposal state (don't know if this will be stored at IPFS URI or in-contract)
-export const mockProposalState: { [key: string]: PStatus } = {
-  "0x4f49502d31000000000000000000000000000000000000000000000000000000": "active",
-  "0x4f49502d32000000000000000000000000000000000000000000000000000000": "discussion",
-  "0x4f49502d33000000000000000000000000000000000000000000000000000000": "closed",
-  "0x4f49502d34000000000000000000000000000000000000000000000000000000": "draft",
-};
 
 /**
  * returns a unix time differential (in seconds)
@@ -223,124 +137,59 @@ export const parseProposalContent = async ({ uri }: { uri: string | undefined })
   }
 };
 
-/**
- * @NOTE (appleseed) - this may be unnecessary (it might repeat the same proposal as `renderProposals` in `<ProposalsDashboard>`)
- * @returns the activeProposal (without metadata)
- */
-export const useActiveProposal = () => {
-  const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-  return useQuery<IActiveProposal, Error>(["getActiveProposal"], async () => {
-    /**
-     * @NOTE `getActiveProposal` returns [0, 0] when nothing is active
-     */
-    const activeProposal = await contract.getActiveProposal();
-    /**
-     * number of seconds remaining in proposal
-     */
-    const activationTimestamp = parseBigNumber(activeProposal.activationTimestamp, 0);
-    const unixTimeRemaining = timeRemaining({ state: "active", submissionTimestamp: activationTimestamp });
-    const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : 0;
-    return {
-      instructionsId: parseBigNumber(activeProposal.proposalId, 0),
-      activationTimestamp,
-      timeRemaining: jsTimeRemaining,
-    };
-  });
-};
-
-export const mockGetTotalInstructions = (): number => {
-  return mockTotalInstructions;
-};
-
-export const useGetTotalInstructions = (): UseQueryResult<number, Error> => {
-  const { chain = { id: 1 } } = useNetwork();
-  const contract = GOV_INSTRUCTIONS_CONTRACT.getEthersContract(chain.id);
-  return useQuery<number, Error>(["GetTotalInstructions"], async () => {
-    const total = await contract.totalInstructions();
-    // NOTE(appleseed): not using DecimalBigNumber.toAproxNumber() because this seems simplere
-    return parseBigNumber(total, 0);
-  });
-};
-
-/// Function to return mock proposal metadata in lieu of a contract
-export const MockGetProposalMetadata = (instructionsIndex: number) => {
-  const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-  const { data, isFetched, isLoading } = useQuery(["GetProposalMetadata", instructionsIndex], async () => {
-    return await contract.getProposalMetadata(instructionsIndex);
-  });
-  //TODO: Swap Return statement to return contract results
-  return mockProposalMetadata[instructionsIndex];
-  //return { data, isFetched, isLoading };
-};
-
-/// Function to return mock proposal endoresments in lieu of a contract
-export const MockGetProposalTotalEndorsements = (instructionsIndex: number) => {
-  const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-  const { data, isFetched, isLoading } = useQuery(["GetProposalTotalEndorsements", instructionsIndex], async () => {
-    return await contract.totalEndorsementsForProposal(instructionsIndex);
-  });
-
-  //TODO: Swap Return statement to return contract results
-  return mockProposalTotalEndorsements[instructionsIndex];
-  //return { data, isFetched, isLoading };
-};
-
-/// Function to return mock proposal activation data in lieu of a contract
-export const MockGetProposalHasBeenActivated = (instructionsIndex: number) => {
+export const useGetProposalSubmittedEvents = () => {
   const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-  const { data, isFetched, isLoading } = useQuery(["ProposalHasBeenActivated", instructionsIndex], async () => {
-    return await contract.proposalHasBeenActivated(instructionsIndex);
-  });
-
-  //TODO: Swap Return statement to return contract results
-  return mockProposalHasBeenActivated[instructionsIndex];
-  //return { data, isFetched, isLoading };
-};
-
-/// Function to return mock proposal yes votes in lieu of a contract
-export const MockGetYesVotesForProposal = (instructionsIndex: number) => {
-  const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-  const { data, isFetched, isLoading } = useQuery(["YesVotesForProposal", instructionsIndex], async () => {
-    return await contract.yesVotesForProposal(instructionsIndex);
-  });
-
-  //TODO: Swap Return statement to return contract results
-  return mockYesVotesForProposal[instructionsIndex];
-  //return { data, isFetched, isLoading };
-};
-
-/// Function to return mock proposal no votes in lieu of a contract
-export const MockGetNoVotesForProposal = (instructionsIndex: number) => {
-  const { chain = { id: 1 } } = useNetwork();
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-  const { data, isFetched, isLoading } = useQuery(["NoVotesForProposal", instructionsIndex], async () => {
-    return await contract.noVotesForProposal(instructionsIndex);
-  });
-  //TODO: Swap Return statement to return contract results
-  return mockNoVotesForProposal[instructionsIndex];
-  //return { data, isFetched, isLoading };
-};
-
-//TODO: Not implemented in Contract. Follow up with SC Team
-/// Function to return mock proposal URI in lieu of a contract
-export const mockGetProposalURI = (title: string): string => {
-  return mockProposalURIs[title];
+  const archiveProvider = useArchiveNodeProvider(chain?.id);
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id, archiveProvider);
+  return useQuery<ProposalSubmittedEvent[], Error>(
+    ["GetProposalSubmittedEvents", chain.id],
+    async () => {
+      // using EVENTS
+      return await contract.queryFilter(contract.filters.ProposalSubmitted());
+    },
+    { enabled: !!chain && !!chain.id && !!archiveProvider && !!contract },
+  );
 };
 
-//TODO: Not implemented in Contract. Follow up with SC Team
-/// Function to return mock proposal content in lieu of content deployed to IPFS
-export const mockGetProposalContent = (uri: string): string => {
-  return mockProposalContent[uri];
+/**
+ * @param proposalId
+ * @returns `{ data: proposalURI, isLoading, isFetched }`
+ */
+export const useGetProposalURIFromEvent = ({ proposalId }: { proposalId: number }) => {
+  const { data: events, isFetched, isLoading } = useGetProposalSubmittedEvents();
+  let proposalURI = "";
+  if (isFetched && !!events) {
+    const selectedProposalEvents = events.filter((event: ProposalSubmittedEvent) =>
+      event.args.proposalId.eq(ethers.utils.parseUnits(String(proposalId), 0)),
+    );
+    const selectedProposalArgs = selectedProposalEvents[0]?.args;
+    proposalURI = selectedProposalArgs.proposalURI;
+  }
+  return {
+    data: proposalURI,
+    isLoading,
+    isFetched,
+  };
 };
 
-/// Function to return mock proposal state in lieu of contract/content deployed to IPFS
-export const mockGetProposalState = (title: string): PStatus => {
-  return mockProposalState[title];
+/**
+ * Get the most recent Proposal Id
+ * - returns useQuery isLoading & isFetched results
+ */
+export const useGetLastProposalId = (): { data: number; isLoading: boolean; isFetched: boolean } => {
+  const { data: events, isFetched, isLoading } = useGetProposalSubmittedEvents();
+
+  let data = 0;
+  if (isFetched && !!events && events.length > 0) {
+    const mostRecentEventArgs = events[events.length - 1].args;
+    const proposalNumber = mostRecentEventArgs.proposalId;
+    data = Number(ethers.utils.formatUnits(proposalNumber, 0));
+  }
+  return {
+    data,
+    isLoading,
+    isFetched,
+  };
 };
 
 /**
@@ -375,73 +224,3 @@ export const filterStatement = ({ proposal, filters }: { proposal: Proposal; fil
   }
   return result;
 };
-
-/**
- * @notice  Fetches proposals from Governance policy, the related endorsements, yes votes,
- *          and no votes. Uses the proposal metadata to fetch the IPFS URIs containing the
- *          proposal content. Puts it into a big Proposal object.
- * @returns Query object in which the data attribute holds an array of Proposal objects for
- *          all proposals in the Governance policy contract
- */
-export const useProposals = (filters: IProposalState) => {
-  /// const INSTRContract = "";
-  /// const IPFSDContract = "";
-  /// const governanceContract = "";
-  // TODO(appleseed): this needs to be rewritten
-  const queryKey = proposalsQueryKey(filters);
-  const useDependentQuery = createDependentQuery(queryKey);
-  /// Get total number of proposal through INSTR module contract's totalInstructions variable
-  const { data: numberOfProposals } = useGetTotalInstructions();
-  const query = useQuery<Proposal[], Error>(
-    queryKey,
-    async () => {
-      queryAssertion(numberOfProposals, queryKey);
-      const allProposals: Proposal[] = [];
-
-      /// For each proposal, fetch the relevant data points used in the frontend
-      // NOTE(appleseed): 1. iterate in reverse order, 2. don't query any proposals that are older than 2 weeks
-      // NOTE(cont'd): otherwise we'll have too many api calls
-      // TODO(cont'd): 3. build separate functionality (via the graph) that queries for older proposals
-      for (let i = numberOfProposals; i > 0; i--) {
-        const proposal = MockGetProposalMetadata(i);
-        const isActive = MockGetProposalHasBeenActivated(i);
-        const endorsements = MockGetProposalTotalEndorsements(i);
-        const yesVotes = MockGetYesVotesForProposal(i);
-        const noVotes = MockGetNoVotesForProposal(i);
-        const proposalURI = mockGetProposalURI(proposal.title);
-        const proposalContent = mockGetProposalContent(proposalURI);
-        /**
-         * should become parsing logic to determine a proposal's state
-         * - TODO(appleseed): still need to determine methodolgy for "discussion", "draft" and "closed" states
-         * @returns {PStatus} IProposalState
-         */
-        const proposalState = mockGetProposalState(proposal.title);
-
-        const currentProposal: Proposal = {
-          id: i,
-          title: ethers.utils.parseBytes32String(proposal.title),
-          submitter: proposal.submitter,
-          submissionTimestamp: proposal.submissionTimestamp,
-          isActive: isActive,
-          state: proposalState,
-          endorsements: endorsements,
-          yesVotes: yesVotes,
-          noVotes: noVotes,
-          uri: proposalURI,
-          content: proposalContent,
-        };
-
-        allProposals.push(currentProposal);
-        console.log(allProposals);
-      }
-      if (filters) {
-        return allProposals.filter(proposal => filterStatement({ proposal, filters }));
-      } else {
-        return allProposals;
-      }
-    },
-    { enabled: true },
-  );
-
-  return query as typeof query;
-};
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 37ce0e894c..61ac937bf3 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -1,10 +1,10 @@
-import { t } from "@lingui/macro";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { BigNumber, ContractReceipt } from "ethers";
-import { useDispatch } from "react-redux";
+import { BigNumber, ContractReceipt, ethers } from "ethers";
 import { GOVERNANCE_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
-import { useAccount, useNetwork, useSigner } from "wagmi";
+import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
+import { VotesCastEvent } from "src/typechain/OlympusGovernance";
+import { useNetwork, useSigner } from "wagmi";
 
 interface Vote {
   proposalId: BigNumber;
@@ -17,24 +17,110 @@ interface ActivatedProposal {
 }
 
 /**
- * returns the total endorsement value (# of tokens) for the connected wallet for the current proposal
+ * event is not indexed so can't filter by proposalId in the `VotesCast()` event
+ * - as a result this returns ALL VOTES CAST EVENTS ON PARTHENON
  */
-export const useUserEndorsement = (proposalId: number) => {
+export const useGetVotesCastEvents = () => {
   const { chain = { id: 1 } } = useNetwork();
-  const { isConnected, address } = useAccount();
-
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-
-  return useQuery<DecimalBigNumber, Error>(
-    ["getUserEndorsement", proposalId, address],
+  const archiveProvider = useArchiveNodeProvider(chain?.id);
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id, archiveProvider);
+  return useQuery<VotesCastEvent[], Error>(
+    ["GetVotesCastEvents", chain.id],
     async () => {
-      const endorsementValue = await contract.userEndorsementsForProposal(proposalId, address as string);
-      return new DecimalBigNumber(endorsementValue, 3);
+      // using EVENTS
+      return await contract.queryFilter(contract.filters.VotesCast());
     },
-    { enabled: !!isConnected && !!address },
+    { enabled: !!chain && !!chain.id && !!archiveProvider && !!contract },
   );
 };
 
+const voteCastEventProposalIdComparison = (event: VotesCastEvent, proposalId: number) => {
+  return event.args?.proposalId.eq(ethers.utils.parseUnits(String(proposalId), 0));
+};
+
+const voteCastEventVoterAddressComparison = (event: VotesCastEvent, voterAddress: string) => {
+  return event.args?.voter === voterAddress;
+};
+
+/**
+ * returns all VotesCast events by ALL voters for THIS proposal
+ */
+export const useGetVotesCastForProposal = (
+  proposalId: number,
+): { data: VotesCastEvent[]; isFetched: boolean; isLoading: boolean } => {
+  const { data: votesCastEvents, isFetched, isLoading } = useGetVotesCastEvents();
+  let thisProposal: VotesCastEvent[] = [];
+  if (isFetched && !!votesCastEvents && votesCastEvents?.length > 0) {
+    thisProposal = votesCastEvents.filter((event: VotesCastEvent) =>
+      voteCastEventProposalIdComparison(event, proposalId),
+    );
+  }
+  return {
+    data: thisProposal,
+    isFetched,
+    isLoading,
+  };
+};
+
+/**
+ * returns all VotesCast events by THIS voter for THIS proposal
+ */
+export const useGetVotesCastForProposalAndVoter = (
+  proposalId: number,
+  voterAddress: string,
+): { data: VotesCastEvent[]; isFetched: boolean; isLoading: boolean } => {
+  const { data: votesCastEvents, isFetched, isLoading } = useGetVotesCastEvents();
+  let thisProposal: VotesCastEvent[] = [];
+  if (isFetched && !!votesCastEvents && votesCastEvents?.length > 0) {
+    thisProposal = votesCastEvents.filter(
+      (event: VotesCastEvent) =>
+        voteCastEventProposalIdComparison(event, proposalId) &&
+        voteCastEventVoterAddressComparison(event, voterAddress),
+    );
+  }
+  return {
+    data: thisProposal,
+    isFetched,
+    isLoading,
+  };
+};
+
+/**
+ * returns all VotesCast events by THIS voter for ALL PROPOSALS
+ */
+export const useGetVotesCastByVoter = (
+  voterAddress: string,
+): { data: VotesCastEvent[]; isFetched: boolean; isLoading: boolean } => {
+  const { data: votesCastEvents, isFetched, isLoading } = useGetVotesCastEvents();
+  let thisVoter: VotesCastEvent[] = [];
+  if (isFetched && !!votesCastEvents && votesCastEvents?.length > 0) {
+    thisVoter = votesCastEvents.filter((event: VotesCastEvent) =>
+      voteCastEventVoterAddressComparison(event, voterAddress),
+    );
+  }
+  return {
+    data: thisVoter,
+    isFetched,
+    isLoading,
+  };
+};
+
+/**
+ * returns the total vote value (# of tokens) for the connected wallet for the current proposal
+ */
+export const useUserVote = (proposalId: number, voterAddress: string) => {
+  const { data: votesCastEvents, isLoading, isFetched } = useGetVotesCastForProposalAndVoter(proposalId, voterAddress);
+  let thisVote: DecimalBigNumber = new DecimalBigNumber("0", 3);
+  if (isFetched && !!votesCastEvents && votesCastEvents?.length > 0) {
+    thisVote = new DecimalBigNumber(votesCastEvents[0].args.userVotes, 3);
+  }
+  return {
+    data: thisVote,
+    isFetched,
+    isLoading,
+  };
+};
+
 /**
  * returns the total supply of the Vote Token
  */
@@ -52,41 +138,39 @@ export const useVotingSupply = () => {
   );
 };
 
-export const useEndorse = () => {
-  const dispatch = useDispatch();
-
-  const { chain = { id: 1 } } = useNetwork();
-  const { data: signer } = useSigner();
-
-  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
-
-  return useMutation<ContractReceipt, Error, { proposalId: BigNumber }>(
-    async ({ proposalId }: { proposalId: BigNumber }) => {
-      if (!signer) throw new Error("No signer connected, cannot endorse");
-
-      // NOTE (lienid): can't decide if it is worth calling totalInstructions on the INSTR contract
-      //                to make sure that the passed ID is valid. If it is being fed through by the
-      //                site then there's no reason it should be invalid. Also don't know if -1 may
-      //                ever be passed as some sort of default value
-      if (proposalId.eq(-1)) throw new Error(t`Cannot endorse proposal with invalid ID`);
-
-      const transaction = await contract.connect(signer).endorseProposal(proposalId);
-      return transaction.wait();
-    },
-    {
-      onError: error => {
-        console.error(error.message);
-      },
-      onSuccess: () => {
-        console.log(`Successfully endorsed proposal`);
-      },
-    },
-  );
-};
+// export const useEndorse = () => {
+//   const dispatch = useDispatch();
+
+//   const { chain = { id: 1 } } = useNetwork();
+//   const { data: signer } = useSigner();
+
+//   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+
+//   return useMutation<ContractReceipt, Error, { proposalId: BigNumber }>(
+//     async ({ proposalId }: { proposalId: BigNumber }) => {
+//       if (!signer) throw new Error("No signer connected, cannot endorse");
+
+//       // NOTE (lienid): can't decide if it is worth calling totalInstructions on the INSTR contract
+//       //                to make sure that the passed ID is valid. If it is being fed through by the
+//       //                site then there's no reason it should be invalid. Also don't know if -1 may
+//       //                ever be passed as some sort of default value
+//       if (proposalId.eq(-1)) throw new Error(t`Cannot endorse proposal with invalid ID`);
+
+//       const transaction = await contract.connect(signer).registerForProposal(proposalId);
+//       return transaction.wait();
+//     },
+//     {
+//       onError: error => {
+//         console.error(error.message);
+//       },
+//       onSuccess: () => {
+//         console.log(`Successfully endorsed proposal`);
+//       },
+//     },
+//   );
+// };
 
 export const useVote = () => {
-  const dispatch = useDispatch();
-
   const { chain = { id: 1 } } = useNetwork();
   const { data: signer } = useSigner();
 
@@ -96,12 +180,12 @@ export const useVote = () => {
     async ({ voteData }: { voteData: Vote }) => {
       if (!signer) throw new Error("No signer connected, cannot endorse");
 
-      const activeProposal: ActivatedProposal = await contract.activeProposal();
-      const activeProposalId = activeProposal.proposalId;
+      // const activeProposal: ActivatedProposal = await contract.activeProposal();
+      // const activeProposalId = activeProposal.proposalId;
 
-      if (!voteData.proposalId.eq(activeProposalId)) throw new Error(t`You can only vote for the activated proposal`);
+      // if (!voteData.proposalId.eq(activeProposalId)) throw new Error(t`You can only vote for the activated proposal`);
 
-      const transaction = await contract.connect(signer).vote(voteData.vote);
+      const transaction = await contract.connect(signer).vote(voteData.proposalId, voteData.vote);
       return transaction.wait();
     },
     {
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 1b38229d44..38f24450d1 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -6,7 +6,7 @@ import { Paper, Proposal, Tab, Tabs } from "@olympusdao/component-library";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { useProposal } from "src/hooks/useProposal";
-import { useActiveProposal, useGetTotalInstructions } from "src/hooks/useProposals";
+import { useGetLastProposalId } from "src/hooks/useProposals";
 import ActionButtons from "src/views/Governance/components/ActionButtons";
 import { FilterModal } from "src/views/Governance/components/FilterModal";
 import { SearchBar } from "src/views/Governance/components/SearchBar/SearchBar";
@@ -14,8 +14,7 @@ import { toCapitalCase } from "src/views/Governance/helpers";
 
 export const ProposalsDashboard = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-  const { data: numberOfProposals, isLoading } = useGetTotalInstructions();
-  const { data: activeProposal } = useActiveProposal();
+  const { data: numberOfProposals, isLoading } = useGetLastProposalId();
 
   const handleFilterClick = () => {
     setIsFilterModalOpen(true);
@@ -67,12 +66,7 @@ export const ProposalsDashboard = () => {
           </SecondaryButton>
         </Grid> */}
         <Grid container direction="column" spacing={2} xs={12} ml={0}>
-          <>
-            {Number(activeProposal?.activationTimestamp) > 0 && (
-              <ProposalContainer instructionsId={Number(activeProposal?.instructionsId)} />
-            )}
-            {isLoading ? <ProposalSkeleton /> : renderProposals()}
-          </>
+          <>{isLoading ? <ProposalSkeleton /> : renderProposals()}</>
         </Grid>
       </Paper>
 
@@ -87,7 +81,7 @@ const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
   return (
     <>
       {isLoading || !proposal ? (
-        <ProposalSkeleton id={instructionsId} />
+        <ProposalSkeleton />
       ) : (
         <Grid key={instructionsId} item xs={12} style={{ paddingLeft: "0px" }}>
           <Link to={`/governance/proposals/${proposal?.id}`} component={RouterLink}>
@@ -108,7 +102,7 @@ const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
   );
 };
 
-export const ProposalSkeleton = ({ id = 0 }: { id?: number }) => {
+export const ProposalSkeleton = () => {
   return (
     <Skeleton width="100%">
       <Proposal
diff --git a/src/views/Governance/components/ActionButtons/ActionButtons.tsx b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
index 4762635965..d72c225b8e 100644
--- a/src/views/Governance/components/ActionButtons/ActionButtons.tsx
+++ b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
@@ -1,5 +1,5 @@
 import { Box, Link } from "@mui/material";
-import { PrimaryButton, SecondaryButton } from "@olympusdao/component-library";
+import { SecondaryButton } from "@olympusdao/component-library";
 import { FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import DelegateModal from "src/views/Governance/components/DelegateModal";
@@ -14,11 +14,12 @@ const ActionButtons: FC = () => {
   };
 
   return (
-    <Box display="flex" minWidth="310px">
+    // <Box display="flex" minWidth="310px">
+    <Box display="flex">
       <Link to="/governance/create-proposal" component={RouterLink}>
         <SecondaryButton>Create new Proposal</SecondaryButton>
       </Link>
-      <PrimaryButton onClick={() => setOpen(true)}>Delegate Vote</PrimaryButton>
+      {/* <PrimaryButton onClick={() => setOpen(true)}>Delegate Vote</PrimaryButton> */}
 
       <DelegateModal open={open} handleClose={handleClose} />
     </Box>
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index c87a00b0be..269fcf327b 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -56,6 +56,7 @@ export const CreateProposal = () => {
     return true;
   };
 
+  // https://goerli.etherscan.io/tx/0x7150ffcc290038deab9c89b1630df273273d2b428e6ee6fb6bec0ddeefe25b18
   const handleFormSubmission = async () => {
     const proposal = {
       name: proposalTitle,
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index e154e1eba6..0ca3a3867c 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -24,14 +24,14 @@ import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
 import { useVoteBalance } from "src/hooks/useBalance";
+import { IAnyProposal } from "src/hooks/useProposals";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { useEndorse, useUserEndorsement, useVote, useVotingSupply } from "src/hooks/useVoting";
+import { useUserVote, useVote, useVotingSupply } from "src/hooks/useVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
 /**
- * parses proposal status & displays endorsements or votes
- * @TODO may be better to refactor this into separate components
+ * parses proposal status & displays votes
  */
 export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
@@ -40,116 +40,100 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const votesBalance = useVoteBalance()[networks.MAINNET].data;
   const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
-  const submitEndorsement = useEndorse();
-  const { data: endorsementsValue, isLoading: isLoadingEndorsementsValue } = useUserEndorsement(proposal.id);
-  const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
-
-  const StyledTableCell = styled(TableCell)(() => ({
-    padding: "0px",
-    fontSize: "12px",
-    lineHeight: "18px",
-    fontWeight: "400",
-  }));
+  const { address: voterAddress } = useAccount();
 
   const handleVoteSubmission = () => {
     submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
   };
 
-  const handleEndorseSubmission = () => {
-    submitEndorsement.mutate({ proposalId: BigNumber.from(proposal.id) });
-  };
-
   return (
     <Paper fullWidth>
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
         <Box display="flex" flexDirection="column">
           <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
-            {proposal.isActive ? `Cast your vote` : `Endorsements`}
+            Cast Your Vote
           </Typography>
         </Box>
-        {isConnected && (
-          <Metric
-            label={`Your ${proposal.isActive ? `voting` : `endorsements`} power`}
-            metric={`${formatBalance(2, votesBalance)} gOHM`}
-          />
-        )}
-        {proposal.isActive ? (
-          <>
+        {isConnected && <Metric label={`Your voting power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
+        <>
+          <Box display="flex" flexDirection="row" justifyContent="center">
+            <SecondaryButton
+              sx={{ minWidth: "120px" }}
+              disabled={!isConnected || !proposal.isActive}
+              onClick={() => setVote("yes")}
+            >
+              Yes
+            </SecondaryButton>
+            <TertiaryButton
+              sx={{ minWidth: "120px" }}
+              disabled={!isConnected || !proposal.isActive}
+              onClick={() => setVote("no")}
+            >
+              No
+            </TertiaryButton>
+          </Box>
+          <WalletConnectedGuard>
             <Box display="flex" flexDirection="row" justifyContent="center">
-              <SecondaryButton
-                sx={{ minWidth: "120px" }}
-                disabled={!isConnected || !proposal.isActive}
-                onClick={() => setVote("yes")}
-              >
-                Yes
-              </SecondaryButton>
-              <TertiaryButton
-                sx={{ minWidth: "120px" }}
-                disabled={!isConnected || !proposal.isActive}
-                onClick={() => setVote("no")}
-              >
-                No
-              </TertiaryButton>
+              <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
+                Vote
+              </PrimaryButton>
             </Box>
-            <WalletConnectedGuard>
-              <Box display="flex" flexDirection="row" justifyContent="center">
-                <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
-                  Vote
-                </PrimaryButton>
-              </Box>
-            </WalletConnectedGuard>
-          </>
-        ) : (
-          <>
-            <WalletConnectedGuard>
-              <Box display="flex" flexDirection="row" justifyContent="center">
-                <PrimaryButton
-                  sx={{ minWidth: "120px" }}
-                  disabled={!!proposal.isActive}
-                  onClick={handleEndorseSubmission}
-                >
-                  Endorse
-                </PrimaryButton>
-              </Box>
-            </WalletConnectedGuard>
-            {isLoadingEndorsementsValue && (
-              <Skeleton>
-                <Metric label={`Your have previously endorsed this proposal with `} metric={`1 gOHM`} />
-              </Skeleton>
-            )}
-            {endorsementsValue && (
-              <Metric
-                label={`You have previously endorsed this proposal with `}
-                metric={`${formatBalance(2, endorsementsValue)} gOHM`}
-              />
-            )}
-          </>
-        )}
+          </WalletConnectedGuard>
+          {voterAddress && proposal.isActive && <UserVote proposalId={proposal.id} voterAddress={voterAddress} />}
+        </>
+        {!proposal.isActive && <p>This Proposal is not yet active for voting.</p>}
       </Box>
+      {proposal.isActive && <VoteBreakdownAndTable proposal={proposal} />}
+    </Paper>
+  );
+};
+
+const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddress: string }) => {
+  const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposalId, voterAddress);
+  return (
+    <>
+      {isLoadingVoteValue && (
+        <Skeleton>
+          <Metric label={`Your have previously voted on this proposal with `} metric={`1 vOHM`} />
+        </Skeleton>
+      )}
+      {voteValue && (
+        <>
+          <Metric
+            label={`You have previously voted on this proposal with `}
+            metric={`${formatBalance(2, voteValue)} vOHM`}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
+  const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
+
+  const StyledTableCell = styled(TableCell)(() => ({
+    padding: "0px",
+    fontSize: "12px",
+    lineHeight: "18px",
+    fontWeight: "400",
+  }));
+
+  return (
+    <>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
-        {proposal.isActive ? `Vote Breakdown` : `Endorsements Breakdown`}
+        Vote Breakdown
       </Typography>
-      {proposal.isActive ? (
-        <VoteBreakdown
-          voteForLabel="Yes"
-          voteForCount={proposal.yesVotes}
-          voteAgainstLabel="No"
-          voteAgainstCount={proposal.noVotes}
-          voteParticipationLabel="Total Participants"
-          totalHoldersCount={totalVoteSupply?.toApproxNumber() || 0}
-          // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
-          quorum={totalVoteSupply?.mul("0.33")?.toApproxNumber() || 0}
-        />
-      ) : (
-        <VoteBreakdown
-          voteForLabel="Endorsed"
-          voteForCount={proposal.endorsements}
-          voteParticipationLabel="Total Participants"
-          totalHoldersCount={totalVoteSupply?.toApproxNumber() || 0}
-          // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
-          quorum={totalVoteSupply?.mul("0.25")?.toApproxNumber() || 0}
-        />
-      )}
+      <VoteBreakdown
+        voteForLabel="Yes"
+        voteForCount={proposal.yesVotes}
+        voteAgainstLabel="No"
+        voteAgainstCount={proposal.noVotes}
+        voteParticipationLabel="Total Participants"
+        totalHoldersCount={totalVoteSupply?.toApproxNumber() || 0}
+        // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
+        quorum={totalVoteSupply?.mul("0.33")?.toApproxNumber() || 0}
+      />
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
         Top Voters
       </Typography>
@@ -175,6 +159,6 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
           </TableBody>
         </Table>
       </TableContainer>
-    </Paper>
+    </>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 0f0c50a8b7..a85aecc81c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1475,12 +1475,13 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@coinbase/wallet-sdk@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.3.0.tgz#e77383bce1388e5367dc35f8309702e73be47503"
-  integrity sha512-Prmxs5eYRxe5i+kDSsny97oPG4Pa5PhLmNDx8f7UQrvlPowGy5Tg0gHOqCie6ck2shVMdW8sKJ+RCLIRZ9kIjA==
+"@coinbase/wallet-sdk@^3.5.3":
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.5.4.tgz#957aa74521a4afa61ae99e1e2b948a6e017fcc87"
+  integrity sha512-+5s05dmB6YUPUnV5vThP96GVG1O4GgS3qYvjYJhe56ds8YFz+keU3/docFBLf8FQOCIO5j7IZtZmVGvz7G+kRw==
   dependencies:
     "@metamask/safe-event-emitter" "2.0.0"
+    "@solana/web3.js" "1.52.0"
     bind-decorator "^1.0.11"
     bn.js "^5.1.1"
     buffer "^6.0.3"
@@ -1488,12 +1489,12 @@
     eth-block-tracker "4.4.3"
     eth-json-rpc-filters "4.2.2"
     eth-rpc-errors "4.0.2"
-    js-sha256 "0.9.0"
     json-rpc-engine "6.1.0"
     keccak "^3.0.1"
     preact "^10.5.9"
     qs "^6.10.3"
     rxjs "^6.6.3"
+    sha.js "^2.4.11"
     stream-browserify "^3.0.0"
     util "^0.12.4"
 
@@ -1951,7 +1952,7 @@
     "@ethersproject/bytes" "^5.7.0"
     "@ethersproject/logger" "^5.7.0"
 
-"@ethersproject/sha2@5.7.0", "@ethersproject/sha2@^5.7.0":
+"@ethersproject/sha2@5.7.0", "@ethersproject/sha2@^5.5.0", "@ethersproject/sha2@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
   integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
@@ -3536,6 +3537,36 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@solana/buffer-layout@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@solana/buffer-layout/-/buffer-layout-4.0.0.tgz#75b1b11adc487234821c81dfae3119b73a5fd734"
+  integrity sha512-lR0EMP2HC3+Mxwd4YcnZb0smnaDw7Bl2IQWZiTevRH5ZZBZn6VRWn3/92E3qdU4SSImJkA6IDHawOHAnx/qUvQ==
+  dependencies:
+    buffer "~6.0.3"
+
+"@solana/web3.js@1.52.0":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.52.0.tgz#71bd5c322a31e3e2fa8cda2261c594846810b8ea"
+  integrity sha512-oG1+BX4nVYZ0OBzmk6DRrY8oBYMsbXVQEf9N9JOfKm+wXSmjxVEEo8v3IPV8mKwR0JvUWuE8lOn3IUDiMlRLgg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@ethersproject/sha2" "^5.5.0"
+    "@solana/buffer-layout" "^4.0.0"
+    bigint-buffer "^1.1.5"
+    bn.js "^5.0.0"
+    borsh "^0.7.0"
+    bs58 "^4.0.1"
+    buffer "6.0.1"
+    fast-stable-stringify "^1.0.0"
+    jayson "^3.4.4"
+    js-sha3 "^0.8.0"
+    node-fetch "2"
+    react-native-url-polyfill "^1.3.0"
+    rpc-websockets "^7.5.0"
+    secp256k1 "^4.0.2"
+    superstruct "^0.14.2"
+    tweetnacl "^1.0.3"
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -3656,20 +3687,27 @@
   dependencies:
     remove-accents "0.4.2"
 
-"@tanstack/query-core@4.2.3":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.2.3.tgz#52d75430c9662cc85c160761c1421de483c7791f"
-  integrity sha512-zdt5lYWs1dZaA3IxJbCgtAfHZJScRZONpiLL7YkeOkrme5MfjQqTpjq7LYbzpyuwPOh2Jx68le0PLl57JFv5hQ==
+"@tanstack/query-core@4.14.1":
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.14.1.tgz#a74c4da03e79a8be07fa5ab2ebc12865146915e2"
+  integrity sha512-mUejKoFDe4NZB8jQJR1uuAl6IwvkUpOD2m8NcuTVPOu0pcxeeFPdrnHaljwOEFPtlqXoiiIIQGYy6whjCMN+iQ==
 
 "@tanstack/query-core@4.3.4":
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.3.4.tgz#b93da17232fda91ec08ef14d2ca1d8326fc599f2"
   integrity sha512-NLAe3j5Vk1yYEtoPP5fPGPjRzkZPx67KUM3f14L3InziJZJ0wVecCh7uKfgYkbRKJSeq6PlbND7iuCGdTplN6Q==
 
-"@tanstack/query-sync-storage-persister@^4.0.10":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.2.3.tgz#603bfcb312c15469a3bd2471b7645f66d82f54a8"
-  integrity sha512-JPwMocA7Qt+86p6M31BMBc/xcmCATeJsvQw5UdghgWCn0ZQn2u4EzDJqEBPowSXFV4yfkVYKq9z5zSW4YHrUgA==
+"@tanstack/query-persist-client-core@4.14.1":
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-4.14.1.tgz#4f010d9ab401bcc1661ac93a127d59fae19947e3"
+  integrity sha512-zikaeGw8LBvJMeRrX1ssST2CQtacOIfcpcs/SvVOB2oEUe6X2amHX9wgQeGNqnXCTIAZ47ozrLUoNuQC0Q+6LA==
+
+"@tanstack/query-sync-storage-persister@^4.10.1":
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.14.1.tgz#00bbead0e02a359cff1ab3fb9f69951bfc496dc5"
+  integrity sha512-jfER4phfqplQQyTST3dX6n8BTuNnJFQfk+uxVf1QM/uZAHJ/J3Lx2AUgr+mlDsDRcjVJZNm+g9aKlMI1T2KlBQ==
+  dependencies:
+    "@tanstack/query-persist-client-core" "4.14.1"
 
 "@tanstack/react-query-devtools@^4.2.3":
   version "4.2.3"
@@ -3680,18 +3718,19 @@
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.2.0"
 
-"@tanstack/react-query-persist-client@^4.0.10":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-4.2.1.tgz#a4b054a1453c6cdc4a0491c917d1bf0a9bef27ad"
-  integrity sha512-5z3oo6S8stiPTFK7hmv4O04ZTMgdCrhgV+cq+z0t2NJwd5eeKPLrAUSBM+ah9eEhUlzs5ZEhaYeSwtPopOjYdg==
+"@tanstack/react-query-persist-client@^4.10.1":
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-4.14.1.tgz#11056e46927bd3daea147dba13cf1f8bee1d30d2"
+  integrity sha512-W4pJtz/f1+ol6jkJKBHLeh3gTaU90VRnCMvGim7mRrh4042YQQ2UOAW1Hkx/LaJUtzwoPV5MScs/ak9DNUNSPw==
+  dependencies:
+    "@tanstack/query-persist-client-core" "4.14.1"
 
-"@tanstack/react-query@^4.0.10":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.2.3.tgz#782fd0f84553ba6219f1137a12ea28ab8cd3a3f3"
-  integrity sha512-JLaMOxoJTkiAu7QpevRCt2uI/0vd3E8K/rSlCuRgWlcW5DeJDFpDS5kfzmLO5MOcD97fgsJRrDbxDORxR1FdJA==
+"@tanstack/react-query@^4.10.1":
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.14.1.tgz#336545119b191e2096c394a3f2df2744cdc5e041"
+  integrity sha512-cRgNzigw4GSPwGlTEkXi8hi/xgUnSEt9jCkiC8oAT3PEIdsQ50onZcpXd+JNJcZk2RTh8KM1fGyWz6xYLiY8bg==
   dependencies:
-    "@tanstack/query-core" "4.2.3"
-    "@types/use-sync-external-store" "^0.0.3"
+    "@tanstack/query-core" "4.14.1"
     use-sync-external-store "^1.2.0"
 
 "@tanstack/react-query@^4.2.3":
@@ -3862,7 +3901,7 @@
     "@types/express-serve-static-core" "*"
     "@types/node" "*"
 
-"@types/connect@*":
+"@types/connect@*", "@types/connect@^3.4.33":
   version "3.4.35"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
   integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==
@@ -4165,6 +4204,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.3.tgz#4e4a95b6fe44014563ceb514b2598b3e623d1c98"
   integrity sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==
 
+"@types/node@^12.12.54":
+  version "12.20.55"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
+  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
+
 "@types/node@^14.11.2":
   version "14.18.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.10.tgz#774f43868964f3cfe4ced1f5417fe15818a4eaea"
@@ -4400,6 +4444,13 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
+"@types/ws@^7.4.4":
+  version "7.4.7"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702"
+  integrity sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==
+  dependencies:
+    "@types/node" "*"
+
 "@types/ws@^8.0.0", "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -4668,13 +4719,14 @@
   resolved "https://registry.yarnpkg.com/@vanilla-extract/sprinkles/-/sprinkles-1.5.0.tgz#c921183ae518bb484299c2dc81f2acefd91c3dbe"
   integrity sha512-W58f2Rzz5lLmk0jbhgStVlZl5wEiPB1Ur3fRvUaBM+MrifZ3qskmFq/CiH//fEYeG5Dh9vF1qRviMMH46cX9Nw==
 
-"@wagmi/core@^0.5.8":
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-0.5.8.tgz#9e375c0dd31c3b22973d000694e1c2b06c05dbbc"
-  integrity sha512-1mABf1bXyn3AOHyQkios4FTGqoARa8y1tf7GMH6t1c7q0nAMSbpXoTDdjEidUHy8qhWoG0y3Ez4PjCi8WQnmMg==
+"@wagmi/core@^0.6.9":
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-0.6.9.tgz#fec3fa19802d0df477a9822c347bee1251a01c75"
+  integrity sha512-hlc64xJiDjY2w+JG6P7Ejby2bW5Jad73CB6wJuKejAQPAAKfb/dJaxFpaSxvdWrhn8O5aoBQcBvA7zt7G5/fHw==
   dependencies:
+    abitype "^0.1.7"
     eventemitter3 "^4.0.7"
-    zustand "^4.0.0"
+    zustand "^4.1.1"
 
 "@walletconnect/browser-utils@^1.8.0":
   version "1.8.0"
@@ -4687,7 +4739,7 @@
     "@walletconnect/window-metadata" "1.0.0"
     detect-browser "5.2.0"
 
-"@walletconnect/client@^1.7.8":
+"@walletconnect/client@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/client/-/client-1.8.0.tgz#6f46b5499c7c861c651ff1ebe5da5b66225ca696"
   integrity sha512-svyBQ14NHx6Cs2j4TpkQaBI/2AF4+LXz64FojTjMtV4VMMhl81jSO1vNeg+yYhQzvjcGH/GpSwixjyCW0xFBOQ==
@@ -4730,17 +4782,17 @@
   resolved "https://registry.yarnpkg.com/@walletconnect/environment/-/environment-1.0.0.tgz#c4545869fa9c389ec88c364e1a5f8178e8ab5034"
   integrity sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ==
 
-"@walletconnect/ethereum-provider@^1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-1.7.8.tgz#8b969b394e14c68855b6ae2660f2e39dec857f5f"
-  integrity sha512-dnl560zFMdK/LD4MD2XwHbWj7RXOaeXWPc9jzDaosLQLAXfA5mKe4XbCFFUPbVMYuyBdRI9NZv3Ci/qDb5wncQ==
-  dependencies:
-    "@walletconnect/client" "^1.7.8"
-    "@walletconnect/jsonrpc-http-connection" "^1.0.0"
-    "@walletconnect/jsonrpc-provider" "^1.0.3"
-    "@walletconnect/signer-connection" "^1.7.8"
-    "@walletconnect/types" "^1.7.8"
-    "@walletconnect/utils" "^1.7.8"
+"@walletconnect/ethereum-provider@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-1.8.0.tgz#ed1dbf9cecc3b818758a060d2f9017c50bde1d32"
+  integrity sha512-Nq9m+oo5P0F+njsROHw9KMWdoc/8iGHYzQdkjJN/1C7DtsqFRg5k5a3hd9rzCLpbPsOC1q8Z5lRs6JQgDvPm6Q==
+  dependencies:
+    "@walletconnect/client" "^1.8.0"
+    "@walletconnect/jsonrpc-http-connection" "^1.0.2"
+    "@walletconnect/jsonrpc-provider" "^1.0.5"
+    "@walletconnect/signer-connection" "^1.8.0"
+    "@walletconnect/types" "^1.8.0"
+    "@walletconnect/utils" "^1.8.0"
     eip1193-provider "1.0.1"
     eventemitter3 "4.0.7"
 
@@ -4753,30 +4805,23 @@
     "@walletconnect/types" "^1.8.0"
     "@walletconnect/utils" "^1.8.0"
 
-"@walletconnect/jsonrpc-http-connection@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.0.tgz#5bbdfbaf6d6519b3c08e492a6badb7460ab5ecd0"
-  integrity sha512-fmBTox7Zo9Tb8wzKpnOgYl5cYPu+2xXifNMDYMRGkWDAygXBzRzmfdhk7OowCkSXeh8aDhE5eFtMk+u8MOmntg==
+"@walletconnect/jsonrpc-http-connection@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.3.tgz#0343811bb33fb8a3823cb3306b306cf2ed61e99a"
+  integrity sha512-npPvDG2JxyxoqOphDiyjp5pPeASRBrlfQS39wHESPHlFIjBuvNt9lV9teh53MK9Ncbyxh4y2qEKMfPgcUulTRg==
   dependencies:
-    "@walletconnect/jsonrpc-utils" "^1.0.0"
+    "@walletconnect/jsonrpc-utils" "^1.0.3"
     "@walletconnect/safe-json" "^1.0.0"
     cross-fetch "^3.1.4"
 
-"@walletconnect/jsonrpc-provider@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.3.tgz#ddd8dca2e17df62f0dbe42764319f61487b5cbcb"
-  integrity sha512-DmSBKEB+RYngQgAbbDtJTUFdgyKvnWJD8bsM2QR1e2fyEUGUaq+z3QXixrMAsMW3tI8EuVlklEd7ayb6oyFpZw==
+"@walletconnect/jsonrpc-provider@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.5.tgz#1a66053b6f083a9885a32b7c2c8f6a376f1a4458"
+  integrity sha512-v61u4ZIV8+p9uIHS2Kl2YRj/2idrQiHcrbrJXw3McQkEJtj9mkCofr1Hu/n419wSRM5uiNK8Z4WRS9zGTTAhWQ==
   dependencies:
-    "@walletconnect/jsonrpc-utils" "^1.0.0"
+    "@walletconnect/jsonrpc-utils" "^1.0.3"
     "@walletconnect/safe-json" "^1.0.0"
 
-"@walletconnect/jsonrpc-types@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.0.tgz#fa75ad5e8f106a2e33287b1e6833e22ed0225055"
-  integrity sha512-11QXNq5H1PKZk7bP8SxgmCw3HRaDuPOVE+wObqEvmhc7OWYUZqfuaaMb+OXGRSOHL3sbC+XHfdeCxFTMXSFyng==
-  dependencies:
-    keyvaluestorage-interface "^1.0.0"
-
 "@walletconnect/jsonrpc-types@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.1.tgz#a96b4bb2bcc8838a70e06f15c1b5ab11c47d8e95"
@@ -4784,14 +4829,6 @@
   dependencies:
     keyvaluestorage-interface "^1.0.0"
 
-"@walletconnect/jsonrpc-utils@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.0.tgz#1a2f668d606e8f0b6e7d8fdebae86001bd037a3f"
-  integrity sha512-qUHbKUK6sHeHn67qtHZoLoYk5hS6x1arTPjKDRkY93/6Fx+ZmNIpdm1owX3l6aYueyegJ7mz43FpvYHUqJ8xcw==
-  dependencies:
-    "@walletconnect/environment" "^1.0.0"
-    "@walletconnect/jsonrpc-types" "^1.0.0"
-
 "@walletconnect/jsonrpc-utils@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.3.tgz#5bd49865eef0eae48e8b45a06731dc18691cf8c7"
@@ -4805,7 +4842,7 @@
   resolved "https://registry.yarnpkg.com/@walletconnect/mobile-registry/-/mobile-registry-1.4.0.tgz#502cf8ab87330841d794819081e748ebdef7aee5"
   integrity sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw==
 
-"@walletconnect/qrcode-modal@^1.7.8":
+"@walletconnect/qrcode-modal@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/qrcode-modal/-/qrcode-modal-1.8.0.tgz#ddd6f5c9b7ee52c16adf9aacec2a3eac4994caea"
   integrity sha512-BueaFefaAi8mawE45eUtztg3ZFbsAH4DDXh1UNwdUlsvFMjqcYzLUG0xZvDd6z2eOpbgDg2N3bl6gF0KONj1dg==
@@ -4831,16 +4868,16 @@
   resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.0.tgz#12eeb11d43795199c045fafde97e3c91646683b2"
   integrity sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg==
 
-"@walletconnect/signer-connection@^1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@walletconnect/signer-connection/-/signer-connection-1.7.8.tgz#07453ce25ef7c657c051b74fe1b48e72e2ebc459"
-  integrity sha512-H+kps4XqabiOQzG/FEgXSjEUlZLQ7Iz9pnNLtuC1Vr+9fvjq9sEkCPBH89N7QL+MDh6q8dU2sADEZzyqNEY6dg==
+"@walletconnect/signer-connection@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/signer-connection/-/signer-connection-1.8.0.tgz#6cdf490df770e504cc1a550bdb5bac7696b130bc"
+  integrity sha512-+YAaTAP52MWZJ2wWnqKClKCPlPHBo6reURFe0cWidLADh9mi/kPWGALZ5AENK22zpem1bbKV466rF5Rzvu0ehA==
   dependencies:
-    "@walletconnect/client" "^1.7.8"
-    "@walletconnect/jsonrpc-types" "^1.0.0"
-    "@walletconnect/jsonrpc-utils" "^1.0.0"
-    "@walletconnect/qrcode-modal" "^1.7.8"
-    "@walletconnect/types" "^1.7.8"
+    "@walletconnect/client" "^1.8.0"
+    "@walletconnect/jsonrpc-types" "^1.0.1"
+    "@walletconnect/jsonrpc-utils" "^1.0.3"
+    "@walletconnect/qrcode-modal" "^1.8.0"
+    "@walletconnect/types" "^1.8.0"
     eventemitter3 "4.0.7"
 
 "@walletconnect/socket-transport@^1.8.0":
@@ -4852,12 +4889,12 @@
     "@walletconnect/utils" "^1.8.0"
     ws "7.5.3"
 
-"@walletconnect/types@^1.7.8", "@walletconnect/types@^1.8.0":
+"@walletconnect/types@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.8.0.tgz#3f5e85b2d6b149337f727ab8a71b8471d8d9a195"
   integrity sha512-Cn+3I0V0vT9ghMuzh1KzZvCkiAxTq+1TR2eSqw5E5AVWfmCtECFkVZBP6uUJZ8YjwLqXheI+rnjqPy7sVM4Fyg==
 
-"@walletconnect/utils@^1.7.8", "@walletconnect/utils@^1.8.0":
+"@walletconnect/utils@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-1.8.0.tgz#2591a197c1fa7429941fe428876088fda6632060"
   integrity sha512-zExzp8Mj1YiAIBfKNm5u622oNw44WOESzo6hj+Q3apSMIb0Jph9X3GDIdbZmvVZsNPxWDL7uodKgZcCInZv2vA==
@@ -5082,11 +5119,24 @@
   resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
   integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
 
+JSONStream@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
   integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
+abitype@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.1.7.tgz#8a42b1845629abed715bd4975532aca43e291eda"
+  integrity sha512-mNBIrA8xbkR0PrxXSO/7p3irNhyLKO6S4VfU3YrR37cqpJIq1D63Yg8KlovOZkCVAaQ+lJkGDkOhSpv1QmMXIg==
+
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -5789,6 +5839,13 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bigint-buffer@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/bigint-buffer/-/bigint-buffer-1.1.5.tgz#d038f31c8e4534c1f8d0015209bf34b4fa6dd442"
+  integrity sha512-trfYco6AoZ+rKhKnxA0hgX0HAbVP/s808/EuDSe2JDzUnCp/xAsli35Orvk67UrTEcwuxZqYZDmfA2RXJgxVvA==
+  dependencies:
+    bindings "^1.3.0"
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -5799,6 +5856,13 @@ bind-decorator@^1.0.11:
   resolved "https://registry.yarnpkg.com/bind-decorator/-/bind-decorator-1.0.11.tgz#e41bc06a1f65dd9cec476c91c5daf3978488252f"
   integrity sha1-5BvAah9l3ZzsR2yRxdrzl4SIJS8=
 
+bindings@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
 bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -5858,7 +5922,7 @@ bn.js@^4.11.0, bn.js@^4.11.8, bn.js@^4.11.9:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
-bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1:
+bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
@@ -5896,6 +5960,15 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+borsh@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/borsh/-/borsh-0.7.0.tgz#6e9560d719d86d90dc589bca60ffc8a6c51fec2a"
+  integrity sha512-CLCsZGIBCFnPtkNnieW/a8wmreDmfUtjU2m9yHrzPXIlNbqVs0AQrSatSG6vdNYUqdc83tkQi2eHfF98ubzQLA==
+  dependencies:
+    bn.js "^5.2.0"
+    bs58 "^4.0.0"
+    text-encoding-utf-8 "^1.0.2"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -5948,7 +6021,7 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.9"
 
-bs58@^4.0.0:
+bs58@^4.0.0, bs58@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
   integrity sha1-vhYedsNU9veIrkBx9j806MTwpCo=
@@ -6009,6 +6082,14 @@ buffer-xor@^1.0.3:
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
   integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
 
+buffer@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.1.tgz#3cbea8c1463e5a0779e30b66d4c88c6ffa182ac2"
+  integrity sha512-rVAXBwEcEoYtxnHSO5iWyhzV/O1WMtkUYWlfdLS7FjU4PnSJJHEfHXi/uHPI5EwltmOA794gN3bm3/pzuctWjQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 buffer@^5.4.3, buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -6017,7 +6098,7 @@ buffer@^5.4.3, buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-buffer@^6.0.1, buffer@^6.0.3:
+buffer@^6.0.1, buffer@^6.0.3, buffer@~6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
@@ -6025,6 +6106,13 @@ buffer@^6.0.1, buffer@^6.0.3:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
+bufferutil@^4.0.1:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.7.tgz#60c0d19ba2c992dd8273d3f73772ffc894c153ad"
+  integrity sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==
+  dependencies:
+    node-gyp-build "^4.3.0"
+
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
@@ -6515,7 +6603,7 @@ commander@*, commander@^9.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.3.0.tgz#f619114a5a2d2054e0d9ff1b31d5ccf89255e26b"
   integrity sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==
 
-commander@^2.20.0:
+commander@^2.20.0, commander@^2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -7174,6 +7262,11 @@ defined@^1.0.0:
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
   integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
 
+delay@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/delay/-/delay-5.0.0.tgz#137045ef1b96e5071060dd5be60bf9334436bd1d"
+  integrity sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -7688,6 +7781,18 @@ es6-object-assign@^1.1.0:
   resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
   integrity sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=
 
+es6-promise@^4.0.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==
+  dependencies:
+    es6-promise "^4.0.3"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -8374,6 +8479,11 @@ extract-files@^9.0.0:
   resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
   integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
 
+eyes@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
+  integrity sha512-GipyPsXO1anza0AOZdy69Im7hGFCNB7Y/NGjDlZGJ3GJJLtwNSb2vrzYrTYJRrRloVx7pl+bhUaTB8yiccPvFQ==
+
 fast-check@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/fast-check/-/fast-check-3.3.0.tgz#002b7cc53166129545983ab4fe97a80fef6ac8b4"
@@ -8427,6 +8537,11 @@ fast-safe-stringify@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
 
+fast-stable-stringify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-stable-stringify/-/fast-stable-stringify-1.0.0.tgz#5c5543462b22aeeefd36d05b34e51c78cb86d313"
+  integrity sha512-wpYMUmFu5f00Sm0cj2pfivpmawLZ0NKdviQ4w9zJeR8JVtOpOxHmLaJuj0vxvGqMJQWyP/COUkF75/57OKyRag==
+
 fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
@@ -8488,6 +8603,11 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-uri-to-path@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+
 filelist@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.2.tgz#80202f21462d4d1c2e214119b1807c1bc0380e5b"
@@ -10247,6 +10367,11 @@ isomorphic-fetch@^3.0.0:
     node-fetch "^2.6.1"
     whatwg-fetch "^3.4.1"
 
+isomorphic-ws@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz#55fd4cd6c5e6491e76dc125938dd863f5cd4f2dc"
+  integrity sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==
+
 isomorphic-ws@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
@@ -10405,6 +10530,25 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+jayson@^3.4.4:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/jayson/-/jayson-3.7.0.tgz#b735b12d06d348639ae8230d7a1e2916cb078f25"
+  integrity sha512-tfy39KJMrrXJ+mFcMpxwBvFDetS8LAID93+rycFglIQM4kl3uNR3W4lBLE/FFhsoUCEox5Dt2adVpDm/XtebbQ==
+  dependencies:
+    "@types/connect" "^3.4.33"
+    "@types/node" "^12.12.54"
+    "@types/ws" "^7.4.4"
+    JSONStream "^1.3.5"
+    commander "^2.20.3"
+    delay "^5.0.0"
+    es6-promisify "^5.0.0"
+    eyes "^0.1.8"
+    isomorphic-ws "^4.0.1"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.17.20"
+    uuid "^8.3.2"
+    ws "^7.4.5"
+
 jest-changed-files@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
@@ -11286,11 +11430,6 @@ js-sdsl@^4.1.4:
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.4.tgz#78793c90f80e8430b7d8dc94515b6c77d98a26a6"
   integrity sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==
 
-js-sha256@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
-  integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==
-
 js-sha3@0.8.0, js-sha3@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
@@ -11417,6 +11556,11 @@ json-stable-stringify@^1.0.1:
   dependencies:
     jsonify "~0.0.0"
 
+json-stringify-safe@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
+
 json-to-pretty-yaml@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/json-to-pretty-yaml/-/json-to-pretty-yaml-1.2.2.tgz#f4cd0bd0a5e8fe1df25aaf5ba118b099fd992d5b"
@@ -11458,6 +11602,11 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
   integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
+
 jsonpointer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
@@ -12619,7 +12768,7 @@ node-domexception@1.0.0:
   resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
   integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
 
-node-fetch@2.6.7, node-fetch@^2.6.1, node-fetch@^2.6.7:
+node-fetch@2, node-fetch@2.6.7, node-fetch@^2.6.1, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
@@ -12647,6 +12796,11 @@ node-gyp-build@^4.2.0:
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
   integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
 
+node-gyp-build@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.5.0.tgz#7a64eefa0b21112f89f58379da128ac177f20e40"
+  integrity sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -14269,6 +14423,13 @@ react-native-fetch-api@^2.0.0:
   dependencies:
     p-defer "^3.0.0"
 
+react-native-url-polyfill@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-1.3.0.tgz#c1763de0f2a8c22cc3e959b654c8790622b6ef6a"
+  integrity sha512-w9JfSkvpqqlix9UjDvJjm1EjSt652zVQ6iwCIj1cVVkwXf4jQhQgTNXY6EVTwuAmUjg6BC6k9RHCBynoLFo3IQ==
+  dependencies:
+    whatwg-url-without-unicode "8.0.0-3"
+
 react-redux@^8.0.4:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.4.tgz#80c31dffa8af9526967c4267022ae1525ff0e36a"
@@ -15002,6 +15163,19 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rpc-websockets@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/rpc-websockets/-/rpc-websockets-7.5.0.tgz#bbeb87572e66703ff151e50af1658f98098e2748"
+  integrity sha512-9tIRi1uZGy7YmDjErf1Ax3wtqdSSLIlnmL5OtOzgd5eqPKbsPpwDP5whUDO2LQay3Xp0CcHlcNSGzacNRluBaQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    eventemitter3 "^4.0.7"
+    uuid "^8.3.2"
+    ws "^8.5.0"
+  optionalDependencies:
+    bufferutil "^4.0.1"
+    utf-8-validate "^5.0.2"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -15156,7 +15330,7 @@ scuid@^1.1.0:
   resolved "https://registry.yarnpkg.com/scuid/-/scuid-1.1.0.tgz#d3f9f920956e737a60f72d0e4ad280bf324d5dab"
   integrity sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg==
 
-secp256k1@^4.0.1:
+secp256k1@^4.0.1, secp256k1@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.3.tgz#c4559ecd1b8d3c1827ed2d1b94190d69ce267303"
   integrity sha512-NLZVf+ROMxwtEj3Xa562qgv2BK5e2WNmXPiOdVIPLgs6lyTzMvBq0aWTYMI5XCP9jZMVKOcqZLw/Wc4vDkuxhA==
@@ -15284,7 +15458,7 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-sha.js@^2.4.0, sha.js@^2.4.8:
+sha.js@^2.4.0, sha.js@^2.4.11, sha.js@^2.4.8:
   version "2.4.11"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
   integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
@@ -15837,6 +16011,11 @@ stylis@4.1.3:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
+superstruct@^0.14.2:
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b"
+  integrity sha512-nPewA6m9mR3d6k7WkZ8N8zpTWfenFH3q9pA2PkuiZxINr9DKB2+40wEQf0ixn8VaGuJ78AB6iWOtStI+/4FKZQ==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -16020,6 +16199,11 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+text-encoding-utf-8@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz#585b62197b0ae437e3c7b5d0af27ac1021e10d13"
+  integrity sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -16035,10 +16219,10 @@ throttled-queue@^2.1.2:
   resolved "https://registry.yarnpkg.com/throttled-queue/-/throttled-queue-2.1.4.tgz#4e2008c73ab3f72ba1bb09496c3cc9c5b745dbee"
   integrity sha512-YGdk8sdmr4ge3g+doFj/7RLF5kLM+Mi7DEciu9PHxnMJZMeVuZeTj31g4VE7ekUffx/IdbvrtOCiz62afg0mkg==
 
-through@^2.3.6, through@^2.3.8:
+"through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
 thunky@^1.0.2:
   version "1.1.0"
@@ -16230,6 +16414,11 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+tweetnacl@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596"
+  integrity sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -16578,6 +16767,13 @@ use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0, use-sync-external
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+utf-8-validate@^5.0.2:
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
+  integrity sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==
+  dependencies:
+    node-gyp-build "^4.3.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -16721,17 +16917,18 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-wagmi@^0.6.8:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-0.6.8.tgz#bfc65686ec08cf1c508b1dbf5fbefbbe828653cd"
-  integrity sha512-pIOn7I56KPfdPQ1WRIWzWnpC8eJZm1V25Rcn5fbgOJ2eV3kjGNchnIub/ERY1VMKywxkCAfgXfn2D/tqwCJsWw==
-  dependencies:
-    "@coinbase/wallet-sdk" "^3.3.0"
-    "@tanstack/query-sync-storage-persister" "^4.0.10"
-    "@tanstack/react-query" "^4.0.10"
-    "@tanstack/react-query-persist-client" "^4.0.10"
-    "@wagmi/core" "^0.5.8"
-    "@walletconnect/ethereum-provider" "^1.7.8"
+wagmi@^0.7.10:
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-0.7.10.tgz#289114d895088dca63b99aa1a2802523c1c69117"
+  integrity sha512-/of5PUwKWbQV6jQEHyBhBkdVR9V3A1GSffHuaeiKGeENipBnRNK5T7EBjEcYmyz771SiVru/awcUts8tIiiJaA==
+  dependencies:
+    "@coinbase/wallet-sdk" "^3.5.3"
+    "@tanstack/query-sync-storage-persister" "^4.10.1"
+    "@tanstack/react-query" "^4.10.1"
+    "@tanstack/react-query-persist-client" "^4.10.1"
+    "@wagmi/core" "^0.6.9"
+    "@walletconnect/ethereum-provider" "^1.8.0"
+    abitype "^0.1.7"
     use-sync-external-store "^1.2.0"
 
 walker@^1.0.7, walker@^1.0.8:
@@ -16976,6 +17173,15 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-url-without-unicode@8.0.0-3:
+  version "8.0.0-3"
+  resolved "https://registry.yarnpkg.com/whatwg-url-without-unicode/-/whatwg-url-without-unicode-8.0.0-3.tgz#ab6df4bf6caaa6c85a59f6e82c026151d4bb376b"
+  integrity sha512-HoKuzZrUlgpz35YO27XgD28uh/WJH4B0+3ttFqRo//lmq+9T/mIOJ6kqmINI9HpUpz1imRC/nR/lxKpJiv0uig==
+  dependencies:
+    buffer "^5.4.3"
+    punycode "^2.1.1"
+    webidl-conversions "^5.0.0"
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
@@ -17291,11 +17497,21 @@ ws@^7.4.0, ws@^7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.8.tgz#ac2729881ab9e7cbaf8787fe3469a48c5c7f636a"
   integrity sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==
 
+ws@^7.4.5:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+
 ws@^8.3.0, ws@^8.4.2:
   version "8.8.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
   integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
 
+ws@^8.5.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.10.0.tgz#00a28c09dfb76eae4eb45c3b565f771d6951aa51"
+  integrity sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -17436,10 +17652,10 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zustand@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.1.tgz#5a61cc755a002df5f041840a414ae6e9a99ee22b"
-  integrity sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==
+zustand@^4.1.1:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.4.tgz#b0286da4cc9edd35e91c96414fa54bfa4652a54d"
+  integrity sha512-k2jVOlWo8p4R83mQ+/uyB8ILPO2PCJOf+QVjcL+1PbMCk1w5OoPYpAIxy9zd93FSfmJqoH6lGdwzzjwqJIRU5A==
   dependencies:
     use-sync-external-store "1.2.0"
 

From 635c0bd72840478fcda769a698d1e582139650a1 Mon Sep 17 00:00:00 2001
From: appleseed-iii <80423742+appleseed-iii@users.noreply.github.com>
Date: Mon, 7 Nov 2022 08:26:39 -0600
Subject: [PATCH 081/113] Setup Governance Faucet (#2412)

* setup goernance faucet

* simple validations that proposal form is filled properly & you have enough vOHM

* wip for wrap to vOHM

* faucet, wrapping to/from vohm

* require approval on creation, add dethcode & etherscan

* show preview of instruction details

* fix up get voting power
---
 src/abi/OlympusGovVohmVault.json              | 223 ++++++++++++++++++
 src/components/TopBar/Wallet/Assets/index.tsx |  16 +-
 .../TopBar/Wallet/hooks/useFaucet.ts          |  32 +++
 src/constants/addresses.ts                    |  16 +-
 src/constants/contracts.ts                    |  25 +-
 src/helpers/index.tsx                         |  18 ++
 src/hooks/useBalance.ts                       |   3 +
 src/hooks/useProposal.ts                      |  55 ++++-
 src/hooks/useProposals.ts                     |  14 ++
 src/hooks/useVoting.ts                        | 124 +++++++++-
 src/views/Governance/Governance.tsx           |   9 +
 .../ActionButtons/ActionButtons.tsx           |   2 +-
 .../CreateProposal/CreateProposal.tsx         | 136 ++++++++---
 .../components/ProposalPage/ProposalPage.tsx  |   5 +-
 .../components/PollDetailsTab.tsx             |  58 ++++-
 .../ProposalPage/components/VotesTab.tsx      |   6 +-
 .../ProposalPage/components/VotingPower.tsx   |  59 +++++
 .../components/VohmArea/VohmArea.tsx          |  36 +++
 .../VohmArea/VohmInputArea/VohmInputArea.tsx  | 218 +++++++++++++++++
 19 files changed, 985 insertions(+), 70 deletions(-)
 create mode 100644 src/abi/OlympusGovVohmVault.json
 create mode 100644 src/views/Governance/components/ProposalPage/components/VotingPower.tsx
 create mode 100644 src/views/Governance/components/VohmArea/VohmArea.tsx
 create mode 100644 src/views/Governance/components/VohmArea/VohmInputArea/VohmInputArea.tsx

diff --git a/src/abi/OlympusGovVohmVault.json b/src/abi/OlympusGovVohmVault.json
new file mode 100644
index 0000000000..6773e83e7a
--- /dev/null
+++ b/src/abi/OlympusGovVohmVault.json
@@ -0,0 +1,223 @@
+{
+    "abi": [
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "kernel_",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "constructor"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "caller_",
+                    "type": "address"
+                }
+            ],
+            "name": "KernelAdapter_OnlyKernel",
+            "type": "error"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "Keycode",
+                    "name": "keycode_",
+                    "type": "bytes5"
+                }
+            ],
+            "name": "Policy_ModuleDoesNotExist",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "VohmVault_NotVested",
+            "type": "error"
+        },
+        {
+            "inputs": [],
+            "name": "VESTING_PERIOD",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "VOTES",
+            "outputs": [
+                {
+                    "internalType": "contract VOTESv1",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "newKernel_",
+                    "type": "address"
+                }
+            ],
+            "name": "changeKernel",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "configureDependencies",
+            "outputs": [
+                {
+                    "internalType": "Keycode[]",
+                    "name": "dependencies",
+                    "type": "bytes5[]"
+                }
+            ],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "deposit",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "gOHM",
+            "outputs": [
+                {
+                    "internalType": "contract ERC20",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "isActive",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "kernel",
+            "outputs": [
+                {
+                    "internalType": "contract Kernel",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "mint",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "shares_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "redeem",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "requestPermissions",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "Keycode",
+                            "name": "keycode",
+                            "type": "bytes5"
+                        },
+                        {
+                            "internalType": "bytes4",
+                            "name": "funcSelector",
+                            "type": "bytes4"
+                        }
+                    ],
+                    "internalType": "struct Permissions[]",
+                    "name": "permissions",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "bool",
+                    "name": "activate_",
+                    "type": "bool"
+                }
+            ],
+            "name": "setActiveStatus",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "assets_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "withdraw",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/TopBar/Wallet/Assets/index.tsx b/src/components/TopBar/Wallet/Assets/index.tsx
index 8bfda5047b..36dbcb8555 100644
--- a/src/components/TopBar/Wallet/Assets/index.tsx
+++ b/src/components/TopBar/Wallet/Assets/index.tsx
@@ -6,7 +6,7 @@ import { NavLink } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import Balances from "src/components/TopBar/Wallet/Assets/Balances";
 import { TransactionHistory } from "src/components/TopBar/Wallet/Assets/TransactionHistory";
-import { useFaucet } from "src/components/TopBar/Wallet/hooks/useFaucet";
+import { useFaucet, useGovernanceFaucet } from "src/components/TopBar/Wallet/hooks/useFaucet";
 import { GetTokenPrice } from "src/components/TopBar/Wallet/queries";
 import { formatCurrency, formatNumber, trim } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
@@ -29,7 +29,7 @@ import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { NetworkId } from "src/networkDetails";
 import { useBondNotes } from "src/views/Bond/components/ClaimBonds/hooks/useBondNotes";
 import { useNextRebaseDate } from "src/views/Stake/components/StakeArea/components/RebaseTimer/hooks/useNextRebaseDate";
-import { useNetwork } from "wagmi";
+import { useAccount, useNetwork } from "wagmi";
 
 const PREFIX = "AssetsIndex";
 
@@ -87,6 +87,7 @@ const AssetsIndex: FC<OHMAssetsProps> = (props: { path?: string }) => {
   const navigate = useNavigate();
   const networks = useTestableNetworks();
   const { chain = { id: 1 } } = useNetwork();
+  const { address } = useAccount();
   const { data: ohmPrice = 0 } = useOhmPrice();
   const { data: priceFeed = { usd_24h_change: -0 } } = GetTokenPrice();
   const { data: currentIndex = new DecimalBigNumber("0", 9) } = useCurrentIndex();
@@ -204,7 +205,8 @@ const AssetsIndex: FC<OHMAssetsProps> = (props: { path?: string }) => {
   const walletTotalValueUSD = Object.values(assets).reduce((totalValue, token) => totalValue + token.assetValue, 0);
 
   const faucetMutation = useFaucet();
-  const isFaucetLoading = faucetMutation.isLoading;
+  const govFaucetMutation = useGovernanceFaucet();
+  const isFaucetLoading = faucetMutation.isLoading || govFaucetMutation.isLoading;
 
   return (
     <StyledFade in={true}>
@@ -255,11 +257,17 @@ const AssetsIndex: FC<OHMAssetsProps> = (props: { path?: string }) => {
                   <MenuItem value="sOHM V2">sOHM V2</MenuItem>
                   <MenuItem value="wsOHM">wsOHM</MenuItem>
                   <MenuItem value="gOHM">gOHM</MenuItem>
+                  <MenuItem value="govGOHM">gov-gOHM</MenuItem>
                   <MenuItem value="DAI">DAI</MenuItem>
                   <MenuItem value="ETH">ETH</MenuItem>
                 </Select>
               </FormControl>
-              <SecondaryButton onClick={() => faucetMutation.mutate(faucetToken)}>
+              <SecondaryButton
+                onClick={() =>
+                  faucetToken === "govGOHM" ? govFaucetMutation.mutate() : faucetMutation.mutate(faucetToken)
+                }
+                disabled={!address}
+              >
                 {isFaucetLoading ? "Loading..." : "Get Tokens"}
               </SecondaryButton>
             </Box>
diff --git a/src/components/TopBar/Wallet/hooks/useFaucet.ts b/src/components/TopBar/Wallet/hooks/useFaucet.ts
index 8337dc196e..93b5a5caee 100644
--- a/src/components/TopBar/Wallet/hooks/useFaucet.ts
+++ b/src/components/TopBar/Wallet/hooks/useFaucet.ts
@@ -3,8 +3,11 @@ import { useMutation } from "@tanstack/react-query";
 import { ContractReceipt } from "ethers";
 import toast from "react-hot-toast";
 import { DEV_FAUCET } from "src/constants/addresses";
+import { GOVERNANCE_MOCK_GOHM_CONTRACT } from "src/constants/contracts";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useDynamicFaucetContract } from "src/hooks/useContract";
 import { EthersError } from "src/lib/EthersTypes";
+import { useAccount, useNetwork, useSigner } from "wagmi";
 
 export const useFaucet = () => {
   const contract = useDynamicFaucetContract(DEV_FAUCET, true);
@@ -47,3 +50,32 @@ export const useFaucet = () => {
     },
   );
 };
+
+export const useGovernanceFaucet = () => {
+  const contract = GOVERNANCE_MOCK_GOHM_CONTRACT.getEthersContract(5);
+  const mintQuantity = new DecimalBigNumber("1000", 18);
+  const { data: signer } = useSigner();
+  const { address } = useAccount();
+  const { chain } = useNetwork();
+  return useMutation<ContractReceipt, EthersError>(
+    async () => {
+      if (!chain || chain.id !== 5) throw new Error("Faucet is only supported on Goerli");
+      if (!contract)
+        throw new Error(t`Faucet is not supported on this network. Please switch to Goerli Testnet to use the faucet`);
+      if (!signer) throw new Error("Signer is not set");
+      if (!address) throw new Error("Wallet is not connected");
+
+      console.log("mutating", address, mintQuantity.toBigNumber(18));
+      const transaction = await contract.connect(signer).mint(address, mintQuantity.toBigNumber(18));
+      return transaction.wait();
+    },
+    {
+      onError: error => {
+        toast.error("error" in error ? error.error.message : error.message);
+      },
+      onSuccess: async () => {
+        toast.success(t`Successfully requested 1000 governance gOHM from Faucet`);
+      },
+    },
+  );
+};
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index f64431d994..c225787f17 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -172,13 +172,7 @@ export const GOVERNANCE_ADDRESSES = {
 export const GOV_INSTRUCTIONS_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   // [NetworkId.TESTNET_GOERLI]: "0xa8810f94ABe49Ffe0AA49a1c30930a40C450f288",
-  [NetworkId.TESTNET_GOERLI]: "0x42bb80bad7e1e8bfd59417c5ae49f09e6988a795",
-};
-
-/** NOT USED */
-export const VOTE_ISSUER_ADDRESSES = {
-  [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0x65e44BEaf20bc8BED9643Bf996A59d478db1090b",
+  [NetworkId.TESTNET_GOERLI]: "0x1f0c9b03f9d9c2c6214c4557c369ae34c19122e4",
 };
 
 export const VOTE_TOKEN_ADDRESSES = {
@@ -205,7 +199,13 @@ export const GOVERNANCE_MOCK_GOHM = {
   [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
 };
 
-export const GOVERNANCE_VOHM_VAULT = {
+/** governance gohm combines mock gohm on goerli with mainnet gohm */
+export const GOVERNANCE_GOHM_ADDRESSES = {
+  [NetworkId.MAINNET]: "0x0ab87046fBb341D058F17CBC4c1133F25a20a52f", // this is the same as GOHM on mainnet
+  [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
+};
+
+export const GOVERNANCE_VOHM_VAULT_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   // [NetworkId.TESTNET_GOERLI]: "0x4fd8cc1a43377454ac50f9a312fd4fd7974811cb",
   [NetworkId.TESTNET_GOERLI]: "0x0BF5064643998f3211b4555Ce6855D511D33191a",
diff --git a/src/constants/contracts.ts b/src/constants/contracts.ts
index 87b7977ce0..53c8f09c44 100644
--- a/src/constants/contracts.ts
+++ b/src/constants/contracts.ts
@@ -8,13 +8,14 @@ import {
   DISTRIBUTOR_ADDRESSES,
   GOV_INSTRUCTIONS_ADDRESSES,
   GOVERNANCE_ADDRESSES,
+  GOVERNANCE_MOCK_GOHM,
+  GOVERNANCE_VOHM_VAULT_ADDRESSES,
   MIGRATOR_ADDRESSES,
   OP_BOND_DEPOSITORY_ADDRESSES,
   RANGE_ADDRESSES,
   RANGE_OPERATOR_ADDRESSES,
   RANGE_PRICE_ADDRESSES,
   STAKING_ADDRESSES,
-  VOTE_ISSUER_ADDRESSES,
   VOTE_TOKEN_ADDRESSES,
   ZAP_ADDRESSES,
 } from "src/constants/addresses";
@@ -30,7 +31,6 @@ import {
   OlympusGovInstructions__factory,
   OlympusProV2__factory,
   OlympusStakingv2__factory,
-  OlympusVoteIssuer__factory,
   Range__factory,
   RangeOperator__factory,
   RangePrice__factory,
@@ -39,6 +39,8 @@ import {
 import { BondAggregator__factory } from "src/typechain/factories/BondAggregator__factory";
 import { DevFaucet__factory } from "src/typechain/factories/DevFaucet__factory";
 import { OlympusDistributor__factory } from "src/typechain/factories/OlympusDistributor__factory";
+import { OlympusGovMockGOhm__factory } from "src/typechain/factories/OlympusGovMockGOhm__factory";
+import { OlympusGovVohmVault__factory } from "src/typechain/factories/OlympusGovVohmVault__factory";
 
 export const BOND_DEPOSITORY_CONTRACT = new Contract({
   factory: BondDepository__factory,
@@ -112,19 +114,24 @@ export const GOV_INSTRUCTIONS_CONTRACT = new Contract({
   addresses: GOV_INSTRUCTIONS_ADDRESSES,
 });
 
-/** NOT USED */
-export const VOTE_ISSUER_CONTRACT = new Contract({
-  factory: OlympusVoteIssuer__factory,
-  name: "Olympus Vote Issuer",
-  addresses: VOTE_ISSUER_ADDRESSES,
-});
-
 export const VOTE_TOKEN_CONTRACT = new Contract({
   factory: IERC20__factory,
   name: "Olympus Vote Token",
   addresses: VOTE_TOKEN_ADDRESSES,
 });
 
+export const GOVERNANCE_MOCK_GOHM_CONTRACT = new Contract({
+  factory: OlympusGovMockGOhm__factory,
+  name: "Olympus Governance Mock gOHM",
+  addresses: GOVERNANCE_MOCK_GOHM,
+});
+
+export const GOVERNANCE_VOHM_VAULT_CONTRACT = new Contract({
+  factory: OlympusGovVohmVault__factory,
+  name: "Olympus Governance vOHM Vault",
+  addresses: GOVERNANCE_VOHM_VAULT_ADDRESSES,
+});
+
 export const BOND_AGGREGATOR_CONTRACT = new Contract({
   factory: BondAggregator__factory,
   name: "Bond Aggregator Contract",
diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx
index 589285b686..aa4a5471fc 100644
--- a/src/helpers/index.tsx
+++ b/src/helpers/index.tsx
@@ -153,3 +153,21 @@ export const isChainEthereum = ({
 
   return chainId === NetworkId.MAINNET || chainId === NetworkId.TESTNET_GOERLI;
 };
+
+const isValidIPFSurl = (url: string) => {
+  return ~url?.indexOf("ipfs://") === -1;
+};
+
+export const isValidUrl = (url: string) => {
+  if (isValidIPFSurl(url)) return true;
+  const urlPattern = new RegExp(
+    "^((https)?:\\/\\/)?" + // validate protocol
+      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // validate domain name
+      "((\\d{1,3}\\.){3}\\d{1,3}))" + // validate OR ip (v4) address
+      "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // validate port and path
+      "(\\?[;&a-z\\d%_.~+=-]*)?" + // validate query string
+      "(\\#[-a-z\\d_]*)?$",
+    "i",
+  ); // validate fragment locator
+  return !!urlPattern.test(url);
+};
diff --git a/src/hooks/useBalance.ts b/src/hooks/useBalance.ts
index d1f285377e..7a0610ce9c 100644
--- a/src/hooks/useBalance.ts
+++ b/src/hooks/useBalance.ts
@@ -7,6 +7,7 @@ import {
   FUSE_POOL_36_ADDRESSES,
   GOHM_ADDRESSES,
   GOHM_TOKEMAK_ADDRESSES,
+  GOVERNANCE_GOHM_ADDRESSES,
   OHM_ADDRESSES,
   SOHM_ADDRESSES,
   V1_OHM_ADDRESSES,
@@ -93,3 +94,5 @@ export const useV1OhmBalance = () => useBalance(V1_OHM_ADDRESSES);
 export const useV1SohmBalance = () => useBalance(V1_SOHM_ADDRESSES);
 export const useGohmTokemakBalance = () => useBalance(GOHM_TOKEMAK_ADDRESSES);
 export const useVoteBalance = () => useBalance(VOTE_TOKEN_ADDRESSES);
+/** governance gOHM handles the mock gOHM on goerli & the normal mainnet gohm on mainnet */
+export const useGovernanceGohmBalance = () => useBalance(GOVERNANCE_GOHM_ADDRESSES);
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 9c692c00b4..1a08933b94 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,8 +1,8 @@
-import { t } from "@lingui/macro";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { ethers } from "ethers";
-import { GOVERNANCE_CONTRACT } from "src/constants/contracts";
+import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber, stringToBytes32String } from "src/helpers";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { nonNullable } from "src/helpers/types/nonNullable";
 import { IPFSFileData, IProposalJson, makeJsonFile, uploadToIPFS } from "src/helpers/Web3Storage";
 import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
@@ -15,6 +15,8 @@ import {
   timeRemaining,
   useGetProposalURIFromEvent,
 } from "src/hooks/useProposals";
+import { useVotingCollateralMinimum, useVotingCollateralRequirement, useVotingSupply } from "src/hooks/useVoting";
+import { InstructionStructOutput } from "src/typechain/OlympusGovInstructions";
 import { useNetwork, useSigner } from "wagmi";
 
 /**
@@ -141,7 +143,7 @@ export const useSubmitProposal = () => {
 
   // TODO(appleseed): update ANY types below
   return useMutation<any, Error, { proposal: ISubmitProposal }>(async ({ proposal }: { proposal: ISubmitProposal }) => {
-    if (!signer) throw new Error(t`Signer is not set`);
+    if (!signer) throw new Error(`Signer is not set`);
 
     // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
     await contract.connect(signer).submitProposal(
@@ -163,3 +165,50 @@ export const useIPFSUpload = () => {
     },
   );
 };
+
+/**
+ * how much voting power does it require to create a proposal
+ */
+export const useCreateProposalVotingPowerReqd = () => {
+  const { data: totalSupply, isFetched: supplyFetched, isLoading: supplyLoading } = useVotingSupply();
+  const {
+    data: collateralMinimum,
+    isFetched: minimumFetched,
+    isLoading: minimumLoading,
+  } = useVotingCollateralMinimum();
+  const {
+    data: collateralRequirement,
+    isFetched: requirementFetched,
+    isLoading: requirementLoading,
+  } = useVotingCollateralRequirement();
+  // const collateral = _max(
+  //     (VOTES.totalSupply() * COLLATERAL_REQUIREMENT) / 10_000,
+  //     COLLATERAL_MINIMUM
+  // );
+  const everythingFetched = supplyFetched && minimumFetched && requirementFetched;
+  let collateral = new DecimalBigNumber("0", 18);
+  if (everythingFetched && !!totalSupply && !!collateralRequirement && !!collateralMinimum) {
+    const numerator = totalSupply.mul(collateralRequirement);
+    collateral = new DecimalBigNumber((collateralMinimum.gt(numerator) ? collateralMinimum : numerator).toString(), 18);
+  }
+
+  return {
+    data: collateral,
+    isLoading: supplyLoading && minimumLoading && requirementLoading,
+    isFetched: everythingFetched,
+  };
+};
+
+/** get the instructions from the proposal */
+export const useGetInstructions = (proposalId: number) => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOV_INSTRUCTIONS_CONTRACT.getEthersContract(chain.id);
+  return useQuery<InstructionStructOutput[], Error>(
+    ["getInstructions", chain.id, proposalId],
+    async () => {
+      // using EVENTS
+      return await contract.getInstructions(String(proposalId));
+    },
+    { enabled: !!chain && !!chain.id && !!contract && !!proposalId },
+  );
+};
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 314dfd48fe..277f14fc28 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -179,6 +179,20 @@ export const useGetProposalURIFromEvent = ({ proposalId }: { proposalId: number
 export const useGetLastProposalId = (): { data: number; isLoading: boolean; isFetched: boolean } => {
   const { data: events, isFetched, isLoading } = useGetProposalSubmittedEvents();
 
+  ////////
+  // NOTE(appleseed) could also be: (if we didn't already need all the events)
+  ///////
+  // const { chain = { id: 1 } } = useNetwork();
+  // const contract = GOV_INSTRUCTIONS_CONTRACT.getEthersContract(chain.id);
+  // return useQuery<ProposalSubmittedEvent[], Error>(
+  //   ["useGetLastProposalId", chain.id],
+  //   async () => {
+  //     // using EVENTS
+  //     return await contract.totalInstructions();
+  //   },
+  //   { enabled: !!chain && !!chain.id && !!archiveProvider && !!contract },
+  // );
+
   let data = 0;
   if (isFetched && !!events && events.length > 0) {
     const mostRecentEventArgs = events[events.length - 1].args;
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 61ac937bf3..f709a54528 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -1,8 +1,10 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { BigNumber, ContractReceipt, ethers } from "ethers";
-import { GOVERNANCE_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
+import { GOVERNANCE_CONTRACT, GOVERNANCE_VOHM_VAULT_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
+import { useGovernanceGohmBalance, useVoteBalance } from "src/hooks/useBalance";
+import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { VotesCastEvent } from "src/typechain/OlympusGovernance";
 import { useNetwork, useSigner } from "wagmi";
 
@@ -132,7 +134,42 @@ export const useVotingSupply = () => {
     ["getVoteTokenTotalSupply", chain?.id],
     async () => {
       const votingSupply = await contract.totalSupply();
-      return new DecimalBigNumber(votingSupply, 3);
+      return new DecimalBigNumber(votingSupply, 18);
+    },
+    { enabled: !!chain?.id },
+  );
+};
+
+/**
+ * returns the collateral Minimum
+ */
+export const useVotingCollateralMinimum = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+
+  return useQuery<DecimalBigNumber, Error>(
+    ["getVotingCollateralMinimum", chain?.id],
+    async () => {
+      const collateral = await contract.COLLATERAL_MINIMUM();
+      return new DecimalBigNumber(collateral, 18);
+    },
+    { enabled: !!chain?.id },
+  );
+};
+
+/**
+ * returns the collateral Minimum as a decimal
+ * - i.e. 0.05 = 5%
+ */
+export const useVotingCollateralRequirement = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+
+  return useQuery<DecimalBigNumber, Error>(
+    ["getVotingCollateralRequirement", chain?.id],
+    async () => {
+      const collateral = await contract.COLLATERAL_REQUIREMENT();
+      return new DecimalBigNumber(collateral, 4);
     },
     { enabled: !!chain?.id },
   );
@@ -173,17 +210,14 @@ export const useVotingSupply = () => {
 export const useVote = () => {
   const { chain = { id: 1 } } = useNetwork();
   const { data: signer } = useSigner();
-
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const networks = useTestableNetworks();
+  const { data: balance } = useVoteBalance()[networks.MAINNET];
 
   return useMutation<ContractReceipt, Error, { voteData: Vote }>(
     async ({ voteData }: { voteData: Vote }) => {
       if (!signer) throw new Error("No signer connected, cannot endorse");
-
-      // const activeProposal: ActivatedProposal = await contract.activeProposal();
-      // const activeProposalId = activeProposal.proposalId;
-
-      // if (!voteData.proposalId.eq(activeProposalId)) throw new Error(t`You can only vote for the activated proposal`);
+      if (!balance) throw new Error("You cannot Vote without vOHM");
 
       const transaction = await contract.connect(signer).vote(voteData.proposalId, voteData.vote);
       return transaction.wait();
@@ -198,3 +232,77 @@ export const useVote = () => {
     },
   );
 };
+
+/** for a user to get voting power */
+export const useWrapToVohm = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const { data: signer } = useSigner();
+  const contract = GOVERNANCE_VOHM_VAULT_CONTRACT.getEthersContract(chain.id);
+  const networks = useTestableNetworks();
+  const { data: balance } = useGovernanceGohmBalance()[networks.MAINNET];
+
+  return useMutation<ContractReceipt, Error, string>(
+    async (amount: string) => {
+      if (!signer) throw new Error("No signer connected, cannot endorse");
+      if (!amount || isNaN(Number(amount))) throw new Error(`Please enter a number`);
+
+      const _amount = new DecimalBigNumber(amount, 18);
+
+      if (!_amount.gt("0")) throw new Error(`Please enter a number greater than 0`);
+
+      if (!balance) throw new Error(`Please refresh your page and try again`);
+
+      if (_amount.gt(balance)) throw new Error(`You cannot wrap more than your gOHM balance`);
+
+      if (!contract) throw new Error(`Please switch to the Ethereum network to wrap your gOHM`);
+
+      const transaction = await contract.connect(signer).deposit(_amount.toBigNumber());
+      return transaction.wait();
+    },
+    {
+      onError: error => {
+        console.error(error.message);
+      },
+      onSuccess: () => {
+        console.log(`Successfully wrapped to vOHM`);
+      },
+    },
+  );
+};
+
+/** for a user to unwrap voting power to gOHM */
+export const useUnwrapFromVohm = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const { data: signer } = useSigner();
+  const contract = GOVERNANCE_VOHM_VAULT_CONTRACT.getEthersContract(chain.id);
+  const networks = useTestableNetworks();
+  const { data: balance } = useVoteBalance()[networks.MAINNET];
+
+  return useMutation<ContractReceipt, Error, string>(
+    async (amount: string) => {
+      if (!signer) throw new Error("No signer connected, cannot endorse");
+      if (!amount || isNaN(Number(amount))) throw new Error(`Please enter a number`);
+
+      const _amount = new DecimalBigNumber(amount, 18);
+
+      if (!_amount.gt("0")) throw new Error(`Please enter a number greater than 0`);
+
+      if (!balance) throw new Error(`Please refresh your page and try again`);
+
+      if (_amount.gt(balance)) throw new Error(`You cannot unwrap more than your vOHM balance`);
+
+      if (!contract) throw new Error(`Please switch to the Ethereum network to unwrap your vOHM`);
+
+      const transaction = await contract.connect(signer).withdraw(_amount.toBigNumber());
+      return transaction.wait();
+    },
+    {
+      onError: error => {
+        console.error(error.message);
+      },
+      onSuccess: () => {
+        console.log(`Successfully unwrapped to gOHM`);
+      },
+    },
+  );
+};
diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
index d040fea75c..8ee715965f 100644
--- a/src/views/Governance/Governance.tsx
+++ b/src/views/Governance/Governance.tsx
@@ -1,15 +1,24 @@
+import { Box } from "@mui/material";
+import { Paper } from "@olympusdao/component-library";
 import { Route, Routes } from "react-router-dom";
 import { CreateProposal } from "src/views/Governance/components/CreateProposal";
 import { ProposalPage } from "src/views/Governance/components/ProposalPage";
+import { VotingPower, VotingPowerMetrics } from "src/views/Governance/components/ProposalPage/components/VotingPower";
 import { ProposalsDashboard } from "src/views/Governance/ProposalsDashboard";
 
 export const Governance = () => {
   return (
     <>
+      <Box display="flex" justifyContent="center" width="100%">
+        <Paper>
+          <VotingPowerMetrics />
+        </Paper>
+      </Box>
       <Routes>
         <Route path="/" element={<ProposalsDashboard />} />
         <Route path="/proposals/:passedId/*" element={<ProposalPage />} />
         <Route path="/create-proposal" element={<CreateProposal />} />
+        <Route path="/get-vohm" element={<VotingPower />} />
       </Routes>
     </>
   );
diff --git a/src/views/Governance/components/ActionButtons/ActionButtons.tsx b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
index d72c225b8e..9e2a844458 100644
--- a/src/views/Governance/components/ActionButtons/ActionButtons.tsx
+++ b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
@@ -19,7 +19,7 @@ const ActionButtons: FC = () => {
       <Link to="/governance/create-proposal" component={RouterLink}>
         <SecondaryButton>Create new Proposal</SecondaryButton>
       </Link>
-      {/* <PrimaryButton onClick={() => setOpen(true)}>Delegate Vote</PrimaryButton> */}
+      {/* <PrimaryButton onClick={() => setOpen(true)}>Get Voting Power</PrimaryButton> */}
 
       <DelegateModal open={open} handleClose={handleClose} />
     </Box>
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 269fcf327b..cea2a65631 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -1,24 +1,33 @@
-import { Box, Grid, InputLabel, Select, styled, Typography } from "@mui/material";
+import { Box, Grid, InputLabel, Select, Skeleton, styled, Typography } from "@mui/material";
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import MDEditor from "@uiw/react-md-editor";
+import { ethers } from "ethers";
 import { FC, useState } from "react";
 import rehypeSanitize from "rehype-sanitize";
-import { useIPFSUpload, useSubmitProposal } from "src/hooks/useProposal";
+import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
+import { GOVERNANCE_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
+import { isValidUrl } from "src/helpers";
+import { useVoteBalance } from "src/hooks/useBalance";
+import { useCreateProposalVotingPowerReqd, useIPFSUpload, useSubmitProposal } from "src/hooks/useProposal";
 import { ProposalAction } from "src/hooks/useProposals";
+import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { BackButton } from "src/views/Governance/components/BackButton";
 import { TextEntry } from "src/views/Governance/components/CreateProposal/components/TextEntry";
 import { MarkdownPreview } from "src/views/Governance/components/MarkdownPreview";
+import { InstructionsDetails } from "src/views/Governance/components/ProposalPage/components/PollDetailsTab";
 
 export const CreateProposal = () => {
   const ipfsUpload = useIPFSUpload();
   const submitProposal = useSubmitProposal();
-
-  const [proposalTitle, setProposalTitle] = useState("");
-  const [proposalDescription, setProposalDescription] = useState("");
-  const [proposalDiscussion, setProposalDiscussion] = useState("");
+  const [proposalTitle, setProposalTitle] = useState<string>();
+  const [proposalDescription, setProposalDescription] = useState<string>();
+  const [proposalDiscussion, setProposalDiscussion] = useState<string>();
+  const { data: collateralRequired, isLoading: collateralRequiredLoading } = useCreateProposalVotingPowerReqd();
+  const networks = useTestableNetworks();
+  const { data: votesBalance } = useVoteBalance()[networks.MAINNET];
   // TODO(appleseed): need to allow multiple instructions
   const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.InstallModule);
-  const [proposalContract, setProposalContract] = useState("");
+  const [proposalContract, setProposalContract] = useState<string>();
 
   const StyledInputLabel = styled(InputLabel)(() => ({
     lineHeight: "24px",
@@ -51,27 +60,41 @@ export const CreateProposal = () => {
     );
   };
 
+  const discussionIsValidURL = isValidUrl(proposalDiscussion as string);
+  const isValidAddress = ethers.utils.isAddress(proposalContract as string);
+  const proposalFieldsComplete = !!proposalTitle && !!proposalDescription && !!discussionIsValidURL && !!isValidAddress;
   const canSubmit = () => {
-    if (submitProposal.isLoading) return false;
+    if (
+      !proposalFieldsComplete ||
+      submitProposal.isLoading ||
+      collateralRequiredLoading ||
+      !votesBalance ||
+      collateralRequired.gt(votesBalance)
+    )
+      return false;
     return true;
   };
 
   // https://goerli.etherscan.io/tx/0x7150ffcc290038deab9c89b1630df273273d2b428e6ee6fb6bec0ddeefe25b18
   const handleFormSubmission = async () => {
-    const proposal = {
-      name: proposalTitle,
-      description: proposalDescription,
-      content: proposalDescription,
-      external_url: proposalDiscussion,
-    };
-    const fileData = await ipfsUpload.mutateAsync({ proposal });
-    if (fileData) {
-      const proposalURI = `ipfs://${fileData.path}`;
-      // TODO(appleseed): need to allow multiple instructions
-      const instructions = [{ action: proposalAction, target: proposalContract }];
-      submitProposal.mutate({ proposal: { name: proposal.name, instructions, proposalURI } });
+    if (!proposalFieldsComplete) {
+      return;
     } else {
-      // TODO(appleseed): there was a problem uploading your proposal to IPFS
+      const proposal = {
+        name: proposalTitle as string,
+        description: proposalDescription as string,
+        content: proposalDescription as string,
+        external_url: proposalDiscussion as string,
+      };
+      const fileData = await ipfsUpload.mutateAsync({ proposal });
+      if (fileData) {
+        const proposalURI = `ipfs://${fileData.path}`;
+        // TODO(appleseed): need to allow multiple instructions
+        const instructions = [{ action: proposalAction as ProposalAction, target: proposalContract as string }];
+        submitProposal.mutate({ proposal: { name: proposal.name, instructions, proposalURI } });
+      } else {
+        // TODO(appleseed): there was a problem uploading your proposal to IPFS
+      }
     }
   };
 
@@ -80,6 +103,7 @@ export const CreateProposal = () => {
       <Paper>
         <Grid container direction="column" paddingLeft="4.5px" paddingRight="4.5px">
           <BackButton />
+          <CollateralRequiredText />
           <TextEntry label="Title" handleChange={setProposalTitle} />
           <StyledInputLabel>Description</StyledInputLabel>
           <MDEditor
@@ -93,9 +117,9 @@ export const CreateProposal = () => {
             }}
           />
           <Box display="flex" flexDirection="row" justifyContent="flex-end">
-            <Typography>{proposalDescription.length}/14,400</Typography>
+            <Typography>{proposalDescription?.length || 0}/14,400</Typography>
           </Box>
-          <MarkdownPreview content={proposalDescription} />
+          <MarkdownPreview content={proposalDescription || ""} />
           <TextEntry
             label="Discussion"
             placeholder="e.g. https://forum.olympusday.finance/..."
@@ -108,13 +132,71 @@ export const CreateProposal = () => {
               <TextEntry label="Target" placeholder="Contract address" handleChange={setProposalContract} />
             </Grid>
           </Grid>
+          {!!proposalContract && <InstructionsDetails action={proposalAction} target={proposalContract} />}
         </Grid>
-        <Box display="flex" justifyContent="flex-end">
-          <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission}>
-            {submitProposal.isLoading ? "Submitting..." : "Continue"}
-          </PrimaryButton>
+        <Box id="create-proposal-btn-box" display="flex" justifyContent="flex-end">
+          <TokenAllowanceGuard
+            message={`Creating a Proposal requires a vOHM Collateral deposit. Your vOHM can be redeemed after the proposal passes/fails.`}
+            tokenAddressMap={VOTE_TOKEN_ADDRESSES}
+            spenderAddressMap={GOVERNANCE_ADDRESSES}
+            approvalText={"Approve Collateral"}
+            approvalPendingText={"Confirming Approval in your wallet"}
+            isVertical
+          >
+            <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission}>
+              {submitProposal.isLoading ? "Submitting..." : "Continue"}
+            </PrimaryButton>
+          </TokenAllowanceGuard>
+        </Box>
+        <Box display={`flex`} justifyContent={`flex-end`}>
+          <CollateralRequiredText />
         </Box>
       </Paper>
     </Box>
   );
 };
+
+const CollateralRequiredText = () => {
+  const { data: collateralRequired, isLoading: collateralRequiredLoading } = useCreateProposalVotingPowerReqd();
+  const networks = useTestableNetworks();
+  const { data: votesBalance, isLoading: votesLoading } = useVoteBalance()[networks.MAINNET];
+
+  return (
+    <Box display={`flex`} flexDirection={`column`}>
+      <Box display={`flex`}>
+        {collateralRequiredLoading ? (
+          <>
+            <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
+              &#x2022;{` Creating a Proposal requires `}
+            </Typography>
+            <Skeleton width={60} sx={{ display: "inline-block" }} />
+            <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
+              {` vOHM`}
+            </Typography>
+          </>
+        ) : (
+          <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
+            &#x2022;{` Creating a Proposal requires ${collateralRequired.toApproxNumber()} vOHM`}
+          </Typography>
+        )}
+      </Box>
+      <Box display={`flex`}>
+        {votesLoading || !votesBalance ? (
+          <>
+            <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
+              &#x2022;{` You have `}
+            </Typography>
+            <Skeleton width={60} sx={{ display: "inline-block" }} />
+            <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
+              {` vOHM`}
+            </Typography>
+          </>
+        ) : (
+          <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
+            &#x2022;{` You have ${votesBalance.toApproxNumber()} vOHM`}
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 218bf4c933..d264410c95 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -1,6 +1,5 @@
 import "src/views/Governance/components/ProposalPage/ProposalPage.scss";
 
-import { t } from "@lingui/macro";
 import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
 import { Chip, Icon, OHMChipProps, Paper, Tab, Tabs } from "@olympusdao/component-library";
 import { FC, useMemo } from "react";
@@ -56,10 +55,10 @@ export const PageWrapper = (props: { proposal: IAnyProposal }) => (
         <Box display="flex" justifyContent="center">
           <Tabs value={false} centered textColor="primary" indicatorColor="primary">
             <Link component={NavLink} to={`/governance/proposals/${props.proposal.id}`} end>
-              <Tab label={t`Poll Detail`}></Tab>
+              <Tab label={`Poll Detail`}></Tab>
             </Link>
             <Link component={NavLink} to={`/governance/proposals/${props.proposal.id}/votes`}>
-              <Tab label={t`Votes`}></Tab>
+              <Tab label={`Votes`}></Tab>
             </Link>
           </Tabs>
         </Box>
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 5b1917514b..4650639a70 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,10 +1,23 @@
-import { Box } from "@mui/material";
+import { Box, Skeleton, Typography } from "@mui/material";
 import { Paper, TertiaryButton } from "@olympusdao/component-library";
+import { useGetInstructions } from "src/hooks/useProposal";
+import { ProposalAction } from "src/hooks/useProposals";
+import { MarkdownPreview } from "src/views/Governance/components/MarkdownPreview";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
-
-import { MarkdownPreview } from "../../MarkdownPreview";
+import { useNetwork } from "wagmi";
 
 export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
+  const { data: instructions, isLoading } = useGetInstructions(proposal.id);
+
+  const renderInstructions = () => {
+    if (instructions && instructions.length > 0) {
+      return instructions.map((instruction, index) => {
+        return <InstructionsDetails key={index} action={instruction.action} target={instruction.target} />;
+      });
+    }
+    return <InstructionSkeleton />;
+  };
+
   return (
     <Paper enableBackground fullWidth>
       <Box display="flex" flexDirection="column">
@@ -15,7 +28,46 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
             Discussion
           </TertiaryButton>
         </Box>
+        <Box display="flex" flexDirection="column">
+          <Typography variant="h6">Implementation Details</Typography>
+          <>{isLoading ? <InstructionSkeleton /> : renderInstructions()}</>
+        </Box>
       </Box>
     </Paper>
   );
 };
+
+export const InstructionsDetails = ({ action, target }: { action: number; target: string }) => {
+  const { chain } = useNetwork();
+  const etherscanURI =
+    chain?.id === 5 ? `https://goerli.etherscan.io/address/${target}` : `https://etherscan.io/address/${target}`;
+  const dethcodeURI =
+    chain?.id === 5
+      ? `https://goerli.etherscan.deth.net/address/${target}`
+      : `https://etherscan.deth.net/address/${target}`;
+
+  return (
+    <Box display="flex" flexDirection="column">
+      <Typography id="instructions-action">{`${ProposalAction[action]} ${target}`}</Typography>
+      <Box display="flex" flexDirection="row" justifyContent={`center`}>
+        <TertiaryButton id="instructions-target-etherscan" target="_blank" href={etherscanURI} disabled={!chain}>
+          etherscan
+        </TertiaryButton>
+        <TertiaryButton id="instructions-target-dethcode" target="_blank" href={dethcodeURI} disabled={!chain}>
+          dethcode
+        </TertiaryButton>
+      </Box>
+    </Box>
+  );
+};
+
+const InstructionSkeleton = () => {
+  return (
+    <Skeleton>
+      <Typography id="instructions-action">{1}</Typography>
+      <TertiaryButton id="instructions-target-etherscan" target="_blank" href={``}>
+        {`instruction[1]`}
+      </TertiaryButton>
+    </Skeleton>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 0ca3a3867c..0bf1a1d2a2 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -23,7 +23,6 @@ import { BigNumber } from "ethers";
 import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
-import { useVoteBalance } from "src/hooks/useBalance";
 import { IAnyProposal } from "src/hooks/useProposals";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { useUserVote, useVote, useVotingSupply } from "src/hooks/useVoting";
@@ -37,7 +36,6 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
   const networks = useTestableNetworks();
   const { isConnected } = useAccount();
-  const votesBalance = useVoteBalance()[networks.MAINNET].data;
   const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
   const { address: voterAddress } = useAccount();
@@ -48,13 +46,13 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
 
   return (
     <Paper fullWidth>
+      <Box sx={{ marginTop: "24px" }}></Box>
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
         <Box display="flex" flexDirection="column">
           <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
             Cast Your Vote
           </Typography>
         </Box>
-        {isConnected && <Metric label={`Your voting power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
         <>
           <Box display="flex" flexDirection="row" justifyContent="center">
             <SecondaryButton
@@ -130,7 +128,7 @@ const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
         voteAgainstLabel="No"
         voteAgainstCount={proposal.noVotes}
         voteParticipationLabel="Total Participants"
-        totalHoldersCount={totalVoteSupply?.toApproxNumber() || 0}
+        totalHoldersCount={Number(formatBalance(2, totalVoteSupply)) || 0}
         // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
         quorum={totalVoteSupply?.mul("0.33")?.toApproxNumber() || 0}
       />
diff --git a/src/views/Governance/components/ProposalPage/components/VotingPower.tsx b/src/views/Governance/components/ProposalPage/components/VotingPower.tsx
new file mode 100644
index 0000000000..2dce34e317
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/VotingPower.tsx
@@ -0,0 +1,59 @@
+import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
+import { Metric, PrimaryButton } from "@olympusdao/component-library";
+import { Paper } from "@olympusdao/component-library";
+import { Link as RouterLink } from "react-router-dom";
+import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
+import { formatBalance } from "src/helpers";
+import { useVoteBalance } from "src/hooks/useBalance";
+import { useTestableNetworks } from "src/hooks/useTestableNetworks";
+import { useVotingSupply } from "src/hooks/useVoting";
+import { BackButton } from "src/views/Governance/components/BackButton";
+import { VohmArea } from "src/views/Governance/components/VohmArea/VohmArea";
+import { useAccount } from "wagmi";
+
+export const VotingPower = () => {
+  return (
+    <>
+      <Box display="flex" justifyContent="center">
+        <Paper>
+          <Grid container direction="column" paddingLeft="4.5px" paddingRight="4.5px">
+            <BackButton />
+            <VohmArea />
+          </Grid>
+        </Paper>
+      </Box>
+    </>
+  );
+};
+
+export const VotingPowerMetrics = () => {
+  const theme = useTheme();
+  const { isConnected } = useAccount();
+  const networks = useTestableNetworks();
+  const votesBalance = useVoteBalance()[networks.MAINNET].data;
+
+  const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
+
+  return (
+    <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
+      <Box display="flex" flexDirection="column">
+        <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
+          Voting Power
+        </Typography>
+      </Box>
+      <Box display="flex" flexDirection="row">
+        {isConnected && <Metric label={`Your voting power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
+        {totalVoteSupply && (
+          <Metric label={`Total Voting Supply`} metric={`${formatBalance(2, totalVoteSupply)} vOHM`} />
+        )}
+      </Box>
+      <WalletConnectedGuard>
+        <Box display="flex" flexDirection="row" justifyContent="center">
+          <Link to="/governance/get-vohm" component={RouterLink}>
+            <PrimaryButton sx={{ minWidth: "120px" }}>Get More Voting Power</PrimaryButton>
+          </Link>
+        </Box>
+      </WalletConnectedGuard>
+    </Box>
+  );
+};
diff --git a/src/views/Governance/components/VohmArea/VohmArea.tsx b/src/views/Governance/components/VohmArea/VohmArea.tsx
new file mode 100644
index 0000000000..43b873d4a3
--- /dev/null
+++ b/src/views/Governance/components/VohmArea/VohmArea.tsx
@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import { MetricCollection } from "@olympusdao/component-library";
+import { useState } from "react";
+import { VohmInputArea } from "src/views/Governance/components/VohmArea/VohmInputArea/VohmInputArea";
+import { useAccount } from "wagmi";
+
+export const VohmArea: React.FC = () => {
+  const [isZoomed, setIsZoomed] = useState(false);
+  const { isConnected } = useAccount();
+
+  return (
+    <>
+      {/* <PageTitle name="vOHM" /> */}
+      <Box width="100%">
+        <Box display="flex" flexDirection="row" width="100%" justifyContent="center">
+          <Box display="flex" flexDirection="column" width="100%" maxWidth="521px" mb="28px">
+            <MetricCollection>{/* <VotingPowerMetrics /> */}</MetricCollection>
+          </Box>
+        </Box>
+
+        <VohmInputArea isZoomed={isZoomed} />
+        {isConnected && (
+          <Box display="flex" flexDirection="row" width="100%" justifyContent="center" mt="24px">
+            <Box display="flex" flexDirection="column" width="100%" maxWidth="476px">
+              {/* <StakeBalances />
+              <Divider />
+              <StakeNextRebaseAmount />
+              <StakeRebaseYield />
+              <StakeFiveDayYield /> */}
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/src/views/Governance/components/VohmArea/VohmInputArea/VohmInputArea.tsx b/src/views/Governance/components/VohmArea/VohmInputArea/VohmInputArea.tsx
new file mode 100644
index 0000000000..e03adb2d89
--- /dev/null
+++ b/src/views/Governance/components/VohmArea/VohmInputArea/VohmInputArea.tsx
@@ -0,0 +1,218 @@
+import { Box, Tab, Tabs } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { OHMSwapCardProps, PrimaryButton, SwapCard, SwapCollection } from "@olympusdao/component-library";
+import React, { useEffect, useState } from "react";
+import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
+import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
+import {
+  GOVERNANCE_GOHM_ADDRESSES,
+  GOVERNANCE_VOHM_VAULT_ADDRESSES,
+  VOTE_TOKEN_ADDRESSES,
+} from "src/constants/addresses";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
+import { useBalance, useVoteBalance } from "src/hooks/useBalance";
+import { useTestableNetworks } from "src/hooks/useTestableNetworks";
+import { useUnwrapFromVohm, useWrapToVohm } from "src/hooks/useVoting";
+import { ModalHandleSelectProps } from "src/views/Stake/components/StakeArea/components/StakeInputArea/components/TokenModal";
+import { useNetwork } from "wagmi";
+
+enum EvOHM {
+  Wrap = "WRAP",
+  Unwrap = "UNWRAP",
+}
+const PREFIX = "StakeInputArea";
+
+const classes = {
+  inputRow: `${PREFIX}-inputRow`,
+  gridItem: `${PREFIX}-gridItem`,
+  input: `${PREFIX}-input`,
+  button: `${PREFIX}-button`,
+};
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  [`& .${classes.inputRow}`]: {
+    justifyContent: "space-around",
+    alignItems: "center",
+    height: "auto",
+    marginTop: "4px",
+  },
+
+  [`& .${classes.gridItem}`]: {
+    width: "100%",
+    paddingRight: "5px",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  [`& .${classes.input}`]: {
+    [theme.breakpoints.down("md")]: {
+      marginBottom: "10px",
+    },
+    [theme.breakpoints.up("sm")]: {
+      marginBottom: "0",
+    },
+  },
+
+  [`& .${classes.button}`]: {
+    width: "100%",
+    minWidth: "163px",
+    maxWidth: "542px",
+  },
+}));
+
+export const VohmInputArea: React.FC<{ isZoomed: boolean }> = props => {
+  const networks = useTestableNetworks();
+  const [stakedAssetType, setStakedAssetType] = useState<ModalHandleSelectProps>({ name: "vOHM" });
+  const [swapAssetType, setSwapAssetType] = useState<ModalHandleSelectProps>({ name: "gOHM" });
+  const { chain = { id: 1 } } = useNetwork();
+
+  const [currentAction, setCurrentAction] = useState<EvOHM>(EvOHM.Wrap);
+
+  const fromToken = currentAction === EvOHM.Wrap ? swapAssetType.name : stakedAssetType.name;
+
+  // Max balance stuff
+  const [amount, setAmount] = useState("");
+  const addresses = fromToken === "gOHM" ? GOVERNANCE_GOHM_ADDRESSES : VOTE_TOKEN_ADDRESSES;
+
+  const balance = useBalance(addresses)[networks.MAINNET].data;
+  const gOhmBalance = useBalance(GOVERNANCE_GOHM_ADDRESSES)[networks.MAINNET].data;
+  const vOhmBalance = useVoteBalance()[networks.MAINNET].data;
+
+  const contractRouting = swapAssetType.name === "gOHM" ? "Wrap" : "Unwrap";
+
+  // Staking/unstaking mutation stuff
+  // TODO
+  const wrapMutation = useWrapToVohm();
+  const unwrapMutation = useUnwrapFromVohm();
+  const isMutating = (currentAction === EvOHM.Wrap ? wrapMutation : unwrapMutation).isLoading;
+
+  const amountExceedsBalance = balance && new DecimalBigNumber(amount, 18).gt(balance) ? true : false;
+
+  useEffect(() => {
+    setAmount("0");
+    //If we're unstaking we reset swap asset back to OHM. this is all you can receive when unstaking.
+    if (currentAction === EvOHM.Unwrap) {
+      setSwapAssetType({ name: "gOHM" });
+    }
+    if (currentAction === EvOHM.Wrap) {
+      setStakedAssetType({ name: "vOHM" });
+    }
+  }, [currentAction]);
+
+  const GohmSwapCard = () => {
+    const balance =
+      swapAssetType.name === "gOHM"
+        ? gOhmBalance
+          ? gOhmBalance.toString({ decimals: 2 })
+          : "0.00"
+        : swapAssetType.name === "vOHM"
+        ? vOhmBalance
+          ? vOhmBalance.toString({ decimals: 2 })
+          : "0.00"
+        : swapAssetType.balance;
+
+    return (
+      <SwapCard
+        id="gohm-input"
+        token={swapAssetType.name as OHMSwapCardProps["token"]}
+        tokenName={swapAssetType.name}
+        inputProps={{ "data-testid": "gohm-input", min: "0" }}
+        value={amount}
+        onChange={event => +event.target.value >= 0 && setAmount(event.target.value)}
+        info={`Balance: ${balance} ${swapAssetType.name}`}
+        endString={currentAction === EvOHM.Wrap ? "Max" : ""}
+        endStringOnClick={() => balance && setAmount(balance)}
+        disabled={isMutating}
+        inputWidth={`${amount.length > 0 ? amount.length : 1}ch`}
+      />
+    );
+  };
+
+  const VohmSwapCard = () => {
+    const balance = stakedAssetType.name === "gOHM" ? gOhmBalance : vOhmBalance;
+
+    return (
+      <SwapCard
+        id="vohm-input"
+        inputProps={{ "data-testid": "staked-input", min: "0" }}
+        token={"gOHM" as OHMSwapCardProps["token"]} // forcing gOHM icon since vOHM doesn't have an icon
+        tokenName={stakedAssetType.name}
+        value={amount}
+        onChange={event => +event.target.value >= 0 && setAmount(event.target.value)}
+        info={`Balance: ${balance ? balance.toString({ decimals: 2 }) : "0.00"} ${stakedAssetType.name}`}
+        endString={currentAction === EvOHM.Unwrap ? "Max" : ""}
+        endStringOnClick={() => balance && setAmount(balance.toString())}
+        inputWidth={`${amount.length > 0 ? amount.length : 1}ch`}
+        disabled={isMutating}
+      />
+    );
+  };
+
+  return (
+    <StyledBox mb={3}>
+      <Tabs
+        centered
+        textColor="primary"
+        aria-label="stake tabs"
+        indicatorColor="primary"
+        key={String(props.isZoomed)}
+        className="stake-tab-buttons"
+        value={currentAction === EvOHM.Wrap ? 0 : 1}
+        //hides the tab underline sliding animation in while <Zoom> is loading
+        TabIndicatorProps={!props.isZoomed ? { style: { display: "none" } } : undefined}
+        onChange={(_, view: number) => setCurrentAction(view === 0 ? EvOHM.Wrap : EvOHM.Unwrap)}
+      >
+        <Tab aria-label="stake-button" label={`get vOHM`} />
+
+        <Tab aria-label="unstake-button" label={`get gOHM`} />
+      </Tabs>
+
+      <Box display="flex" flexDirection="row" width="100%" justifyContent="center" mt="24px">
+        <Box display="flex" flexDirection="column" width="100%" maxWidth="476px">
+          <Box mb="21px">
+            <SwapCollection
+              UpperSwapCard={currentAction === EvOHM.Wrap ? GohmSwapCard() : VohmSwapCard()}
+              LowerSwapCard={currentAction === EvOHM.Wrap ? VohmSwapCard() : GohmSwapCard()}
+              arrowOnClick={() => setCurrentAction(currentAction === EvOHM.Wrap ? EvOHM.Unwrap : EvOHM.Wrap)}
+            />
+          </Box>
+          <Box>
+            <WalletConnectedGuard>
+              <TokenAllowanceGuard
+                tokenAddressMap={contractRouting === "Wrap" ? addresses : { [chain.id]: swapAssetType.address }}
+                spenderAddressMap={GOVERNANCE_VOHM_VAULT_ADDRESSES}
+                approvalText={currentAction === EvOHM.Wrap ? "Approve Wrapping" : "Approve Unwrapping"}
+                approvalPendingText={"Confirming Approval in your wallet"}
+                isVertical
+              >
+                {contractRouting === "Wrap" && (
+                  <PrimaryButton
+                    data-testid="submit-button-vohm"
+                    loading={isMutating}
+                    fullWidth
+                    disabled={isMutating || !amount || amountExceedsBalance || parseFloat(amount) === 0}
+                    onClick={() =>
+                      currentAction === EvOHM.Wrap ? wrapMutation.mutate(amount) : unwrapMutation.mutate(amount)
+                    }
+                  >
+                    {amountExceedsBalance
+                      ? "Amount exceeds balance"
+                      : !amount || parseFloat(amount) === 0
+                      ? "Enter an amount"
+                      : currentAction === EvOHM.Wrap
+                      ? isMutating
+                        ? "Confirming Wrapping in your wallet"
+                        : "Wrap to vOHM"
+                      : isMutating
+                      ? "Confirming Unwrapping in your wallet "
+                      : "Unwrap to gOHM"}
+                  </PrimaryButton>
+                )}
+              </TokenAllowanceGuard>
+            </WalletConnectedGuard>
+          </Box>
+        </Box>
+      </Box>
+    </StyledBox>
+  );
+};

From f655a0b7760a4d0325ba691a075917a25bfff70b Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 15 Nov 2022 08:58:14 -0600
Subject: [PATCH 082/113] fixes most governance state issues, build will
 probably fail until component-library version is fixed

---
 src/helpers/timeUtil.ts                       |   5 +
 src/hooks/useProposal.ts                      |  67 +++++++---
 src/hooks/useProposals.ts                     | 116 +++++++++++++-----
 src/hooks/useVoting.ts                        |   4 +-
 src/views/Governance/ProposalsDashboard.tsx   |   2 +-
 .../components/ProposalPage/ProposalPage.tsx  | 109 +++++++++++-----
 .../components/ActivateVoting.tsx             |  29 +++++
 .../components/PollDetailsTab.tsx             |   2 +
 .../ProposalPage/components/VotesTab.tsx      |   2 +
 9 files changed, 252 insertions(+), 84 deletions(-)
 create mode 100644 src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx

diff --git a/src/helpers/timeUtil.ts b/src/helpers/timeUtil.ts
index 20815714a7..7527e5f148 100644
--- a/src/helpers/timeUtil.ts
+++ b/src/helpers/timeUtil.ts
@@ -13,6 +13,10 @@ export function prettifySeconds(seconds: number, resolution?: string) {
     return "";
   }
 
+  if (seconds < 60) {
+    return Math.round(seconds) + " second" + (seconds == 1 ? "" : "s");
+  }
+
   const d = Math.floor(seconds / (3600 * 24));
   const h = Math.floor((seconds % (3600 * 24)) / 3600);
   const m = Math.floor((seconds % 3600) / 60);
@@ -27,6 +31,7 @@ export function prettifySeconds(seconds: number, resolution?: string) {
 
   let result = dDisplay + hDisplay + mDisplay;
   if (mDisplay === "") {
+    // remove the trailing ", " after hr(s)
     result = result.slice(0, result.length - 2);
   }
 
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 1a08933b94..e7e85e8146 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -12,7 +12,7 @@ import {
   parseProposalContent,
   parseProposalState,
   ProposalAction,
-  timeRemaining,
+  useActivationTimelines,
   useGetProposalURIFromEvent,
 } from "src/hooks/useProposals";
 import { useVotingCollateralMinimum, useVotingCollateralRequirement, useVotingSupply } from "src/hooks/useVoting";
@@ -51,10 +51,12 @@ export const useProposal = (instructionsIndex: number) => {
     },
   );
 
+  const { data: activationTimelines } = useActivationTimelines();
+
   const query = useQuery<IAnyProposal, Error>(
     queryKey,
     async () => {
-      if (metadata === undefined) {
+      if (metadata === undefined || activationTimelines === undefined) {
         // this should be impossible if the enabled block checks !!metadata, too
         // but it's necessary to fix the metadata | undefined typing in the rest of this query
         throw new Error("something went wrong with proposalMetadata.");
@@ -64,26 +66,37 @@ export const useProposal = (instructionsIndex: number) => {
         const content: string = proposalContent.description;
         const discussionURL: string = proposalContent.external_url;
         /**
-         * submissionTimestamp as a Unix Time from the contract
+         * submissionTimestamp as a JS Time (milliseconds) from the contract (was a unix time (seconds) on the contract)
+         * NOTE(appleseed): multiply unixTimestamps by 1000 to convert to JS Time from Unix Time
          */
-        const submissionTimestamp = parseBigNumber(metadata.submissionTimestamp, 0);
-        const activationTimestamp = parseBigNumber(metadata.activationTimestamp, 0);
+        const submissionTimestamp = parseBigNumber(metadata.submissionTimestamp, 0) * 1000;
+        const activationTimestamp = parseBigNumber(metadata.activationTimestamp, 0) * 1000;
+        const activationTimelock = parseBigNumber(activationTimelines.activationTimelock, 0) * 1000;
+        const activationDeadline = parseBigNumber(activationTimelines.activationDeadline, 0) * 1000;
+        const votingPeriod = parseBigNumber(activationTimelines.votingPeriod, 0) * 1000;
         const isActive = activationTimestamp !== 0;
-        const proposalState = parseProposalState({ isActive });
-        const endorsements = parseBigNumber(metadata.totalRegisteredVotes, 3);
-        const yesVotes = parseBigNumber(metadata.yesVotes, 3);
-        const noVotes = parseBigNumber(metadata.noVotes, 3);
-        const unixTimeRemaining = timeRemaining({ state: proposalState, submissionTimestamp });
-        const jsTimeRemaining = unixTimeRemaining ? unixTimeRemaining * 1000 : undefined;
+        const earliestActivation = submissionTimestamp + activationTimelock;
+        const activationExpiry = submissionTimestamp + activationDeadline;
+        const votingExpiry = activationTimestamp + votingPeriod;
+        const proposalState = parseProposalState({
+          activationTimestamp,
+          earliestActivation,
+          activationExpiry,
+          votingExpiry,
+        });
+        const endorsements = parseBigNumber(metadata.totalRegisteredVotes, 18);
+        const yesVotes = parseBigNumber(metadata.yesVotes, 18);
+        const noVotes = parseBigNumber(metadata.noVotes, 18);
+
         const currentProposal = {
           id: instructionsIndex,
           title: proposalContent.name,
           submitter: metadata.submitter,
-          // NOTE(appleseed): multiply submissionTimestamp by 1000 to convert to JS Time from Unix Time
-          submissionTimestamp: submissionTimestamp * 1000,
-          timeRemaining: jsTimeRemaining,
+          submissionTimestamp: submissionTimestamp,
+          timeRemaining: proposalState.jsTimeRemaining,
+          nextDeadline: proposalState.nextDeadline,
           isActive: isActive,
-          state: proposalState,
+          state: proposalState.status,
           endorsements,
           yesVotes,
           noVotes,
@@ -95,7 +108,14 @@ export const useProposal = (instructionsIndex: number) => {
       }
     },
     {
-      enabled: !!chain && !!archiveProvider && !!contract && proposalURI.length > 0 && !!metadata && metadataIsFetched,
+      enabled:
+        !!chain &&
+        !!archiveProvider &&
+        !!contract &&
+        proposalURI.length > 0 &&
+        !!metadata &&
+        metadataIsFetched &&
+        !!activationTimelines,
     },
   );
 
@@ -134,7 +154,6 @@ export interface ISubmitProposal {
  * # from bophades repo
  * forge create src/policies/Governance.sol:Governance --constructor-args 0x3B294580Fcf1F60B94eca4f4CE78A2f52D23cC83 --rpc-url https://eth-goerli.g.alchemy.com/v2/_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC --private-key yours
  *
- * TODO(appleseed) must APPROVE vOHM to be spent on Gov Contract: https://goerli.etherscan.io/tx/0x687575662aaf247992c47599dfef947bbe64f2022ee59df6e065e72e194b07cf
  */
 export const useSubmitProposal = () => {
   const { chain = { id: 1 } } = useNetwork();
@@ -212,3 +231,17 @@ export const useGetInstructions = (proposalId: number) => {
     { enabled: !!chain && !!chain.id && !!contract && !!proposalId },
   );
 };
+
+export const useActivateProposal = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data: signer } = useSigner();
+
+  // TODO(appleseed): update ANY types below
+  return useMutation<any, Error, number>(async (proposalId: number) => {
+    if (!signer) throw new Error(`Signer is not set`);
+
+    // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
+    await contract.connect(signer).activateProposal(proposalId);
+  });
+};
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 277f14fc28..3b73d7de86 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -38,7 +38,8 @@ export interface Proposal {
 }
 
 export interface IAnyProposal extends Omit<Proposal, "isActive"> {
-  timeRemaining?: number | undefined;
+  timeRemaining: number;
+  nextDeadline: number;
   isActive: boolean | undefined;
 }
 
@@ -60,7 +61,14 @@ export interface IProposalContent {
  * - all other states would be stored off-chain, either from the forum
  * - TODO(appleseed): how does a proposal get to "closed" state?
  */
-export type PStatus = "active" | "endorsement" | "discussion" | "draft" | "closed";
+export type PStatus =
+  | "discussion" // created but not ready to activate
+  | "ready to activate" // ready to activate for voting
+  | "expired activation" // missed activation window
+  | "active" // active for voting
+  | "executed" // passed & executed / implemented
+  | "draft"
+  | "closed";
 export interface IProposalState {
   state: PStatus;
 }
@@ -73,37 +81,87 @@ export const unixDays = (numDays: number) => {
   return numDays * 24 * 60 * 60;
 };
 
+interface IActivationTimelines {
+  activationDeadline: ethers.BigNumber;
+  activationTimelock: ethers.BigNumber;
+  votingPeriod: ethers.BigNumber;
+}
+
+/** time in seconds */
+export const useActivationTimelines = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  return useQuery<IActivationTimelines, Error>(
+    ["GetActivationTimelines", chain.id],
+    async () => {
+      const activationDeadline = await contract.ACTIVATION_DEADLINE();
+      const activationTimelock = await contract.ACTIVATION_TIMELOCK();
+      const votingPeriod = await contract.VOTING_PERIOD();
+
+      return {
+        activationDeadline,
+        activationTimelock,
+        votingPeriod,
+      };
+    },
+    { enabled: !!chain && !!chain.id && !!contract },
+  );
+};
+
 /**
- * timeRemaining as a Unix Time from the contract
- * @param submissionTimestamp should be a Unix Time (1/1000 of JS Time)
- * @returns a Unix Time unless the proposal is not active or endorsements status, then returns undefined (no expiration)
+ * All parameters & return values are js timestamps (milliseconds).
  */
-export const timeRemaining = ({
-  state,
-  submissionTimestamp,
+export const parseProposalState = ({
+  activationTimestamp,
+  earliestActivation,
+  activationExpiry,
+  votingExpiry,
 }: {
-  state: PStatus;
-  submissionTimestamp: number;
-}): number | undefined => {
-  if (state === "active") {
-    // TODO(appleseed): setup a config to make these duration requirements (from the contract) easily modifiable
-    return submissionTimestamp + unixDays(7);
-  } else if (state === "endorsement") {
-    return submissionTimestamp + unixDays(14);
+  activationTimestamp: number;
+  earliestActivation: number;
+  activationExpiry: number;
+  votingExpiry: number;
+}): { status: PStatus; jsTimeRemaining: number; nextDeadline: number } => {
+  const now = Date.now();
+  let status: PStatus;
+  let jsTimeRemaining: number;
+  let nextDeadline: number;
+
+  if (now < earliestActivation) {
+    // "discussion" // created but not ready to activate
+    // block.timestamp < proposal.submissionTimestamp + ACTIVATION_TIMELOCK
+    status = "discussion";
+    jsTimeRemaining = earliestActivation - now;
+    nextDeadline = earliestActivation;
+  } else if (now < activationExpiry && activationTimestamp === 0) {
+    // | "ready to activate" // ready to activate for voting
+    // block.timestamp < proposal.submissionTimestamp + ACTIVATION_DEADLINE
+    status = "ready to activate";
+    jsTimeRemaining = activationExpiry - now;
+    nextDeadline = activationExpiry;
+  } else if (now >= activationExpiry && activationTimestamp === 0) {
+    // | "expired activation" // missed activation window
+    // block.timestamp > proposal.submissionTimestamp + ACTIVATION_DEADLINE && activationTimestamp === 0
+    status = "expired activation";
+    jsTimeRemaining = 0;
+    nextDeadline = activationExpiry;
+  } else if (activationTimestamp > 0 && now < votingExpiry) {
+    status = "active";
+    jsTimeRemaining = votingExpiry - now;
+    nextDeadline = votingExpiry;
   } else {
-    return undefined;
+    status = "closed";
+    jsTimeRemaining = 0;
+    nextDeadline = votingExpiry;
   }
-};
 
-export const parseProposalState = ({ isActive }: { isActive: boolean | undefined }): PStatus => {
-  switch (isActive) {
-    case true:
-      return "active";
-    case false:
-      return "endorsement";
-    default:
-      return "discussion";
-  }
+  // | "executed" // passed & executed / implemented
+
+  return {
+    status,
+    jsTimeRemaining,
+    nextDeadline,
+  };
 };
 
 /**
@@ -225,12 +283,10 @@ export const filterStatement = ({ proposal, filters }: { proposal: Proposal; fil
       case "active":
         result = proposal.isActive;
         break;
-      case "endorsement":
-        result = proposal.isActive === false;
-        break;
       case "discussion":
       case "draft":
       case "closed":
+        result = proposal.isActive === false;
         break;
       default:
         console.log(`Sorry, we are out of somethings wrong.`);
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index f709a54528..7a109aba5d 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -112,9 +112,9 @@ export const useGetVotesCastByVoter = (
  */
 export const useUserVote = (proposalId: number, voterAddress: string) => {
   const { data: votesCastEvents, isLoading, isFetched } = useGetVotesCastForProposalAndVoter(proposalId, voterAddress);
-  let thisVote: DecimalBigNumber = new DecimalBigNumber("0", 3);
+  let thisVote: DecimalBigNumber = new DecimalBigNumber("0", 18);
   if (isFetched && !!votesCastEvents && votesCastEvents?.length > 0) {
-    thisVote = new DecimalBigNumber(votesCastEvents[0].args.userVotes, 3);
+    thisVote = new DecimalBigNumber(votesCastEvents[0].args.userVotes, 18);
   }
   return {
     data: thisVote,
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 38f24450d1..66f9aafc0f 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -90,7 +90,7 @@ const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
               proposalTitle={proposal?.title}
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
-              voteEndDate={proposal?.timeRemaining ? new Date(proposal.timeRemaining) : new Date()}
+              voteEndDate={new Date(proposal?.nextDeadline)}
               quorum={0}
               votesAgainst={proposal?.noVotes}
               votesFor={proposal?.yesVotes}
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index d264410c95..1de3bef36c 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -12,9 +12,17 @@ import ActionButtons from "src/views/Governance/components/ActionButtons";
 import { BackButton } from "src/views/Governance/components/BackButton";
 import { PollDetailsTab } from "src/views/Governance/components/ProposalPage/components/PollDetailsTab";
 import { VotesTab } from "src/views/Governance/components/ProposalPage/components/VotesTab";
-import { NULL_PROPOSAL } from "src/views/Governance/constants";
 import { toCapitalCase } from "src/views/Governance/helpers";
 
+const dateFormat = new Intl.DateTimeFormat([], {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+  timeZoneName: "short",
+  hour: "numeric",
+  minute: "numeric",
+});
+
 export const ProposalPage: FC = () => {
   const { passedId } = useParams();
   const proposalId = useMemo(() => {
@@ -22,19 +30,23 @@ export const ProposalPage: FC = () => {
     return parseInt(passedId);
   }, [passedId]);
 
-  const _useProposal = useProposal(proposalId);
-  const proposal: IAnyProposal = useMemo(() => {
-    if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
-    return _useProposal.data;
-  }, [_useProposal]);
+  // const _useProposal = useProposal(proposalId);
+  // const proposal: IAnyProposal = useMemo(() => {
+  //   if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
+  //   return _useProposal.data;
+  // }, [_useProposal]);
+
+  const { data: proposal, isLoading } = useProposal(proposalId);
   return (
     <>
-      <Routes>
-        <Route path="/" element={<PageWrapper proposal={proposal} />}>
-          <Route index element={<PollDetailsTab proposal={proposal} />} />
-          <Route path="votes" element={<VotesTab proposal={proposal} />} />
-        </Route>
-      </Routes>
+      {!isLoading && !!proposal && (
+        <Routes>
+          <Route path="/" element={<PageWrapper proposal={proposal} />}>
+            <Route index element={<PollDetailsTab proposal={proposal} />} />
+            <Route path="votes" element={<VotesTab proposal={proposal} />} />
+          </Route>
+        </Routes>
+      )}
     </>
   );
 };
@@ -70,26 +82,67 @@ export const PageWrapper = (props: { proposal: IAnyProposal }) => (
   </Box>
 );
 
+const TimeRemaining = ({ proposal }: { proposal: IAnyProposal }) => {
+  console.log("timeRemaining const");
+  const theme = useTheme();
+  console.log("after useTheme");
+  let boundedTimeRemaining = 0;
+  // const earliest = 1668456876000
+  // const deadline = 1668456996000
+  // const now = 1668456906000; // must be activated within 1 minute
+  // const now = 1668456816000; // can be activated in 3 minutes
+  const now = Date.now();
+  if (proposal.timeRemaining && proposal.timeRemaining > 0) {
+    boundedTimeRemaining = proposal.timeRemaining / 1000;
+  }
+
+  console.log(
+    "timeremaining",
+    proposal.id,
+    "now",
+    now,
+    proposal.state,
+    proposal.nextDeadline,
+    proposal.timeRemaining,
+    boundedTimeRemaining,
+  );
+  return (
+    <>
+      <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
+      <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+        {proposal.state === "expired activation"
+          ? `Activation Period Expired at ${dateFormat.format(proposal.nextDeadline)}`
+          : proposal.state === "discussion"
+          ? `Can be activated in ${prettifySeconds(boundedTimeRemaining)}`
+          : proposal.state === "ready to activate"
+          ? `Must be activated within ${prettifySeconds(boundedTimeRemaining)}`
+          : proposal.state === "active" && boundedTimeRemaining == 0
+          ? `Vote Finished at ${dateFormat.format(proposal.nextDeadline)}`
+          : proposal.state === "active"
+          ? `Ends in ${prettifySeconds(boundedTimeRemaining)}`
+          : proposal.state === "closed"
+          ? `Expired at ${dateFormat.format(proposal.nextDeadline)}`
+          : `Expired at ${dateFormat.format(proposal.nextDeadline)}`}
+      </Typography>
+    </>
+  );
+};
+
 const ProposalHeader = (props: { proposal: IAnyProposal }) => {
   const { proposal } = props;
   const theme = useTheme();
-  const dateFormat = new Intl.DateTimeFormat([], {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-    timeZoneName: "short",
-    hour: "numeric",
-    minute: "numeric",
-  });
+
   const mapStatus = (status: PStatus) => {
     switch (status) {
       case "active":
         return "success" as OHMChipProps["template"];
-      case "endorsement":
+      case "executed":
         return "purple" as OHMChipProps["template"];
       case "discussion":
+      case "ready to activate":
         return "userFeedback" as OHMChipProps["template"];
       case "closed":
+      case "expired activation":
         return "gray" as OHMChipProps["template"];
       case "draft":
         return "darkGray" as OHMChipProps["template"];
@@ -97,11 +150,6 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
   };
   const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
 
-  let boundedTimeRemaining = 0;
-  if (proposal.timeRemaining && proposal.timeRemaining - Date.now() > 0) {
-    boundedTimeRemaining = (proposal.timeRemaining - Date.now()) / 1000;
-  }
-
   return (
     <Grid container direction="column" pt="9px" mb="9px">
       <Grid item>
@@ -118,14 +166,7 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
       <Box display="flex" flexDirection="row" mt="4px">
         <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
         <Box pl="9px" display="flex" alignItems="center">
-          {proposal.timeRemaining && (
-            <>
-              <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
-              <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
-                {boundedTimeRemaining == 0 ? `Vote Finished` : `Ends in ${prettifySeconds(boundedTimeRemaining)}`}
-              </Typography>
-            </>
-          )}
+          {proposal && <TimeRemaining proposal={proposal} />}
         </Box>
       </Box>
     </Grid>
diff --git a/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx b/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx
new file mode 100644
index 0000000000..23fb84bf7a
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx
@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import { PrimaryButton } from "@olympusdao/component-library";
+import { useActivateProposal } from "src/hooks/useProposal";
+import { ProposalTabProps } from "src/views/Governance/interfaces";
+import { useAccount } from "wagmi";
+
+export const ActivateVoting = ({ proposal }: ProposalTabProps) => {
+  const { address, isConnected } = useAccount();
+  const connectedWalletIsProposer =
+    isConnected && !!address && proposal.submitter.toLowerCase() === address.toLowerCase();
+  const proposalStateIsCorrect = proposal.state === "ready to activate" && Date.now() < proposal.nextDeadline;
+  const proposalStatesToShow = ["ready to activate", "discussion"].includes(proposal.state);
+  const activateProposal = useActivateProposal();
+  const handleActivate = () => {
+    activateProposal.mutate(proposal.id);
+  };
+
+  return (
+    <>
+      {connectedWalletIsProposer && proposalStatesToShow && (
+        <Box display="flex" flexDirection="row" justifyContent="center">
+          <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposalStateIsCorrect} onClick={handleActivate}>
+            Activate for Voting
+          </PrimaryButton>
+        </Box>
+      )}
+    </>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 4650639a70..9d11d02ffb 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -3,6 +3,7 @@ import { Paper, TertiaryButton } from "@olympusdao/component-library";
 import { useGetInstructions } from "src/hooks/useProposal";
 import { ProposalAction } from "src/hooks/useProposals";
 import { MarkdownPreview } from "src/views/Governance/components/MarkdownPreview";
+import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useNetwork } from "wagmi";
 
@@ -21,6 +22,7 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
   return (
     <Paper enableBackground fullWidth>
       <Box display="flex" flexDirection="column">
+        <ActivateVoting proposal={proposal} />
         <MarkdownPreview content={proposal.content} />
 
         <Box display="flex" flexDirection="row" justifyContent="flex-end">
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 0bf1a1d2a2..ff9d5aa55d 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -26,6 +26,7 @@ import { formatBalance } from "src/helpers";
 import { IAnyProposal } from "src/hooks/useProposals";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { useUserVote, useVote, useVotingSupply } from "src/hooks/useVoting";
+import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
@@ -49,6 +50,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
       <Box sx={{ marginTop: "24px" }}></Box>
       <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
         <Box display="flex" flexDirection="column">
+          <ActivateVoting proposal={proposal} />
           <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
             Cast Your Vote
           </Typography>

From 000aae1c06b865cf5f0979e72cabec35738f7501 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 15 Nov 2022 09:29:59 -0600
Subject: [PATCH 083/113] bump component-library for governance

---
 package.json |  2 +-
 yarn.lock    | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 20700021dc..6cfb1c7fab 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@mui/material": "^5.10.5",
     "@mui/system": "^5.10.8",
     "@mui/x-data-grid": "^5.17.7",
-    "@olympusdao/component-library": "^2.2.2-alpha.20",
+    "@olympusdao/component-library": "^2.2.2-alpha.21",
     "@rainbow-me/rainbowkit": "^0.7.4",
     "@reduxjs/toolkit": "^1.8.5",
     "@tanstack/react-query": "^4.2.3",
diff --git a/yarn.lock b/yarn.lock
index a85aecc81c..212e88d36d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3284,12 +3284,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@olympusdao/component-library@^2.2.2-alpha.20":
-  version "2.2.2-alpha.20"
-  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-alpha.20.tgz#25e1c28c7c46d67254e11475b2d41a1f0ab57fcb"
-  integrity sha512-602lXjaH+LHMKXPyH64KhsUboRUg3yuSUGdWCfq8WlQAmsaE0jSKoJ+lLnY98+8mr1GR6I+wjyJyYeTSOaavsQ==
+"@olympusdao/component-library@^2.2.2-alpha.21":
+  version "2.2.2-gov.0"
+  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-gov.0.tgz#b5d6d6b8c57ecd53e8431897525c5f45886f9bf0"
+  integrity sha512-qBsM4RU4rzU6kdnEACfeTMzI7vH7iXeBX469vepbkv39SG1eZ7UEcZeO3XIwDdN4s+eHqc1h2Ssiyi63flO5+w==
   dependencies:
-    "@react-spring/web" "^9.5.5"
+    "@react-spring/web" "^9.4.5"
 
 "@peculiar/asn1-schema@^2.1.6":
   version "2.3.0"
@@ -3444,7 +3444,7 @@
   resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.5.5.tgz#c8e94f1b9232ca7cb9d860ea67762ec401b1de14"
   integrity sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg==
 
-"@react-spring/web@^9.5.5":
+"@react-spring/web@^9.4.5":
   version "9.5.5"
   resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.5.5.tgz#d416abc591aaed930401f0c98a991a8c5b90c382"
   integrity sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==

From ed0058ff144c3b163adbbb670f276af823abdac7 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 15 Nov 2022 10:15:38 -0600
Subject: [PATCH 084/113] force higher component-library version

---
 package.json |  2 +-
 yarn.lock    | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 6cfb1c7fab..f515401394 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@mui/material": "^5.10.5",
     "@mui/system": "^5.10.8",
     "@mui/x-data-grid": "^5.17.7",
-    "@olympusdao/component-library": "^2.2.2-alpha.21",
+    "@olympusdao/component-library": "2.2.2-alpha.22",
     "@rainbow-me/rainbowkit": "^0.7.4",
     "@reduxjs/toolkit": "^1.8.5",
     "@tanstack/react-query": "^4.2.3",
diff --git a/yarn.lock b/yarn.lock
index 212e88d36d..6661286537 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3284,12 +3284,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@olympusdao/component-library@^2.2.2-alpha.21":
-  version "2.2.2-gov.0"
-  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-gov.0.tgz#b5d6d6b8c57ecd53e8431897525c5f45886f9bf0"
-  integrity sha512-qBsM4RU4rzU6kdnEACfeTMzI7vH7iXeBX469vepbkv39SG1eZ7UEcZeO3XIwDdN4s+eHqc1h2Ssiyi63flO5+w==
+"@olympusdao/component-library@2.2.2-alpha.22":
+  version "2.2.2-alpha.22"
+  resolved "https://registry.yarnpkg.com/@olympusdao/component-library/-/component-library-2.2.2-alpha.22.tgz#3e67c123c79721b3759d911daddfcf7a61332328"
+  integrity sha512-Pm3MLIXQ1eu2ywaC8PZA+enjKWyX4Xq3S8nrkrCRfnZWHw8ll09hffOTh341cXAYccVo6S77UonG03dQVoHq4w==
   dependencies:
-    "@react-spring/web" "^9.4.5"
+    "@react-spring/web" "^9.5.5"
 
 "@peculiar/asn1-schema@^2.1.6":
   version "2.3.0"
@@ -3444,7 +3444,7 @@
   resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.5.5.tgz#c8e94f1b9232ca7cb9d860ea67762ec401b1de14"
   integrity sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg==
 
-"@react-spring/web@^9.4.5":
+"@react-spring/web@^9.5.5":
   version "9.5.5"
   resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.5.5.tgz#d416abc591aaed930401f0c98a991a8c5b90c382"
   integrity sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==

From 080eb42ff04f6c7e2f46cdf16c5344ab05e5c156 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 1 Dec 2022 11:21:21 -0600
Subject: [PATCH 085/113] yarn.lock changes

---
 yarn.lock | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 6610173847..4a0100b4a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -121,6 +121,15 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.5.tgz#cb25abee3178adf58d6814b68517c62bdbfdda95"
+  integrity sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==
+  dependencies:
+    "@babel/types" "^7.20.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -348,6 +357,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.3.tgz#8dd36d17c53ff347f9e55c328710321b49479a9a"
   integrity sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==
 
+"@babel/parser@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
+  integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==
+
 "@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
@@ -791,6 +805,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.19.0":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.5.tgz#78eb244bea8270fdda1ef9af22a5d5e5b7e57133"
+  integrity sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.5"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.5"
+    "@babel/types" "^7.20.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.16.8", "@babel/types@^7.18.10", "@babel/types@^7.18.13", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.20.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.0.tgz#52c94cf8a7e24e89d2a194c25c35b17a64871479"
@@ -818,6 +848,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.5.tgz#e206ae370b5393d94dfd1d04cd687cace53efa84"
+  integrity sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"

From 2c86b01f58b602f72f08eb61a02591ddb77a6c06 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 1 Dec 2022 11:25:36 -0600
Subject: [PATCH 086/113] remove transalations

---
 src/locales/translations | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 src/locales/translations

diff --git a/src/locales/translations b/src/locales/translations
deleted file mode 160000
index f72c03b4b1..0000000000
--- a/src/locales/translations
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit f72c03b4b16ee0c75286bcf9ce025d1f8fdd61da

From 551e8ff0d6e24517a54c913987371780f8ac6fa3 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 1 Dec 2022 12:40:40 -0600
Subject: [PATCH 087/113] update all REACT_APP_ to VITE_

---
 .env.example                                  | 36 ++++++-------
 .gitpod.yml                                   |  2 +-
 README.md                                     |  2 +-
 .../environment/Environment/Environment.ts    | 50 +++++++++----------
 .../Environment/Environment.unit.test.ts      | 12 ++---
 src/hooks/useArchiveNodeProvider.ts           |  1 +
 tests/e2e/testHelpers.ts                      |  8 +--
 tests/unit/launcher.js                        |  2 +-
 8 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/.env.example b/.env.example
index aa8c584c14..9578af34b2 100644
--- a/.env.example
+++ b/.env.example
@@ -1,44 +1,44 @@
 # Required
 # Covalent (https://www.covalenthq.com/)
-REACT_APP_COVALENT_API_KEY=""
+VITE_COVALENT_API_KEY=""
 
 # Optional
 # Toggle to "true" to use Olympus Give features
-REACT_APP_GIVE_ENABLED="true"
+VITE_GIVE_ENABLED="true"
 # This should be toggled to "true" if you need to use the mock sOHM contract
 # (which allows for on-demand rebasing)
-REACT_APP_MOCK_SOHM_ENABLED="false"
+VITE_MOCK_SOHM_ENABLED="false"
 
 # Optional
 # Google Analytics (https://analytics.google.com/)
-REACT_APP_GOOGLE_ANALYTICS_API_KEY=""
+VITE_GOOGLE_ANALYTICS_API_KEY=""
 
 # Optional
 # If you run your own node, you can provide connection url(s) to that node.
 # To provide multiple urls for a network, please seperate them with a space.
-REACT_APP_ETHEREUM_NODE_URL=""
-REACT_APP_ETHEREUM_TESTNET_NODE_URL=""
+VITE_ETHEREUM_NODE_URL=""
+VITE_ETHEREUM_TESTNET_NODE_URL=""
 
-REACT_APP_FANTOM_NODE_URL=""
-REACT_APP_FANTOM_TESTNET_NODE_URL=""
+VITE_FANTOM_NODE_URL=""
+VITE_FANTOM_TESTNET_NODE_URL=""
 
-REACT_APP_POLYGON_NODE_URL=""
-REACT_APP_POLYGON_TESTNET_NODE_URL=""
+VITE_POLYGON_NODE_URL=""
+VITE_POLYGON_TESTNET_NODE_URL=""
 
 # Olympus Give
 # These 2 settings should be toggled to "true" if you want to use Olympus Give features
-REACT_APP_GIVE_ENABLED="true"
-REACT_APP_GIVE_GRANTS_ENABLED="true"
+VITE_GIVE_ENABLED="true"
+VITE_GIVE_GRANTS_ENABLED="true"
 
 # This should be toggled to "true" if you need to use the mock sOHM contract
 # (which allows for on-demand rebasing)
-REACT_APP_MOCK_SOHM_ENABLED="false"
+VITE_MOCK_SOHM_ENABLED="false"
 
-REACT_APP_ARBITRUM_NODE_URL=""
-REACT_APP_ARBITRUM_TESTNET_NODE_URL=""
+VITE_ARBITRUM_NODE_URL=""
+VITE_ARBITRUM_TESTNET_NODE_URL=""
 
-REACT_APP_AVALANCHE_NODE_URL=""
-REACT_APP_AVALANCHE_TESTNET_NODE_URL=""
+VITE_AVALANCHE_NODE_URL=""
+VITE_AVALANCHE_TESTNET_NODE_URL=""
 
 # Optional - for On-Chain Governance - get from https://web3.storage/tokens/
-REACT_APP_WEB3_STORAGE_KEY=""
\ No newline at end of file
+VITE_WEB3_STORAGE_KEY=""
\ No newline at end of file
diff --git a/.gitpod.yml b/.gitpod.yml
index 47872aeab2..e1f39b1319 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -16,7 +16,7 @@ tasks:
       if [ ! -f .env ]; then cp ".env.example" ".env"; fi
       yarn && \
       gp sync-done install
-    command: REACT_APP_PROVIDER=$(gp url 8545) yarn start
+    command: VITE_PROVIDER=$(gp url 8545) yarn start
   - name: Test
     init: gp sync-await install
     command: |
diff --git a/README.md b/README.md
index c4d35c6f52..090707f963 100644
--- a/README.md
+++ b/README.md
@@ -324,7 +324,7 @@ Each PR into master will get its own custom URL that is visible on the PR page.
 
 ### Feature Flags
 
-- Give: by default it is enabled. It can be disabled by setting the `REACT_APP_GIVE_ENABLED` environment variable to "false".
+- Give: by default it is enabled. It can be disabled by setting the `VITE_GIVE_ENABLED` environment variable to "false".
 
 ## Dashboard
 
diff --git a/src/helpers/environment/Environment/Environment.ts b/src/helpers/environment/Environment/Environment.ts
index 648b42341e..7ea4114187 100644
--- a/src/helpers/environment/Environment/Environment.ts
+++ b/src/helpers/environment/Environment/Environment.ts
@@ -20,28 +20,28 @@ export class Environment {
   public static getGoogleAnalyticsApiKey = () =>
     this._get({
       first: true,
-      key: "REACT_APP_GOOGLE_ANALYTICS_API_KEY",
+      key: "VITE_GOOGLE_ANALYTICS_API_KEY",
       err: "Please provide an Google Analytics API key in your .env file",
     });
 
   public static getGA4ApiKey = () =>
     this._get({
       first: true,
-      key: "REACT_APP_GA_4_API_KEY",
+      key: "VITE_GA_4_API_KEY",
       err: "Please provide an Google Analytics 4 API key in your .env file",
     });
 
   public static getCovalentApiKey = () =>
     this._get({
       first: true,
-      key: "REACT_APP_COVALENT_API_KEY",
+      key: "VITE_COVALENT_API_KEY",
       err: "Please provide an API key for Covalent (https://www.covalenthq.com) in your .env file",
     });
 
   public static getZapperApiKey = () =>
     this._get({
       first: true,
-      key: "REACT_APP_ZAPPER_API",
+      key: "VITE_ZAPPER_API",
       // NOTE: default Zapper API key. Won't work in production with any real volume of usage.
       fallback: "96e0cc51-a62e-42ca-acee-910ea7d2a241",
     });
@@ -49,7 +49,7 @@ export class Environment {
   public static getWeb3StorageKey = () =>
     this._get({
       first: true,
-      key: "REACT_APP_WEB3_STORAGE_KEY",
+      key: "VITE_WEB3_STORAGE_KEY",
       err: "Please provide an Web3.Storage API key in your .env file",
     });
 
@@ -60,7 +60,7 @@ export class Environment {
   public static getStagingFlag = (): string =>
     this._get({
       first: true,
-      key: "REACT_APP_STAGING_ENV",
+      key: "VITE_STAGING_ENV",
       fallback: "false",
     });
 
@@ -68,13 +68,13 @@ export class Environment {
     switch (networkId) {
       case NetworkId.MAINNET:
         return this._get({
-          key: `REACT_APP_ETHEREUM_ARCHIVE_NODE_URL`,
-          err: "Please provide a REACT_APP_ETHEREUM_ARCHIVE_NODE_URL for governance to function properly",
+          key: `VITE_ETHEREUM_ARCHIVE_NODE_URL`,
+          err: "Please provide a VITE_ETHEREUM_ARCHIVE_NODE_URL for governance to function properly",
         });
       case NetworkId.TESTNET_GOERLI:
         return this._get({
-          key: `REACT_APP_ETHEREUM_TESTNET_ARCHIVE_NODE_URL`,
-          err: "Please provide a REACT_APP_ETHEREUM_TESTNET_ARCHIVE_NODE_URL for governance to function properly",
+          key: `VITE_ETHEREUM_TESTNET_ARCHIVE_NODE_URL`,
+          err: "Please provide a VITE_ETHEREUM_TESTNET_ARCHIVE_NODE_URL for governance to function properly",
         });
     }
   };
@@ -83,78 +83,78 @@ export class Environment {
     switch (networkId) {
       case NetworkId.MAINNET:
         return this._get({
-          key: `REACT_APP_ETHEREUM_NODE_URL`,
+          key: `VITE_ETHEREUM_NODE_URL`,
           fallback: "https://rpc.ankr.com/eth",
         });
       case NetworkId.TESTNET_GOERLI:
         return this._get({
-          key: `REACT_APP_ETHEREUM_TESTNET_NODE_URL`,
+          key: `VITE_ETHEREUM_TESTNET_NODE_URL`,
           fallback: "https://rpc.ankr.com/eth_goerli",
         });
       case NetworkId.ARBITRUM:
         return this._get({
-          key: `REACT_APP_ARBITRUM_NODE_URL`,
+          key: `VITE_ARBITRUM_NODE_URL`,
           fallback: "https://rpc.ankr.com/arbitrum",
         });
       case NetworkId.ARBITRUM_TESTNET:
         return this._get({
-          key: `REACT_APP_ARBITRUM_TESTNET_NODE_URL`,
+          key: `VITE_ARBITRUM_TESTNET_NODE_URL`,
           fallback: "https://arb-rinkeby.g.alchemy.com/v2/_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC",
         });
       case NetworkId.AVALANCHE:
         return this._get({
-          key: `REACT_APP_AVALANCHE_NODE_URL`,
+          key: `VITE_AVALANCHE_NODE_URL`,
           fallback: "https://rpc.ankr.com/avalanche",
         });
       case NetworkId.AVALANCHE_TESTNET:
         return this._get({
-          key: `REACT_APP_AVALANCHE_TESTNET_NODE_URL`,
+          key: `VITE_AVALANCHE_TESTNET_NODE_URL`,
           fallback: "https://rpc.ankr.com/avalanche_fuji",
         });
       case NetworkId.POLYGON:
         return this._get({
-          key: `REACT_APP_POLYGON_NODE_URL`,
+          key: `VITE_POLYGON_NODE_URL`,
           fallback: "https://rpc.ankr.com/polygon",
         });
       case NetworkId.POLYGON_TESTNET:
         return this._get({
-          key: `REACT_APP_POLYGON_TESTNET_NODE_URL`,
+          key: `VITE_POLYGON_TESTNET_NODE_URL`,
           fallback: "https://rpc.ankr.com/polygon_mumbai",
         });
       case NetworkId.FANTOM:
         return this._get({
-          key: `REACT_APP_FANTOM_NODE_URL`,
+          key: `VITE_FANTOM_NODE_URL`,
           fallback: "https://rpc.ankr.com/fantom/",
         });
       case NetworkId.FANTOM_TESTNET:
         return this._get({
-          key: `REACT_APP_FANTOM_TESTNET_NODE_URL`,
+          key: `VITE_FANTOM_TESTNET_NODE_URL`,
           fallback: "https://rpc.ankr.com/fantom_testnet",
         });
       case NetworkId.OPTIMISM:
         return this._get({
-          key: `REACT_APP_OPTIMISM_NODE_URL`,
+          key: `VITE_OPTIMISM_NODE_URL`,
           fallback: "https://rpc.ankr.com/optimism",
         });
       case NetworkId.OPTIMISM_TESTNET:
         return this._get({
-          key: `REACT_APP_OPTIMISM_TESTNET_NODE_URL`,
+          key: `VITE_OPTIMISM_TESTNET_NODE_URL`,
           fallback: "https://rpc.ankr.com/optimism_testnet",
         });
       case NetworkId.BOBA:
         return this._get({
-          key: `REACT_APP_BOBA_NODE_URL`,
+          key: `VITE_BOBA_NODE_URL`,
           fallback: "https://mainnet.boba.network	",
         });
       case NetworkId.BOBA_TESTNET:
         return this._get({
-          key: `REACT_APP_BOBA_TESTNET_NODE_URL`,
+          key: `VITE_BOBA_TESTNET_NODE_URL`,
           fallback: "https://rinkeby.boba.network/",
         });
     }
   };
 
   public static isWalletNewsEnabled() {
-    return this.env.REACT_APP_DISABLE_NEWS !== "true";
+    return this.env.VITE_DISABLE_NEWS !== "true";
   }
 }
diff --git a/src/helpers/environment/Environment/Environment.unit.test.ts b/src/helpers/environment/Environment/Environment.unit.test.ts
index 693849de23..73b3e61d11 100644
--- a/src/helpers/environment/Environment/Environment.unit.test.ts
+++ b/src/helpers/environment/Environment/Environment.unit.test.ts
@@ -5,16 +5,16 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  delete import.meta.env.REACT_APP_GOOGLE_ANALYTICS_API_KEY;
-  delete import.meta.env.REACT_APP_GA_4_API_KEY;
-  delete import.meta.env.REACT_APP_COVALENT_API_KEY;
+  delete import.meta.env.VITE_GOOGLE_ANALYTICS_API_KEY;
+  delete import.meta.env.VITE_GA_4_API_KEY;
+  delete import.meta.env.VITE_COVALENT_API_KEY;
   vi.spyOn(console, "warn").mockReset();
 });
 
 describe("Environment", () => {
   describe("Google Analytics - Original", () => {
     it("should return a Google Analytics key", () => {
-      import.meta.env.REACT_APP_GOOGLE_ANALYTICS_API_KEY = "UA-123456789-1";
+      import.meta.env.VITE_GOOGLE_ANALYTICS_API_KEY = "UA-123456789-1";
       expect(Environment.getGoogleAnalyticsApiKey()).toEqual("UA-123456789-1");
     });
 
@@ -28,7 +28,7 @@ describe("Environment", () => {
 
   describe("Google Analytics - GA4", () => {
     it("should return a GA4 key", () => {
-      import.meta.env.REACT_APP_GA_4_API_KEY = "G-ABCDEFGHIJ";
+      import.meta.env.VITE_GA_4_API_KEY = "G-ABCDEFGHIJ";
       expect(Environment.getGA4ApiKey()).toEqual("G-ABCDEFGHIJ");
     });
 
@@ -43,7 +43,7 @@ describe("Environment", () => {
 
   describe("Covalent", () => {
     it("should return a Covalent API key", () => {
-      import.meta.env.REACT_APP_COVALENT_API_KEY = "ckey_442d47723592868l8764adf15bf";
+      import.meta.env.VITE_COVALENT_API_KEY = "ckey_442d47723592868l8764adf15bf";
       expect(Environment.getCovalentApiKey()).toEqual("ckey_442d47723592868l8764adf15bf");
     });
 
diff --git a/src/hooks/useArchiveNodeProvider.ts b/src/hooks/useArchiveNodeProvider.ts
index 4a677be089..7edbce0f6b 100644
--- a/src/hooks/useArchiveNodeProvider.ts
+++ b/src/hooks/useArchiveNodeProvider.ts
@@ -8,6 +8,7 @@ export const useArchiveNodeProvider = (networkId: EthereumNetwork) => {
   const provider: Provider | undefined = useMemo(() => {
     if (networkId) {
       const url = Environment.getArchiveNodeUrl(networkId);
+      console.log("check", networkId, url);
       if (url == undefined) throw new Error("You need an archive node for governance to function properly");
       // NOTE(appleseed) we just choose the first archive node url if you provided multiple...
       return new ethers.providers.StaticJsonRpcProvider(url[0]);
diff --git a/tests/e2e/testHelpers.ts b/tests/e2e/testHelpers.ts
index 95f102e762..080ba55911 100644
--- a/tests/e2e/testHelpers.ts
+++ b/tests/e2e/testHelpers.ts
@@ -6,7 +6,7 @@ import { getDocument, queries } from "pptr-testing-library";
 import puppeteer, { Browser, ElementHandle, Page } from "puppeteer";
 import { exec } from "shelljs";
 
-const REACT_APP_SEED_PHRASE = "REACT_APP_SEED_PHRASE";
+const VITE_SEED_PHRASE = "VITE_SEED_PHRASE";
 
 export const setupLogging = (page: Page) => {
   page
@@ -24,10 +24,10 @@ export const clickElement = async (page: Page, selector: string) => {
 };
 
 const getMetamaskSeedPhrase = (): string => {
-  if (!process.env.REACT_APP_SEED_PHRASE)
-    throw new Error("Unable to find seed phrase for Metamask. Please set the " + REACT_APP_SEED_PHRASE + " variable");
+  if (!process.env.VITE_SEED_PHRASE)
+    throw new Error("Unable to find seed phrase for Metamask. Please set the " + VITE_SEED_PHRASE + " variable");
 
-  return process.env.REACT_APP_SEED_PHRASE;
+  return process.env.VITE_SEED_PHRASE;
 };
 
 export const setupMetamask = async (
diff --git a/tests/unit/launcher.js b/tests/unit/launcher.js
index f604b0ccbc..4b1e557680 100644
--- a/tests/unit/launcher.js
+++ b/tests/unit/launcher.js
@@ -24,7 +24,7 @@ app_node.stdout.on("data", data => {
   // Launch tests
   if (data.includes("Account #19")) {
     console.log("Starting Tests");
-    process.env["REACT_APP_SELF_HOSTED_NODE"] = `http://${NODE_HOST}:${NODE_PORT}`;
+    process.env["VITE_SELF_HOSTED_NODE"] = `http://${NODE_HOST}:${NODE_PORT}`;
     const app_test = spawn("npx", ["react-scripts", "test"].concat(process.argv.slice(2)));
     app_test.stdout.on("data", data => {
       console.error(`${data}`);

From 6d1856acec28218077c29560581fef744eabbf55 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 1 Dec 2022 14:53:10 -0600
Subject: [PATCH 088/113] fix NODE_ENV -> MODE for vite, add reclaimVohmButton

---
 babel.config.js                               |  2 +-
 src/helpers/index.tsx                         |  2 +-
 src/hooks/useGoogleAnalytics.ts               |  2 +-
 src/hooks/useProposal.ts                      | 21 ++++++
 src/hooks/useProposals.ts                     |  5 ++
 src/lib/react-query.tsx                       |  5 +-
 .../CreateProposal/CreateProposal.tsx         |  7 +-
 .../components/ProposalPage/ProposalPage.tsx  | 68 +++++++++----------
 .../components/PollDetailsTab.tsx             |  2 +
 .../ReclaimVohmButton/ReclaimVohmButton.tsx   | 28 ++++++++
 .../components/ReclaimVohmButton/index.ts     |  1 +
 11 files changed, 101 insertions(+), 42 deletions(-)
 create mode 100644 src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx
 create mode 100644 src/views/Governance/components/ReclaimVohmButton/index.ts

diff --git a/babel.config.js b/babel.config.js
index ac4b6d786f..586e8d5bda 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -9,7 +9,7 @@ module.exports = api => {
 
   if (!validEnv.includes(currentEnv)) {
     throw new Error(
-      `Please specify a valid 'NODE_ENV' or 'BABEL_ENV' environment variables. Valid values are "development", "test", and "production". Instead, received: ${JSON.stringify(
+      `Please specify a valid 'MODE' or 'BABEL_ENV' environment variables. Valid values are "development", "test", and "production". Instead, received: ${JSON.stringify(
         currentEnv,
       )}.`,
     );
diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx
index aa4a5471fc..3acca9bd18 100644
--- a/src/helpers/index.tsx
+++ b/src/helpers/index.tsx
@@ -97,7 +97,7 @@ export function shouldTriggerSafetyCheck() {
 }
 
 export const handleContractError = (e: any) => {
-  if (Environment.env.NODE_ENV !== "production") console.warn("caught error in slices; usually network related", e);
+  if (Environment.env.MODE !== "production") console.warn("caught error in slices; usually network related", e);
 };
 
 /**
diff --git a/src/hooks/useGoogleAnalytics.ts b/src/hooks/useGoogleAnalytics.ts
index 22c7cead14..855a90e7ba 100644
--- a/src/hooks/useGoogleAnalytics.ts
+++ b/src/hooks/useGoogleAnalytics.ts
@@ -21,7 +21,7 @@ const useGoogleAnalytics = () => {
       },
       address ? { userId: address } : {},
     );
-    if (import.meta.env.NODE_ENV !== "test") {
+    if (import.meta.env.MODE !== "test") {
       if (GA4_API_KEY && GA4_API_KEY.length > 1) {
         GA4.initialize([
           {
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index e7e85e8146..ac0cdb852f 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -73,11 +73,13 @@ export const useProposal = (instructionsIndex: number) => {
         const activationTimestamp = parseBigNumber(metadata.activationTimestamp, 0) * 1000;
         const activationTimelock = parseBigNumber(activationTimelines.activationTimelock, 0) * 1000;
         const activationDeadline = parseBigNumber(activationTimelines.activationDeadline, 0) * 1000;
+        const collateralDuration = parseBigNumber(activationTimelines.collateralDuration, 0) * 1000;
         const votingPeriod = parseBigNumber(activationTimelines.votingPeriod, 0) * 1000;
         const isActive = activationTimestamp !== 0;
         const earliestActivation = submissionTimestamp + activationTimelock;
         const activationExpiry = submissionTimestamp + activationDeadline;
         const votingExpiry = activationTimestamp + votingPeriod;
+        const collateralClaimableAt = submissionTimestamp + collateralDuration;
         const proposalState = parseProposalState({
           activationTimestamp,
           earliestActivation,
@@ -92,6 +94,7 @@ export const useProposal = (instructionsIndex: number) => {
           id: instructionsIndex,
           title: proposalContent.name,
           submitter: metadata.submitter,
+          collateralClaimableAt: collateralClaimableAt,
           submissionTimestamp: submissionTimestamp,
           timeRemaining: proposalState.jsTimeRemaining,
           nextDeadline: proposalState.nextDeadline,
@@ -245,3 +248,21 @@ export const useActivateProposal = () => {
     await contract.connect(signer).activateProposal(proposalId);
   });
 };
+
+/**
+ * used to reclaim your vOHM collateral after the voting period
+ * - only the proposer should have access to this button.
+ */
+export const useReClaimVohm = () => {
+  const { chain = { id: 1 } } = useNetwork();
+  const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
+  const { data: signer } = useSigner();
+
+  // TODO(appleseed): update ANY types below
+  return useMutation<any, Error, number>(async (proposalId: number) => {
+    if (!signer) throw new Error(`Signer is not set`);
+
+    // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
+    await contract.connect(signer).reclaimCollateral(proposalId);
+  });
+};
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 3b73d7de86..a5af533457 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -40,6 +40,7 @@ export interface Proposal {
 export interface IAnyProposal extends Omit<Proposal, "isActive"> {
   timeRemaining: number;
   nextDeadline: number;
+  collateralClaimableAt: number;
   isActive: boolean | undefined;
 }
 
@@ -85,6 +86,7 @@ interface IActivationTimelines {
   activationDeadline: ethers.BigNumber;
   activationTimelock: ethers.BigNumber;
   votingPeriod: ethers.BigNumber;
+  collateralDuration: ethers.BigNumber;
 }
 
 /** time in seconds */
@@ -97,11 +99,14 @@ export const useActivationTimelines = () => {
       const activationDeadline = await contract.ACTIVATION_DEADLINE();
       const activationTimelock = await contract.ACTIVATION_TIMELOCK();
       const votingPeriod = await contract.VOTING_PERIOD();
+      // collateralDuration is time your collateral will be locked after proposing
+      const collateralDuration = await contract.COLLATERAL_DURATION();
 
       return {
         activationDeadline,
         activationTimelock,
         votingPeriod,
+        collateralDuration,
       };
     },
     { enabled: !!chain && !!chain.id && !!contract },
diff --git a/src/lib/react-query.tsx b/src/lib/react-query.tsx
index a24ebc9aad..920f17b915 100644
--- a/src/lib/react-query.tsx
+++ b/src/lib/react-query.tsx
@@ -17,14 +17,15 @@ export const queryClient = new QueryClient({
       refetchInterval: false,
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
-      retry: Environment.env.NODE_ENV === "development" ? false : 3,
+      retry: Environment.env.MODE === "development" ? false : 3,
     },
   },
 });
 
 export const ReactQueryProvider: React.FC = ({ children }) => (
   <QueryClientProvider client={queryClient}>
-    {Environment.env.NODE_ENV === "development" && <ReactQueryDevtools />}
+    {console.log("env", Environment.env)}
+    {Environment.env.MODE === "development" && <ReactQueryDevtools />}
 
     {children}
   </QueryClientProvider>
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index 18e9943cf6..cea2a65631 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -1,8 +1,9 @@
 import { Box, Grid, InputLabel, Select, Skeleton, styled, Typography } from "@mui/material";
 import { Paper, PrimaryButton } from "@olympusdao/component-library";
-// import MDEditor from "@uiw/react-md-editor";
+import MDEditor from "@uiw/react-md-editor";
 import { ethers } from "ethers";
 import { FC, useState } from "react";
+import rehypeSanitize from "rehype-sanitize";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { GOVERNANCE_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
 import { isValidUrl } from "src/helpers";
@@ -105,7 +106,7 @@ export const CreateProposal = () => {
           <CollateralRequiredText />
           <TextEntry label="Title" handleChange={setProposalTitle} />
           <StyledInputLabel>Description</StyledInputLabel>
-          {/* <MDEditor
+          <MDEditor
             preview="edit"
             value={proposalDescription}
             onChange={value => (value ? setProposalDescription(value) : setProposalDescription(""))}
@@ -114,7 +115,7 @@ export const CreateProposal = () => {
             previewOptions={{
               rehypePlugins: [[rehypeSanitize]],
             }}
-          /> */}
+          />
           <Box display="flex" flexDirection="row" justifyContent="flex-end">
             <Typography>{proposalDescription?.length || 0}/14,400</Typography>
           </Box>
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 1de3bef36c..689989ad29 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -14,7 +14,7 @@ import { PollDetailsTab } from "src/views/Governance/components/ProposalPage/com
 import { VotesTab } from "src/views/Governance/components/ProposalPage/components/VotesTab";
 import { toCapitalCase } from "src/views/Governance/helpers";
 
-const dateFormat = new Intl.DateTimeFormat([], {
+export const proposalDateFormat = new Intl.DateTimeFormat([], {
   month: "short",
   day: "numeric",
   year: "numeric",
@@ -23,34 +23,6 @@ const dateFormat = new Intl.DateTimeFormat([], {
   minute: "numeric",
 });
 
-export const ProposalPage: FC = () => {
-  const { passedId } = useParams();
-  const proposalId = useMemo(() => {
-    if (!passedId) return -1;
-    return parseInt(passedId);
-  }, [passedId]);
-
-  // const _useProposal = useProposal(proposalId);
-  // const proposal: IAnyProposal = useMemo(() => {
-  //   if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
-  //   return _useProposal.data;
-  // }, [_useProposal]);
-
-  const { data: proposal, isLoading } = useProposal(proposalId);
-  return (
-    <>
-      {!isLoading && !!proposal && (
-        <Routes>
-          <Route path="/" element={<PageWrapper proposal={proposal} />}>
-            <Route index element={<PollDetailsTab proposal={proposal} />} />
-            <Route path="votes" element={<VotesTab proposal={proposal} />} />
-          </Route>
-        </Routes>
-      )}
-    </>
-  );
-};
-
 export const PageWrapper = (props: { proposal: IAnyProposal }) => (
   <Box display="flex" justifyContent="center" width="100%">
     <Paper>
@@ -111,18 +83,18 @@ const TimeRemaining = ({ proposal }: { proposal: IAnyProposal }) => {
       <Icon name="timeLeft" style={{ fontSize: "10px", fill: theme.colors.gray[90] }} />
       <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
         {proposal.state === "expired activation"
-          ? `Activation Period Expired at ${dateFormat.format(proposal.nextDeadline)}`
+          ? `Activation Period Expired at ${proposalDateFormat.format(proposal.nextDeadline)}`
           : proposal.state === "discussion"
           ? `Can be activated in ${prettifySeconds(boundedTimeRemaining)}`
           : proposal.state === "ready to activate"
           ? `Must be activated within ${prettifySeconds(boundedTimeRemaining)}`
           : proposal.state === "active" && boundedTimeRemaining == 0
-          ? `Vote Finished at ${dateFormat.format(proposal.nextDeadline)}`
+          ? `Vote Finished at ${proposalDateFormat.format(proposal.nextDeadline)}`
           : proposal.state === "active"
           ? `Ends in ${prettifySeconds(boundedTimeRemaining)}`
           : proposal.state === "closed"
-          ? `Expired at ${dateFormat.format(proposal.nextDeadline)}`
-          : `Expired at ${dateFormat.format(proposal.nextDeadline)}`}
+          ? `Expired at ${proposalDateFormat.format(proposal.nextDeadline)}`
+          : `Expired at ${proposalDateFormat.format(proposal.nextDeadline)}`}
       </Typography>
     </>
   );
@@ -148,7 +120,7 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
         return "darkGray" as OHMChipProps["template"];
     }
   };
-  const formattedPublishedDate = dateFormat.format(proposal.submissionTimestamp);
+  const formattedPublishedDate = proposalDateFormat.format(proposal.submissionTimestamp);
 
   return (
     <Grid container direction="column" pt="9px" mb="9px">
@@ -172,3 +144,31 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
     </Grid>
   );
 };
+
+export const ProposalPage: FC = () => {
+  const { passedId } = useParams();
+  const proposalId = useMemo(() => {
+    if (!passedId) return -1;
+    return parseInt(passedId);
+  }, [passedId]);
+
+  // const _useProposal = useProposal(proposalId);
+  // const proposal: IAnyProposal = useMemo(() => {
+  //   if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
+  //   return _useProposal.data;
+  // }, [_useProposal]);
+
+  const { data: proposal, isLoading } = useProposal(proposalId);
+  return (
+    <>
+      {!isLoading && !!proposal && (
+        <Routes>
+          <Route path="/" element={<PageWrapper proposal={proposal} />}>
+            <Route index element={<PollDetailsTab proposal={proposal} />} />
+            <Route path="votes" element={<VotesTab proposal={proposal} />} />
+          </Route>
+        </Routes>
+      )}
+    </>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 9d11d02ffb..34c03961aa 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -4,6 +4,7 @@ import { useGetInstructions } from "src/hooks/useProposal";
 import { ProposalAction } from "src/hooks/useProposals";
 import { MarkdownPreview } from "src/views/Governance/components/MarkdownPreview";
 import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
+import ReclaimVohmButton from "src/views/Governance/components/ReclaimVohmButton";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useNetwork } from "wagmi";
 
@@ -26,6 +27,7 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
         <MarkdownPreview content={proposal.content} />
 
         <Box display="flex" flexDirection="row" justifyContent="flex-end">
+          <ReclaimVohmButton proposal={proposal} />
           <TertiaryButton target="_blank" href={proposal.uri}>
             Discussion
           </TertiaryButton>
diff --git a/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx b/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx
new file mode 100644
index 0000000000..9b96046da9
--- /dev/null
+++ b/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx
@@ -0,0 +1,28 @@
+import { TertiaryButton } from "@olympusdao/component-library";
+import { useReClaimVohm } from "src/hooks/useProposal";
+import { proposalDateFormat } from "src/views/Governance/components/ProposalPage/ProposalPage";
+import { ProposalTabProps } from "src/views/Governance/interfaces";
+import { useAccount } from "wagmi";
+
+/**
+ * Component for Displaying ReclaimVohm button
+ */
+const ReclaimVohmButton = ({ proposal }: ProposalTabProps) => {
+  const { address: connectedWallet } = useAccount();
+
+  const reclaimCollateral = useReClaimVohm();
+  return (
+    <>
+      {connectedWallet?.toLowerCase() === proposal.submitter.toLowerCase() && (
+        <TertiaryButton
+          disabled={Date.now() < proposal.collateralClaimableAt}
+          onClick={() => reclaimCollateral.mutate(proposal.id)}
+        >
+          {`Claim Your vOHM on or after ${proposalDateFormat.format(proposal.collateralClaimableAt)}`}
+        </TertiaryButton>
+      )}
+    </>
+  );
+};
+
+export default ReclaimVohmButton;
diff --git a/src/views/Governance/components/ReclaimVohmButton/index.ts b/src/views/Governance/components/ReclaimVohmButton/index.ts
new file mode 100644
index 0000000000..3120d9ad18
--- /dev/null
+++ b/src/views/Governance/components/ReclaimVohmButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./ReclaimVohmButton";

From ac2d19bfffd6bf05dfbe3e33e342b9787b1e718c Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 4 Dec 2022 19:08:52 -0600
Subject: [PATCH 089/113] invalidate queries after wrap/unwrap

---
 src/hooks/useVoting.ts | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 7a109aba5d..5ecda82a2e 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -1,12 +1,13 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { BigNumber, ContractReceipt, ethers } from "ethers";
+import { GOVERNANCE_GOHM_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
 import { GOVERNANCE_CONTRACT, GOVERNANCE_VOHM_VAULT_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
 import { useGovernanceGohmBalance, useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { VotesCastEvent } from "src/typechain/OlympusGovernance";
-import { useNetwork, useSigner } from "wagmi";
+import { useAccount, useNetwork, useSigner } from "wagmi";
 
 interface Vote {
   proposalId: BigNumber;
@@ -235,6 +236,8 @@ export const useVote = () => {
 
 /** for a user to get voting power */
 export const useWrapToVohm = () => {
+  const queryClient = useQueryClient();
+  const { address = "" } = useAccount();
   const { chain = { id: 1 } } = useNetwork();
   const { data: signer } = useSigner();
   const contract = GOVERNANCE_VOHM_VAULT_CONTRACT.getEthersContract(chain.id);
@@ -265,6 +268,9 @@ export const useWrapToVohm = () => {
       },
       onSuccess: () => {
         console.log(`Successfully wrapped to vOHM`);
+        queryClient.invalidateQueries({ queryKey: [["useBalance", address, VOTE_TOKEN_ADDRESSES, chain.id]] });
+        queryClient.invalidateQueries({ queryKey: [["useBalance", address, GOVERNANCE_GOHM_ADDRESSES, chain.id]] });
+        queryClient.invalidateQueries({ queryKey: ["getVoteTokenTotalSupply", chain.id] });
       },
     },
   );
@@ -272,6 +278,8 @@ export const useWrapToVohm = () => {
 
 /** for a user to unwrap voting power to gOHM */
 export const useUnwrapFromVohm = () => {
+  const queryClient = useQueryClient();
+  const { address = "" } = useAccount();
   const { chain = { id: 1 } } = useNetwork();
   const { data: signer } = useSigner();
   const contract = GOVERNANCE_VOHM_VAULT_CONTRACT.getEthersContract(chain.id);
@@ -301,7 +309,10 @@ export const useUnwrapFromVohm = () => {
         console.error(error.message);
       },
       onSuccess: () => {
-        console.log(`Successfully unwrapped to gOHM`);
+        console.log(`Successfully unwrapped to gOHM`, address, VOTE_TOKEN_ADDRESSES, chain.id);
+        queryClient.invalidateQueries({ queryKey: [["useBalance", address, VOTE_TOKEN_ADDRESSES, chain.id]] });
+        queryClient.invalidateQueries({ queryKey: [["useBalance", address, GOVERNANCE_GOHM_ADDRESSES, chain.id]] });
+        queryClient.invalidateQueries({ queryKey: ["getVoteTokenTotalSupply", chain.id] });
       },
     },
   );

From 3aee34e8ed8526abea8aa5def6407abaaa8a30c9 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 4 Dec 2022 19:10:51 -0600
Subject: [PATCH 090/113] revert

---
 src/hooks/useVoting.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 5ecda82a2e..27942535a7 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -309,7 +309,7 @@ export const useUnwrapFromVohm = () => {
         console.error(error.message);
       },
       onSuccess: () => {
-        console.log(`Successfully unwrapped to gOHM`, address, VOTE_TOKEN_ADDRESSES, chain.id);
+        console.log(`Successfully unwrapped to gOHM`);
         queryClient.invalidateQueries({ queryKey: [["useBalance", address, VOTE_TOKEN_ADDRESSES, chain.id]] });
         queryClient.invalidateQueries({ queryKey: [["useBalance", address, GOVERNANCE_GOHM_ADDRESSES, chain.id]] });
         queryClient.invalidateQueries({ queryKey: ["getVoteTokenTotalSupply", chain.id] });

From a72c911365eb90547f233f6e2b9e042e5c12498c Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 4 Dec 2022 19:49:20 -0600
Subject: [PATCH 091/113] toggle vote button color based on vote state

---
 .../ProposalPage/components/VotesTab.tsx        | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index ff9d5aa55d..61d80b1fb8 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -11,14 +11,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import {
-  Metric,
-  Paper,
-  PrimaryButton,
-  SecondaryButton,
-  TertiaryButton,
-  VoteBreakdown,
-} from "@olympusdao/component-library";
+import { Metric, Paper, PrimaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
 import { BigNumber } from "ethers";
 import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
@@ -57,14 +50,16 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
         </Box>
         <>
           <Box display="flex" flexDirection="row" justifyContent="center">
-            <SecondaryButton
+            <TertiaryButton
+              template={vote === "yes" ? "secondary" : "tertiary"}
               sx={{ minWidth: "120px" }}
               disabled={!isConnected || !proposal.isActive}
               onClick={() => setVote("yes")}
             >
               Yes
-            </SecondaryButton>
+            </TertiaryButton>
             <TertiaryButton
+              template={vote === "no" ? "secondary" : "tertiary"}
               sx={{ minWidth: "120px" }}
               disabled={!isConnected || !proposal.isActive}
               onClick={() => setVote("no")}
@@ -75,7 +70,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
           <WalletConnectedGuard>
             <Box display="flex" flexDirection="row" justifyContent="center">
               <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
-                Vote
+                Vote <span style={{ textTransform: "capitalize" }}>&nbsp;{vote}</span>
               </PrimaryButton>
             </Box>
           </WalletConnectedGuard>

From 0ac9e855b939e060660a6449536cd85613ac3dd4 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 4 Dec 2022 20:04:36 -0600
Subject: [PATCH 092/113] set quorum to 1

---
 src/views/Governance/ProposalsDashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 66f9aafc0f..3fa399bb76 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -91,7 +91,7 @@ const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
               voteEndDate={new Date(proposal?.nextDeadline)}
-              quorum={0}
+              quorum={1}
               votesAgainst={proposal?.noVotes}
               votesFor={proposal?.yesVotes}
             />

From 11b6dc5b72275e69ecec024575cdb692d6824aec Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 4 Dec 2022 20:17:51 -0600
Subject: [PATCH 093/113] isActive should check current date against vote
 expiry

---
 src/hooks/useProposal.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index ac0cdb852f..54d0f7617d 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -75,10 +75,11 @@ export const useProposal = (instructionsIndex: number) => {
         const activationDeadline = parseBigNumber(activationTimelines.activationDeadline, 0) * 1000;
         const collateralDuration = parseBigNumber(activationTimelines.collateralDuration, 0) * 1000;
         const votingPeriod = parseBigNumber(activationTimelines.votingPeriod, 0) * 1000;
-        const isActive = activationTimestamp !== 0;
         const earliestActivation = submissionTimestamp + activationTimelock;
         const activationExpiry = submissionTimestamp + activationDeadline;
         const votingExpiry = activationTimestamp + votingPeriod;
+        const isActive = votingExpiry > Date.now();
+
         const collateralClaimableAt = submissionTimestamp + collateralDuration;
         const proposalState = parseProposalState({
           activationTimestamp,

From 42f4f21ef7217c168b8c4d009006da5165a59df2 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 13 Dec 2022 13:20:14 -0600
Subject: [PATCH 094/113] fix snapshots

---
 .../__tests__/__snapshots__/Stake.unit.test.tsx.snap      | 4 ++--
 .../__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap b/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
index 9f66623de0..4bd1d728fa 100644
--- a/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
+++ b/src/views/Stake/__tests__/__snapshots__/Stake.unit.test.tsx.snap
@@ -1446,7 +1446,7 @@ exports[`<Stake/> > should render correct staking headers 1`] = `
               <button
                 aria-label="stake-button"
                 aria-selected="true"
-                class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                 role="tab"
                 tabindex="0"
                 type="button"
@@ -1456,7 +1456,7 @@ exports[`<Stake/> > should render correct staking headers 1`] = `
               <button
                 aria-label="unstake-button"
                 aria-selected="false"
-                class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                 role="tab"
                 tabindex="-1"
                 type="button"
diff --git a/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap b/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
index 552c1233d8..b502897657 100644
--- a/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
+++ b/src/views/V1-Stake/__tests__/__snapshots__/V1-Stake.unit.test.tsx.snap
@@ -1253,7 +1253,7 @@ exports[`<Stake/> > should render the stake input Area when connected 1`] = `
                         aria-controls="simple-tabpanel-0"
                         aria-label="stake-button"
                         aria-selected="true"
-                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                         id="simple-tab-0"
                         role="tab"
                         tabindex="0"
@@ -1265,7 +1265,7 @@ exports[`<Stake/> > should render the stake input Area when connected 1`] = `
                         aria-controls="simple-tabpanel-1"
                         aria-label="unstake-button"
                         aria-selected="false"
-                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                         id="simple-tab-1"
                         role="tab"
                         tabindex="-1"
@@ -4101,7 +4101,7 @@ exports[`<Stake/> > should render the v1 migration modal and banner 1`] = `
                         aria-controls="simple-tabpanel-0"
                         aria-label="stake-button"
                         aria-selected="true"
-                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-7si1wa-MuiButtonBase-root-MuiTab-root"
                         id="simple-tab-0"
                         role="tab"
                         tabindex="0"
@@ -4113,7 +4113,7 @@ exports[`<Stake/> > should render the v1 migration modal and banner 1`] = `
                         aria-controls="simple-tabpanel-1"
                         aria-label="unstake-button"
                         aria-selected="false"
-                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-n7tk4x-MuiButtonBase-root-MuiTab-root"
+                        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-7si1wa-MuiButtonBase-root-MuiTab-root"
                         id="simple-tab-1"
                         role="tab"
                         tabindex="-1"

From f0e0f9b64bf887beece4f738fb258567935c7c82 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 18 Dec 2022 19:16:49 -0600
Subject: [PATCH 095/113] update seconds on page refresh. fix page title

---
 src/hooks/useProposal.ts                                    | 2 ++
 src/hooks/useProposals.ts                                   | 1 +
 src/views/Governance/Governance.tsx                         | 2 ++
 .../Governance/components/ProposalPage/ProposalPage.tsx     | 6 ++++--
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 54d0f7617d..9e33f7a128 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -47,6 +47,7 @@ export const useProposal = (instructionsIndex: number) => {
   const { data: metadata, isFetched: metadataIsFetched } = useQuery(
     ["GetProposalMetadata", instructionsIndex],
     async () => {
+      console.log("GetProposalMetadata", instructionsIndex);
       return await contract.getProposalMetadata(instructionsIndex);
     },
   );
@@ -106,6 +107,7 @@ export const useProposal = (instructionsIndex: number) => {
           noVotes,
           uri: discussionURL,
           content,
+          now: new Date(),
         };
 
         return currentProposal;
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index a5af533457..52b7f443e5 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -42,6 +42,7 @@ export interface IAnyProposal extends Omit<Proposal, "isActive"> {
   nextDeadline: number;
   collateralClaimableAt: number;
   isActive: boolean | undefined;
+  now: Date;
 }
 
 export interface IActiveProposal {
diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
index 8ee715965f..b7db5f878a 100644
--- a/src/views/Governance/Governance.tsx
+++ b/src/views/Governance/Governance.tsx
@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { Paper } from "@olympusdao/component-library";
 import { Route, Routes } from "react-router-dom";
+import PageTitle from "src/components/PageTitle";
 import { CreateProposal } from "src/views/Governance/components/CreateProposal";
 import { ProposalPage } from "src/views/Governance/components/ProposalPage";
 import { VotingPower, VotingPowerMetrics } from "src/views/Governance/components/ProposalPage/components/VotingPower";
@@ -9,6 +10,7 @@ import { ProposalsDashboard } from "src/views/Governance/ProposalsDashboard";
 export const Governance = () => {
   return (
     <>
+      <PageTitle name="Governance" />
       <Box display="flex" justifyContent="center" width="100%">
         <Paper>
           <VotingPowerMetrics />
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 689989ad29..442cb33ba5 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -64,8 +64,10 @@ const TimeRemaining = ({ proposal }: { proposal: IAnyProposal }) => {
   // const now = 1668456906000; // must be activated within 1 minute
   // const now = 1668456816000; // can be activated in 3 minutes
   const now = Date.now();
-  if (proposal.timeRemaining && proposal.timeRemaining > 0) {
-    boundedTimeRemaining = proposal.timeRemaining / 1000;
+  const timeRemainingDate = proposal.now.getTime() + proposal.timeRemaining;
+  if (proposal.timeRemaining && timeRemainingDate - now > 0) {
+    const timeRemainingDate = proposal.now.getTime() + proposal.timeRemaining;
+    boundedTimeRemaining = (timeRemainingDate - now) / 1000;
   }
 
   console.log(

From 5140da63d56bb73301732fa8b2c9b48e4f233c37 Mon Sep 17 00:00:00 2001
From: brightiron <brightiron@protonmail.com>
Date: Sun, 18 Dec 2022 19:52:30 -0600
Subject: [PATCH 096/113] pending state. on success redirect to main governance
 page. refresh submittedevents query

---
 src/hooks/useProposal.ts                      | 32 +++++++++++++------
 .../CreateProposal/CreateProposal.tsx         | 13 ++++++--
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 9e33f7a128..0dcf219815 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { ethers } from "ethers";
+import toast from "react-hot-toast";
 import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber, stringToBytes32String } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
@@ -16,6 +17,7 @@ import {
   useGetProposalURIFromEvent,
 } from "src/hooks/useProposals";
 import { useVotingCollateralMinimum, useVotingCollateralRequirement, useVotingSupply } from "src/hooks/useVoting";
+import { queryClient } from "src/lib/react-query";
 import { InstructionStructOutput } from "src/typechain/OlympusGovInstructions";
 import { useNetwork, useSigner } from "wagmi";
 
@@ -167,17 +169,27 @@ export const useSubmitProposal = () => {
   const { data: signer } = useSigner();
 
   // TODO(appleseed): update ANY types below
-  return useMutation<any, Error, { proposal: ISubmitProposal }>(async ({ proposal }: { proposal: ISubmitProposal }) => {
-    if (!signer) throw new Error(`Signer is not set`);
+  return useMutation<any, Error, { proposal: ISubmitProposal }>(
+    async ({ proposal }: { proposal: ISubmitProposal }) => {
+      if (!signer) throw new Error(`Signer is not set`);
 
-    // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
-    await contract.connect(signer).submitProposal(
-      proposal.instructions,
-      ethers.utils.formatBytes32String(stringToBytes32String(proposal.name)),
-      // TODO(appleseed): add back in name after contract update
-      proposal.proposalURI,
-    );
-  });
+      // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
+      const transaction = await contract.connect(signer).submitProposal(
+        proposal.instructions,
+        ethers.utils.formatBytes32String(stringToBytes32String(proposal.name)),
+        // TODO(appleseed): add back in name after contract update
+        proposal.proposalURI,
+      );
+      const response = await transaction.wait();
+      return response;
+    },
+    {
+      onSuccess: () => {
+        toast("Successfully Submitted Proposal");
+        queryClient.invalidateQueries({ queryKey: ["GetProposalSubmittedEvents", chain.id] });
+      },
+    },
+  );
 };
 
 export const useIPFSUpload = () => {
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index cea2a65631..f94ae9477d 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -3,6 +3,7 @@ import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import MDEditor from "@uiw/react-md-editor";
 import { ethers } from "ethers";
 import { FC, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import rehypeSanitize from "rehype-sanitize";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { GOVERNANCE_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
@@ -28,6 +29,7 @@ export const CreateProposal = () => {
   // TODO(appleseed): need to allow multiple instructions
   const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.InstallModule);
   const [proposalContract, setProposalContract] = useState<string>();
+  const navigate = useNavigate();
 
   const StyledInputLabel = styled(InputLabel)(() => ({
     lineHeight: "24px",
@@ -91,7 +93,14 @@ export const CreateProposal = () => {
         const proposalURI = `ipfs://${fileData.path}`;
         // TODO(appleseed): need to allow multiple instructions
         const instructions = [{ action: proposalAction as ProposalAction, target: proposalContract as string }];
-        submitProposal.mutate({ proposal: { name: proposal.name, instructions, proposalURI } });
+        submitProposal.mutate(
+          { proposal: { name: proposal.name, instructions, proposalURI } },
+          {
+            onSuccess: () => {
+              navigate("/governance");
+            },
+          },
+        );
       } else {
         // TODO(appleseed): there was a problem uploading your proposal to IPFS
       }
@@ -143,7 +152,7 @@ export const CreateProposal = () => {
             approvalPendingText={"Confirming Approval in your wallet"}
             isVertical
           >
-            <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission}>
+            <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission} loading={submitProposal.isLoading}>
               {submitProposal.isLoading ? "Submitting..." : "Continue"}
             </PrimaryButton>
           </TokenAllowanceGuard>

From fec51b6703740917a9c4d302e3aa4e55c8cea72b Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 19 Dec 2022 11:41:17 -0600
Subject: [PATCH 097/113] fix tests

---
 src/setupTests.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/setupTests.tsx b/src/setupTests.tsx
index 58323ff79f..e6e96d4afd 100644
--- a/src/setupTests.tsx
+++ b/src/setupTests.tsx
@@ -54,6 +54,9 @@ beforeEach(() => {
     listen: vi.fn(),
     createHref: vi.fn(),
   }));
+  vi.mock("react-markdown", () => ({}));
+  vi.mock("@uiw/react-markdown-preview", () => ({}));
+  vi.mock("@uiw/react-md-editor", () => ({}));
 
   Object.defineProperty(window, "matchMedia", {
     writable: true,

From 9d0c760cacc451945d6621c9ea1396b03293888b Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Thu, 2 Feb 2023 09:26:41 -0600
Subject: [PATCH 098/113] update governance addresses

---
 src/abi/OlympusGovInstructions.json           |   2 +-
 src/abi/OlympusGovernance.json                | 129 ++++++++++++------
 .../TopBar/Wallet/hooks/useFaucet.ts          |   4 +-
 src/constants/addresses.ts                    |  18 ++-
 4 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/src/abi/OlympusGovInstructions.json b/src/abi/OlympusGovInstructions.json
index 10c9cb1530..fd74f03654 100644
--- a/src/abi/OlympusGovInstructions.json
+++ b/src/abi/OlympusGovInstructions.json
@@ -18,7 +18,7 @@
         },
         {
             "inputs": [],
-            "name": "INSTR_InvalidChangeExecutorAction",
+            "name": "INSTR_InvalidAction",
             "type": "error"
         },
         {
diff --git a/src/abi/OlympusGovernance.json b/src/abi/OlympusGovernance.json
index 2f145fb2f8..6944f9123f 100644
--- a/src/abi/OlympusGovernance.json
+++ b/src/abi/OlympusGovernance.json
@@ -36,6 +36,11 @@
             "name": "ExecutorNotSubmitter",
             "type": "error"
         },
+        {
+            "inputs": [],
+            "name": "GovernanceDisabled",
+            "type": "error"
+        },
         {
             "inputs": [
                 {
@@ -52,6 +57,11 @@
             "name": "NotAuthorized",
             "type": "error"
         },
+        {
+            "inputs": [],
+            "name": "NotEnoughVoteSupply",
+            "type": "error"
+        },
         {
             "inputs": [],
             "name": "NotEnoughVotesToExecute",
@@ -83,6 +93,11 @@
             "name": "ProposalAlreadyExecuted",
             "type": "error"
         },
+        {
+            "inputs": [],
+            "name": "ProposalDisabled",
+            "type": "error"
+        },
         {
             "inputs": [],
             "name": "ProposalIsNotActive",
@@ -103,6 +118,11 @@
             "name": "UserAlreadyVoted",
             "type": "error"
         },
+        {
+            "inputs": [],
+            "name": "UserHasNoVotes",
+            "type": "error"
+        },
         {
             "inputs": [],
             "name": "WarmupNotCompleted",
@@ -159,31 +179,6 @@
             "name": "ProposalExecuted",
             "type": "event"
         },
-        {
-            "anonymous": false,
-            "inputs": [
-                {
-                    "indexed": false,
-                    "internalType": "uint256",
-                    "name": "proposalId",
-                    "type": "uint256"
-                },
-                {
-                    "indexed": false,
-                    "internalType": "address",
-                    "name": "voter",
-                    "type": "address"
-                },
-                {
-                    "indexed": false,
-                    "internalType": "uint256",
-                    "name": "amount",
-                    "type": "uint256"
-                }
-            ],
-            "name": "ProposalRegistered",
-            "type": "event"
-        },
         {
             "anonymous": false,
             "inputs": [
@@ -344,6 +339,19 @@
             "stateMutability": "view",
             "type": "function"
         },
+        {
+            "inputs": [],
+            "name": "GOVERNANCE_DISABLED",
+            "outputs": [
+                {
+                    "internalType": "bool",
+                    "name": "",
+                    "type": "bool"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
         {
             "inputs": [],
             "name": "INSTR",
@@ -357,6 +365,32 @@
             "stateMutability": "view",
             "type": "function"
         },
+        {
+            "inputs": [],
+            "name": "MINIMUM_VOTES_THRESHOLD",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "ROLES",
+            "outputs": [
+                {
+                    "internalType": "contract ROLESv1",
+                    "name": "",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
         {
             "inputs": [],
             "name": "VOTES",
@@ -459,6 +493,33 @@
             "stateMutability": "nonpayable",
             "type": "function"
         },
+        {
+            "inputs": [],
+            "name": "disableGovernance",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "proposalId_",
+                    "type": "uint256"
+                }
+            ],
+            "name": "disableProposal",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "enableGovernance",
+            "outputs": [],
+            "stateMutability": "nonpayable",
+            "type": "function"
+        },
         {
             "inputs": [
                 {
@@ -526,6 +587,11 @@
                     "internalType": "bool",
                     "name": "isCollateralReturned",
                     "type": "bool"
+                },
+                {
+                    "internalType": "bool",
+                    "name": "isDisabled",
+                    "type": "bool"
                 }
             ],
             "stateMutability": "view",
@@ -595,19 +661,6 @@
             "stateMutability": "view",
             "type": "function"
         },
-        {
-            "inputs": [
-                {
-                    "internalType": "bool",
-                    "name": "activate_",
-                    "type": "bool"
-                }
-            ],
-            "name": "setActiveStatus",
-            "outputs": [],
-            "stateMutability": "nonpayable",
-            "type": "function"
-        },
         {
             "inputs": [
                 {
diff --git a/src/components/TopBar/Wallet/hooks/useFaucet.ts b/src/components/TopBar/Wallet/hooks/useFaucet.ts
index 09d7c5c6d6..375d21fcba 100644
--- a/src/components/TopBar/Wallet/hooks/useFaucet.ts
+++ b/src/components/TopBar/Wallet/hooks/useFaucet.ts
@@ -60,7 +60,7 @@ export const useGovernanceFaucet = () => {
     async () => {
       if (!chain || chain.id !== 5) throw new Error("Faucet is only supported on Goerli");
       if (!contract)
-        throw new Error(t`Faucet is not supported on this network. Please switch to Goerli Testnet to use the faucet`);
+        throw new Error(`Faucet is not supported on this network. Please switch to Goerli Testnet to use the faucet`);
       if (!signer) throw new Error("Signer is not set");
       if (!address) throw new Error("Wallet is not connected");
 
@@ -73,7 +73,7 @@ export const useGovernanceFaucet = () => {
         toast.error("error" in error ? error.error.message : error.message);
       },
       onSuccess: async () => {
-        toast.success(t`Successfully requested 1000 governance gOHM from Faucet`);
+        toast.success(`Successfully requested 1000 governance gOHM from Faucet`);
       },
     },
   );
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index 86ffe8c0b9..3a03606d8b 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -166,20 +166,23 @@ export const GOVERNANCE_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   // [NetworkId.TESTNET_GOERLI]: "0xf1c6848e7b7bc93401262cdeab40dcbaf92e16ac",
   // [NetworkId.TESTNET_GOERLI]: "0x0fa391b3ae3a7fc5fa24a4bc7236db854390b7b4",
-  [NetworkId.TESTNET_GOERLI]: "0x904fe39c25f53a00A19Cf155B1B73b1CB67F23F8",
+  // [NetworkId.TESTNET_GOERLI]: "0x904fe39c25f53a00A19Cf155B1B73b1CB67F23F8",
+  [NetworkId.TESTNET_GOERLI]: "0xc8aA75d2797C4Ef42486f125f36F06796Fdb37E4",
 };
 
 export const GOV_INSTRUCTIONS_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   // [NetworkId.TESTNET_GOERLI]: "0xa8810f94ABe49Ffe0AA49a1c30930a40C450f288",
-  [NetworkId.TESTNET_GOERLI]: "0x1f0c9b03f9d9c2c6214c4557c369ae34c19122e4",
+  // [NetworkId.TESTNET_GOERLI]: "0x1f0c9b03f9d9c2c6214c4557c369ae34c19122e4",
+  [NetworkId.TESTNET_GOERLI]: "0xda0D88E33eCBfD52e5cb88dB0658d0B758e1cd00",
 };
 
 export const VOTE_TOKEN_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   // [NetworkId.TESTNET_GOERLI]: "0xad50790dbaf78572019575bc5dce2abff1544fd0",
   // [NetworkId.TESTNET_GOERLI]: "0x7Aef3bDa16bBD12033d93C05df877d0f165F2214",
-  [NetworkId.TESTNET_GOERLI]: "0x02741c86c45455c87baa381622f93ebb1141fa63",
+  // [NetworkId.TESTNET_GOERLI]: "0x02741c86c45455c87baa381622f93ebb1141fa63",
+  [NetworkId.TESTNET_GOERLI]: "0xCdC25b22A89b10BeC99b2c66ed3D850C87a4dbfA",
 };
 
 /**
@@ -196,19 +199,22 @@ export const VOTE_TOKEN_ADDRESSES = {
 // };
 export const GOVERNANCE_MOCK_GOHM = {
   [NetworkId.MAINNET]: "",
-  [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
+  // [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
+  [NetworkId.TESTNET_GOERLI]: "0x5eDd8c045c036355d210fE39B9ab11DA3c178c18",
 };
 
 /** governance gohm combines mock gohm on goerli with mainnet gohm */
 export const GOVERNANCE_GOHM_ADDRESSES = {
   [NetworkId.MAINNET]: "0x0ab87046fBb341D058F17CBC4c1133F25a20a52f", // this is the same as GOHM on mainnet
-  [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
+  // [NetworkId.TESTNET_GOERLI]: "0xBF3BaBd7411628788B0f6cd56BC9D6aE1Bfb1F0F",
+  [NetworkId.TESTNET_GOERLI]: "0x5eDd8c045c036355d210fE39B9ab11DA3c178c18",
 };
 
 export const GOVERNANCE_VOHM_VAULT_ADDRESSES = {
   [NetworkId.MAINNET]: "",
   // [NetworkId.TESTNET_GOERLI]: "0x4fd8cc1a43377454ac50f9a312fd4fd7974811cb",
-  [NetworkId.TESTNET_GOERLI]: "0x0BF5064643998f3211b4555Ce6855D511D33191a",
+  // [NetworkId.TESTNET_GOERLI]: "0x0BF5064643998f3211b4555Ce6855D511D33191a",
+  [NetworkId.TESTNET_GOERLI]: "0xE036E83596012e14FF9597B1EF02FE0B7A7c4562",
 };
 
 export const BOND_AGGREGATOR_ADDRESSES = {

From be2fe5c38157d824012eb0e75d58272304db997c Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Fri, 3 Feb 2023 17:18:39 -0600
Subject: [PATCH 099/113] fix collateral balance requirements for creating a
 proposal

---
 src/hooks/useProposal.ts                      |  4 ++-
 .../CreateProposal/CreateProposal.tsx         | 27 ++++++++++---------
 .../ProposalPage/components/VotesTab.tsx      |  4 +--
 .../ReclaimVohmButton/ReclaimVohmButton.tsx   |  2 +-
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 0dcf219815..705487627c 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -172,7 +172,9 @@ export const useSubmitProposal = () => {
   return useMutation<any, Error, { proposal: ISubmitProposal }>(
     async ({ proposal }: { proposal: ISubmitProposal }) => {
       if (!signer) throw new Error(`Signer is not set`);
-
+      console.log("proposalInstructions", proposal.instructions);
+      console.log("name", ethers.utils.formatBytes32String(stringToBytes32String(proposal.name)));
+      console.log("proposalURI", proposal.proposalURI);
       // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
       const transaction = await contract.connect(signer).submitProposal(
         proposal.instructions,
diff --git a/src/views/Governance/components/CreateProposal/CreateProposal.tsx b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
index f94ae9477d..a91b883655 100644
--- a/src/views/Governance/components/CreateProposal/CreateProposal.tsx
+++ b/src/views/Governance/components/CreateProposal/CreateProposal.tsx
@@ -6,9 +6,9 @@ import { FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import rehypeSanitize from "rehype-sanitize";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
-import { GOVERNANCE_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
+import { GOVERNANCE_ADDRESSES, GOVERNANCE_GOHM_ADDRESSES } from "src/constants/addresses";
 import { isValidUrl } from "src/helpers";
-import { useVoteBalance } from "src/hooks/useBalance";
+import { useBalance } from "src/hooks/useBalance";
 import { useCreateProposalVotingPowerReqd, useIPFSUpload, useSubmitProposal } from "src/hooks/useProposal";
 import { ProposalAction } from "src/hooks/useProposals";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
@@ -25,7 +25,8 @@ export const CreateProposal = () => {
   const [proposalDiscussion, setProposalDiscussion] = useState<string>();
   const { data: collateralRequired, isLoading: collateralRequiredLoading } = useCreateProposalVotingPowerReqd();
   const networks = useTestableNetworks();
-  const { data: votesBalance } = useVoteBalance()[networks.MAINNET];
+  // const { data: gOhmBalance } = useVoteBalance()[networks.MAINNET];
+  const { data: gOhmBalance } = useBalance(GOVERNANCE_GOHM_ADDRESSES)[networks.MAINNET];
   // TODO(appleseed): need to allow multiple instructions
   const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.InstallModule);
   const [proposalContract, setProposalContract] = useState<string>();
@@ -70,8 +71,8 @@ export const CreateProposal = () => {
       !proposalFieldsComplete ||
       submitProposal.isLoading ||
       collateralRequiredLoading ||
-      !votesBalance ||
-      collateralRequired.gt(votesBalance)
+      !gOhmBalance ||
+      collateralRequired.gt(gOhmBalance)
     )
       return false;
     return true;
@@ -145,8 +146,8 @@ export const CreateProposal = () => {
         </Grid>
         <Box id="create-proposal-btn-box" display="flex" justifyContent="flex-end">
           <TokenAllowanceGuard
-            message={`Creating a Proposal requires a vOHM Collateral deposit. Your vOHM can be redeemed after the proposal passes/fails.`}
-            tokenAddressMap={VOTE_TOKEN_ADDRESSES}
+            message={`Creating a Proposal requires a gOHM Collateral deposit. Your gOHM can be redeemed after the proposal passes/fails.`}
+            tokenAddressMap={GOVERNANCE_GOHM_ADDRESSES}
             spenderAddressMap={GOVERNANCE_ADDRESSES}
             approvalText={"Approve Collateral"}
             approvalPendingText={"Confirming Approval in your wallet"}
@@ -168,7 +169,7 @@ export const CreateProposal = () => {
 const CollateralRequiredText = () => {
   const { data: collateralRequired, isLoading: collateralRequiredLoading } = useCreateProposalVotingPowerReqd();
   const networks = useTestableNetworks();
-  const { data: votesBalance, isLoading: votesLoading } = useVoteBalance()[networks.MAINNET];
+  const { data: gOhmBalance, isLoading: gOHMLoading } = useBalance(GOVERNANCE_GOHM_ADDRESSES)[networks.MAINNET];
 
   return (
     <Box display={`flex`} flexDirection={`column`}>
@@ -180,29 +181,29 @@ const CollateralRequiredText = () => {
             </Typography>
             <Skeleton width={60} sx={{ display: "inline-block" }} />
             <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
-              {` vOHM`}
+              {` gOHM`}
             </Typography>
           </>
         ) : (
           <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
-            &#x2022;{` Creating a Proposal requires ${collateralRequired.toApproxNumber()} vOHM`}
+            &#x2022;{` Creating a Proposal requires ${collateralRequired.toApproxNumber()} gOHM`}
           </Typography>
         )}
       </Box>
       <Box display={`flex`}>
-        {votesLoading || !votesBalance ? (
+        {gOHMLoading || !gOhmBalance ? (
           <>
             <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
               &#x2022;{` You have `}
             </Typography>
             <Skeleton width={60} sx={{ display: "inline-block" }} />
             <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
-              {` vOHM`}
+              {` gOHM`}
             </Typography>
           </>
         ) : (
           <Typography gutterBottom={false} style={{ lineHeight: 1.4, display: "inline-block" }}>
-            &#x2022;{` You have ${votesBalance.toApproxNumber()} vOHM`}
+            &#x2022;{` You have ${gOhmBalance.toApproxNumber()} gOHM`}
           </Typography>
         )}
       </Box>
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 61d80b1fb8..7fc55165c3 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -89,14 +89,14 @@ const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddre
     <>
       {isLoadingVoteValue && (
         <Skeleton>
-          <Metric label={`Your have previously voted on this proposal with `} metric={`1 vOHM`} />
+          <Metric label={`Your have previously voted on this proposal with `} metric={`1 gOHM`} />
         </Skeleton>
       )}
       {voteValue && (
         <>
           <Metric
             label={`You have previously voted on this proposal with `}
-            metric={`${formatBalance(2, voteValue)} vOHM`}
+            metric={`${formatBalance(2, voteValue)} gOHM`}
           />
         </>
       )}
diff --git a/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx b/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx
index 9b96046da9..013298a13c 100644
--- a/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx
+++ b/src/views/Governance/components/ReclaimVohmButton/ReclaimVohmButton.tsx
@@ -18,7 +18,7 @@ const ReclaimVohmButton = ({ proposal }: ProposalTabProps) => {
           disabled={Date.now() < proposal.collateralClaimableAt}
           onClick={() => reclaimCollateral.mutate(proposal.id)}
         >
-          {`Claim Your vOHM on or after ${proposalDateFormat.format(proposal.collateralClaimableAt)}`}
+          {`Claim Your gOHM on or after ${proposalDateFormat.format(proposal.collateralClaimableAt)}`}
         </TertiaryButton>
       )}
     </>

From 8f7111ce0365717908310430058e67440194a393 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Fri, 3 Feb 2023 17:20:56 -0600
Subject: [PATCH 100/113] change voting tabulation back to gOHM

---
 .../components/ProposalPage/components/VotesTab.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 7fc55165c3..61d80b1fb8 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -89,14 +89,14 @@ const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddre
     <>
       {isLoadingVoteValue && (
         <Skeleton>
-          <Metric label={`Your have previously voted on this proposal with `} metric={`1 gOHM`} />
+          <Metric label={`Your have previously voted on this proposal with `} metric={`1 vOHM`} />
         </Skeleton>
       )}
       {voteValue && (
         <>
           <Metric
             label={`You have previously voted on this proposal with `}
-            metric={`${formatBalance(2, voteValue)} gOHM`}
+            metric={`${formatBalance(2, voteValue)} vOHM`}
           />
         </>
       )}

From 4b0bbd2ccd240de607b9ceb08394861e779377e4 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 6 Feb 2023 12:13:18 -0600
Subject: [PATCH 101/113] update ipfs gateway to w3s.link

---
 src/hooks/useProposals.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 52b7f443e5..76ff782028 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -185,7 +185,7 @@ export const parseProposalContent = async ({ uri }: { uri: string | undefined })
   if (!uri) return placeholder;
   let readURI = uri;
   if (~uri.indexOf("ipfs:/")) {
-    readURI = `https://ipfs.io/ipfs/${uri.replace("ipfs:/", "")}`;
+    readURI = `https://w3s.link/ipfs/${uri.replace("ipfs://", "")}`;
   }
   try {
     const res = await axios.get(readURI);

From f6c88d1840533deae89c9625b6a65cbe42f2fe0a Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 6 Feb 2023 12:27:57 -0600
Subject: [PATCH 102/113] invalidate queries after voting & activation

---
 src/hooks/useProposal.ts | 18 +++++++++++++-----
 src/hooks/useVoting.ts   |  2 ++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 705487627c..87b4e23ab1 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -258,12 +258,20 @@ export const useActivateProposal = () => {
   const { data: signer } = useSigner();
 
   // TODO(appleseed): update ANY types below
-  return useMutation<any, Error, number>(async (proposalId: number) => {
-    if (!signer) throw new Error(`Signer is not set`);
+  return useMutation<any, Error, number>(
+    async (proposalId: number) => {
+      if (!signer) throw new Error(`Signer is not set`);
 
-    // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
-    await contract.connect(signer).activateProposal(proposalId);
-  });
+      // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
+      await contract.connect(signer).activateProposal(proposalId);
+    },
+    {
+      onSuccess: (data, proposalId) => {
+        toast("Successfully Activated Proposal");
+        queryClient.invalidateQueries({ queryKey: proposalQueryKey(proposalId) });
+      },
+    },
+  );
 };
 
 /**
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 27942535a7..b84e16e9e0 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -6,6 +6,7 @@ import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber"
 import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
 import { useGovernanceGohmBalance, useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
+import { queryClient } from "src/lib/react-query";
 import { VotesCastEvent } from "src/typechain/OlympusGovernance";
 import { useAccount, useNetwork, useSigner } from "wagmi";
 
@@ -226,6 +227,7 @@ export const useVote = () => {
     {
       onError: error => {
         console.error(error.message);
+        queryClient.invalidateQueries({ queryKey: ["GetVotesCastEvents", chain.id] });
       },
       onSuccess: () => {
         console.log(`Successfully voted for proposal`);

From 1931cdb1597f1b91eddb7316da16bad9ac49f965 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 6 Feb 2023 12:46:06 -0600
Subject: [PATCH 103/113] minor tweaks

---
 src/hooks/useVoting.ts                        |  2 +-
 .../ProposalPage/components/VotesTab.tsx      | 62 +++++++++++--------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index b84e16e9e0..937b8208a5 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -227,10 +227,10 @@ export const useVote = () => {
     {
       onError: error => {
         console.error(error.message);
-        queryClient.invalidateQueries({ queryKey: ["GetVotesCastEvents", chain.id] });
       },
       onSuccess: () => {
         console.log(`Successfully voted for proposal`);
+        queryClient.invalidateQueries({ queryKey: ["GetVotesCastEvents", chain.id] });
       },
     },
   );
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 61d80b1fb8..9afda6e668 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -33,6 +33,7 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
   const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
   const { address: voterAddress } = useAccount();
+  const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposal.id, voterAddress as string);
 
   const handleVoteSubmission = () => {
     submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
@@ -49,31 +50,40 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
           </Typography>
         </Box>
         <>
-          <Box display="flex" flexDirection="row" justifyContent="center">
-            <TertiaryButton
-              template={vote === "yes" ? "secondary" : "tertiary"}
-              sx={{ minWidth: "120px" }}
-              disabled={!isConnected || !proposal.isActive}
-              onClick={() => setVote("yes")}
-            >
-              Yes
-            </TertiaryButton>
-            <TertiaryButton
-              template={vote === "no" ? "secondary" : "tertiary"}
-              sx={{ minWidth: "120px" }}
-              disabled={!isConnected || !proposal.isActive}
-              onClick={() => setVote("no")}
-            >
-              No
-            </TertiaryButton>
-          </Box>
-          <WalletConnectedGuard>
-            <Box display="flex" flexDirection="row" justifyContent="center">
-              <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
-                Vote <span style={{ textTransform: "capitalize" }}>&nbsp;{vote}</span>
-              </PrimaryButton>
-            </Box>
-          </WalletConnectedGuard>
+          {voteValue && !voteValue.gt("0") && (
+            <>
+              <Box display="flex" flexDirection="row" justifyContent="center">
+                <TertiaryButton
+                  template={vote === "yes" ? "secondary" : "tertiary"}
+                  sx={{ minWidth: "120px" }}
+                  disabled={!isConnected || !proposal.isActive}
+                  onClick={() => setVote("yes")}
+                >
+                  Yes
+                </TertiaryButton>
+                <TertiaryButton
+                  template={vote === "no" ? "secondary" : "tertiary"}
+                  sx={{ minWidth: "120px" }}
+                  disabled={!isConnected || !proposal.isActive}
+                  onClick={() => setVote("no")}
+                >
+                  No
+                </TertiaryButton>
+              </Box>
+              <WalletConnectedGuard>
+                <Box display="flex" flexDirection="row" justifyContent="center">
+                  <PrimaryButton
+                    sx={{ minWidth: "120px" }}
+                    disabled={!proposal.isActive}
+                    onClick={handleVoteSubmission}
+                  >
+                    Vote <span style={{ textTransform: "capitalize" }}>&nbsp;{vote}</span>
+                  </PrimaryButton>
+                </Box>
+              </WalletConnectedGuard>
+            </>
+          )}
+
           {voterAddress && proposal.isActive && <UserVote proposalId={proposal.id} voterAddress={voterAddress} />}
         </>
         {!proposal.isActive && <p>This Proposal is not yet active for voting.</p>}
@@ -89,7 +99,7 @@ const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddre
     <>
       {isLoadingVoteValue && (
         <Skeleton>
-          <Metric label={`Your have previously voted on this proposal with `} metric={`1 vOHM`} />
+          <Metric label={`You have previously voted on this proposal with `} metric={`1 vOHM`} />
         </Skeleton>
       )}
       {voteValue && (

From d66948aa2db3c85074e496c3f43ce311e7b0c1fa Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 6 Mar 2023 06:31:46 -0600
Subject: [PATCH 104/113] cleanup proposal state

---
 src/hooks/useProposal.ts                      |  4 +++
 src/hooks/useProposals.ts                     | 35 ++++++++++++++++++-
 .../components/PollDetailsTab.tsx             | 32 +++++++++++++++--
 .../ProposalPage/components/VotesTab.tsx      |  8 +++--
 4 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 87b4e23ab1..9c962dbbf7 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -100,6 +100,10 @@ export const useProposal = (instructionsIndex: number) => {
           submitter: metadata.submitter,
           collateralClaimableAt: collateralClaimableAt,
           submissionTimestamp: submissionTimestamp,
+          activationTimestamp: activationTimestamp,
+          activationDeadline: activationDeadline,
+          activationExpiry: activationExpiry,
+          votingExpiry: votingExpiry,
           timeRemaining: proposalState.jsTimeRemaining,
           nextDeadline: proposalState.nextDeadline,
           isActive: isActive,
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 76ff782028..8c72e3b4d9 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -15,6 +15,18 @@ export enum ProposalAction {
   ChangeExecutor,
 }
 
+export type IProposalReadable = {
+  [key in ProposalAction]: string;
+};
+
+export const ProposalActionsReadable: IProposalReadable = {
+  [ProposalAction.InstallModule]: "Install Module",
+  [ProposalAction.UpgradeModule]: "Upgrade Module",
+  [ProposalAction.ActivatePolicy]: "Activate Policy",
+  [ProposalAction.DeactivatePolicy]: "De-Activate Policy",
+  [ProposalAction.ChangeExecutor]: "Change Executor",
+};
+
 /// Data type for return from getProposalMetadata on Governance.sol
 export interface proposalMetadata {
   title: string;
@@ -43,6 +55,10 @@ export interface IAnyProposal extends Omit<Proposal, "isActive"> {
   collateralClaimableAt: number;
   isActive: boolean | undefined;
   now: Date;
+  activationTimestamp: number;
+  activationDeadline: number;
+  activationExpiry: number;
+  votingExpiry: number;
 }
 
 export interface IActiveProposal {
@@ -71,6 +87,7 @@ export type PStatus =
   | "executed" // passed & executed / implemented
   | "draft"
   | "closed";
+
 export interface IProposalState {
   state: PStatus;
 }
@@ -132,34 +149,50 @@ export const parseProposalState = ({
   let status: PStatus;
   let jsTimeRemaining: number;
   let nextDeadline: number;
-
+  console.log("parse Proposal state", now, earliestActivation, activationExpiry, activationTimestamp, votingExpiry);
   if (now < earliestActivation) {
+    console.log("now < earliestActivation - discussion", now, earliestActivation);
     // "discussion" // created but not ready to activate
     // block.timestamp < proposal.submissionTimestamp + ACTIVATION_TIMELOCK
     status = "discussion";
     jsTimeRemaining = earliestActivation - now;
     nextDeadline = earliestActivation;
   } else if (now < activationExpiry && activationTimestamp === 0) {
+    console.log(
+      "now < activationExpiry && activationTimestamp === 0 - ready to activate",
+      now,
+      activationExpiry,
+      activationTimestamp,
+    );
     // | "ready to activate" // ready to activate for voting
     // block.timestamp < proposal.submissionTimestamp + ACTIVATION_DEADLINE
     status = "ready to activate";
     jsTimeRemaining = activationExpiry - now;
     nextDeadline = activationExpiry;
   } else if (now >= activationExpiry && activationTimestamp === 0) {
+    console.log(
+      "now >= activationExpiry && activationTimestamp === 0 - expired activation",
+      now,
+      activationExpiry,
+      activationTimestamp,
+    );
     // | "expired activation" // missed activation window
     // block.timestamp > proposal.submissionTimestamp + ACTIVATION_DEADLINE && activationTimestamp === 0
     status = "expired activation";
     jsTimeRemaining = 0;
     nextDeadline = activationExpiry;
   } else if (activationTimestamp > 0 && now < votingExpiry) {
+    console.log("now < activationTimestamp && now < votingExpiry - active", now, activationExpiry, activationTimestamp);
     status = "active";
     jsTimeRemaining = votingExpiry - now;
     nextDeadline = votingExpiry;
   } else {
+    console.log("else - closed");
     status = "closed";
     jsTimeRemaining = 0;
     nextDeadline = votingExpiry;
   }
+  console.log("status", status);
 
   // | "executed" // passed & executed / implemented
 
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 34c03961aa..77172c1950 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,7 +1,7 @@
 import { Box, Skeleton, Typography } from "@mui/material";
 import { Paper, TertiaryButton } from "@olympusdao/component-library";
 import { useGetInstructions } from "src/hooks/useProposal";
-import { ProposalAction } from "src/hooks/useProposals";
+import { ProposalAction, ProposalActionsReadable } from "src/hooks/useProposals";
 import { MarkdownPreview } from "src/views/Governance/components/MarkdownPreview";
 import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
 import ReclaimVohmButton from "src/views/Governance/components/ReclaimVohmButton";
@@ -24,6 +24,32 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
     <Paper enableBackground fullWidth>
       <Box display="flex" flexDirection="column">
         <ActivateVoting proposal={proposal} />
+        <Box id="timeline-details" display="flex" flexDirection="column" sx={{ display: "none" }}>
+          <Box display="flex" flexDirection="row">
+            <Typography>Current Timestamp&nbsp;</Typography>
+            <Typography>{Date.now()}</Typography>
+          </Box>
+          <Box display="flex" flexDirection="row">
+            <Typography>Submission Timestamp&nbsp;</Typography>
+            <Typography>{proposal.submissionTimestamp}</Typography>
+          </Box>
+          <Box display="flex" flexDirection="row">
+            <Typography>Activation Timestamp&nbsp;</Typography>
+            <Typography>{proposal.activationTimestamp}</Typography>
+          </Box>
+          <Box display="flex" flexDirection="row">
+            <Typography>Activation Deadline&nbsp;</Typography>
+            <Typography>{proposal.activationDeadline}</Typography>
+          </Box>
+          <Box display="flex" flexDirection="row">
+            <Typography>Activation Expiry&nbsp;</Typography>
+            <Typography>{proposal.activationExpiry}</Typography>
+          </Box>
+          <Box display="flex" flexDirection="row">
+            <Typography>Voting Expiry&nbsp;</Typography>
+            <Typography>{proposal.votingExpiry}</Typography>
+          </Box>
+        </Box>
         <MarkdownPreview content={proposal.content} />
 
         <Box display="flex" flexDirection="row" justifyContent="flex-end">
@@ -41,7 +67,7 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
   );
 };
 
-export const InstructionsDetails = ({ action, target }: { action: number; target: string }) => {
+export const InstructionsDetails = ({ action, target }: { action: ProposalAction; target: string }) => {
   const { chain } = useNetwork();
   const etherscanURI =
     chain?.id === 5 ? `https://goerli.etherscan.io/address/${target}` : `https://etherscan.io/address/${target}`;
@@ -52,7 +78,7 @@ export const InstructionsDetails = ({ action, target }: { action: number; target
 
   return (
     <Box display="flex" flexDirection="column">
-      <Typography id="instructions-action">{`${ProposalAction[action]} ${target}`}</Typography>
+      <Typography id="instructions-action">{`${ProposalActionsReadable[action]}: ${target}`}</Typography>
       <Box display="flex" flexDirection="row" justifyContent={`center`}>
         <TertiaryButton id="instructions-target-etherscan" target="_blank" href={etherscanURI} disabled={!chain}>
           etherscan
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 9afda6e668..4469891770 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -86,9 +86,13 @@ export const VotesTab = ({ proposal }: ProposalTabProps) => {
 
           {voterAddress && proposal.isActive && <UserVote proposalId={proposal.id} voterAddress={voterAddress} />}
         </>
-        {!proposal.isActive && <p>This Proposal is not yet active for voting.</p>}
+        {(proposal.state === "discussion" || proposal.state === "ready to activate") && (
+          <p>This Proposal is not yet active for voting.</p>
+        )}
+        {proposal.state === "expired activation" && <p>This Proposal missed it's activation window.</p>}
       </Box>
-      {proposal.isActive && <VoteBreakdownAndTable proposal={proposal} />}
+      {/* {proposal.isActive && <VoteBreakdownAndTable proposal={proposal} />} */}
+      <VoteBreakdownAndTable proposal={proposal} />
     </Paper>
   );
 };

From df23babb0b3044aafbf6d43e5c45c875ec830e8f Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 6 Mar 2023 07:48:20 -0600
Subject: [PATCH 105/113] show voting power & history

---
 src/hooks/useProposal.ts                      |  4 +-
 src/hooks/useProposals.ts                     | 14 +++-
 src/hooks/useVoting.ts                        | 17 ++++
 .../ProposalPage/components/VotesTab.tsx      | 81 ++++++++++++-------
 4 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 9c962dbbf7..72c5203d45 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -90,7 +90,7 @@ export const useProposal = (instructionsIndex: number) => {
           activationExpiry,
           votingExpiry,
         });
-        const endorsements = parseBigNumber(metadata.totalRegisteredVotes, 18);
+        const totalRegisteredVotes = parseBigNumber(metadata.totalRegisteredVotes, 18);
         const yesVotes = parseBigNumber(metadata.yesVotes, 18);
         const noVotes = parseBigNumber(metadata.noVotes, 18);
 
@@ -108,7 +108,7 @@ export const useProposal = (instructionsIndex: number) => {
           nextDeadline: proposalState.nextDeadline,
           isActive: isActive,
           state: proposalState.status,
-          endorsements,
+          totalRegisteredVotes,
           yesVotes,
           noVotes,
           uri: discussionURL,
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 8c72e3b4d9..8fc976a460 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -42,7 +42,7 @@ export interface Proposal {
   submissionTimestamp: number;
   isActive: boolean;
   state: PStatus;
-  endorsements: number;
+  totalRegisteredVotes: number;
   yesVotes: number;
   noVotes: number;
   uri: string;
@@ -105,6 +105,10 @@ interface IActivationTimelines {
   activationTimelock: ethers.BigNumber;
   votingPeriod: ethers.BigNumber;
   collateralDuration: ethers.BigNumber;
+  executionThreshold: ethers.BigNumber;
+  executionThresholdAsNumber: number;
+  executionDeadline: ethers.BigNumber;
+  executionTimelock: ethers.BigNumber;
 }
 
 /** time in seconds */
@@ -119,12 +123,20 @@ export const useActivationTimelines = () => {
       const votingPeriod = await contract.VOTING_PERIOD();
       // collateralDuration is time your collateral will be locked after proposing
       const collateralDuration = await contract.COLLATERAL_DURATION();
+      const executionThreshold = await contract.EXECUTION_THRESHOLD();
+      const executionThresholdAsNumber = executionThreshold.toNumber() / 100;
+      const executionDeadline = await contract.EXECUTION_DEADLINE();
+      const executionTimelock = await contract.EXECUTION_TIMELOCK();
 
       return {
         activationDeadline,
         activationTimelock,
         votingPeriod,
         collateralDuration,
+        executionThreshold,
+        executionThresholdAsNumber,
+        executionDeadline,
+        executionTimelock,
       };
     },
     { enabled: !!chain && !!chain.id && !!contract },
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 937b8208a5..773c508a75 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -66,6 +66,23 @@ export const useGetVotesCastForProposal = (
   };
 };
 
+/**
+ * returns all VotesCast events by ALL voters for THIS proposal sorted by largest vote power
+ */
+export const useGetVotesCastForProposalBySize = (
+  proposalId: number,
+): { data: VotesCastEvent[]; isFetched: boolean; isLoading: boolean } => {
+  const { data: votesCastEvents, isFetched, isLoading } = useGetVotesCastForProposal(proposalId);
+  const sorted = votesCastEvents.sort(
+    (a, b) => Number(a.args.userVotes.toString()) - Number(b.args.userVotes.toString()),
+  );
+  return {
+    data: sorted,
+    isFetched,
+    isLoading,
+  };
+};
+
 /**
  * returns all VotesCast events by THIS voter for THIS proposal
  */
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index 4469891770..dfa87a4b66 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -12,13 +12,14 @@ import {
   useTheme,
 } from "@mui/material";
 import { Metric, Paper, PrimaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
-import { BigNumber } from "ethers";
+import { BigNumber, utils } from "ethers";
 import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
-import { IAnyProposal } from "src/hooks/useProposals";
+import { IAnyProposal, useActivationTimelines } from "src/hooks/useProposals";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { useUserVote, useVote, useVotingSupply } from "src/hooks/useVoting";
+import { useGetVotesCastByVoter, useGetVotesCastForProposalBySize, useUserVote, useVote } from "src/hooks/useVoting";
+import { VotesCastEvent } from "src/typechain/OlympusGovernance";
 import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
@@ -119,7 +120,9 @@ const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddre
 };
 
 const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
-  const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
+  // const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
+  const { data: votesCast } = useGetVotesCastForProposalBySize(proposal.id);
+  const { data: timelines } = useActivationTimelines();
 
   const StyledTableCell = styled(TableCell)(() => ({
     padding: "0px",
@@ -128,6 +131,30 @@ const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
     fontWeight: "400",
   }));
 
+  const VoteTableRow = ({ voteEvent }: { voteEvent: VotesCastEvent }) => {
+    const { data: votesByVoter } = useGetVotesCastByVoter(voteEvent.args.voter);
+    const userVotes = utils.formatEther(voteEvent.args.userVotes);
+    const percentVotingPower = Number(userVotes) / proposal.totalRegisteredVotes;
+
+    return (
+      <TableRow>
+        <StyledTableCell data-rowId="voter-address">{voteEvent.args.voter}</StyledTableCell>
+        <StyledTableCell align="right" data-rowId="proposals-voted">
+          {votesByVoter.length}
+        </StyledTableCell>
+        <StyledTableCell align="right" data-rowId="total-votes">
+          {utils.commify(userVotes)}
+        </StyledTableCell>
+        <StyledTableCell align="right" data-rowId="voting-power-percent">
+          {`${(percentVotingPower * 100).toFixed(2)} %`}
+        </StyledTableCell>
+        <StyledTableCell align="right" data-rowId="voting-yes-no">
+          {voteEvent.args.approve ? "Yes" : "No"}
+        </StyledTableCell>
+      </TableRow>
+    );
+  };
+
   return (
     <>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
@@ -139,35 +166,33 @@ const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
         voteAgainstLabel="No"
         voteAgainstCount={proposal.noVotes}
         voteParticipationLabel="Total Participants"
-        totalHoldersCount={Number(formatBalance(2, totalVoteSupply)) || 0}
+        totalHoldersCount={proposal.totalRegisteredVotes || 0}
         // TODO(appleseed): setup a config to make these quorum requirements (from the contract) easily modifiable
-        quorum={totalVoteSupply?.mul("0.33")?.toApproxNumber() || 0}
+        quorum={proposal.totalRegisteredVotes * (timelines?.executionThresholdAsNumber || 0) || 0}
       />
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
         Top Voters
       </Typography>
-      <TableContainer>
-        <Table aria-label="simple table">
-          <TableHead>
-            <TableRow>
-              <StyledTableCell>Voter</StyledTableCell>
-              <StyledTableCell align="right">Proposals voted</StyledTableCell>
-              <StyledTableCell align="right">Total Votes</StyledTableCell>
-              <StyledTableCell align="right">Voting Power</StyledTableCell>
-              <StyledTableCell align="right"></StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              <StyledTableCell>name</StyledTableCell>
-              <StyledTableCell align="right">52</StyledTableCell>
-              <StyledTableCell align="right">26</StyledTableCell>
-              <StyledTableCell align="right">9.06%</StyledTableCell>
-              <StyledTableCell align="right">Delegate</StyledTableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
+      {votesCast && votesCast.length > 0 ? (
+        <TableContainer>
+          <Table aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <StyledTableCell>Voter</StyledTableCell>
+                <StyledTableCell align="right">Proposals voted</StyledTableCell>
+                <StyledTableCell align="right">Total Votes (vOHM)</StyledTableCell>
+                <StyledTableCell align="right">Voting Power</StyledTableCell>
+                <StyledTableCell align="right">Yes/No</StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>{votesCast && votesCast.map(voteEvent => <VoteTableRow voteEvent={voteEvent} />)}</TableBody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <Typography fontSize="12px" lineHeight="22px">
+          Zero Votes have been cast.
+        </Typography>
+      )}
     </>
   );
 };

From 8041d7626db14a8650d45590107613a236496a51 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 7 Mar 2023 06:59:47 -0600
Subject: [PATCH 106/113] fix fontsize on markdown preview

---
 .../Governance/components/MarkdownPreview/MarkdownPreview.tsx  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx b/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
index 1e6736e3c8..55e02325b1 100644
--- a/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
+++ b/src/views/Governance/components/MarkdownPreview/MarkdownPreview.tsx
@@ -9,6 +9,9 @@ export const MarkdownPreview = (props: { content: string }) => {
     "p > img": {
       maxWidth: "100%",
     },
+    p: {
+      fontSize: "16px",
+    },
   }));
 
   const allowedImgDomains = ["i.imgur.com"];

From ed5f89a4bbf79bca6fde67f7bed646b60b7c2f9e Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 7 Mar 2023 07:07:10 -0600
Subject: [PATCH 107/113] move cast vote, restyle discussion

---
 .../components/ProposalPage/ProposalPage.tsx  |  16 +--
 .../ProposalPage/components/CastVote.tsx      |  72 +++++++++++
 .../components/PollDetailsTab.tsx             |  40 ++++--
 .../ProposalPage/components/UserVote.tsx      |  25 ++++
 .../ProposalPage/components/VotesTab.tsx      | 116 ++----------------
 5 files changed, 139 insertions(+), 130 deletions(-)
 create mode 100644 src/views/Governance/components/ProposalPage/components/CastVote.tsx
 create mode 100644 src/views/Governance/components/ProposalPage/components/UserVote.tsx

diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 442cb33ba5..12d3d3568d 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -10,6 +10,7 @@ import { useProposal } from "src/hooks/useProposal";
 import { IAnyProposal, PStatus } from "src/hooks/useProposals";
 import ActionButtons from "src/views/Governance/components/ActionButtons";
 import { BackButton } from "src/views/Governance/components/BackButton";
+import { CastVote } from "src/views/Governance/components/ProposalPage/components/CastVote";
 import { PollDetailsTab } from "src/views/Governance/components/ProposalPage/components/PollDetailsTab";
 import { VotesTab } from "src/views/Governance/components/ProposalPage/components/VotesTab";
 import { toCapitalCase } from "src/views/Governance/helpers";
@@ -23,25 +24,26 @@ export const proposalDateFormat = new Intl.DateTimeFormat([], {
   minute: "numeric",
 });
 
-export const PageWrapper = (props: { proposal: IAnyProposal }) => (
+export const PageWrapper = ({ proposal }: { proposal: IAnyProposal }) => (
   <Box display="flex" justifyContent="center" width="100%">
     <Paper>
       <Box>
         <BackButton />
         <Grid container mb="10px">
           <Grid item sm={6}>
-            <ProposalHeader proposal={props.proposal} />
+            <ProposalHeader proposal={proposal} />
           </Grid>
           <Grid display="flex" item sm={6} justifyContent="flex-end">
             <ActionButtons />
           </Grid>
         </Grid>
+        <CastVote proposal={proposal} />
         <Box display="flex" justifyContent="center">
           <Tabs value={false} centered textColor="primary" indicatorColor="primary">
-            <Link component={NavLink} to={`/governance/proposals/${props.proposal.id}`} end>
+            <Link component={NavLink} to={`/governance/proposals/${proposal.id}`} end>
               <Tab label={`Poll Detail`}></Tab>
             </Link>
-            <Link component={NavLink} to={`/governance/proposals/${props.proposal.id}/votes`}>
+            <Link component={NavLink} to={`/governance/proposals/${proposal.id}/votes`}>
               <Tab label={`Votes`}></Tab>
             </Link>
           </Tabs>
@@ -154,12 +156,6 @@ export const ProposalPage: FC = () => {
     return parseInt(passedId);
   }, [passedId]);
 
-  // const _useProposal = useProposal(proposalId);
-  // const proposal: IAnyProposal = useMemo(() => {
-  //   if (_useProposal.isLoading || !_useProposal.data) return NULL_PROPOSAL;
-  //   return _useProposal.data;
-  // }, [_useProposal]);
-
   const { data: proposal, isLoading } = useProposal(proposalId);
   return (
     <>
diff --git a/src/views/Governance/components/ProposalPage/components/CastVote.tsx b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
new file mode 100644
index 0000000000..31ae6e081c
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
@@ -0,0 +1,72 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { PrimaryButton, TertiaryButton } from "@olympusdao/component-library";
+import { BigNumber } from "ethers";
+import { useState } from "react";
+import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
+import { useTestableNetworks } from "src/hooks/useTestableNetworks";
+import { useUserVote, useVote } from "src/hooks/useVoting";
+import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
+import { UserVote } from "src/views/Governance/components/ProposalPage/components/UserVote";
+import { ProposalTabProps } from "src/views/Governance/interfaces";
+import { useAccount } from "wagmi";
+
+export const CastVote = ({ proposal }: ProposalTabProps) => {
+  const theme = useTheme();
+  const networks = useTestableNetworks();
+  const { isConnected } = useAccount();
+  const [vote, setVote] = useState<string>("");
+  const submitVote = useVote();
+  const { address: voterAddress } = useAccount();
+  const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposal.id, voterAddress as string);
+
+  const handleVoteSubmission = () => {
+    submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
+  };
+  return (
+    <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
+      <Box display="flex" flexDirection="column">
+        <ActivateVoting proposal={proposal} />
+        <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
+          Cast Your Vote
+        </Typography>
+      </Box>
+      <>
+        {voteValue && !voteValue.gt("0") && (
+          <>
+            <Box display="flex" flexDirection="row" justifyContent="center">
+              <TertiaryButton
+                template={vote === "yes" ? "secondary" : "tertiary"}
+                sx={{ minWidth: "120px" }}
+                disabled={!isConnected || !proposal.isActive}
+                onClick={() => setVote("yes")}
+              >
+                Yes
+              </TertiaryButton>
+              <TertiaryButton
+                template={vote === "no" ? "secondary" : "tertiary"}
+                sx={{ minWidth: "120px" }}
+                disabled={!isConnected || !proposal.isActive}
+                onClick={() => setVote("no")}
+              >
+                No
+              </TertiaryButton>
+            </Box>
+            <WalletConnectedGuard>
+              <Box display="flex" flexDirection="row" justifyContent="center">
+                <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
+                  Vote <span style={{ textTransform: "capitalize" }}>&nbsp;{vote}</span>
+                </PrimaryButton>
+              </Box>
+            </WalletConnectedGuard>
+          </>
+        )}
+
+        {voterAddress && proposal.isActive && <UserVote proposalId={proposal.id} voterAddress={voterAddress} />}
+      </>
+      {(proposal.state === "discussion" || proposal.state === "ready to activate") && (
+        <p>This Proposal is not yet active for voting.</p>
+      )}
+      {proposal.state === "expired activation" && <p>This Proposal missed it's activation window.</p>}
+    </Box>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
index 77172c1950..48ca085bef 100644
--- a/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/PollDetailsTab.tsx
@@ -1,4 +1,4 @@
-import { Box, Skeleton, Typography } from "@mui/material";
+import { Box, Skeleton, styled, Typography, useTheme } from "@mui/material";
 import { Paper, TertiaryButton } from "@olympusdao/component-library";
 import { useGetInstructions } from "src/hooks/useProposal";
 import { ProposalAction, ProposalActionsReadable } from "src/hooks/useProposals";
@@ -8,7 +8,14 @@ import ReclaimVohmButton from "src/views/Governance/components/ReclaimVohmButton
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useNetwork } from "wagmi";
 
+export const GovHTypography = styled(Typography)({
+  fontSize: "18px",
+  lineHeight: "28px",
+  fontWeight: 600,
+});
+
 export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
+  const theme = useTheme();
   const { data: instructions, isLoading } = useGetInstructions(proposal.id);
 
   const renderInstructions = () => {
@@ -21,9 +28,18 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
   };
 
   return (
-    <Paper enableBackground fullWidth>
+    <Paper fullWidth sx={{ backgroundColor: theme.colors.gray[700] }}>
       <Box display="flex" flexDirection="column">
-        <ActivateVoting proposal={proposal} />
+        <Box display="flex" flexDirection="row" justifyContent="flex-end">
+          <Box sx={{ flexGrow: 1 }} display="flex" flexDirection="column" justifyContent="center">
+            <GovHTypography>Details</GovHTypography>
+          </Box>
+          <ReclaimVohmButton proposal={proposal} />
+          <ActivateVoting proposal={proposal} />
+          <TertiaryButton target="_blank" href={proposal.uri}>
+            Join the Discussion
+          </TertiaryButton>
+        </Box>
         <Box id="timeline-details" display="flex" flexDirection="column" sx={{ display: "none" }}>
           <Box display="flex" flexDirection="row">
             <Typography>Current Timestamp&nbsp;</Typography>
@@ -52,14 +68,8 @@ export const PollDetailsTab = ({ proposal }: ProposalTabProps) => {
         </Box>
         <MarkdownPreview content={proposal.content} />
 
-        <Box display="flex" flexDirection="row" justifyContent="flex-end">
-          <ReclaimVohmButton proposal={proposal} />
-          <TertiaryButton target="_blank" href={proposal.uri}>
-            Discussion
-          </TertiaryButton>
-        </Box>
         <Box display="flex" flexDirection="column">
-          <Typography variant="h6">Implementation Details</Typography>
+          <GovHTypography>Implementation Details</GovHTypography>
           <>{isLoading ? <InstructionSkeleton /> : renderInstructions()}</>
         </Box>
       </Box>
@@ -78,8 +88,14 @@ export const InstructionsDetails = ({ action, target }: { action: ProposalAction
 
   return (
     <Box display="flex" flexDirection="column">
-      <Typography id="instructions-action">{`${ProposalActionsReadable[action]}: ${target}`}</Typography>
-      <Box display="flex" flexDirection="row" justifyContent={`center`}>
+      <Typography
+        sx={{ fontSize: "16px" }}
+        id="instructions-action"
+      >{`${ProposalActionsReadable[action]}: ${target}`}</Typography>
+      <Box display="flex" flexDirection="row" justifyContent={`start`}>
+        <Box display="flex" flexDirection="column" justifyContent="center">
+          <Typography sx={{ fontSize: "16px" }} id="instructions-action">{`Inspect Code: `}</Typography>
+        </Box>
         <TertiaryButton id="instructions-target-etherscan" target="_blank" href={etherscanURI} disabled={!chain}>
           etherscan
         </TertiaryButton>
diff --git a/src/views/Governance/components/ProposalPage/components/UserVote.tsx b/src/views/Governance/components/ProposalPage/components/UserVote.tsx
new file mode 100644
index 0000000000..c65905de2b
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/UserVote.tsx
@@ -0,0 +1,25 @@
+import Skeleton from "@mui/material/Skeleton";
+import { Metric } from "@olympusdao/component-library";
+import { formatBalance } from "src/helpers";
+import { useUserVote } from "src/hooks/useVoting";
+
+export const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddress: string }) => {
+  const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposalId, voterAddress);
+  return (
+    <>
+      {isLoadingVoteValue && (
+        <Skeleton>
+          <Metric label={`You have previously voted on this proposal with `} metric={`1 vOHM`} />
+        </Skeleton>
+      )}
+      {voteValue && (
+        <>
+          <Metric
+            label={`You have previously voted on this proposal with `}
+            metric={`${formatBalance(2, voteValue)} vOHM`}
+          />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
index dfa87a4b66..a6fd53d213 100644
--- a/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotesTab.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Skeleton,
   styled,
   Table,
   TableBody,
@@ -9,117 +8,17 @@ import {
   TableHead,
   TableRow,
   Typography,
-  useTheme,
 } from "@mui/material";
-import { Metric, Paper, PrimaryButton, TertiaryButton, VoteBreakdown } from "@olympusdao/component-library";
-import { BigNumber, utils } from "ethers";
-import { useState } from "react";
-import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
-import { formatBalance } from "src/helpers";
+import { Paper, VoteBreakdown } from "@olympusdao/component-library";
+import { utils } from "ethers";
 import { IAnyProposal, useActivationTimelines } from "src/hooks/useProposals";
-import { useTestableNetworks } from "src/hooks/useTestableNetworks";
-import { useGetVotesCastByVoter, useGetVotesCastForProposalBySize, useUserVote, useVote } from "src/hooks/useVoting";
+import { useGetVotesCastByVoter, useGetVotesCastForProposalBySize } from "src/hooks/useVoting";
 import { VotesCastEvent } from "src/typechain/OlympusGovernance";
-import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
-import { ProposalTabProps } from "src/views/Governance/interfaces";
-import { useAccount } from "wagmi";
 
 /**
- * parses proposal status & displays votes
+ * parses proposal status & displays votes breakdown
  */
-export const VotesTab = ({ proposal }: ProposalTabProps) => {
-  const theme = useTheme();
-  const networks = useTestableNetworks();
-  const { isConnected } = useAccount();
-  const [vote, setVote] = useState<string>("");
-  const submitVote = useVote();
-  const { address: voterAddress } = useAccount();
-  const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposal.id, voterAddress as string);
-
-  const handleVoteSubmission = () => {
-    submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
-  };
-
-  return (
-    <Paper fullWidth>
-      <Box sx={{ marginTop: "24px" }}></Box>
-      <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
-        <Box display="flex" flexDirection="column">
-          <ActivateVoting proposal={proposal} />
-          <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
-            Cast Your Vote
-          </Typography>
-        </Box>
-        <>
-          {voteValue && !voteValue.gt("0") && (
-            <>
-              <Box display="flex" flexDirection="row" justifyContent="center">
-                <TertiaryButton
-                  template={vote === "yes" ? "secondary" : "tertiary"}
-                  sx={{ minWidth: "120px" }}
-                  disabled={!isConnected || !proposal.isActive}
-                  onClick={() => setVote("yes")}
-                >
-                  Yes
-                </TertiaryButton>
-                <TertiaryButton
-                  template={vote === "no" ? "secondary" : "tertiary"}
-                  sx={{ minWidth: "120px" }}
-                  disabled={!isConnected || !proposal.isActive}
-                  onClick={() => setVote("no")}
-                >
-                  No
-                </TertiaryButton>
-              </Box>
-              <WalletConnectedGuard>
-                <Box display="flex" flexDirection="row" justifyContent="center">
-                  <PrimaryButton
-                    sx={{ minWidth: "120px" }}
-                    disabled={!proposal.isActive}
-                    onClick={handleVoteSubmission}
-                  >
-                    Vote <span style={{ textTransform: "capitalize" }}>&nbsp;{vote}</span>
-                  </PrimaryButton>
-                </Box>
-              </WalletConnectedGuard>
-            </>
-          )}
-
-          {voterAddress && proposal.isActive && <UserVote proposalId={proposal.id} voterAddress={voterAddress} />}
-        </>
-        {(proposal.state === "discussion" || proposal.state === "ready to activate") && (
-          <p>This Proposal is not yet active for voting.</p>
-        )}
-        {proposal.state === "expired activation" && <p>This Proposal missed it's activation window.</p>}
-      </Box>
-      {/* {proposal.isActive && <VoteBreakdownAndTable proposal={proposal} />} */}
-      <VoteBreakdownAndTable proposal={proposal} />
-    </Paper>
-  );
-};
-
-const UserVote = ({ proposalId, voterAddress }: { proposalId: number; voterAddress: string }) => {
-  const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposalId, voterAddress);
-  return (
-    <>
-      {isLoadingVoteValue && (
-        <Skeleton>
-          <Metric label={`You have previously voted on this proposal with `} metric={`1 vOHM`} />
-        </Skeleton>
-      )}
-      {voteValue && (
-        <>
-          <Metric
-            label={`You have previously voted on this proposal with `}
-            metric={`${formatBalance(2, voteValue)} vOHM`}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
+export const VotesTab = ({ proposal }: { proposal: IAnyProposal }) => {
   // const { data: totalVoteSupply, isLoading: isLoadingTotalSupply } = useVotingSupply();
   const { data: votesCast } = useGetVotesCastForProposalBySize(proposal.id);
   const { data: timelines } = useActivationTimelines();
@@ -156,7 +55,8 @@ const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
   };
 
   return (
-    <>
+    <Paper fullWidth>
+      <Box sx={{ marginTop: "24px" }}></Box>
       <Typography fontSize="18px" lineHeight="28px" fontWeight="500" mt="21px">
         Vote Breakdown
       </Typography>
@@ -193,6 +93,6 @@ const VoteBreakdownAndTable = ({ proposal }: { proposal: IAnyProposal }) => {
           Zero Votes have been cast.
         </Typography>
       )}
-    </>
+    </Paper>
   );
 };

From e786d4daa6415f1e8e039be835e47cae4b5018de Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Tue, 7 Mar 2023 07:44:11 -0600
Subject: [PATCH 108/113] fix buttons & mutation states

---
 src/helpers/index.tsx                         |  4 ++
 src/hooks/useProposal.ts                      | 45 +++++++++++++------
 src/hooks/useVoting.ts                        | 15 +++++--
 .../components/ActivateVoting.tsx             |  9 +++-
 .../ProposalPage/components/CastVote.tsx      | 11 +++--
 5 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx
index 3acca9bd18..a27a51bc2e 100644
--- a/src/helpers/index.tsx
+++ b/src/helpers/index.tsx
@@ -42,6 +42,10 @@ export function shorten(str: string) {
   return `${str.slice(0, 6)}...${str.slice(str.length - 4)}`;
 }
 
+export function capitalize(str: string) {
+  return str && str[0].toUpperCase() + str.slice(1);
+}
+
 export function formatCurrency(c: number, precision = 0, currency = "USD") {
   if (currency === "OHM") return `${trim(c, precision)} Ω`;
   return new Intl.NumberFormat("en-US", {
diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 72c5203d45..183c931877 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { ethers } from "ethers";
+import { ContractReceipt, ethers } from "ethers";
 import toast from "react-hot-toast";
+import { GOVERNANCE_GOHM_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
 import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber, stringToBytes32String } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
@@ -19,13 +20,15 @@ import {
 import { useVotingCollateralMinimum, useVotingCollateralRequirement, useVotingSupply } from "src/hooks/useVoting";
 import { queryClient } from "src/lib/react-query";
 import { InstructionStructOutput } from "src/typechain/OlympusGovInstructions";
-import { useNetwork, useSigner } from "wagmi";
+import { useAccount, useNetwork, useSigner } from "wagmi";
 
 /**
  * @notice Query key for useProposal which is dependent on instructionsIndex
  * @param instructionsIndex The index number of the proposal to fetch
  */
-const proposalQueryKey = (instructionsIndex: number) => ["useProposal", instructionsIndex].filter(nonNullable);
+export const proposalQueryKey = (instructionsIndex: number) => ["useProposal", instructionsIndex].filter(nonNullable);
+export const proposalMetadataQueryKey = (instructionsIndex: number) =>
+  ["GetProposalMetadata", instructionsIndex].filter(nonNullable);
 
 /**
  * @notice  Fetches the metadata, related endorsements, yes votes, and no votes for the proposal
@@ -47,7 +50,7 @@ export const useProposal = (instructionsIndex: number) => {
     proposalId: instructionsIndex,
   });
   const { data: metadata, isFetched: metadataIsFetched } = useQuery(
-    ["GetProposalMetadata", instructionsIndex],
+    proposalMetadataQueryKey(instructionsIndex),
     async () => {
       console.log("GetProposalMetadata", instructionsIndex);
       return await contract.getProposalMetadata(instructionsIndex);
@@ -186,8 +189,8 @@ export const useSubmitProposal = () => {
         // TODO(appleseed): add back in name after contract update
         proposal.proposalURI,
       );
-      const response = await transaction.wait();
-      return response;
+      toast("Submitted transaction to chain");
+      return await transaction.wait();
     },
     {
       onSuccess: () => {
@@ -262,17 +265,20 @@ export const useActivateProposal = () => {
   const { data: signer } = useSigner();
 
   // TODO(appleseed): update ANY types below
-  return useMutation<any, Error, number>(
+  return useMutation<ContractReceipt, Error, number>(
     async (proposalId: number) => {
       if (!signer) throw new Error(`Signer is not set`);
 
       // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
-      await contract.connect(signer).activateProposal(proposalId);
+      const tx = await contract.connect(signer).activateProposal(proposalId);
+      toast("Submitted transaction to chain");
+      return await tx.wait();
     },
     {
       onSuccess: (data, proposalId) => {
         toast("Successfully Activated Proposal");
         queryClient.invalidateQueries({ queryKey: proposalQueryKey(proposalId) });
+        queryClient.invalidateQueries({ queryKey: proposalMetadataQueryKey(proposalId) });
       },
     },
   );
@@ -286,12 +292,25 @@ export const useReClaimVohm = () => {
   const { chain = { id: 1 } } = useNetwork();
   const contract = GOVERNANCE_CONTRACT.getEthersContract(chain.id);
   const { data: signer } = useSigner();
+  const { address } = useAccount();
 
   // TODO(appleseed): update ANY types below
-  return useMutation<any, Error, number>(async (proposalId: number) => {
-    if (!signer) throw new Error(`Signer is not set`);
+  return useMutation<ContractReceipt, Error, number>(
+    async (proposalId: number) => {
+      if (!signer) throw new Error(`Signer is not set`);
 
-    // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
-    await contract.connect(signer).reclaimCollateral(proposalId);
-  });
+      // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
+      const tx = await contract.connect(signer).reclaimCollateral(proposalId);
+      toast("Submitted transaction to chain");
+      return await tx.wait();
+    },
+    {
+      onSuccess: (data, proposalId) => {
+        toast("Successfully Reclaimed Collateral");
+        queryClient.invalidateQueries({ queryKey: proposalQueryKey(proposalId) });
+        queryClient.invalidateQueries({ queryKey: [["useBalance", address, VOTE_TOKEN_ADDRESSES, chain.id]] });
+        queryClient.invalidateQueries({ queryKey: [["useBalance", address, GOVERNANCE_GOHM_ADDRESSES, chain.id]] });
+      },
+    },
+  );
 };
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index 773c508a75..b9268ce594 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -1,10 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { BigNumber, ContractReceipt, ethers } from "ethers";
+import toast from "react-hot-toast";
 import { GOVERNANCE_GOHM_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
 import { GOVERNANCE_CONTRACT, GOVERNANCE_VOHM_VAULT_CONTRACT, VOTE_TOKEN_CONTRACT } from "src/constants/contracts";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
 import { useGovernanceGohmBalance, useVoteBalance } from "src/hooks/useBalance";
+import { proposalMetadataQueryKey, proposalQueryKey } from "src/hooks/useProposal";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { queryClient } from "src/lib/react-query";
 import { VotesCastEvent } from "src/typechain/OlympusGovernance";
@@ -239,15 +241,18 @@ export const useVote = () => {
       if (!balance) throw new Error("You cannot Vote without vOHM");
 
       const transaction = await contract.connect(signer).vote(voteData.proposalId, voteData.vote);
+      toast("Submitted transaction to chain");
       return transaction.wait();
     },
     {
       onError: error => {
         console.error(error.message);
       },
-      onSuccess: () => {
-        console.log(`Successfully voted for proposal`);
+      onSuccess: (tx, { voteData }) => {
+        toast(`Successfully voted for proposal`);
         queryClient.invalidateQueries({ queryKey: ["GetVotesCastEvents", chain.id] });
+        queryClient.invalidateQueries({ queryKey: proposalQueryKey(voteData.proposalId.toNumber()) });
+        queryClient.invalidateQueries({ queryKey: proposalMetadataQueryKey(voteData.proposalId.toNumber()) });
       },
     },
   );
@@ -279,6 +284,7 @@ export const useWrapToVohm = () => {
       if (!contract) throw new Error(`Please switch to the Ethereum network to wrap your gOHM`);
 
       const transaction = await contract.connect(signer).deposit(_amount.toBigNumber());
+      toast("Submitted transaction to chain");
       return transaction.wait();
     },
     {
@@ -286,7 +292,7 @@ export const useWrapToVohm = () => {
         console.error(error.message);
       },
       onSuccess: () => {
-        console.log(`Successfully wrapped to vOHM`);
+        toast(`Successfully wrapped to vOHM`);
         queryClient.invalidateQueries({ queryKey: [["useBalance", address, VOTE_TOKEN_ADDRESSES, chain.id]] });
         queryClient.invalidateQueries({ queryKey: [["useBalance", address, GOVERNANCE_GOHM_ADDRESSES, chain.id]] });
         queryClient.invalidateQueries({ queryKey: ["getVoteTokenTotalSupply", chain.id] });
@@ -321,6 +327,7 @@ export const useUnwrapFromVohm = () => {
       if (!contract) throw new Error(`Please switch to the Ethereum network to unwrap your vOHM`);
 
       const transaction = await contract.connect(signer).withdraw(_amount.toBigNumber());
+      toast("Submitted transaction to chain");
       return transaction.wait();
     },
     {
@@ -328,7 +335,7 @@ export const useUnwrapFromVohm = () => {
         console.error(error.message);
       },
       onSuccess: () => {
-        console.log(`Successfully unwrapped to gOHM`);
+        toast(`Successfully unwrapped to gOHM`);
         queryClient.invalidateQueries({ queryKey: [["useBalance", address, VOTE_TOKEN_ADDRESSES, chain.id]] });
         queryClient.invalidateQueries({ queryKey: [["useBalance", address, GOVERNANCE_GOHM_ADDRESSES, chain.id]] });
         queryClient.invalidateQueries({ queryKey: ["getVoteTokenTotalSupply", chain.id] });
diff --git a/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx b/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx
index 23fb84bf7a..5b632f6906 100644
--- a/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx
+++ b/src/views/Governance/components/ProposalPage/components/ActivateVoting.tsx
@@ -19,8 +19,13 @@ export const ActivateVoting = ({ proposal }: ProposalTabProps) => {
     <>
       {connectedWalletIsProposer && proposalStatesToShow && (
         <Box display="flex" flexDirection="row" justifyContent="center">
-          <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposalStateIsCorrect} onClick={handleActivate}>
-            Activate for Voting
+          <PrimaryButton
+            sx={{ minWidth: "120px" }}
+            disabled={!proposalStateIsCorrect || activateProposal.isLoading}
+            onClick={handleActivate}
+            loading={activateProposal.isLoading}
+          >
+            {activateProposal.isLoading ? "Activating..." : "Activate for Voting"}
           </PrimaryButton>
         </Box>
       )}
diff --git a/src/views/Governance/components/ProposalPage/components/CastVote.tsx b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
index 31ae6e081c..adc9c86345 100644
--- a/src/views/Governance/components/ProposalPage/components/CastVote.tsx
+++ b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, capitalize, Typography, useTheme } from "@mui/material";
 import { PrimaryButton, TertiaryButton } from "@olympusdao/component-library";
 import { BigNumber } from "ethers";
 import { useState } from "react";
@@ -53,8 +53,13 @@ export const CastVote = ({ proposal }: ProposalTabProps) => {
             </Box>
             <WalletConnectedGuard>
               <Box display="flex" flexDirection="row" justifyContent="center">
-                <PrimaryButton sx={{ minWidth: "120px" }} disabled={!proposal.isActive} onClick={handleVoteSubmission}>
-                  Vote <span style={{ textTransform: "capitalize" }}>&nbsp;{vote}</span>
+                <PrimaryButton
+                  sx={{ minWidth: "120px" }}
+                  disabled={!proposal.isActive || submitVote.isLoading}
+                  onClick={handleVoteSubmission}
+                  loading={submitVote.isLoading}
+                >
+                  {submitVote.isLoading ? `Voting ${capitalize(vote)}...` : `Vote ${capitalize(vote)}`}
                 </PrimaryButton>
               </Box>
             </WalletConnectedGuard>

From f5b821ec231d7fd31bcaf8a738bb0293d4b99bfe Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 13 Mar 2023 14:03:24 -0500
Subject: [PATCH 109/113] reorg voting power per figma

---
 src/views/Governance/Governance.tsx           |  9 +--------
 .../ActionButtons/ActionButtons.tsx           | 10 ++++++++--
 .../ProposalPage/components/CastVote.tsx      | 19 ++++++++++++++++---
 .../ProposalPage/components/VotingPower.tsx   | 17 ++++++++++-------
 .../components/VohmArea/VohmArea.tsx          |  7 -------
 5 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
index b7db5f878a..bcdbe0540e 100644
--- a/src/views/Governance/Governance.tsx
+++ b/src/views/Governance/Governance.tsx
@@ -1,21 +1,14 @@
-import { Box } from "@mui/material";
-import { Paper } from "@olympusdao/component-library";
 import { Route, Routes } from "react-router-dom";
 import PageTitle from "src/components/PageTitle";
 import { CreateProposal } from "src/views/Governance/components/CreateProposal";
 import { ProposalPage } from "src/views/Governance/components/ProposalPage";
-import { VotingPower, VotingPowerMetrics } from "src/views/Governance/components/ProposalPage/components/VotingPower";
+import { VotingPower } from "src/views/Governance/components/ProposalPage/components/VotingPower";
 import { ProposalsDashboard } from "src/views/Governance/ProposalsDashboard";
 
 export const Governance = () => {
   return (
     <>
       <PageTitle name="Governance" />
-      <Box display="flex" justifyContent="center" width="100%">
-        <Paper>
-          <VotingPowerMetrics />
-        </Paper>
-      </Box>
       <Routes>
         <Route path="/" element={<ProposalsDashboard />} />
         <Route path="/proposals/:passedId/*" element={<ProposalPage />} />
diff --git a/src/views/Governance/components/ActionButtons/ActionButtons.tsx b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
index 9e2a844458..bbdb14919a 100644
--- a/src/views/Governance/components/ActionButtons/ActionButtons.tsx
+++ b/src/views/Governance/components/ActionButtons/ActionButtons.tsx
@@ -1,5 +1,5 @@
 import { Box, Link } from "@mui/material";
-import { SecondaryButton } from "@olympusdao/component-library";
+import { PrimaryButton, SecondaryButton } from "@olympusdao/component-library";
 import { FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import DelegateModal from "src/views/Governance/components/DelegateModal";
@@ -20,7 +20,13 @@ const ActionButtons: FC = () => {
         <SecondaryButton>Create new Proposal</SecondaryButton>
       </Link>
       {/* <PrimaryButton onClick={() => setOpen(true)}>Get Voting Power</PrimaryButton> */}
-
+      {/* <WalletConnectedGuard> */}
+      <Box display="flex" flexDirection="row" justifyContent="center">
+        <Link to="/governance/get-vohm" component={RouterLink}>
+          <PrimaryButton sx={{ minWidth: "120px" }}>Get More Voting Power</PrimaryButton>
+        </Link>
+      </Box>
+      {/* </WalletConnectedGuard> */}
       <DelegateModal open={open} handleClose={handleClose} />
     </Box>
   );
diff --git a/src/views/Governance/components/ProposalPage/components/CastVote.tsx b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
index adc9c86345..536d29034b 100644
--- a/src/views/Governance/components/ProposalPage/components/CastVote.tsx
+++ b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
@@ -1,23 +1,27 @@
 import { Box, capitalize, Typography, useTheme } from "@mui/material";
-import { PrimaryButton, TertiaryButton } from "@olympusdao/component-library";
+import { Metric, PrimaryButton, TertiaryButton } from "@olympusdao/component-library";
 import { BigNumber } from "ethers";
 import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
+import { formatBalance } from "src/helpers";
+import { useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { useUserVote, useVote } from "src/hooks/useVoting";
 import { ActivateVoting } from "src/views/Governance/components/ProposalPage/components/ActivateVoting";
 import { UserVote } from "src/views/Governance/components/ProposalPage/components/UserVote";
+import { proposalDateFormat } from "src/views/Governance/components/ProposalPage/ProposalPage";
 import { ProposalTabProps } from "src/views/Governance/interfaces";
 import { useAccount } from "wagmi";
 
 export const CastVote = ({ proposal }: ProposalTabProps) => {
   const theme = useTheme();
-  const networks = useTestableNetworks();
   const { isConnected } = useAccount();
   const [vote, setVote] = useState<string>("");
   const submitVote = useVote();
   const { address: voterAddress } = useAccount();
   const { data: voteValue, isLoading: isLoadingVoteValue } = useUserVote(proposal.id, voterAddress as string);
+  const networks = useTestableNetworks();
+  const votesBalance = useVoteBalance()[networks.MAINNET].data;
 
   const handleVoteSubmission = () => {
     submitVote.mutate({ voteData: { proposalId: BigNumber.from(proposal.id), vote: vote === "yes" } });
@@ -27,9 +31,18 @@ export const CastVote = ({ proposal }: ProposalTabProps) => {
       <Box display="flex" flexDirection="column">
         <ActivateVoting proposal={proposal} />
         <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
-          Cast Your Vote
+          Your Vote
         </Typography>
       </Box>
+      {["active", "closed"].includes(proposal.state) && (
+        <Box display="flex" flexDirection="row">
+          {isConnected && <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
+          <Metric
+            label={proposal.state === "active" ? `Vote Closes On` : proposal.state === "closed" ? `Vote Closed On` : ``}
+            metric={`${proposalDateFormat.format(proposal.nextDeadline)}`}
+          />
+        </Box>
+      )}
       <>
         {voteValue && !voteValue.gt("0") && (
           <>
diff --git a/src/views/Governance/components/ProposalPage/components/VotingPower.tsx b/src/views/Governance/components/ProposalPage/components/VotingPower.tsx
index 2dce34e317..a0fa3bfa7d 100644
--- a/src/views/Governance/components/ProposalPage/components/VotingPower.tsx
+++ b/src/views/Governance/components/ProposalPage/components/VotingPower.tsx
@@ -1,8 +1,6 @@
-import { Box, Grid, Link, Typography, useTheme } from "@mui/material";
-import { Metric, PrimaryButton } from "@olympusdao/component-library";
+import { Box, Grid, Typography, useTheme } from "@mui/material";
+import { Metric } from "@olympusdao/component-library";
 import { Paper } from "@olympusdao/component-library";
-import { Link as RouterLink } from "react-router-dom";
-import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
 import { useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
@@ -14,6 +12,11 @@ import { useAccount } from "wagmi";
 export const VotingPower = () => {
   return (
     <>
+      <Box display="flex" justifyContent="center" width="100%">
+        <Paper id="hello" sx={{ marginBottom: "0rem !important", paddingBottom: "0rem !important" }}>
+          <VotingPowerMetrics />
+        </Paper>
+      </Box>
       <Box display="flex" justifyContent="center">
         <Paper>
           <Grid container direction="column" paddingLeft="4.5px" paddingRight="4.5px">
@@ -42,18 +45,18 @@ export const VotingPowerMetrics = () => {
         </Typography>
       </Box>
       <Box display="flex" flexDirection="row">
-        {isConnected && <Metric label={`Your voting power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
+        {isConnected && <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
         {totalVoteSupply && (
           <Metric label={`Total Voting Supply`} metric={`${formatBalance(2, totalVoteSupply)} vOHM`} />
         )}
       </Box>
-      <WalletConnectedGuard>
+      {/* <WalletConnectedGuard>
         <Box display="flex" flexDirection="row" justifyContent="center">
           <Link to="/governance/get-vohm" component={RouterLink}>
             <PrimaryButton sx={{ minWidth: "120px" }}>Get More Voting Power</PrimaryButton>
           </Link>
         </Box>
-      </WalletConnectedGuard>
+      </WalletConnectedGuard> */}
     </Box>
   );
 };
diff --git a/src/views/Governance/components/VohmArea/VohmArea.tsx b/src/views/Governance/components/VohmArea/VohmArea.tsx
index 43b873d4a3..dd24cd5b7a 100644
--- a/src/views/Governance/components/VohmArea/VohmArea.tsx
+++ b/src/views/Governance/components/VohmArea/VohmArea.tsx
@@ -1,5 +1,4 @@
 import { Box } from "@mui/material";
-import { MetricCollection } from "@olympusdao/component-library";
 import { useState } from "react";
 import { VohmInputArea } from "src/views/Governance/components/VohmArea/VohmInputArea/VohmInputArea";
 import { useAccount } from "wagmi";
@@ -12,12 +11,6 @@ export const VohmArea: React.FC = () => {
     <>
       {/* <PageTitle name="vOHM" /> */}
       <Box width="100%">
-        <Box display="flex" flexDirection="row" width="100%" justifyContent="center">
-          <Box display="flex" flexDirection="column" width="100%" maxWidth="521px" mb="28px">
-            <MetricCollection>{/* <VotingPowerMetrics /> */}</MetricCollection>
-          </Box>
-        </Box>
-
         <VohmInputArea isZoomed={isZoomed} />
         {isConnected && (
           <Box display="flex" flexDirection="row" width="100%" justifyContent="center" mt="24px">

From 067df5afcb52c7be1fca4b3322467c262ceb42d8 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 13 Mar 2023 20:04:37 -0500
Subject: [PATCH 110/113] update proposal states, voting power & vote status

---
 src/hooks/useProposal.ts                      | 27 +++++++-
 src/hooks/useProposals.ts                     | 65 ++++++++++++++++---
 src/hooks/useVoting.ts                        |  4 +-
 src/themes/dark.js                            |  7 ++
 src/themes/light.js                           |  7 ++
 src/views/Governance/ProposalsDashboard.tsx   |  2 +-
 .../components/ProposalPage/ProposalPage.tsx  |  2 +
 .../ProposalPage/components/CastVote.tsx      | 24 +++++--
 .../ProposalPage/components/StatusBar.tsx     | 62 ++++++++++++++++++
 .../ProposalPage/components/UserVote.tsx      |  2 +-
 src/views/Governance/constants.ts             | 15 -----
 11 files changed, 181 insertions(+), 36 deletions(-)
 create mode 100644 src/views/Governance/components/ProposalPage/components/StatusBar.tsx
 delete mode 100644 src/views/Governance/constants.ts

diff --git a/src/hooks/useProposal.ts b/src/hooks/useProposal.ts
index 183c931877..a4cb5c1e13 100644
--- a/src/hooks/useProposal.ts
+++ b/src/hooks/useProposal.ts
@@ -11,6 +11,7 @@ import { useArchiveNodeProvider } from "src/hooks/useArchiveNodeProvider";
 /// Import Proposal data type and mock data getters from useProposals
 import {
   IAnyProposal,
+  notEnoughVotesToExecute,
   parseProposalContent,
   parseProposalState,
   ProposalAction,
@@ -79,23 +80,38 @@ export const useProposal = (instructionsIndex: number) => {
         const activationTimestamp = parseBigNumber(metadata.activationTimestamp, 0) * 1000;
         const activationTimelock = parseBigNumber(activationTimelines.activationTimelock, 0) * 1000;
         const activationDeadline = parseBigNumber(activationTimelines.activationDeadline, 0) * 1000;
+        const executionTimelock = parseBigNumber(activationTimelines.executionTimelock, 0) * 1000;
+        const executionDeadline = parseBigNumber(activationTimelines.executionDeadline, 0) * 1000;
         const collateralDuration = parseBigNumber(activationTimelines.collateralDuration, 0) * 1000;
         const votingPeriod = parseBigNumber(activationTimelines.votingPeriod, 0) * 1000;
         const earliestActivation = submissionTimestamp + activationTimelock;
         const activationExpiry = submissionTimestamp + activationDeadline;
+        const earliestExecution = activationTimestamp + executionTimelock;
+        const executionExpiry = activationTimestamp + executionDeadline;
         const votingExpiry = activationTimestamp + votingPeriod;
         const isActive = votingExpiry > Date.now();
 
         const collateralClaimableAt = submissionTimestamp + collateralDuration;
+        const totalRegisteredVotes = parseBigNumber(metadata.totalRegisteredVotes, 18);
+        const yesVotes = parseBigNumber(metadata.yesVotes, 18);
+        const noVotes = parseBigNumber(metadata.noVotes, 18);
+        const notEnoughVotes = notEnoughVotesToExecute({
+          totalRegisteredVotes,
+          yesVotes,
+          noVotes,
+          executionThreshold: activationTimelines.executionThresholdAsNumber,
+        });
+
         const proposalState = parseProposalState({
+          isExecuted: metadata.isExecuted,
+          notEnoughVotes,
           activationTimestamp,
           earliestActivation,
           activationExpiry,
           votingExpiry,
+          earliestExecution,
+          executionExpiry,
         });
-        const totalRegisteredVotes = parseBigNumber(metadata.totalRegisteredVotes, 18);
-        const yesVotes = parseBigNumber(metadata.yesVotes, 18);
-        const noVotes = parseBigNumber(metadata.noVotes, 18);
 
         const currentProposal = {
           id: instructionsIndex,
@@ -106,6 +122,9 @@ export const useProposal = (instructionsIndex: number) => {
           activationTimestamp: activationTimestamp,
           activationDeadline: activationDeadline,
           activationExpiry: activationExpiry,
+          executionDeadline: executionDeadline,
+          executionExpiry: executionExpiry,
+          isExecuted: metadata.isExecuted,
           votingExpiry: votingExpiry,
           timeRemaining: proposalState.jsTimeRemaining,
           nextDeadline: proposalState.nextDeadline,
@@ -114,6 +133,8 @@ export const useProposal = (instructionsIndex: number) => {
           totalRegisteredVotes,
           yesVotes,
           noVotes,
+          notEnoughVotesToExecute: notEnoughVotes,
+          quorum: totalRegisteredVotes * activationTimelines.executionThresholdAsNumber,
           uri: discussionURL,
           content,
           now: new Date(),
diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts
index 8fc976a460..4e7c6dbb5b 100644
--- a/src/hooks/useProposals.ts
+++ b/src/hooks/useProposals.ts
@@ -35,7 +35,7 @@ export interface proposalMetadata {
 }
 
 /// Data type for returning full proposal informations
-export interface Proposal {
+interface IProposal {
   id: number;
   title: string;
   submitter: string;
@@ -49,7 +49,7 @@ export interface Proposal {
   content: string;
 }
 
-export interface IAnyProposal extends Omit<Proposal, "isActive"> {
+export interface IAnyProposal extends Omit<IProposal, "isActive"> {
   timeRemaining: number;
   nextDeadline: number;
   collateralClaimableAt: number;
@@ -58,13 +58,12 @@ export interface IAnyProposal extends Omit<Proposal, "isActive"> {
   activationTimestamp: number;
   activationDeadline: number;
   activationExpiry: number;
+  executionDeadline: number;
+  executionExpiry: number;
+  isExecuted: boolean;
   votingExpiry: number;
-}
-
-export interface IActiveProposal {
-  instructionsId: number;
-  activationTimestamp: number;
-  timeRemaining: number;
+  notEnoughVotesToExecute: boolean;
+  quorum: number;
 }
 
 export interface IProposalContent {
@@ -84,6 +83,9 @@ export type PStatus =
   | "ready to activate" // ready to activate for voting
   | "expired activation" // missed activation window
   | "active" // active for voting
+  | "awaiting execution"
+  | "ready to execute"
+  | "expired execution"
   | "executed" // passed & executed / implemented
   | "draft"
   | "closed";
@@ -143,25 +145,54 @@ export const useActivationTimelines = () => {
   );
 };
 
+export const notEnoughVotesToExecute = ({
+  totalRegisteredVotes,
+  yesVotes,
+  noVotes,
+  executionThreshold,
+}: {
+  totalRegisteredVotes: number;
+  yesVotes: number;
+  noVotes: number;
+  executionThreshold: number;
+}) => {
+  return (yesVotes - noVotes) * 100 < totalRegisteredVotes * executionThreshold;
+};
+
 /**
  * All parameters & return values are js timestamps (milliseconds).
  */
 export const parseProposalState = ({
+  isExecuted,
+  notEnoughVotes,
   activationTimestamp,
   earliestActivation,
   activationExpiry,
   votingExpiry,
+  earliestExecution,
+  executionExpiry,
 }: {
+  isExecuted: boolean;
+  notEnoughVotes: boolean;
   activationTimestamp: number;
   earliestActivation: number;
   activationExpiry: number;
   votingExpiry: number;
+  earliestExecution: number;
+  executionExpiry: number;
 }): { status: PStatus; jsTimeRemaining: number; nextDeadline: number } => {
   const now = Date.now();
   let status: PStatus;
   let jsTimeRemaining: number;
   let nextDeadline: number;
   console.log("parse Proposal state", now, earliestActivation, activationExpiry, activationTimestamp, votingExpiry);
+  if (isExecuted) {
+    return {
+      status: "executed",
+      jsTimeRemaining: 0,
+      nextDeadline: votingExpiry,
+    };
+  }
   if (now < earliestActivation) {
     console.log("now < earliestActivation - discussion", now, earliestActivation);
     // "discussion" // created but not ready to activate
@@ -198,6 +229,22 @@ export const parseProposalState = ({
     status = "active";
     jsTimeRemaining = votingExpiry - now;
     nextDeadline = votingExpiry;
+  } else if (activationTimestamp > 0 && now >= votingExpiry && notEnoughVotes) {
+    status = "closed";
+    jsTimeRemaining = 0;
+    nextDeadline = votingExpiry;
+  } else if (activationTimestamp > 0 && now >= votingExpiry && now < earliestExecution) {
+    status = "awaiting execution";
+    jsTimeRemaining = earliestExecution - now;
+    nextDeadline = earliestExecution;
+  } else if (activationTimestamp > 0 && now >= votingExpiry && now >= earliestExecution && now < executionExpiry) {
+    status = "ready to execute";
+    jsTimeRemaining = executionExpiry - now;
+    nextDeadline = executionExpiry;
+  } else if (activationTimestamp > 0 && now >= votingExpiry && now >= executionExpiry) {
+    status = "expired execution";
+    jsTimeRemaining = votingExpiry - now;
+    nextDeadline = votingExpiry;
   } else {
     console.log("else - closed");
     status = "closed";
@@ -327,7 +374,7 @@ export const proposalsQueryKey = (filters: IProposalState) => {
   }
 };
 
-export const filterStatement = ({ proposal, filters }: { proposal: Proposal; filters: IProposalState }) => {
+export const filterStatement = ({ proposal, filters }: { proposal: IAnyProposal; filters: IProposalState }) => {
   let result = proposal.isActive;
   if (filters) {
     switch (filters.state) {
diff --git a/src/hooks/useVoting.ts b/src/hooks/useVoting.ts
index b9268ce594..49c2564e0c 100644
--- a/src/hooks/useVoting.ts
+++ b/src/hooks/useVoting.ts
@@ -134,11 +134,13 @@ export const useGetVotesCastByVoter = (
 export const useUserVote = (proposalId: number, voterAddress: string) => {
   const { data: votesCastEvents, isLoading, isFetched } = useGetVotesCastForProposalAndVoter(proposalId, voterAddress);
   let thisVote: DecimalBigNumber = new DecimalBigNumber("0", 18);
+  let voteYes = false;
   if (isFetched && !!votesCastEvents && votesCastEvents?.length > 0) {
     thisVote = new DecimalBigNumber(votesCastEvents[0].args.userVotes, 18);
+    voteYes = votesCastEvents[0].args.approve;
   }
   return {
-    data: thisVote,
+    data: { amount: thisVote, voteYes },
     isFetched,
     isLoading,
   };
diff --git a/src/themes/dark.js b/src/themes/dark.js
index 896e9e3b33..45c87351e8 100644
--- a/src/themes/dark.js
+++ b/src/themes/dark.js
@@ -50,6 +50,13 @@ export const dark = createTheme(
             }
             `,
         },
+        MuiLinearProgress: {
+          styleOverrides: {
+            barColorSecondary: {
+              backgroundColor: colors.primary[300],
+            },
+          },
+        },
         MuiSwitch: {
           styleOverrides: {
             switchBase: {
diff --git a/src/themes/light.js b/src/themes/light.js
index 59504cdc64..93469dd4e6 100644
--- a/src/themes/light.js
+++ b/src/themes/light.js
@@ -53,6 +53,13 @@ export const light = createTheme(
             }
             `,
         },
+        MuiLinearProgress: {
+          styleOverrides: {
+            barColorSecondary: {
+              backgroundColor: colors.primary[300],
+            },
+          },
+        },
         MuiSwitch: {
           styleOverrides: {
             switchBase: {
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index 3fa399bb76..c991bb123c 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -91,7 +91,7 @@ const ProposalContainer = ({ instructionsId }: { instructionsId: number }) => {
               publishedDate={new Date(proposal?.submissionTimestamp)}
               status={proposal?.state}
               voteEndDate={new Date(proposal?.nextDeadline)}
-              quorum={1}
+              quorum={proposal.quorum}
               votesAgainst={proposal?.noVotes}
               votesFor={proposal?.yesVotes}
             />
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index 12d3d3568d..bc8f5917cb 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -12,6 +12,7 @@ import ActionButtons from "src/views/Governance/components/ActionButtons";
 import { BackButton } from "src/views/Governance/components/BackButton";
 import { CastVote } from "src/views/Governance/components/ProposalPage/components/CastVote";
 import { PollDetailsTab } from "src/views/Governance/components/ProposalPage/components/PollDetailsTab";
+import { StatusBar } from "src/views/Governance/components/ProposalPage/components/StatusBar";
 import { VotesTab } from "src/views/Governance/components/ProposalPage/components/VotesTab";
 import { toCapitalCase } from "src/views/Governance/helpers";
 
@@ -37,6 +38,7 @@ export const PageWrapper = ({ proposal }: { proposal: IAnyProposal }) => (
             <ActionButtons />
           </Grid>
         </Grid>
+        <StatusBar proposal={proposal} />
         <CastVote proposal={proposal} />
         <Box display="flex" justifyContent="center">
           <Tabs value={false} centered textColor="primary" indicatorColor="primary">
diff --git a/src/views/Governance/components/ProposalPage/components/CastVote.tsx b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
index 536d29034b..1e84af66c1 100644
--- a/src/views/Governance/components/ProposalPage/components/CastVote.tsx
+++ b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
@@ -4,6 +4,7 @@ import { BigNumber } from "ethers";
 import { useState } from "react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatBalance } from "src/helpers";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useVoteBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { useUserVote, useVote } from "src/hooks/useVoting";
@@ -34,17 +35,28 @@ export const CastVote = ({ proposal }: ProposalTabProps) => {
           Your Vote
         </Typography>
       </Box>
-      {["active", "closed"].includes(proposal.state) && (
-        <Box display="flex" flexDirection="row">
-          {isConnected && <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />}
+      <Box display="flex" flexDirection="row">
+        {isConnected && voteValue && voteValue.amount.gt("0") ? (
+          <Metric label={`Your Voting Power`} metric={`${formatBalance(2, voteValue.amount)} vOHM`} />
+        ) : (
+          <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />
+        )}
+        {voteValue && voteValue.amount.gt("0") ? (
+          <Metric label={`Your Vote`} metric={`${voteValue.voteYes ? "Yes" : "No"}`} />
+        ) : ["active", "closed"].includes(proposal.state) ? (
           <Metric
             label={proposal.state === "active" ? `Vote Closes On` : proposal.state === "closed" ? `Vote Closed On` : ``}
             metric={`${proposalDateFormat.format(proposal.nextDeadline)}`}
           />
-        </Box>
-      )}
+        ) : (
+          <Metric
+            label={"Total Registered Votes"}
+            metric={`${formatBalance(2, new DecimalBigNumber(String(proposal.totalRegisteredVotes)))} vOHM`}
+          />
+        )}
+      </Box>
       <>
-        {voteValue && !voteValue.gt("0") && (
+        {voteValue && !voteValue.amount.gt("0") && (
           <>
             <Box display="flex" flexDirection="row" justifyContent="center">
               <TertiaryButton
diff --git a/src/views/Governance/components/ProposalPage/components/StatusBar.tsx b/src/views/Governance/components/ProposalPage/components/StatusBar.tsx
new file mode 100644
index 0000000000..59832a8a83
--- /dev/null
+++ b/src/views/Governance/components/ProposalPage/components/StatusBar.tsx
@@ -0,0 +1,62 @@
+import { Box, LinearProgress, Typography, useTheme } from "@mui/material";
+import { ProposalTabProps } from "src/views/Governance/interfaces";
+
+export const StatusBar = ({ proposal }: ProposalTabProps) => {
+  const theme = useTheme();
+  const gold = theme.colors.primary[300];
+  const gray = theme.colors.gray[40];
+
+  const ProgressBarAndLabel = ({ label, active }: { label: string; active: boolean }) => {
+    return (
+      <>
+        <LinearProgress variant="determinate" value={active ? 100 : 0} color={active ? "secondary" : "primary"} />
+        <Typography variant="body2" sx={{ color: active ? gold : gray }}>
+          {label}
+        </Typography>
+      </>
+    );
+  };
+
+  return (
+    <Box
+      display="flex"
+      flexDirection={"row"}
+      sx={{ width: "100%", marginBottom: "5px" }}
+      justifyContent="space-evenly"
+      flexWrap={"wrap"}
+    >
+      <Box flexGrow={1} sx={{ paddingX: "2px" }}>
+        <ProgressBarAndLabel label="Submitted" active={["discussion", "ready to activate"].includes(proposal.state)} />
+      </Box>
+      <Box flexGrow={1} sx={{ paddingX: "2px" }}>
+        <ProgressBarAndLabel label="Voting" active={proposal.state === "active"} />
+      </Box>
+      {["closed", "expired activation", "expired execution"].includes(proposal.state) ? (
+        <Box flexGrow={1} sx={{ paddingX: "2px" }}>
+          <ProgressBarAndLabel
+            label={
+              proposal.state === "expired activation"
+                ? `Expired Activation`
+                : proposal.state === "expired execution"
+                ? `Expired Execution`
+                : `Closed`
+            }
+            active={true}
+          />
+        </Box>
+      ) : (
+        <>
+          <Box flexGrow={1} sx={{ paddingX: "2px" }}>
+            <ProgressBarAndLabel
+              label="Awaiting Execution"
+              active={["awaiting execution", "ready to execute"].includes(proposal.state)}
+            />
+          </Box>
+          <Box flexGrow={1} sx={{ paddingX: "2px" }}>
+            <ProgressBarAndLabel label="Executed" active={proposal.state === "executed"} />
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/components/UserVote.tsx b/src/views/Governance/components/ProposalPage/components/UserVote.tsx
index c65905de2b..ddccef28ad 100644
--- a/src/views/Governance/components/ProposalPage/components/UserVote.tsx
+++ b/src/views/Governance/components/ProposalPage/components/UserVote.tsx
@@ -16,7 +16,7 @@ export const UserVote = ({ proposalId, voterAddress }: { proposalId: number; vot
         <>
           <Metric
             label={`You have previously voted on this proposal with `}
-            metric={`${formatBalance(2, voteValue)} vOHM`}
+            metric={`${formatBalance(2, voteValue.amount)} vOHM`}
           />
         </>
       )}
diff --git a/src/views/Governance/constants.ts b/src/views/Governance/constants.ts
deleted file mode 100644
index 5943038405..0000000000
--- a/src/views/Governance/constants.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Proposal } from "src/hooks/useProposals";
-
-export const NULL_PROPOSAL: Proposal = {
-  id: -1,
-  title: "",
-  submitter: "",
-  submissionTimestamp: 0,
-  isActive: false,
-  state: "closed",
-  endorsements: 0,
-  yesVotes: 0,
-  noVotes: 0,
-  uri: "",
-  content: "",
-};

From 88a6b1a01ed23a8a768f7b83b70c5719d8ad48b5 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 13 Mar 2023 20:16:49 -0500
Subject: [PATCH 111/113] fix cast vote hero

---
 .../ProposalPage/components/CastVote.tsx      | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/views/Governance/components/ProposalPage/components/CastVote.tsx b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
index 1e84af66c1..2bafac7ad0 100644
--- a/src/views/Governance/components/ProposalPage/components/CastVote.tsx
+++ b/src/views/Governance/components/ProposalPage/components/CastVote.tsx
@@ -1,4 +1,4 @@
-import { Box, capitalize, Typography, useTheme } from "@mui/material";
+import { Box, capitalize, useTheme } from "@mui/material";
 import { Metric, PrimaryButton, TertiaryButton } from "@olympusdao/component-library";
 import { BigNumber } from "ethers";
 import { useState } from "react";
@@ -31,28 +31,34 @@ export const CastVote = ({ proposal }: ProposalTabProps) => {
     <Box borderRadius="6px" padding="18px" sx={{ backgroundColor: theme.colors.gray[700] }}>
       <Box display="flex" flexDirection="column">
         <ActivateVoting proposal={proposal} />
-        <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
+        {/* <Typography fontSize="15px" fontWeight={500} lineHeight="24px">
           Your Vote
-        </Typography>
+        </Typography> */}
       </Box>
       <Box display="flex" flexDirection="row">
-        {isConnected && voteValue && voteValue.amount.gt("0") ? (
-          <Metric label={`Your Voting Power`} metric={`${formatBalance(2, voteValue.amount)} vOHM`} />
-        ) : (
-          <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />
-        )}
         {voteValue && voteValue.amount.gt("0") ? (
-          <Metric label={`Your Vote`} metric={`${voteValue.voteYes ? "Yes" : "No"}`} />
-        ) : ["active", "closed"].includes(proposal.state) ? (
-          <Metric
-            label={proposal.state === "active" ? `Vote Closes On` : proposal.state === "closed" ? `Vote Closed On` : ``}
-            metric={`${proposalDateFormat.format(proposal.nextDeadline)}`}
-          />
+          <>
+            <Metric label={`Your Voting Power`} metric={`${formatBalance(2, voteValue.amount)} vOHM`} />
+            <Metric label={`Your Vote`} metric={`${voteValue.voteYes ? "Yes" : "No"}`} />
+          </>
+        ) : proposal.state === "active" ? (
+          <>
+            <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />
+            <Metric label={`Vote Closes On`} metric={`${proposalDateFormat.format(proposal.nextDeadline)}`} />
+          </>
+        ) : proposal.state === "closed" ? (
+          <>
+            <Metric label={`Vote Closed On`} metric={`${proposalDateFormat.format(proposal.nextDeadline)}`} />
+            <Metric label={`Your Vote`} metric={`None`} />
+          </>
         ) : (
-          <Metric
-            label={"Total Registered Votes"}
-            metric={`${formatBalance(2, new DecimalBigNumber(String(proposal.totalRegisteredVotes)))} vOHM`}
-          />
+          <>
+            <Metric label={`Your Voting Power`} metric={`${formatBalance(2, votesBalance)} vOHM`} />
+            <Metric
+              label={"Total Registered Votes"}
+              metric={`${formatBalance(2, new DecimalBigNumber(String(proposal.totalRegisteredVotes)))} vOHM`}
+            />
+          </>
         )}
       </Box>
       <>

From 4a0106ac370d0e71bef2a015a19c04b7d707bef4 Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 13 Mar 2023 21:48:17 -0500
Subject: [PATCH 112/113] reorg proposals dashobard rows

---
 src/themes/dark.js                            |   7 +
 src/themes/light.js                           |   7 +
 src/views/Governance/ProposalsDashboard.tsx   |   3 +-
 src/views/Governance/components/Proposal.tsx  | 232 ++++++++++++++++++
 .../components/ProposalPage/ProposalPage.tsx  |  37 +--
 5 files changed, 268 insertions(+), 18 deletions(-)
 create mode 100644 src/views/Governance/components/Proposal.tsx

diff --git a/src/themes/dark.js b/src/themes/dark.js
index 45c87351e8..1307d99091 100644
--- a/src/themes/dark.js
+++ b/src/themes/dark.js
@@ -346,6 +346,13 @@ export const dark = createTheme(
             },
           },
         },
+        MuiSvgIcon: {
+          styleOverrides: {
+            colorAction: {
+              color: colors.primary[300],
+            },
+          },
+        },
         MuiTypography: {
           styleOverrides: {
             root: {
diff --git a/src/themes/light.js b/src/themes/light.js
index 93469dd4e6..b898be9fd8 100644
--- a/src/themes/light.js
+++ b/src/themes/light.js
@@ -364,6 +364,13 @@ export const light = createTheme(
             },
           },
         },
+        MuiSvgIcon: {
+          styleOverrides: {
+            colorAction: {
+              color: colors.primary[300],
+            },
+          },
+        },
         MuiTypography: {
           styleOverrides: {
             root: {
diff --git a/src/views/Governance/ProposalsDashboard.tsx b/src/views/Governance/ProposalsDashboard.tsx
index c991bb123c..ba76c5b249 100644
--- a/src/views/Governance/ProposalsDashboard.tsx
+++ b/src/views/Governance/ProposalsDashboard.tsx
@@ -2,13 +2,14 @@ import "src/views/Governance/Governance.scss";
 
 import { Box, Grid, Link, Typography } from "@mui/material";
 import { Skeleton } from "@mui/material";
-import { Paper, Proposal, Tab, Tabs } from "@olympusdao/component-library";
+import { Paper, Tab, Tabs } from "@olympusdao/component-library";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { useProposal } from "src/hooks/useProposal";
 import { useGetLastProposalId } from "src/hooks/useProposals";
 import ActionButtons from "src/views/Governance/components/ActionButtons";
 import { FilterModal } from "src/views/Governance/components/FilterModal";
+import { Proposal } from "src/views/Governance/components/Proposal";
 import { SearchBar } from "src/views/Governance/components/SearchBar/SearchBar";
 import { toCapitalCase } from "src/views/Governance/helpers";
 
diff --git a/src/views/Governance/components/Proposal.tsx b/src/views/Governance/components/Proposal.tsx
new file mode 100644
index 0000000000..42a05f447b
--- /dev/null
+++ b/src/views/Governance/components/Proposal.tsx
@@ -0,0 +1,232 @@
+import { ChevronRight } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
+import { styled, useTheme } from "@mui/material/styles";
+import { Chip, Icon } from "@olympusdao/component-library";
+import { FC } from "react";
+import { PStatus } from "src/hooks/useProposals";
+import { mapProposalStatus } from "src/views/Governance/components/ProposalPage/ProposalPage";
+
+interface OHMProposalProps {
+  /**
+   * Returns appropriate chip label and card styling depending on status passed
+   */
+  status: PStatus;
+  /**
+   * Label for the Chip
+   */
+  chipLabel?: string;
+  /**
+   * Voting End Date
+   */
+  voteEndDate: Date;
+  /**
+   * Title of the Proposal;
+   */
+  proposalTitle: string;
+  /**
+   * Date Proposa was Published
+   */
+  publishedDate: Date;
+  /**
+   * Count of Votes For
+   */
+  votesFor?: number;
+  /**
+   * Count of Votes Against
+   */
+  votesAgainst?: number;
+  /**
+   * Count of Quorum needed
+   */
+  quorum?: number;
+}
+
+type BoxProps = {
+  status: OHMProposalProps["status"];
+};
+
+const StyledBox = styled(Box, {
+  shouldForwardProp: prop => prop !== "status",
+})<BoxProps>(({ theme, status }) => {
+  return {
+    background: status === "active" ? theme.colors.paper.cardHover : theme.colors.paper.card,
+    borderRadius: "9px",
+    padding: "18px",
+    width: "100%",
+  };
+});
+
+/**
+ * Component for Displaying A Single Governance Proposal Card
+ */
+export const Proposal: FC<OHMProposalProps> = ({
+  status,
+  chipLabel,
+  voteEndDate,
+  proposalTitle,
+  publishedDate,
+  quorum = 0,
+  votesAgainst = 0,
+  votesFor = 0,
+}) => {
+  const theme = useTheme();
+  const dateFormat = new Intl.DateTimeFormat([], {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZoneName: "short",
+    hour: "numeric",
+    minute: "numeric",
+  });
+  const formattedEndDate = dateFormat.format(voteEndDate);
+  const formattedPublishedDate = dateFormat.format(publishedDate);
+
+  const currentDate = Date.now();
+  const twelveHours = 43200000;
+  const timeLeft = Number(voteEndDate) - currentDate;
+  const insideTwelveHours = timeLeft > 0 && timeLeft <= twelveHours;
+  const hoursLeft = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+
+  //calculate votes
+
+  const totalVoteCount = votesAgainst + votesFor;
+
+  type formattedVoteLabelType = {
+    label: string;
+    color?: any;
+  };
+  const FormattedVoteLabel = ({ label, color }: formattedVoteLabelType) => (
+    <Typography mt="-18px" fontSize="12px" fontWeight="500" color={color}>
+      {label}
+    </Typography>
+  );
+
+  const VoteThresholdBar = () => {
+    return (
+      <>
+        {totalVoteCount > 0 && (
+          <Box display="flex" alignItems="center" flexDirection="column">
+            <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center">
+              <Typography fontSize="12px" fontWeight={500} lineHeight="20px">
+                Threshold
+              </Typography>
+              <Typography fontSize="10px" fontWeight={500} lineHeight="18px">
+                |
+              </Typography>
+            </Box>
+            <Box
+              display="flex"
+              flexDirection="row"
+              width="323px"
+              borderRadius="8px"
+              alignItems="center"
+              mt="-18px"
+              justifyContent="space-between"
+              sx={{ backgroundColor: theme.colors.gray[90] }}
+            >
+              <Box
+                width={`calc(161.5px * ${votesFor}/${quorum})`}
+                height="5px"
+                borderRadius="8px 0 0 8px"
+                sx={{
+                  backgroundColor: theme.colors.feedback.success,
+                }}
+              >
+                <FormattedVoteLabel label="Yes" color={theme.colors.feedback.success} />
+              </Box>
+              {/* <Box
+            sx={{
+              backgroundColor: theme.colors.gray[90],
+              height: "5px",
+              width: `calc(323px)`,
+            }}
+            textAlign="center"
+          ></Box> */}
+              <Box
+                width={`calc(161.5px * ${votesAgainst}/${quorum})`}
+                sx={{
+                  backgroundColor: theme.colors.feedback.error,
+                  height: "5px",
+                }}
+                textAlign="end"
+              >
+                <FormattedVoteLabel label="No" color={theme.colors.feedback.error} />
+              </Box>
+            </Box>
+          </Box>
+        )}
+      </>
+    );
+  };
+  return (
+    <StyledBox
+      className="proposal-dash-row-container"
+      display="flex"
+      flexDirection="column"
+      status={status}
+      alignContent="center"
+      flexWrap="wrap"
+      gap={1}
+    >
+      <Box display="flex" flexDirection="column" alignContent="center" flexWrap="wrap" gap={0} sx={{ width: "100%" }}>
+        <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          justifyContent={"space-between"}
+          sx={{ width: "100%" }}
+        >
+          <Typography mt="6px" fontSize="15px" lineHeight="21px" fontWeight="500">
+            {proposalTitle}
+          </Typography>
+          {chipLabel && <Chip label={chipLabel} template={mapProposalStatus(status)} strong />}
+        </Box>
+        <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          justifyContent={"space-between"}
+          sx={{ width: "100%" }}
+        >
+          <>
+            <Typography variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+              {publishedDate && `Posted On ${formattedPublishedDate} `}
+            </Typography>
+
+            <Box pl="9px" display="flex" gap={1}>
+              {voteEndDate && (
+                <>
+                  <Typography ml="9px" variant="body2" color={theme.colors.gray[90]} lineHeight="18px">
+                    {insideTwelveHours ? `ends in ${hoursLeft} Hours ${minutesLeft} minutes` : formattedEndDate}
+                  </Typography>
+                  <Icon
+                    name={insideTwelveHours ? "timeLeft" : "calendar"}
+                    style={{ fontSize: "18px", fill: theme.colors.gray[90] }}
+                  />
+                </>
+              )}
+            </Box>
+          </>
+        </Box>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        justifyContent={"space-between"}
+        sx={{ width: "100%" }}
+      >
+        <Box>
+          <VoteThresholdBar />
+        </Box>
+        <Box display={`flex`} flexDirection="row" gap={1} alignItems="center">
+          <Typography color={theme.colors.primary[300]} fontSize="15px" lineHeight="21px" fontWeight="500">
+            View Proposal
+          </Typography>
+          <ChevronRight color={"action"} viewBox="6 6 12 12" style={{ width: "12px", height: "12px" }} />
+        </Box>
+      </Box>
+    </StyledBox>
+  );
+};
diff --git a/src/views/Governance/components/ProposalPage/ProposalPage.tsx b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
index bc8f5917cb..53bfb46cd4 100644
--- a/src/views/Governance/components/ProposalPage/ProposalPage.tsx
+++ b/src/views/Governance/components/ProposalPage/ProposalPage.tsx
@@ -16,6 +16,25 @@ import { StatusBar } from "src/views/Governance/components/ProposalPage/componen
 import { VotesTab } from "src/views/Governance/components/ProposalPage/components/VotesTab";
 import { toCapitalCase } from "src/views/Governance/helpers";
 
+export const mapProposalStatus = (status: PStatus) => {
+  switch (status) {
+    case "active":
+      return "success" as OHMChipProps["template"];
+    case "executed":
+      return "purple" as OHMChipProps["template"];
+    case "discussion":
+    case "ready to activate":
+    case "ready to execute":
+      return "userFeedback" as OHMChipProps["template"];
+    case "closed":
+    case "expired activation":
+    case "expired execution":
+      return "gray" as OHMChipProps["template"];
+    case "draft":
+      return "darkGray" as OHMChipProps["template"];
+  }
+};
+
 export const proposalDateFormat = new Intl.DateTimeFormat([], {
   month: "short",
   day: "numeric",
@@ -110,22 +129,6 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
   const { proposal } = props;
   const theme = useTheme();
 
-  const mapStatus = (status: PStatus) => {
-    switch (status) {
-      case "active":
-        return "success" as OHMChipProps["template"];
-      case "executed":
-        return "purple" as OHMChipProps["template"];
-      case "discussion":
-      case "ready to activate":
-        return "userFeedback" as OHMChipProps["template"];
-      case "closed":
-      case "expired activation":
-        return "gray" as OHMChipProps["template"];
-      case "draft":
-        return "darkGray" as OHMChipProps["template"];
-    }
-  };
   const formattedPublishedDate = proposalDateFormat.format(proposal.submissionTimestamp);
 
   return (
@@ -142,7 +145,7 @@ const ProposalHeader = (props: { proposal: IAnyProposal }) => {
         </Typography>
       </Grid>
       <Box display="flex" flexDirection="row" mt="4px">
-        <Chip label={toCapitalCase(proposal.state)} template={mapStatus(proposal.state)} strong />
+        <Chip label={toCapitalCase(proposal.state)} template={mapProposalStatus(proposal.state)} strong />
         <Box pl="9px" display="flex" alignItems="center">
           {proposal && <TimeRemaining proposal={proposal} />}
         </Box>

From 950415a781cb5babbadcaeb516c77f9c582819bc Mon Sep 17 00:00:00 2001
From: appleseed-iii <appleseed-iii@protonmail.com>
Date: Mon, 8 May 2023 08:19:34 -0500
Subject: [PATCH 113/113] md pkg upgrades

---
 package.json |  4 ++--
 yarn.lock    | 34 +++++++++++++++-------------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index cb9e0c0a19..08cb399dc9 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "@reduxjs/toolkit": "^1.9.3",
     "@tanstack/react-query": "^4.2.3",
     "@types/recharts": "^1.8.24",
-    "@uiw/react-md-editor": "^3.19.7",
+    "@uiw/react-md-editor": "^3.20.10",
     "@vitejs/plugin-react-swc": "^3.2.0",
     "@wundergraph/react-query": "^0.8.22",
     "@wundergraph/sdk": "^0.152.0",
@@ -65,7 +65,7 @@
     "react-ga": "^3.3.1",
     "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.4.0",
-    "react-markdown": "^8.0.6",
+    "react-markdown": "^8.0.7",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "react-step-progress-bar": "^1.0.3",
diff --git a/yarn.lock b/yarn.lock
index fe7c236677..5e0b42d83d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2678,9 +2678,9 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/mdurl@*":
+"@types/mdurl@*", "@types/mdurl@^1.0.0":
   version "1.0.2"
-  resolved "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
   integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
 
 "@types/minimatch@*":
@@ -3059,10 +3059,10 @@
     remark-gfm "~3.0.1"
     unist-util-visit "^4.1.0"
 
-"@uiw/react-md-editor@^3.19.7":
-  version "3.19.7"
-  resolved "https://registry.yarnpkg.com/@uiw/react-md-editor/-/react-md-editor-3.19.7.tgz#e575c77a011083b806cdd90346f9ebe7a83e08f7"
-  integrity sha512-mZb8c6aTwq9k6t6xav8zNoD/f6q7w5BmMiixswiDCA7/YWc19Xp+qCtp5C5FQtb4AStxozIRjY1uWK4VQOI/gQ==
+"@uiw/react-md-editor@^3.20.10":
+  version "3.20.10"
+  resolved "https://registry.yarnpkg.com/@uiw/react-md-editor/-/react-md-editor-3.20.10.tgz#e017020ca6e420fdcd3f163fadcd173dc7e62a41"
+  integrity sha512-/5M7rNzHVsAyQOVxXsNH9FRMd2/0rB+w32CkTygm+gsl6zz1x4CphkgTOe2rGqBs7MdqdwmNrS9g6xicBgqUvw==
   dependencies:
     "@babel/runtime" "^7.14.6"
     "@uiw/react-markdown-preview" "^4.1.5"
@@ -8479,6 +8479,11 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz"
   integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
 
+mdurl@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 media-query-parser@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/media-query-parser/-/media-query-parser-2.0.2.tgz"
@@ -8767,15 +8772,6 @@ micromark-util-sanitize-uri@^1.0.0:
     micromark-util-encode "^1.0.0"
     micromark-util-symbol "^1.0.0"
 
-micromark-util-sanitize-uri@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.1.0.tgz#f12e07a85106b902645e0364feb07cf253a85aee"
-  integrity sha512-RoxtuSCX6sUNtxhbmsEFQfWzs8VN7cTctmBPvYivo98xb/kDEoTCtJQX5wyzIYEmk/lvNFTat4hL8oW0KndFpg==
-  dependencies:
-    micromark-util-character "^1.0.0"
-    micromark-util-encode "^1.0.0"
-    micromark-util-symbol "^1.0.0"
-
 micromark-util-subtokenize@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz"
@@ -10116,10 +10112,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@^8.0.6:
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.6.tgz#3e939018f8bfce800ffdf22cf50aba3cdded7ad1"
-  integrity sha512-KgPWsYgHuftdx510wwIzpwf+5js/iHqBR+fzxefv8Khk3mFbnioF1bmL2idHN3ler0LMQmICKeDrWnZrX9mtbQ==
+react-markdown@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
+  integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
   dependencies:
     "@types/hast" "^2.0.0"
     "@types/prop-types" "^15.0.0"