Changes for adding ACI Executor and simplified UI components

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: "simple_lambda_3",
+    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}) "simple_lambda_3")))`,
+      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/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",

src/modules/explorer/components/ArbitraryContractInteractionForm.tsx

@@ -32,6 +32,8 @@ import { Schema } from "@taquito/michelson-encoder"
 import BigNumber from "bignumber.js"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useDAOID } from "../pages/DAO/router"
+import AppConfig from "config"
+import { Link } from "react-router-dom"
 
 // Base ACI Lambda
 const aciBaseLambda = {
@@ -197,7 +199,8 @@ const ContractInteractionForm = ({
   setFieldTouched,
   setFieldError,
   isValid,
-  showHeader
+  showHeader,
+  daoLambdas
 }: any) => {
   const daoId = useDAOID()
   const [state, setState] = useState<Status>(Status.NEW_INTERACTION)
@@ -206,6 +209,8 @@ const ContractInteractionForm = ({
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
   const { mutate: fetchContractData, data } = useArbitraryContractData()
+  const isAciDeployerDeployed = daoLambdas?.find((lambda: any) => lambda.key === AppConfig.ACI.EXECUTOR_FUNCTION_NAME)
+
   // console.log("FormData", data)
   const { tezos, network } = useTezos()
   const [isLoading, setIsLoading] = useState(false)
@@ -246,6 +251,17 @@ const ContractInteractionForm = ({
     setEndpoint(undefined)
   }
 
+  if (!isAciDeployerDeployed && !isLoading) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: "20px" }}>
+        <Typography>We need to deploy the ACI Deployer Contract</Typography>
+        <Link to={`/explorer/dao/${daoId}/proposals?type=add-function`} color="secondary">
+          <Typography>Deploy ACI Deployer Contract</Typography>
+        </Link>
+      </div>
+    )
+  }
+
   return (
     <>
       {state === Status.NEW_INTERACTION ? (
@@ -499,6 +515,8 @@ const ContractInteractionForm = ({
                   )
 
                   const result = await contractMethod.send()
+                  debugger
+                  await result.confirmation(1)
                   console.log("RESULT", result)
                 } catch (error) {
                   console.log("ERROR", error)
@@ -518,9 +536,11 @@ const ContractInteractionForm = ({
   )
 }
 
-export const ArbitraryContractInteractionForm: React.FC<{ showHeader: (state: boolean) => void }> = ({
-  showHeader
-}) => {
+export const ArbitraryContractInteractionForm: React.FC<{
+  daoLambdas: Array<any> | undefined
+  showHeader: (state: boolean) => void
+}> = ({ daoLambdas, showHeader }) => {
+  const daoId = useDAOID()
   const { mutate: executeProposeLambda } = useLambdaExecutePropose()
   const isInvalidKtOrTzAddress = (address: string) => validateContractAddress(address) !== 3
 
@@ -561,6 +581,8 @@ export const ArbitraryContractInteractionForm: React.FC<{ showHeader: (state: bo
     console.log("saveInfo")
   }
 
+  console.log({ daoLambdas })
+
   return (
     <Formik
       validateOnChange={true}
@@ -593,6 +615,7 @@ export const ArbitraryContractInteractionForm: React.FC<{ showHeader: (state: bo
               setFieldError={setFieldError}
               isValid={isValid}
               showHeader={showHeader}
+              daoLambdas={daoLambdas}
             />
           </Form>
         )

src/modules/explorer/components/CodeCollapse.tsx

@@ -3,20 +3,11 @@ import { ProposalItem } from "modules/explorer/pages/User"
 import React, { useState } from "react"
 import { Link } from "react-router-dom"
 import { Proposal } from "services/services/dao/mappers/proposal/types"
-import { ContentContainer } from "./ContentContainer"
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"
 import { ProposalCodeEditorInput } from "./ProposalFormInput"
 import Prism, { highlight } from "prismjs"
-
-const TableContainer = styled(ContentContainer)({
-  width: "100%"
-})
-
-const TableHeader = styled(Grid)({
-  padding: "16px 46px",
-  minHeight: 34
-})
+import { TableContainer, TableHeader } from "components/ui/Table"
 
 const ProposalsFooter = styled(Grid)({
   padding: "16px 46px",

src/modules/explorer/components/ConfigProposalFormLambda.tsx

@@ -18,6 +18,7 @@ import { Lambda } from "services/bakingBad/lambdas/types"
 import { useLambdaExecutePropose } from "services/contracts/baseDAO/hooks/useLambdaExecutePropose"
 import { parseLambdaCode } from "utils"
 import { ArbitraryContractInteractionForm } from "./ArbitraryContractInteractionForm"
+import AppConfig from "config"
 
 const StyledSendButton = styled(MainButton)(({ theme }) => ({
   "width": 101,
@@ -173,14 +174,15 @@ export const ProposalFormLambda: React.FC<{
   const [showHeader, setShowHeader] = useState(true)
 
   const lambdaForm = useForm<Values>()
+  const proposalTypeQuery = new URLSearchParams(window.location.search).get("type")
 
   const [lambda, setLambda] = React.useState<Lambda | null>(null)
   const [state, setState] = React.useState<LambdaProposalState>(LambdaProposalState.write_action)
   const [lambdaParams, setLambdaParams] = React.useState<string>("")
   const [lambdaArguments, setLambdaArguments] = React.useState<string>("")
   const [code, setCode] = React.useState<string>("")
 
-  const ARBITRARY_CONTRACT_INTERACTION = "arbitrary_contract_interaction"
+  const ARBITRARY_CONTRACT_INTERACTION = AppConfig.CONST.ARBITRARY_CONTRACT_INTERACTION
 
   const ACI: Lambda = {
     key: ARBITRARY_CONTRACT_INTERACTION,
@@ -213,6 +215,13 @@ export const ProposalFormLambda: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [daoLambdas])
 
+  useEffect(() => {
+    if (proposalTypeQuery === "add-function") {
+      setCode(AppConfig.ACI.EXECUTOR_LAMBDA.code)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [proposalTypeQuery])
+
   const onSubmit = useCallback(
     (_: Values) => {
       const agoraPostId = Number(0)
@@ -405,7 +414,7 @@ export const ProposalFormLambda: React.FC<{
             />
           </>
         ) : (
-          <ArbitraryContractInteractionForm showHeader={setShowHeader} />
+          <ArbitraryContractInteractionForm showHeader={setShowHeader} daoLambdas={daoLambdas} />
         )}
       </>
     )

src/modules/explorer/components/ContentContainer.tsx

@@ -1,3 +1,4 @@
+// TODO: Replace imports with components/ui/Table
 import { styled, Grid } from "@material-ui/core"
 
 export const ContentContainer = styled(Grid)(({ theme }) => ({

src/modules/explorer/components/Hero.tsx

@@ -1,6 +1,6 @@
-import { Grid, GridProps, styled } from "@material-ui/core"
 import React from "react"
-import { ContentContainer } from "./ContentContainer"
+import { Grid, GridProps, styled } from "@material-ui/core"
+import { ContentContainer } from "components/ui/Table"
 
 const Container = styled(ContentContainer)({
   "padding": "0px",

src/modules/explorer/components/NetworkSheet.tsx

@@ -4,9 +4,9 @@ import { useTezos } from "services/beacon/hooks/useTezos"
 import { Network } from "services/beacon"
 import { ResponsiveDialog } from "./ResponsiveDialog"
 import { ColorDot, networkDotColorMap } from "./ChangeNetworkButton"
-import { ContentContainer } from "./ContentContainer"
-import { EnvKey, getEnv } from "services/config"
+
 import { ActionTypes, CreatorContext } from "modules/creator/state"
+import { ContentContainer } from "components/ui/Table"
 
 const SheetItem = styled(ContentContainer)({
   "height": 50,