Merge branch 'lambda-dao' into max-patch

package.json

@@ -28,6 +28,7 @@
     "@taquito/tzip12": "13.0.1",
     "@taquito/tzip16": "13.0.1",
     "@types/mixpanel-browser": "^2.35.7",
+    "@types/prismjs": "^1.26.0",
     "bignumber.js": "^9.0.1",
     "blockies-ts": "^1.0.0",
     "dayjs": "^1.10.4",
@@ -41,6 +42,8 @@
     "launchdarkly-react-client-sdk": "2.27.0",
     "mixpanel-browser": "^2.42.0",
     "notistack": "^1.0.3",
+    "prism-themes": "^1.9.0",
+    "prismjs": "^1.28.0",
     "react": "^17.0.1",
     "react-customizable-progressbar": "^1.0.2",
     "react-dom": "^17.0.2",
@@ -51,6 +54,7 @@
     "react-query": "^3.13.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-simple-code-editor": "^0.11.2",
     "react-spring-bottom-sheet": "^3.4.0",
     "rehype-raw": "^6.1.1",
     "remark-breaks": "^3.0.2",

src/modules/common/BackButton.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { Box, styled } from "@material-ui/core"
+import { ArrowBack } from "@material-ui/icons"
+
+const BackIcon = styled(ArrowBack)({
+  cursor: "pointer",
+  width: "18px",
+  color: "#ffff",
+  marginTop: "-5px"
+})
+
+export const CloseButton: React.FC<{ onGoBack?: () => void }> = ({ onGoBack }) => {
+  return (
+    <Box onClick={onGoBack}>
+      <BackIcon />
+    </Box>
+  )
+}
+
+export default CloseButton

src/modules/common/ChangeNetworkButton.tsx

