@thru/react-ui 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,2 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-export {  }
+declare function ThruAccountSwitcher(): react_jsx_runtime.JSX.Element;
+
+export { ThruAccountSwitcher };

package/dist/index.js

@@ -1,3 +1,171 @@
+import { useWallet, useAccounts } from '@thru/react-sdk';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
+// src/ThruAccountSwitcher.tsx
+var SvgLogomarkRed = (props) => /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 400 400", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_6077_1488)", children: [
+    /* @__PURE__ */ jsx("circle", { cx: 200.001, cy: 200, r: 200, fill: "#D33C43" }),
+    /* @__PURE__ */ jsx("path", { d: "M92.913 118.57C93.6389 118.015 98.9022 123.196 108.531 129.408C117.491 135.752 130.043 142.834 145.993 146.578C157.454 149.27 168.635 150.726 179.444 152.13C200.407 154.854 218.507 157.207 231.181 167.591C239.558 174.457 240.954 183.41 242.189 191.314C243.555 200.045 244.842 208.29 255.509 210.754C256.363 210.951 257.232 211.002 258.12 210.924C262.872 210.508 268.106 206.444 274.026 201.854C275.575 200.657 277.163 199.424 278.785 198.225C285.668 193.692 293.288 189.791 301.57 190.777C317.149 192.633 317.21 204.674 317.838 207.431L317.837 207.421C320.455 209.479 326.196 213.068 325.786 213.989C325.578 214.301 318.801 213.951 315.903 214.691C282.106 223.316 293.989 258.708 266.092 280.272C242.773 298.301 202.912 299.418 197.428 296.967C195.539 296.122 203.175 292.135 201.361 291.797C179.146 296.598 184.02 343.337 176.76 348.583C174.405 350.024 168.458 347.488 165.051 344.609C163.371 342.694 163.108 341.012 164.245 339.468C165.724 337.465 171.993 328.673 172.054 328.584C172.156 328.444 172.193 328.268 172.168 328.098C172.142 327.927 172.046 327.779 171.906 327.676C171.616 327.466 171.208 327.533 170.998 327.823L161.711 340.772C161.706 340.778 161.696 340.789 161.686 340.801C158.712 340.244 152.309 335.073 151.89 329.019C151.997 328.993 152.104 328.953 152.202 328.882L163.967 319.96C164.31 319.7 164.377 319.207 164.117 318.863C163.857 318.52 163.364 318.453 163.02 318.713L151.256 327.635C151.133 327.729 151.045 327.858 150.994 327.993C147.571 327.089 143.312 321.96 143.591 317.911C143.622 317.908 143.649 317.917 143.681 317.914C143.784 317.905 143.891 317.875 143.991 317.819L156.905 310.671C157.284 310.46 157.421 309.987 157.21 309.607C156.999 309.228 156.527 309.092 156.147 309.303L143.233 316.451C143.133 316.502 143.056 316.577 142.99 316.661C140.709 315.657 137.269 310.975 137.907 307.617C137.955 307.623 137.997 307.63 138.044 307.626C138.127 307.619 138.214 307.601 138.295 307.562L152.454 301.252C152.847 301.076 153.026 300.611 152.85 300.218C152.675 299.825 152.209 299.646 151.816 299.821L137.657 306.132C137.547 306.183 137.454 306.259 137.378 306.35C134.141 304.524 130.647 297.984 132.475 293.694C132.48 293.694 132.489 293.694 132.491 293.693C132.501 293.693 132.52 293.691 132.522 293.69L149.014 290.274C149.363 290.202 149.589 289.857 149.516 289.503C149.481 289.333 149.378 289.186 149.228 289.089C149.084 288.997 148.914 288.964 148.745 289C148.617 289.027 135.795 291.718 135.243 291.819C132.961 292.234 131.936 292.13 130.785 290.582C128.663 286.968 126.869 280.279 128.521 278.764C134.974 272.599 165.939 286.69 180.264 276.822C189.479 270.474 198.395 257.824 211.315 250.994C184.067 246.663 163.004 243.22 156.847 224.222C141.919 225.036 135.547 212.453 134.865 207.948C120.603 206.202 119.126 193.745 119.81 189.121C111.6 188.897 103.78 177.335 106.088 166.87C101.413 166.018 95.9124 155.183 98.2948 146.941C89.0608 140.637 90.2634 119.99 92.913 118.57ZM168.519 226.037C167.95 225.93 167.407 226.297 167.294 226.861C167.186 227.426 167.553 227.974 168.118 228.087L215.935 237.459C216.036 237.476 216.136 237.483 216.229 237.475C216.681 237.435 217.071 237.103 217.161 236.635C217.269 236.071 216.901 235.522 216.337 235.409L168.519 226.037ZM203.915 170.233C202.344 169.926 200.771 170.372 199.594 171.453C198.417 172.535 197.839 174.067 198.01 175.659C198.347 178.796 200.652 181.331 203.738 181.972L207.528 182.76C207.326 182.898 207.124 183.052 206.94 183.22C205.763 184.301 205.186 185.833 205.356 187.425C205.694 190.562 207.998 193.098 211.084 193.738L214.837 194.519C214.619 194.663 214.407 194.818 214.214 194.997C213.037 196.079 212.459 197.611 212.63 199.202C212.967 202.339 215.272 204.875 218.358 205.516L222.148 206.304C221.946 206.442 221.744 206.591 221.56 206.764C220.383 207.845 219.806 209.377 219.976 210.969C220.314 214.106 222.619 216.641 225.705 217.281L229.511 218.074C229.283 218.225 229.067 218.385 228.863 218.57C227.686 219.652 227.109 221.184 227.279 222.775C227.616 225.912 229.921 228.447 233.008 229.088L248.141 232.229C248.215 232.243 248.294 232.247 248.366 232.24C248.704 232.211 248.991 231.966 249.065 231.619L249.101 231.61C249.19 231.184 248.918 230.773 248.497 230.685L233.364 227.545C230.939 227.04 229.137 225.051 228.87 222.594C228.754 221.5 229.148 220.451 229.957 219.71C230.761 218.97 231.844 218.666 232.92 218.875L240.906 220.432C241.331 220.51 241.742 220.238 241.825 219.812C241.898 219.445 241.694 219.081 241.357 218.942C241.303 218.916 241.243 218.895 241.184 218.885L226.052 215.744C223.626 215.239 221.825 213.251 221.557 210.794C221.441 209.7 221.84 208.649 222.644 207.909C223.448 207.169 224.532 206.865 225.607 207.074L230.398 208.005L233.517 208.653C233.592 208.668 233.67 208.671 233.743 208.665C233.795 208.661 233.845 208.641 233.896 208.626C233.902 208.626 233.907 208.624 233.912 208.624C233.943 208.616 233.969 208.614 233.994 208.602C234.248 208.517 234.454 208.299 234.508 208.018C234.591 207.592 234.315 207.181 233.889 207.098L230.683 206.473L218.695 203.984C216.27 203.48 214.469 201.491 214.201 199.034C214.084 197.94 214.479 196.89 215.288 196.149C216.092 195.409 217.175 195.105 218.251 195.314L225.21 196.668L226.227 196.877C226.302 196.891 226.38 196.895 226.453 196.889C226.723 196.865 226.96 196.698 227.08 196.452C227.107 196.403 227.123 196.349 227.14 196.295C227.144 196.284 227.153 196.278 227.152 196.268V196.257C227.152 196.252 227.151 196.248 227.151 196.247C227.234 195.821 226.957 195.41 226.531 195.327L225.493 195.125L211.405 192.202C208.98 191.697 207.178 189.709 206.911 187.252C206.794 186.158 207.189 185.108 207.998 184.367C208.802 183.627 209.885 183.323 210.961 183.532L215.768 184.468L218.871 185.112C218.945 185.127 219.024 185.13 219.097 185.124C219.148 185.119 219.199 185.099 219.25 185.084C219.255 185.084 219.266 185.082 219.271 185.082C219.297 185.075 219.323 185.072 219.348 185.06C219.602 184.975 219.809 184.763 219.862 184.476C219.945 184.05 219.668 183.64 219.242 183.557L216.058 182.935L204.055 180.442C201.634 179.937 199.833 177.949 199.565 175.491C199.449 174.397 199.843 173.347 200.652 172.606C201.456 171.866 202.54 171.562 203.615 171.771L211.601 173.329C212.027 173.407 212.437 173.135 212.52 172.709C212.603 172.283 212.327 171.873 211.901 171.79L203.915 170.233ZM152.516 208.282C151.957 208.164 151.402 208.527 151.284 209.092C151.166 209.657 151.528 210.206 152.093 210.324L208.431 222.027C208.537 222.044 208.637 222.052 208.735 222.043C209.182 222.004 209.567 221.681 209.663 221.218C209.781 220.653 209.418 220.103 208.853 219.985L152.516 208.282ZM118.854 57C120.83 57.2144 121.048 63.7115 138.308 80.2256C164.308 105.108 227.725 121.332 245.062 145.904C258.456 164.882 248.989 192.334 263.681 206.707C260.822 208.37 258.24 209.25 255.98 208.726C246.681 206.577 245.608 199.7 244.25 190.995C242.961 182.724 241.497 173.348 232.505 165.98C219.374 155.218 200.994 152.827 179.714 150.062C168.957 148.664 157.83 147.219 146.47 144.55C142.409 143.597 138.574 142.42 134.962 141.093C129.218 135.676 128.148 125.727 130.803 121.852C126.479 119.984 117.694 109.778 122.171 102.389C118.128 100.868 114.629 89.1011 118.179 82.835C113.329 77.4133 116.114 59.0558 118.854 57ZM138.04 191.65C137.475 191.532 136.926 191.899 136.813 192.464C136.701 193.028 137.062 193.577 137.627 193.69L137.622 193.691L201.845 206.693C201.946 206.711 202.046 206.718 202.144 206.709C202.596 206.669 202.982 206.343 203.077 205.879C203.19 205.314 202.827 204.765 202.263 204.652L138.04 191.65ZM125.147 174.518C124.583 174.405 124.035 174.772 123.922 175.337C123.809 175.901 124.176 176.45 124.74 176.563L192.075 190.016C192.171 190.033 192.271 190.04 192.369 190.031C192.821 189.992 193.205 189.66 193.301 189.196C193.413 188.632 193.047 188.084 192.482 187.971L125.147 174.518ZM111.413 155.837C110.848 155.719 110.299 156.082 110.181 156.646C110.063 157.211 110.425 157.761 110.99 157.879L110.985 157.884L183.515 172.871C183.621 172.888 183.721 172.894 183.819 172.886C184.271 172.846 184.656 172.519 184.752 172.056C184.87 171.491 184.507 170.941 183.942 170.823L111.413 155.837ZM133.877 95.4932C133.376 95.2125 132.738 95.3937 132.457 95.8945V95.8896C132.177 96.3903 132.358 97.0279 132.858 97.3086L221.206 146.782C221.393 146.891 221.601 146.932 221.804 146.914C222.136 146.885 222.45 146.7 222.627 146.387C222.907 145.886 222.725 145.247 222.224 144.967L133.877 95.4932ZM138.349 110.708C137.843 110.433 137.21 110.619 136.935 111.125C136.66 111.63 136.846 112.263 137.351 112.538L198.85 145.965C199.037 146.064 199.239 146.103 199.436 146.086C199.774 146.056 200.092 145.861 200.263 145.543L200.264 145.548C200.538 145.042 200.352 144.41 199.847 144.135L138.349 110.708ZM141.64 124.996C141.139 124.715 140.5 124.897 140.22 125.397C139.939 125.898 140.12 126.537 140.621 126.817L170.728 143.668C170.916 143.777 171.124 143.817 171.326 143.799C171.658 143.77 171.972 143.58 172.148 143.267C172.429 142.766 172.247 142.127 171.746 141.847L141.64 124.996Z", fill: "#F9FBFB" })
+  ] }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_6077_1488", children: /* @__PURE__ */ jsx("rect", { width: 400, height: 400, fill: "white" }) }) })
+] });
+var logomark_red_default = SvgLogomarkRed;
+var containerStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  width: "auto",
+  position: "relative",
+  cursor: "pointer"
+};
+var dropdownStyle = {
+  position: "absolute",
+  top: "calc(100% + 8px)",
+  right: 0,
+  minWidth: 220,
+  backgroundColor: "#0f172a",
+  borderRadius: 0,
+  border: "1px solid rgba(148, 163, 184, 0.2)",
+  boxShadow: "0 20px 40px rgba(15, 23, 42, 0.45)",
+  padding: "8px 0"
+};
+var itemStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "10px 16px",
+  cursor: "pointer",
+  color: "#e2e8f0",
+  fontSize: 14
+};
+var iconWrapperStyle = {
+  width: 32,
+  height: 32,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "#"
+};
+function formatAddress(address) {
+  if (!address) return "Unknown";
+  if (address.length <= 8) return address;
+  return `${address.slice(0, 4)}...${address.slice(-4)}`;
+}
+function ThruAccountSwitcher() {
+  const { connect, isConnected, isConnecting, selectAccount } = useWallet();
+  const { accounts, selectedAccount } = useAccounts();
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  const hasAccounts = accounts.length > 0;
+  const displayLabel = useMemo(() => {
+    if (isConnecting) return "Connecting...";
+    if (!isConnected || !hasAccounts) return "Connect";
+    return formatAddress(selectedAccount?.address ?? accounts[0]?.address);
+  }, [isConnecting, isConnected, hasAccounts, selectedAccount, accounts]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleClickOutside = (event) => {
+      if (!containerRef.current) return;
+      if (!containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isConnected) {
+      setIsOpen(false);
+    }
+  }, [isConnected]);
+  const handleToggle = useCallback(async () => {
+    if (isConnecting) {
+      return;
+    }
+    if (!isConnected) {
+      try {
+        await connect();
+      } catch (error) {
+        console.error("[WalletLauncher] Failed to connect wallet:", error);
+      }
+      return;
+    }
+    setIsOpen((prev) => !prev);
+  }, [connect, isConnected, isConnecting]);
+  const handleSelectAccount = useCallback(
+    async (account) => {
+      try {
+        await selectAccount(account);
+      } catch (error) {
+        console.error("[ThruAccountSwitcher] Failed to select account:", error);
+      } finally {
+        setIsOpen(false);
+      }
+    },
+    [selectAccount]
+  );
+  const buttonStyle = useMemo(() => {
+    const connected = isConnected && hasAccounts;
+    return {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      gap: 12,
+      padding: "10px 16px",
+      borderRadius: 0,
+      backgroundColor: connected ? "#0f172a" : "#1f2937",
+      color: connected ? "#f8fafc" : "#9ca3af",
+      cursor: isConnecting ? "wait" : "pointer",
+      userSelect: "none",
+      minWidth: 220,
+      border: isOpen ? "1px solid #3b82f6" : "1px solid rgba(148, 163, 184, 0.2)",
+      boxShadow: "0 12px 30px rgba(15, 23, 42, 0.35)",
+      transition: "border 120ms ease, box-shadow 120ms ease, background-color 120ms ease",
+      opacity: connected ? 1 : 0.85
+    };
+  }, [hasAccounts, isConnected, isConnecting, isOpen]);
+  const caretStyle = useMemo(
+    () => ({
+      marginLeft: "auto",
+      transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 120ms ease",
+      color: isConnected && hasAccounts ? "#f8fafc" : "#9ca3af",
+      fontSize: 12
+    }),
+    [hasAccounts, isConnected, isOpen]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: containerStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: buttonStyle, onClick: handleToggle, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [
+      /* @__PURE__ */ jsx("span", { style: iconWrapperStyle, children: /* @__PURE__ */ jsx(logomark_red_default, { width: "100%", height: "100%" }) }),
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: displayLabel }),
+      /* @__PURE__ */ jsx("span", { style: caretStyle, children: "\u25BC" })
+    ] }),
+    isOpen && isConnected && hasAccounts ? /* @__PURE__ */ jsx("div", { style: dropdownStyle, role: "listbox", children: accounts.map((account) => {
+      const isSelected = selectedAccount?.address === account.address && selectedAccount?.accountType === account.accountType;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "option",
+          "aria-selected": isSelected,
+          style: {
+            ...itemStyle,
+            backgroundColor: isSelected ? "rgba(59, 130, 246, 0.15)" : "transparent",
+            color: isSelected ? "#f8fafc" : "#e2e8f0"
+          },
+          onClick: () => handleSelectAccount(account),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { ...iconWrapperStyle, width: 28, height: 28 }, children: /* @__PURE__ */ jsx(logomark_red_default, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace" }, children: formatAddress(account.address) })
+          ]
+        },
+        `${account.accountType}:${account.address}`
+      );
+    }) }) : null
+  ] });
+}
+
+export { ThruAccountSwitcher };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../static/logomark_red.svg","../src/ThruAccountSwitcher.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nconst SvgLogomarkRed = props => <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 400 400\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}><g clipPath=\"url(#clip0_6077_1488)\"><circle cx={200.001} cy={200} r={200} fill=\"#D33C43\" /><path d=\"M92.913 118.57C93.6389 118.015 98.9022 123.196 108.531 129.408C117.491 135.752 130.043 142.834 145.993 146.578C157.454 149.27 168.635 150.726 179.444 152.13C200.407 154.854 218.507 157.207 231.181 167.591C239.558 174.457 240.954 183.41 242.189 191.314C243.555 200.045 244.842 208.29 255.509 210.754C256.363 210.951 257.232 211.002 258.12 210.924C262.872 210.508 268.106 206.444 274.026 201.854C275.575 200.657 277.163 199.424 278.785 198.225C285.668 193.692 293.288 189.791 301.57 190.777C317.149 192.633 317.21 204.674 317.838 207.431L317.837 207.421C320.455 209.479 326.196 213.068 325.786 213.989C325.578 214.301 318.801 213.951 315.903 214.691C282.106 223.316 293.989 258.708 266.092 280.272C242.773 298.301 202.912 299.418 197.428 296.967C195.539 296.122 203.175 292.135 201.361 291.797C179.146 296.598 184.02 343.337 176.76 348.583C174.405 350.024 168.458 347.488 165.051 344.609C163.371 342.694 163.108 341.012 164.245 339.468C165.724 337.465 171.993 328.673 172.054 328.584C172.156 328.444 172.193 328.268 172.168 328.098C172.142 327.927 172.046 327.779 171.906 327.676C171.616 327.466 171.208 327.533 170.998 327.823L161.711 340.772C161.706 340.778 161.696 340.789 161.686 340.801C158.712 340.244 152.309 335.073 151.89 329.019C151.997 328.993 152.104 328.953 152.202 328.882L163.967 319.96C164.31 319.7 164.377 319.207 164.117 318.863C163.857 318.52 163.364 318.453 163.02 318.713L151.256 327.635C151.133 327.729 151.045 327.858 150.994 327.993C147.571 327.089 143.312 321.96 143.591 317.911C143.622 317.908 143.649 317.917 143.681 317.914C143.784 317.905 143.891 317.875 143.991 317.819L156.905 310.671C157.284 310.46 157.421 309.987 157.21 309.607C156.999 309.228 156.527 309.092 156.147 309.303L143.233 316.451C143.133 316.502 143.056 316.577 142.99 316.661C140.709 315.657 137.269 310.975 137.907 307.617C137.955 307.623 137.997 307.63 138.044 307.626C138.127 307.619 138.214 307.601 138.295 307.562L152.454 301.252C152.847 301.076 153.026 300.611 152.85 300.218C152.675 299.825 152.209 299.646 151.816 299.821L137.657 306.132C137.547 306.183 137.454 306.259 137.378 306.35C134.141 304.524 130.647 297.984 132.475 293.694C132.48 293.694 132.489 293.694 132.491 293.693C132.501 293.693 132.52 293.691 132.522 293.69L149.014 290.274C149.363 290.202 149.589 289.857 149.516 289.503C149.481 289.333 149.378 289.186 149.228 289.089C149.084 288.997 148.914 288.964 148.745 289C148.617 289.027 135.795 291.718 135.243 291.819C132.961 292.234 131.936 292.13 130.785 290.582C128.663 286.968 126.869 280.279 128.521 278.764C134.974 272.599 165.939 286.69 180.264 276.822C189.479 270.474 198.395 257.824 211.315 250.994C184.067 246.663 163.004 243.22 156.847 224.222C141.919 225.036 135.547 212.453 134.865 207.948C120.603 206.202 119.126 193.745 119.81 189.121C111.6 188.897 103.78 177.335 106.088 166.87C101.413 166.018 95.9124 155.183 98.2948 146.941C89.0608 140.637 90.2634 119.99 92.913 118.57ZM168.519 226.037C167.95 225.93 167.407 226.297 167.294 226.861C167.186 227.426 167.553 227.974 168.118 228.087L215.935 237.459C216.036 237.476 216.136 237.483 216.229 237.475C216.681 237.435 217.071 237.103 217.161 236.635C217.269 236.071 216.901 235.522 216.337 235.409L168.519 226.037ZM203.915 170.233C202.344 169.926 200.771 170.372 199.594 171.453C198.417 172.535 197.839 174.067 198.01 175.659C198.347 178.796 200.652 181.331 203.738 181.972L207.528 182.76C207.326 182.898 207.124 183.052 206.94 183.22C205.763 184.301 205.186 185.833 205.356 187.425C205.694 190.562 207.998 193.098 211.084 193.738L214.837 194.519C214.619 194.663 214.407 194.818 214.214 194.997C213.037 196.079 212.459 197.611 212.63 199.202C212.967 202.339 215.272 204.875 218.358 205.516L222.148 206.304C221.946 206.442 221.744 206.591 221.56 206.764C220.383 207.845 219.806 209.377 219.976 210.969C220.314 214.106 222.619 216.641 225.705 217.281L229.511 218.074C229.283 218.225 229.067 218.385 228.863 218.57C227.686 219.652 227.109 221.184 227.279 222.775C227.616 225.912 229.921 228.447 233.008 229.088L248.141 232.229C248.215 232.243 248.294 232.247 248.366 232.24C248.704 232.211 248.991 231.966 249.065 231.619L249.101 231.61C249.19 231.184 248.918 230.773 248.497 230.685L233.364 227.545C230.939 227.04 229.137 225.051 228.87 222.594C228.754 221.5 229.148 220.451 229.957 219.71C230.761 218.97 231.844 218.666 232.92 218.875L240.906 220.432C241.331 220.51 241.742 220.238 241.825 219.812C241.898 219.445 241.694 219.081 241.357 218.942C241.303 218.916 241.243 218.895 241.184 218.885L226.052 215.744C223.626 215.239 221.825 213.251 221.557 210.794C221.441 209.7 221.84 208.649 222.644 207.909C223.448 207.169 224.532 206.865 225.607 207.074L230.398 208.005L233.517 208.653C233.592 208.668 233.67 208.671 233.743 208.665C233.795 208.661 233.845 208.641 233.896 208.626C233.902 208.626 233.907 208.624 233.912 208.624C233.943 208.616 233.969 208.614 233.994 208.602C234.248 208.517 234.454 208.299 234.508 208.018C234.591 207.592 234.315 207.181 233.889 207.098L230.683 206.473L218.695 203.984C216.27 203.48 214.469 201.491 214.201 199.034C214.084 197.94 214.479 196.89 215.288 196.149C216.092 195.409 217.175 195.105 218.251 195.314L225.21 196.668L226.227 196.877C226.302 196.891 226.38 196.895 226.453 196.889C226.723 196.865 226.96 196.698 227.08 196.452C227.107 196.403 227.123 196.349 227.14 196.295C227.144 196.284 227.153 196.278 227.152 196.268V196.257C227.152 196.252 227.151 196.248 227.151 196.247C227.234 195.821 226.957 195.41 226.531 195.327L225.493 195.125L211.405 192.202C208.98 191.697 207.178 189.709 206.911 187.252C206.794 186.158 207.189 185.108 207.998 184.367C208.802 183.627 209.885 183.323 210.961 183.532L215.768 184.468L218.871 185.112C218.945 185.127 219.024 185.13 219.097 185.124C219.148 185.119 219.199 185.099 219.25 185.084C219.255 185.084 219.266 185.082 219.271 185.082C219.297 185.075 219.323 185.072 219.348 185.06C219.602 184.975 219.809 184.763 219.862 184.476C219.945 184.05 219.668 183.64 219.242 183.557L216.058 182.935L204.055 180.442C201.634 179.937 199.833 177.949 199.565 175.491C199.449 174.397 199.843 173.347 200.652 172.606C201.456 171.866 202.54 171.562 203.615 171.771L211.601 173.329C212.027 173.407 212.437 173.135 212.52 172.709C212.603 172.283 212.327 171.873 211.901 171.79L203.915 170.233ZM152.516 208.282C151.957 208.164 151.402 208.527 151.284 209.092C151.166 209.657 151.528 210.206 152.093 210.324L208.431 222.027C208.537 222.044 208.637 222.052 208.735 222.043C209.182 222.004 209.567 221.681 209.663 221.218C209.781 220.653 209.418 220.103 208.853 219.985L152.516 208.282ZM118.854 57C120.83 57.2144 121.048 63.7115 138.308 80.2256C164.308 105.108 227.725 121.332 245.062 145.904C258.456 164.882 248.989 192.334 263.681 206.707C260.822 208.37 258.24 209.25 255.98 208.726C246.681 206.577 245.608 199.7 244.25 190.995C242.961 182.724 241.497 173.348 232.505 165.98C219.374 155.218 200.994 152.827 179.714 150.062C168.957 148.664 157.83 147.219 146.47 144.55C142.409 143.597 138.574 142.42 134.962 141.093C129.218 135.676 128.148 125.727 130.803 121.852C126.479 119.984 117.694 109.778 122.171 102.389C118.128 100.868 114.629 89.1011 118.179 82.835C113.329 77.4133 116.114 59.0558 118.854 57ZM138.04 191.65C137.475 191.532 136.926 191.899 136.813 192.464C136.701 193.028 137.062 193.577 137.627 193.69L137.622 193.691L201.845 206.693C201.946 206.711 202.046 206.718 202.144 206.709C202.596 206.669 202.982 206.343 203.077 205.879C203.19 205.314 202.827 204.765 202.263 204.652L138.04 191.65ZM125.147 174.518C124.583 174.405 124.035 174.772 123.922 175.337C123.809 175.901 124.176 176.45 124.74 176.563L192.075 190.016C192.171 190.033 192.271 190.04 192.369 190.031C192.821 189.992 193.205 189.66 193.301 189.196C193.413 188.632 193.047 188.084 192.482 187.971L125.147 174.518ZM111.413 155.837C110.848 155.719 110.299 156.082 110.181 156.646C110.063 157.211 110.425 157.761 110.99 157.879L110.985 157.884L183.515 172.871C183.621 172.888 183.721 172.894 183.819 172.886C184.271 172.846 184.656 172.519 184.752 172.056C184.87 171.491 184.507 170.941 183.942 170.823L111.413 155.837ZM133.877 95.4932C133.376 95.2125 132.738 95.3937 132.457 95.8945V95.8896C132.177 96.3903 132.358 97.0279 132.858 97.3086L221.206 146.782C221.393 146.891 221.601 146.932 221.804 146.914C222.136 146.885 222.45 146.7 222.627 146.387C222.907 145.886 222.725 145.247 222.224 144.967L133.877 95.4932ZM138.349 110.708C137.843 110.433 137.21 110.619 136.935 111.125C136.66 111.63 136.846 112.263 137.351 112.538L198.85 145.965C199.037 146.064 199.239 146.103 199.436 146.086C199.774 146.056 200.092 145.861 200.263 145.543L200.264 145.548C200.538 145.042 200.352 144.41 199.847 144.135L138.349 110.708ZM141.64 124.996C141.139 124.715 140.5 124.897 140.22 125.397C139.939 125.898 140.12 126.537 140.621 126.817L170.728 143.668C170.916 143.777 171.124 143.817 171.326 143.799C171.658 143.77 171.972 143.58 172.148 143.267C172.429 142.766 172.247 142.127 171.746 141.847L141.64 124.996Z\" fill=\"#F9FBFB\" /></g><defs><clipPath id=\"clip0_6077_1488\"><rect width={400} height={400} fill=\"white\" /></clipPath></defs></svg>;\nexport default SvgLogomarkRed;","'use client';\n\nimport { useAccounts, useWallet } from '@thru/react-sdk';\nimport type { CSSProperties } from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport Logo from '../static/logomark_red.svg';\n\nconst containerStyle: CSSProperties = {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    width: 'auto',\n    position: 'relative',\n    cursor: 'pointer'\n};\n\nconst dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: 'calc(100% + 8px)',\n    right: 0,\n    minWidth: 220,\n    backgroundColor: '#0f172a',\n    borderRadius: 0,\n    border: '1px solid rgba(148, 163, 184, 0.2)',\n    boxShadow: '0 20px 40px rgba(15, 23, 42, 0.45)',\n    padding: '8px 0',\n};\n\nconst itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 12,\n    padding: '10px 16px',\n    cursor: 'pointer',\n    color: '#e2e8f0',\n    fontSize: 14,\n};\n\nconst iconWrapperStyle: CSSProperties = {\n    width: 32,\n    height: 32,\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '#'\n};\n\nfunction formatAddress(address: string | undefined): string {\n    if (!address) return 'Unknown';\n    if (address.length <= 8) return address;\n    return `${address.slice(0, 4)}...${address.slice(-4)}`;\n}\n\nexport function ThruAccountSwitcher() {\n    const { connect, isConnected, isConnecting, selectAccount } = useWallet();\n    const { accounts, selectedAccount } = useAccounts();\n    const [isOpen, setIsOpen] = useState(false);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const hasAccounts = accounts.length > 0;\n    const displayLabel = useMemo(() => {\n        if (isConnecting) return 'Connecting...';\n        if (!isConnected || !hasAccounts) return 'Connect';\n        return formatAddress(selectedAccount?.address ?? accounts[0]?.address);\n    }, [isConnecting, isConnected, hasAccounts, selectedAccount, accounts]);\n\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (!containerRef.current) return;\n            if (!containerRef.current.contains(event.target as Node)) {\n                setIsOpen(false);\n            }\n        };\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => document.removeEventListener('mousedown', handleClickOutside);\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (!isConnected) {\n            setIsOpen(false);\n        }\n    }, [isConnected]);\n\n    const handleToggle = useCallback(async () => {\n        if (isConnecting) {\n            return;\n        }\n\n        if (!isConnected) {\n            try {\n                await connect();\n            } catch (error) {\n                console.error('[WalletLauncher] Failed to connect wallet:', error);\n            }\n            return;\n        }\n\n        setIsOpen((prev) => !prev);\n    }, [connect, isConnected, isConnecting]);\n\n    const handleSelectAccount = useCallback(\n        async (account: (typeof accounts)[number]) => {\n            try {\n                await selectAccount(account);\n            } catch (error) {\n                console.error('[ThruAccountSwitcher] Failed to select account:', error);\n            } finally {\n                setIsOpen(false);\n            }\n        },\n        [selectAccount]\n    );\n\n    const buttonStyle: CSSProperties = useMemo(() => {\n        const connected = isConnected && hasAccounts;\n        return {\n            position: 'relative',\n            display: 'flex',\n            alignItems: 'center',\n            gap: 12,\n            padding: '10px 16px',\n            borderRadius: 0,\n            backgroundColor: connected ? '#0f172a' : '#1f2937',\n            color: connected ? '#f8fafc' : '#9ca3af',\n            cursor: isConnecting ? 'wait' : 'pointer',\n            userSelect: 'none',\n            minWidth: 220,\n            border: isOpen ? '1px solid #3b82f6' : '1px solid rgba(148, 163, 184, 0.2)',\n            boxShadow: '0 12px 30px rgba(15, 23, 42, 0.35)',\n            transition: 'border 120ms ease, box-shadow 120ms ease, background-color 120ms ease',\n            opacity: connected ? 1 : 0.85,\n        } satisfies CSSProperties;\n    }, [hasAccounts, isConnected, isConnecting, isOpen]);\n\n    const caretStyle: CSSProperties = useMemo(\n        () => ({\n            marginLeft: 'auto',\n            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n            transition: 'transform 120ms ease',\n            color: isConnected && hasAccounts ? '#f8fafc' : '#9ca3af',\n            fontSize: 12,\n        }),\n        [hasAccounts, isConnected, isOpen]\n    );\n\n    return (\n        <div ref={containerRef} style={containerStyle}>\n            <div style={buttonStyle} onClick={handleToggle} role=\"button\" aria-haspopup=\"listbox\" aria-expanded={isOpen}>\n                <span style={iconWrapperStyle}>\n                    <Logo width={'100%'} height={'100%'} />\n                </span>\n                <span style={{ fontWeight: 600 }}>{displayLabel}</span>\n                <span style={caretStyle}>▼</span>\n            </div>\n            {isOpen && isConnected && hasAccounts ? (\n                <div style={dropdownStyle} role=\"listbox\">\n                    {accounts.map((account) => {\n                        const isSelected =\n                            selectedAccount?.address === account.address && selectedAccount?.accountType === account.accountType;\n                        return (\n                            <div\n                                key={`${account.accountType}:${account.address}`}\n                                role=\"option\"\n                                aria-selected={isSelected}\n                                style={{\n                                    ...itemStyle,\n                                    backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'transparent',\n                                    color: isSelected ? '#f8fafc' : '#e2e8f0',\n                                }}\n                                onClick={() => handleSelectAccount(account)}\n                            >\n                                <span style={{ ...iconWrapperStyle, width: 28, height: 28 }}>\n                                    <Logo width={16} height={16} />\n                                </span>\n                                <span style={{ fontFamily: 'monospace' }}>{formatAddress(account.address)}</span>\n                            </div>\n                        );\n                    })}\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thru/react-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -10,6 +10,19 @@
       "types": "./dist/index.d.ts"
     }
   },
