-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: show message to allow an account if none are enabled (#278)
- Loading branch information
1 parent
15f919c
commit e6ae3f1
Showing
1 changed file
with
58 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,70 @@ | ||
| import { useInstalledWallets, useUninstalledWallets, useWallet } from "useink"; | ||
| import { Button } from "./Button"; | ||
| import { Modal } from "./Modal"; | ||
| import { useEffect } from "react"; | ||
| import { useInstalledWallets, useUninstalledWallets, useWallet } from 'useink'; | ||
| import { Button } from './Button'; | ||
| import { Modal } from './Modal'; | ||
| import { useEffect } from 'react'; | ||
|
|
||
| type Props = { | ||
| show: boolean; | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| export const ConnectWallet: React.FC<Props> = ({ show, onClose }) => { | ||
| const { account, connect } = useWallet(); | ||
| const installed = useInstalledWallets(); | ||
| const uninstalled = useUninstalledWallets(); | ||
| const { account, connect, accounts } = useWallet(); | ||
| const installed = useInstalledWallets(); | ||
| const uninstalled = useUninstalledWallets(); | ||
|
|
||
| useEffect(() => { account && onClose() }, [account, onClose]) | ||
| useEffect(() => { | ||
| account && onClose(); | ||
| }, [account, onClose]); | ||
|
|
||
| return ( | ||
| <Modal open={show} className="p-6 max-w-lg"> | ||
| <h2 className="text-2xl font-bold mb-8">Connect Wallet</h2> | ||
| const isConnectedWithZeroEnabledAccounts = !account && accounts?.length === 0; | ||
|
|
||
| {!account && installed.length > 0 && ( | ||
| return ( | ||
| <Modal open={show} className="p-6 max-w-lg"> | ||
| <h2 className="text-2xl font-bold mb-8">Connect Wallet</h2> | ||
|
|
||
| {isConnectedWithZeroEnabledAccounts ? ( | ||
| <p>Please open your wallet settings and enable at least one account for this URL.</p> | ||
| ) : ( | ||
| !account && | ||
| installed.length > 0 && ( | ||
| <ul> | ||
| {installed.map((w => ( | ||
| <li key={w.title} className="mt-3"> | ||
| <Button className="flex items-center gap-2 w-full" onClick={() => connect(w.extensionName)}> | ||
| <img className="w-10 mr-2" src={w.logo.src} alt={w.logo.alt} /> | ||
| Connect to {w.extensionName} | ||
| </Button> | ||
| </li> | ||
| )))} | ||
| {installed.map((w) => ( | ||
| <li key={w.title} className="mt-3"> | ||
| <Button className="flex items-center gap-2 w-full" onClick={() => connect(w.extensionName)}> | ||
| <img className="w-10 mr-2" src={w.logo.src} alt={w.logo.alt} /> | ||
| Connect to {w.extensionName} | ||
| </Button> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| )} | ||
|
|
||
| {!account && uninstalled.length && installed.length === 0 && ( | ||
| <> | ||
| <p className="font-semibold my-6 text-center"> | ||
| Please install one of these supported wallets. | ||
| </p> | ||
|
|
||
| <ul> | ||
| {uninstalled.map((w => ( | ||
| <li key={w.title} className="mt-3"> | ||
|
|
||
| <Button className="flex items-center gap-2 w-full" | ||
| onClick={() => window.open(w.installUrl, '_blank')} | ||
| rel="noopener noreferrer" | ||
| > | ||
| <img className="w-10 mr-2" src={w.logo.src} alt={w.logo.alt} /> | ||
| Install {w.extensionName} | ||
| </Button> | ||
| </li> | ||
| )))} | ||
| </ul> | ||
| </> | ||
| )} | ||
|
|
||
| <Button className="mt-6" onClick={onClose}>Close</Button> | ||
| </Modal> | ||
| ) | ||
| } | ||
| ) | ||
| )} | ||
|
|
||
| {!account && uninstalled.length && installed.length === 0 && ( | ||
| <> | ||
| <p className="font-semibold my-6 text-center">Please install one of these supported wallets.</p> | ||
|
|
||
| <ul> | ||
| {uninstalled.map((w) => ( | ||
| <li key={w.title} className="mt-3"> | ||
| <Button | ||
| className="flex items-center gap-2 w-full" | ||
| onClick={() => window.open(w.installUrl, '_blank')} | ||
| rel="noopener noreferrer" | ||
| > | ||
| <img className="w-10 mr-2" src={w.logo.src} alt={w.logo.alt} /> | ||
| Install {w.extensionName} | ||
| </Button> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </> | ||
| )} | ||
|
|
||
| <Button className="mt-6" onClick={onClose}> | ||
| Close | ||
| </Button> | ||
| </Modal> | ||
| ); | ||
| }; |