Arbitrary Contract Interaction (ACI) (#836)

* frontend with mocks

* initial integration

* API working

* ACI Form with various entrypoints

* Update  node version

* Fix for API in ACI

* WIP - ACI Implementation Debugging

* WIP - ACI Interaction (Pseudocode working)

* Error handling + Params now being passed into generated lambda

* Changes for adding ACI Executor and simplified UI components

* Removed Cycle Ignore Option

* Fixed prettier issues

* Added ACI Contract within the form  & fixed the "Submit" button.

* Improved Components for ConfigProposalForm

* Removed unused imports

* Modal Improvements

* Renamed simple lambda 3 to ACI_Executor

* Fixed Other UI Issues

---------

Co-authored-by: Ashutosh Kumar <[email protected]>
Co-authored-by: Ashutosh Kumar <[email protected]>

README.md

@@ -10,7 +10,7 @@ The following dependencies are required to run homebase-app:
 
 | Dependency | Version             |
 | ---------- | ------------------- |
-| Node       | `v16.16.0` or above |
+| Node       | `v18.20.0` or above |
 | Yarn       | `v1.22.*` or above  |
 
 # Third Party Services

package.json

@@ -42,6 +42,7 @@
     "@types/valid-url": "^1.0.4",
     "@web3modal/wagmi": "^5.0.6",
     "assert": "^2.0.0",
+    "assert-never": "^1.2.1",
     "bignumber.js": "^9.0.1",
     "blockies-ts": "^1.0.0",
     "caniuse-lite": "",

src/components/ui/Button.tsx

@@ -0,0 +1,28 @@
+import { styled, Button as MaterialButton } from "@material-ui/core"
+
+export const Button = styled(MaterialButton)(({ theme }) => ({
+  "fontSize": "14px",
+  "justifyItems": "center",
+  "color": "#000",
+  "boxShadow": "0px 0px 7px -2px rgba(0, 0, 0, 0.2)",
+  "transition": ".15s ease-in",
+  "background": theme.palette.secondary.main,
+  "textTransform": "none",
+  "borderRadius": 4,
+  "padding": "8px 15px",
+  "marginRight": "8px",
+
+  "&$disabled": {
+    boxShadow: "none"
+  },
+
+  "&:hover": {
+    boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)",
+    backgroundColor: "#62eda5 !important",
+    transition: ".15s ease-in"
+  },
+
+  ["@media (max-width:1030px)"]: {
+    fontSize: "14px"
+  }
+}))

src/components/ui/ConfigProposalForm.tsx

@@ -0,0 +1,20 @@
+import { Grid, Typography, styled, CircularProgress } from "@material-ui/core"
+import { CheckOutlined } from "@material-ui/icons"
+
+const StyledRow = styled(Grid)({
+  marginTop: 30
+})
+
+const LoadingContainer = styled(Grid)({
+  minHeight: 651
+})
+
+const LoadingStateLabel = styled(Typography)({
+  marginTop: 40
+})
+
+const CheckIcon = styled(CheckOutlined)({
+  fontSize: 169
+})
+
+export { StyledRow, LoadingContainer, LoadingStateLabel, CheckIcon }

src/components/ui/Table.tsx

@@ -0,0 +1,18 @@
+import { styled, Grid, Theme } from "@material-ui/core"
+
+export const ContentContainer = styled(Grid)(({ theme }) => ({
+  borderRadius: 8,
+  background: "#24282D"
+}))
+
+export const TableHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
+  padding: "16px 46px",
+  minHeight: 34,
+  [theme.breakpoints.down("sm")]: {
+    gap: 10
+  }
+}))
+
+export const TableContainer = styled(ContentContainer)({
+  width: "100%"
+})

src/config.ts

