From acba783914520757eff88b372b252912a9b7b7d2 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Thu, 19 May 2022 20:08:30 +0800
Subject: [PATCH 1/3] fix: bugfix

---
 .../ArtBlocks/SNSAdaptor/ActionBar.tsx        | 11 +++++-
 .../Gitcoin/SNSAdaptor/PreviewCard.tsx        | 11 +++---
 .../RedPacket/SNSAdaptor/RedPacketNft.tsx     |  7 ----
 .../src/web3/UI/EthereumChainBoundary.tsx     | 38 +++++++++++++++----
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
index 7a227a1f65d2..b44d1b4de614 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
@@ -7,12 +7,18 @@ import type { Project } from '../types'
 
 const useStyles = makeStyles()((theme) => {
     return {
-        root: {},
+        root: {
+            flex: 1,
+        },
         content: {
             padding: theme.spacing(0),
         },
         button: {
-            flex: 1,
+            backgroundColor: theme.palette.maskColor.dark,
+            color: 'white',
+            '&:hover': {
+                backgroundColor: theme.palette.maskColor.dark,
+            },
         },
     }
 })
@@ -40,6 +46,7 @@ export function ActionBar(props: ActionBarProps) {
         <Box className={classes.root} display="flex" justifyContent="center">
             <ActionButton
                 className={classes.button}
+                fullWidth
                 color="primary"
                 variant="contained"
                 onClick={onOpenMintDialog}
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
index 05c1e3d799ad..2ff3844d10a8 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
@@ -73,7 +73,11 @@ const useStyles = makeStyles()((theme) => ({
         '-webkit-box-orient': 'vertical',
     },
     button: {
-        color: theme.palette.mode === 'dark' ? 'white' : 'black',
+        backgroundColor: theme.palette.maskColor.dark,
+        color: 'white',
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.dark,
+        },
         width: '100%',
     },
 }))
@@ -172,13 +176,8 @@ export function PreviewCard(props: PreviewCardProps) {
             <Box sx={{ display: 'flex', width: '100%' }}>
                 <Box sx={{ flex: 1, padding: 1.5 }}>
                     <Button
-                        variant="outlined"
                         fullWidth
                         className={classes.button}
-                        style={{
-                            lineHeight: 0,
-                            padding: 19,
-                        }}
                         target="_blank"
                         rel="noopener noreferrer"
                         href={urlcat('https://gitcoin.co', grant.url)}>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 112fb49b69df..760e97b4ddcb 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -81,14 +81,8 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(1),
     },
     button: {
-        minHeight: 40,
-        height: 40,
-
         backgroundColor: theme.palette.maskColor.dark,
         color: 'white',
-        fontSize: 14,
-        fontWeight: 700,
-        width: '100%',
         '&:hover': {
             backgroundColor: theme.palette.maskColor.dark,
         },
@@ -444,7 +438,6 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                             className={classes.button}
                             fullWidth
                             onClick={onShare}
-                            size="large"
                             variant="contained">
                             {t('share')}
                         </Button>
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index 03596762dc52..f062115d7316 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Box, Typography, Theme, useTheme } from '@mui/material'
 import { makeStyles, MaskColorVar, ShadowRootTooltip, useStylesExtends } from '@masknet/theme'
 import type { SxProps } from '@mui/system'
@@ -59,13 +59,13 @@ export interface EthereumChainBoundaryProps extends withClasses<'switchButton'>
     switchButtonStyle?: SxProps<Theme>
     children?: React.ReactNode
     isValidChainId?: (actualChainId: ChainId, expectedChainId: ChainId) => boolean
+    renderInTimeline?: boolean
     ActionButtonPromiseProps?: Partial<ActionButtonPromiseProps>
 }
 
 export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
     const { t } = useI18N()
     const theme = useTheme()
-
     const pluginID = useCurrentWeb3NetworkPluginID()
     const plugin = useActivatedPlugin(pluginID, 'any')
 
