Add dev tool page and TX builder

packages/boba/gateway/src/actions/devToolsAction.js

@@ -0,0 +1,31 @@
+/*
+  Varna - A Privacy-Preserving Marketplace
+  Varna uses Fully Homomorphic Encryption to make markets fair.
+  Copyright (C) 2021 Enya Inc. Palo Alto, CA
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import networkService from 'services/networkService';
+import { createAction } from './createAction'
+
+export function submitTxBuilder(contract, methodIndex, methodName, inputs) {
+  return createAction('TX_BUILDER', () => networkService.submitTxBuilder(contract, methodIndex, methodName, inputs))
+}
+
+export function resetTxBuilder() {
+  return function (dispatch) {
+    return dispatch({ type: 'TX_BUILDER/REST'})
+  }
+}

packages/boba/gateway/src/components/input/Input.js

@@ -22,7 +22,7 @@ import { selectCustomStyles } from './Select.styles'
 
 import Button from 'components/button/Button'
 
-import { Box, Typography } from '@mui/material'
+import { Box, Typography, TextareaAutosize } from '@mui/material'
 import { useTheme } from '@emotion/react'
 import { getCoinImage } from 'util/coinImage'
 
@@ -53,7 +53,9 @@ function Input({
   selectValue,
   style,
   isBridge,
-  openTokenPicker
+  openTokenPicker,
+  textarea = false,
+  maxRows = 10,
 }) {
 
   async function handlePaste() {
@@ -89,6 +91,38 @@ function Input({
     return acc
   }, []): null
 
+  if (textarea) {
+    return (
+      <div style={{width: '100%'}}>
+        <S.Wrapper newstyle={newStyle ? 1 : 0} style={style}>
+          <S.TextareaAutosizeWrapper
+            maxRows={maxRows}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+          />
+
+          {paste && (
+            <Box
+              onClick={handlePaste}
+              sx={{
+                color: theme.palette.secondary.main,
+                opacity: 0.9,
+                cursor: 'pointer',
+                position: 'absolute',
+                right: '70px',
+                fontSize: '14px',
+                zIndex: '100'
+              }}
+            >
+              PASTE
+            </Box>
+          )}
+        </S.Wrapper>
+      </div>
+    )
+  }
+
   return (
     <div style={{width: '100%'}}>
       <S.Wrapper newstyle={newStyle ? 1 : 0} style={style}>

packages/boba/gateway/src/components/input/Input.styles.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles'
-import { Box, TextField } from '@mui/material'
+import { Box, TextField, TextareaAutosize } from '@mui/material'
 
 export const Wrapper = styled(Box)`
   display: flex;
@@ -63,3 +63,28 @@ export const ActionsWrapper = styled(Box)`
   flex: 3;
   margin-left: 10px;
 `;
+
+export const TextareaAutosizeWrapper = styled(TextareaAutosize)(({ theme }) => ({
+  width: '100%',
+  backgroundColor: 'transparent',
+  font: 'inherit !important',
+  fontSize: '0.9em !important',
+  padding: '17.5px 15px',
+  borderRadius: '4px',
+  borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255,255,255,0.23)',
+  color: theme.palette.mode === 'light' ? 'black' : 'white',
+  '&::placeholder': {
+    color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255,255,255,0.45)',
+  },
+  '&:hover': {
+    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255,255,255,0.05)',
+    borderColor: theme.palette.mode === 'light' ? 'black' : 'white',
+  },
+  '&:focus': {
+    padding: '16.5px 14px',
+    borderColor: '#478ddf',
+    borderWidth: '2px',
+    outline: '0px !important',
+    outlineOffset: '0px !important',
+  },
+}));

packages/boba/gateway/src/components/pageFooter/PageFooter.js

@@ -66,6 +66,10 @@ const PageFooter = ({maintenance}) => {
           <S.FooterLink
             to={ROUTES_PATH.HELP}
           >FAQs</S.FooterLink>
+          <S.FooterLink
+            to={ROUTES_PATH.DEV_TOOLS}
+            sx={{ whiteSpace: 'nowrap'}}
+          >Dev Tools</S.FooterLink>
           <S.FooterLink
             to={ROUTES_PATH.BOBASCOPE}
           >BobaScope</S.FooterLink>

packages/boba/gateway/src/containers/devtools/DevTools.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import {  useSelector } from 'react-redux'
+
+import PageTitle from 'components/pageTitle/PageTitle'
+import Connect from 'containers/connect/Connect'
+
+import { selectLayer, selectAccountEnabled } from 'selectors/setupSelector'
+
+import TxBuilder from './TxBuilder'
+
+import * as S from './DevTools.styles'
+
+const DevTools = ({projectType}) => {
+
+  const networkLayer = useSelector(selectLayer())
+  const accountEnabled = useSelector(selectAccountEnabled())
+
+  return (
+    <S.PageContainer>
+      <PageTitle title={'Dev Tools'} />
+      <Connect
+        userPrompt={'Please connect to Boba to enable all features'}
+        accountEnabled={accountEnabled}
+        connectToBoba={true}
+        layer={networkLayer}
+      />
+      <TxBuilder />
+    </S.PageContainer>
+  )
+}
+
+export default DevTools;

packages/boba/gateway/src/containers/devtools/DevTools.styles.js

@@ -0,0 +1,24 @@
+import { Box, Divider, Grid, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const PageContainer = styled(Box)(({ theme }) => ({
+  margin: '0px auto',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-around',
+  padding: '10px',
+  paddingTop: '0px',
+  width: '70%',
+  [ theme.breakpoints.between('md', 'lg') ]: {
+    width: '90%',
+    padding: '0px',
+  },
+  [ theme.breakpoints.between('sm', 'md') ]: {
+    width: '90%',
+    padding: '0px',
+  },
+  [ theme.breakpoints.down('sm') ]: {
+    width: '100%',
+    padding: '0px',
+  },
+}));