add hasFlask check

PolkaGate · Dec 4, 2023 · a7d189c · a7d189c
1 parent 5846532
commit a7d189c
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 39 deletions.
diff --git a/packages/dapp/package.json b/packages/dapp/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
+    "@metamask/detect-provider": "^2.0.0",
     "@metamask/providers": "latest",
     "@mui/icons-material": "latest",
     "@mui/lab": "latest",

diff --git a/packages/dapp/src/App.test.tsx b/packages/dapp/src/App.test.tsx
diff --git a/packages/dapp/src/App.tsx b/packages/dapp/src/App.tsx
@@ -13,6 +13,7 @@ import { getChain } from './util/getChain';
 import { installPolkaMask } from './util/installPolkaMask';
 import logo from './assets/logo.svg';
 import SignMessage from './SignMessage';
+import { hasFlask } from './util/hasFlask';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -59,6 +60,7 @@ export default function App() {
   const [isPolkaMaskInstalled, setIsSnapInstalled] = useState<boolean>();
   const [balances, setBalances] = useState<DeriveBalancesAll>();
   const [token, setToken] = useState<string>();
+  const [hasFlaskDetected, setHasFlask] = useState<boolean>();
 
   useEffect(() => {
     if (!api) {
@@ -104,16 +106,25 @@ export default function App() {
   }, [account]);
 
   const handleInstallClick = useCallback(() => {
+    if (hasFlaskDetected === false) {
+      const FLASK_URL = 'https://chromewebstore.google.com/detail/metamask-flask-developmen/ljfoeinjpaedjfecbmggjgodbgkmjkjk';
+
+      window.open(FLASK_URL, '_blank');
+
+      return;
+    }
+
     installPolkaMask().then((installedSnap) => {
       installedSnap && setIsSnapInstalled(installedSnap[DEFAULT_SNAP_ORIGIN]?.enabled)
     });
-  }, []);
+  }, [hasFlaskDetected]);
 
   useEffect(() => {
     handleInstallClick()
   }, [handleInstallClick]);
 
   useEffect(() => {
+    hasFlask().then(setHasFlask)
     // getSnaps().then((snaps) => {
     //   if (snaps?.length) {
     //     const isDefaultSnapInstalled = !!Object.keys(snaps).find((id) => POLKAMASK_SNAP_IDS.includes(id));
@@ -154,29 +165,35 @@ export default function App() {
             disabled={isPolkaMaskInstalled}
             sx={{ fontSize: '16px', width: 'fit-content' }}
           >
-            Install PolkaMask Snap
+            Install {hasFlaskDetected ? 'PolkaMask Snap' : 'Flask'}
           </Button>
         </Grid>
       </Grid>
       <Grid container
         sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 224 }}
       >
-        <Grid item sx={{ width: '20%' }}>
-          <Tabs
-            orientation="vertical"
-            variant="scrollable"
-            value={value}
-            onChange={handleChange}
-            aria-label="Vertical tabs example"
-            sx={{ borderRight: 1, borderColor: 'divider' }}
-          >
-            <Tab label="Transfer Fund" {...a11yProps(0)} />
-            <Tab label="Sign Message" {...a11yProps(1)} />
-            <Tab label="Other" {...a11yProps(2)} />
-          </Tabs>
-        </Grid>
+        {!isPolkaMaskInstalled
+          ? <Grid container justifyContent="center" p='auto' m='auto' >
+            <Typography variant="h5" sx={{ fontWeight: '500' }}>
+              {hasFlaskDetected ? 'PolkaMask Snap' : 'Flask'} is not installed. Please install it using the button above.
+            </Typography>
+          </Grid>
+          : <Grid item sx={{ width: '20%' }}>
+            <Tabs
+              orientation="vertical"
+              variant="scrollable"
+              value={value}
+              onChange={handleChange}
+              aria-label="Vertical tabs example"
+              sx={{ borderRight: 1, borderColor: 'divider' }}
+            >
+              <Tab label="Transfer Fund" {...a11yProps(0)} />
+              <Tab label="Sign Message" {...a11yProps(1)} />
+              <Tab label="Other" {...a11yProps(2)} />
+            </Tabs>
+          </Grid>
+        }
         <Grid item sx={{ width: '79%' }}>
-
           <TabPanel value={value} index={0}>
             <TransferFund
               api={api}
@@ -189,7 +206,7 @@ export default function App() {
             />
           </TabPanel>
           <TabPanel value={value} index={1}>
-          <SignMessage
+            <SignMessage
               api={api}
               account={account}
               isPolkaMaskInstalled={isPolkaMaskInstalled}

diff --git a/packages/dapp/src/SignMessage.tsx b/packages/dapp/src/SignMessage.tsx
@@ -75,7 +75,7 @@ function SignMessage({ api, account, balances, currentChainName, formatted, isPo
   return (
     <Grid container item justifyContent='center'>
       {isPolkaMaskInstalled
-        ? <>
+        && <>
           <Grid container justifyContent="center" py='5px'>
             <Typography variant="h5" sx={{ fontWeight: '500' }}>
               Sign a Message and Verify the Signature
@@ -112,11 +112,6 @@ function SignMessage({ api, account, balances, currentChainName, formatted, isPo
             </LoadingButton>
           </Grid>
         </>
-        : <Grid container justifyContent="center" p='auto' m='auto' >
-          <Typography variant="h5" sx={{ fontWeight: '500' }}>
-            PolkaMask snap is not installed. Please install it using the button above.
-          </Typography>
-        </Grid>
       }
       {error && (
         <Grid item container justifyContent='center' sx={{ textAlign: 'center', pt: '10px' }}>

diff --git a/packages/dapp/src/TransferFund.tsx b/packages/dapp/src/TransferFund.tsx
@@ -83,7 +83,7 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
   return (
     <Grid container item justifyContent='center'>
       {isPolkaMaskInstalled
-        ? <>
+        && <>
           <Grid container justifyContent="center" py='5px'>
             <Typography variant="h5" sx={{ fontWeight: '500' }}>
               A Simple Fund Transfer
@@ -182,11 +182,6 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
             </Grid>
           </Grid>
         </>
-        : <Grid container justifyContent="center" p='auto' m='auto' >
-          <Typography variant="h5" sx={{ fontWeight: '500' }}>
-            PolkaMask snap is not installed. Please install it using the button above.
-          </Typography>
-        </Grid>
       }
       {/* {state.error && (
         <Grid item container>

diff --git a/packages/dapp/src/logo.svg → packages/dapp/src/del-logo.svg b/packages/dapp/src/logo.svg → packages/dapp/src/del-logo.svg
diff --git a/packages/dapp/src/util/hasFlask.ts b/packages/dapp/src/util/hasFlask.ts
@@ -0,0 +1,25 @@
+import detectEthereumProvider from '@metamask/detect-provider';
+
+/**
+ *  to check if metamask Flask is installed of not
+ */
+export async function hasFlask() {
+  // This resolves to the value of window.ethereum or null
+  const provider = await detectEthereumProvider();
+
+  // web3_clientVersion returns the installed MetaMask version as a string
+  const isFlask = (
+    await (provider as any)?.request({ method: 'web3_clientVersion' })
+  )?.includes('flask');
+
+  if (provider && isFlask) {
+    console.log('MetaMask Flask successfully detected!');
+
+    // Now you can use Snaps!
+    return true;
+  } else {
+    console.error('Please install MetaMask Flask!');
+
+    return false;
+  }
+}