@bze/bze-ui-kit 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/dist/index.d.mts +26 -3
- package/dist/index.d.ts +26 -3
- package/dist/index.js +318 -206
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +168 -57
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -310,6 +310,7 @@ __export(index_exports, {
|
|
|
310
310
|
useSettings: () => useSettings,
|
|
311
311
|
useSigningClient: () => useSigningClient,
|
|
312
312
|
useToast: () => useToast,
|
|
313
|
+
useValidatorLogos: () => useValidatorLogos,
|
|
313
314
|
validateBZEBech32Address: () => validateBZEBech32Address,
|
|
314
315
|
validateBech32Address: () => validateBech32Address,
|
|
315
316
|
validateEndpoints: () => validateEndpoints,
|
|
@@ -1682,19 +1683,34 @@ var EXCLUDED_MARKETS = {
|
|
|
1682
1683
|
// src/constants/ecosystem.ts
|
|
1683
1684
|
var import_lu = require("react-icons/lu");
|
|
1684
1685
|
var ECOSYSTEM_MENU_LABEL = "Other";
|
|
1685
|
-
var
|
|
1686
|
-
{ name: "Website", href: "https://getbze.com", disabled: false, icon: import_lu.LuGlobe },
|
|
1687
|
-
{ name: "Staking", href: "https://staking.getbze.com", disabled: false, icon: import_lu.LuCoins },
|
|
1688
|
-
{ name: "DEX", href: "https://dex.getbze.com", disabled: false, icon: import_lu.LuChartColumn },
|
|
1689
|
-
{ name: "Burner", href: "https://burner.getbze.com", disabled: false, icon: import_lu.LuFlame },
|
|
1690
|
-
{ name: "Factory", href: "#", disabled: true, icon: import_lu.LuFactory }
|
|
1686
|
+
var DEFAULT_APPS = [
|
|
1687
|
+
{ key: "website", name: "Website", href: "https://getbze.com", disabled: false, icon: import_lu.LuGlobe },
|
|
1688
|
+
{ key: "staking", name: "Staking", href: "https://staking.getbze.com", disabled: false, icon: import_lu.LuCoins },
|
|
1689
|
+
{ key: "dex", name: "DEX", href: "https://dex.getbze.com", disabled: false, icon: import_lu.LuChartColumn },
|
|
1690
|
+
{ key: "burner", name: "Burner", href: "https://burner.getbze.com", disabled: false, icon: import_lu.LuFlame },
|
|
1691
|
+
{ key: "factory", name: "Factory", href: "#", disabled: true, icon: import_lu.LuFactory }
|
|
1691
1692
|
];
|
|
1692
|
-
var
|
|
1693
|
-
const
|
|
1694
|
-
if (!
|
|
1695
|
-
return
|
|
1693
|
+
var getExcludedKeys = () => {
|
|
1694
|
+
const raw = process.env.NEXT_PUBLIC_ECOSYSTEM_EXCLUDED || "";
|
|
1695
|
+
if (!raw.trim()) {
|
|
1696
|
+
return /* @__PURE__ */ new Set();
|
|
1696
1697
|
}
|
|
1697
|
-
return
|
|
1698
|
+
return new Set(raw.split(",").map((k) => k.trim().toLowerCase()).filter(Boolean));
|
|
1699
|
+
};
|
|
1700
|
+
var getEcosystemApps = () => {
|
|
1701
|
+
const excluded = getExcludedKeys();
|
|
1702
|
+
return DEFAULT_APPS.filter((app) => !excluded.has(app.key)).map((app) => {
|
|
1703
|
+
const envKey = app.key.toUpperCase();
|
|
1704
|
+
const linkOverride = process.env[`NEXT_PUBLIC_ECOSYSTEM_LINK_${envKey}`];
|
|
1705
|
+
const labelOverride = process.env[`NEXT_PUBLIC_ECOSYSTEM_LABEL_${envKey}`];
|
|
1706
|
+
return {
|
|
1707
|
+
key: app.key,
|
|
1708
|
+
name: labelOverride || app.name,
|
|
1709
|
+
href: linkOverride || app.href,
|
|
1710
|
+
disabled: linkOverride ? false : app.disabled,
|
|
1711
|
+
icon: app.icon
|
|
1712
|
+
};
|
|
1713
|
+
});
|
|
1698
1714
|
};
|
|
1699
1715
|
|
|
1700
1716
|
// src/constants/keplr.ts
|
|
@@ -4184,9 +4200,104 @@ var useTx = (chainName, isCosmos, isIBC) => {
|
|
|
4184
4200
|
};
|
|
4185
4201
|
};
|
|
4186
4202
|
|
|
4203
|
+
// src/hooks/useValidatorLogos.ts
|
|
4204
|
+
var import_react17 = require("react");
|
|
4205
|
+
var KEYBASE_API_URL = "https://keybase.io/_/api/1.0/user/lookup.json";
|
|
4206
|
+
var LOGOS_STORAGE_KEY = "validator_logos";
|
|
4207
|
+
var LOGOS_TTL = 24 * 60 * 60 * 1e3;
|
|
4208
|
+
var useValidatorLogos = (validators) => {
|
|
4209
|
+
const [logos, setLogos] = (0, import_react17.useState)({});
|
|
4210
|
+
const [isLoading, setIsLoading] = (0, import_react17.useState)(false);
|
|
4211
|
+
const fetchedRef = (0, import_react17.useRef)(false);
|
|
4212
|
+
const validatorCountRef = (0, import_react17.useRef)(0);
|
|
4213
|
+
const fetchLogos = (0, import_react17.useCallback)(async (identities) => {
|
|
4214
|
+
if (identities.length === 0) return {};
|
|
4215
|
+
let cached = null;
|
|
4216
|
+
try {
|
|
4217
|
+
const raw = typeof window !== "undefined" ? localStorage.getItem(LOGOS_STORAGE_KEY) : null;
|
|
4218
|
+
if (raw) {
|
|
4219
|
+
const parsed = JSON.parse(raw);
|
|
4220
|
+
if (parsed && typeof parsed === "object" && parsed.data && (!parsed.expiry || Date.now() < parsed.expiry)) {
|
|
4221
|
+
cached = parsed.data;
|
|
4222
|
+
}
|
|
4223
|
+
}
|
|
4224
|
+
} catch (e) {
|
|
4225
|
+
}
|
|
4226
|
+
if (cached) {
|
|
4227
|
+
const allCached = identities.every(
|
|
4228
|
+
(v) => v.operatorAddress in cached
|
|
4229
|
+
);
|
|
4230
|
+
if (allCached) {
|
|
4231
|
+
return cached;
|
|
4232
|
+
}
|
|
4233
|
+
}
|
|
4234
|
+
const result = cached != null ? cached : {};
|
|
4235
|
+
const toFetch = identities.filter((v) => !(v.operatorAddress in result));
|
|
4236
|
+
if (toFetch.length === 0) return result;
|
|
4237
|
+
const chunkSize = 20;
|
|
4238
|
+
for (let i = 0; i < toFetch.length; i += chunkSize) {
|
|
4239
|
+
const chunk = toFetch.slice(i, i + chunkSize);
|
|
4240
|
+
const chunkResults = await Promise.all(
|
|
4241
|
+
chunk.map(async ({ operatorAddress, identity }) => {
|
|
4242
|
+
var _a2, _b2, _c, _d, _e;
|
|
4243
|
+
if (!identity) {
|
|
4244
|
+
return { operatorAddress, url: "" };
|
|
4245
|
+
}
|
|
4246
|
+
try {
|
|
4247
|
+
const resp = await fetch(
|
|
4248
|
+
`${KEYBASE_API_URL}?key_suffix=${encodeURIComponent(identity)}&fields=pictures`
|
|
4249
|
+
);
|
|
4250
|
+
const data = await resp.json();
|
|
4251
|
+
const url = (_e = (_d = (_c = (_b2 = (_a2 = data == null ? void 0 : data.them) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.pictures) == null ? void 0 : _c.primary) == null ? void 0 : _d.url) != null ? _e : "";
|
|
4252
|
+
return { operatorAddress, url };
|
|
4253
|
+
} catch (e) {
|
|
4254
|
+
return { operatorAddress, url: "" };
|
|
4255
|
+
}
|
|
4256
|
+
})
|
|
4257
|
+
);
|
|
4258
|
+
for (const { operatorAddress, url } of chunkResults) {
|
|
4259
|
+
result[operatorAddress] = url;
|
|
4260
|
+
}
|
|
4261
|
+
if (i + chunkSize < toFetch.length) {
|
|
4262
|
+
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
4263
|
+
}
|
|
4264
|
+
}
|
|
4265
|
+
try {
|
|
4266
|
+
if (typeof window !== "undefined") {
|
|
4267
|
+
localStorage.setItem(LOGOS_STORAGE_KEY, JSON.stringify({
|
|
4268
|
+
data: result,
|
|
4269
|
+
expiry: Date.now() + LOGOS_TTL
|
|
4270
|
+
}));
|
|
4271
|
+
}
|
|
4272
|
+
} catch (e) {
|
|
4273
|
+
}
|
|
4274
|
+
return result;
|
|
4275
|
+
}, []);
|
|
4276
|
+
(0, import_react17.useEffect)(() => {
|
|
4277
|
+
if (!validators || validators.length === 0) return;
|
|
4278
|
+
if (fetchedRef.current && validatorCountRef.current === validators.length) return;
|
|
4279
|
+
const identities = validators.map((v) => {
|
|
4280
|
+
var _a2, _b2;
|
|
4281
|
+
return {
|
|
4282
|
+
operatorAddress: v.operator_address,
|
|
4283
|
+
identity: (_b2 = (_a2 = v.description) == null ? void 0 : _a2.identity) != null ? _b2 : ""
|
|
4284
|
+
};
|
|
4285
|
+
});
|
|
4286
|
+
setIsLoading(true);
|
|
4287
|
+
fetchedRef.current = true;
|
|
4288
|
+
validatorCountRef.current = validators.length;
|
|
4289
|
+
fetchLogos(identities).then((result) => {
|
|
4290
|
+
setLogos(result);
|
|
4291
|
+
}).catch(console.error).finally(() => {
|
|
4292
|
+
setIsLoading(false);
|
|
4293
|
+
});
|
|
4294
|
+
}, [validators, fetchLogos]);
|
|
4295
|
+
return { logos, isLoading };
|
|
4296
|
+
};
|
|
4297
|
+
|
|
4187
4298
|
// src/components/highlight.tsx
|
|
4188
|
-
var
|
|
4189
|
-
var
|
|
4299
|
+
var import_react18 = require("@chakra-ui/react");
|
|
4300
|
+
var import_react19 = require("react");
|
|
4190
4301
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
4191
4302
|
var HighlightText = (_a2) => {
|
|
4192
4303
|
var _b2 = _a2, {
|
|
@@ -4202,14 +4313,14 @@ var HighlightText = (_a2) => {
|
|
|
4202
4313
|
"highlightIntensity",
|
|
4203
4314
|
"children"
|
|
4204
4315
|
]);
|
|
4205
|
-
const [isHighlighted, setIsHighlighted] = (0,
|
|
4206
|
-
const isMountedRef = (0,
|
|
4207
|
-
const timeoutRef = (0,
|
|
4316
|
+
const [isHighlighted, setIsHighlighted] = (0, import_react19.useState)(false);
|
|
4317
|
+
const isMountedRef = (0, import_react19.useRef)(false);
|
|
4318
|
+
const timeoutRef = (0, import_react19.useRef)(void 0);
|
|
4208
4319
|
const childrenString = String(children);
|
|
4209
|
-
const previousValueRef = (0,
|
|
4320
|
+
const previousValueRef = (0, import_react19.useRef)(childrenString);
|
|
4210
4321
|
const highlightOpacity = highlightIntensity === "subtle" ? "15" : "50";
|
|
4211
4322
|
const boxShadowStrength = highlightIntensity === "subtle" ? "10" : "25";
|
|
4212
|
-
(0,
|
|
4323
|
+
(0, import_react19.useEffect)(() => {
|
|
4213
4324
|
if (!isMountedRef.current) {
|
|
4214
4325
|
isMountedRef.current = true;
|
|
4215
4326
|
if (highlightOnMount) {
|
|
@@ -4238,7 +4349,7 @@ var HighlightText = (_a2) => {
|
|
|
4238
4349
|
};
|
|
4239
4350
|
}, [childrenString, duration, highlightOnMount]);
|
|
4240
4351
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
4241
|
-
|
|
4352
|
+
import_react18.Text,
|
|
4242
4353
|
__spreadProps(__spreadValues({}, textProps), {
|
|
4243
4354
|
transition: `all ${duration}ms ease-out`,
|
|
4244
4355
|
bg: isHighlighted ? `${highlightColor}/${highlightOpacity}` : "transparent",
|
|
@@ -4253,12 +4364,12 @@ var HighlightText = (_a2) => {
|
|
|
4253
4364
|
};
|
|
4254
4365
|
|
|
4255
4366
|
// src/components/sidebar/sidebar.tsx
|
|
4256
|
-
var
|
|
4367
|
+
var import_react20 = require("@chakra-ui/react");
|
|
4257
4368
|
var import_lu2 = require("react-icons/lu");
|
|
4258
|
-
var
|
|
4369
|
+
var import_react21 = require("react");
|
|
4259
4370
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
4260
4371
|
var Sidebar = ({ children, trigger, ariaLabel }) => {
|
|
4261
|
-
const [isOpen, setIsOpen] = (0,
|
|
4372
|
+
const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
|
|
4262
4373
|
const handleTriggerClick = () => {
|
|
4263
4374
|
setIsOpen(true);
|
|
4264
4375
|
};
|
|
@@ -4267,7 +4378,7 @@ var Sidebar = ({ children, trigger, ariaLabel }) => {
|
|
|
4267
4378
|
};
|
|
4268
4379
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
4269
4380
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { onClick: handleTriggerClick, style: { cursor: "pointer" }, children: trigger }),
|
|
4270
|
-
isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
4381
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react20.Portal, { children: [
|
|
4271
4382
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
4272
4383
|
"div",
|
|
4273
4384
|
{
|
|
@@ -4335,13 +4446,13 @@ var Sidebar = ({ children, trigger, ariaLabel }) => {
|
|
|
4335
4446
|
}
|
|
4336
4447
|
),
|
|
4337
4448
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
4338
|
-
|
|
4449
|
+
import_react20.IconButton,
|
|
4339
4450
|
{
|
|
4340
4451
|
"aria-label": "Close sidebar",
|
|
4341
4452
|
variant: "ghost",
|
|
4342
4453
|
size: "sm",
|
|
4343
4454
|
onClick: handleClose,
|
|
4344
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
4455
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react20.Icon, { size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lu2.LuX, {}) })
|
|
4345
4456
|
}
|
|
4346
4457
|
)
|
|
4347
4458
|
]
|
|
@@ -4368,10 +4479,10 @@ var Sidebar = ({ children, trigger, ariaLabel }) => {
|
|
|
4368
4479
|
};
|
|
4369
4480
|
|
|
4370
4481
|
// src/components/sidebar/settings-sidebar.tsx
|
|
4371
|
-
var import_react21 = require("@chakra-ui/react");
|
|
4372
4482
|
var import_react22 = require("@chakra-ui/react");
|
|
4483
|
+
var import_react23 = require("@chakra-ui/react");
|
|
4373
4484
|
var import_next_themes = require("next-themes");
|
|
4374
|
-
var
|
|
4485
|
+
var import_react24 = require("react");
|
|
4375
4486
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
4376
4487
|
var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
4377
4488
|
const { setTheme, resolvedTheme } = (0, import_next_themes.useTheme)();
|
|
@@ -4379,19 +4490,19 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4379
4490
|
const { settings, isLoaded, updateEndpoints, updatePreferredFeeDenom, defaultSettings } = useSettings();
|
|
4380
4491
|
const { connectionType } = useConnectionType();
|
|
4381
4492
|
const { feeTokens, isLoading: feeTokensLoading } = useFeeTokens();
|
|
4382
|
-
const [restEndpoint, setRestEndpoint] = (0,
|
|
4383
|
-
const [rpcEndpoint, setRpcEndpoint] = (0,
|
|
4384
|
-
const [isValidating, setIsValidating] = (0,
|
|
4385
|
-
const [validationResults, setValidationResults] = (0,
|
|
4386
|
-
const [preferredFeeDenom, setPreferredFeeDenom] = (0,
|
|
4387
|
-
(0,
|
|
4493
|
+
const [restEndpoint, setRestEndpoint] = (0, import_react24.useState)("");
|
|
4494
|
+
const [rpcEndpoint, setRpcEndpoint] = (0, import_react24.useState)("");
|
|
4495
|
+
const [isValidating, setIsValidating] = (0, import_react24.useState)(false);
|
|
4496
|
+
const [validationResults, setValidationResults] = (0, import_react24.useState)({});
|
|
4497
|
+
const [preferredFeeDenom, setPreferredFeeDenom] = (0, import_react24.useState)(void 0);
|
|
4498
|
+
(0, import_react24.useEffect)(() => {
|
|
4388
4499
|
if (isLoaded) {
|
|
4389
4500
|
setRestEndpoint(settings.endpoints.restEndpoint);
|
|
4390
4501
|
setRpcEndpoint(settings.endpoints.rpcEndpoint);
|
|
4391
4502
|
setPreferredFeeDenom(settings.preferredFeeDenom || getChainNativeAssetDenom());
|
|
4392
4503
|
}
|
|
4393
4504
|
}, [isLoaded, settings]);
|
|
4394
|
-
const handleValidateEndpoints = (0,
|
|
4505
|
+
const handleValidateEndpoints = (0, import_react24.useCallback)(async (rest, rpc) => {
|
|
4395
4506
|
setIsValidating(true);
|
|
4396
4507
|
setValidationResults({});
|
|
4397
4508
|
try {
|
|
@@ -4411,7 +4522,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4411
4522
|
setTimeout(() => setValidationResults({}), 1e4);
|
|
4412
4523
|
}
|
|
4413
4524
|
}, []);
|
|
4414
|
-
const handleSaveSettings = (0,
|
|
4525
|
+
const handleSaveSettings = (0, import_react24.useCallback)(async (rest, rpc, feeDenom) => {
|
|
4415
4526
|
setValidationResults({});
|
|
4416
4527
|
const results = await validateEndpoints(rest, rpc);
|
|
4417
4528
|
if (!results.isValid) {
|
|
@@ -4431,13 +4542,13 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4431
4542
|
toast.success("Success!", "Settings have been saved.");
|
|
4432
4543
|
}
|
|
4433
4544
|
}, []);
|
|
4434
|
-
const handleResetToDefaults = (0,
|
|
4545
|
+
const handleResetToDefaults = (0, import_react24.useCallback)(() => {
|
|
4435
4546
|
setRestEndpoint(defaultSettings.endpoints.restEndpoint);
|
|
4436
4547
|
setRpcEndpoint(defaultSettings.endpoints.rpcEndpoint);
|
|
4437
4548
|
setPreferredFeeDenom(defaultSettings.preferredFeeDenom);
|
|
4438
4549
|
setValidationResults({});
|
|
4439
4550
|
}, []);
|
|
4440
|
-
const connectionStatusText = (0,
|
|
4551
|
+
const connectionStatusText = (0, import_react24.useMemo)(() => {
|
|
4441
4552
|
switch (connectionType) {
|
|
4442
4553
|
case CONNECTION_TYPE_NONE:
|
|
4443
4554
|
return "Failed";
|
|
@@ -4447,7 +4558,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4447
4558
|
return "Connected";
|
|
4448
4559
|
}
|
|
4449
4560
|
}, [connectionType]);
|
|
4450
|
-
const connectionStatusBadgeColor = (0,
|
|
4561
|
+
const connectionStatusBadgeColor = (0, import_react24.useMemo)(() => {
|
|
4451
4562
|
switch (connectionType) {
|
|
4452
4563
|
case CONNECTION_TYPE_NONE:
|
|
4453
4564
|
return "red";
|
|
@@ -4457,24 +4568,24 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4457
4568
|
return "green";
|
|
4458
4569
|
}
|
|
4459
4570
|
}, [connectionType]);
|
|
4460
|
-
const feeTokensCollection = (0,
|
|
4571
|
+
const feeTokensCollection = (0, import_react24.useMemo)(() => (0, import_react22.createListCollection)({
|
|
4461
4572
|
items: feeTokens.map((token) => ({
|
|
4462
4573
|
label: token.ticker || token.name,
|
|
4463
4574
|
value: token.denom,
|
|
4464
4575
|
name: token.ticker || token.name
|
|
4465
4576
|
}))
|
|
4466
4577
|
}), [feeTokens]);
|
|
4467
|
-
const handleFeeTokenChange = (0,
|
|
4578
|
+
const handleFeeTokenChange = (0, import_react24.useCallback)((denom) => {
|
|
4468
4579
|
setPreferredFeeDenom(denom || void 0);
|
|
4469
4580
|
}, []);
|
|
4470
4581
|
const hasUnsavedChanges = restEndpoint !== settings.endpoints.restEndpoint || rpcEndpoint !== settings.endpoints.rpcEndpoint || preferredFeeDenom !== settings.preferredFeeDenom;
|
|
4471
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4472
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4473
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4474
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4475
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.VStack, { gap: "6", align: "stretch", children: [
|
|
4583
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.Box, { children: [
|
|
4584
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", fontWeight: "medium", mb: "3", children: "Appearance" }),
|
|
4585
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.VStack, { gap: "3", align: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.HStack, { justify: "space-between", children: [
|
|
4586
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", children: "Dark Mode" }),
|
|
4476
4587
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4477
|
-
|
|
4588
|
+
import_react22.Switch.Root,
|
|
4478
4589
|
{
|
|
4479
4590
|
checked: resolvedTheme === "dark",
|
|
4480
4591
|
onCheckedChange: (details) => {
|
|
@@ -4482,19 +4593,19 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4482
4593
|
setTheme(newTheme);
|
|
4483
4594
|
},
|
|
4484
4595
|
children: [
|
|
4485
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4486
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4596
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Switch.HiddenInput, {}),
|
|
4597
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Switch.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Switch.Thumb, {}) })
|
|
4487
4598
|
]
|
|
4488
4599
|
}
|
|
4489
4600
|
)
|
|
4490
4601
|
] }) })
|
|
4491
4602
|
] }),
|
|
4492
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4493
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4494
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4495
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4603
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Separator, {}),
|
|
4604
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.Box, { children: [
|
|
4605
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", fontWeight: "medium", mb: "3", children: "Fee Token Preference" }),
|
|
4606
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.VStack, { gap: "3", align: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.Box, { children: [
|
|
4496
4607
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4497
|
-
|
|
4608
|
+
import_react23.Select.Root,
|
|
4498
4609
|
{
|
|
4499
4610
|
collection: feeTokensCollection,
|
|
4500
4611
|
size: "sm",
|
|
@@ -4502,35 +4613,35 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4502
4613
|
onValueChange: (details) => handleFeeTokenChange(details.value[0] || ""),
|
|
4503
4614
|
disabled: feeTokensLoading,
|
|
4504
4615
|
children: [
|
|
4505
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4506
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4507
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4508
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4509
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4616
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.Label, { children: "Preferred Fee Token" }),
|
|
4617
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.HiddenSelect, {}),
|
|
4618
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react23.Select.Control, { children: [
|
|
4619
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.ValueText, { placeholder: "Native Token (default)" }) }),
|
|
4620
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.IndicatorGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.Indicator, {}) })
|
|
4510
4621
|
] }),
|
|
4511
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4512
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4513
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4622
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.Content, { children: feeTokensCollection.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react23.Select.Item, { item, children: [
|
|
4623
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { children: item.label }),
|
|
4624
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.Select.ItemIndicator, {})
|
|
4514
4625
|
] }, item.value)) }) }) })
|
|
4515
4626
|
]
|
|
4516
4627
|
}
|
|
4517
4628
|
),
|
|
4518
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4629
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "xs", color: "fg.muted", mt: "2", children: "Select your preferred token for paying transaction fees. Only tokens with liquidity pools paired with the native token are available." })
|
|
4519
4630
|
] }) })
|
|
4520
4631
|
] }),
|
|
4521
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4522
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4523
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4524
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4525
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4526
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4527
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4632
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Separator, {}),
|
|
4633
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.Box, { children: [
|
|
4634
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", fontWeight: "medium", mb: "3", children: "BeeZee Endpoints" }),
|
|
4635
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.VStack, { gap: "4", align: "stretch", children: [
|
|
4636
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.HStack, { gap: "2", align: "center", justify: "space-between", children: [
|
|
4637
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", mb: "1", children: "Status: " }),
|
|
4638
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Badge, { colorPalette: connectionStatusBadgeColor, children: connectionStatusText })
|
|
4528
4639
|
] }) }),
|
|
4529
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4530
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4531
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4640
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.Box, { children: [
|
|
4641
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", mb: "1", children: "REST Endpoint" }),
|
|
4642
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "xs", color: "fg.muted", mb: "2", children: "Note: Endpoint must have CORS enabled to work in browser" }),
|
|
4532
4643
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4533
|
-
|
|
4644
|
+
import_react22.Input,
|
|
4534
4645
|
{
|
|
4535
4646
|
size: "sm",
|
|
4536
4647
|
placeholder: "https://rest.getbze.com",
|
|
@@ -4539,7 +4650,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4539
4650
|
}
|
|
4540
4651
|
),
|
|
4541
4652
|
validationResults.rest && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4542
|
-
|
|
4653
|
+
import_react22.Box,
|
|
4543
4654
|
{
|
|
4544
4655
|
mt: "2",
|
|
4545
4656
|
p: "3",
|
|
@@ -4549,15 +4660,15 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4549
4660
|
borderWidth: "1px",
|
|
4550
4661
|
borderColor: validationResults.rest.isValid ? "green.500/30" : "red.500/30",
|
|
4551
4662
|
borderRadius: "md",
|
|
4552
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4663
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", color: validationResults.rest.isValid ? "green.700" : "red.700", _dark: { color: validationResults.rest.isValid ? "green.300" : "red.300" }, children: validationResults.rest.error || "REST endpoint is valid" })
|
|
4553
4664
|
}
|
|
4554
4665
|
)
|
|
4555
4666
|
] }),
|
|
4556
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4557
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4558
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4667
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.Box, { children: [
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", mb: "1", children: "RPC Endpoint" }),
|
|
4669
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "xs", color: "fg.muted", mb: "2", children: "Note: Must support WebSocket (WS/WSS) connections" }),
|
|
4559
4670
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4560
|
-
|
|
4671
|
+
import_react22.Input,
|
|
4561
4672
|
{
|
|
4562
4673
|
size: "sm",
|
|
4563
4674
|
placeholder: "wss://rpc.getbze.com",
|
|
@@ -4566,7 +4677,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4566
4677
|
}
|
|
4567
4678
|
),
|
|
4568
4679
|
validationResults.rpc && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4569
|
-
|
|
4680
|
+
import_react22.Box,
|
|
4570
4681
|
{
|
|
4571
4682
|
mt: "2",
|
|
4572
4683
|
p: "3",
|
|
@@ -4576,12 +4687,12 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4576
4687
|
borderWidth: "1px",
|
|
4577
4688
|
borderColor: validationResults.rpc.isValid ? "green.500/30" : "red.500/30",
|
|
4578
4689
|
borderRadius: "md",
|
|
4579
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4690
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Text, { fontSize: "sm", color: validationResults.rpc.isValid ? "green.700" : "red.700", _dark: { color: validationResults.rpc.isValid ? "green.300" : "red.300" }, children: validationResults.rpc.error || "RPC endpoint is valid" })
|
|
4580
4691
|
}
|
|
4581
4692
|
)
|
|
4582
4693
|
] }),
|
|
4583
4694
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4584
|
-
|
|
4695
|
+
import_react22.Button,
|
|
4585
4696
|
{
|
|
4586
4697
|
size: "sm",
|
|
4587
4698
|
variant: "outline",
|
|
@@ -4593,9 +4704,9 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4593
4704
|
)
|
|
4594
4705
|
] })
|
|
4595
4706
|
] }),
|
|
4596
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4707
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react22.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react22.VStack, { gap: "3", children: [
|
|
4597
4708
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4598
|
-
|
|
4709
|
+
import_react22.Button,
|
|
4599
4710
|
{
|
|
4600
4711
|
size: "sm",
|
|
4601
4712
|
width: "full",
|
|
@@ -4606,7 +4717,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4606
4717
|
}
|
|
4607
4718
|
),
|
|
4608
4719
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
4609
|
-
|
|
4720
|
+
import_react22.Button,
|
|
4610
4721
|
{
|
|
4611
4722
|
size: "sm",
|
|
4612
4723
|
width: "full",
|
|
@@ -4621,10 +4732,10 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4621
4732
|
|
|
4622
4733
|
// src/components/sidebar/wallet-sidebar.tsx
|
|
4623
4734
|
var import_styles = require("@interchain-kit/react/styles.css");
|
|
4624
|
-
var
|
|
4625
|
-
var
|
|
4735
|
+
var import_react25 = require("@interchain-kit/react");
|
|
4736
|
+
var import_react26 = require("@chakra-ui/react");
|
|
4626
4737
|
var import_lu3 = require("react-icons/lu");
|
|
4627
|
-
var
|
|
4738
|
+
var import_react27 = require("react");
|
|
4628
4739
|
var import_core = require("@interchain-kit/core");
|
|
4629
4740
|
var import_bignumber14 = __toESM(require("bignumber.js"));
|
|
4630
4741
|
var import_bzejs5 = require("@bze/bzejs");
|
|
@@ -4645,16 +4756,16 @@ var validateAmount = (amount, coin, onError) => {
|
|
|
4645
4756
|
}
|
|
4646
4757
|
};
|
|
4647
4758
|
var BalanceItem = ({ asset, onClick, accentColor }) => {
|
|
4648
|
-
const [showSendButton, setShowSendButton] = (0,
|
|
4649
|
-
const formattedBalanceAmount = (0,
|
|
4759
|
+
const [showSendButton, setShowSendButton] = (0, import_react27.useState)(false);
|
|
4760
|
+
const formattedBalanceAmount = (0, import_react27.useMemo)(() => {
|
|
4650
4761
|
var _a2;
|
|
4651
4762
|
return prettyAmount(uAmountToBigNumberAmount(asset.amount, (_a2 = asset.decimals) != null ? _a2 : 0));
|
|
4652
4763
|
}, [asset.amount, asset.decimals]);
|
|
4653
|
-
const formattedBalanceUSDValue = (0,
|
|
4764
|
+
const formattedBalanceUSDValue = (0, import_react27.useMemo)(() => {
|
|
4654
4765
|
return shortNumberFormat(asset.USDValue);
|
|
4655
4766
|
}, [asset.USDValue]);
|
|
4656
4767
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4657
|
-
|
|
4768
|
+
import_react26.Box,
|
|
4658
4769
|
{
|
|
4659
4770
|
p: "3",
|
|
4660
4771
|
bgGradient: "to-br",
|
|
@@ -4672,10 +4783,10 @@ var BalanceItem = ({ asset, onClick, accentColor }) => {
|
|
|
4672
4783
|
onMouseLeave: () => setShowSendButton(false),
|
|
4673
4784
|
onMouseEnter: () => setShowSendButton(true),
|
|
4674
4785
|
children: [
|
|
4675
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4676
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4786
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { justify: "space-between", mb: "2", children: [
|
|
4787
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { children: [
|
|
4677
4788
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4678
|
-
|
|
4789
|
+
import_react26.Image,
|
|
4679
4790
|
{
|
|
4680
4791
|
src: asset.logo,
|
|
4681
4792
|
alt: asset.ticker,
|
|
@@ -4684,13 +4795,13 @@ var BalanceItem = ({ asset, onClick, accentColor }) => {
|
|
|
4684
4795
|
borderRadius: "full"
|
|
4685
4796
|
}
|
|
4686
4797
|
),
|
|
4687
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4688
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4689
|
-
isIbcDenom(asset.denom) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4798
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "sm", fontWeight: "medium", children: asset.ticker }),
|
|
4799
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "xs", color: "fg.muted", children: asset.name }),
|
|
4800
|
+
isIbcDenom(asset.denom) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Badge, { size: "xs", colorPalette: accentColor, children: "IBC" })
|
|
4690
4801
|
] }),
|
|
4691
|
-
showSendButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4802
|
+
showSendButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.HStack, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Button, { size: "2xs", variant: "outline", onClick, children: "Send" }) })
|
|
4692
4803
|
] }),
|
|
4693
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4804
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { justify: "space-between", children: [
|
|
4694
4805
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HighlightText, { fontSize: "sm", fontFamily: "mono", children: formattedBalanceAmount }),
|
|
4695
4806
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HighlightText, { fontSize: "sm", color: "fg.muted", children: [
|
|
4696
4807
|
"$",
|
|
@@ -4702,18 +4813,18 @@ var BalanceItem = ({ asset, onClick, accentColor }) => {
|
|
|
4702
4813
|
);
|
|
4703
4814
|
};
|
|
4704
4815
|
var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
4705
|
-
const [isLoading, setIsLoading] = (0,
|
|
4706
|
-
const [selectedCoin, setSelectedCoin] = (0,
|
|
4707
|
-
const [sendAmount, setSendAmount] = (0,
|
|
4708
|
-
const [sendAmountError, setSendAmountError] = (0,
|
|
4709
|
-
const [recipient, setRecipient] = (0,
|
|
4710
|
-
const [recipientError, setRecipientError] = (0,
|
|
4711
|
-
const [memo, setMemo] = (0,
|
|
4712
|
-
const [memoError, setMemoError] = (0,
|
|
4816
|
+
const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
|
|
4817
|
+
const [selectedCoin, setSelectedCoin] = (0, import_react27.useState)();
|
|
4818
|
+
const [sendAmount, setSendAmount] = (0, import_react27.useState)("");
|
|
4819
|
+
const [sendAmountError, setSendAmountError] = (0, import_react27.useState)("");
|
|
4820
|
+
const [recipient, setRecipient] = (0, import_react27.useState)("");
|
|
4821
|
+
const [recipientError, setRecipientError] = (0, import_react27.useState)("");
|
|
4822
|
+
const [memo, setMemo] = (0, import_react27.useState)("");
|
|
4823
|
+
const [memoError, setMemoError] = (0, import_react27.useState)("");
|
|
4713
4824
|
const { toast } = useToast();
|
|
4714
|
-
const { status, address } = (0,
|
|
4825
|
+
const { status, address } = (0, import_react25.useChain)(getChainName());
|
|
4715
4826
|
const { tx } = useSDKTx(getChainName());
|
|
4716
|
-
const coinsCollection = (0,
|
|
4827
|
+
const coinsCollection = (0, import_react26.createListCollection)({
|
|
4717
4828
|
items: balances.map((item) => {
|
|
4718
4829
|
var _a2;
|
|
4719
4830
|
return {
|
|
@@ -4723,16 +4834,16 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4723
4834
|
};
|
|
4724
4835
|
})
|
|
4725
4836
|
});
|
|
4726
|
-
const isValidForm = (0,
|
|
4837
|
+
const isValidForm = (0, import_react27.useMemo)(() => {
|
|
4727
4838
|
return selectedCoin && memoError === "" && recipientError === "" && sendAmountError === "" && sendAmount !== "" && recipient !== "";
|
|
4728
4839
|
}, [selectedCoin, memoError, recipientError, sendAmountError, sendAmount, recipient]);
|
|
4729
|
-
const resetSendForm = (0,
|
|
4840
|
+
const resetSendForm = (0, import_react27.useCallback)(() => {
|
|
4730
4841
|
setSelectedCoin(void 0);
|
|
4731
4842
|
setSendAmount("");
|
|
4732
4843
|
setRecipient("");
|
|
4733
4844
|
setMemo("");
|
|
4734
4845
|
}, []);
|
|
4735
|
-
const handleSend = (0,
|
|
4846
|
+
const handleSend = (0, import_react27.useCallback)(async () => {
|
|
4736
4847
|
var _a2, _b2;
|
|
4737
4848
|
if (!isValidForm) {
|
|
4738
4849
|
toast.error("Can not send coins!", "Please check the input data.");
|
|
@@ -4757,11 +4868,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4757
4868
|
setIsLoading(false);
|
|
4758
4869
|
onClose();
|
|
4759
4870
|
}, [address, memo, onClose, recipient, selectedCoin, sendAmount, status]);
|
|
4760
|
-
const handleCancel = (0,
|
|
4871
|
+
const handleCancel = (0, import_react27.useCallback)(() => {
|
|
4761
4872
|
resetSendForm();
|
|
4762
4873
|
onClose();
|
|
4763
4874
|
}, [onClose, resetSendForm]);
|
|
4764
|
-
const onRecipientChange = (0,
|
|
4875
|
+
const onRecipientChange = (0, import_react27.useCallback)((recipient2) => {
|
|
4765
4876
|
setRecipient(recipient2);
|
|
4766
4877
|
if (recipient2.length === 0) {
|
|
4767
4878
|
setRecipientError("");
|
|
@@ -4774,11 +4885,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4774
4885
|
setRecipientError(validate.message);
|
|
4775
4886
|
}
|
|
4776
4887
|
}, []);
|
|
4777
|
-
const onAmountChange = (0,
|
|
4888
|
+
const onAmountChange = (0, import_react27.useCallback)((amount) => {
|
|
4778
4889
|
setSendAmount(sanitizeNumberInput(amount));
|
|
4779
4890
|
setSendAmountError("");
|
|
4780
4891
|
}, []);
|
|
4781
|
-
const onCoinSelectChange = (0,
|
|
4892
|
+
const onCoinSelectChange = (0, import_react27.useCallback)((ticker) => {
|
|
4782
4893
|
if (ticker === "") return;
|
|
4783
4894
|
const selectedCoin2 = balances.find((item) => item.ticker === ticker);
|
|
4784
4895
|
if (selectedCoin2) {
|
|
@@ -4786,13 +4897,13 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4786
4897
|
validateAmount(sendAmount, selectedCoin2, setSendAmountError);
|
|
4787
4898
|
}
|
|
4788
4899
|
}, [sendAmount, balances]);
|
|
4789
|
-
const setMaxAmount = (0,
|
|
4900
|
+
const setMaxAmount = (0, import_react27.useCallback)(() => {
|
|
4790
4901
|
if (!selectedCoin) return;
|
|
4791
4902
|
const maxAmount = uAmountToBigNumberAmount(selectedCoin.amount, selectedCoin.decimals);
|
|
4792
4903
|
onAmountChange(maxAmount.toString());
|
|
4793
4904
|
validateAmount(maxAmount.toString(), selectedCoin, setSendAmountError);
|
|
4794
4905
|
}, [selectedCoin, onAmountChange]);
|
|
4795
|
-
const onMemoChange = (0,
|
|
4906
|
+
const onMemoChange = (0, import_react27.useCallback)((memo2) => {
|
|
4796
4907
|
setMemo(memo2);
|
|
4797
4908
|
if (memo2.length > 256) {
|
|
4798
4909
|
setMemoError("Memo must be less than or equal to 256 characters");
|
|
@@ -4800,16 +4911,16 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4800
4911
|
setMemoError("");
|
|
4801
4912
|
}
|
|
4802
4913
|
}, []);
|
|
4803
|
-
(0,
|
|
4914
|
+
(0, import_react27.useEffect)(() => {
|
|
4804
4915
|
if (selectedTicker !== "") {
|
|
4805
4916
|
onCoinSelectChange(selectedTicker);
|
|
4806
4917
|
}
|
|
4807
4918
|
}, [onCoinSelectChange, selectedTicker]);
|
|
4808
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4809
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4810
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.VStack, { gap: "4", align: "stretch", children: [
|
|
4920
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { justify: "space-between", align: "center", children: [
|
|
4921
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "sm", fontWeight: "medium", children: "Send Coins" }),
|
|
4811
4922
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4812
|
-
|
|
4923
|
+
import_react26.Button,
|
|
4813
4924
|
{
|
|
4814
4925
|
size: "xs",
|
|
4815
4926
|
variant: "ghost",
|
|
@@ -4819,25 +4930,25 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4819
4930
|
}
|
|
4820
4931
|
)
|
|
4821
4932
|
] }),
|
|
4822
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4933
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Box, { children: [
|
|
4823
4934
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4824
|
-
|
|
4935
|
+
import_react26.Select.Root,
|
|
4825
4936
|
{
|
|
4826
4937
|
collection: coinsCollection,
|
|
4827
4938
|
size: "sm",
|
|
4828
4939
|
value: (selectedCoin == null ? void 0 : selectedCoin.ticker) ? [selectedCoin.ticker] : [],
|
|
4829
4940
|
onValueChange: (details) => onCoinSelectChange(details.value[0] || ""),
|
|
4830
4941
|
children: [
|
|
4831
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4832
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4833
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4834
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4835
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4942
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.Label, { children: "Coin" }),
|
|
4943
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.HiddenSelect, {}),
|
|
4944
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Select.Control, { children: [
|
|
4945
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.ValueText, { placeholder: "Select coin" }) }),
|
|
4946
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.IndicatorGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.Indicator, {}) })
|
|
4836
4947
|
] }),
|
|
4837
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4838
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4948
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.Content, { children: coinsCollection.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Select.Item, { item, children: [
|
|
4949
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { gap: "2", children: [
|
|
4839
4950
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4840
|
-
|
|
4951
|
+
import_react26.Image,
|
|
4841
4952
|
{
|
|
4842
4953
|
src: item.logo,
|
|
4843
4954
|
alt: item.value,
|
|
@@ -4846,15 +4957,15 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4846
4957
|
borderRadius: "full"
|
|
4847
4958
|
}
|
|
4848
4959
|
),
|
|
4849
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4960
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { children: item.label })
|
|
4850
4961
|
] }),
|
|
4851
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4962
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Select.ItemIndicator, {})
|
|
4852
4963
|
] }, item.value)) }) }) })
|
|
4853
4964
|
]
|
|
4854
4965
|
}
|
|
4855
4966
|
),
|
|
4856
4967
|
selectedCoin && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4857
|
-
|
|
4968
|
+
import_react26.Box,
|
|
4858
4969
|
{
|
|
4859
4970
|
mt: "2",
|
|
4860
4971
|
p: "3",
|
|
@@ -4864,15 +4975,15 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4864
4975
|
borderRadius: "md",
|
|
4865
4976
|
borderWidth: "1px",
|
|
4866
4977
|
borderColor: `${accentColor}.500/30`,
|
|
4867
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4868
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4869
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4870
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4978
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { justify: "space-between", children: [
|
|
4979
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "xs", color: "fg.muted", children: "Available:" }),
|
|
4980
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.VStack, { gap: "0", align: "end", children: [
|
|
4981
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Text, { fontSize: "sm", fontWeight: "medium", children: [
|
|
4871
4982
|
uAmountToAmount(selectedCoin.amount, selectedCoin.decimals),
|
|
4872
4983
|
" ",
|
|
4873
4984
|
selectedCoin.ticker
|
|
4874
4985
|
] }),
|
|
4875
|
-
selectedCoin.USDValue.gt(0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4986
|
+
selectedCoin.USDValue.gt(0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Text, { fontSize: "xs", color: "fg.muted", children: [
|
|
4876
4987
|
"\u2248 $",
|
|
4877
4988
|
shortNumberFormat(selectedCoin.USDValue)
|
|
4878
4989
|
] })
|
|
@@ -4881,11 +4992,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4881
4992
|
}
|
|
4882
4993
|
)
|
|
4883
4994
|
] }),
|
|
4884
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4885
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4886
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
4995
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Field.Root, { invalid: sendAmountError !== "", children: [
|
|
4996
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Field.Label, { children: "Amount" }),
|
|
4997
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Group, { attached: true, w: "full", maxW: "sm", children: [
|
|
4887
4998
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4888
|
-
|
|
4999
|
+
import_react26.Input,
|
|
4889
5000
|
{
|
|
4890
5001
|
size: "sm",
|
|
4891
5002
|
placeholder: "Amount to send",
|
|
@@ -4894,14 +5005,14 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4894
5005
|
onBlur: () => validateAmount(sendAmount, selectedCoin, setSendAmountError)
|
|
4895
5006
|
}
|
|
4896
5007
|
),
|
|
4897
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5008
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Button, { variant: "outline", size: "sm", onClick: setMaxAmount, disabled: isLoading, children: "Max" })
|
|
4898
5009
|
] }),
|
|
4899
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5010
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Field.ErrorText, { children: sendAmountError })
|
|
4900
5011
|
] }) }),
|
|
4901
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4902
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5012
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Field.Root, { invalid: recipientError !== "", children: [
|
|
5013
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Field.Label, { children: "Recipient Address" }),
|
|
4903
5014
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4904
|
-
|
|
5015
|
+
import_react26.Input,
|
|
4905
5016
|
{
|
|
4906
5017
|
size: "sm",
|
|
4907
5018
|
placeholder: "bze...2a1b",
|
|
@@ -4909,20 +5020,20 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4909
5020
|
onChange: (e) => onRecipientChange(e.target.value)
|
|
4910
5021
|
}
|
|
4911
5022
|
),
|
|
4912
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5023
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Field.ErrorText, { children: recipientError })
|
|
4913
5024
|
] }) }),
|
|
4914
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4915
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5025
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Field.Root, { invalid: memoError !== "", children: [
|
|
5026
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Field.Label, { children: [
|
|
4916
5027
|
"Memo",
|
|
4917
5028
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4918
|
-
|
|
5029
|
+
import_react26.Field.RequiredIndicator,
|
|
4919
5030
|
{
|
|
4920
|
-
fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5031
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Badge, { size: "xs", variant: "surface", children: "Optional" })
|
|
4921
5032
|
}
|
|
4922
5033
|
)
|
|
4923
5034
|
] }),
|
|
4924
5035
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4925
|
-
|
|
5036
|
+
import_react26.Textarea,
|
|
4926
5037
|
{
|
|
4927
5038
|
size: "sm",
|
|
4928
5039
|
placeholder: "Transaction memo",
|
|
@@ -4932,11 +5043,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4932
5043
|
resize: "none"
|
|
4933
5044
|
}
|
|
4934
5045
|
),
|
|
4935
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5046
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Field.ErrorText, { children: memoError })
|
|
4936
5047
|
] }) }),
|
|
4937
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5048
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { gap: "2", children: [
|
|
4938
5049
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4939
|
-
|
|
5050
|
+
import_react26.Button,
|
|
4940
5051
|
{
|
|
4941
5052
|
size: "sm",
|
|
4942
5053
|
flex: "1",
|
|
@@ -4949,7 +5060,7 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4949
5060
|
}
|
|
4950
5061
|
),
|
|
4951
5062
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4952
|
-
|
|
5063
|
+
import_react26.Button,
|
|
4953
5064
|
{
|
|
4954
5065
|
size: "sm",
|
|
4955
5066
|
flex: "1",
|
|
@@ -4963,25 +5074,25 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
|
|
|
4963
5074
|
] });
|
|
4964
5075
|
};
|
|
4965
5076
|
var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
4966
|
-
const [viewState, setViewState] = (0,
|
|
4967
|
-
const [isDisconnecting, setIsDisconnecting] = (0,
|
|
4968
|
-
const [showCopiedTooltip, setShowCopiedTooltip] = (0,
|
|
4969
|
-
const [clickedBalance, setClickedBalance] = (0,
|
|
4970
|
-
const copyButtonRef = (0,
|
|
5077
|
+
const [viewState, setViewState] = (0, import_react27.useState)("balances");
|
|
5078
|
+
const [isDisconnecting, setIsDisconnecting] = (0, import_react27.useState)(false);
|
|
5079
|
+
const [showCopiedTooltip, setShowCopiedTooltip] = (0, import_react27.useState)(false);
|
|
5080
|
+
const [clickedBalance, setClickedBalance] = (0, import_react27.useState)("");
|
|
5081
|
+
const copyButtonRef = (0, import_react27.useRef)(null);
|
|
4971
5082
|
const {
|
|
4972
5083
|
status,
|
|
4973
5084
|
username,
|
|
4974
5085
|
address,
|
|
4975
5086
|
disconnect,
|
|
4976
5087
|
connect
|
|
4977
|
-
} = (0,
|
|
5088
|
+
} = (0, import_react25.useChain)(getChainName());
|
|
4978
5089
|
const { assetsBalances, isLoading: assetsLoading } = useBalances();
|
|
4979
|
-
const balancesWithoutLps = (0,
|
|
5090
|
+
const balancesWithoutLps = (0, import_react27.useMemo)(() => {
|
|
4980
5091
|
if (assetsLoading) return [];
|
|
4981
5092
|
return assetsBalances.filter((asset) => !isLpDenom(asset.denom));
|
|
4982
5093
|
}, [assetsLoading, assetsBalances]);
|
|
4983
5094
|
const nativeDenom = getChainNativeAssetDenom();
|
|
4984
|
-
const sortedBalances = (0,
|
|
5095
|
+
const sortedBalances = (0, import_react27.useMemo)(() => {
|
|
4985
5096
|
return balancesWithoutLps.sort((a, b) => {
|
|
4986
5097
|
if (a.denom === nativeDenom) return -1;
|
|
4987
5098
|
if (b.denom === nativeDenom) return 1;
|
|
@@ -4997,21 +5108,21 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
4997
5108
|
return 0;
|
|
4998
5109
|
});
|
|
4999
5110
|
}, [balancesWithoutLps]);
|
|
5000
|
-
const walletAddress = (0,
|
|
5111
|
+
const walletAddress = (0, import_react27.useMemo)(() => stringTruncateFromCenter(address != null ? address : "", 16), [address]);
|
|
5001
5112
|
const handleCopyAddress = () => {
|
|
5002
5113
|
navigator.clipboard.writeText(address);
|
|
5003
5114
|
setShowCopiedTooltip(true);
|
|
5004
5115
|
setTimeout(() => setShowCopiedTooltip(false), 2e3);
|
|
5005
5116
|
};
|
|
5006
|
-
const handleCancel = (0,
|
|
5117
|
+
const handleCancel = (0, import_react27.useCallback)(() => {
|
|
5007
5118
|
setViewState("balances");
|
|
5008
5119
|
setClickedBalance("");
|
|
5009
5120
|
}, []);
|
|
5010
|
-
const onBalanceClick = (0,
|
|
5121
|
+
const onBalanceClick = (0, import_react27.useCallback)((ticker) => {
|
|
5011
5122
|
setClickedBalance(ticker);
|
|
5012
5123
|
setViewState("send");
|
|
5013
5124
|
}, []);
|
|
5014
|
-
const handleDisconnectAll = (0,
|
|
5125
|
+
const handleDisconnectAll = (0, import_react27.useCallback)(async () => {
|
|
5015
5126
|
setIsDisconnecting(true);
|
|
5016
5127
|
try {
|
|
5017
5128
|
console.log("Disconnected from all chains");
|
|
@@ -5022,16 +5133,16 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5022
5133
|
setIsDisconnecting(false);
|
|
5023
5134
|
}
|
|
5024
5135
|
}, [disconnect]);
|
|
5025
|
-
const renderBalancesView = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5026
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5027
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5028
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5136
|
+
const renderBalancesView = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.VStack, { gap: "6", align: "stretch", children: [
|
|
5137
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Box, { children: [
|
|
5138
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "sm", fontWeight: "medium", mb: "3", children: "Balances" }),
|
|
5139
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.VStack, { gap: "2", align: "stretch", children: sortedBalances.map((bal) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BalanceItem, { asset: bal, onClick: () => onBalanceClick(bal.ticker), accentColor }, bal.denom)) })
|
|
5029
5140
|
] }),
|
|
5030
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5031
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5032
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5141
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Box, { children: [
|
|
5142
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "sm", fontWeight: "medium", mb: "3", children: "Quick Actions" }),
|
|
5143
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.VStack, { gap: "2", align: "stretch", children: [
|
|
5033
5144
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5034
|
-
|
|
5145
|
+
import_react26.Button,
|
|
5035
5146
|
{
|
|
5036
5147
|
size: "sm",
|
|
5037
5148
|
variant: "outline",
|
|
@@ -5042,7 +5153,7 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5042
5153
|
}
|
|
5043
5154
|
),
|
|
5044
5155
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5045
|
-
|
|
5156
|
+
import_react26.Button,
|
|
5046
5157
|
{
|
|
5047
5158
|
size: "sm",
|
|
5048
5159
|
variant: "outline",
|
|
@@ -5055,7 +5166,7 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5055
5166
|
}
|
|
5056
5167
|
),
|
|
5057
5168
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5058
|
-
|
|
5169
|
+
import_react26.Button,
|
|
5059
5170
|
{
|
|
5060
5171
|
size: "sm",
|
|
5061
5172
|
variant: "outline",
|
|
@@ -5069,8 +5180,8 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5069
5180
|
)
|
|
5070
5181
|
] })
|
|
5071
5182
|
] }),
|
|
5072
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5073
|
-
|
|
5183
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5184
|
+
import_react26.Button,
|
|
5074
5185
|
{
|
|
5075
5186
|
size: "sm",
|
|
5076
5187
|
width: "full",
|
|
@@ -5083,7 +5194,7 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5083
5194
|
}
|
|
5084
5195
|
) })
|
|
5085
5196
|
] });
|
|
5086
|
-
const statusColor = (0,
|
|
5197
|
+
const statusColor = (0, import_react27.useMemo)(() => {
|
|
5087
5198
|
switch (status) {
|
|
5088
5199
|
case import_core.WalletState.Connected:
|
|
5089
5200
|
return "green";
|
|
@@ -5095,15 +5206,15 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5095
5206
|
return "gray";
|
|
5096
5207
|
}
|
|
5097
5208
|
}, [status]);
|
|
5098
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5099
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5100
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5101
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5102
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5103
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.VStack, { gap: "6", align: "stretch", children: [
|
|
5210
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Box, { children: [
|
|
5211
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react25.InterchainWalletModal, {}),
|
|
5212
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { justify: "space-between", mb: "3", children: [
|
|
5213
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "sm", fontWeight: "medium", children: "Wallet Status" }),
|
|
5214
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Badge, { colorPalette: statusColor, size: "sm", children: status })
|
|
5104
5215
|
] }),
|
|
5105
5216
|
status === import_core.WalletState.Connected && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5106
|
-
|
|
5217
|
+
import_react26.Box,
|
|
5107
5218
|
{
|
|
5108
5219
|
p: "3",
|
|
5109
5220
|
bgGradient: "to-br",
|
|
@@ -5113,12 +5224,12 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5113
5224
|
borderWidth: "1px",
|
|
5114
5225
|
borderColor: `${accentColor}.500/20`,
|
|
5115
5226
|
children: [
|
|
5116
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5117
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5118
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5119
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5227
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "xs", color: "fg.muted", mb: "1", children: username != null ? username : "Address" }),
|
|
5228
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.HStack, { justify: "space-between", children: [
|
|
5229
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Text, { fontSize: "sm", fontFamily: "mono", children: walletAddress }),
|
|
5230
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react26.Box, { position: "relative", children: [
|
|
5120
5231
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5121
|
-
|
|
5232
|
+
import_react26.Button,
|
|
5122
5233
|
{
|
|
5123
5234
|
ref: copyButtonRef,
|
|
5124
5235
|
size: "xs",
|
|
@@ -5128,7 +5239,7 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5128
5239
|
}
|
|
5129
5240
|
),
|
|
5130
5241
|
showCopiedTooltip && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5131
|
-
|
|
5242
|
+
import_react26.Box,
|
|
5132
5243
|
{
|
|
5133
5244
|
position: "absolute",
|
|
5134
5245
|
top: "-35px",
|
|
@@ -5154,7 +5265,7 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5154
5265
|
}
|
|
5155
5266
|
),
|
|
5156
5267
|
status !== import_core.WalletState.Connected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5157
|
-
|
|
5268
|
+
import_react26.Button,
|
|
5158
5269
|
{
|
|
5159
5270
|
size: "sm",
|
|
5160
5271
|
variant: "solid",
|
|
@@ -5164,14 +5275,14 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
|
|
|
5164
5275
|
}
|
|
5165
5276
|
)
|
|
5166
5277
|
] }),
|
|
5167
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5278
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react26.Separator, {}),
|
|
5168
5279
|
status === import_core.WalletState.Connected && viewState === "balances" && renderBalancesView(),
|
|
5169
5280
|
status === import_core.WalletState.Connected && viewState === "send" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SendForm, { balances: sortedBalances, onClose: handleCancel, selectedTicker: clickedBalance, accentColor })
|
|
5170
5281
|
] });
|
|
5171
5282
|
};
|
|
5172
5283
|
|
|
5173
5284
|
// src/components/settings-toggle.tsx
|
|
5174
|
-
var
|
|
5285
|
+
var import_react28 = require("@chakra-ui/react");
|
|
5175
5286
|
var import_lu4 = require("react-icons/lu");
|
|
5176
5287
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
5177
5288
|
function SettingsToggle({ accentColor }) {
|
|
@@ -5179,21 +5290,21 @@ function SettingsToggle({ accentColor }) {
|
|
|
5179
5290
|
Sidebar,
|
|
5180
5291
|
{
|
|
5181
5292
|
ariaLabel: "Settings",
|
|
5182
|
-
trigger: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
5293
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react28.Button, { variant: "subtle", size: { base: "sm", md: "md" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lu4.LuSettings, {}) }),
|
|
5183
5294
|
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SettingsSidebarContent, { accentColor })
|
|
5184
5295
|
}
|
|
5185
5296
|
);
|
|
5186
5297
|
}
|
|
5187
5298
|
|
|
5188
5299
|
// src/components/testnet-banner.tsx
|
|
5189
|
-
var
|
|
5300
|
+
var import_react29 = require("@chakra-ui/react");
|
|
5190
5301
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
5191
5302
|
var TestnetBanner = () => {
|
|
5192
5303
|
if (!isTestnetChain()) {
|
|
5193
5304
|
return null;
|
|
5194
5305
|
}
|
|
5195
5306
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
5196
|
-
|
|
5307
|
+
import_react29.Box,
|
|
5197
5308
|
{
|
|
5198
5309
|
position: "fixed",
|
|
5199
5310
|
bottom: "0",
|
|
@@ -5207,7 +5318,7 @@ var TestnetBanner = () => {
|
|
|
5207
5318
|
fontSize: "xs",
|
|
5208
5319
|
fontWeight: "bold",
|
|
5209
5320
|
letterSpacing: "wide",
|
|
5210
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
5321
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react29.Text, { children: "YOU ARE ON TESTNET" })
|
|
5211
5322
|
}
|
|
5212
5323
|
);
|
|
5213
5324
|
};
|
|
@@ -5464,6 +5575,7 @@ var TestnetBanner = () => {
|
|
|
5464
5575
|
useSettings,
|
|
5465
5576
|
useSigningClient,
|
|
5466
5577
|
useToast,
|
|
5578
|
+
useValidatorLogos,
|
|
5467
5579
|
validateBZEBech32Address,
|
|
5468
5580
|
validateBech32Address,
|
|
5469
5581
|
validateEndpoints,
|