cleanup

src/ui/wallet-connector/index.ts

@@ -0,0 +1 @@
+export { default } from "./wallet-connector-wallet-list.lite";

src/ui/wallet-connector/wallet-connector-frame.lite.tsx

@@ -0,0 +1,44 @@
+import { useStore, useRef, onMount, onUnMount } from "@builder.io/mitosis";
+import clx from "clsx";
+import Box from "../box";
+import * as styles from "./wallet-connector.css";
+
+import { store } from "../../models/store";
+import type { ThemeVariant } from "../../models/system.model";
+import type { WalletConnectorFrameProps } from "./wallet-connector.types";
+
+export default function WalletConnectorFrame(props: WalletConnectorFrameProps) {
+  const state = useStore<{
+    theme: ThemeVariant;
+  }>({
+    theme: "light",
+  });
+
+  let cleanupRef = useRef<() => void>(null);
+
+  onMount(() => {
+    state.theme = store.getState().theme;
+
+    cleanupRef = store.subscribe((newState) => {
+      state.theme = newState.theme;
+    });
+  });
+
+  onUnMount(() => {
+    if (typeof cleanupRef === "function") cleanupRef();
+  });
+
+  return (
+    <Box
+      {...props.attributes}
+      bg="$cardBg"
+      className={clx(
+        props.className,
+        "wallet-connector-frame",
+        styles.walletConnectorFrame[state.theme],
+      )}
+    >
+      {props.children}
+    </Box>
+  );
+}

src/ui/wallet-connector/wallet-connector-head.lite.tsx

@@ -0,0 +1,85 @@
+import {
+  useStore,
+  useRef,
+  onMount,
+  onUnMount,
+  Show,
+} from "@builder.io/mitosis";
+import clx from "clsx";
+import Box from "../box";
+import Text from "../text";
+import Button from "../button";
+import Icon from "../icon";
+import * as styles from "./wallet-connector.css";
+
+import { store } from "../../models/store";
+import type { ThemeVariant } from "../../models/system.model";
+import type { WalletConnectorHeadProps } from "./wallet-connector.types";
+
+export default function WalletConnectorHead(props: WalletConnectorHeadProps) {
+  const state = useStore<{
+    theme: ThemeVariant;
+  }>({
+    theme: "light",
+  });
+
+  let cleanupRef = useRef<() => void>(null);
+
+  onMount(() => {
+    state.theme = store.getState().theme;
+
+    cleanupRef = store.subscribe((newState) => {
+      state.theme = newState.theme;
+    });
+  });
+
+  onUnMount(() => {
+    if (typeof cleanupRef === "function") cleanupRef();
+  });
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      {...props.attributes}
+      className={clx(props.className, "wallet-connector-head")}
+    >
+      <Show when={props.hasBackButton}>
+        <Button
+          variant="unstyled"
+          size="sm"
+          className={styles.walletConnectorHeadAction}
+          onClick={() => {
+            props.onBack?.();
+          }}
+        >
+          <Icon name="arrowLeftSLine" size="$xl" color="inherit" />
+        </Button>
+      </Show>
+
+      <Text
+        fontSize="$8"
+        fontWeight="$semibold"
+        domAttributes={{
+          id: props.id,
+        }}
+      >
+        {props.title}
+      </Text>
+
+      <Show when={props.hasCloseButton}>
+        <Button
+          variant="unstyled"
+          size="sm"
+          className={styles.walletConnectorHeadAction}
+          onClick={() => {
+            props.onClose?.();
+          }}
+        >
+          <Icon name="closeFilled" size="$xl" color="inherit" />
+        </Button>
+      </Show>
+    </Box>
+  );
+}

src/ui/wallet-connector/wallet-connector-info.lite.tsx

