diff --git a/frontend/src/components/ConnectButton/ConnectButton.module.css b/frontend/src/components/ConnectButton/ConnectButton.module.css index 3efe045..f6ff10c 100644 --- a/frontend/src/components/ConnectButton/ConnectButton.module.css +++ b/frontend/src/components/ConnectButton/ConnectButton.module.css @@ -1,3 +1,8 @@ +.container { + position: relative; + z-index: 100; +} + .blockie { height: 1.5em; } diff --git a/frontend/src/components/ConnectButton/index.tsx b/frontend/src/components/ConnectButton/index.tsx index e6a73bc..df4f224 100644 --- a/frontend/src/components/ConnectButton/index.tsx +++ b/frontend/src/components/ConnectButton/index.tsx @@ -22,6 +22,7 @@ export const ConnectButton = () => { userSelect: "none", }, })} + className={classes.container} > {(() => { if (!connected) { diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css index b5dbb3f..ab5be5b 100644 --- a/frontend/src/components/Layout/Layout.module.css +++ b/frontend/src/components/Layout/Layout.module.css @@ -76,3 +76,33 @@ .nav a:hover { filter: brightness(1.2); } + +.accountButtons { + position: relative; +} + +.accountButtons:hover .viewAccountContainer { + display: block; +} + +.viewAccountContainer { + display: none; + position: absolute; + bottom: -120%; + right: 0; + z-index: 90; + padding-top: 30%; +} + +button.viewAccount { + background: rgb(248 212 226); + border-radius: 10px; + padding: 6px 12px; + border: 2px solid var(--button-bg); + box-shadow: 2px 2px 10px 0px rgba(150, 203, 0, 0.44); +} + +button.viewAccount:hover { + background-color: var(--button-bg); + filter: brightness(1); +} diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx index 1b672f2..8ae8d42 100644 --- a/frontend/src/components/Layout/index.tsx +++ b/frontend/src/components/Layout/index.tsx @@ -1,18 +1,19 @@ import { ReactNode } from "react" import classes from "./Layout.module.css" -import { shortenAddress } from "../../utils/shortenAddress" import { Link } from "react-router-dom" import ChainSelect from "../ChainSelect" import ConnectButton from "../ConnectButton" import Search from "../Search" +import { useAccount } from "wagmi" +import Button from "../Button" interface Props { - mechAddress?: string children: ReactNode } -const Layout: React.FC = ({ children, mechAddress }) => { +const Layout: React.FC = ({ children }) => { + const { address } = useAccount() return (
cockpit @@ -26,7 +27,22 @@ const Layout: React.FC = ({ children, mechAddress }) => {
- +
+ + {address && ( +
+ + + +
+ )} +
diff --git a/frontend/src/components/NFTGrid/NFTGrid.module.css b/frontend/src/components/NFTGrid/NFTGrid.module.css index f12c8a4..ac292fe 100644 --- a/frontend/src/components/NFTGrid/NFTGrid.module.css +++ b/frontend/src/components/NFTGrid/NFTGrid.module.css @@ -7,9 +7,6 @@ width: 100%; } -.grid li { -} - .container { display: flex; flex-direction: column; diff --git a/frontend/src/components/NFTGrid/index.tsx b/frontend/src/components/NFTGrid/index.tsx index 08c3868..626b9c6 100644 --- a/frontend/src/components/NFTGrid/index.tsx +++ b/frontend/src/components/NFTGrid/index.tsx @@ -2,7 +2,6 @@ import NFTGridItem from "../NFTGridItem" import Spinner from "../Spinner" import classes from "./NFTGrid.module.css" -import clsx from "clsx" import { useChainId } from "wagmi" import { useDeployedMechs } from "../../hooks/useDeployMech" import { calculateMechAddress } from "../../utils/calculateMechAddress" diff --git a/frontend/src/components/NFTItem/NFTItem.module.css b/frontend/src/components/NFTItem/NFTItem.module.css index 7287245..2ceef78 100644 --- a/frontend/src/components/NFTItem/NFTItem.module.css +++ b/frontend/src/components/NFTItem/NFTItem.module.css @@ -72,10 +72,6 @@ justify-content: center; align-items: center; } - -.name { -} - .info { width: 45%; display: flex; diff --git a/frontend/src/components/NFTItem/index.tsx b/frontend/src/components/NFTItem/index.tsx index 45b8c41..28aa0d0 100644 --- a/frontend/src/components/NFTItem/index.tsx +++ b/frontend/src/components/NFTItem/index.tsx @@ -119,7 +119,7 @@ const NFTItem: React.FC = ({ nft, chainId }) => {
    {mechBalances.map((balance, index) => (
  • -
    {balance.name}
    +
    {balance.name}

    {formatUnits(BigInt(balance.balance), balance.decimals || 0)} diff --git a/frontend/src/routes/Mech/index.tsx b/frontend/src/routes/Mech/index.tsx index 390d344..ca40b3a 100644 --- a/frontend/src/routes/Mech/index.tsx +++ b/frontend/src/routes/Mech/index.tsx @@ -58,7 +58,7 @@ const Mech: React.FC = () => { const handleRequest = useHandleRequest(mechAddress) return ( - +

    {isLoading && } {!error && !isLoading && nft && mechAddress && (