@@ -162,6 +162,26 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
         if (!isChainMatched) await switchToChain()
     }, [account, isAllowed, isChainMatched, isPluginMatched, providerType, expectedChainId])
 
+    // TODO: will remove this and extract new boundary for timeline
+    const buttonProps = useMemo(() => {
+        return {
+            ...(props.renderInTimeline
+                ? {
+                      variant: 'contained',
+                      fullWidth: true,
+                      sx: {
+                          backgroundColor: theme.palette.maskColor.dark,
+                          color: theme.palette.maskColor.white,
+                          '&:hover': {
+                              backgroundColor: theme.palette.maskColor.dark,
+                          },
+                      },
+                  }
+                : {}),
+            ...props.ActionButtonPromiseProps,
+        } as Partial<ActionButtonPromiseProps>
+    }, [props.ActionButtonPromiseProps, props.renderInTimeline])
+
     const renderBox = (children?: React.ReactNode, tips?: string) => {
         return (
             <ShadowRootTooltip title={tips ?? ''} classes={{ tooltip: classes.tooltip }} arrow placement="top">
@@ -182,11 +202,13 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
             <>
                 {!props.hiddenConnectButton ? (
                     <ActionButton
-                        startIcon={<PluginWalletConnectIcon />}
+                        fullWidth
+                        startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                         variant="contained"
                         size={props.ActionButtonPromiseProps?.size}
                         sx={{ marginTop: 1.5 }}
-                        onClick={openSelectProviderDialog}>
+                        onClick={openSelectProviderDialog}
+                        {...buttonProps}>
                         {t('plugin_wallet_connect_wallet')}
                     </ActionButton>
                 ) : null}
@@ -228,7 +250,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                             />
                         }
                         sx={props.switchButtonStyle}
-                        style={{ borderRadius: 10 }}
                         init={
                             <span>
                                 {t('plugin_wallet_connect_network', {
@@ -246,7 +267,8 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                         executor={onSwitchChain}
                         completeOnClick={onSwitchChain}
                         failedOnClick="use executor"
-                        {...props.ActionButtonPromiseProps}
+                        fullWidth
+                        {...buttonProps}
                     />
                 ) : null}
             </>,
@@ -274,7 +296,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                         />
                     }
                     sx={props.switchButtonStyle}
-                    style={{ borderRadius: 10, paddingTop: 11, paddingBottom: 11 }}
                     init={
                         <span>
                             {t('plugin_wallet_switch_network', { network: expectedNetwork.replace('Mainnet', '') })}
@@ -288,7 +309,8 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                     executor={onSwitchChain}
                     completeOnClick={onSwitchChain}
                     failedOnClick="use executor"
-                    {...props.ActionButtonPromiseProps}
+                    fullWidth
+                    {...buttonProps}
                 />
             ) : null}
         </>,

From 62f68f22f8fdb7b98cfcfdce46bb7032fd186237 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Thu, 19 May 2022 20:32:22 +0800
Subject: [PATCH 2/3] fix: bugfix for ui

---
 packages/mask/src/web3/UI/EthereumChainBoundary.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index f062115d7316..9626dece8fd5 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -247,6 +247,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                             <WalletIcon
                                 networkIcon={networkDescriptor?.icon} // switch the icon to meet design
                                 isBorderColorNotDefault
+                                size={18}
                             />
                         }
                         sx={props.switchButtonStyle}

From 001d597ec7f1d267cd9e7fbbf8f090c27673fd10 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Thu, 19 May 2022 21:07:01 +0800
Subject: [PATCH 3/3] fix: spell error

---
 .../mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
index 40165f6de8cf..c4c929cd57e8 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
@@ -136,7 +136,7 @@ export function Collectible(props: CollectibleProps) {
                             target="_blank"
                             rel="noopener noreferrer">
                             <Avatar
-                                src={assetSource?.owner[0]?.ownerAvator ?? assetSource?.creator?.avatorPath ?? ''}
+                                src={assetSource?.owner[0]?.ownerAvatar ?? assetSource?.creator?.avatarPath ?? ''}
                             />
                         </Link>
                     }