@@ -0,0 +1,145 @@
+import {
+  useStore,
+  useRef,
+  onMount,
+  onUnMount,
+  useMetadata,
+  Show,
+} from "@builder.io/mitosis";
+import copy from "copy-to-clipboard";
+import Box from "../box";
+import Icon from "../icon";
+import Button from "../button";
+import Text from "../text";
+import { store } from "../../models/store";
+import { truncateTextMiddle } from "../../helpers/string";
+
+import * as styles from "./wallet-connector.css";
+import * as sharedStyles from "../shared/shared.css";
+import type { WalletConnectorInfoProps } from "./wallet-connector.types";
+import type { ThemeVariant } from "../../models/system.model";
+
+useMetadata({
+  rsc: {
+    componentType: "client",
+  },
+});
+
+export default function WalletConnectorInfo(props: WalletConnectorInfoProps) {
+  const state = useStore<{
+    idle: boolean;
+    theme: ThemeVariant;
+    handleOnCopy: () => void;
+  }>({
+    idle: true,
+    theme: "light",
+    handleOnCopy: () => {
+      const success = copy(props.address);
+
+      if (success) {
+        props.onCopyAddress?.();
+        state.idle = false;
+
+        setTimeout(() => {
+          state.idle = true;
+        }, 1000);
+      }
+    },
+  });
+
+  let cleanupRef = useRef<() => void>(null);
+
+  onMount(() => {
+    state.theme = store.getState().theme;
+
+    cleanupRef = store.subscribe((newState) => {
+      state.theme = newState.theme;
+    });
+  });
+
+  onUnMount(() => {
+    if (typeof cleanupRef === "function") cleanupRef();
+  });
+
+  return (
+    <Box
+      bg="$background"
+      borderRadius="$lg"
+      display="flex"
+      gap="$9"
+      px="$5"
+      py="$5"
+      className={styles.walletConnectorInfo[state.theme ?? "light"]}
+    >
+      <Box display="flex" gap="$5">
+        <img
+          src={props.iconSrc}
+          alt={props.address}
+          width={20}
+          height={20}
+          className={styles.walletConnectorInfoImg}
+        />
+
+        <Text as="span" fontSize="$sm" fontWeight="$normal" color="$neutral600">
+          {truncateTextMiddle(props.address, props.truncateLength ?? 15)}
+        </Text>
+      </Box>
+
+      <Box display="flex" gap="$5">
+        <Button
+          variant="unstyled"
+          onClick={() => state.handleOnCopy()}
+          size="xs"
+          domAttributes={{
+            style: {
+              minWidth: "unset",
+            },
+          }}
+        >
+          <Show
+            when={state.idle}
+            else={
+              <Icon
+                color="$textSuccess"
+                name="copied"
+                size="$md"
+                attributes={{
+                  fontSize: "$xl",
+                }}
+                className={sharedStyles.standardTransitionProperties}
+              />
+            }
+          >
+            <Icon
+              name="copy"
+              color="$neutral600"
+              attributes={{
+                fontSize: "$xl",
+              }}
+              className={sharedStyles.standardTransitionProperties}
+            />
+          </Show>
+        </Button>
+
+        <Button
+          variant="unstyled"
+          onClick={props.onDisconnect}
+          size="xs"
+          domAttributes={{
+            style: {
+              minWidth: "unset",
+            },
+          }}
+        >
+          <Icon
+            name="logout"
+            color="$neutral600"
+            attributes={{
+              fontSize: "$xl",
+            }}
+          />
+        </Button>
+      </Box>
+    </Box>
+  );
+}

src/ui/wallet-connector/wallet-connector-status-ring.lite.tsx

@@ -0,0 +1,103 @@
+import {
+  useStore,
+  useRef,
+  onMount,
+  onUnMount,
+  Show,
+} from "@builder.io/mitosis";
+import clx from "clsx";
+import Box from "../box";
+import Text from "../text";
+import Tooltip from "../tooltip";
+import Button from "../button";
+import Icon from "../icon";
+import * as styles from "./wallet-connector.css";
+
+import { store } from "../../models/store";
+import type { ThemeVariant } from "../../models/system.model";
+import type { WalletConnectorStatusRingProps } from "./wallet-connector.types";
+
+export default function WalletConnectorStatusRing(
+  props: WalletConnectorStatusRingProps,
+) {
+  const state = useStore<{
+    theme: ThemeVariant;
+  }>({
+    theme: "light",
+  });
+
+  let cleanupRef = useRef<() => void>(null);
+
+  onMount(() => {
+    state.theme = store.getState().theme;
+
+    cleanupRef = store.subscribe((newState) => {
+      state.theme = newState.theme;
+    });
+  });
+
+  onUnMount(() => {
+    if (typeof cleanupRef === "function") cleanupRef();
+  });
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      className={clx(
+        props.className,
+        "wallet-connector-status-ring",
+        styles.walletConnectorStatusRing,
+      )}
+      attributes={{
+        ...props.attributes,
+        "data-status": props.status,
+      }}
+    >
+      <img
+        src={props.wallet.logo}
+        alt={props.wallet.name}
+        className={styles.walletConnectorStatusRingImg}
+      />
+
+      <div
+        className={styles.walletConnectorStatusRingActionPseudo}
+        aria-hidden="true"
+        data-status={props.status}
+      />
+
+      <div
+        className={styles.walletConnectorStatusRingAction}
+        data-status={props.status}
+      >
+        <Show
+          when={props.popoverAction}
+          else={<Icon name="informationSimpleLine" color="inherit" />}
+        >
+          <Tooltip
+            title={
+              <Text fontSize="$xs" color="$textSecondary" fontWeight="$medium">
+                {props.popoverAction.label}
+              </Text>
+            }
+          >
+            <Button
+              onClick={() => props.popoverAction.onClick?.()}
+              variant="unstyled"
+              domAttributes={{
+                style: {
+                  color: "inherit",
+                  padding: "0",
+                  minWidth: "unset",
+                },
+              }}
+            >
+              <Icon name="reload" color="inherit" />
+            </Button>
+          </Tooltip>
+        </Show>
+      </div>
+    </Box>
+  );
+}