v2.0.0 (#182)

* Fix self-transfer display in the history (Fix self-transfer display in the history #117) * Display an error when data can't be loaded (Display an error when data can't be loaded #114) * Multichain (UI for multi-chain deployment #168) * Gift cards v2 (Gift Cards V2 #167) * Temporarily remove WalletConnect v2 * Fix KYC banner styles (Issue with displaying KYC resync banner #177)
zkBob · Apr 27, 2023 · f23cf20 · f23cf20
1 parent 59c63b4
commit f23cf20
Show file tree

Hide file tree

Showing 61 changed files with 1,315 additions and 635 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -23,51 +23,13 @@
       base = '/opt/build/repo/public'
 
 [context.production.environment]
-  REACT_APP_EXPLORER_ADDRESS_TEMPLATE = "https://polygonscan.com/address/%s"
-  REACT_APP_EXPLORER_TX_TEMPLATE = "https://polygonscan.com/tx/%s"
-  REACT_APP_EXPLORER_URL = "https://polygonscan.com"
-  REACT_APP_NETWORK = "137"
-  REACT_APP_CONTRACT_ADDRESS = "0x72e6B59D4a90ab232e55D4BB7ed2dD17494D62fB"
-  REACT_APP_TOKEN_ADDRESS = "0xB0B195aEFA3650A6908f15CdaC7D92F8a5791B0B"
-  REACT_APP_RELAYER_URL = "https://relayer-mvp.zkbob.com"
-  REACT_APP_PROVER_URL = "https://remoteprover-mvp.zkbob.com/"
-  REACT_APP_RPC_URL = "https://polygon-rpc.com"
-  REACT_APP_ZEROPOOL_NETWORK = "polygon"
-  REACT_APP_BUCKET_URL = "https://r2.zkbob.com"
-  REACT_APP_SNARK_PARAMS_VERSION = "22022023"
+  REACT_APP_CONFIG="prod"
   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]
-  REACT_APP_EXPLORER_ADDRESS_TEMPLATE = "https://sepolia.etherscan.io/address/%s"
-  REACT_APP_EXPLORER_TX_TEMPLATE = "https://sepolia.etherscan.io/tx/%s"
-  REACT_APP_EXPLORER_URL = "https://sepolia.etherscan.io"
-  REACT_APP_NETWORK = "11155111"
-  REACT_APP_CONTRACT_ADDRESS = "0x3bd088C19960A8B5d72E4e01847791BD0DD1C9E6"
-  REACT_APP_TOKEN_ADDRESS = "0x2C74B18e2f84B78ac67428d0c7a9898515f0c46f"
-  REACT_APP_RELAYER_URL = "https://relayer.thgkjlr.website/"
-  REACT_APP_PROVER_URL = "https://prover-staging.thgkjlr.website/"
-  REACT_APP_RPC_URL = "https://rpc.sepolia.org"
-  REACT_APP_ZEROPOOL_NETWORK = "sepolia"
-  REACT_APP_BUCKET_URL = "https://r2-staging.zkbob.com"
-  REACT_APP_SNARK_PARAMS_VERSION = "20022023"
+  REACT_APP_CONFIG="dev"
   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]
-  REACT_APP_EXPLORER_ADDRESS_TEMPLATE = "https://goerli.etherscan.io/address/%s"
-  REACT_APP_EXPLORER_TX_TEMPLATE = "https://goerli.etherscan.io/tx/%s"
-  REACT_APP_EXPLORER_URL = "https://goerli.etherscan.io"
-  REACT_APP_NETWORK = "5"
-  REACT_APP_CONTRACT_ADDRESS = "0x49661694a71B3Dab9F25E86D5df2809B170c56E6"
-  REACT_APP_TOKEN_ADDRESS = "0x97a4ab97028466FE67F18A6cd67559BAABE391b8"
-  REACT_APP_RELAYER_URL = "https://dev-relayer.thgkjlr.website/"
-  REACT_APP_RPC_URL = "https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161"
-  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.4.0",
+  "version": "2.0.0",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",
@@ -44,7 +44,7 @@
     "wagmi": "^0.12.1",
     "web-vitals": "^1.0.1",
     "webpack": "^5.70.0",
