Merge pull request #166 from zkBob/staging

v1.4.0
zkBob · Mar 28, 2023 · 44eeb3b · 44eeb3b
2 parents 3f25483 + 67151bc
commit 44eeb3b
Show file tree

Hide file tree

Showing 44 changed files with 1,156 additions and 368 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -36,6 +36,7 @@
   REACT_APP_BUCKET_URL = "https://r2.zkbob.com"
   REACT_APP_SNARK_PARAMS_VERSION = "22022023"
   REACT_APP_RESTRICTED_COUNTRIES = "AE"
+  REACT_APP_LOCK_TIMEOUT = "900000"
   # REACT_APP_RESTRICTED_COUNTRIES = "BY,CU,IR,IQ,CI,LR,KP,RU,SD,SY,US,ZW"
 
 [context.staging.environment]
@@ -52,6 +53,9 @@
   REACT_APP_BUCKET_URL = "https://r2-staging.zkbob.com"
   REACT_APP_SNARK_PARAMS_VERSION = "20022023"
   REACT_APP_RESTRICTED_COUNTRIES = "AE"
+  REACT_APP_KYC_STATUS_URL = "https://api-stage.knowyourcat.id/v1/%s/categories?category=BABTokenWeek"
+  REACT_APP_KYC_HOMEPAGE_URL = "https://stage.knowyourcat.id/address/%s/BABTokenWeek"
+  REACT_APP_LOCK_TIMEOUT = "300000"
   # REACT_APP_RESTRICTED_COUNTRIES = "BY,CU,IR,IQ,CI,LR,KP,RU,SD,SY,US,ZW"
 
 [context.goerli.environment]
@@ -66,3 +70,4 @@
   REACT_APP_ZEROPOOL_NETWORK = "goerli"
   REACT_APP_BUCKET_URL = "https://r2-goerli.zkbob.com"
   REACT_APP_RESTRICTED_COUNTRIES = "AE"
+  REACT_APP_LOCK_TIMEOUT = "300000"
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",
@@ -27,6 +27,8 @@
     "react-copy-to-clipboard": "^5.0.4",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
+    "react-idle-timer": "^5.5.3",
+    "react-loading-skeleton": "^3.2.0",
     "react-modal": "^3.14.3",
     "react-outside-click-handler": "^1.3.0",
     "react-qr-code": "^2.0.11",
@@ -39,10 +41,10 @@
     "styled-components": "^5.3.0",
     "unique-names-generator": "^4.7.1",
     "uuid": "^9.0.0",
-    "wagmi": "^0.11.3",
+    "wagmi": "^0.12.1",
     "web-vitals": "^1.0.1",
     "webpack": "^5.70.0",
-    "zkbob-client-js": "2.0.2"
+    "zkbob-client-js": "2.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",

diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_TAG%"></script>
+    <!-- Google Tag Manager -->
     <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', '%REACT_APP_GA_TAG%');
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','%REACT_APP_GTM_ID%');
     </script>
+    <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>zkBob - Private Stable Transfers</title>

diff --git a/src/assets/infinity-loop.svg b/src/assets/infinity-loop.svg
diff --git a/src/assets/warning.svg b/src/assets/warning.svg
diff --git a/src/components/AccountSetUpModal/Confirm/index.js b/src/components/AccountSetUpModal/Confirm/index.js
@@ -10,41 +10,54 @@ export default ({ mnemonic, confirmMnemonic }) => {
   );
   const [repeated, setRepeated] = useState([]);
   const [match, setMatch] = useState(false);
+
   const addWord = useCallback(wordObj => {
+    const newRepeated = [...repeated];
+    newRepeated.push(wordObj);
+    setRepeated(newRepeated);
+  }, [repeated]);
+
+  const removeWord = useCallback(wordObj => {
     const index = repeated.map(({ index }) => index).indexOf(wordObj.index);
     const newRepeated = [...repeated];
-    if (index > -1) {
-      newRepeated.splice(index, 1);
-    } else {
-      newRepeated.push(wordObj);
-    }
+    newRepeated.splice(index, 1);
     setRepeated(newRepeated);
   }, [repeated]);
+
   useEffect(() => {
     const match = mnemonic === repeated.map(({ word }) => word).join(' ');
     setMatch(match);
   }, [mnemonic, repeated]);
