add wallet logout

packages/app-config/src/icons/BaseLogo.tsx

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// generate by buildAssets.js
+
+import type { SvgIconProps } from '@mui/material';
+
+import React from 'react';
+
+import { SvgIcon } from '@credential/react-components';
+
+import BaseLogoSvg from '../assets/base-logo.svg';
+
+function BaseLogo(props: SvgIconProps) {
+  return <SvgIcon component={BaseLogoSvg} fontSize='inherit' viewBox='0 0 500 500' {...props} />;
+}
+
+export default React.memo(BaseLogo);

packages/app-config/src/icons/OptimismLogo.tsx

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// generate by buildAssets.js
+
+import type { SvgIconProps } from '@mui/material';
+
+import React from 'react';
+
+import { SvgIcon } from '@credential/react-components';
+
+import OptimismLogoSvg from '../assets/optimism_logo.svg';
+
+function OptimismLogo(props: SvgIconProps) {
+  return <SvgIcon component={OptimismLogoSvg} fontSize='inherit' viewBox='0 0 1024 1024' {...props} />;
+}
+
+export default React.memo(OptimismLogo);

packages/app-config/src/icons/index.tsx

@@ -1,6 +1,7 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+export { default as BaseLogo } from './BaseLogo';
 export { default as FirstTopLogo } from './FirstTopLogo';
 export { default as IconAddress } from './IconAddress';
 export { default as IconAnd } from './IconAnd';
@@ -52,3 +53,4 @@ export { default as IconTips } from './IconTips';
 export { default as IconTwitter } from './IconTwitter';
 export { default as IconZkid } from './IconZkid';
 export { default as LogoMetamask } from './LogoMetamask';
+export { default as OptimismLogo } from './OptimismLogo';

packages/app-config/src/zk/chaintool.ts

