solariskit 1.1.0 → 1.3.0
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import React, { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
|
|
3
3
|
import { createMapValueFn, createNormalizeValueFn } from "@vanilla-extract/sprinkles/createUtils";
|
|
4
4
|
import { createSprinkles } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
|
|
5
|
-
import { useBalance, useConfig, useConnect, useConnection, useConnectionEffect, useConnectors, useDisconnect, useEnsAvatar, useEnsName, usePublicClient, useSignMessage, useSwitchChain } from "wagmi";
|
|
5
|
+
import { useBalance, useChainId, useConfig, useConnect, useConnection, useConnectionEffect, useConnectors, useDisconnect, useEnsAvatar, useEnsName, usePublicClient, useSignMessage, useSwitchChain } from "wagmi";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import clsx from "clsx";
|
|
8
8
|
import { polyconDataUri } from "@akshatmittal/polycons";
|
|
@@ -1592,7 +1592,7 @@ function AsyncImage({ alt, background, borderColor, borderRadius, useAsImage, bo
|
|
|
1592
1592
|
width: typeof width === "string" ? width : void 0,
|
|
1593
1593
|
testId,
|
|
1594
1594
|
children: [/* @__PURE__ */ jsx(Box, {
|
|
1595
|
-
...isRemoteImage ? {
|
|
1595
|
+
...src ? isRemoteImage ? {
|
|
1596
1596
|
"aria-hidden": true,
|
|
1597
1597
|
as: "img",
|
|
1598
1598
|
onLoad: setRemoteImageLoaded,
|
|
@@ -1601,7 +1601,7 @@ function AsyncImage({ alt, background, borderColor, borderRadius, useAsImage, bo
|
|
|
1601
1601
|
"aria-hidden": true,
|
|
1602
1602
|
as: "img",
|
|
1603
1603
|
src
|
|
1604
|
-
},
|
|
1604
|
+
} : { "aria-hidden": true },
|
|
1605
1605
|
height: "full",
|
|
1606
1606
|
position: "absolute",
|
|
1607
1607
|
...ios ? { WebkitUserSelect: "none" } : {},
|
|
@@ -1777,6 +1777,12 @@ const DropdownIcon = () => /* @__PURE__ */ jsxs("svg", {
|
|
|
1777
1777
|
})]
|
|
1778
1778
|
});
|
|
1779
1779
|
|
|
1780
|
+
//#endregion
|
|
1781
|
+
//#region src/utils/isChainIdSupported.ts
|
|
1782
|
+
function isChainIdSupported(chains, chainId) {
|
|
1783
|
+
return chainId != null && chains.some((chain) => chain.id === chainId);
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1780
1786
|
//#endregion
|
|
1781
1787
|
//#region src/components/RainbowKitProvider/provideRainbowKitChains.ts
|
|
1782
1788
|
const getChainIconUrl = (chainId) => `https://static.createmytoken.com/images/chains/${chainId}.png`;
|
|
@@ -1794,15 +1800,32 @@ const RainbowKitChainContext = createContext({
|
|
|
1794
1800
|
});
|
|
1795
1801
|
function RainbowKitChainProvider({ chainSearchThreshold = 5, children, initialChain }) {
|
|
1796
1802
|
const { chains } = useConfig();
|
|
1803
|
+
const { status } = useConnection();
|
|
1804
|
+
const wagmiChainId = useChainId();
|
|
1805
|
+
const { mutate: switchChain } = useSwitchChain();
|
|
1806
|
+
const appliedInitialChainIdRef = useRef(void 0);
|
|
1807
|
+
const initialChainId = typeof initialChain === "number" ? initialChain : initialChain?.id;
|
|
1808
|
+
const configuredInitialChainId = isChainIdSupported(chains, initialChainId) ? initialChainId : void 0;
|
|
1809
|
+
useEffect(() => {
|
|
1810
|
+
if (status !== "disconnected" || configuredInitialChainId == null) return;
|
|
1811
|
+
if (appliedInitialChainIdRef.current === configuredInitialChainId) return;
|
|
1812
|
+
appliedInitialChainIdRef.current = configuredInitialChainId;
|
|
1813
|
+
if (wagmiChainId !== configuredInitialChainId) switchChain({ chainId: configuredInitialChainId });
|
|
1814
|
+
}, [
|
|
1815
|
+
configuredInitialChainId,
|
|
1816
|
+
status,
|
|
1817
|
+
switchChain,
|
|
1818
|
+
wagmiChainId
|
|
1819
|
+
]);
|
|
1797
1820
|
return /* @__PURE__ */ jsx(RainbowKitChainContext.Provider, {
|
|
1798
1821
|
value: useMemo(() => ({
|
|
1799
1822
|
chains: provideRainbowKitChains(chains),
|
|
1800
1823
|
chainSearchThreshold,
|
|
1801
|
-
initialChainId
|
|
1824
|
+
initialChainId
|
|
1802
1825
|
}), [
|
|
1803
1826
|
chainSearchThreshold,
|
|
1804
1827
|
chains,
|
|
1805
|
-
|
|
1828
|
+
initialChainId
|
|
1806
1829
|
]),
|
|
1807
1830
|
children
|
|
1808
1831
|
});
|
|
@@ -2124,9 +2147,16 @@ function useProfile({ address, includeBalance }) {
|
|
|
2124
2147
|
};
|
|
2125
2148
|
}
|
|
2126
2149
|
|
|
2150
|
+
//#endregion
|
|
2151
|
+
//#region src/hooks/useSelectedChainId.ts
|
|
2152
|
+
function useSelectedChainId(connectedChainId) {
|
|
2153
|
+
const wagmiChainId = useChainId();
|
|
2154
|
+
return connectedChainId ?? wagmiChainId;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2127
2157
|
//#endregion
|
|
2128
2158
|
//#region src/hooks/useChainId.ts
|
|
2129
|
-
function useChainId() {
|
|
2159
|
+
function useChainId$1() {
|
|
2130
2160
|
const { chain: activeChain } = useConnection();
|
|
2131
2161
|
return activeChain?.id ?? null;
|
|
2132
2162
|
}
|
|
@@ -2276,7 +2306,7 @@ const TransactionStoreContext = React.createContext(null);
|
|
|
2276
2306
|
function TransactionStoreProvider({ children }) {
|
|
2277
2307
|
const provider = usePublicClient();
|
|
2278
2308
|
const { address } = useConnection();
|
|
2279
|
-
const chainId = useChainId();
|
|
2309
|
+
const chainId = useChainId$1();
|
|
2280
2310
|
const { refetch } = useBalance({
|
|
2281
2311
|
address,
|
|
2282
2312
|
query: { enabled: false }
|
|
@@ -2322,7 +2352,7 @@ function useTransactionStore() {
|
|
|
2322
2352
|
function useRecentTransactions() {
|
|
2323
2353
|
const store = useTransactionStore();
|
|
2324
2354
|
const { address } = useConnection();
|
|
2325
|
-
const chainId = useChainId();
|
|
2355
|
+
const chainId = useChainId$1();
|
|
2326
2356
|
const [transactions, setTransactions] = useState(() => store && address && chainId ? store.getTransactions(address, chainId) : []);
|
|
2327
2357
|
useEffect(() => {
|
|
2328
2358
|
if (store && address && chainId) {
|
|
@@ -2578,7 +2608,7 @@ function setRainbowKitVersion({ version }) {
|
|
|
2578
2608
|
}
|
|
2579
2609
|
function useFingerprint() {
|
|
2580
2610
|
const fingerprint = useCallback(() => {
|
|
2581
|
-
setRainbowKitVersion({ version: "1.
|
|
2611
|
+
setRainbowKitVersion({ version: "1.3.0" });
|
|
2582
2612
|
}, []);
|
|
2583
2613
|
useEffect(() => {
|
|
2584
2614
|
fingerprint();
|
|
@@ -2651,7 +2681,9 @@ function addRecentWalletId(walletId) {
|
|
|
2651
2681
|
function useWalletConnectors(mergeEIP6963WithRkConnectors = false) {
|
|
2652
2682
|
const rainbowKitChains = useRainbowKitChains();
|
|
2653
2683
|
const initialChainId = useInitialChainId();
|
|
2654
|
-
const
|
|
2684
|
+
const selectedChainId = useChainId();
|
|
2685
|
+
const { mutateAsync: connect } = useConnect();
|
|
2686
|
+
const { mutateAsync: switchChain } = useSwitchChain();
|
|
2655
2687
|
const defaultCreatedConnectors = useConnectors();
|
|
2656
2688
|
const { setIsWalletConnectModalOpen } = useWalletConnectOpenState();
|
|
2657
2689
|
const defaultConnectors = defaultCreatedConnectors.map((connector) => ({
|
|
@@ -2660,11 +2692,24 @@ function useWalletConnectors(mergeEIP6963WithRkConnectors = false) {
|
|
|
2660
2692
|
}));
|
|
2661
2693
|
async function connectWallet(connector, parameters) {
|
|
2662
2694
|
const walletChainId = await connector.getChainId();
|
|
2663
|
-
const
|
|
2695
|
+
const targetChainId = parameters?.chainId ?? selectedChainId ?? initialChainId ?? (isChainIdSupported(rainbowKitChains, walletChainId) ? walletChainId : void 0) ?? rainbowKitChains[0]?.id;
|
|
2696
|
+
let result = await connect({
|
|
2664
2697
|
...parameters,
|
|
2665
|
-
chainId:
|
|
2698
|
+
chainId: targetChainId,
|
|
2666
2699
|
connector
|
|
2667
2700
|
});
|
|
2701
|
+
if (targetChainId && connector.switchChain) {
|
|
2702
|
+
if (await connector.getChainId() !== targetChainId) {
|
|
2703
|
+
const chain = await switchChain({
|
|
2704
|
+
chainId: targetChainId,
|
|
2705
|
+
connector
|
|
2706
|
+
});
|
|
2707
|
+
result = {
|
|
2708
|
+
...result,
|
|
2709
|
+
chainId: chain.id
|
|
2710
|
+
};
|
|
2711
|
+
}
|
|
2712
|
+
}
|
|
2668
2713
|
if (result) addRecentWalletId(connector.id);
|
|
2669
2714
|
return result;
|
|
2670
2715
|
}
|
|
@@ -2939,7 +2984,7 @@ function SignIn({ onClose, onCloseModal }) {
|
|
|
2939
2984
|
}, [getNonce]);
|
|
2940
2985
|
const mobile = isMobile();
|
|
2941
2986
|
const { address, chain: activeChain } = useConnection();
|
|
2942
|
-
const {
|
|
2987
|
+
const { mutateAsync: signMessage } = useSignMessage();
|
|
2943
2988
|
const signIn = async () => {
|
|
2944
2989
|
try {
|
|
2945
2990
|
const chainId = activeChain?.id;
|
|
@@ -2974,7 +3019,7 @@ function SignIn({ onClose, onCloseModal }) {
|
|
|
2974
3019
|
...x,
|
|
2975
3020
|
status: "signing"
|
|
2976
3021
|
}));
|
|
2977
|
-
signature = await
|
|
3022
|
+
signature = await signMessage({ message });
|
|
2978
3023
|
} catch (error) {
|
|
2979
3024
|
if (error instanceof UserRejectedRequestError) return setState((x) => ({
|
|
2980
3025
|
...x,
|
|
@@ -3423,7 +3468,7 @@ const DisconnectIcon = () => /* @__PURE__ */ jsxs("svg", {
|
|
|
3423
3468
|
function useClearRecentTransactions() {
|
|
3424
3469
|
const store = useTransactionStore();
|
|
3425
3470
|
const { address } = useConnection();
|
|
3426
|
-
const chainId = useChainId();
|
|
3471
|
+
const chainId = useChainId$1();
|
|
3427
3472
|
return useCallback(() => {
|
|
3428
3473
|
if (!address || !chainId) throw new Error("No address or chain ID found");
|
|
3429
3474
|
store.clearTransactions(address, chainId);
|
|
@@ -3834,7 +3879,7 @@ function AccountModal({ onClose, open }) {
|
|
|
3834
3879
|
address,
|
|
3835
3880
|
includeBalance: open
|
|
3836
3881
|
});
|
|
3837
|
-
const { disconnect } = useDisconnect();
|
|
3882
|
+
const { mutate: disconnect } = useDisconnect();
|
|
3838
3883
|
if (!address) return null;
|
|
3839
3884
|
return /* @__PURE__ */ jsx(Fragment$1, { children: address && /* @__PURE__ */ jsx(Dialog, {
|
|
3840
3885
|
onClose,
|
|
@@ -4008,28 +4053,24 @@ var SearchInputClassName = "_5a0qia2";
|
|
|
4008
4053
|
//#endregion
|
|
4009
4054
|
//#region src/components/ChainModal/ChainModal.tsx
|
|
4010
4055
|
function ChainModal({ onClose, open }) {
|
|
4011
|
-
const { chainId } = useConnection();
|
|
4056
|
+
const { chainId: connectedChainId, isConnected } = useConnection();
|
|
4057
|
+
const currentChainId = useSelectedChainId(connectedChainId);
|
|
4012
4058
|
const { chains } = useConfig();
|
|
4013
4059
|
const [pendingChainId, setPendingChainId] = useState(null);
|
|
4014
4060
|
const [searchQuery, setSearchQuery] = useState("");
|
|
4015
|
-
const { switchChain } = useSwitchChain({ mutation: {
|
|
4061
|
+
const { mutate: switchChain } = useSwitchChain({ mutation: {
|
|
4016
4062
|
onMutate: ({ chainId: _chainId }) => {
|
|
4017
4063
|
setPendingChainId(_chainId);
|
|
4018
4064
|
},
|
|
4019
|
-
onSuccess: () => {
|
|
4020
|
-
if (pendingChainId) setPendingChainId(null);
|
|
4021
|
-
},
|
|
4022
|
-
onError: () => {
|
|
4023
|
-
if (pendingChainId) setPendingChainId(null);
|
|
4024
|
-
},
|
|
4025
4065
|
onSettled: () => {
|
|
4066
|
+
setPendingChainId(null);
|
|
4026
4067
|
onClose();
|
|
4027
4068
|
}
|
|
4028
4069
|
} });
|
|
4029
|
-
const { disconnect } = useDisconnect();
|
|
4070
|
+
const { mutate: disconnect } = useDisconnect();
|
|
4030
4071
|
const titleId = "rk_chain_modal_title";
|
|
4031
4072
|
const mobile = isMobile();
|
|
4032
|
-
const
|
|
4073
|
+
const isConnectedToUnsupportedChain = isConnected && !isChainIdSupported(chains, connectedChainId);
|
|
4033
4074
|
const chainIconSize = mobile ? "36" : "28";
|
|
4034
4075
|
const rainbowkitChains = useRainbowKitChains();
|
|
4035
4076
|
const chainSearchThreshold = useChainSearchThreshold();
|
|
@@ -4042,7 +4083,6 @@ function ChainModal({ onClose, open }) {
|
|
|
4042
4083
|
useEffect(() => {
|
|
4043
4084
|
if (!open) setSearchQuery("");
|
|
4044
4085
|
}, [open]);
|
|
4045
|
-
if (!chainId) return null;
|
|
4046
4086
|
return /* @__PURE__ */ jsx(Dialog, {
|
|
4047
4087
|
onClose,
|
|
4048
4088
|
open,
|
|
@@ -4077,7 +4117,7 @@ function ChainModal({ onClose, open }) {
|
|
|
4077
4117
|
/* @__PURE__ */ jsx(CloseButton, { onClose })
|
|
4078
4118
|
]
|
|
4079
4119
|
}),
|
|
4080
|
-
|
|
4120
|
+
isConnectedToUnsupportedChain && /* @__PURE__ */ jsx(Box, {
|
|
4081
4121
|
marginX: "8",
|
|
4082
4122
|
textAlign: mobile ? "center" : "left",
|
|
4083
4123
|
children: /* @__PURE__ */ jsx(Text, {
|
|
@@ -4110,7 +4150,7 @@ function ChainModal({ onClose, open }) {
|
|
|
4110
4150
|
filteredChains.map(({ iconBackground, iconUrl, id, name }, idx) => {
|
|
4111
4151
|
return /* @__PURE__ */ jsx(Chain$1, {
|
|
4112
4152
|
chainId: id,
|
|
4113
|
-
currentChainId
|
|
4153
|
+
currentChainId,
|
|
4114
4154
|
switchChain,
|
|
4115
4155
|
chainIconSize,
|
|
4116
4156
|
isLoading: pendingChainId === id,
|
|
@@ -4131,7 +4171,7 @@ function ChainModal({ onClose, open }) {
|
|
|
4131
4171
|
children: t("chains.search.no_results")
|
|
4132
4172
|
})
|
|
4133
4173
|
}),
|
|
4134
|
-
|
|
4174
|
+
isConnectedToUnsupportedChain && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
|
|
4135
4175
|
background: "generalBorderDim",
|
|
4136
4176
|
height: "1",
|
|
4137
4177
|
marginX: "8"
|
|
@@ -5332,7 +5372,7 @@ function ConnectOptions({ onClose }) {
|
|
|
5332
5372
|
function ConnectModal({ onClose, open }) {
|
|
5333
5373
|
const titleId = "rk_connect_title";
|
|
5334
5374
|
const connectionStatus = useConnectionStatus();
|
|
5335
|
-
const { disconnect } = useDisconnect();
|
|
5375
|
+
const { mutate: disconnect } = useDisconnect();
|
|
5336
5376
|
const { isConnecting } = useConnection();
|
|
5337
5377
|
const onAuthCancel = React.useCallback(() => {
|
|
5338
5378
|
onClose();
|
|
@@ -5398,7 +5438,7 @@ function ModalProvider({ children }) {
|
|
|
5398
5438
|
const connectionStatus = useConnectionStatus();
|
|
5399
5439
|
const { chainId } = useConnection();
|
|
5400
5440
|
const { chains } = useConfig();
|
|
5401
|
-
const isCurrentChainSupported = chains
|
|
5441
|
+
const isCurrentChainSupported = isChainIdSupported(chains, chainId);
|
|
5402
5442
|
const closeModals = useCallback(({ keepConnectModalOpen = false } = {}) => {
|
|
5403
5443
|
if (!keepConnectModalOpen) closeConnectModal();
|
|
5404
5444
|
closeAccountModal();
|
|
@@ -5423,7 +5463,7 @@ function ModalProvider({ children }) {
|
|
|
5423
5463
|
connectModalOpen,
|
|
5424
5464
|
isWalletConnectModalOpen,
|
|
5425
5465
|
openAccountModal: isCurrentChainSupported && connectionStatus === "connected" ? openAccountModal : void 0,
|
|
5426
|
-
openChainModal:
|
|
5466
|
+
openChainModal: chains.length > 0 ? openChainModal : void 0,
|
|
5427
5467
|
openConnectModal: connectionStatus === "disconnected" || connectionStatus === "unauthenticated" ? openConnectModal : void 0,
|
|
5428
5468
|
setIsWalletConnectModalOpen
|
|
5429
5469
|
}), [
|
|
@@ -5435,6 +5475,7 @@ function ModalProvider({ children }) {
|
|
|
5435
5475
|
openChainModal,
|
|
5436
5476
|
openConnectModal,
|
|
5437
5477
|
isCurrentChainSupported,
|
|
5478
|
+
chains.length,
|
|
5438
5479
|
isWalletConnectModalOpen
|
|
5439
5480
|
]),
|
|
5440
5481
|
children: [
|
|
@@ -5497,10 +5538,10 @@ function useConnectModal() {
|
|
|
5497
5538
|
const noop = () => {};
|
|
5498
5539
|
function ConnectButtonRenderer({ children }) {
|
|
5499
5540
|
const isMounted = useIsMounted();
|
|
5500
|
-
const { address } = useConnection();
|
|
5501
|
-
const
|
|
5541
|
+
const { address, chainId: connectedChainId } = useConnection();
|
|
5542
|
+
const chainId = useSelectedChainId(connectedChainId);
|
|
5502
5543
|
const { chains: wagmiChains } = useConfig();
|
|
5503
|
-
const
|
|
5544
|
+
const isConnectedChainSupported = connectedChainId ? isChainIdSupported(wagmiChains, connectedChainId) : true;
|
|
5504
5545
|
const rainbowkitChainsById = useRainbowKitChainsById();
|
|
5505
5546
|
const authenticationStatus = useAuthenticationStatus() ?? void 0;
|
|
5506
5547
|
const rainbowKitChain = chainId ? rainbowkitChainsById[chainId] : void 0;
|
|
@@ -5545,7 +5586,7 @@ function ConnectButtonRenderer({ children }) {
|
|
|
5545
5586
|
iconUrl: resolvedChainIconUrl,
|
|
5546
5587
|
id: chainId,
|
|
5547
5588
|
name: chainName,
|
|
5548
|
-
unsupported: !
|
|
5589
|
+
unsupported: !isConnectedChainSupported
|
|
5549
5590
|
} : void 0,
|
|
5550
5591
|
chainModalOpen,
|
|
5551
5592
|
connectModalOpen,
|
|
@@ -5587,6 +5628,59 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
|
|
|
5587
5628
|
return ready ? /* @__PURE__ */ jsx(ConnectButtonRenderer, { children: ({ account, chain, mounted, openAccountModal, openChainModal, openConnectModal }) => {
|
|
5588
5629
|
const ready = mounted && connectionStatus !== "loading";
|
|
5589
5630
|
const unsupportedChain = chain?.unsupported ?? false;
|
|
5631
|
+
const chainButton = chain && (chains.length > 1 || unsupportedChain) ? /* @__PURE__ */ jsxs(Box, {
|
|
5632
|
+
alignItems: "center",
|
|
5633
|
+
"aria-label": "Chain Selector",
|
|
5634
|
+
as: "button",
|
|
5635
|
+
background: unsupportedChain ? "connectButtonBackgroundError" : "connectButtonBackground",
|
|
5636
|
+
borderRadius: "connectButton",
|
|
5637
|
+
boxShadow: "connectButton",
|
|
5638
|
+
className: touchableStyles({
|
|
5639
|
+
active: "shrink",
|
|
5640
|
+
hover: "grow"
|
|
5641
|
+
}),
|
|
5642
|
+
color: unsupportedChain ? "connectButtonTextError" : "connectButtonText",
|
|
5643
|
+
display: mapResponsiveValue(chainStatus, (value) => value === "none" ? "none" : "flex"),
|
|
5644
|
+
fontFamily: "body",
|
|
5645
|
+
fontWeight: "bold",
|
|
5646
|
+
gap: "6",
|
|
5647
|
+
onClick: openChainModal,
|
|
5648
|
+
paddingX: "10",
|
|
5649
|
+
paddingY: "8",
|
|
5650
|
+
testId: unsupportedChain ? "wrong-network-button" : "chain-button",
|
|
5651
|
+
transition: "default",
|
|
5652
|
+
type: "button",
|
|
5653
|
+
children: [unsupportedChain ? /* @__PURE__ */ jsx(Box, {
|
|
5654
|
+
alignItems: "center",
|
|
5655
|
+
display: "flex",
|
|
5656
|
+
height: "24",
|
|
5657
|
+
paddingX: "4",
|
|
5658
|
+
children: t("connect_wallet.wrong_network.label")
|
|
5659
|
+
}) : /* @__PURE__ */ jsxs(Box, {
|
|
5660
|
+
alignItems: "center",
|
|
5661
|
+
display: "flex",
|
|
5662
|
+
gap: "6",
|
|
5663
|
+
children: [chain.hasIcon ? /* @__PURE__ */ jsx(Box, {
|
|
5664
|
+
display: mapResponsiveValue(chainStatus, (value) => value === "full" || value === "icon" ? "block" : "none"),
|
|
5665
|
+
height: "24",
|
|
5666
|
+
width: "24",
|
|
5667
|
+
children: /* @__PURE__ */ jsx(AsyncImage, {
|
|
5668
|
+
alt: chain.name ?? "Chain icon",
|
|
5669
|
+
background: chain.iconBackground,
|
|
5670
|
+
borderRadius: "full",
|
|
5671
|
+
height: "24",
|
|
5672
|
+
src: chain.iconUrl,
|
|
5673
|
+
width: "24"
|
|
5674
|
+
})
|
|
5675
|
+
}) : null, /* @__PURE__ */ jsx(Box, {
|
|
5676
|
+
display: mapResponsiveValue(chainStatus, (value) => {
|
|
5677
|
+
if (value === "icon" && !chain.iconUrl) return "block";
|
|
5678
|
+
return value === "full" || value === "name" ? "block" : "none";
|
|
5679
|
+
}),
|
|
5680
|
+
children: chain.name ?? chain.id
|
|
5681
|
+
})]
|
|
5682
|
+
}), /* @__PURE__ */ jsx(DropdownIcon, {})]
|
|
5683
|
+
}, unsupportedChain ? "unsupported" : "supported") : null;
|
|
5590
5684
|
return /* @__PURE__ */ jsx(Box, {
|
|
5591
5685
|
display: "flex",
|
|
5592
5686
|
gap: "12",
|
|
@@ -5598,59 +5692,7 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
|
|
|
5598
5692
|
userSelect: "none"
|
|
5599
5693
|
}
|
|
5600
5694
|
},
|
|
5601
|
-
children: ready && account && connectionStatus === "connected" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
5602
|
-
alignItems: "center",
|
|
5603
|
-
"aria-label": "Chain Selector",
|
|
5604
|
-
as: "button",
|
|
5605
|
-
background: unsupportedChain ? "connectButtonBackgroundError" : "connectButtonBackground",
|
|
5606
|
-
borderRadius: "connectButton",
|
|
5607
|
-
boxShadow: "connectButton",
|
|
5608
|
-
className: touchableStyles({
|
|
5609
|
-
active: "shrink",
|
|
5610
|
-
hover: "grow"
|
|
5611
|
-
}),
|
|
5612
|
-
color: unsupportedChain ? "connectButtonTextError" : "connectButtonText",
|
|
5613
|
-
display: mapResponsiveValue(chainStatus, (value) => value === "none" ? "none" : "flex"),
|
|
5614
|
-
fontFamily: "body",
|
|
5615
|
-
fontWeight: "bold",
|
|
5616
|
-
gap: "6",
|
|
5617
|
-
onClick: openChainModal,
|
|
5618
|
-
paddingX: "10",
|
|
5619
|
-
paddingY: "8",
|
|
5620
|
-
testId: unsupportedChain ? "wrong-network-button" : "chain-button",
|
|
5621
|
-
transition: "default",
|
|
5622
|
-
type: "button",
|
|
5623
|
-
children: [unsupportedChain ? /* @__PURE__ */ jsx(Box, {
|
|
5624
|
-
alignItems: "center",
|
|
5625
|
-
display: "flex",
|
|
5626
|
-
height: "24",
|
|
5627
|
-
paddingX: "4",
|
|
5628
|
-
children: t("connect_wallet.wrong_network.label")
|
|
5629
|
-
}) : /* @__PURE__ */ jsxs(Box, {
|
|
5630
|
-
alignItems: "center",
|
|
5631
|
-
display: "flex",
|
|
5632
|
-
gap: "6",
|
|
5633
|
-
children: [chain.hasIcon ? /* @__PURE__ */ jsx(Box, {
|
|
5634
|
-
display: mapResponsiveValue(chainStatus, (value) => value === "full" || value === "icon" ? "block" : "none"),
|
|
5635
|
-
height: "24",
|
|
5636
|
-
width: "24",
|
|
5637
|
-
children: /* @__PURE__ */ jsx(AsyncImage, {
|
|
5638
|
-
alt: chain.name ?? "Chain icon",
|
|
5639
|
-
background: chain.iconBackground,
|
|
5640
|
-
borderRadius: "full",
|
|
5641
|
-
height: "24",
|
|
5642
|
-
src: chain.iconUrl,
|
|
5643
|
-
width: "24"
|
|
5644
|
-
})
|
|
5645
|
-
}) : null, /* @__PURE__ */ jsx(Box, {
|
|
5646
|
-
display: mapResponsiveValue(chainStatus, (value) => {
|
|
5647
|
-
if (value === "icon" && !chain.iconUrl) return "block";
|
|
5648
|
-
return value === "full" || value === "name" ? "block" : "none";
|
|
5649
|
-
}),
|
|
5650
|
-
children: chain.name ?? chain.id
|
|
5651
|
-
})]
|
|
5652
|
-
}), /* @__PURE__ */ jsx(DropdownIcon, {})]
|
|
5653
|
-
}, unsupportedChain ? "unsupported" : "supported"), !unsupportedChain && /* @__PURE__ */ jsxs(Box, {
|
|
5695
|
+
children: ready && account && connectionStatus === "connected" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [chainButton, !unsupportedChain && /* @__PURE__ */ jsxs(Box, {
|
|
5654
5696
|
alignItems: "center",
|
|
5655
5697
|
as: "button",
|
|
5656
5698
|
background: "connectButtonBackground",
|
|
@@ -5709,7 +5751,7 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
|
|
|
5709
5751
|
})]
|
|
5710
5752
|
})
|
|
5711
5753
|
})]
|
|
5712
|
-
})] }) : /* @__PURE__ */ jsx(Box, {
|
|
5754
|
+
})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [chainButton, /* @__PURE__ */ jsx(Box, {
|
|
5713
5755
|
as: "button",
|
|
5714
5756
|
background: "accentColor",
|
|
5715
5757
|
borderRadius: "connectButton",
|
|
@@ -5728,7 +5770,7 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
|
|
|
5728
5770
|
transition: "default",
|
|
5729
5771
|
type: "button",
|
|
5730
5772
|
children: mounted && label === "Connect Wallet" ? t("connect_wallet.label") : label
|
|
5731
|
-
}, "connect")
|
|
5773
|
+
}, "connect")] })
|
|
5732
5774
|
});
|
|
5733
5775
|
} }) : null;
|
|
5734
5776
|
}
|
|
@@ -5894,4 +5936,4 @@ const WalletButton = ({ wallet }) => {
|
|
|
5894
5936
|
WalletButton.Custom = WalletButtonRenderer;
|
|
5895
5937
|
|
|
5896
5938
|
//#endregion
|
|
5897
|
-
export { createAuthenticationAdapter as S, useTransactionStore as _, useConnectModal as a, EmojiAvatar as b, ChainModal as c, dialogContentMobile as d, RainbowKitProvider as f, cssObjectFromTheme as g, cssStringFromTheme as h, useChainModal as i, AccountModal as l, baseTheme as m, ConnectButton as n, MobileOptions as o, lightTheme as p, useAccountModal as r, DesktopOptions as s, WalletButton as t, dialogContent as u, useChainId as v, RainbowKitAuthenticationProvider as x, Avatar as y };
|
|
5939
|
+
export { createAuthenticationAdapter as S, useTransactionStore as _, useConnectModal as a, EmojiAvatar as b, ChainModal as c, dialogContentMobile as d, RainbowKitProvider as f, cssObjectFromTheme as g, cssStringFromTheme as h, useChainModal as i, AccountModal as l, baseTheme as m, ConnectButton as n, MobileOptions as o, lightTheme as p, useAccountModal as r, DesktopOptions as s, WalletButton as t, dialogContent as u, useChainId$1 as v, RainbowKitAuthenticationProvider as x, Avatar as y };
|
|
@@ -146,6 +146,6 @@ interface ChainModalProps {
|
|
|
146
146
|
declare function ChainModal({
|
|
147
147
|
onClose,
|
|
148
148
|
open
|
|
149
|
-
}: ChainModalProps): React.JSX.Element
|
|
149
|
+
}: ChainModalProps): React.JSX.Element;
|
|
150
150
|
//#endregion
|
|
151
151
|
export { AccountModal, type AccountModalProps, Avatar, type AvatarProps, ChainModal, type ChainModalProps, ConnectButton, type ConnectButtonProps, EmojiAvatar, type AvatarComponentProps as EmojiAvatarProps, RainbowKitProvider, type RainbowKitProviderProps, WalletButton, type WalletButtonProps, emojiAvatarForAddress };
|
package/dist/components/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { b as EmojiAvatar, c as ChainModal, f as RainbowKitProvider, l as AccountModal, n as ConnectButton, t as WalletButton, y as Avatar } from "../WalletButton-
|
|
2
|
+
import { b as EmojiAvatar, c as ChainModal, f as RainbowKitProvider, l as AccountModal, n as ConnectButton, t as WalletButton, y as Avatar } from "../WalletButton-DpDL4qfh.js";
|
|
3
3
|
|
|
4
4
|
//#region src/components/Avatar/emojiAvatarForAddress.ts
|
|
5
5
|
const colors = [
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { S as createAuthenticationAdapter, _ as useTransactionStore, a as useConnectModal, d as dialogContentMobile, f as RainbowKitProvider, g as cssObjectFromTheme, h as cssStringFromTheme, i as useChainModal, m as baseTheme, n as ConnectButton, o as MobileOptions, p as lightTheme, r as useAccountModal, s as DesktopOptions, t as WalletButton, u as dialogContent, v as useChainId, x as RainbowKitAuthenticationProvider } from "./WalletButton-
|
|
2
|
+
import { S as createAuthenticationAdapter, _ as useTransactionStore, a as useConnectModal, d as dialogContentMobile, f as RainbowKitProvider, g as cssObjectFromTheme, h as cssStringFromTheme, i as useChainModal, m as baseTheme, n as ConnectButton, o as MobileOptions, p as lightTheme, r as useAccountModal, s as DesktopOptions, t as WalletButton, u as dialogContent, v as useChainId$1, x as RainbowKitAuthenticationProvider } from "./WalletButton-DpDL4qfh.js";
|
|
3
3
|
import { a as injectedWallet, i as getWalletConnectConnector, n as safeWallet, o as base, r as metaMaskWallet, t as walletConnectWallet } from "./walletConnectors-C02JPPxf.js";
|
|
4
4
|
import { useCallback } from "react";
|
|
5
5
|
import { createConfig, http, useConnection } from "wagmi";
|
|
@@ -167,7 +167,7 @@ function getDefaultWallets(parameters) {
|
|
|
167
167
|
function useAddRecentTransaction() {
|
|
168
168
|
const store = useTransactionStore();
|
|
169
169
|
const { address } = useConnection();
|
|
170
|
-
const chainId = useChainId();
|
|
170
|
+
const chainId = useChainId$1();
|
|
171
171
|
return useCallback((transaction) => {
|
|
172
172
|
if (!address || !chainId) throw new Error("No address or chain ID found");
|
|
173
173
|
store.addTransaction(address, chainId, transaction);
|
|
@@ -30,4 +30,4 @@ declare const metaMaskWallet: ({
|
|
|
30
30
|
//#region src/wallets/walletConnectors/safeWallet/safeWallet.d.ts
|
|
31
31
|
declare const safeWallet: () => Wallet;
|
|
32
32
|
//#endregion
|
|
33
|
-
export { base, baseAccount, injectedWallet, metaMaskWallet, safeWallet, walletConnectWallet };
|
|
33
|
+
export { BaseOptions, base, baseAccount, injectedWallet, metaMaskWallet, safeWallet, walletConnectWallet };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solariskit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "The best way to connect a wallet",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blockchain",
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"@vanilla-extract/sprinkles": "1.6.5",
|
|
39
39
|
"clsx": "2.1.1",
|
|
40
40
|
"cuer": "0.0.3",
|
|
41
|
+
"qr": "0.5.5",
|
|
41
42
|
"react-remove-scroll": "2.7.2",
|
|
42
43
|
"@akshatmittal/polycons": "1.1.0"
|
|
43
44
|
},
|