+
   return (
     <Container>
       <Description>
-        Please input your seed phrase to verify it
+        Please input your seed phrase to verify it.<br/> Click on a word to remove it
       </Description>
       <MnemonicInput>
         {repeated.map(wordObj =>
-          <Word key={wordObj.index}>{wordObj.word}</Word>
-        )}
-      </MnemonicInput>
-      <Words>
-        {shuffled.map(wordObj =>
           <Word
-            key={`shuffled-${wordObj.index}`}
-            active={repeated.map(({ index }) => index).includes(wordObj.index)}
+            key={wordObj.index}
             clickable
-            onClick={() => addWord(wordObj)}
+            onClick={() => removeWord(wordObj)}
           >
             {wordObj.word}
           </Word>
         )}
+      </MnemonicInput>
+      <Words>
+        {shuffled.map(wordObj => {
+          const disabled = repeated.map(({ index }) => index).includes(wordObj.index);
+          return (
+            <Word
+              key={`shuffled-${wordObj.index}`}
+              disabled={disabled}
+              onClick={disabled ? null : () => addWord(wordObj)}
+            >
+              {wordObj.word}
+            </Word>
+          );
+        })}
       </Words>
       <Button disabled={!match} onClick={confirmMnemonic}>Verify</Button>
     </Container>
@@ -75,15 +88,15 @@ const Words = styled.div`
 
 const Word = styled.div`
   padding: 8px 10px;
-  border: 1px solid ${props => props.theme.mnemonic.border[props.active ? 'active' : 'default']};
-  background: ${props => props.theme.mnemonic.background[props.active ? 'active' : 'default']};
+  border: 1px solid ${props => props.theme.mnemonic.border[props.disabled ? 'active' : 'default']};
+  background: ${props => props.theme.mnemonic.background[props.disabled ? 'active' : 'default']};
   border-radius: 10px;
   box-sizing: border-box;
   margin-bottom: 16px;
   margin-right: 8px;
-  cursor: ${props => props.clickable ? 'pointer' : 'default'};
+  cursor: ${props => props.disabled ? 'default' : 'pointer'};
   font-size: 16px;
-  color: ${props => props.theme.mnemonic.text.color[props.active ? 'active' : 'default']};
+  color: ${props => props.theme.mnemonic.text.color[props.disabled ? 'active' : 'default']};
 `;
 
 const MnemonicInput = styled(Words)`

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -34,7 +34,7 @@ const Button = styled.button`
   border: 0;
   border-color: ${props => props.theme.button.primary.border.color};
   border-style: solid;
-  cursor: pointer;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
@@ -16,15 +16,15 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export default ({ children, content, ...props }) => {
+export default ({ children, content, disabled, ...props }) => {
   const [isVisible, setIsVisible] = useState(false);
   return (
     <>
       <GlobalStyle />
       <Tooltip
         overlayClassName="dropdown"
         placement="bottomRight"
-        trigger={['click']}
+        trigger={disabled ? [] : ['click']}
         overlay={content}
         showArrow={false}
         onPopupAlign={() => {

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -7,6 +7,7 @@ import { ZkAvatar } from 'components/ZkAccountIdentifier';
 import WalletDropdown from 'components/WalletDropdown';
 import ZkAccountDropdown from 'components/ZkAccountDropdown';
 import SpinnerDefault from 'components/Spinner';
+import Skeleton from 'components/Skeleton';
 
 import { ReactComponent as LogoDefault } from 'assets/logo-beta.svg';
 import { ReactComponent as RefreshIcon } from 'assets/refresh.svg';
@@ -17,16 +18,18 @@ import { ReactComponent as WalletIconDefault } from 'assets/wallet.svg';
 import { shortAddress, formatNumber } from 'utils';
 import { tokenSymbol } from 'utils/token';
 import { NETWORKS, CONNECTORS_ICONS } from 'constants';
+import { useWindowDimensions } from 'hooks';
 
 export default ({
   openWalletModal, connector, isLoadingZkAccount, empty,
   openAccountSetUpModal, account, zkAccount, openConfirmLogoutModal,
-  balance, poolBalance, zkAccountId, refresh, isRefreshing,
+  balance, poolBalance, zkAccountId, refresh, isLoadingBalance,
   openSwapModal, generateAddress, openChangePasswordModal,
-  openSeedPhraseModal, isDemo, disconnect,
+  openSeedPhraseModal, isDemo, disconnect, isLoadingState,
 }) => {
   const walletButtonRef = useRef(null);
   const zkAccountButtonRef = useRef(null);
+  const { width } = useWindowDimensions();
 
   if (empty) {
     return (
@@ -59,15 +62,22 @@ export default ({
             changeWallet={openWalletModal}
             disconnect={disconnect}
             buttonRef={walletButtonRef}
+            disabled={isLoadingBalance}
           >
-            <AccountLabel ref={walletButtonRef} $refreshing={isRefreshing}>
+            <AccountLabel ref={walletButtonRef} $refreshing={isLoadingBalance}>
               <Row>
                 {connector && <Icon src={CONNECTORS_ICONS[connector.name]} />}
                 <Address>{shortAddress(account)}</Address>
-                <Balance>
-                  {formatNumber(balance)} {tokenSymbol()}
-                </Balance>
-                <DropdownIcon />
+                {(isLoadingBalance && width > 1000) ? (
+                  <Skeleton width={80} />
+                ) : (
+                  <>
+                    <Balance>
+                      {formatNumber(balance)} {tokenSymbol()}
+                    </Balance>
+                    <DropdownIcon />
+                  </>
+                )}
               </Row>
             </AccountLabel>
           </WalletDropdown>
@@ -88,23 +98,31 @@ export default ({
               showSeedPhrase={openSeedPhraseModal}
               buttonRef={zkAccountButtonRef}
               isDemo={isDemo}
+              isLoadingState={isLoadingState}
+              disabled={isLoadingState}
             >
-              <AccountLabel ref={zkAccountButtonRef} $refreshing={isRefreshing}>
+              <AccountLabel ref={zkAccountButtonRef} $refreshing={isLoadingState}>
                 <Row>
                   <ZkAvatar seed={zkAccountId} size={16} />
                   <Address>zkAccount</Address>
-                  <Balance>
-                    <Tooltip content={formatNumber(poolBalance, 18)} placement="bottom">
-                      <span>{formatNumber(poolBalance)}</span>
-                    </Tooltip>
-                    {' '}{tokenSymbol(true)}
-                  </Balance>
-                  <DropdownIcon />
+                  {(isLoadingState && width > 1000) ? (
+                    <Skeleton width={80} />
+                  ) : (
+                    <>
+                      <Balance>
+                        <Tooltip content={formatNumber(poolBalance, 18)} placement="bottom">
+                          <span>{formatNumber(poolBalance)}</span>
+                        </Tooltip>
+                        {' '}{tokenSymbol(true)}
+                      </Balance>
+                      <DropdownIcon />
+                    </>
+                  )}
                 </Row>
               </AccountLabel>
             </ZkAccountDropdown>
             <RefreshButtonContainer onClick={refresh}>
-              {isRefreshing ? (
+              {(isLoadingBalance || isLoadingState) ? (
                 <Spinner size={18} />
               ) : (
                 <RefreshIcon />
@@ -176,16 +194,16 @@ const NetworkLabel = styled(Row)`
 `;
 
 const AccountLabel = styled(NetworkLabel)`
-  cursor: pointer;
+  cursor: ${props => props.$refreshing ? 'not-allowed' : 'pointer'};
   overflow: hidden;
   border: 1px solid ${props => props.theme.button.primary.text.color.contrast};
   &:hover {
-    border-color: ${props => props.theme.button.link.text.color};
+    border-color: ${props => !props.$refreshing && props.theme.button.link.text.color};
     & span {
-      color: ${props => props.theme.button.link.text.color};
+      color: ${props => !props.$refreshing && props.theme.button.link.text.color};
     }
     & path {
-      fill: ${props => props.theme.button.link.text.color};
+      fill: ${props => !props.$refreshing && props.theme.button.link.text.color};
     }
   }
 `;
@@ -197,13 +215,13 @@ const Icon = styled.img`
 
 const Address = styled.span`
   margin-left: 8px;
+  margin-right: 8px;
   @media only screen and (max-width: 1000px) {
     display: none;
   }
 `;
 
 const Balance = styled.span`
-  margin-left: 8px;
   font-weight: ${props => props.theme.text.weight.extraBold};
   @media only screen and (max-width: 1000px) {
     display: none;