Merge pull request #9 from algodesk-io/feature/abi-executor

ABI method executor

package.json

@@ -10,6 +10,8 @@
     "@mui/lab": "^5.0.0-alpha.88",
     "@mui/material": "^5.6.0",
     "@mui/x-data-grid": "^5.8.0",
+    "@perawallet/connect": "^1.0.7",
+    "@randlabs/myalgo-connect": "^1.4.0",
     "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
@@ -20,7 +22,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-transition-group": "^4.4.5",
     "@types/sass-loader": "^8.0.3",
-    "algosdk": "^1.22.0",
+    "algosdk": "^1.23.1",
     "atob": "^2.1.2",
     "axios": "^0.27.2",
     "buffer": "^6.0.3",
@@ -34,6 +36,7 @@
     "is-utf8": "^0.2.1",
     "js-sha512": "^0.8.0",
     "markdown-to-jsx": "^7.1.7",
+    "material-ui-confirm": "^3.0.7",
     "msgpack-lite": "^0.1.26",
     "mui-markdown": "^0.5.5",
     "multiformats": "^9.7.1",

src/components/App/AppRouter.tsx

@@ -41,6 +41,7 @@ import ABIStudio from "../Modules/ABI/ABIStudio/ABIStudio";
 import Dispenser from "../Modules/Dispenser/Dispenser";
 import NodeStatus from "../Modules/NodeStatus/NodeStatus";
 import ArcHome from "../Modules/ArcPortal/Home/ArcHome";
+import DevWallets from "../Modules/DevWallets/DevWallets/DevWallets";
 
 function AppRouter(): JSX.Element {
 
@@ -105,6 +106,7 @@ function AppRouter(): JSX.Element {
                                 <Route path="/abi-studio" element={<ABIStudio></ABIStudio>}></Route>
                                 <Route path="/dispenser" element={<Dispenser></Dispenser>}></Route>
                                 <Route path="/node-status" element={<NodeStatus></NodeStatus>}></Route>
+                                <Route path="/dev-wallets" element={<DevWallets></DevWallets>}></Route>
                                 <Route path="*" element={<Navigate to="/explorer" replace />}/>
                             </Routes>
                         </div>

src/components/App/AppSnackbar.tsx

@@ -2,6 +2,7 @@ import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "../../redux/store";
 import {hideSnack} from '../../redux/common/actions/snackbar';
 import {Alert, Snackbar} from "@mui/material";
+import {theme} from "../../theme";
 
 
 function AppSnackbar(): JSX.Element {
@@ -10,18 +11,26 @@ function AppSnackbar(): JSX.Element {
 
     // @ts-ignore
     return (<Snackbar
-        style={{bottom: 50}}
+        style={{bottom: 20}}
         open={snackbar.show}
+        autoHideDuration={5000}
         anchorOrigin={{ vertical: 'bottom',
-            horizontal: 'center' }}
-        autoHideDuration={5000} onClose={() => {dispatch(hideSnack())}}>
-        <Alert
-            style={{borderRadius: 10}}
-            icon={false}
-            severity={snackbar.severity}
-            onClose={() => {dispatch(hideSnack())}}>
-            <span dangerouslySetInnerHTML={{__html: snackbar.message}}></span>
-        </Alert>
+            horizontal: 'right' }}
+        onClose={() => {dispatch(hideSnack())}}>
+            <Alert
+                sx={{
+                        color: theme.palette.common.black,
+                        borderRadius: 0,
+                        paddingTop: '20px',
+                        paddingBottom: '20px',
+                        minWidth: '400px',
+                    borderLeft: '4px solid ' + theme.palette.grey[600]
+                    }}
+                icon={false}
+                severity={snackbar.severity}
+                onClose={() => {dispatch(hideSnack())}}>
+                <span dangerouslySetInnerHTML={{__html: snackbar.message}}></span>
+            </Alert>
     </Snackbar>);
 }
 

src/components/Common/JsonViewer/JsonViewer.tsx

@@ -1,10 +1,10 @@
 import './JsonViewer.scss';
 import React, {useState} from "react";
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton} from "@mui/material";
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle} from "@mui/material";
 import ReactJson from 'react-json-view'
