feat: add zk sbt banner (#36)

* add zksbt banner * fix font * change contract config --------- Co-authored-by: alpers <alpers@163.com>
zCloak-Network · May 31, 2023 · 7aa827d · 7aa827d
1 parent 6c56b36
commit 7aa827d
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 52 deletions.
diff --git a/packages/app-config/src/contract.ts b/packages/app-config/src/contract.ts
@@ -6,7 +6,7 @@ import { optimismGoerli } from '@credential/react-components';
 import { isRelease } from './isRelease';
 
 export const ZKSBT_ADDRESS = isRelease
-  ? '0x1addc21e939b93e9337f8A663F62a64583b62233'
+  ? '0x08f1a8Eeb39E861FcC78812fd1C79291cd3f88A7'
   : '0x1addc21e939b93e9337f8A663F62a64583b62233';
 
 export const ZKSBT_CHAIN_ID = isRelease ? optimismGoerli.id : optimismGoerli.id;

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -238,7 +238,7 @@ const createNoSideBar = () => (
           <PageSbtEvent />
         </Container>
       }
-      path='event/2'
+      path='event/zk-kyc2023'
     />
   </Route>
 );

diff --git a/packages/app/src/Claimer/index.tsx b/packages/app/src/Claimer/index.tsx
@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useMemo } from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import Banner from '@credential/page-sbt-event/Banner';
 import { Box, useMediaQuery, useTheme } from '@credential/react-components';
 import { useToggle } from '@credential/react-hooks';
 