+  "dependencies": {
+    "@thru/react-sdk": "0.0.6"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "esbuild-plugin-svgr": "^3.1.1"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",

package/src/ThruAccountSwitcher.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useAccounts, useWallet } from '@thru/react-sdk';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Logo from '../static/logomark_red.svg';
+
+const containerStyle: CSSProperties = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    width: 'auto',
+    position: 'relative',
+    cursor: 'pointer'
+};
+
+const dropdownStyle: CSSProperties = {
+    position: 'absolute',
+    top: 'calc(100% + 8px)',
+    right: 0,
+    minWidth: 220,
+    backgroundColor: '#0f172a',
+    borderRadius: 0,
+    border: '1px solid rgba(148, 163, 184, 0.2)',
+    boxShadow: '0 20px 40px rgba(15, 23, 42, 0.45)',
+    padding: '8px 0',
+};
+
+const itemStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    padding: '10px 16px',
+    cursor: 'pointer',
+    color: '#e2e8f0',
+    fontSize: 14,
+};
+
+const iconWrapperStyle: CSSProperties = {
+    width: 32,
+    height: 32,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#'
+};
+
+function formatAddress(address: string | undefined): string {
+    if (!address) return 'Unknown';
+    if (address.length <= 8) return address;
+    return `${address.slice(0, 4)}...${address.slice(-4)}`;
+}
+
+export function ThruAccountSwitcher() {
+    const { connect, isConnected, isConnecting, selectAccount } = useWallet();
+    const { accounts, selectedAccount } = useAccounts();
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const hasAccounts = accounts.length > 0;
+    const displayLabel = useMemo(() => {
+        if (isConnecting) return 'Connecting...';
+        if (!isConnected || !hasAccounts) return 'Connect';
+        return formatAddress(selectedAccount?.address ?? accounts[0]?.address);
+    }, [isConnecting, isConnected, hasAccounts, selectedAccount, accounts]);
+
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (!containerRef.current) return;
+            if (!containerRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isConnected) {
+            setIsOpen(false);
+        }
+    }, [isConnected]);
+
+    const handleToggle = useCallback(async () => {
+        if (isConnecting) {
+            return;
+        }
+
+        if (!isConnected) {
+            try {
+                await connect();
+            } catch (error) {
+                console.error('[WalletLauncher] Failed to connect wallet:', error);
+            }
+            return;
+        }
+
+        setIsOpen((prev) => !prev);
+    }, [connect, isConnected, isConnecting]);
+
+    const handleSelectAccount = useCallback(
+        async (account: (typeof accounts)[number]) => {
+            try {
+                await selectAccount(account);
+            } catch (error) {
+                console.error('[ThruAccountSwitcher] Failed to select account:', error);
+            } finally {
+                setIsOpen(false);
+            }
+        },
+        [selectAccount]
+    );
+
+    const buttonStyle: CSSProperties = useMemo(() => {
+        const connected = isConnected && hasAccounts;
+        return {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: '10px 16px',
+            borderRadius: 0,
+            backgroundColor: connected ? '#0f172a' : '#1f2937',
+            color: connected ? '#f8fafc' : '#9ca3af',
+            cursor: isConnecting ? 'wait' : 'pointer',
+            userSelect: 'none',
+            minWidth: 220,
+            border: isOpen ? '1px solid #3b82f6' : '1px solid rgba(148, 163, 184, 0.2)',
+            boxShadow: '0 12px 30px rgba(15, 23, 42, 0.35)',
+            transition: 'border 120ms ease, box-shadow 120ms ease, background-color 120ms ease',
+            opacity: connected ? 1 : 0.85,
+        } satisfies CSSProperties;
+    }, [hasAccounts, isConnected, isConnecting, isOpen]);
+
+    const caretStyle: CSSProperties = useMemo(
+        () => ({
+            marginLeft: 'auto',
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 120ms ease',
+            color: isConnected && hasAccounts ? '#f8fafc' : '#9ca3af',
+            fontSize: 12,
+        }),
+        [hasAccounts, isConnected, isOpen]
+    );
+
+    return (
+        <div ref={containerRef} style={containerStyle}>
+            <div style={buttonStyle} onClick={handleToggle} role="button" aria-haspopup="listbox" aria-expanded={isOpen}>
+                <span style={iconWrapperStyle}>
+                    <Logo width={'100%'} height={'100%'} />
+                </span>
+                <span style={{ fontWeight: 600 }}>{displayLabel}</span>
+                <span style={caretStyle}>▼</span>
+            </div>
+            {isOpen && isConnected && hasAccounts ? (
+                <div style={dropdownStyle} role="listbox">
+                    {accounts.map((account) => {
+                        const isSelected =
+                            selectedAccount?.address === account.address && selectedAccount?.accountType === account.accountType;
+                        return (
+                            <div
+                                key={`${account.accountType}:${account.address}`}
+                                role="option"
+                                aria-selected={isSelected}
+                                style={{
+                                    ...itemStyle,
+                                    backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'transparent',
+                                    color: isSelected ? '#f8fafc' : '#e2e8f0',
+                                }}
+                                onClick={() => handleSelectAccount(account)}
+                            >
+                                <span style={{ ...iconWrapperStyle, width: 28, height: 28 }}>
+                                    <Logo width={16} height={16} />
+                                </span>
+                                <span style={{ fontFamily: 'monospace' }}>{formatAddress(account.address)}</span>
+                            </div>
+                        );
+                    })}
+                </div>
+            ) : null}
+        </div>
+    );
+}