@@ -6,7 +6,7 @@ import type { ZkProgramConfig, ZkProgramOption } from './types';
 import { ZKSBT_CTYPE } from '../contract';
 
 function getPublicInput() {
-  const currentDate = new Date();
+  const currentDate = new Date(new Date().setHours(0, 0, 0, 0));
   const compareDate = currentDate.setFullYear(currentDate.getFullYear() - 18);
 
   return `${Math.floor(new Date(compareDate).getTime())}`;

packages/page-sbt/src/Top.tsx

@@ -6,46 +6,31 @@
 import { Box, Container, Stack, Typography } from '@mui/material';
 import React from 'react';
 
-import { ConnectWallet, Network, useAccount } from '@credential/react-components';
+import { ConnectWallet, EthWalletAddress, Network, useAccount } from '@credential/react-components';
 
 import Faucet from './Faucet';
 
-// import { CTypeName } from '@credential/react-components';
-// import { DidName } from '@credential/react-dids';
-
-// interface Props {
-//   vc: VerifiableCredential<boolean>;
-// }
-
-// function Item({ label, value }: { label: string; value?: React.ReactNode }) {
-//   return (
-//     <Stack
-//       bgcolor='#FBFAFC'
-//       border='1px solid #EBEAED'
-//       direction='row'
-//       display='inline-flex'
-//       lineHeight={'18px'}
-//       maxWidth={520}
-//       paddingX={2}
-//       paddingY={1}
-//     >
-//       <Box sx={{ width: 90 }}>{label}</Box>
-//       <Box sx={{ color: '#5D5D5B' }}>{value}</Box>
-//     </Stack>
-//   );
-// }
-
 function Top() {
   const { isConnected } = useAccount();
 
   return (
     <Box sx={{ bgcolor: 'common.white', paddingTop: '36px', paddingBottom: '20px' }}>
-      <Container maxWidth='xl' sx={{ display: 'flex', flexDirection: 'row', gap: 2, justifyContent: 'space-between' }}>
+      <Container
+        maxWidth='xl'
+        sx={{ display: 'flex', flexDirection: 'row', gap: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
         <Typography variant='h1'>Mint zkID Card</Typography>
         {isConnected ? (
-          <Stack direction='row' spacing={2}>
+          <Stack
+            direction={{
+              sm: 'row',
+              xs: 'column'
+            }}
+            spacing={2}
+          >
             <Faucet />
             <Network />
+            <EthWalletAddress />
           </Stack>
         ) : (
           <ConnectWallet sx={{ width: 200 }} variant='outlined'>

packages/react-components/src/EthWalletAddress.tsx

@@ -0,0 +1,36 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import LogoutIcon from '@mui/icons-material/Logout';
+import { alpha, Stack, Typography } from '@mui/material';
+import { useAccount, useDisconnect } from 'wagmi';
+
+import Address from './Address';
+import IconButton from './IconButton';
+import IdentityIcon from './IdentityIcon';
+
+const EthWalletAddress = () => {
+  const { address } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  return (
+    <Stack
+      alignItems='center'
+      bgcolor={alpha('#6768ac', 0.1)}
+      borderRadius='50px'
+      direction='row'
+      paddingX={1}
+      spacing={1}
+    >
+      <IdentityIcon diameter={24} value={address} />
+      <Typography variant='caption'>
+        <Address value={address} />
+      </Typography>
+      <IconButton onClick={() => disconnect()}>
+        <LogoutIcon />
+      </IconButton>
+    </Stack>
+  );
+};
+
+export default EthWalletAddress;

packages/react-components/src/Network.tsx

@@ -8,7 +8,20 @@ import { alpha, Button, Popover, Stack } from '@mui/material';
 import { useCallback, useMemo, useState } from 'react';
 import { useNetwork, useSwitchNetwork } from 'wagmi';
 
-import { IconNetwork } from '@credential/app-config';
+import { BaseLogo, OptimismLogo } from '@credential/app-config';
+
+import { baseGoerli, optimismGoerli } from '.';
+
+function ChainIcon({ chainId }: { chainId?: number }) {
+  switch (chainId) {
+    case baseGoerli.id:
+      return <BaseLogo />;
+    case optimismGoerli.id:
+      return <OptimismLogo />;
+    default:
+      return <WarningAmberIcon />;
+  }
+}
 
 const Network = () => {
   const { chain } = useNetwork();
@@ -45,17 +58,22 @@ const Network = () => {
       <Button
         endIcon={open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
         onClick={handleClick}
-        startIcon={isWrongNet ? <WarningAmberIcon /> : <IconNetwork />}
         sx={{
-          width: 200,
+          width: 50,
           bgcolor: alpha('#0012FF', 0.1),
           color: isWrongNet ? '' : 'primary.main'
         }}
       >
-        {isWrongNet ? 'Wrong network' : chain?.name}
+        <ChainIcon chainId={chain?.id} />
       </Button>
 
       <Popover
+        PaperProps={{
+          sx: {
+            borderRadius: '8px',
+            marginTop: '16px'
+          }
+        }}
         anchorEl={anchorEl}
         anchorOrigin={{
           vertical: 'bottom',
@@ -66,7 +84,12 @@ const Network = () => {
       >
         <Stack width={200}>
           {chains.map((x) => (
-            <Button disabled={!switchNetwork || x.id === chain?.id} key={x.id} onClick={() => changeNetwork(x.id)}>
+            <Button
+              disabled={!switchNetwork || x.id === chain?.id}
+              key={x.id}
+              onClick={() => changeNetwork(x.id)}
+              startIcon={<ChainIcon chainId={x.id} />}
+            >
               {x.name}
             </Button>
           ))}

packages/react-components/src/index.ts

@@ -42,6 +42,7 @@ export { default as WagmiProvider } from './WagmiProvider';
 export { default as ButtonEnableMetamask } from './ButtonEnableMetamask';
 export { default as ConnectWallet } from './ConnectWallet';
 export { default as Network } from './Network';
+export { default as EthWalletAddress } from './EthWalletAddress';
 
 export * from './WagmiProvider/chain';
 export * from './Status';