-import {CancelOutlined} from "@mui/icons-material";
 import {copyContent, exportData} from "../../../utils/common";
 import {useDispatch} from "react-redux";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface JsonViewerState{
     show: boolean,
@@ -70,9 +70,7 @@ function JsonViewer(props): JSX.Element {
                             <div style={{fontWeight: "bold", fontSize: 18}}>{title}</div>
                         </div>
                         <div>
-                            <IconButton color="primary" onClick={handleClose}>
-                                <CancelOutlined />
-                            </IconButton>
+                            <CloseIcon className="modal-close-button" onClick={handleClose}/>
                         </div>
 
                     </div>

src/components/Common/Loader/Loader.tsx

@@ -10,7 +10,7 @@ function Loader(): JSX.Element {
       <div>
           {loader.count ? <div>
               <div className="loading-box">
-                  <CircularProgress color={"primary"} className="progress-bar"></CircularProgress>
+                  <CircularProgress sx={{color: '#000'}} className="progress-bar"></CircularProgress>
                   <div className="message">
                       {loader.message}
                   </div>

src/components/LeftBar/ConnectWallet/ConnectWallet.scss

@@ -0,0 +1,111 @@
+@import '../../../assets/colors';
+
+.connect-wallet-wrapper {
+  .connect-wallet-container {
+    margin-bottom: 40px;
+    .wallet-connect-home-wrapper {
+      .wallet-connect-home-container {
+        .header {
+          margin-top: 20px;
+          text-align: center;
+          .text {
+            font-size: 18px;
+            font-weight: bold;
+            font-family: PoppinsBold !important;
+            svg {
+              vertical-align: sub;
+              margin-right: 5px;
+            }
+          }
+        }
+        .body {
+          margin-top: 40px;
+          .signer {
+            padding: 20px 50px;
+            img.logo {
+              vertical-align: middle;
+              margin-right: 15px;
+              height: 25px;
+              width: 25px;
+              border-radius: 50%;
+            }
+            .name {
+              vertical-align: sub;
+              font-size: 16px;
+            }
+            svg {
+              float: right;
+            }
+            &:hover {
+              cursor: pointer;
+              background: $color-grey-very-light;
+            }
+          }
+        }
+        .footer {
+          text-align: center;
+          margin-top: 50px;
+          margin-bottom: 20px;
+          padding: 0 25px;
+        }
+      }
+    }
+
+    .accounts-wrapper {
+      .accounts-container {
+        .header {
+          font-size: 20px;
+          text-align: center;
+          .logo {
+            width: 30px;
+            height: 30px;
+            vertical-align: middle;
+            margin-right: 10px;
+          }
+        }
+        .body {
+          margin-top: 40px;
+          img.loading {
+            width: 40%;
+          }
+          .connecting {
+            text-align: center;
+            margin-top: 75px;
+            font-size: 20px;
+            color: #A9A9A9;
+          }
+          .error-message {
+            text-align: center;
+            margin-top: 40px;
+            color: $color-grey-dark;
+            padding: 0 40px;
+            line-height: 1.2;
+            svg {
+              font-size: 50px;
+              margin-bottom: 20px;
+              margin-top: 50px;
+            }
+            img {
+              width: 170px;
+              height: 140px;
+              margin-bottom: 20px;
+            }
+          }
+          .account {
+            font-size: 12px;
+            overflow-wrap: anywhere;
+            margin: 10px 40px;
+            padding: 10px;
+            border-radius: 10px;
+            border: 1px solid $color-grey-light;
+            &:hover {
+              cursor: pointer;
+              border-color: $color-dark;
+            }
+          }
+        }
+      }
+    }
+
+  }
+}