rujira.ui 0.1.0

package/src/components/header/Accounts.tsx

@@ -0,0 +1,1021 @@
+import clsx from "clsx";
+import { AnimatePresence, motion, useAnimate } from "motion/react";
+import { Dispatch, FC, SetStateAction, useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import {
+  Account,
+  AccountProvider,
+  Network,
+  networkLabel,
+  Provider,
+} from "rujira.js";
+import { useGlobalModalContext } from "../../context/GlobalModal";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
+import { i18n } from "../../i18n";
+import {
+  AngleDown,
+  CircleUser,
+  Deposit,
+  LinkConnect,
+  LinkDisconnect,
+  Plus,
+  Users,
+} from "../icons/Icons";
+import {
+  Ctrl,
+  Keplr,
+  KeplrSimple,
+  Leap,
+  LeapSimple,
+  MetaMask,
+  MetaMaskSimple,
+  Sonar,
+  SonarSimple,
+  StationSimple,
+  StationText,
+  Vultisig,
+  VultisigSimple,
+} from "../icons/Wallets";
+import { Fiat } from "../numbers/Fiat";
+import { ResolveLink } from "./ResolveLink";
+import { Button, Input, NetworkIcons } from "../..";
+
+interface Group {
+  primary: Account;
+  other: Account[];
+}
+
+let referral = localStorage.getItem("referral");
+
+export const Accounts: FC<{
+  provider: AccountProvider;
+  routingElement: any;
+}> = ({ provider, routingElement }) => {
+  const { accounts, disconnectAll, selected } = provider;
+  const [hoverBalance, setHoverBalance] = useState(false);
+  const [showBlur, setShowBlur] = useState(false);
+  const { hideModal, showModal } = useGlobalModalContext();
+
+  const ConnectModal = () => {
+    showModal({
+      title: "Connect Your Account",
+      backgroundClose: true,
+      children: <Wallets modalLayout={true} provider={provider} />,
+    });
+  };
+
+  const ReferralModal = () => {
+    showModal({
+      title: "Refer And Earn",
+      backgroundClose: true,
+      children: (
+        <>
+          <p className="p balance">
+            Share your unique referral link and earn affiliate fees on trades,
+            swaps, and all DeFi interactions.
+          </p>
+          <div
+            className="pointer"
+            onClick={() => {
+              toast.success("referral copied to clipboard");
+              navigator.clipboard.writeText(
+                `https://rujira.network/?ref=${referral}`
+              );
+            }}>
+            <Input
+              value={`https://rujira.network/?ref=${referral}`}
+              readOnly={true}
+              label="Click to copy"
+            />
+          </div>
+          <p className="fs-12 color-grey mt-2">
+            This referral link is valid until ...
+          </p>
+          <div className="modal__footer mt-4 px-3 py-2 text-right">
+            <Button label="Close" onClick={hideModal} />
+          </div>
+        </>
+      ),
+    });
+  };
+
+  const grouped: Group[] = accounts.reduce((a: Group[], v) => {
+    const current = a.find((x) => x.primary.provider === v.provider);
+    return [
+      ...a.filter((x) => x.primary.provider !== v.provider),
+      current
+        ? // If this is the currently selected provider, the selected account needs to be primary
+          selected?.provider === v.provider && selected.network === v.network
+          ? { primary: v, other: [...current.other, current.primary] }
+          : { ...current, other: [...current.other, v] }
+        : { primary: v, other: [] },
+    ];
+  }, []);
+
+  return (
+    <>
+      {accounts.length === 0 ? (
+        <ConnectAnimation>
+          <Wallets provider={provider} routingElement={routingElement} />
+        </ConnectAnimation>
+      ) : (
+        <MyAccount
+          routingElement={routingElement}
+          address={accounts[0].address}
+          onHide={() => setShowBlur(false)}>
+          <ResolveLink
+            as={routingElement}
+            to="/portfolio"
+            className="balance"
+            onMouseEnter={() => setHoverBalance(true)}
+            onMouseLeave={() => setHoverBalance(false)}>
+            <Fiat
+              amount={0n}
+              symbol="~$"
+              padSymbol={false}
+              className="color-white fs-26 condensed"
+            />
+            <p className="fs-12 condensed color-grey mt-0.5">
+              {!hoverBalance
+                ? i18n.t("Approximate value for selected account")
+                : i18n.t("View portfolio")}
+            </p>
+          </ResolveLink>
+          {grouped.map((g) => (
+            <Address
+              provider={provider}
+              key={g.primary.provider}
+              account={g.primary}
+              other={g.other}
+              showBlur={setShowBlur}
+              selected={!!selected && selected.provider === g.primary.provider}
+            />
+          ))}
+          <hr className="hr hr--dark mt-1.5 mb-0" />
+          <nav className="actions">
+            {referral && (
+              <button className="action transparent" onClick={ReferralModal}>
+                <Users />
+                <span>Referral Link</span>
+              </button>
+            )}
+            <button className="action transparent" onClick={ConnectModal}>
+              <Plus />
+              <span>Connect another account</span>
+            </button>
+            <button className="action transparent">
+              <Deposit />
+              <span>Deposit</span>
+            </button>
+            <button className="action transparent" onClick={disconnectAll}>
+              <LinkDisconnect />
+              <span>Disconnect all</span>
+            </button>
+          </nav>
+          {showBlur && <div className="blur" />}
+        </MyAccount>
+      )}
+    </>
+  );
+};
+
+const ConnectAnimation = ({ children }: { children: React.ReactNode }) => {
+  const [show, setShow] = useState(false);
+  const [scope, animate] = useAnimate();
+
+  useEffect(() => {
+    if (show) {
+      animate(scope.current, { width: 98, color: "#ffffff" });
+    } else {
+      animate(scope.current, {
+        width: scope.current.clientHeight,
+        color: "#161721",
+      });
+    }
+  }, [show]);
+
+  return (
+    <div
+      id="connect-wallet"
+      className="relative py-q1"
+      onMouseOver={() => setShow(true)}
+      onMouseOut={() => setShow(false)}>
+      <motion.a
+        className="rujira-header__connect"
+        ref={scope}
+        initial={{ width: 36 }}>
+        <AnimatePresence>
+          {show && (
+            <motion.div
+              className="fs-14 fw-500 condensed"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}>
+              {i18n.t("Connect")}
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <LinkConnect />
+      </motion.a>
+      <AnimatePresence>
+        {show && (
+          <motion.div
+            className="rujira-header__popup right condensed w-32 text-center p-2"
+            initial={{ opacity: 0, marginTop: -4 }}
+            animate={{ opacity: 1, marginTop: 4 }}
+            exit={{ opacity: 0, marginTop: -4 }}>
+            <i18n.p className="color-white">Connect Your Account</i18n.p>
+            <i18n.small className="color-grey mb-1">
+              Create or connect an existing account
+            </i18n.small>
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const Wallets: FC<{
+  modalLayout?: boolean;
+  provider: AccountProvider;
+  routingElement?: any;
+}> = ({ modalLayout = false, provider, routingElement }) => {
+  const { connect } = provider;
+  const { hideModal } = useGlobalModalContext();
+  return (
+    <div className="rujira-header__wallets">
+      <div
+        className={clsx({
+          "flex w-full ai-c jc-c wrap": true,
+          "mb-1": modalLayout,
+        })}>
+        <button
+          id="connect-station"
+          className={clsx({
+            "transparent block pointer big": true,
+            //"desaturate opacity-10": !window.station,
+          })}
+          //disabled={!window.station}
+          onClick={() => {
+            connect(Provider.Station).then(hideModal);
+          }}>
+          <StationText />
+        </button>
+      </div>
+      <div className="flex w-full ai-c jc-c wrap">
+        <button
+          id="connect-vultisig"
+          className={clsx({
+            "transparent block pointer": true,
+            medium: modalLayout,
+            //"desaturate opacity-10": !window.vultisig,
+          })}
+          //disabled={!window.vultisig}
+          onClick={() => {
+            connect(Provider.Vultisig).then(hideModal);
+          }}>
+          <Vultisig />
+        </button>
+        <button
+          className={clsx({
+            "transparent block pointer": true,
+            medium: modalLayout,
+          })}
+          onClick={() => {
+            connect(Provider.Sonar).then(hideModal);
+          }}>
+          <Sonar />
+        </button>
+        <button
+          id="connect-keplr"
+          className={clsx({
+            "transparent block pointer": true,
+            medium: modalLayout,
+            //"desaturate opacity-10": !window.keplr,
+          })}
+          //disabled={!window.keplr}
+          onClick={() => {
+            connect(Provider.Keplr).then(hideModal);
+          }}>
+          <Keplr />
+        </button>
+        <button
+          id="connect-leap"
+          className={clsx({
+            "transparent block pointer": true,
+            medium: modalLayout,
+            // "desaturate opacity-10": !window.leap,
+          })}
+          //disabled={!window.leap}
+          onClick={() => {
+            connect(Provider.Leap).then(hideModal);
+          }}>
+          <Leap />
+        </button>
+        {!modalLayout && <div className="break" />}
+        <button
+          id="connect-ctrl"
+          className={clsx({
+            "transparent block pointer": true,
+            medium: modalLayout,
+            //"desaturate opacity-10": !window.xfi,
+          })}
+          //disabled={!window.xfi}
+          onClick={() => {
+            connect(Provider.Ctrl).then(hideModal);
+          }}>
+          <Ctrl className="color-white" />
+        </button>
+        <button
+          id="connect-mm"
+          className={clsx({
+            "transparent block pointer": true,
+            medium: modalLayout,
+          })}
+          onClick={() => {
+            connect(Provider.Metamask).then(hideModal);
+          }}>
+          <MetaMask />
+        </button>
+      </div>
+
+      <hr
+        className={clsx({
+          hr: true,
+          "my-1.5": !modalLayout,
+          "my-2": modalLayout,
+        })}
+      />
+      <ResolveLink as={routingElement} to="/ecosystem/wallets">
+        Need help deciding?
+      </ResolveLink>
+    </div>
+  );
+};
+
+const MyAccount = ({
+  address,
+  children,
+  onHide,
+  routingElement,
+}: {
+  address: string;
+  children: React.ReactNode;
+  onHide: () => void;
+  routingElement?: any;
+}) => {
+  const [show, setShow] = useState(false);
+  const [avatar] = useLocalStorage("avatar:" + address, "");
+
+  useEffect(() => {
+    onHide();
+  }, [show]);
+
+  return (
+    <div
+      className="relative py-q1"
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}>
+      <ResolveLink
+        as={routingElement}
+        path="/portfolio"
+        className="rujira-header__pfp"
+        style={
+          avatar !== ""
+            ? {
+                backgroundImage: `url(${avatar})`,
+              }
+            : {}
+        }>
+        {avatar === "" && <CircleUser />}
+      </ResolveLink>
+      <AnimatePresence>
+        {show && (
+          <motion.div
+            className="rujira-header__popup right condensed p-1.5 br-2"
+            initial={{ opacity: 0, marginTop: -4, right: -8 }}
+            animate={{ opacity: 1, marginTop: 4, right: -8 }}
+            exit={{ opacity: 0, marginTop: -4, right: -8 }}>
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const ProviderIcon: FC<{ provider: Provider; selected: boolean }> = ({
+  provider,
+  selected,
+}) => {
+  switch (provider) {
+    case Provider.Keplr:
+      return selected ? (
+        <Keplr className="address__wallet" />
+      ) : (
+        <KeplrSimple className="address__wallet" />
+      );
+    case Provider.Leap:
+      return selected ? (
+        <Leap className="address__wallet" />
+      ) : (
+        <LeapSimple className="address__wallet" />
+      );
+    case Provider.Metamask:
+      return selected ? (
+        <MetaMask className="address__wallet" />
+      ) : (
+        <MetaMaskSimple className="address__wallet" />
+      );
+    case Provider.Sonar:
+      return (
+        <SonarSimple
+          className={clsx({ address__wallet: true, "color-white": selected })}
+        />
+      );
+    case Provider.Station:
+      return <StationSimple className="address__wallet" gradient={selected} />;
+    case Provider.Vultisig:
+      return selected ? (
+        <Vultisig className="address__wallet" />
+      ) : (
+        <VultisigSimple className="address__wallet" />
+      );
+    case Provider.Ctrl:
+      return (
+        <Ctrl
+          className={clsx({ address__wallet: true, "color-white": selected })}
+        />
+      );
+  }
+};
+
+export const NetworkIcon: FC<{ network: Network; className?: string }> = ({
+  network,
+  className,
+}) => {
+  switch (network) {
+    case Network.Avalanche:
+      return <NetworkIcons.Avalanche className={className} />;
+    case Network.Bitcoin:
+      return <NetworkIcons.Bitcoin className={className} />;
+    case Network.BitcoinCash:
+      return <NetworkIcons.BitcoinCash className={className} />;
+    case Network.Bsc:
+      return <NetworkIcons.BinanceSmartChain className={className} />;
+    case Network.Dogecoin:
+      return <NetworkIcons.Doge className={className} />;
+    case Network.Ethereum:
+      return <NetworkIcons.Ethereum className={className} />;
+    case Network.Gaia:
+      return <NetworkIcons.Cosmos className={className} />;
+    case Network.Kujira:
+      return <NetworkIcons.Kujira className={className} />;
+    case Network.Litecoin:
+      return <NetworkIcons.Litecoin className={className} />;
+    case Network.Thorchain:
+      return <NetworkIcons.Thorchain className={className} />;
+  }
+};
+
+const Address: FC<{
+  account: Account;
+  showBlur: Dispatch<SetStateAction<boolean>>;
+  selected: boolean;
+  other: Account[];
+  provider: AccountProvider;
+}> = ({ account, showBlur, selected, other, provider }) => {
+  const [showNetworkSelect, setShowNetworkSelect] = useState(false);
+  const { select, disconnect } = provider;
+
+  const networks = [account.network, ...other.map((x) => x.network)].sort(
+    (a, b) => a.localeCompare(b)
+  );
+  return (
+    <div
+      className={clsx({
+        "flex ai-c px-1 address": true,
+        "address--selected": selected,
+      })}>
+      <ProviderIcon provider={account.provider} selected={selected} />
+      <p
+        className="address__address pointer"
+        onClick={() => {
+          if (selected) {
+            toast.success("address copied to clipboard");
+            navigator.clipboard.writeText(account.address);
+          } else {
+            select(account);
+          }
+        }}>
+        {account.address.substring(0, 10)}...
+        {account.address.slice(-12)}
+      </p>
+      {selected && (
+        <div className="relative ml-a mr-1">
+          <button
+            className="address__network transparent"
+            onClick={() => {
+              setShowNetworkSelect(true);
+              showBlur(true);
+            }}>
+            <NetworkIcon network={account.network} />
+            <AngleDown />
+          </button>
+          {showNetworkSelect && (
+            <div className="address__network-select">
+              {networks.map((a) => (
+                <button
+                  key={a}
+                  className={clsx({
+                    transparent: true,
+                    selected: account.network === a,
+                  })}
+                  onClick={() => {
+                    select({ network: a, provider: account.provider });
+                    showBlur(false);
+                    setShowNetworkSelect(false);
+                  }}>
+                  <NetworkIcon network={a} />
+                  <span>{networkLabel(a)}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <LinkDisconnect
+        className="address__disconnect"
+        onClick={() => disconnect(account.provider)}
+      />
+    </div>
+  );
+};
+
+/* import { getSnaps } from "@leapwallet/cosmos-snap-provider";
+import clsx from "clsx";
+import {
+  AnimatePresence,
+  motion,
+  useAnimate,
+  usePresence,
+} from "motion/react";
+import {
+  Decimal,
+  GradientButton,
+  ResolveLink,
+  usePrices,
+} from "kujira-core";
+import { Denom, mulDec } from "kujira.js";
+import { useLocalStorage } from "kujira.ui/src/hooks";
+import * as i18n from "kujira.ui/src/i18n";
+import {
+  IconExternal,
+  IconSonar,
+  IconStation,
+  IconXDefi,
+} from "kujira.ui/src/icons";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
+import ReactTooltip from "react-tooltip";
+
+import {
+  AngleDown,
+  AngleUp,
+  Chain,
+  CircleUser,
+  Copy,
+  Deposit,
+  Disconnect,
+  GearHead,
+  Key,
+} from "kujira.ui/src/icons/Icons";
+import { useNetwork } from "kujira.ui/src/providers/network";
+import {
+  Adapter,
+  IWallet,
+  useWallet,
+} from "kujira.ui/src/providers/wallet";
+//import { appLink, coinSort } from "kujira.ui/src/utils";
+import MM from "../../../beluga/src/assets/logos/metamask.svg";
+//import IconMetamaskConnected from "kujira.ui/src/assets/metamask_connected.png";
+import { BigNumber } from "ethers";
+import { IconKeplr } from "kujira.ui/src/icons/IconKeplr";
+import { IconLeap } from "kujira.ui/src/icons/IconLeap";
+import { PasskeyModal } from "../../../beluga/src/components/PasskeyModal";
+import {
+  MODAL_TYPES,
+  useGlobalModalContext,
+} from "../../../beluga/src/context/GlobalModal";
+
+export function Account({
+  adapter = useWallet,
+}: {
+  adapter?: () => Pick<
+    IWallet,
+    | "account"
+    | "adapter"
+    | "balance"
+    | "balances"
+    | "chainInfo"
+    | "connect"
+    | "delegations"
+    | "disconnect"
+  >;
+}) {
+  const {
+    adapter: a,
+    account,
+    balances,
+    connect,
+    delegations,
+    disconnect,
+  } = adapter();
+  const [showWalletSelect] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(true);
+  const [hoverBalance, setHoverBalance] = useState(false);
+  const [createModal, setCreateModal] = useState(false);
+  const [{ chainInfo }] = useNetwork();
+  const [snapsSupported, setSnapsSupported] = useLocalStorage(
+    "snaps",
+    ""
+  );
+  const { price, fetchPrices } = usePrices();
+  const { showModal } = useGlobalModalContext();
+
+  useEffect(() => {
+    getSnaps()
+      .then(() => {
+        setSnapsSupported("y");
+      })
+      .catch(() => {
+        setSnapsSupported("");
+      });
+
+    const listener = makeKeySequenceListener(
+      cheatcode,
+      () => connect && connect(Adapter.ReadOnly)
+    );
+    window.addEventListener("keyup", listener);
+    return () => window.removeEventListener("keyup", listener);
+  }, []);
+
+  useEffect(() => {
+    if (account && balances.length > 0) {
+      fetchPrices(balances.map((b) => b.denom || ""));
+    }
+  }, [balances]);
+
+  useEffect(() => {
+    ReactTooltip.rebuild();
+  }, [showWalletSelect]);
+
+  if (account) {
+    const delegated = delegations?.reduce(
+      (a, v) =>
+        v.balance?.amount ? parseInt(v.balance.amount) + a : a,
+      0
+    );
+
+    const totalUSD = balances.reduce((a, b) => {
+      const total = BigNumber.from(b.amount).div(
+        BigNumber.from(10).pow(Denom.from(b.denom).decimals - 6)
+      );
+      return a.add(mulDec(total, price(b.denom)));
+    }, mulDec(BigNumber.from(delegated || 0), price("ukuji")));
+
+    return (
+      <>
+        <MyAccount address={account.address}>
+          <div
+            className="action flex ai-c"
+            onClick={() => {
+              navigator.clipboard.writeText(account.address || "");
+              toast.success(i18n.t("Copied address to clipboard"));
+            }}>
+            <div className="fs-12 fw-500">
+              {account.address.substring(0, 14)}...
+              {account.address.slice(-14)}
+            </div>
+            <div className="ml-a mr-0">
+              <Copy />
+            </div>
+          </div>
+          <ResolveLink
+            onMouseEnter={() => setHoverBalance(true)}
+            onMouseLeave={() => setHoverBalance(false)}
+            app=""
+            path="/portfolio"
+            className="balance mt-2 text-center">
+            <Decimal
+              labelLeft={true}
+              label="~$"
+              amount={totalUSD}
+              round={2}
+              decimals={6}
+              className="fs-28 mono fw-400"
+            />
+            <span className="fs-11 fw-500 condensed mt-q1 msg">
+              {!hoverBalance
+                ? i18n.t("Approximate value")
+                : i18n.t("View portfolio")}
+            </span>
+          </ResolveLink>
+
+          <div
+            className="btn flex ai-c mt-1"
+            onClick={() => showModal(MODAL_TYPES.DEPOSIT_MODAL)}>
+            <div className="w-q5">
+              <Deposit className="mx-a" />
+            </div>
+            <div className="fs-14 ml-1 fw-500">Deposit</div>
+          </div>
+
+          <div className="btn flex ai-c" onClick={() => disconnect()}>
+            <div className="w-q5">
+              <Disconnect className="mx-a" />
+            </div>
+            <div className="fs-14 ml-1 fw-500">Disconnect</div>
+          </div>
+        </MyAccount>
+      </>
+    );
+  }
+  return (
+    <>
+      <ConnectAnimation>
+        <GradientButton
+          className="md-button--grey md-button--icon-left md-button--full mt-q3"
+          onClick={() => setCreateModal(true)}>
+          <Key />
+          <i18n.span>Connect with Passkey</i18n.span>
+        </GradientButton>
+        <a
+          href="https://winkhub.app/posts/the-world-of-passkeys"
+          target="_blank"
+          className="fs-12 fw-500 mt-1 color-grey hover-teal no-underline md-flex ai-c w-full jc-c">
+          Find out more about Passkey
+          <IconExternal className="w-1 h-a ml-q1" />
+        </a>
+        <hr className="hr mt-2 mb-q3" />
+        <a
+          onClick={() => setShowAdvanced(!showAdvanced)}
+          className="fs-14 md-flex w-full ai-c jc-c cursor">
+          {showAdvanced ? (
+            <AngleUp className="block mr-1 w-a h-2" />
+          ) : (
+            <AngleDown className="block mr-1 w-a h-2" />
+          )}
+          {i18n.t(
+            `${showAdvanced ? "Hide" : "Show"} advanced options`
+          )}
+        </a>
+        {showAdvanced && (
+          <div className="rujira-header-wallets">
+            <button
+              className="transparent block pointer sonar"
+              onClick={() => {
+                connect && connect(Adapter.Sonar);
+              }}>
+              <IconSonar />
+            </button>
+
+            <div className="md-flex w-full ai-c jc-c wrap">
+              <button
+                id="connect-keplr"
+                className={clsx({
+                  "transparent block pointer": true,
+                  "desaturate opacity-10": !window.keplr,
+                })}
+                disabled={!window.keplr}
+                onClick={() => {
+                  connect && connect(Adapter.Keplr);
+                }}>
+                <IconKeplr />
+              </button>
+
+              <button
+                id="connect-leap"
+                className={clsx({
+                  "transparent block pointer": true,
+                  "desaturate opacity-10": !window.leap,
+                })}
+                disabled={!window.leap}
+                onClick={() => {
+                  connect && connect(Adapter.Leap);
+                }}>
+                <IconLeap />
+              </button>
+
+              <button
+                id="connect-station"
+                className={clsx({
+                  "transparent block pointer": true,
+                  "desaturate opacity-10": !window.station,
+                })}
+                disabled={!window.station}
+                onClick={() => {
+                  connect && connect(Adapter.Station);
+                }}>
+                <IconStation />
+              </button>
+              <button
+                id="connect-xdefi"
+                className={clsx({
+                  "transparent block pointer": true,
+                  "desaturate opacity-10": !window.xfi,
+                })}
+                disabled={!window.xfi}
+                onClick={() => {
+                  connect && connect(Adapter.Xfi);
+                }}>
+                <IconXDefi />
+              </button>
+              <button
+                id="connect-mm"
+                className={clsx({
+                  "transparent block pointer": true,
+                  "desaturate opacity-10": true,
+                })}
+                disabled={true}>
+                <img src={MM} alt="MetaMask Logo" />
+              </button>
+            </div>
+
+            <hr className="hr my-q3" />
+            <ResolveLink app="" path="/ecosystem/wallets">
+              Need help deciding?
+            </ResolveLink>
+          </div>
+        )}
+      </ConnectAnimation>
+
+      <PasskeyModal
+        close={() => setCreateModal(false)}
+        show={createModal}
+        direct
+      />
+    </>
+  );
+}
+
+const MyAccount = ({
+  address,
+  children,
+}: {
+  address: string;
+  children: React.ReactNode;
+}) => {
+  const [show, setShow] = useState(false);
+  const [avatar, setAvatar] = useLocalStorage(
+    "avatar:" + address,
+    ""
+  );
+
+  return (
+    <div
+      className="relative py-q1"
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}>
+      <Link
+        to="/portfolio"
+        className="rujira-header-pfp"
+        style={
+          avatar !== ""
+            ? {
+                backgroundImage: `url(${avatar})`,
+              }
+            : {}
+        }>
+        {avatar === "" && <CircleUser />}
+      </Link>
+      <AnimatePresence>
+        {show && (
+          <motion.div
+            className="rujira-header-popup right condensed w-28"
+            initial={{ opacity: 0, marginTop: -4 }}
+            animate={{ opacity: 1, marginTop: 0 }}
+            exit={{ opacity: 0, marginTop: -4 }}>
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const ConnectAnimation = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [show, setShow] = useState(false);
+  const [scope, animate] = useAnimate();
+
+  useEffect(() => {
+    if (show) {
+      animate(scope.current, { width: 98, color: "#ffffff" });
+    } else {
+      animate(scope.current, {
+        width: scope.current.clientHeight,
+        color: "#161721",
+      });
+    }
+  }, [show]);
+
+  return (
+    <div
+      id="connect-wallet"
+      className="relative py-q1"
+      onMouseOver={() => setShow(true)}
+      onMouseOut={() => setShow(false)}>
+      <motion.a className="rujira-header-connect" ref={scope}>
+        <AnimatePresence>
+          {show && (
+            <motion.div
+              className="fs-14 fw-500 condensed"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}>
+              {i18n.t("Connect")}
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <Chain />
+      </motion.a>
+      <AnimatePresence>
+        {show && <DropDown>{children}</DropDown>}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const DropDown = ({ children }: { children: React.ReactNode }) => {
+  const [isPresent, safeToRemove] = usePresence();
+
+  useEffect(() => {
+    !isPresent && setTimeout(safeToRemove, 250);
+  }, [isPresent]);
+
+  return (
+    <motion.div
+      className="rujira-header-popup right condensed w-32"
+      initial={{ opacity: 0, marginTop: -4 }}
+      animate={{ opacity: 1, marginTop: 0 }}
+      exit={{ opacity: 0, marginTop: -4 }}>
+      <i18n.p>Connect Your Account</i18n.p>
+      <i18n.small className="color-grey mb-1">
+        Create or connect an existing account
+      </i18n.small>
+      {children}
+    </motion.div>
+  );
+};
+
+const cheatcode = [
+  {
+    key: "i",
+    timeToNextKey: 1000,
+  },
+  {
+    key: "d",
+    timeToNextKey: 1000,
+  },
+  {
+    key: "d",
+    timeToNextKey: 1000,
+  },
+  {
+    key: "q",
+    timeToNextKey: 1000,
+  },
+  {
+    key: "d",
+  },
+];
+
+const makeKeySequenceListener = (keySequence, callback) => {
+  let index = 0;
+  let timeoutId;
+
+  return (e) => {
+    const { key, timeToNextKey } = keySequence[index];
+    if (e.key === key) {
+      if (index === keySequence.length - 1) {
+        callback();
+      }
+      clearTimeout(timeoutId);
+      if (timeToNextKey) {
+        timeoutId = setTimeout(() => (index = 0), timeToNextKey);
+      }
+      index = (index + 1) % keySequence.length;
+    } else {
+      index = 0;
+      clearTimeout(timeoutId);
+    }
+  };
+};
+ */