From e7e95d82cccf001df10512743b501a2c5369b6ce Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 18 May 2022 22:28:18 +0800 Subject: [PATCH 1/3] fix: css style --- .../InjectedComponents/SearchResultBox.tsx | 2 +- .../plugins/FindTruman/SNSAdaptor/FindTruman.tsx | 13 ++++++++++++- packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx | 9 +++------ .../MaskBox/SNSAdaptor/components/PreviewCard.tsx | 15 ++++++++++++++- .../SNSAdaptor/RedPacket/OperationFooter.tsx | 2 +- .../RedPacket/SNSAdaptor/RedPacket/useStyles.ts | 10 ++++++++++ .../plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx | 15 ++++++++++++--- .../web3/UI/EthereumWalletConnectedBoundary.tsx | 14 +------------- 8 files changed, 54 insertions(+), 26 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx index 5d09af03a749..c917be2bf891 100644 --- 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 index fd870fe64ebf..d8f268c5ef00 100644 --- 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) { } + classes={{ button: classes.button }} /> diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx index fb5df44e3024..01c864243c8e 100644 --- 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()((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 } {t('loading_failed')} - + {t('try_again')} diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx index bded23df3d24..2c362a380d13 100644 --- 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) { - + } classes={{ - connectWallet: classes.connectWallet, + button: classes.walletButton, }}> {canRefund ? null : ( diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts index b05f09cec7e1..33db3b03a390 100644 --- 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 index 7ed8a172141f..bbb2a5f7fae8 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx @@ -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', diff --git a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx b/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx index 1f5a08c3e18d..9a73cc3071fd 100644 --- 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), }, })) From 21a2a0268d9d94c9a81f3364c55b165497229f8d Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 18 May 2022 23:56:28 +0800 Subject: [PATCH 2/3] fix: css style --- .../RedPacket/SNSAdaptor/RedPacketNft.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx index bbb2a5f7fae8..cdd3225a29bc 100644 --- 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) => ({ @@ -111,6 +111,7 @@ const useStyles = makeStyles()((theme) => ({ }, buttonWrapper: { marginTop: 0, + display: 'flex', }, loadingBox: { borderRadius: theme.spacing(1), @@ -436,14 +437,20 @@ export function RedPacketNft({ payload }: RedPacketNftProps) { ) : availability.isClaimedAll || availability.isCompleted ? null : ( - - - - + {availability.isClaimed ? null : ( - + } @@ -463,9 +470,9 @@ export function RedPacketNft({ payload }: RedPacketNftProps) { - + )} - + )} ) From 7d19972e04b4e30e951270b8fb9a494d2aef9299 Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 19 May 2022 00:40:15 +0800 Subject: [PATCH 3/3] fix: redpacket nft --- .../src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx | 2 +- .../SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts | 5 +++-- .../RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts | 8 ++++---- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx index cdd3225a29bc..112fb49b69df 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx @@ -265,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, diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts index 1537455aa3d1..7e09ff373c0d 100644 --- 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 index f61aad97f449..14dabadf3fe6 100644 --- 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(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[]) +export function useNftRedPacketContract(chainId?: ChainId) { + const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants(chainId) + const contract = useContract(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[], chainId) return contract }