chore: fix #187

examples/demo/package.json

@@ -52,12 +52,13 @@
     "@tanstack/react-query": "^5.45.0",
     "clsx": "^2.1.0",
     "dns-over-http-resolver": "^3.0.2",
-    "filsnap-adapter": "*",
-    "filsnap-adapter-react": "*",
+    "filsnap-adapter": "workspace:*",
+    "filsnap-adapter-react": "workspace:*",
     "iso-base": "^4.0.0",
     "iso-filecoin": "^4.0.3",
     "preact": "^10.19.6",
     "react-hook-form": "^7.51.0",
+    "react-toastify": "^10.0.5",
     "viem": "^2.13.8",
     "wagmi": "^2.10.0",
     "water.css": "^2.1.1"

examples/demo/src/app.jsx

@@ -1,6 +1,8 @@
 import Resolver from 'dns-over-http-resolver'
 import { useFilsnap } from 'filsnap-adapter-react'
 import { useEffect, useState } from 'preact/hooks'
+import { ToastContainer } from 'react-toastify'
+
 import ConnectFEVM from './components/connect-fevm.jsx'
 import Connect from './components/connect.jsx'
 import Forward from './components/forward.tsx'
@@ -138,6 +140,7 @@ export function App() {
           </ul>
         </div>
       </div>
+      <ToastContainer theme="dark" position="bottom-right" />
     </main>
   )
 }

examples/demo/src/components/connect.jsx

@@ -1,15 +1,20 @@
 import { clsx } from 'clsx'
 import { useFilsnap } from 'filsnap-adapter-react'
 import { Token } from 'iso-filecoin/token'
+import { toast } from 'react-toastify'
 import ExplorerLink from './explorer-link.jsx'
 
 /**
  * Connect to the network.
  */
 export default function Connect() {
-  const { isLoading, hasFlask, isConnected, connect, account, error } =
+  const { isLoading, hasSnaps, isConnected, connect, account, error } =
     useFilsnap()
 
+  if (error) {
+    toast.error(error.message)
+  }
+
   let out = null
 
   if (!isConnected) {
@@ -24,16 +29,16 @@ export default function Connect() {
     )
   }
 
-  if (!hasFlask) {
+  if (!hasSnaps) {
     out = (
       <div data-testid="install-mm-flask">
-        Install Metamask{' '}
+        Install{' '}
         <a
-          href="https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn"
+          href="https://chromewebstore.google.com/detail/nkbihfbeogaeaoehlefnkodbefgpgknn"
           target="_blank"
           rel="noreferrer"
         >
-          Flask
+          Metamask
         </a>
       </div>
     )
@@ -62,16 +67,6 @@ export default function Connect() {
     out = <div>Loading...</div>
   }
 
-  if (error) {
-    out = (
-      <>
-        <h3>
-          Error <br />
-        </h3>
-        <p>{error.message}</p>
-      </>
-    )
-  }
   return (
     <div class={clsx('Cell75', 'Box', !isConnected && 'u-AlignCenter')}>
       {out}

examples/demo/src/styles/index.css

@@ -1,6 +1,12 @@
 @import '@acab/reset.css';
 @import 'water.css';
 
+@import 'react-toastify/dist/ReactToastify.css';
+
+:root {
+  --toastify-color-dark: #161f27;
+}
+
 @media (prefers-color-scheme: dark) {
   ::selection {
     /* chrome for some reason doesnt inherit the custom variable here */