Skip to content

Commit

Permalink
fix: swap page wc modal (#11532)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nuanyang233
nuanyang233 committed Mar 29, 2024
1 parent e5579a5 commit c6d699f
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 62 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@
"eslint-plugin-i@2.29.1": "patches/eslint-plugin-i@2.29.1.patch",
"@mui/material@5.15.12": "patches/@mui__material@5.15.12.patch",
"@lifi/widget@2.10.1": "patches/@lifi__widget@2.10.1.patch",
"@mui/base@5.0.0-beta.38": "patches/@mui__base@5.0.0-beta.38.patch"
"@mui/base@5.0.0-beta.38": "patches/@mui__base@5.0.0-beta.38.patch",
"@lifi/wallet-management@2.6.0": "patches/@lifi__wallet-management@2.6.0.patch"
}
}
}
4 changes: 3 additions & 1 deletion packages/mask/swap/Swap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client
import { queryClient } from '@masknet/shared-base-ui'
import { queryPersistOptions } from '../shared-ui/index.js'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { PageUIProvider } from '@masknet/shared'
import { Modals, PageUIProvider } from '@masknet/shared'
import { noop } from 'lodash-es'

const useTheme = () => MaskLightTheme
export default function Swap() {
Expand All @@ -21,6 +22,7 @@ export default function Swap() {
<EVMWeb3ContextProvider>
<ThemeProvider theme={MaskLightTheme}>
<SwapPage />
<Modals createWallet={noop} />
</ThemeProvider>
</EVMWeb3ContextProvider>
</PopupSnackbarProvider>,
Expand Down
7 changes: 5 additions & 2 deletions packages/mask/swap/pages/Swap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,10 @@ export default function SwapPage() {
}
: undefined,
connect: async () => {
if (providerType === ProviderType.None) await SelectProviderModal.openAndWaitForClose()
if (providerType === ProviderType.None)
await SelectProviderModal.openAndWaitForClose({
requiredSupportPluginID: NetworkPluginID.PLUGIN_EVM,
})
return getSigner()
},
disconnect: async () => {},
Expand All @@ -175,7 +178,7 @@ export default function SwapPage() {
</div>
<header className={classes.header}>
<Icons.Mask width={140} height={40} variant={'light'} />
{account ?
{account || !!anchorEl ?
<Box className={classes.connect} onClick={(event) => setAnchorEl(event.currentTarget)}>
<WalletIcon
size={30}
Expand Down
12 changes: 6 additions & 6 deletions packages/shared-base-ui/src/hooks/useSingletonModal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import type { SingletonModalRefCreator } from '@masknet/shared-base'
export function useSingletonModal<OpenProps, CloseProps>(
ref: React.ForwardedRef<SingletonModalRefCreator<OpenProps, CloseProps>>,
options?: {
onOpen?: (props: OpenProps) => void
onClose?: (props: CloseProps) => void
onAbort?: (error: Error) => void
onOpen?: (props: OpenProps, dispatch: ReturnType<SingletonModalRefCreator<OpenProps, CloseProps>>) => void
onClose?: (props: CloseProps, dispatch: ReturnType<SingletonModalRefCreator<OpenProps, CloseProps>>) => void
onAbort?: (error: Error, dispatch: ReturnType<SingletonModalRefCreator<OpenProps, CloseProps>>) => void
},
) {
type T = SingletonModalRefCreator<OpenProps, CloseProps>
Expand All @@ -24,17 +24,17 @@ export function useSingletonModal<OpenProps, CloseProps>(
return openRef.current
},
open(props) {
optionsRef.current?.onOpen?.(props)
optionsRef.current?.onOpen?.(props, this)
dispatchOpen(props)
setOpen(true)
},
close(props) {
optionsRef.current?.onClose?.(props)
optionsRef.current?.onClose?.(props, this)
dispatchClose(props)
setOpen(false)
},
abort(error) {
optionsRef.current?.onAbort?.(error)
optionsRef.current?.onAbort?.(error, this)
dispatchAbort(error)
setOpen(false)
},
Expand Down
5 changes: 2 additions & 3 deletions packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,15 +117,14 @@ export const ConnectWalletModal = forwardRef<
}, [])

const [open, dispatch] = useSingletonModal(ref, {
async onOpen(props) {
async onOpen(props, dispatch) {
connectionRef.current = {
pluginID: props.pluginID ?? NetworkPluginID.PLUGIN_EVM,
networkType: props.networkType,
providerType: props.providerType,
}

const connected = await onConnect()
if (connected) dispatch?.close(true)
if (connected) dispatch.close(true)
},
})

Expand Down
76 changes: 40 additions & 36 deletions packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,42 +270,46 @@ export const PluginProviderRender = memo(function PluginProviderRender({
))}
</List>
</section>
<Typography mt={2} color={theme.palette.maskColor.second} fontSize={14}>
{t.not_installed_or_conflict()}
</Typography>
<section className={classes.section}>
<List className={classes.wallets}>
{unavailableProviders.map((provider) => (
<ShadowRootTooltip
title={getDisabled(provider) ? '' : getTips(provider.type)}
arrow
placement="top"
disableInteractive
key={provider.ID}>
<ListItem
className={cx(
classes.walletItem,
getDisabled(provider) ? classes.disabledWalletItem : '',
)}
disabled={getDisabled(provider)}
onClick={() => {
if (provider.type === ProviderType.WalletConnect) {
handleClick(provider, ChainId.Mainnet)
} else {
handleClick(provider)
}
}}>
<ProviderItem
className={classes.providerIcon}
icon={provider.icon}
name={provider.name}
iconFilterColor={provider.iconFilterColor}
/>
</ListItem>
</ShadowRootTooltip>
))}
</List>
</section>
{unavailableProviders.length ?
<>
<Typography mt={2} color={theme.palette.maskColor.second} fontSize={14}>
{t.not_installed_or_conflict()}
</Typography>
<section className={classes.section}>
<List className={classes.wallets}>
{unavailableProviders.map((provider) => (
<ShadowRootTooltip
title={getDisabled(provider) ? '' : getTips(provider.type)}
arrow
placement="top"
disableInteractive
key={provider.ID}>
<ListItem
className={cx(
classes.walletItem,
getDisabled(provider) ? classes.disabledWalletItem : '',
)}
disabled={getDisabled(provider)}
onClick={() => {
if (provider.type === ProviderType.WalletConnect) {
handleClick(provider, ChainId.Mainnet)
} else {
handleClick(provider)
}
}}>
<ProviderItem
className={classes.providerIcon}
icon={provider.icon}
name={provider.name}
iconFilterColor={provider.iconFilterColor}
/>
</ListItem>
</ShadowRootTooltip>
))}
</List>
</section>
</>
: null}
</Box>
{usePortalShadowRoot((container) => (
<Dialog
Expand Down
18 changes: 9 additions & 9 deletions packages/web3-shared/evm/src/constants/descriptors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://coin98.com',
shortenLink: 'coin98.com',
Expand All @@ -495,7 +495,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://www.coinbase.com/wallet',
shortenLink: 'coinbase.com',
Expand All @@ -510,7 +510,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://tokenpocket.pro/',
shortenLink: 'tokenpocket.pro',
Expand Down Expand Up @@ -613,7 +613,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://web3.bitget.com/',
shortenLink: 'web3.bitget.com',
Expand All @@ -630,7 +630,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://onekey.so/',
shortenLink: 'onekey.so',
Expand All @@ -647,7 +647,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://rabby.io/',
shortenLink: 'rabby.io',
Expand All @@ -664,7 +664,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://rainbow.me/',
shortenLink: 'rainbow.me',
Expand All @@ -681,7 +681,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://trustwallet.com/',
shortenLink: 'trustwallet.com',
Expand All @@ -698,7 +698,7 @@ export const PROVIDER_DESCRIPTORS: ReadonlyArray<ProviderDescriptor<ChainId, Pro
enableRequirements: {
supportedChainIds: ChainIdList,
supportedEnhanceableSites: EnhanceableSiteList,
supportedExtensionSites: ExtensionSiteList,
supportedExtensionSites: [],
},
homeLink: 'https://zerion.io/',
shortenLink: 'zerion.io',
Expand Down
24 changes: 24 additions & 0 deletions patches/@lifi__wallet-management@2.6.0.patch
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
diff --git a/cjs/connectors/injectedConnector.js b/cjs/connectors/injectedConnector.js
index da8347dc2097d71a3145b0b2b0fc5f5112185020..42ef11541025660e09f001097b2d0e460a501c7e 100644
--- a/cjs/connectors/injectedConnector.js
+++ b/cjs/connectors/injectedConnector.js
@@ -19,6 +19,7 @@ class InjectedConnector extends events_1.EventEmitter {
throw new Error('window is not defined. This should not have happened.');
}
this.windowProvider = connectorWindowProperty;
+ if(typeof this.windowProvider?.on !== 'function') return
this.windowProvider?.on('connect', async ({ chainId }) => {
await this.calcAccountData();
});
diff --git a/connectors/injectedConnector.js b/connectors/injectedConnector.js
index 291db15c0816b98d5827b2e9aa998a1cdd2516c2..a3f8aea0e6dffa3ad08117517d72bc7e482fb3cd 100644
--- a/connectors/injectedConnector.js
+++ b/connectors/injectedConnector.js
@@ -16,6 +16,7 @@ export class InjectedConnector extends EventEmitter {
throw new Error('window is not defined. This should not have happened.');
}
this.windowProvider = connectorWindowProperty;
+ if(typeof this.windowProvider?.on !== 'function') return
this.windowProvider?.on('connect', async ({ chainId }) => {
await this.calcAccountData();
});
13 changes: 9 additions & 4 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit c6d699f

Please sign in to comment.