From 02583398759564e5fbadb7c0ae7cc2ccbf4753dc Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Sat, 29 Jan 2022 15:40:30 +0800
Subject: [PATCH 1/2] fix(solana): hide phantom from provider render in
 dashboard

---
 .../PluginProviderRender.tsx                  | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
index 37fe59d33bbb..2764cebbc1d4 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
@@ -1,11 +1,12 @@
 import { first } from 'lodash-unified'
 import { SelectedIcon } from '@masknet/icons'
 import { ImageIcon } from '@masknet/shared'
-import type { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
+import { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
 import { makeStyles } from '@masknet/theme'
 import { Box, ImageList, ImageListItem, List, ListItem, Typography } from '@mui/material'
 import { ProviderIcon } from './ProviderIcon'
 import { ShadowRootTooltip, useI18N } from '../../../../utils'
+import { isDashboardPage } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -96,6 +97,10 @@ export function PluginProviderRender({
     const { classes } = useStyles()
     const { t } = useI18N()
 
+    const isSolana = undeterminedPluginID === NetworkPluginID.PLUGIN_SOLANA
+    const isDashboard = isDashboardPage()
+    const showProviders = !isSolana || !isDashboard
+
     return (
         <>
             <Box className={classes.root}>
@@ -132,34 +137,36 @@ export function PluginProviderRender({
                             ))}
                     </List>
                 </section>
-                <section className={classes.section}>
-                    <Typography className={classes.title} variant="h2" component="h2">
-                        {t('plugin_wallet_guiding_step_2')}
-                    </Typography>
-                    <ImageList className={classes.grid} gap={8} cols={3} rowHeight={130}>
-                        {providers
-                            .filter((x) => x.providerAdaptorPluginID === undeterminedPluginID)
-                            .map((provider) =>
-                                ProviderIconClickBait ? (
-                                    <ProviderIconClickBait
-                                        key={provider.ID}
-                                        network={
-                                            networks.find((x) => x.ID === undeterminedNetworkID) ?? first(networks)!
-                                        }
-                                        provider={provider}
-                                        onSubmit={onSubmit}>
+                {showProviders ? (
+                    <section className={classes.section}>
+                        <Typography className={classes.title} variant="h2" component="h2">
+                            {t('plugin_wallet_guiding_step_2')}
+                        </Typography>
+                        <ImageList className={classes.grid} gap={8} cols={3} rowHeight={130}>
+                            {providers
+                                .filter((x) => x.providerAdaptorPluginID === undeterminedPluginID)
+                                .map((provider) =>
+                                    ProviderIconClickBait ? (
+                                        <ProviderIconClickBait
+                                            key={provider.ID}
+                                            network={
+                                                networks.find((x) => x.ID === undeterminedNetworkID) ?? first(networks)!
+                                            }
+                                            provider={provider}
+                                            onSubmit={onSubmit}>
+                                            <ImageListItem key={provider.ID}>
+                                                <ProviderIcon icon={provider.icon} name={provider.name} />
+                                            </ImageListItem>
+                                        </ProviderIconClickBait>
+                                    ) : (
                                         <ImageListItem key={provider.ID}>
                                             <ProviderIcon icon={provider.icon} name={provider.name} />
                                         </ImageListItem>
-                                    </ProviderIconClickBait>
-                                ) : (
-                                    <ImageListItem key={provider.ID}>
-                                        <ProviderIcon icon={provider.icon} name={provider.name} />
-                                    </ImageListItem>
-                                ),
-                            )}
-                    </ImageList>
-                </section>
+                                    ),
+                                )}
+                        </ImageList>
+                    </section>
+                ) : null}
             </Box>
         </>
     )

From 44a820e3a580a5a484c7c8632ed6c516bc79fad3 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Sat, 29 Jan 2022 18:15:06 +0800
Subject: [PATCH 2/2] fixup! fix(solana): hide phantom from provider render in
 dashboard

---
 .../PluginProviderRender.tsx                  | 63 +++++++++----------
 .../UI/components/ProviderIconClickBait.tsx   | 11 +++-
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
index 2764cebbc1d4..1241980cf79e 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
@@ -1,12 +1,11 @@
-import { first } from 'lodash-unified'
 import { SelectedIcon } from '@masknet/icons'
+import type { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
 import { ImageIcon } from '@masknet/shared'
-import { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
 import { makeStyles } from '@masknet/theme'
 import { Box, ImageList, ImageListItem, List, ListItem, Typography } from '@mui/material'
-import { ProviderIcon } from './ProviderIcon'
+import { first } from 'lodash-unified'
 import { ShadowRootTooltip, useI18N } from '../../../../utils'
-import { isDashboardPage } from '@masknet/shared-base'
+import { ProviderIcon } from './ProviderIcon'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -97,10 +96,6 @@ export function PluginProviderRender({
     const { classes } = useStyles()
     const { t } = useI18N()
 
-    const isSolana = undeterminedPluginID === NetworkPluginID.PLUGIN_SOLANA
-    const isDashboard = isDashboardPage()
-    const showProviders = !isSolana || !isDashboard
-
     return (
         <>
             <Box className={classes.root}>
@@ -137,36 +132,34 @@ export function PluginProviderRender({
                             ))}
                     </List>
                 </section>
-                {showProviders ? (
-                    <section className={classes.section}>
-                        <Typography className={classes.title} variant="h2" component="h2">
-                            {t('plugin_wallet_guiding_step_2')}
-                        </Typography>
-                        <ImageList className={classes.grid} gap={8} cols={3} rowHeight={130}>
-                            {providers
-                                .filter((x) => x.providerAdaptorPluginID === undeterminedPluginID)
-                                .map((provider) =>
-                                    ProviderIconClickBait ? (
-                                        <ProviderIconClickBait
-                                            key={provider.ID}
-                                            network={
-                                                networks.find((x) => x.ID === undeterminedNetworkID) ?? first(networks)!
-                                            }
-                                            provider={provider}
-                                            onSubmit={onSubmit}>
-                                            <ImageListItem key={provider.ID}>
-                                                <ProviderIcon icon={provider.icon} name={provider.name} />
-                                            </ImageListItem>
-                                        </ProviderIconClickBait>
-                                    ) : (
+                <section className={classes.section}>
+                    <Typography className={classes.title} variant="h2" component="h2">
+                        {t('plugin_wallet_guiding_step_2')}
+                    </Typography>
+                    <ImageList className={classes.grid} gap={8} cols={3} rowHeight={130}>
+                        {providers
+                            .filter((x) => x.providerAdaptorPluginID === undeterminedPluginID)
+                            .map((provider) =>
+                                ProviderIconClickBait ? (
+                                    <ProviderIconClickBait
+                                        key={provider.ID}
+                                        network={
+                                            networks.find((x) => x.ID === undeterminedNetworkID) ?? first(networks)!
+                                        }
+                                        provider={provider}
+                                        onSubmit={onSubmit}>
                                         <ImageListItem key={provider.ID}>
                                             <ProviderIcon icon={provider.icon} name={provider.name} />
                                         </ImageListItem>
-                                    ),
-                                )}
-                        </ImageList>
-                    </section>
-                ) : null}
+                                    </ProviderIconClickBait>
+                                ) : (
+                                    <ImageListItem key={provider.ID}>
+                                        <ProviderIcon icon={provider.icon} name={provider.name} />
+                                    </ImageListItem>
+                                ),
+                            )}
+                    </ImageList>
+                </section>
             </Box>
         </>
     )
diff --git a/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx b/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx
index f3a99a4b94fe..0032cf33354c 100644
--- a/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx
+++ b/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx
@@ -1,5 +1,7 @@
 import { bridgedSolanaProvider } from '@masknet/injected-script'
 import type { Web3Plugin } from '@masknet/plugin-infra'
+import { isDashboardPage } from '@masknet/shared-base'
+import { ProviderType } from '@masknet/web3-shared-solana'
 import { cloneElement, isValidElement, useCallback } from 'react'
 import { getStorage } from '../../storage'
 import { hexToBase58 } from '../../utils'
@@ -23,12 +25,19 @@ export function ProviderIconClickBait({
         }
     }, [provider, onClick, onSubmit])
 
+    const isDashboard = isDashboardPage()
+    const disabled = isDashboard && provider.type === ProviderType.Phantom
+    const disabledStyled = {
+        opacity: 0.5,
+    }
+
     return (
         <>
             {isValidElement<object>(children)
                 ? cloneElement(children, {
+                      style: disabled ? disabledStyled : undefined,
                       ...children.props,
-                      onClick: onLogIn,
+                      onClick: disabled ? undefined : onLogIn,
                   })
                 : children}
         </>