DimensionDev · lelenei · May 18, 2022 · May 18, 2022 · May 18, 2022 · May 18, 2022
diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
@@ -1,7 +1,7 @@
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
 
 const PluginRenderer = createInjectHooksRenderer(
-    useActivatedPluginsSNSAdaptor.visibility.useAnyMode,
+    useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
     (x) => x.SearchResultBox,
 )
 

diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
@@ -102,6 +102,17 @@ const useStyles = makeStyles()((theme) => {
                 backgroundColor: theme.palette.primary.main,
             },
         },
+        button: {
+            backgroundColor: theme.palette.maskColor.dark,
+            color: 'white',
+            fontSize: 14,
+            fontWeight: 700,
+            width: '100%',
+            '&:hover': {
+                backgroundColor: theme.palette.maskColor.dark,
+            },
+            margin: '0 !important',
+        },
     }
 })
 
@@ -263,8 +274,8 @@ export function FindTruman(props: FindTrumanProps) {
             <Box style={{ padding: 12 }}>
                 <EthereumChainBoundary chainId={chainId}>
                     <EthereumWalletConnectedBoundary
-                        hideRiskWarningConfirmed
                         startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
+                        classes={{ button: classes.button }}
                     />
                 </EthereumChainBoundary>
             </Box>

diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -185,7 +185,9 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         minHeight: 35,
         '&:hover': {
             background: 'none',
+            borderColor: '#fff !important',
         },
+        background: 'none',
     },
     loadingWrap: {
         display: 'flex',
@@ -916,12 +918,7 @@ export function ITO_Error({ retryPoolPayload }: { retryPoolPayload: () => void }
             <Typography variant="body1" className={classes.loadingITO}>
                 {t('loading_failed')}
             </Typography>
-            <ActionButton
-                onClick={retryPoolPayload}
-                variant="outlined"
-                size="large"
-                color="primary"
-                className={classes.loadingITO_Button}>
+            <ActionButton onClick={retryPoolPayload} variant="outlined" className={classes.loadingITO_Button}>
                 {t('try_again')}
             </ActionButton>
         </Card>

diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
@@ -39,6 +39,17 @@ const useTabsStyles = makeStyles()((theme) => ({
     tabPanel: {
         marginTop: `${theme.spacing(2)} !important`,
     },
+    button: {
+        backgroundColor: theme.palette.maskColor.dark,
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 700,
+        width: '100%',
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.dark,
+        },
+        margin: '0 !important',
+    },
 }))
 
 export interface PreviewCardProps {}
@@ -239,7 +250,9 @@ export function PreviewCard(props: PreviewCardProps) {
             </Box>
             <Box style={{ padding: 12 }}>
                 <EthereumChainBoundary chainId={chainId}>
-                    <EthereumWalletConnectedBoundary ActionButtonProps={{ size: 'medium' }}>
+                    <EthereumWalletConnectedBoundary
+                        ActionButtonProps={{ size: 'medium' }}
+                        classes={{ button: tabClasses.button }}>
                         <ActionButton
                             size="medium"
                             fullWidth

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
@@ -93,7 +93,7 @@ export function OperationFooter({
                     hideRiskWarningConfirmed
                     startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                     classes={{
-                        connectWallet: classes.connectWallet,
+                        button: classes.walletButton,
                     }}>
                     <Box className={classes.footer}>
                         {canRefund ? null : (

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
@@ -166,5 +166,15 @@ to {
             fontSize: 24,
             marginTop: 210,
         },
+        walletButton: {
+            backgroundColor: theme.palette.maskColor.dark,
+            color: 'white',
+            fontSize: 14,
+            fontWeight: 700,
+            width: '100%',
+            '&:hover': {
+                backgroundColor: theme.palette.maskColor.dark,
+            },
+        },
     }
 })
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -8,7 +8,7 @@ import {
     TransactionStateType,
 } from '@masknet/web3-shared-evm'
 import LaunchIcon from '@mui/icons-material/Launch'
-import { Grid, Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
+import { Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
 import { useCallback, useEffect, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../utils'
@@ -23,7 +23,7 @@ import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { openWindow } from '@masknet/shared-base-ui'
-import { PluginWalletConnectIcon } from '@masknet/icons'
+import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 
 const useStyles = makeStyles()((theme) => ({
@@ -81,9 +81,18 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(1),
     },
     button: {
-        marginTop: '0 !important',
-        minHeight: 38,
-        height: 38,
+        minHeight: 40,
+        height: 40,
+
+        backgroundColor: theme.palette.maskColor.dark,
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 700,
+        width: '100%',
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.dark,
+        },
+        margin: '0 !important',
     },
     footer: {
         display: 'flex',
@@ -102,6 +111,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     buttonWrapper: {
         marginTop: 0,
+        display: 'flex',
     },
     loadingBox: {
         borderRadius: theme.spacing(1),
@@ -255,7 +265,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
         loading,
         retry: retryAvailability,
         error: availabilityError,
-    } = useAvailabilityNftRedPacket(payload.id, account)
+    } = useAvailabilityNftRedPacket(payload.id, account, payload.chainId)
     const [claimState, claimCallback, resetCallback] = useClaimNftRedpacketCallback(
         payload.id,
         availability?.totalAmount,
@@ -427,14 +437,20 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                     </div>
                 </Card>
             ) : availability.isClaimedAll || availability.isCompleted ? null : (
-                <Grid container spacing={2} className={classes.buttonWrapper}>
-                    <Grid item xs={availability.isClaimed ? 12 : 6}>
-                        <Button className={classes.button} fullWidth onClick={onShare} size="large" variant="contained">
+                <Box className={classes.buttonWrapper}>
+                    <Box sx={{ flex: 1, padding: 1.5 }}>
+                        <Button
+                            startIcon={<SharedIcon style={{ fontSize: 18 }} />}
+                            className={classes.button}
+                            fullWidth
+                            onClick={onShare}
+                            size="large"
+                            variant="contained">
                             {t('share')}
                         </Button>
-                    </Grid>
+                    </Box>
                     {availability.isClaimed ? null : (
-                        <Grid item xs={6}>
+                        <Box sx={{ flex: 1, padding: 1.5 }}>
                             <EthereumChainBoundary chainId={payload.chainId}>
                                 <EthereumWalletConnectedBoundary
                                     startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
@@ -454,9 +470,9 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                                     </ActionButton>
                                 </EthereumWalletConnectedBoundary>
                             </EthereumChainBoundary>
-                        </Grid>
+                        </Box>
                     )}
-                </Grid>
+                </Box>
             )}
         </div>
     )

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts
@@ -1,9 +1,10 @@
+import type { ChainId } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { useAsyncRetry } from 'react-use'
 import { useNftRedPacketContract } from './useNftRedPacketContract'
 
-export function useAvailabilityNftRedPacket(id: string, from: string) {
-    const nftRedPacketContract = useNftRedPacketContract()
+export function useAvailabilityNftRedPacket(id: string, from: string, chainId?: ChainId) {
+    const nftRedPacketContract = useNftRedPacketContract(chainId)
     return useAsyncRetry(async () => {
         if (!id || !nftRedPacketContract) return null
         const availability = await nftRedPacketContract.methods.check_availability(id).call({

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
@@ -1,10 +1,10 @@
 import NftRedPacketABI from '@masknet/web3-contracts/abis/NftRedPacket.json'
-import { useContract, useNftRedPacketConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useContract, useNftRedPacketConstants } from '@masknet/web3-shared-evm'
 import type { NftRedPacket } from '@masknet/web3-contracts/types/NftRedPacket'
 import type { AbiItem } from 'web3-utils'
 
-export function useNftRedPacketContract() {
-    const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants()
-    const contract = useContract<NftRedPacket>(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[])
+export function useNftRedPacketContract(chainId?: ChainId) {
+    const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants(chainId)
+    const contract = useContract<NftRedPacket>(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[], chainId)
     return contract
 }
diff --git a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx b/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx
@@ -10,19 +10,7 @@ import { useWalletRiskWarningDialog } from '../../plugins/Wallet/hooks/useWallet
 
 const useStyles = makeStyles()((theme) => ({
     button: {
-        backgroundColor: theme.palette.maskColor.dark,
-        color: 'white',
-        fontSize: 14,
-        fontWeight: 700,
-        width: '100%',
-        '&:hover': {
-            backgroundColor: theme.palette.maskColor.dark,
-        },
-        margin: 0,
-    },
-    grid: {
-        justifyContent: 'center',
-        padding: 8,
+        marginTop: theme.spacing(1.5),
     },
 }))