-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
implement a Wallet Not Accessible note
- Loading branch information
1 parent
cb4e88d
commit af110ee
Showing
3 changed files
with
48 additions
and
82 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
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
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,81 +1,53 @@ | ||
| import { cn } from '@/utils/cn' | ||
| import Image from 'next/image' | ||
| import { useState } from 'react' | ||
|
|
||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from '@/components/ui/dialog' | ||
| // import Button from './Button' | ||
|
|
||
| export const WalletNotAccessible = ({ | ||
| disabled, | ||
| isConnected, | ||
| onClick, | ||
| }: { | ||
| disabled: boolean | ||
| isConnected: boolean | ||
| onClick?: () => void | ||
| }) => { | ||
| export const WalletNotAccessible = () => { | ||
| const [displayWalletNote, setDisplayWalletNote] = useState<boolean>(true) | ||
| return ( | ||
| <Dialog> | ||
| <DialogTrigger className="w-full lg:hidden" asChild> | ||
| <div | ||
| onClick={onClick} | ||
| className={cn( | ||
| 'opacity-1 z-0 flex h-[1.625rem] items-center justify-center gap-2 rounded-lg border border-black bg-turtle-primary px-2 py-0 text-sm text-black', | ||
| disabled && 'opacity-30', | ||
| )} | ||
| > | ||
| {isConnected ? 'Disconnect' : 'Connect'} | ||
| </div> | ||
| {/* <Button | ||
| label={isConnected ? 'Disconnect' : 'Connect'} | ||
| variant={isConnected ? 'outline' : 'primary'} | ||
| disabled={disabled} | ||
| size="sm" | ||
| className={cn('text-sm')} | ||
| onClick={onClick} | ||
| /> */} | ||
| </DialogTrigger> | ||
| <DialogContent | ||
| className="m-auto max-h-[85vh] max-w-[85vw] overflow-scroll rounded-4xl sm:max-w-[30.5rem]" | ||
| // hideCloseButton={true} | ||
| > | ||
| <DialogHeader | ||
| className={cn( | ||
| 'flex flex-col items-center justify-center space-y-6 rounded-t-[32px] border border-turtle-secondary bg-turtle-secondary-light py-5 sm:py-10', | ||
| )} | ||
| > | ||
| {/* Not displayed on the modal */} | ||
| <DialogTitle className="sr-only">Connect Wallet not available on mobile</DialogTitle> | ||
| {/* Not displayed on the modal */} | ||
| <DialogDescription className="sr-only"> | ||
| Use known Polkadot App Wallets to enjoy Turtle frictionless cross-chain transfers. | ||
| </DialogDescription> | ||
| <div className={cn('flex w-2/3 items-center justify-center space-x-4')}> | ||
| Polkadot wallet connection not available. | ||
| </div> | ||
| </DialogHeader> | ||
| displayWalletNote && ( | ||
| <div className={cn('-mt-8 rounded-[20px] bg-turtle-secondary-light p-3 lg:hidden')}> | ||
| <div className="justify-items flex flex-row items-center"> | ||
| <Image src={'/wallet.svg'} alt={'Wallet illustration'} width={64} height={64} /> | ||
| <div className="justify-left ml-3 flex flex-col"> | ||
| <div className="text-left text-small font-bold text-turtle-foreground"> | ||
| Connection information | ||
| </div> | ||
| <div className="flex flex-col items-start pb-2 text-small text-turtle-foreground"> | ||
| <p> | ||
| Your wallet might not be fully supported on mobile yet. Connect on desktop or use a | ||
| wallet partner like{' '} | ||
| <a | ||
| href="https://novawallet.io/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="cursor-pointer font-medium" | ||
| > | ||
| Nova Wallet | ||
| </a>{' '} | ||
| or{' '} | ||
| <a | ||
| href="https://www.subwallet.app/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="cursor-pointer font-medium" | ||
| > | ||
| SubWallet | ||
| </a> | ||
| </p> | ||
|
|
||
| {/* Modal content */} | ||
| <div | ||
| className={cn( | ||
| 'flex w-full flex-1 flex-col items-center gap-4 rounded-b-4xl border border-x-turtle-secondary border-b-turtle-secondary bg-white p-4 sm:p-10', | ||
| )} | ||
| > | ||
| <div> | ||
| Enjoy a seamless experience from desktop or in the app section of our know Wallet | ||
| partners. Turtle recommand using either Sub Wallet or Nova Wallet. | ||
| </div> | ||
| <div> | ||
| <p>Get your Wallet now and start enjoying Turtle frictionless cross-chain transfers:</p> | ||
| <div></div> | ||
| <button | ||
| className={cn(' text-turtle-foreground underline')} | ||
| onClick={() => { | ||
| setDisplayWalletNote(!displayWalletNote) | ||
| }} | ||
| > | ||
| Dismiss | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| </div> | ||
| ) | ||
| ) | ||
| } |