@gear-js/wallet-connect
Version:
React library to connect Substrate based wallets to Gear dApps
266 lines (265 loc) • 34.8 kB
JavaScript
import "./style.css";
import { jsxs as c, jsx as a, Fragment as e1 } from "react/jsx-runtime";
import { useApi as t1, useAccount as y, useBalanceFormat as l1, useDeriveBalancesAll as o1, useAlert as n1 } from "@gear-js/react-hooks";
import * as e from "react";
import { useState as I, useEffect as a1 } from "react";
import * as p from "@gear-js/ui";
import * as L from "@gear-js/vara-ui";
import { Identicon as P } from "@polkadot/react-identicon";
function O(t) {
var o, n, l = "";
if (typeof t == "string" || typeof t == "number") l += t;
else if (typeof t == "object") if (Array.isArray(t)) {
var r = t.length;
for (o = 0; o < r; o++) t[o] && (n = O(t[o])) && (l && (l += " "), l += n);
} else for (n in t) t[n] && (l && (l += " "), l += n);
return l;
}
function u() {
for (var t, o, n = 0, l = "", r = arguments.length; n < r; n++) (t = arguments[n]) && (o = O(t)) && (l && (l += " "), l += o);
return l;
}
const r1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_501_3544)" }, /* @__PURE__ */ e.createElement("path", { d: "M24 12.1428C24 5.5154 18.6274 0.142822 12 0.142822C5.37258 0.142822 0 5.5154 0 12.1428C0 18.7702 5.37258 24.1428 12 24.1428C18.6274 24.1428 24 18.7702 24 12.1428Z", fill: "#00FFC4" }), /* @__PURE__ */ e.createElement("path", { d: "M15.158 10.5773L12.1687 6.14282H10.0573L15.158 13.7092V16.5968L8.11133 6.14282H6L14.1024 18.1628H15.158H16.213H17.2687V6.14282H15.158V10.5773Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_501_3544" }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, fill: "white", transform: "translate(0 0.142822)" })))), s1 = "_balance_3zrue_1", c1 = "_text_3zrue_7", i1 = "_gear_3zrue_12", C1 = "_vara_3zrue_15", p1 = "_value_3zrue_19", u1 = "_unit_3zrue_26", b = {
balance: s1,
text: c1,
gear: i1,
vara: C1,
value: p1,
unit: u1
};
function d1({ theme: t }) {
const { isApiReady: o } = t1(), { account: n } = y(), { getFormattedBalance: l } = l1(), { data: r } = o1({ address: n == null ? void 0 : n.decodedAddress, watch: !0 }), s = o && r ? l(r.transferable || r.availableBalance) : void 0;
return s ? /* @__PURE__ */ c("div", { className: b.balance, children: [
/* @__PURE__ */ a(r1, {}),
/* @__PURE__ */ c("p", { className: u(b.text, b[t]), children: [
/* @__PURE__ */ a("span", { className: b.value, children: s.value }),
/* @__PURE__ */ a("span", { className: b.unit, children: s.unit })
] })
] }) : null;
}
const m1 = "_icon_j0dzs_1", A = {
icon: m1
};
function Z({ address: t, name: o, color: n = "contrast", size: l, block: r, onClick: s }) {
return /* @__PURE__ */ c(L.Button, { type: "button", size: l, color: n, onClick: s, block: r, children: [
/* @__PURE__ */ a(P, { value: t, size: 16, theme: "polkadot", className: A.icon }),
/* @__PURE__ */ a("span", { children: o })
] });
}
function F(t) {
const { address: o, name: n, size: l = "medium", color: r = "light", block: s, onClick: i } = t;
return /* @__PURE__ */ c(
"button",
{
type: "button",
className: u(
p.buttonStyles.button,
p.buttonStyles.noWrap,
p.buttonStyles[l],
p.buttonStyles[r],
s && p.buttonStyles.block,
A.button
),
onClick: i,
children: [
/* @__PURE__ */ a(P, { value: o, size: 16, theme: "polkadot", className: u(p.buttonStyles.icon, A.icon) }),
/* @__PURE__ */ a("span", { children: n })
]
}
);
}
function f1(t) {
return /* @__PURE__ */ a(Z, { size: "small", block: !0, ...t });
}
function h1({ color: t, ...o }) {
return /* @__PURE__ */ a(F, { size: "large", color: t === "plain" ? "light" : "primary", block: !0, ...o });
}
Z.Modal = f1;
F.Modal = h1;
const E1 = "_button_ccj08_1", _1 = "_wallet_ccj08_6", g1 = "_icon_ccj08_11", V = {
button: E1,
wallet: _1,
icon: g1
};
function x({ SVG: t, name: o }) {
return /* @__PURE__ */ c("span", { className: V.wallet, children: [
/* @__PURE__ */ a(t, { className: V.icon }),
o
] });
}
function z({ children: t, SVG: o, name: n, ...l }) {
return /* @__PURE__ */ c(L.Button, { className: V.button, color: "plain", size: "small", block: !0, ...l, children: [
/* @__PURE__ */ a(x, { SVG: o, name: n }),
t
] });
}
function T({ children: t, SVG: o, name: n, ...l }) {
return /* @__PURE__ */ c(
"button",
{
type: "button",
className: u(
p.buttonStyles.button,
p.buttonStyles.large,
p.buttonStyles.light,
p.buttonStyles.block,
V.button
),
...l,
children: [
/* @__PURE__ */ a(x, { SVG: o, name: n }),
t
]
}
);
}
function w1({ SVG: t, name: o, children: n, ...l }) {
return /* @__PURE__ */ c(L.Button, { color: "transparent", ...l, children: [
/* @__PURE__ */ a(x, { SVG: t, name: o }),
n
] });
}
function v1({ SVG: t, name: o, children: n, ...l }) {
return /* @__PURE__ */ c("button", { type: "button", className: u(p.buttonStyles.button, p.buttonStyles.transparent), ...l, children: [
/* @__PURE__ */ a(x, { SVG: t, name: o }),
n
] });
}
z.Change = w1;
T.Change = v1;
const j = {
gear: {
Button: p.Button,
AccountButton: F,
WalletButton: T,
Modal: p.Modal
},
vara: {
Button: L.Button,
AccountButton: Z,
WalletButton: z,
Modal: L.Modal
}
}, b1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_1_9)" }, /* @__PURE__ */ e.createElement("path", { d: "M12.5669 4.43333H14.2385C14.3831 4.43333 14.5003 4.31613 14.5003 4.17153V2.8C14.5003 2.35817 14.1421 2 13.7003 2H6.13359C5.98633 2 5.86693 2.1194 5.86693 2.26667V4.63333C5.86693 5.07517 5.50876 5.43333 5.06693 5.43333H2.70026C2.55299 5.43333 2.43359 5.55273 2.43359 5.7V17.2C2.43359 17.6418 2.79176 18 3.23359 18H13.7003C14.1421 18 14.5003 17.6418 14.5003 17.2V16.9691C14.5003 16.8414 14.4077 16.7348 14.2822 16.7109C14.0292 16.6627 13.8023 16.5441 13.6216 16.375L13.0823 15.8693C12.8183 15.622 12.6669 15.2723 12.6669 14.9103V11.174C12.6669 11.0427 12.5697 10.9322 12.4396 10.9145C11.9764 10.8514 10.9669 10.573 10.9669 9.33333V6.03333C10.9669 5.14967 11.6833 4.43333 12.5669 4.43333ZM5.13359 15.3333C5.13359 15.4807 5.01426 15.6 4.86693 15.6C4.71959 15.6 4.60026 15.4807 4.60026 15.3333V13.348L4.45393 13.4513C4.33359 13.536 4.16726 13.5073 4.08226 13.387C3.99759 13.2667 4.02626 13.1003 4.14659 13.0153L4.71326 12.6153C4.88996 12.4908 5.13359 12.618 5.13359 12.8333V15.3333ZM5.25026 11.5333C4.67126 11.5333 4.20026 11.0623 4.20026 10.4833V9.55C4.20026 8.971 4.67126 8.5 5.25026 8.5C5.82926 8.5 6.30026 8.971 6.30026 9.55V10.4833C6.30026 11.0623 5.82926 11.5333 5.25026 11.5333ZM8.16693 14.55C8.16693 15.129 7.69593 15.6 7.11693 15.6C6.53793 15.6 6.06693 15.129 6.06693 14.55V13.6167C6.06693 13.0377 6.53793 12.5667 7.11693 12.5667C7.69593 12.5667 8.16693 13.0377 8.16693 13.6167V14.55ZM8.16693 11.2667C8.16693 11.414 8.04759 11.5333 7.90026 11.5333C7.75293 11.5333 7.63359 11.414 7.63359 11.2667V9.28133L7.48726 9.38467C7.36693 9.46933 7.20059 9.44067 7.11559 9.32033C7.03093 9.2 7.05959 9.03367 7.17993 8.94867L7.74659 8.54867C7.92329 8.4241 8.16693 8.55137 8.16693 8.76667V11.2667ZM10.1669 15.3333C10.1669 15.4807 10.0476 15.6 9.90026 15.6C9.75293 15.6 9.63359 15.4807 9.63359 15.3333V13.348L9.48726 13.4513C9.36693 13.536 9.20059 13.5073 9.11559 13.387C9.03093 13.2667 9.05959 13.1003 9.17993 13.0153L9.74659 12.6153C9.9233 12.4908 10.1669 12.618 10.1669 12.8333V15.3333ZM10.1669 11.2667C10.1669 11.414 10.0476 11.5333 9.90026 11.5333C9.75293 11.5333 9.63359 11.414 9.63359 11.2667V9.28133L9.48726 9.38467C9.36693 9.46933 9.20059 9.44067 9.11559 9.32033C9.03093 9.2 9.05959 9.03367 9.17993 8.94867L9.74659 8.54867C9.9233 8.4241 10.1669 8.55137 10.1669 8.76667V11.2667ZM10.1669 6.41667C10.1669 6.99567 9.69593 7.46667 9.11693 7.46667C8.53793 7.46667 8.06693 6.99567 8.06693 6.41667V5.48333C8.06693 4.90433 8.53793 4.43333 9.11693 4.43333C9.69593 4.43333 10.1669 4.90433 10.1669 5.48333V6.41667Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M5.33304 2.47736V4.63279C5.33304 4.78006 5.21364 4.89946 5.06637 4.89946H2.91094C2.79214 4.89946 2.73267 4.75583 2.81667 4.67186L5.10544 2.38309C5.18941 2.29906 5.33304 2.35856 5.33304 2.47736Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M5.76771 9.54987V10.4832C5.76771 10.7682 5.53604 10.9999 5.25104 10.9999C4.96604 10.9999 4.73438 10.7682 4.73438 10.4832V9.54987C4.73438 9.26487 4.96604 9.0332 5.25104 9.0332C5.53604 9.0332 5.76771 9.26487 5.76771 9.54987Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M7.63294 13.6163V14.5496C7.63294 14.8346 7.40128 15.0663 7.11628 15.0663C6.83128 15.0663 6.59961 14.8346 6.59961 14.5496V13.6163C6.59961 13.3313 6.83128 13.0996 7.11628 13.0996C7.40128 13.0996 7.63294 13.3313 7.63294 13.6163Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M9.63294 5.48346V6.4168C9.63294 6.7018 9.40128 6.93346 9.11628 6.93346C8.83128 6.93346 8.59961 6.7018 8.59961 6.4168V5.48346C8.59961 5.19846 8.83128 4.9668 9.11628 4.9668C9.40128 4.9668 9.63294 5.19846 9.63294 5.48346Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M16.5 4.9668H12.5667C11.9787 4.9668 11.5 5.44513 11.5 6.03346V9.33346C11.5 9.9218 11.9787 10.4001 12.5667 10.4001H13.2V14.9105C13.2 15.1258 13.29 15.3335 13.447 15.4805L13.986 15.9861C14.2919 16.2722 14.7715 16.2752 15.0807 15.9861L15.5847 15.5135C15.8523 15.2625 15.9113 14.8688 15.7287 14.5561L15.585 14.3091C15.498 14.1598 15.498 13.9738 15.585 13.8245L15.7287 13.5775C15.9123 13.2625 15.9123 12.8711 15.7287 12.5561L15.585 12.3091C15.498 12.1598 15.4981 11.9738 15.585 11.8245C15.7405 11.5573 15.8667 11.3848 15.8667 11.0668V10.4001H16.5C17.088 10.4001 17.5667 9.9218 17.5667 9.33346V6.03346C17.5667 5.44513 17.088 4.9668 16.5 4.9668ZM15.6 7.13346H13.4667C13.3193 7.13346 13.2 7.01413 13.2 6.8668C13.2 6.71946 13.3193 6.60013 13.4667 6.60013H15.6C15.7473 6.60013 15.8667 6.71946 15.8667 6.8668C15.8667 7.01413 15.7473 7.13346 15.6 7.13346Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_1_9" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white", transform: "translate(2 2)" })))), L1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { opacity: 0.3, clipPath: "url(#clip0_17_12727)" }, /* @__PURE__ */ e.createElement("path", { d: "M4.23673 10.499L1.51492 7.77721L8.09809 1.19404L10.8199 3.91585L4.23673 10.499ZM1.26051 8.25666L3.75729 10.7534L0.013916 12L1.26051 8.25666ZM11.6571 3.0823L11.185 3.55439L8.45955 0.828983L8.93165 0.356884C9.40721 -0.118961 10.1784 -0.118961 10.6539 0.356884L11.6571 1.36C12.1292 1.83715 12.1292 2.6053 11.6571 3.0823Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_17_12727" }, /* @__PURE__ */ e.createElement("rect", { width: 12, height: 12, fill: "white" })))), V1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 22, height: 22, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_1_12)" }, /* @__PURE__ */ e.createElement("path", { d: "M18.8738 11.3323L14.8738 15.8323C14.807 15.9088 14.7181 15.9629 14.6194 15.987C14.5207 16.0111 14.4169 16.0042 14.3223 15.9673C14.2277 15.9311 14.1463 15.867 14.0887 15.7837C14.0312 15.7002 14.0003 15.6014 14 15.5V12.5H8.5C8.36739 12.5 8.24022 12.4473 8.14645 12.3536C8.05267 12.2598 8 12.1326 8 12V10C8 9.86739 8.05267 9.74022 8.14645 9.64645C8.24022 9.55267 8.36739 9.5 8.5 9.5H14V6.5C14 6.39857 14.0308 6.29953 14.0883 6.21602C14.1459 6.13251 14.2275 6.06848 14.3223 6.03242C14.4171 5.99638 14.5206 5.99001 14.6191 6.01417C14.7176 6.03833 14.8064 6.09187 14.8738 6.1677L18.8738 10.6677C18.9551 10.7593 19 10.8775 19 11C19 11.1225 18.9551 11.2407 18.8738 11.3323ZM8.5 16H6V6H8.5C8.63261 6 8.75978 5.94733 8.85355 5.85355C8.94733 5.75978 9 5.63261 9 5.5V3.5C9 3.36739 8.94733 3.24021 8.85355 3.14645C8.75978 3.05268 8.63261 3 8.5 3H3.5C3.36739 3 3.24021 3.05268 3.14645 3.14645C3.05268 3.24021 3 3.36739 3 3.5V18.5C3 18.6326 3.05268 18.7598 3.14645 18.8536C3.24021 18.9473 3.36739 19 3.5 19H8.5C8.63261 19 8.75978 18.9473 8.85355 18.8536C8.94733 18.7598 9 18.6326 9 18.5V16.5C9 16.3674 8.94733 16.2402 8.85355 16.1464C8.75978 16.0527 8.63261 16 8.5 16Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_1_12" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white", transform: "translate(3 3)" })))), y1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, rx: 12, fill: "white" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 8.30915C6 7.03376 7.03386 6 8.30915 6H17.9999V7.7718C17.9999 8.68845 17.2569 9.43149 16.3402 9.43149H11.784C10.5086 9.43149 9.47487 10.4653 9.47487 11.7407V12.3283C9.47487 13.6037 10.5086 14.6374 11.784 14.6374H16.3402C17.2569 14.6374 17.9999 15.3805 17.9999 16.2972V18H8.30915C7.03386 18 6 16.966 6 15.6907V8.30915ZM11.8837 10.3972H16.5566C17.3538 10.3972 17.9999 11.0434 17.9999 11.8404V12.2286C17.9999 13.0256 17.3538 13.6719 16.5566 13.6719H11.8837C11.0866 13.6719 10.4404 13.0256 10.4404 12.2286V11.8404C10.4404 11.0434 11.0866 10.3972 11.8837 10.3972Z", fill: "url(#paint0_radial_822_61077)" }), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("radialGradient", { id: "paint0_radial_822_61077", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(6.3331 5.66688) rotate(55.378) scale(17.0019 67.937)" }, /* @__PURE__ */ e.createElement("stop", { offset: 0.051483, stopColor: "#C549FF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.815643, stopColor: "#704BFF" })))), x1 = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 324 324", ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("radialGradient", { id: "a", cx: 8.15, cy: 306.07, r: 323.24, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { offset: 0, stopColor: "#d7d3e9" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.18, stopColor: "#a9b0ea" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.39, stopColor: "#7a8ceb" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.54, stopColor: "#5d76ec" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.63, stopColor: "#526eec" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#397dcd" }))), /* @__PURE__ */ e.createElement("rect", { width: 324, height: 324, rx: 84.12, fill: "url(#a)" }), /* @__PURE__ */ e.createElement("path", { d: "M275 166.67v3c-18.44 2.94-58 9.77-77.52 17.22a26.53 26.53 0 00-15.19 15.06c-7.45 19.39-14.37 59.21-17.31 77.74h-6c-2.94-18.53-9.86-58.35-17.31-77.74a26.56 26.56 0 00-15.19-15.06C107 179.42 67.44 172.59 49 169.65v-6c18.44-2.94 58-9.77 77.52-17.22a26.53 26.53 0 0015.19-15.06C149.16 112 156.08 72.2 159 53.67h6c2.94 18.53 9.86 58.35 17.31 77.74a26.56 26.56 0 0015.19 15.06c19.48 7.45 59.08 14.28 77.52 17.22z", fill: "#fff" })), B1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, rx: 12, fill: "white" }), /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_822_61091)" }, /* @__PURE__ */ e.createElement("path", { d: "M12.0807 4C8.73872 4.01348 6.03269 6.71919 6.01953 10.0612C6.01987 10.7305 6.12823 11.3954 6.34042 12.0302C6.41654 12.2382 6.56949 12.4092 6.76782 12.508C6.96615 12.6068 7.19478 12.6258 7.40672 12.5612C7.61127 12.4825 7.77817 12.3289 7.87354 12.1315C7.9689 11.9342 7.98556 11.708 7.92014 11.4988C7.74058 11.0043 7.66043 10.4792 7.68429 9.95371C7.70962 9.10619 7.98084 8.28433 8.4649 7.58819C8.94896 6.89205 9.62499 6.35167 10.4107 6.03285C11.1963 5.71403 12.0578 5.63053 12.89 5.79252C13.7223 5.9545 14.4895 6.35498 15.0983 6.9452C15.707 7.53541 16.1311 8.28989 16.3187 9.11676C16.5063 9.94363 16.4495 10.8072 16.1551 11.6024C15.8608 12.3975 15.3415 13.09 14.6607 13.5953C13.9799 14.1007 13.1668 14.3972 12.3204 14.4487C12.3204 14.4487 11.4698 14.5003 11.0465 14.5523C10.8904 14.5745 10.7356 14.6053 10.5828 14.6444C10.5723 14.6549 10.5581 14.6608 10.5432 14.6608C10.5284 14.6608 10.5141 14.6549 10.5036 14.6444V14.6444C10.4962 14.6346 10.4923 14.6227 10.4923 14.6104C10.4923 14.5981 10.4962 14.5862 10.5036 14.5764L10.6355 13.8579L11.4345 10.264C11.4806 10.0485 11.4392 9.82354 11.3195 9.63856C11.1997 9.45357 11.0114 9.32373 10.7959 9.27761C10.5804 9.23148 10.3554 9.27284 10.1705 9.3926C9.98548 9.51235 9.85564 9.70069 9.80951 9.91617C9.80951 9.91617 7.90891 18.7126 7.90891 18.7928C7.85677 18.9982 7.88833 19.2158 7.99664 19.3979C8.10496 19.58 8.28116 19.7116 8.4865 19.7638C8.49113 19.7652 8.49585 19.7663 8.50062 19.767H8.5449C8.74996 19.82 8.96765 19.7893 9.1501 19.6818C9.33255 19.5742 9.46482 19.3987 9.51783 19.1936C9.51991 19.1864 9.52163 19.1792 9.52296 19.1718C9.52168 19.1586 9.52168 19.1452 9.52296 19.132C9.54639 19.0287 9.78609 17.8581 9.78609 17.8581C9.8747 17.4268 10.0932 17.033 10.4123 16.7296C10.7314 16.4262 11.1357 16.2277 11.5709 16.1609C11.7544 16.1327 12.5255 16.081 12.5255 16.081C15.8544 15.7505 18.2835 12.7826 17.951 9.45345C17.8044 7.98554 17.1271 6.6216 16.0463 5.61754C14.9655 4.61348 13.5555 4.03833 12.0807 4V4Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M12.4474 17.9763C12.3175 17.9493 12.1836 17.948 12.0533 17.9728C11.923 17.9975 11.7988 18.0476 11.6879 18.1203C11.5769 18.193 11.4814 18.2869 11.4067 18.3965C11.3321 18.5061 11.2797 18.6294 11.2527 18.7593C11.2527 18.7644 11.2508 18.7695 11.2495 18.7747C11.2214 18.9039 11.2191 19.0373 11.2426 19.1674C11.2661 19.2975 11.315 19.4217 11.3865 19.5328C11.4581 19.644 11.5508 19.74 11.6594 19.8154C11.768 19.8907 11.8905 19.9439 12.0197 19.9719C12.02 19.9718 12.0203 19.9717 12.0206 19.9717C12.021 19.9717 12.0213 19.9718 12.0216 19.9719H12.0495C12.3048 20.0335 12.5741 19.9913 12.7982 19.8544C13.0223 19.7175 13.1828 19.4971 13.2445 19.2419C13.2445 19.238 13.2464 19.2335 13.2477 19.2297V19.1742C13.2929 18.91 13.2351 18.6386 13.0862 18.4158C12.9373 18.193 12.7087 18.0357 12.4474 17.9763V17.9763Z", fill: "#E6007A" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_822_61091" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white", transform: "translate(4 4)" })))), G = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, rx: 12, fill: "white" }), /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_822_61104)" }, /* @__PURE__ */ e.createElement("mask", { id: "mask0_822_61104", style: {
maskType: "alpha"
}, maskUnits: "userSpaceOnUse", x: 4, y: 4, width: 16, height: 16 }, /* @__PURE__ */ e.createElement("path", { d: "M20 4H4V20H20V4Z", fill: "#C4C4C4" })), /* @__PURE__ */ e.createElement("g", { mask: "url(#mask0_822_61104)" }, /* @__PURE__ */ e.createElement("path", { d: "M14.503 11.6804L14.5011 9.70131L7.23828 5.9375V11.6785L11.8878 14.1623L13.5869 13.4137L8.47066 10.6994L8.47447 8.52417L14.503 11.6804Z", fill: "url(#paint0_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M10.061 9.35518V10.0314L8.46484 10.7152L8.47627 8.49805L10.061 9.35518Z", fill: "url(#paint1_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M10.0669 14.9646L13.5869 13.4141L8.4707 10.7131L10.0517 10.0312L16.6287 13.4674L10.0802 16.3246L10.0669 14.9646Z", fill: "url(#paint2_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M8.47622 14.5049L10.0476 13.8268L10.0819 16.3221L16.6286 13.4668V15.5963L8.46289 19.1735L8.47622 14.5049Z", fill: "url(#paint3_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M7.23828 13.8613L8.47066 14.5051L8.46305 19.1661L7.23828 18.5508V13.8613Z", fill: "url(#paint4_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M8.79447 13.168L10.0478 13.827L8.47066 14.5051L7.23828 13.8613L8.79447 13.168Z", fill: "url(#paint5_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M16.6296 10.758L16.6221 8.76562L14.5059 9.70086V11.6818L16.6296 10.758Z", fill: "url(#paint6_linear_822_61104)" }), /* @__PURE__ */ e.createElement("path", { d: "M7.23828 5.93789L9.37734 4.95312L16.6249 8.76265L14.505 9.7017L7.23828 5.93789Z", fill: "url(#paint7_linear_822_61104)" }))), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("linearGradient", { id: "paint0_linear_822_61104", x1: 5.42115, y1: 10.0499, x2: 18.2536, y2: 10.0499, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#FFD4B2" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.36, stopColor: "#9ACEB7" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.67, stopColor: "#47C8BB" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.89, stopColor: "#14C5BE" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#00C4BF" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint1_linear_822_61104", x1: 9.26293, y1: 11.5057, x2: 9.26293, y2: 6.53424, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#00FECF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.08, stopColor: "#00E5D0" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.24, stopColor: "#00A5D1" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.48, stopColor: "#0040D4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.54, stopColor: "#0025D5" }), /* @__PURE__ */ e.createElement("stop", { offset: 1 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint2_linear_822_61104", x1: 8.4707, y1: 13.1779, x2: 21.5393, y2: 13.1779, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#FDEC9F" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.08, stopColor: "#E4D8A4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.24, stopColor: "#A4A6B2" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.47, stopColor: "#3F57C8" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.61, stopColor: "#0025D5" }), /* @__PURE__ */ e.createElement("stop", { offset: 1 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint3_linear_822_61104", x1: 5.79813, y1: 16.3201, x2: 22.5086, y2: 16.3201, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { offset: 0.05, stopColor: "#62A5FF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.45, stopColor: "#1032D1" }), /* @__PURE__ */ e.createElement("stop", { offset: 1 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint4_linear_822_61104", x1: 79.0737, y1: 391.455, x2: 99.2577, y2: 391.716, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#FFD4B2" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.36, stopColor: "#9ACEB7" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.67, stopColor: "#47C8BB" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.89, stopColor: "#14C5BE" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#00C4BF" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint5_linear_822_61104", x1: 6.93734, y1: 13.8365, x2: 12.6669, y2: 13.8365, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#00FECF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.08, stopColor: "#00E5D0" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.25, stopColor: "#00A5D1" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.49, stopColor: "#0040D4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.56, stopColor: "#0025D5" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint6_linear_822_61104", x1: 12.4735, y1: 10.2799, x2: 26.5764, y2: 10.0247, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#00FECF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.05, stopColor: "#00E5D0" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.15, stopColor: "#00A5D1" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.29, stopColor: "#0040D4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.33, stopColor: "#0025D5" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint7_linear_822_61104", x1: 7.23828, y1: 7.32836, x2: 24.7336, y2: 7.32836, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#FFD4AF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.1, stopColor: "#E6D5BA" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.31, stopColor: "#A7D6D5" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.61, stopColor: "#43D9FF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.63, stopColor: "#37B1D0" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.65, stopColor: "#2B8CA5" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.67, stopColor: "#216B7D" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.7, stopColor: "#184E5B" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.72, stopColor: "#10353F" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.75, stopColor: "#0A2228" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.78, stopColor: "#061316" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.82, stopColor: "#020809" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.88, stopColor: "#010202" }), /* @__PURE__ */ e.createElement("stop", { offset: 1 })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_822_61104" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white", transform: "translate(4 4)" })))), M1 = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, rx: 12, fill: "white" }), /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_822_61126)" }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.8509 13.0622C16.6036 13.3096 16.1738 13.1972 16.0278 12.8794C15.999 12.8168 15.9834 12.7496 15.9834 12.6806V7.20031C15.9834 6.53757 15.4461 6.00031 14.7834 6.00031C14.1206 6.00031 13.5834 6.53757 13.5834 7.20031V9.97404C13.5834 10.2126 13.339 10.3745 13.1116 10.3026C12.9677 10.2571 12.8637 10.126 12.8637 9.97509V5.52032C12.8637 4.85757 12.3265 4.32031 11.6637 4.32031C11.001 4.32031 10.4637 4.85757 10.4637 5.52032V9.97476C10.4637 10.1258 10.3596 10.257 10.2156 10.3025C9.98801 10.3744 9.74354 10.2124 9.74354 9.97372V7.20031C9.74354 6.53757 9.20628 6.00031 8.54353 6.00031C7.88079 6.00031 7.34353 6.53757 7.34353 7.20031L7.34353 12.6825C7.34353 12.7501 7.32817 12.816 7.29992 12.8774C7.15699 13.1883 6.73693 13.2972 6.49496 13.0552L6.04854 12.6088C5.57991 12.1402 4.82011 12.1402 4.35147 12.6088C3.88284 13.0774 3.88284 13.8372 4.35147 14.3058L7.87926 17.8337C8.75778 18.9577 10.1262 19.6803 11.6634 19.6803C13.1367 19.6803 14.455 19.0166 15.3355 17.9718L19.0014 14.3058C19.47 13.8372 19.47 13.0774 19.0014 12.6088C18.5327 12.1402 17.7729 12.1402 17.3043 12.6088L16.8509 13.0622ZM11.6632 17.7604C13.7839 17.7604 15.5032 15.3604 15.5032 15.3604C15.5032 15.3604 13.7839 12.9603 11.6632 12.9603C9.54237 12.9603 7.82314 15.3604 7.82314 15.3604C7.82314 15.3604 9.54237 17.7604 11.6632 17.7604Z", fill: "#222225" }), /* @__PURE__ */ e.createElement("path", { d: "M13.1027 15.3599C13.1027 16.1553 12.458 16.7999 11.6626 16.7999C10.8674 16.7999 10.2227 16.1553 10.2227 15.3599C10.2227 14.5647 10.8674 13.9199 11.6626 13.9199C12.458 13.9199 13.1027 14.5647 13.1027 15.3599Z", fill: "#222225" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_822_61126" }, /* @__PURE__ */ e.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 8, fill: "white" })))), S1 = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
var U;
const k1 = !!((U = window.walletExtension) != null && U.isNovaWallet), $ = k1 ? {
"polkadot-js": { name: "Nova Wallet", SVG: x1 },
"subwallet-js": { name: "SubWallet", SVG: G }
} : {
"polkadot-js": { name: "Polkadot JS", SVG: B1 },
"subwallet-js": { name: "SubWallet", SVG: G },
talisman: { name: "Talisman", SVG: M1 },
enkrypt: { name: "Enkrypt", SVG: y1 }
}, A1 = Object.entries($);
function Z1() {
const { wallets: t, account: o } = y(), n = o == null ? void 0 : o.meta.source, [l, r] = I(n), s = l ? $[l] : void 0, i = t && l ? t[l].accounts : void 0;
return a1(() => {
r(n);
}, [n]), { wallet: s, walletId: l, walletAccounts: i, setWalletId: r, resetWalletId: () => r(void 0) };
}
const F1 = ({ alert: t, value: o }) => {
const n = () => t.success("Copied"), l = () => t.error("Copy error");
function r(s) {
const i = document.createElement("textarea");
i.value = s, document.body.appendChild(i), i.focus(), i.select();
try {
document.execCommand("copy"), n();
} catch (m) {
console.error("Unable to copy to clipboard", m), l();
}
document.body.removeChild(i);
}
window.isSecureContext && navigator.clipboard ? navigator.clipboard.writeText(o).then(() => n()).catch(() => l()) : r(o);
}, N1 = "_list_142au_1", H1 = "_account_142au_6", W1 = "_status_142au_12", D1 = "_statusText_142au_19", G1 = "_gear_142au_22", U1 = "_vara_142au_25", I1 = "_statusAccounts_142au_28", P1 = "_footer_142au_38", O1 = "_copyButton_142au_43", z1 = "_logoutButton_142au_44", T1 = "_editIcon_142au_48", j1 = "_text_142au_55", C = {
list: N1,
account: H1,
status: W1,
statusText: D1,
gear: G1,
vara: U1,
statusAccounts: I1,
footer: P1,
copyButton: O1,
logoutButton: z1,
editIcon: T1,
text: j1
};
function $1({ theme: t = "vara", close: o }) {
const n = n1(), { wallets: l, isAnyWallet: r, account: s, login: i, logout: m } = y(), { wallet: _, walletAccounts: f, setWalletId: B, resetWalletId: N } = Z1(), d = C[t], { WalletButton: H, AccountButton: R, Button: W, Modal: J } = j[t], q = () => A1.map(([h, { SVG: E, name: M }]) => {
const { status: g, accounts: w, connect: v } = (l == null ? void 0 : l[h]) || {}, S = !!g, k = g === "connected", D = (w == null ? void 0 : w.length) || 0, Y = `${D} ${D === 1 ? "account" : "accounts"}`;
return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
H,
{
SVG: E,
name: M,
onClick: () => k ? B(h) : v == null ? void 0 : v(),
disabled: !S,
children: /* @__PURE__ */ c("span", { className: C.status, children: [
/* @__PURE__ */ a("span", { className: u(C.statusText, d), children: k ? "Enabled" : "Disabled" }),
k && /* @__PURE__ */ a("span", { className: u(C.statusAccounts, d), children: Y })
] })
}
) }, h);
}), K = () => f == null ? void 0 : f.map((h) => {
const { address: E, meta: M } = h, g = E === (s == null ? void 0 : s.address), w = g ? "primary" : "plain", v = () => {
g || (i(h), o());
}, S = () => {
F1({ value: E, alert: n }), o();
};
return /* @__PURE__ */ c("li", { className: C.account, children: [
/* @__PURE__ */ a(R.Modal, { address: E, name: M.name, color: w, onClick: v }),
/* @__PURE__ */ a(
W,
{
icon: b1,
size: "medium",
color: "transparent",
onClick: S,
className: u(C.copyButton, d)
}
)
] }, E);
}), Q = () => {
m(), N(), o();
}, X = () => r ? f ? f.length ? /* @__PURE__ */ a("ul", { className: C.list, children: K() }) : /* @__PURE__ */ a("p", { className: u(C.text, d), children: "No accounts found. Please open your extension and create a new account or import existing." }) : /* @__PURE__ */ a("ul", { className: C.list, children: q() }) : S1 ? /* @__PURE__ */ a("p", { className: u(C.text, d), children: "To use this application on mobile devices, open this page inside compatible wallets like Nova or SubWallet." }) : /* @__PURE__ */ c("p", { className: u(C.text, d), children: [
"A compatible wallet was not found or is disabled. Install it following the",
" ",
/* @__PURE__ */ a("a", { href: "https://wiki.vara.network/docs/account", target: "_blank", rel: "noreferrer", children: "instructions" }),
"."
] });
return /* @__PURE__ */ a(J, { heading: "Connect Wallet", close: o, footer: _ ? /* @__PURE__ */ c("div", { className: C.footer, children: [
/* @__PURE__ */ a(H.Change, { SVG: _.SVG, name: _.name, onClick: N, children: /* @__PURE__ */ a(L1, { className: u(C.editIcon, d) }) }),
s && /* @__PURE__ */ a(
W,
{
icon: V1,
text: "Logout",
size: "medium",
color: "transparent",
onClick: Q,
className: u(C.logoutButton, d)
}
)
] }) : null, children: X() });
}
const R1 = "_wallet_fl5it_1", J1 = {
wallet: R1
};
function te({ theme: t = "vara", displayBalance: o = !0, accountButtonClassName: n }) {
const { account: l, isAccountReady: r } = y(), [s, i] = I(!1), m = () => i(!0), _ = () => i(!1);
if (!r) return null;
const { Button: f, AccountButton: B } = j[t];
return /* @__PURE__ */ c(e1, { children: [
/* @__PURE__ */ c("div", { className: J1.wallet, children: [
o && /* @__PURE__ */ a(d1, { theme: t }),
l ? /* @__PURE__ */ a("div", { className: n, children: /* @__PURE__ */ a(B, { address: l.address, name: l.meta.name, onClick: m }) }) : /* @__PURE__ */ a(f, { text: "Connect Wallet", color: "primary", onClick: m })
] }),
s && /* @__PURE__ */ a($1, { theme: t, close: _ })
] });
}
export {
te as Wallet,
$1 as WalletModal
};