Skip to content

Commit 48449f9

Browse files
yyyyaaayyyyaaa
committed
cleanup
1 parent 11702d5 commit 48449f9

6 files changed

+582
-0
lines changed

‎src/ui/wallet-connector/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./wallet-connector-wallet-list.lite";

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { useStore, useRef, onMount, onUnMount } from "@builder.io/mitosis";
2+
import clx from "clsx";
3+
import Box from "../box";
4+
import * as styles from "./wallet-connector.css";
5+
6+
import { store } from "../../models/store";
7+
import type { ThemeVariant } from "../../models/system.model";
8+
import type { WalletConnectorFrameProps } from "./wallet-connector.types";
9+
10+
export default function WalletConnectorFrame(props: WalletConnectorFrameProps) {
11+
const state = useStore<{
12+
theme: ThemeVariant;
13+
}>({
14+
theme: "light",
15+
});
16+
17+
let cleanupRef = useRef<() => void>(null);
18+
19+
onMount(() => {
20+
state.theme = store.getState().theme;
21+
22+
cleanupRef = store.subscribe((newState) => {
23+
state.theme = newState.theme;
24+
});
25+
});
26+
27+
onUnMount(() => {
28+
if (typeof cleanupRef === "function") cleanupRef();
29+
});
30+
31+
return (
32+
<Box
33+
{...props.attributes}
34+
bg="$cardBg"
35+
className={clx(
36+
props.className,
37+
"wallet-connector-frame",
38+
styles.walletConnectorFrame[state.theme],
39+
)}
40+
>
41+
{props.children}
42+
</Box>
43+
);
44+
}

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

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import {
2+
useStore,
3+
useRef,
4+
onMount,
5+
onUnMount,
6+
Show,
7+
} from "@builder.io/mitosis";
8+
import clx from "clsx";
9+
import Box from "../box";
10+
import Text from "../text";
11+
import Button from "../button";
12+
import Icon from "../icon";
13+
import * as styles from "./wallet-connector.css";
14+
15+
import { store } from "../../models/store";
16+
import type { ThemeVariant } from "../../models/system.model";
17+
import type { WalletConnectorHeadProps } from "./wallet-connector.types";
18+
19+
export default function WalletConnectorHead(props: WalletConnectorHeadProps) {
20+
const state = useStore<{
21+
theme: ThemeVariant;
22+
}>({
23+
theme: "light",
24+
});
25+
26+
let cleanupRef = useRef<() => void>(null);
27+
28+
onMount(() => {
29+
state.theme = store.getState().theme;
30+
31+
cleanupRef = store.subscribe((newState) => {
32+
state.theme = newState.theme;
33+
});
34+
});
35+
36+
onUnMount(() => {
37+
if (typeof cleanupRef === "function") cleanupRef();
38+
});
39+
40+
return (
41+
<Box
42+
display="flex"
43+
justifyContent="space-between"
44+
alignItems="center"
45+
{...props.attributes}
46+
className={clx(props.className, "wallet-connector-head")}
47+
>
48+
<Show when={props.hasBackButton}>
49+
<Button
50+
variant="unstyled"
51+
size="sm"
52+
className={styles.walletConnectorHeadAction}
53+
onClick={() => {
54+
props.onBack?.();
55+
}}
56+
>
57+
<Icon name="arrowLeftSLine" size="$xl" color="inherit" />
58+
</Button>
59+
</Show>
60+
61+
<Text
62+
fontSize="$8"
63+
fontWeight="$semibold"
64+
domAttributes={{
65+
id: props.id,
66+
}}
67+
>
68+
{props.title}
69+
</Text>
70+
71+
<Show when={props.hasCloseButton}>
72+
<Button
73+
variant="unstyled"
74+
size="sm"
75+
className={styles.walletConnectorHeadAction}
76+
onClick={() => {
77+
props.onClose?.();
78+
}}
79+
>
80+
<Icon name="closeFilled" size="$xl" color="inherit" />
81+
</Button>
82+
</Show>
83+
</Box>
84+
);
85+
}

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

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import {
2+
useStore,
3+
useRef,
4+
onMount,
5+
onUnMount,
6+
useMetadata,
7+
Show,
8+
} from "@builder.io/mitosis";
9+
import copy from "copy-to-clipboard";
10+
import Box from "../box";
11+
import Icon from "../icon";
12+
import Button from "../button";
13+
import Text from "../text";
14+
import { store } from "../../models/store";
15+
import { truncateTextMiddle } from "../../helpers/string";
16+
17+
import * as styles from "./wallet-connector.css";
18+
import * as sharedStyles from "../shared/shared.css";
19+
import type { WalletConnectorInfoProps } from "./wallet-connector.types";
20+
import type { ThemeVariant } from "../../models/system.model";
21+
22+
useMetadata({
23+
rsc: {
24+
componentType: "client",
25+
},
26+
});
27+
28+
export default function WalletConnectorInfo(props: WalletConnectorInfoProps) {
29+
const state = useStore<{
30+
idle: boolean;
31+
theme: ThemeVariant;
32+
handleOnCopy: () => void;
33+
}>({
34+
idle: true,
35+
theme: "light",
36+
handleOnCopy: () => {
37+
const success = copy(props.address);
38+
39+
if (success) {
40+
props.onCopyAddress?.();
41+
state.idle = false;
42+
43+
setTimeout(() => {
44+
state.idle = true;
45+
}, 1000);
46+
}
47+
},
48+
});
49+
50+
let cleanupRef = useRef<() => void>(null);
51+
52+
onMount(() => {
53+
state.theme = store.getState().theme;
54+
55+
cleanupRef = store.subscribe((newState) => {
56+
state.theme = newState.theme;
57+
});
58+
});
59+
60+
onUnMount(() => {
61+
if (typeof cleanupRef === "function") cleanupRef();
62+
});
63+
64+
return (
65+
<Box
66+
bg="$background"
67+
borderRadius="$lg"
68+
display="flex"
69+
gap="$9"
70+
px="$5"
71+
py="$5"
72+
className={styles.walletConnectorInfo[state.theme ?? "light"]}
73+
>
74+
<Box display="flex" gap="$5">
75+
<img
76+
src={props.iconSrc}
77+
alt={props.address}
78+
width={20}
79+
height={20}
80+
className={styles.walletConnectorInfoImg}
81+
/>
82+
83+
<Text as="span" fontSize="$sm" fontWeight="$normal" color="$neutral600">
84+
{truncateTextMiddle(props.address, props.truncateLength ?? 15)}
85+
</Text>
86+
</Box>
87+
88+
<Box display="flex" gap="$5">
89+
<Button
90+
variant="unstyled"
91+
onClick={() => state.handleOnCopy()}
92+
size="xs"
93+
domAttributes={{
94+
style: {
95+
minWidth: "unset",
96+
},
97+
}}
98+
>
99+
<Show
100+
when={state.idle}
101+
else={
102+
<Icon
103+
color="$textSuccess"
104+
name="copied"
105+
size="$md"
106+
attributes={{
107+
fontSize: "$xl",
108+
}}
109+
className={sharedStyles.standardTransitionProperties}
110+
/>
111+
}
112+
>
113+
<Icon
114+
name="copy"
115+
color="$neutral600"
116+
attributes={{
117+
fontSize: "$xl",
118+
}}
119+
className={sharedStyles.standardTransitionProperties}
120+
/>
121+
</Show>
122+
</Button>
123+
124+
<Button
125+
variant="unstyled"
126+
onClick={props.onDisconnect}
127+
size="xs"
128+
domAttributes={{
129+
style: {
130+
minWidth: "unset",
131+
},
132+
}}
133+
>
134+
<Icon
135+
name="logout"
136+
color="$neutral600"
137+
attributes={{
138+
fontSize: "$xl",
139+
}}
140+
/>
141+
</Button>
142+
</Box>
143+
</Box>
144+
);
145+
}

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

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import {
2+
useStore,
3+
useRef,
4+
onMount,
5+
onUnMount,
6+
Show,
7+
} from "@builder.io/mitosis";
8+
import clx from "clsx";
9+
import Box from "../box";
10+
import Text from "../text";
11+
import Tooltip from "../tooltip";
12+
import Button from "../button";
13+
import Icon from "../icon";
14+
import * as styles from "./wallet-connector.css";
15+
16+
import { store } from "../../models/store";
17+
import type { ThemeVariant } from "../../models/system.model";
18+
import type { WalletConnectorStatusRingProps } from "./wallet-connector.types";
19+
20+
export default function WalletConnectorStatusRing(
21+
props: WalletConnectorStatusRingProps,
22+
) {
23+
const state = useStore<{
24+
theme: ThemeVariant;
25+
}>({
26+
theme: "light",
27+
});
28+
29+
let cleanupRef = useRef<() => void>(null);
30+
31+
onMount(() => {
32+
state.theme = store.getState().theme;
33+
34+
cleanupRef = store.subscribe((newState) => {
35+
state.theme = newState.theme;
36+
});
37+
});
38+
39+
onUnMount(() => {
40+
if (typeof cleanupRef === "function") cleanupRef();
41+
});
42+
43+
return (
44+
<Box
45+
display="flex"
46+
justifyContent="space-between"
47+
alignItems="center"
48+
className={clx(
49+
props.className,
50+
"wallet-connector-status-ring",
51+
styles.walletConnectorStatusRing,
52+
)}
53+
attributes={{
54+
...props.attributes,
55+
"data-status": props.status,
56+
}}
57+
>
58+
<img
59+
src={props.wallet.logo}
60+
alt={props.wallet.name}
61+
className={styles.walletConnectorStatusRingImg}
62+
/>
63+
64+
<div
65+
className={styles.walletConnectorStatusRingActionPseudo}
66+
aria-hidden="true"
67+
data-status={props.status}
68+
/>
69+
70+
<div
71+
className={styles.walletConnectorStatusRingAction}
72+
data-status={props.status}
73+
>
74+
<Show
75+
when={props.popoverAction}
76+
else={<Icon name="informationSimpleLine" color="inherit" />}
77+
>
78+
<Tooltip
79+
title={
80+
<Text fontSize="$xs" color="$textSecondary" fontWeight="$medium">
81+
{props.popoverAction.label}
82+
</Text>
83+
}
84+
>
85+
<Button
86+
onClick={() => props.popoverAction.onClick?.()}
87+
variant="unstyled"
88+
domAttributes={{
89+
style: {
90+
color: "inherit",
91+
padding: "0",
92+
minWidth: "unset",
93+
},
94+
}}
95+
>
96+
<Icon name="reload" color="inherit" />
97+
</Button>
98+
</Tooltip>
99+
</Show>
100+
</div>
101+
</Box>
102+
);
103+
}

0 commit comments

Comments
 (0)