@@ -0,0 +1,15 @@
+const AppConfig = {
+  env: process.env.REACT_APP_ENV,
+  CONST: {
+    ARBITRARY_CONTRACT_INTERACTION: "arbitrary_contract_interaction"
+  },
+  ACI: {
+    EXECUTOR_FUNCTION_NAME: "aci_executor",
+    EXECUTOR_LAMBDA: {
+      code: `(Left (Left (Pair (Pair { UNPAIR; UNPAIR; SWAP; UNPACK (pair (lambda %code (pair (pair (map %handler_storage string bytes) (bytes %packed_argument)) (pair %proposal_info (address %from) (nat %frozen_token) (bytes %proposal_metadata))) (pair (pair (option %guardian address) (map %handler_storage string bytes)) (list %operations operation))) (bytes %packed_argument)); ASSERT_SOME; UNPAIR; DIP{ SWAP; PAIR; PAIR}; SWAP; EXEC} {DROP; UNIT}) "aci_executor")))`,
+      type: `(or (or (pair %add_handler (pair (lambda %code (pair (pair (map %handler_storage string bytes) (bytes %packed_argument)) (pair %proposal_info (address %from) (nat %frozen_token) (bytes %proposal_metadata))) (pair (pair (option %guardian address) (map %handler_storage string bytes)) (list %operations operation))) (lambda %handler_check (pair bytes (map string bytes)) unit)) (string %name)) (pair %execute_handler (string %handler_name) (bytes %packed_argument))) (string %remove_handler))`
+    }
+  }
+}
+
+export default AppConfig

src/models/Contract.ts

@@ -0,0 +1,26 @@
+export interface ArbitraryContract {
+  counter: number
+  name: string
+  type: string
+  children: ContractChild[]
+}
+
+interface ContractChild {
+  counter: number
+  name: string
+  type: string
+  children: ParametersList[]
+  placeholder: string
+  validate: any
+  initValue: string
+}
+
+interface ParametersList {
+  counter: number
+  name: string
+  type: string
+  children: ParametersList[]
+  placeholder: string
+  validate: any
+  initValue: string
+}

src/modules/common/SmallButton.tsx

@@ -21,3 +21,27 @@ export const SmallButton = styled(Button)({
     transition: ".15s ease-in"
   }
 })
+
+export const SmallButtonDialog = styled(Button)({
+  "justifyItems": "center",
+  "fontSize": "16px",
+  "boxShadow": "0px 0px 7px -2px rgba(0, 0, 0, 0.2)",
+  "transition": ".15s ease-out",
+  "textTransform": "capitalize",
+  "borderRadius": 8,
+  "backgroundColor": "#81feb7 !important",
+  "color": "#1c1f23",
+  "padding": "8px 16px",
+
+  "&$disabled": {
+    boxShadow: "none",
+    backgroundColor: "#474E55 !important",
+    border: "none"
+  },
+
+  "&:hover": {
+    boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)",
+    backgroundColor: "#62eda5 !important",
+    transition: ".15s ease-in"
+  }
+})

src/modules/common/StyledSendButton.tsx

@@ -0,0 +1,14 @@
+import { styled } from "@material-ui/core"
+import { MainButton } from "./MainButton"
+
+const StyledSendButton = styled(MainButton)(({ theme }) => ({
+  "width": 101,
+  "color": "#1C1F23",
+  "&$disabled": {
+    opacity: 0.5,
+    boxShadow: "none",
+    cursor: "not-allowed"
+  }
+}))
+
+export { StyledSendButton }

src/modules/explorer/components/AllProposalsList.tsx

@@ -3,20 +3,8 @@ import { ProposalItem } from "modules/explorer/pages/User"
 import React, { useCallback, useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import { Proposal, ProposalStatus } from "services/services/dao/mappers/proposal/types"
-import { ContentContainer } from "./ContentContainer"
 import { ProposalFilter } from "./ProposalsFilter"
-
-const TableContainer = styled(ContentContainer)({
-  width: "100%"
-})
-
-const TableHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
-  padding: "16px 46px",
-  minHeight: 34,
-  [theme.breakpoints.down("sm")]: {
-    gap: 10
-  }
-}))
+import { TableContainer, TableHeader } from "components/ui/Table"
 
 const ProposalsFooter = styled(Grid)({
   padding: "16px 46px",