package/src/custom.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+    import * as React from 'react';
+
+    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+
+    const Component: React.FC<React.SVGProps<SVGSVGElement>>;
+    export default Component;
+}

package/src/index.ts

@@ -1 +1 @@
-export {};
+export { ThruAccountSwitcher } from './ThruAccountSwitcher';

package/static/logomark_red.svg

@@ -0,0 +1,11 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6077_1488)">
+<circle cx="200.001" cy="200" r="200" fill="#D33C43"/>
+<path d="M92.913 118.57C93.6389 118.015 98.9022 123.196 108.531 129.408C117.491 135.752 130.043 142.834 145.993 146.578C157.454 149.27 168.635 150.726 179.444 152.13C200.407 154.854 218.507 157.207 231.181 167.591C239.558 174.457 240.954 183.41 242.189 191.314C243.555 200.045 244.842 208.29 255.509 210.754C256.363 210.951 257.232 211.002 258.12 210.924C262.872 210.508 268.106 206.444 274.026 201.854C275.575 200.657 277.163 199.424 278.785 198.225C285.668 193.692 293.288 189.791 301.57 190.777C317.149 192.633 317.21 204.674 317.838 207.431L317.837 207.421C320.455 209.479 326.196 213.068 325.786 213.989C325.578 214.301 318.801 213.951 315.903 214.691C282.106 223.316 293.989 258.708 266.092 280.272C242.773 298.301 202.912 299.418 197.428 296.967C195.539 296.122 203.175 292.135 201.361 291.797C179.146 296.598 184.02 343.337 176.76 348.583C174.405 350.024 168.458 347.488 165.051 344.609C163.371 342.694 163.108 341.012 164.245 339.468C165.724 337.465 171.993 328.673 172.054 328.584C172.156 328.444 172.193 328.268 172.168 328.098C172.142 327.927 172.046 327.779 171.906 327.676C171.616 327.466 171.208 327.533 170.998 327.823L161.711 340.772C161.706 340.778 161.696 340.789 161.686 340.801C158.712 340.244 152.309 335.073 151.89 329.019C151.997 328.993 152.104 328.953 152.202 328.882L163.967 319.96C164.31 319.7 164.377 319.207 164.117 318.863C163.857 318.52 163.364 318.453 163.02 318.713L151.256 327.635C151.133 327.729 151.045 327.858 150.994 327.993C147.571 327.089 143.312 321.96 143.591 317.911C143.622 317.908 143.649 317.917 143.681 317.914C143.784 317.905 143.891 317.875 143.991 317.819L156.905 310.671C157.284 310.46 157.421 309.987 157.21 309.607C156.999 309.228 156.527 309.092 156.147 309.303L143.233 316.451C143.133 316.502 143.056 316.577 142.99 316.661C140.709 315.657 137.269 310.975 137.907 307.617C137.955 307.623 137.997 307.63 138.044 307.626C138.127 307.619 138.214 307.601 138.295 307.562L152.454 301.252C152.847 301.076 153.026 300.611 152.85 300.218C152.675 299.825 152.209 299.646 151.816 299.821L137.657 306.132C137.547 306.183 137.454 306.259 137.378 306.35C134.141 304.524 130.647 297.984 132.475 293.694C132.48 293.694 132.489 293.694 132.491 293.693C132.501 293.693 132.52 293.691 132.522 293.69L149.014 290.274C149.363 290.202 149.589 289.857 149.516 289.503C149.481 289.333 149.378 289.186 149.228 289.089C149.084 288.997 148.914 288.964 148.745 289C148.617 289.027 135.795 291.718 135.243 291.819C132.961 292.234 131.936 292.13 130.785 290.582C128.663 286.968 126.869 280.279 128.521 278.764C134.974 272.599 165.939 286.69 180.264 276.822C189.479 270.474 198.395 257.824 211.315 250.994C184.067 246.663 163.004 243.22 156.847 224.222C141.919 225.036 135.547 212.453 134.865 207.948C120.603 206.202 119.126 193.745 119.81 189.121C111.6 188.897 103.78 177.335 106.088 166.87C101.413 166.018 95.9124 155.183 98.2948 146.941C89.0608 140.637 90.2634 119.99 92.913 118.57ZM168.519 226.037C167.95 225.93 167.407 226.297 167.294 226.861C167.186 227.426 167.553 227.974 168.118 228.087L215.935 237.459C216.036 237.476 216.136 237.483 216.229 237.475C216.681 237.435 217.071 237.103 217.161 236.635C217.269 236.071 216.901 235.522 216.337 235.409L168.519 226.037ZM203.915 170.233C202.344 169.926 200.771 170.372 199.594 171.453C198.417 172.535 197.839 174.067 198.01 175.659C198.347 178.796 200.652 181.331 203.738 181.972L207.528 182.76C207.326 182.898 207.124 183.052 206.94 183.22C205.763 184.301 205.186 185.833 205.356 187.425C205.694 190.562 207.998 193.098 211.084 193.738L214.837 194.519C214.619 194.663 214.407 194.818 214.214 194.997C213.037 196.079 212.459 197.611 212.63 199.202C212.967 202.339 215.272 204.875 218.358 205.516L222.148 206.304C221.946 206.442 221.744 206.591 221.56 206.764C220.383 207.845 219.806 209.377 219.976 210.969C220.314 214.106 222.619 216.641 225.705 217.281L229.511 218.074C229.283 218.225 229.067 218.385 228.863 218.57C227.686 219.652 227.109 221.184 227.279 222.775C227.616 225.912 229.921 228.447 233.008 229.088L248.141 232.229C248.215 232.243 248.294 232.247 248.366 232.24C248.704 232.211 248.991 231.966 249.065 231.619L249.101 231.61C249.19 231.184 248.918 230.773 248.497 230.685L233.364 227.545C230.939 227.04 229.137 225.051 228.87 222.594C228.754 221.5 229.148 220.451 229.957 219.71C230.761 218.97 231.844 218.666 232.92 218.875L240.906 220.432C241.331 220.51 241.742 220.238 241.825 219.812C241.898 219.445 241.694 219.081 241.357 218.942C241.303 218.916 241.243 218.895 241.184 218.885L226.052 215.744C223.626 215.239 221.825 213.251 221.557 210.794C221.441 209.7 221.84 208.649 222.644 207.909C223.448 207.169 224.532 206.865 225.607 207.074L230.398 208.005L233.517 208.653C233.592 208.668 233.67 208.671 233.743 208.665C233.795 208.661 233.845 208.641 233.896 208.626C233.902 208.626 233.907 208.624 233.912 208.624C233.943 208.616 233.969 208.614 233.994 208.602C234.248 208.517 234.454 208.299 234.508 208.018C234.591 207.592 234.315 207.181 233.889 207.098L230.683 206.473L218.695 203.984C216.27 203.48 214.469 201.491 214.201 199.034C214.084 197.94 214.479 196.89 215.288 196.149C216.092 195.409 217.175 195.105 218.251 195.314L225.21 196.668L226.227 196.877C226.302 196.891 226.38 196.895 226.453 196.889C226.723 196.865 226.96 196.698 227.08 196.452C227.107 196.403 227.123 196.349 227.14 196.295C227.144 196.284 227.153 196.278 227.152 196.268V196.257C227.152 196.252 227.151 196.248 227.151 196.247C227.234 195.821 226.957 195.41 226.531 195.327L225.493 195.125L211.405 192.202C208.98 191.697 207.178 189.709 206.911 187.252C206.794 186.158 207.189 185.108 207.998 184.367C208.802 183.627 209.885 183.323 210.961 183.532L215.768 184.468L218.871 185.112C218.945 185.127 219.024 185.13 219.097 185.124C219.148 185.119 219.199 185.099 219.25 185.084C219.255 185.084 219.266 185.082 219.271 185.082C219.297 185.075 219.323 185.072 219.348 185.06C219.602 184.975 219.809 184.763 219.862 184.476C219.945 184.05 219.668 183.64 219.242 183.557L216.058 182.935L204.055 180.442C201.634 179.937 199.833 177.949 199.565 175.491C199.449 174.397 199.843 173.347 200.652 172.606C201.456 171.866 202.54 171.562 203.615 171.771L211.601 173.329C212.027 173.407 212.437 173.135 212.52 172.709C212.603 172.283 212.327 171.873 211.901 171.79L203.915 170.233ZM152.516 208.282C151.957 208.164 151.402 208.527 151.284 209.092C151.166 209.657 151.528 210.206 152.093 210.324L208.431 222.027C208.537 222.044 208.637 222.052 208.735 222.043C209.182 222.004 209.567 221.681 209.663 221.218C209.781 220.653 209.418 220.103 208.853 219.985L152.516 208.282ZM118.854 57C120.83 57.2144 121.048 63.7115 138.308 80.2256C164.308 105.108 227.725 121.332 245.062 145.904C258.456 164.882 248.989 192.334 263.681 206.707C260.822 208.37 258.24 209.25 255.98 208.726C246.681 206.577 245.608 199.7 244.25 190.995C242.961 182.724 241.497 173.348 232.505 165.98C219.374 155.218 200.994 152.827 179.714 150.062C168.957 148.664 157.83 147.219 146.47 144.55C142.409 143.597 138.574 142.42 134.962 141.093C129.218 135.676 128.148 125.727 130.803 121.852C126.479 119.984 117.694 109.778 122.171 102.389C118.128 100.868 114.629 89.1011 118.179 82.835C113.329 77.4133 116.114 59.0558 118.854 57ZM138.04 191.65C137.475 191.532 136.926 191.899 136.813 192.464C136.701 193.028 137.062 193.577 137.627 193.69L137.622 193.691L201.845 206.693C201.946 206.711 202.046 206.718 202.144 206.709C202.596 206.669 202.982 206.343 203.077 205.879C203.19 205.314 202.827 204.765 202.263 204.652L138.04 191.65ZM125.147 174.518C124.583 174.405 124.035 174.772 123.922 175.337C123.809 175.901 124.176 176.45 124.74 176.563L192.075 190.016C192.171 190.033 192.271 190.04 192.369 190.031C192.821 189.992 193.205 189.66 193.301 189.196C193.413 188.632 193.047 188.084 192.482 187.971L125.147 174.518ZM111.413 155.837C110.848 155.719 110.299 156.082 110.181 156.646C110.063 157.211 110.425 157.761 110.99 157.879L110.985 157.884L183.515 172.871C183.621 172.888 183.721 172.894 183.819 172.886C184.271 172.846 184.656 172.519 184.752 172.056C184.87 171.491 184.507 170.941 183.942 170.823L111.413 155.837ZM133.877 95.4932C133.376 95.2125 132.738 95.3937 132.457 95.8945V95.8896C132.177 96.3903 132.358 97.0279 132.858 97.3086L221.206 146.782C221.393 146.891 221.601 146.932 221.804 146.914C222.136 146.885 222.45 146.7 222.627 146.387C222.907 145.886 222.725 145.247 222.224 144.967L133.877 95.4932ZM138.349 110.708C137.843 110.433 137.21 110.619 136.935 111.125C136.66 111.63 136.846 112.263 137.351 112.538L198.85 145.965C199.037 146.064 199.239 146.103 199.436 146.086C199.774 146.056 200.092 145.861 200.263 145.543L200.264 145.548C200.538 145.042 200.352 144.41 199.847 144.135L138.349 110.708ZM141.64 124.996C141.139 124.715 140.5 124.897 140.22 125.397C139.939 125.898 140.12 126.537 140.621 126.817L170.728 143.668C170.916 143.777 171.124 143.817 171.326 143.799C171.658 143.77 171.972 143.58 172.148 143.267C172.429 142.766 172.247 142.127 171.746 141.847L141.64 124.996Z" fill="#F9FBFB"/>
+</g>
+<defs>
+<clipPath id="clip0_6077_1488">
+<rect width="400" height="400" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./dist",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "jsx": "react-jsx"
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]

package/tsup.config.ts

@@ -1,3 +1,4 @@
+import svgrPlugin from 'esbuild-plugin-svgr';
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
@@ -7,4 +8,9 @@ export default defineConfig({
   sourcemap: true,
   clean: true,
   treeshake: true,
+  esbuildPlugins: [
+    svgrPlugin({
+      icon: true,
+    }),
+  ],
 });