Merge pull request #135 from zkBob/staging

Version 1.2.0
zkBob · Jan 30, 2023 · 7a5b645 · 7a5b645
2 parents c322e76 + 9710d64
commit 7a5b645
Show file tree

Hide file tree

Showing 32 changed files with 512 additions and 83 deletions.
diff --git a/config-overrides.js b/config-overrides.js
@@ -66,7 +66,7 @@ module.exports = {
       const config = configFunction(proxy, allowedHost);
       config.headers = {
         ...config.headers,
-        'Cross-Origin-Embedder-Policy': 'require-corp',
+        'Cross-Origin-Embedder-Policy': 'credentialless',
         'Cross-Origin-Opener-Policy': 'same-origin',
       };
       return config;

diff --git a/netlify.toml b/netlify.toml
@@ -1,7 +1,7 @@
 [[headers]]
   for = "/*"
   [headers.values]
-    Cross-Origin-Embedder-Policy = "require-corp"
+    Cross-Origin-Embedder-Policy = "credentialless"
     Cross-Origin-Opener-Policy = "same-origin"
 
 # [[redirects]]

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",
@@ -32,6 +32,8 @@
     "react-dom": "^18.2.0",
     "react-modal": "^3.14.3",
     "react-outside-click-handler": "^1.3.0",
+    "react-qr-code": "^2.0.11",
+    "react-qr-scanner": "^1.0.0-alpha.11",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-switch": "^7.0.0",

diff --git a/public/index.html b/public/index.html
@@ -37,6 +37,17 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <script>
+      !function(d,w){var t="%REACT_APP_CHAMELEON_TOKEN%",c="chmln",i=d.createElement("script");if(w[c]||(w[c]={}),!w[c].root){w[c].accountToken=t,w[c].location=w.location.href.toString(),w[c].now=new Date,w[c].fastUrl='https://fast.chameleon.io/';var m="identify alias track clear set show on off custom help _data".split(" ");for(var s=0;s<m.length;s++){!function(){var t=w[c][m[s]+"_a"]=[];w[c][m[s]]=function(){t.push(arguments);};}();}i.src=w[c].fastUrl+"messo/"+t+"/messo.min.js",i.async=!0,i.crossOrigin="anonymous",d.head.appendChild(i);}}(document,window);
+
+      let userId = localStorage.getItem('chameleon_used_id');
+      if (!userId) {
+        userId = crypto.randomUUID();
+        localStorage.setItem('chameleon_used_id', userId);
+      }
+
+      chmln.identify(userId);
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -38,6 +38,8 @@ const GlobalStyle = createGlobalStyle`
     overflow: hidden;
     min-height: 100vh;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
     background-image: ${props => props.theme.background};
   }
   input::-webkit-outer-spin-button,

diff --git a/src/assets/qr-code.svg b/src/assets/qr-code.svg
diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
@@ -96,7 +96,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, openWalletModal }) =>
         <OptionContainer>
           <Title>Create a new zkBob Account with</Title>
           <CreateButton onClick={() => setNextAction('generate')}>
-            MetaMask or WalletConnect
+            {window?.ethereum && 'MetaMask or'} WalletConnect
           </CreateButton>
           <Row>
             <Text>or</Text>

diff --git a/src/components/DemoBanner/index.js b/src/components/DemoBanner/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import LinkDefault from 'components/Link';
+
+export default () => (
+  <DemoBanner>
+    For secure deposits, withdrawals and full-featured privacy,{' '}
+    create a <Link href="/" internal>zkBob account here</Link>
+  </DemoBanner>
+);
+
+const DemoBanner = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 22px;
+  background: ${props => props.theme.color.purpleExtraLight};
+  color: ${props => props.theme.color.white};
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: ${props => props.theme.text.weight.bold};
+  text-align: center;
+  position: relative;
+`;
+
+const Link = styled(LinkDefault)`
+  color: ${props => props.theme.color.white};
+  font-weight: ${props => props.theme.text.weight.bold};
+  text-decoration: underline;
+`;
diff --git a/src/components/DemoCard/index.js b/src/components/DemoCard/index.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Card from 'components/Card';
+import Link from 'components/Link';
+
+export default () => {
+  return (
+    <Card>
+      <Container>
+        <Title>Demo version</Title>
+        <Description>
+          <Text>
+            This zkBob version is designed for private,{' '}
+            small-value transfers only (not for deposits/withdrawals).
+          </Text>
+        </Description>
+        <Description>
+          <Text>For a full-featured version,</Text>
+          <Link href="/" internal size={16}>create a free zkBob account here.</Link>
+        </Description>
+      </Container>
+    </Card>
+  );
+};
+
+const Title = styled.span`
+  font-size: 24px;
+  color: ${props => props.theme.text.color.primary};
+  font-weight: ${props => props.theme.text.weight.bold};
+  text-align: center;
+  margin-bottom: 16px;
+`;
+
+const Text = styled.span`
+  font-size: 16px;
+  line-height: 22px;
+  color: ${props => props.theme.text.color.secondary};
+  font-weight: ${props => props.theme.text.weight.normal};
+  text-align: center;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 24px 20px;
+  @media only screen and (max-width: 500px) {
+    padding: 0 6px 12px;
+  }
+`;
+
+const Description = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -23,7 +23,7 @@ export default ({
   openAccountSetUpModal, account, zkAccount, openConfirmLogoutModal,
   balance, poolBalance, zkAccountId, refresh, isRefreshing,
   openSwapModal, generateAddress, openChangePasswordModal,
-  openSeedPhraseModal,
+  openSeedPhraseModal, isDemo,
 }) => {
   const walletButtonRef = useRef(null);
   const zkAccountButtonRef = useRef(null);
@@ -86,6 +86,7 @@ export default ({
               logout={openConfirmLogoutModal}
               showSeedPhrase={openSeedPhraseModal}
               buttonRef={zkAccountButtonRef}
+              isDemo={isDemo}
             >
               <AccountLabel ref={zkAccountButtonRef} $refreshing={isRefreshing}>
                 <Row>

diff --git a/src/components/LatestAction/index.js b/src/components/LatestAction/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { ethers } from 'ethers';
 
 import Link from 'components/Link';
@@ -12,6 +12,7 @@ import { tokenSymbol, tokenIcon } from 'utils/token';
 
 export default ({ type, shielded, actions, txHash }) => {
   const history = useHistory();
+  const location = useLocation();
   return (
     <Row>
       <InnerRow>
@@ -34,7 +35,7 @@ export default ({ type, shielded, actions, txHash }) => {
       </InnerRow>
       <HistoryButton
         type="link"
-        onClick={() => history.push('/history')}
+        onClick={() => history.push('/history' + location.search)}
       >
         View History
       </HistoryButton>

diff --git a/src/components/Link/index.js b/src/components/Link/index.js
@@ -2,7 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 export default props => (
-  <Link {...props} target="_blank" rel="noopener noreferrer" />
+  <Link
+    {...props}
+    target={props.internal ? '' : '_blank'}
+    rel={props.internal ? '' : 'noopener noreferrer'}
+  />
 );
 
 const Link = styled.a`

diff --git a/src/components/MultilineInput/index.js b/src/components/MultilineInput/index.js
@@ -1,17 +1,22 @@
-import React, { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import styled from 'styled-components';
 
 import Tooltip from 'components/Tooltip';
+import QRCodeReader from 'components/QRCodeReader';
+
 import { ReactComponent as InfoIconDefault } from 'assets/info.svg';
 
 import useAutosizeTextArea from './hooks/useAutosizeTextArea';
 
-export default ({ value, onChange, hint, placeholder }) => {
+export default ({ value, onChange, hint, placeholder, qrCode }) => {
   const textAreaRef = useRef(null);
   useAutosizeTextArea(textAreaRef.current, value);
 
+  const handleChange = useCallback(e => {
+    onChange(e.target.value);
+  }, [onChange])
+
   const handleKeyPress = event => {
-    console.log(event.key);
     if(event.key === 'Enter' || event.key === ' '){
       event.preventDefault();
     }
@@ -23,16 +28,17 @@ export default ({ value, onChange, hint, placeholder }) => {
         ref={textAreaRef}
         placeholder={placeholder}
         value={value}
-        onChange={onChange}
+        onChange={handleChange}
         onKeyPress={handleKeyPress}
         spellCheck={false}
         rows={1}
       />
-      {hint &&
+      {(hint && !qrCode) &&
         <Tooltip content={hint} placement="right" delay={0} width={180}>
           <InfoIcon />
         </Tooltip>
       }
+      {qrCode && <QRCodeReader onResult={onChange} />}
     </Container>
   );
 };

diff --git a/src/components/OptionButton/index.js b/src/components/OptionButton/index.js
@@ -26,10 +26,11 @@ const ButtonLink = styled(Link)`
   box-sizing: border-box;
   cursor: pointer;
   &:hover {
-    background-color: ${({ theme }) => theme.walletConnectorOption.background.hover};
-    border: 1px solid ${({ theme }) => theme.walletConnectorOption.border.hover};
+    background-color: ${props => props.theme.walletConnectorOption.background[props.disabled ? 'default' : 'hover']};
+    border: 1px solid ${props => props.theme.walletConnectorOption.border[props.disabled ? 'default' : 'hover']};
   }
   font-size: 16px;
   color: ${({ theme }) => theme.text.color.primary};
   font-weight: ${({ theme }) => theme.text.weight.normal};
+  opacity: ${props => props.disabled ? 0.5 : 1};
 `;
diff --git a/src/components/QRCodeReader/index.js b/src/components/QRCodeReader/index.js
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import QrReader from 'react-qr-scanner'
+
+import { ReactComponent as QrCodeIconDefault } from 'assets/qr-code.svg';
+import { ReactComponent as CrossIconDefault } from 'assets/cross.svg';
+
+export default ({ onResult }) => {
+  const [showScanner, setShowScanner] = useState(false);
+
+  const handleScan = data => {
+    if (!data) return;
+    onResult(data.text);
+    setShowScanner(false);
+  }
+
+  return (
+    <>
+      <QrCodeIcon onClick={e => { e.stopPropagation(); setShowScanner(true); }} />
+      {showScanner && (
+        <ScannerContainer onClick={e => e.stopPropagation()}>
+          <CrossIcon onClick={() => setShowScanner(false)} />
+          <QrReader
+            constraints={{
+              audio: false,
+              video: {
+                facingMode: 'environment',
+              },
+            }}
+            onScan={handleScan}
+            onError={error => console.log(error)}
+            style={{ width: 300 }}
+          />
+        </ScannerContainer>
+      )}
+    </>
+  );
+};
+
+const QrCodeIcon = styled(QrCodeIconDefault)`
+  position: absolute;
+  right: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+`;
+
+const CrossIcon = styled(CrossIconDefault)`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 10px;
+  path {
+    fill: #FFF;
+  }
+`;
+
+const ScannerContainer = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+`;