Merge branch 'staging'

- Load params from cloud: #52
- Multitransfer: #55
- Upgrade lib version: #98
- Fix some bugs

netlify.toml

@@ -25,7 +25,8 @@
   REACT_APP_TOKEN_ADDRESS = "0xB0B195aEFA3650A6908f15CdaC7D92F8a5791B0B"
   REACT_APP_RELAYER_URL = "https://relayer-mvp.zkbob.com"
   REACT_APP_RPC_URL = "https://polygon-rpc.com"
-  REACT_APP_ZEROPOOL_NETWORK = "ethereum"
+  REACT_APP_ZEROPOOL_NETWORK = "polygon"
+  REACT_APP_BUCKET_URL = "https://r2.zkbob.com"
   # REACT_APP_RESTRICTED_COUNTRIES = "BY,CU,IR,IQ,CI,LR,KP,RU,SD,SY,US,ZW"
 
 [context.staging.environment]
@@ -37,5 +38,6 @@
   REACT_APP_TOKEN_ADDRESS = "0x2C74B18e2f84B78ac67428d0c7a9898515f0c46f"
   REACT_APP_RELAYER_URL = "https://relayer.thgkjlr.website/"
   REACT_APP_RPC_URL = "https://rpc.sepolia.org"
-  REACT_APP_ZEROPOOL_NETWORK = "ethereum"
+  REACT_APP_ZEROPOOL_NETWORK = "sepolia"
+  REACT_APP_BUCKET_URL = "https://r2-staging.zkbob.com"
   # REACT_APP_RESTRICTED_COUNTRIES = "BY,CU,IR,IQ,CI,LR,KP,RU,SD,SY,US,ZW"

package.json

@@ -15,6 +15,7 @@
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/walletconnect-connector": "^6.2.13",
+    "codemirror": "5.65.9",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.1.1",
     "ethers": "^5.4.7",
@@ -23,20 +24,22 @@
     "moment": "^2.29.3",
     "rc-tooltip": "^5.1.1",
     "react": "^17.0.2",
+    "react-codemirror2": "^7.2.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-device-detect": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-modal": "^3.14.3",
     "react-outside-click-handler": "^1.3.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
+    "react-switch": "^7.0.0",
     "react-toastify": "^8.2.0",
     "stream-browserify": "^3.0.0",
     "styled-components": "^5.3.0",
     "unique-names-generator": "^4.7.1",
     "web-vitals": "^1.0.1",
     "webpack": "^5.70.0",
-    "zkbob-client-js": "0.8.0"
+    "zkbob-client-js": "1.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -66,9 +69,11 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "chrome >= 67",
+      "edge >= 79",
+      "firefox >= 68",
+      "opera >= 54",
+      "safari >= 14"
     ],
     "development": [
       "last 1 chrome version",

src/components/Card/index.js

@@ -29,6 +29,7 @@ const Card = styled.div`
 const Title = styled.span`
   color: ${props => props.theme.card.title.color};
   font-weight: ${props => props.theme.text.weight.normal};
+  padding: 0 10px;
 `;
 
 const Note = styled.span`
@@ -38,4 +39,5 @@ const Note = styled.span`
   font-weight: ${props => props.theme.text.weight.normal};
   align-self: center;
   text-align: center;
+  padding: 0 10px;
 `;

src/components/ConfirmTransactionModal/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { ethers } from 'ethers';
 
 import Button from 'components/Button';
 import Modal from 'components/Modal';
@@ -10,6 +11,7 @@ import { formatNumber } from 'utils';
 export default ({
   isOpen, onClose, onConfirm, title, amount, receiver,
   shielded, isZkAddress, fee, numberOfTxs, type,
+  isMultitransfer, transfers, openDetails,
 }) => {
   return (
     <Modal
@@ -22,13 +24,27 @@ export default ({
         <DetailsContainer>
           <AmountContainer>
             <TokenIcon src={tokenIcon(shielded)} />
-            <Amount>{formatNumber(amount)}{' '}</Amount>
+            <Amount>
+              {formatNumber(isMultitransfer
+                ? transfers.reduce((acc, curr) => acc.add(curr.amount), ethers.constants.Zero)
+                : amount, 18
+              )}{' '}
+            </Amount>
             <TokenSymbol>{tokenSymbol(shielded)}</TokenSymbol>
           </AmountContainer>
-          <SmallText>
-            send to {isZkAddress ? 'zkBob address' : ''}
-          </SmallText>
-          <MediumText>{receiver}</MediumText>
+          {isMultitransfer ? (
+            <>
+              <MediumTextMulti>will be transferred to {transfers.length} zkBob addresses</MediumTextMulti>
+              <ViewAllButton type="link" onClick={openDetails}>view all</ViewAllButton>
+            </>
+          ) : (
+            <>
+              <SmallText>
+                send to {isZkAddress ? 'zkBob address' : ''}
+              </SmallText>
+              <MediumText>{receiver}</MediumText>
+            </>
+          )}
           <SmallText>{type} details</SmallText>
           <Row>
             <MediumText>Number of transactions:</MediumText>
@@ -39,7 +55,7 @@ export default ({
             <MediumText>{formatNumber(fee)} {tokenSymbol(shielded)}</MediumText>
           </Row>
         </DetailsContainer>
-        <Button onClick={onConfirm}>Confirm</Button>
+        <Button onClick={onConfirm}>Confirm {isMultitransfer && 'multitransfer'}</Button>
       </Container>
     </Modal>
   );
@@ -113,3 +129,13 @@ const Row = styled.div`
   justify-content: space-between;
   align-self: stretch;
 `;
+
+const ViewAllButton = styled(Button)`
+  font-size: 16px;
+  margin-bottom: 5px;
+`;
+
+const MediumTextMulti = styled(MediumText)`
+  margin-bottom: 0;
+  margin-top: 10px;
+`;