diff --git a/app/src/components/ChainSelect.tsx b/app/src/components/ChainSelect.tsx index 2593e385..0ce2392e 100644 --- a/app/src/components/ChainSelect.tsx +++ b/app/src/components/ChainSelect.tsx @@ -126,7 +126,7 @@ const ChainSelect = forwardRef( )} - {trailing &&
{trailing}
} + {trailing &&
{trailing}
} diff --git a/app/src/components/WalletButton.tsx b/app/src/components/WalletButton.tsx index 06f8c65d..de698898 100644 --- a/app/src/components/WalletButton.tsx +++ b/app/src/components/WalletButton.tsx @@ -5,6 +5,8 @@ import { Network } from '@/models/chain' import { motion } from 'framer-motion' import React from 'react' import Button from './Button' +import { WalletNotAccessible } from './WalletNotAccessible' +import { cn } from '@/utils/cn' interface WalletButtonProps { /** The network to connect to. */ @@ -16,7 +18,7 @@ interface WalletButtonProps { /** * Wallet button component that is intended to support connecting to various different networks. */ -const WalletButton: React.FC = ({ network, className }) => { +const WalletButton = ({ network, className }: WalletButtonProps) => { const { disconnect: disconnectEvm, isConnected: evmIsConnected, @@ -65,9 +67,16 @@ const WalletButton: React.FC = ({ network, className }) => { variant={isConnected ? 'outline' : 'primary'} disabled={disabled} size="sm" - className={`${isConnected ? '' : 'w-[4.875rem]'} text-sm`} + className={cn( + 'text-sm', + isConnected ? '' : 'w-[4.875rem]', + network === Network.Polkadot && 'hidden lg:block', + )} onClick={buttonFunction} /> + {network === Network.Polkadot && ( + + )} ) } diff --git a/app/src/components/WalletNotAccessible.tsx b/app/src/components/WalletNotAccessible.tsx new file mode 100644 index 00000000..5a0a3bf2 --- /dev/null +++ b/app/src/components/WalletNotAccessible.tsx @@ -0,0 +1,81 @@ +import { cn } from '@/utils/cn' + +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 +}) => { + return ( + + +
+ {isConnected ? 'Disconnect' : 'Connect'} +
+ {/*
+ ) +}