-    "zkbob-client-js": "2.1.0"
+    "zkbob-client-js": "3.2.1"
   },
   "scripts": {
     "start": "react-app-rewired start",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "zkBob",
+  "name": "zkBob - Private Stable Transfers",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.js b/src/App.js
@@ -12,6 +12,7 @@ import 'services';
 import GilroyRegular from 'fonts/Gilroy-Regular.woff';
 import GilroyMedium from 'fonts/Gilroy-Medium.woff';
 import GilroyBold from 'fonts/Gilroy-Bold.woff';
+import GilroyExtraBold from 'fonts/Gilroy-ExtraBold.woff';
 
 const GlobalStyle = createGlobalStyle`
   @font-face {
@@ -29,6 +30,11 @@ const GlobalStyle = createGlobalStyle`
     src: url(${GilroyBold}) format('woff');
     font-weight: 700;
   }
+  @font-face {
+    font-family: 'Gilroy';
+    src: url(${GilroyExtraBold}) format('woff');
+    font-weight: 800;
+  }
   body {
     margin: 0;
     font-family: 'Gilroy';

diff --git a/src/assets/dots.svg b/src/assets/dots.svg
diff --git a/src/assets/dropdown.svg b/src/assets/dropdown.svg
diff --git a/src/assets/github.svg b/src/assets/github.svg
diff --git a/src/assets/mirror.svg b/src/assets/mirror.svg
diff --git a/src/assets/optimism.svg b/src/assets/optimism.svg
diff --git a/src/assets/telegram.svg b/src/assets/telegram.svg
diff --git a/src/assets/twitter.svg b/src/assets/twitter.svg
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -12,7 +12,7 @@ export default props => {
       return (
         <Button {...props}>
           {props.$loading &&
-            <Spinner $small={props.$small} $contrast={props.$contrast} size={props.$small ? 16 : 24} />
+            <Spinner $small={props.small} $contrast={props.$contrast} size={props.small ? 16 : 24} />
           }
           {props.children}
         </Button>
@@ -25,19 +25,24 @@ const Button = styled.button`
     props.theme.button.primary.background[props.disabled ? (props.$contrast ? 'contrast' : 'disabled') : 'default']
   };
   color: ${props => props.theme.button.primary.text.color[props.disabled && props.$contrast ? 'contrast' : 'default']};
-  font-size: ${props => props.theme.button.primary.text.size[props.$small ? 'small' : 'default']};
-  font-weight: ${props => props.theme.button.primary.text.weight[props.$small ? 'small' : 'default']};
-  padding: ${props => props.$small ? '8px 16px' : '0'};
-  height: ${props => props.$small ? '30px' : '60px'};
+  font-size: ${props => props.theme.button.primary.text.size[props.small ? 'small' : 'default']};
+  font-weight: ${props => props.theme.button.primary.text.weight[props.small ? 'small' : 'default']};
+  padding: ${props => props.small ? '8px 16px' : '0'};
+  height: ${props => props.small ? '36px' : '60px'};
   box-sizing: border-box;
-  border-radius: 16px;
+  border-radius: ${props => props.small ? '18px' : '16px'};
   border: 0;
   border-color: ${props => props.theme.button.primary.border.color};
   border-style: solid;
   cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   display: flex;
   align-items: center;
   justify-content: center;
+  @media only screen and (max-width: 1000px) {
+    height: ${props => props.small ? '30px' : '60px'};
+    padding: ${props => props.small ? '8px 12px' : '0'};
+    border-radius: 16px;
+  }
 `;
 
 const TransparentButton = styled.button`

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -2,56 +2,40 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 import zkBobLibPackage from 'zkbob-client-js/package.json';
 
+import { SupportIdContext, ZkAccountContext } from 'contexts';
+
 import Link from 'components/Link';
-import Button from 'components/Button';
 
-import { ModalContext, SupportIdContext, ZkAccountContext } from 'contexts';
+import { ReactComponent as TwitterIcon } from 'assets/twitter.svg';
+import { ReactComponent as TelegramIcon } from 'assets/telegram.svg';
+import { ReactComponent as MirrorIcon } from 'assets/mirror.svg';
+import { ReactComponent as GithubIcon } from 'assets/github.svg';
 
 
 export default () => {
-  const { openSwapOptionsModal } = useContext(ModalContext);
   const { supportId } = useContext(SupportIdContext);
   const { relayerVersion } = useContext(ZkAccountContext);
 
-  const sections = [
-    {
-      title: 'Resources',
-      links: [
-        { name: 'Documentation', href: 'https://docs.zkbob.com/' },
-        { name: 'FAQ', href: 'https://docs.zkbob.com/zkbob-overview/faq' },
-        { name: 'Linktree', href: 'https://linktr.ee/zkbob' },
-        { name: 'Dune Analytics', href: 'https://dune.com/maxaleks/zkbob' },
-      ]
-    },
-    {
-      title: 'BOB Stable Token',
-      links: [
-        {
-          name: 'View contract',
-          href: `${process.env.REACT_APP_EXPLORER_URL}/token/${process.env.REACT_APP_TOKEN_ADDRESS}`,
-        },
-      ],
-      components: [
-        <Button key={'getbob'} type="link" onClick={openSwapOptionsModal}>Get BOB</Button>
-      ]
-    }
+  const resources = [
+    { icon: TwitterIcon, href: 'https://twitter.com/zkBob_' },
+    { icon: TelegramIcon, href: 'https://t.me/zkbob_news' },
+    { icon: MirrorIcon, href: 'https://mirror.xyz/0x6132eB883e88CD4E007552b871A6444Bfc34E837' },
+    { icon: GithubIcon, href: 'https://github.com/zkBob' },
   ];
 
   return (
     <Column>
       <Row>
-        {/* <Title>© zkBob 2022</Title> */}
-        {sections.map((column, index) => (
-          <InnerRow key={index}>
-            <Text>{column?.title}</Text>
-            {column?.links.map((link, index) => (
-              <Link key={index} href={link.href}>
-                {link.name}
-              </Link>
-            ))}
-            {column?.components?.map(component => component)}
-          </InnerRow>
-        ))}
+        <InnerRow>
+          <CustomLink href="https://bob.zkbob.com">
+            bob.zkbob.com
+          </CustomLink>
+          {resources.map((resource, index) => (
+            <CustomLink key={index} href={resource.href} target="">
+              {React.createElement(resource.icon, {})}
+            </CustomLink>
+          ))}
+        </InnerRow>
       </Row>
       <Row>
         <InnerRow>
@@ -87,16 +71,15 @@ const InnerRow = styled.div`
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  margin: 10px 5px 0;
   & > * {
-    margin: 4px 10px 0;
+    margin: 7px 10px 0;
   }
 `;
 
 const Text = styled.span`
   font-size: 14px;
-  color: ${props => props.theme.text.color.secondary};
-  font-weight: ${props => props.theme.text.weight.normal};
+  color: #A7A2B8;
+  font-weight: ${props => props.theme.text.weight.bold};
   line-height: 20px;
   text-align: center;
 `;
@@ -106,3 +89,9 @@ const TextRow = styled.div`
   justify-content: center;
   flex-wrap: wrap;
 `;
+
+const CustomLink = styled(Link)`
+  color: #A7A2B8;
+  font-size: 14px;
+  font-weight: ${props => props.theme.text.weight.bold};
+`;