diff --git a/src/components/WalletButton.module.css b/src/components/WalletButton.module.css new file mode 100644 index 0000000..842bd2a --- /dev/null +++ b/src/components/WalletButton.module.css @@ -0,0 +1,23 @@ +/* Override the global a[target]::after external +link icon that appeared on the warning sign */ +.learnMore[target]::after { + content: none; + display: none; +} +.learnMore { + color: var(--sds-clr-lilac-09, #606); +} + +.warningIcon { + height: 20px; + width: 20px; + color: var(--color-yellow-60, #f0ad4e); + position: absolute; + bottom: -8px; + right: -8px; + cursor: pointer; +} + +.profileWrap { + position: relative; +} diff --git a/src/components/WalletButton.tsx b/src/components/WalletButton.tsx index fa5c8a6..148d181 100644 --- a/src/components/WalletButton.tsx +++ b/src/components/WalletButton.tsx @@ -1,21 +1,24 @@ -import { Button, Icon, Text, Modal, Profile } from "@stellar/design-system" -import { useState } from "react" +import { + Button, + Text, + Modal, + Profile, + Icon, + Tooltip, +} from "@stellar/design-system" +import React, { useState } from "react" import { useWallet } from "../hooks/useWallet" import { connectWallet, disconnectWallet } from "../util/wallet" +import cssStyles from "./WalletButton.module.css" export const WalletButton = () => { const [showDisconnectModal, setShowDisconnectModal] = useState(false) - const { address, isPending, balances } = useWallet() - const buttonLabel = isPending ? "Loading..." : "Connect Wallet" + const { address, isPending, balances, walletWarnings } = useWallet() + const buttonLabel = isPending ? "Loading..." : "Connect" if (!address) { return ( - ) @@ -41,11 +44,31 @@ export const WalletButton = () => { onClose={() => setShowDisconnectModal(false)} parentId="modalContainer" > - - Connected as{" "} - {address}. Do you - want to disconnect? - + Disconnect wallet? + + + Connected as  + + {address} + + +