@@ -22,7 +22,8 @@ const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({
 
 export const networkDotColorMap: Record<Network, string> = {
   mainnet: "#9EEE5D",
-  ghostnet: "#291F79"
+  ghostnet: "#291F79",
+  kathmandunet: "#271F71"
 }
 
 export const ColorDot = styled(Box)({

src/modules/common/CopyButton.tsx

@@ -6,7 +6,7 @@ const CopyIcon = styled(FileCopyOutlined)({
   cursor: "pointer"
 })
 
-export const CopyButton: React.FC<{ text: string }> = ({ text }) => {
+export const CopyButton: React.FC<{ text: string; style?: any }> = ({ text, style }) => {
   const [copied, setCopied] = useState(false)
   return (
     <Box
@@ -22,7 +22,7 @@ export const CopyButton: React.FC<{ text: string }> = ({ text }) => {
         }, 2000)
       }}
     >
-      <Tooltip placement="bottom" title={!copied ? "Copy to Clipboard" : "Copied!"}>
+      <Tooltip style={style} placement="bottom" title={!copied ? "Copy to Clipboard" : "Copied!"}>
         <CopyIcon color="secondary" fontSize="small" />
       </Tooltip>
     </Box>

src/modules/creator/state/types.ts

@@ -54,7 +54,7 @@ export interface NavigationBarProps {
   }
 }
 
-export type DAOTemplate = "treasury" | "registry" | ""
+export type DAOTemplate = "treasury" | "registry" | "lambda" | ""
 
 type DeploymentStatus = {
   deploying: boolean

src/modules/creator/steps/Template.tsx

@@ -1,6 +1,7 @@
 import { Grid, styled, Typography, Box, useMediaQuery, useTheme, makeStyles } from "@material-ui/core"
 import React, { useContext, useEffect, useState } from "react"
 import { useHistory, withRouter } from "react-router"
+import { ReactComponent as LambdaIcon } from "assets/img/lambda.svg"
 
 import { AccountBalance, FormatListBulleted } from "@material-ui/icons"
 import { ActionTypes, CreatorContext, DAOTemplate } from "modules/creator/state"
@@ -13,23 +14,47 @@ const CustomBox = styled(Grid)(({ theme }) => ({
   "borderRadius": 8,
   "maxWidth": 320,
   "width": "-webkit-fill-available",
-  "padding": "40px 50px",
+  "padding": "40px 44px",
   "textAlign": "start",
   "cursor": "pointer",
   "paddingBottom": 0,
   "&:hover": {
     border: "3px solid rgba(129, 254, 183, 0.4)",
-    padding: "37px 47px"
+    padding: "37px 41px"
   },
   ["@media (max-width:1167px)"]: {
     marginBottom: 20
   }
 }))
 
+const LambdaCustomBox = styled(Grid)(({ theme }) => ({
+  "height": 273,
+  "marginTop": 30,
+  "background": "#2F3438",
+  "borderRadius": 8,
+  "maxWidth": 320,
+  "width": "-webkit-fill-available",
+  "padding": "40px 44px",
+  "textAlign": "start",
+  "cursor": "pointer",
+  "paddingBottom": 0,
+  "&:hover": {
+    border: "3px solid rgba(129, 254, 183, 0.4)",
+    paddingTop: 37,
+    paddingBottom: 0,
+    paddingRight: 41,
+    paddingLeft: 41
+  },
+  ["@media (max-width:1167px)"]: {
+    marginBottom: 20,
+    marginTop: 0
+  }
+}))
+
 const styles = makeStyles({
   selected: {
     border: "3px solid rgba(129, 254, 183, 0.4)",
-    padding: "37px 47px"
+    padding: "37px 41px"
   }
 })
 
@@ -54,6 +79,13 @@ const CustomList = styled(FormatListBulleted)(({ theme }) => ({
   marginBottom: 16
 }))
 
+const Lambda = styled(LambdaIcon)(({ theme }) => ({
+  width: 64,
+  height: 64,
+  color: theme.palette.secondary.light,
+  marginBottom: 16
+}))
+
 const BoxTitle = styled(Typography)({
   fontSize: 18,
   fontWeight: 500,
@@ -144,6 +176,22 @@ export const Template = (): JSX.Element => {
             Govern arbitrary smart contracts, curate marketplaces, and more
           </BoxDescription>
         </CustomBox>{" "}
+        <LambdaCustomBox
+          item
+          container
+          direction="column"
+          justifyContent="flex-start"
+          alignItems="center"
+          xs={isMobileSmall ? 12 : 6}
+          onClick={() => update("lambda")}
+          className={selectedTemplate === "lambda" ? style.selected : ""}
+        >
+          <Lambda />
+          <BoxTitle color="textSecondary">Lambda</BoxTitle>
+          <BoxDescription color="textSecondary">
+            Safe with multi-sig. List of key-value pairs. Contract interaction.
+          </BoxDescription>
+        </LambdaCustomBox>{" "}
       </Grid>
       {error ? <ErrorText>{"Must select a template in order to continue"}</ErrorText> : null}
     </Box>

src/modules/explorer/components/ChangeNetworkButton.tsx

@@ -22,7 +22,8 @@ const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({
 
 export const networkDotColorMap: Record<Network, string> = {
   mainnet: "#9EEE5D",
-  ghostnet: "#291F79"
+  ghostnet: "#291F79",
+  kathmandunet: "#271F71"
 }
 
 export const ColorDot = styled(Box)({

src/modules/explorer/components/ConfigProposalForm.tsx

@@ -99,9 +99,8 @@ export const ConfigProposalForm: React.FC<Props> = ({ open, handleClose }) => {
             </ProposalFormInput>
           </Grid>
           <Grid item>
-            <ProposalFormInput
-              label={`Percentage of tokens returned after rejection (Current: ${dao?.data.extra.returnedPercentage.toString()}%)`}
-            >
+            {/* <ProposalFormInput label={`Percentage of tokens returned after rejection (Current: ${dao?.data.extra.returnedPercentage.toString()}%)`}> */}
+            <ProposalFormInput label={`Percentage of tokens returned after rejection (Current:`}>
               <Controller
                 control={methods.control}
                 name={`returnedPercentage`}