@@ -19,6 +20,7 @@ const Claimer: React.FC = () => {
   const [open, toggleOpen] = useToggle(!!upMd);
   const { pathname } = useLocation();
   const unreads = useNotification();
+  const navigate = useNavigate();
 
   const items = useMemo(
     () => [
@@ -47,6 +49,7 @@ const Claimer: React.FC = () => {
   return (
     <Box bgcolor='#F5F6FA' overflow='hidden' paddingTop='70px'>
       <Header toggleOpen={toggleOpen} unreads={unreads} />
+      <Banner onClick={() => navigate('/event/zk-kyc2023')} />
       <Box overflow='hidden' position='relative'>
         <Sidebar accountType='claimer' items={items} open={open} toggleOpen={toggleOpen} />
         <Box

diff --git a/packages/page-did/src/eth-bind/SigItem.tsx b/packages/page-did/src/eth-bind/SigItem.tsx
@@ -0,0 +1,31 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { Box, Typography } from '@credential/react-components';
+
+const SigItem: React.FC<{ value?: string; label?: string; mt?: number; mb?: number }> = ({ label, mb, mt, value }) => {
+  return (
+    <Box mb={mb} mt={mt}>
+      <Typography color='#8F95B2' fontSize={14} mb={1}>
+        {label}
+      </Typography>
+
+      <Box
+        sx={{
+          width: '100%',
+          paddingX: 2.25,
+          paddingY: 1.75,
+          bgcolor: '#F7F8FA',
+          borderRadius: '5px',
+          wordWrap: 'break-word'
+        }}
+      >
+        <Typography fontSize={14}>{value}</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default React.memo(SigItem);
diff --git a/packages/page-did/src/eth-bind/Step3.tsx b/packages/page-did/src/eth-bind/Step3.tsx
@@ -16,6 +16,7 @@ import {
 } from '@credential/react-components';
 import { DidsContext } from '@credential/react-dids';
 
+import SigItem from './SigItem';
 import TextWithBg from './TextWithBg';
 
 const Step3: React.FC<{ zkSig?: string; onMetaSigChange: (sig: string) => void; next: () => void }> = ({
@@ -61,8 +62,8 @@ const Step3: React.FC<{ zkSig?: string; onMetaSigChange: (sig: string) => void;
         </Stack>
       </TextWithBg>
       <Divider />
-      <TextWithBg bgcolor='#F7F8FA' label='zkID Sig:' mt={3} value={zkSig} />
-      <TextWithBg bgcolor='#F7F8FA' label='Sign this document with Ethereum Address' mb={4} mt={3} value={binding} />
+      <SigItem label='zkID Sig:' mt={3} value={zkSig} />
+      <SigItem label='Sign this document with Ethereum Address' mb={4} mt={3} value={binding} />
       <Button fullWidth onClick={signBinding} size='large' variant='contained'>
         Sign
       </Button>

diff --git a/packages/page-did/src/eth-bind/Step4.tsx b/packages/page-did/src/eth-bind/Step4.tsx
@@ -9,7 +9,7 @@ import { zCloakSBTAbi, ZKSBT_ADDRESS, ZKSBT_CHAIN_ID } from '@credential/app-con
 import { ButtonEnableMetamask, useAccount, useContractWrite } from '@credential/react-components';
 import { DidsContext } from '@credential/react-dids';
 
-import TextWithBg from './TextWithBg';
+import SigItem from './SigItem';
 
 const Step4: React.FC<{
   zkSig?: string;
@@ -46,8 +46,8 @@ const Step4: React.FC<{
 
   return (
     <>
-      <TextWithBg bgcolor='#F7F8FA' label='zkID Sig:' mb={2} mt={4} value={zkSig} />
-      <TextWithBg bgcolor='#F7F8FA' label='Ethereum Address Sig:' mb={4} value={metaSig} />
+      <SigItem label='zkID Sig:' mb={2} mt={4} value={zkSig} />
+      <SigItem label='Ethereum Address Sig:' mb={4} value={metaSig} />
       <ButtonEnableMetamask fullWidth loading={loading} onClick={bind} size='large' variant='contained'>
         Publish
       </ButtonEnableMetamask>

diff --git a/packages/page-did/src/eth-bind/TextWithBg.tsx b/packages/page-did/src/eth-bind/TextWithBg.tsx
@@ -11,7 +11,7 @@ const TextWithBg: React.FC<
   return (
     <Box mb={mb} mt={mt}>
       {label && (
-        <Typography color='#8F95B2' fontSize={0.875} mb={1}>
+        <Typography color='#8F95B2' fontSize={14} mb={1}>
           {label}
         </Typography>
       )}
@@ -25,7 +25,7 @@ const TextWithBg: React.FC<
           wordWrap: 'break-word'
         }}
       >
-        {value && <Typography fontSize={0.875}>{value}</Typography>}
+        {value && <Typography fontSize={14}>{value}</Typography>}
         {children}
       </Box>
     </Box>

diff --git a/packages/page-sbt-event/src/Banner.tsx b/packages/page-sbt-event/src/Banner.tsx
@@ -0,0 +1,54 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+
+export const Banner: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
+  const isClick = Boolean(onClick);
+
+  return (
+    <Box
+      onClick={onClick}
+      pt={isClick ? 1 : 3}
+      sx={{
+        width: '100%',
+        height: isClick ? 200 : 400,
+        background: 'url(/images/png_fingerprint.webp) no-repeat, url(/images/bac_banner.webp) no-repeat',
+        backgroundPosition: 'center 70%',
+        backgroundSize: 'contain,cover',
+        ':hover': {
+          cursor: isClick ? 'pointer' : 'unset'
+        }
+      }}
+    >
+      <Typography
+        fontWeight={800}
+        sx={{
+          color: '#0042F1',
+          fontSize: isClick ? '30px' : '54px',
+          span: {
+            color: '#fff'
+          }
+        }}
+        textAlign='center'
+      >
+        zkKYC <span>Event</span>
+      </Typography>
+      <Typography
+        color='#fff'
+        mt={isClick ? 12 : 30}
+        sx={{
+          span: {
+            fontWeight: 600
+          }
+        }}
+        textAlign='center'
+      >
+        Supported by <span>Chaintool, zCloak Network</span>
+      </Typography>
+    </Box>
+  );
+};
+
+export default React.memo(Banner);
diff --git a/packages/page-sbt-event/src/index.tsx b/packages/page-sbt-event/src/index.tsx
@@ -1,8 +1,9 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Box, Container, Typography } from '@mui/material';
+import { Box, Container } from '@mui/material';
 
+import Banner from './Banner';
 import Introduction from './Introduction';
 import MainStep from './MainSteps';
 import OptionalStep from './OptionalStep';
@@ -36,45 +37,4 @@ const PageSbtEvent = () => {
   );
 };
 
-const Banner = () => {
-  return (
-    <Box
-      pt={3}
-      sx={{
-        width: '100%',
-        minHeight: 400,
-        background: 'url(/images/png_fingerprint.webp) no-repeat, url(/images/bac_banner.webp) no-repeat',
-        backgroundPosition: 'center 70%',
-        backgroundSize: 'contain,cover'
-      }}
-    >
-      <Typography
-        fontWeight={800}
-        sx={{
-          color: '#0042F1',
-          fontSize: '54px',
-          span: {
-            color: '#fff'
-          }
-        }}
-        textAlign='center'
-      >
-        zkKYC <span>Event</span>
-      </Typography>
-      <Typography
-        color='#fff'
-        mt={30}
-        sx={{
-          span: {
-            fontWeight: 600
-          }
-        }}
-        textAlign='center'
-      >
-        Supported by <span>Chaintool, zCloak Network</span>
-      </Typography>
-    </Box>
-  );
-};
-
 export default PageSbtEvent;