Skip to content

Commit 1a1dbae

Browse files
FabianSanchezDFabianSanchezD
committed
chore: update app to stellarwalletkit v2
1 parent b711608 commit 1a1dbae

12 files changed

Lines changed: 6192 additions & 2457 deletions

File tree

‎apps/web-app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@blend-capital/blend-sdk": "^3.2.2",
13-
"@creit.tech/stellar-wallets-kit": "^1.0.0",
13+
"@creit.tech/stellar-wallets-kit": "^2.1.0",
1414
"@emotion/react": "^11.11.0",
1515
"@emotion/styled": "^11.11.0",
1616
"@hookform/resolvers": "^5.2.2",

‎apps/web-app/src/components/WalletAutoConnect.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useEffect, useRef } from "react";
4-
import { ModuleType } from "@creit.tech/stellar-wallets-kit";
4+
import { ModuleType } from "@creit.tech/stellar-wallets-kit/types";
55
import { getStellarWalletKit } from "@/lib/helpers/stellar/wallet";
66
import { useStellarWalletStore } from "@/stores/stellarWalletStore";
77

@@ -28,17 +28,17 @@ export function WalletAutoConnect() {
2828

2929
void (async () => {
3030
try {
31-
const kit = getStellarWalletKit();
32-
const wallets = await kit.getSupportedWallets();
31+
const Kit = await getStellarWalletKit();
32+
const wallets = await Kit.refreshSupportedWallets();
3333
const platformWallet = wallets.find(
3434
(w) =>
3535
w.isPlatformWrapper &&
3636
w.isAvailable &&
3737
w.type !== ModuleType.BRIDGE_WALLET
3838
);
3939
if (!platformWallet) return;
40-
kit.setWallet(platformWallet.id);
41-
const { address: walletAddress } = await kit.getAddress();
40+
Kit.setWallet(platformWallet.id);
41+
const { address: walletAddress } = await Kit.fetchAddress();
4242
if (walletAddress) {
4343
setWallet({
4444
address: walletAddress,

‎apps/web-app/src/hooks/useStellarWallet.ts‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
"use client";
22

3-
import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";
4-
import { WALLET_CONNECT_ID } from "@creit.tech/stellar-wallets-kit/modules/walletconnect.module";
53
import { getStellarWalletKit } from "@/lib/helpers/stellar/wallet";
64
import { useStellarWalletStore } from "@/stores/stellarWalletStore";
75
import { notify } from "@/lib/toast";
@@ -21,37 +19,32 @@ export function useStellarWallet() {
2119
useStellarWalletStore();
2220

2321
const connect = async () => {
24-
const kit = getStellarWalletKit();
25-
await kit.openModal({
26-
modalTitle: "Connect to your favorite wallet",
27-
onWalletSelected: async (wallet: ISupportedWallet) => {
28-
kit.setWallet(wallet.id);
29-
const { address: walletAddress } = await kit.getAddress();
30-
setWallet({ address: walletAddress, walletName: wallet.name });
31-
32-
// When in Freighter's mobile in-app browser the only available option
33-
// is WalletConnect. Freighter will show an "Untrusted Transaction Domain"
34-
// warning the first time a transaction comes through — remind the user to
35-
// tap Trust so transactions don't get silently rejected.
36-
if (
37-
wallet.id === WALLET_CONNECT_ID &&
38-
isFreighterMobileBrowser() &&
39-
!sessionStorage.getItem(FREIGHTER_MOBILE_TOAST_KEY)
40-
) {
41-
sessionStorage.setItem(FREIGHTER_MOBILE_TOAST_KEY, "1");
42-
notify("Trust this domain in Freighter", "info", {
43-
description:
44-
"When Freighter asks to trust this domain, tap Trust — otherwise transaction signing will be blocked.",
45-
duration: 8000,
46-
});
47-
}
48-
},
49-
});
22+
const Kit = await getStellarWalletKit();
23+
24+
// v2 authModal returns { address } directly — no callback needed.
25+
const { address: walletAddress } = await Kit.authModal();
26+
setWallet({ address: walletAddress, walletName: "Stellar Wallet" });
27+
28+
// When in Freighter's mobile in-app browser the only available option
29+
// is WalletConnect. Freighter will show an "Untrusted Transaction Domain"
30+
// warning the first time a transaction comes through — remind the user to
31+
// tap Trust so transactions don't get silently rejected.
32+
if (
33+
isFreighterMobileBrowser() &&
34+
!sessionStorage.getItem(FREIGHTER_MOBILE_TOAST_KEY)
35+
) {
36+
sessionStorage.setItem(FREIGHTER_MOBILE_TOAST_KEY, "1");
37+
notify("Trust this domain in Freighter", "info", {
38+
description:
39+
"When Freighter asks to trust this domain, tap Trust — otherwise transaction signing will be blocked.",
40+
duration: 8000,
41+
});
42+
}
5043
};
5144

5245
const disconnect = async () => {
53-
const kit = getStellarWalletKit();
54-
await kit.disconnect();
46+
const Kit = await getStellarWalletKit();
47+
await Kit.disconnect();
5548
clearWallet();
5649
};
5750

‎apps/web-app/src/lib/config/stellar.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { z } from "zod";
2-
import { WalletNetwork } from "@creit.tech/stellar-wallets-kit";
2+
import { Networks as WalletNetwork } from "@creit.tech/stellar-wallets-kit/types";
33

44
type NetworkType = "mainnet" | "testnet" | "futurenet" | "custom";
55
interface Network {

‎apps/web-app/src/lib/constants/network.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { z } from "zod";
2-
import { WalletNetwork } from "@creit.tech/stellar-wallets-kit";
2+
import { Networks as WalletNetwork } from "@creit.tech/stellar-wallets-kit/types";
33

44
export type NetworkType = "mainnet" | "testnet" | "futurenet" | "custom";
55
export interface Network {

‎apps/web-app/src/lib/helpers/stellar/network.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { WalletNetwork } from "@creit.tech/stellar-wallets-kit";
1+
import { Networks as WalletNetwork } from "@creit.tech/stellar-wallets-kit/types";
22
import { networkPassphrase } from "@/lib/constants/network";
33

44
export type StellarNetworkName = "testnet" | "mainnet";

‎apps/web-app/src/lib/helpers/stellar/wallet/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
export {
2-
getStellarWalletKit,
3-
getWallet,
4-
} from "./walletKit";
1+
export { getStellarWalletKit, getWallet } from "./walletKit";
52
export {
63
signStellarTransactionWithWallet,
74
type SignStellarTransactionParams,

‎apps/web-app/src/lib/helpers/stellar/wallet/signTransaction.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,13 @@ export async function signStellarTransactionWithWallet({
1010
unsignedTransactionXdr,
1111
signerPublicKey,
1212
}: SignStellarTransactionParams): Promise<string> {
13-
const stellarWalletKit = getStellarWalletKit();
13+
const Kit = await getStellarWalletKit();
1414
const networkPassphrase = getCurrentNetworkPassphrase();
1515

16-
const { signedTxXdr } = await stellarWalletKit.signTransaction(
17-
unsignedTransactionXdr,
18-
{
19-
address: signerPublicKey,
20-
networkPassphrase,
21-
}
22-
);
16+
const { signedTxXdr } = await Kit.signTransaction(unsignedTransactionXdr, {
17+
address: signerPublicKey,
18+
networkPassphrase,
19+
});
2320

2421
return signedTxXdr;
2522
}

‎apps/web-app/src/lib/helpers/stellar/wallet/walletKit.ts‎

Lines changed: 86 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,98 @@
11
"use client";
22

3-
import {
4-
StellarWalletsKit,
5-
FREIGHTER_ID,
6-
FreighterModule,
7-
AlbedoModule,
8-
xBullModule,
9-
LobstrModule,
10-
} from "@creit.tech/stellar-wallets-kit";
11-
import { LedgerModule } from "@creit.tech/stellar-wallets-kit/modules/ledger.module";
12-
import {
13-
WalletConnectAllowedMethods,
14-
WalletConnectModule,
15-
} from "@creit.tech/stellar-wallets-kit/modules/walletconnect.module";
3+
import type { StellarWalletsKit as StellarWalletsKitClass } from "@creit.tech/stellar-wallets-kit";
4+
import { Networks } from "@creit.tech/stellar-wallets-kit/types";
165
import { getCurrentNetworkPassphrase } from "../network";
176

18-
let stellarWalletKitInstance: StellarWalletsKit | null = null;
7+
type Kit = typeof StellarWalletsKitClass;
198

20-
export function getStellarWalletKit(): StellarWalletsKit {
9+
let kit: Kit | null = null;
10+
let initPromise: Promise<Kit> | null = null;
11+
12+
/**
13+
* Lazily loads and initialises the Stellar Wallets Kit.
14+
*
15+
* The @creit.tech/stellar-wallets-kit v2 root module initialises
16+
* @preact/signals at module scope and reads `globalThis.localStorage`,
17+
* which crashes during Next.js SSR/static prerendering. By dynamically
18+
* importing the package only inside this function we guarantee the code
19+
* only ever runs in the browser.
20+
*/
21+
export async function getStellarWalletKit(): Promise<Kit> {
2122
if (typeof window === "undefined") {
22-
throw new Error("Stellar Wallet Kit solo puede usarse en el navegador.");
23+
throw new Error("Stellar Wallet Kit can only be used in the browser.");
2324
}
24-
if (!stellarWalletKitInstance) {
25-
const network = getCurrentNetworkPassphrase();
26-
stellarWalletKitInstance = new StellarWalletsKit({
27-
network,
28-
selectedWalletId: FREIGHTER_ID,
29-
modalTheme: {
30-
bgColor: "#1C1C1C",
31-
textColor: "rgba(255,255,255,0.85)",
32-
solidTextColor: "#FFFFFF",
33-
headerButtonColor: "#229EDF",
34-
dividerColor: "rgba(255,255,255,0.08)",
35-
helpBgColor: "rgba(255,255,255,0.04)",
36-
notAvailableTextColor: "rgba(255,255,255,0.35)",
37-
notAvailableBgColor: "rgba(255,255,255,0.04)",
38-
notAvailableBorderColor: "rgba(255,255,255,0.08)",
39-
},
40-
modules: [
41-
new FreighterModule(),
42-
new AlbedoModule(),
43-
new xBullModule(),
44-
new LedgerModule(),
45-
new LobstrModule(),
46-
new WalletConnectModule({
47-
url: "https://nekoprotocol.xyz",
48-
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? "",
49-
method: WalletConnectAllowedMethods.SIGN,
50-
name: "Neko Protocol",
51-
description: "Neko - All in one platform for RWA tokens",
52-
icons: ["/Neko.svg"],
53-
network,
54-
}),
55-
],
56-
});
25+
26+
if (kit) return kit;
27+
28+
if (!initPromise) {
29+
initPromise = (async () => {
30+
const [
31+
{ StellarWalletsKit },
32+
{ FreighterModule },
33+
{ AlbedoModule },
34+
{ xBullModule },
35+
{ LedgerModule },
36+
{ LobstrModule },
37+
{ WalletConnectModule },
38+
] = await Promise.all([
39+
import("@creit.tech/stellar-wallets-kit"),
40+
import("@creit.tech/stellar-wallets-kit/modules/freighter"),
41+
import("@creit.tech/stellar-wallets-kit/modules/albedo"),
42+
import("@creit.tech/stellar-wallets-kit/modules/xbull"),
43+
import("@creit.tech/stellar-wallets-kit/modules/ledger"),
44+
import("@creit.tech/stellar-wallets-kit/modules/lobstr"),
45+
import("@creit.tech/stellar-wallets-kit/modules/wallet-connect"),
46+
]);
47+
48+
const network = getCurrentNetworkPassphrase() as Networks;
49+
50+
StellarWalletsKit.init({
51+
network,
52+
modules: [
53+
new FreighterModule(),
54+
new AlbedoModule(),
55+
new xBullModule(),
56+
new LedgerModule(),
57+
new LobstrModule(),
58+
new WalletConnectModule({
59+
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || "",
60+
metadata: {
61+
name: "Neko",
62+
description: "Neko — All-in-one platform for RWAs on Stellar",
63+
url: "https://nekoprotocol.xyz",
64+
icons: ["/Neko.svg"],
65+
},
66+
}),
67+
],
68+
theme: {
69+
background: "#1C1C1C",
70+
"background-secondary": "#121212",
71+
"foreground-strong": "#FFFFFF",
72+
foreground: "rgba(255,255,255,0.85)",
73+
"foreground-secondary": "rgba(255,255,255,0.6)",
74+
primary: "#229EDF",
75+
"primary-foreground": "#FFFFFF",
76+
transparent: "rgba(0, 0, 0, 0)",
77+
lighter: "rgba(255,255,255,0.08)",
78+
light: "rgba(255,255,255,0.06)",
79+
"light-gray": "rgba(255,255,255,0.35)",
80+
gray: "rgba(255,255,255,0.25)",
81+
danger: "oklch(57.7% 0.245 27.325)",
82+
border: "rgba(255,255,255,0.08)",
83+
shadow:
84+
"0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2)",
85+
"border-radius": "0.75rem",
86+
"font-family": "inherit",
87+
},
88+
});
89+
90+
kit = StellarWalletsKit;
91+
return StellarWalletsKit;
92+
})();
5793
}
58-
return stellarWalletKitInstance;
59-
}
6094

61-
export function resetStellarWalletKit(): void {
62-
stellarWalletKitInstance = null;
95+
return initPromise;
6396
}
6497

6598
export const getWallet = () => getStellarWalletKit();

‎apps/web-app/src/providers/WalletProvider.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,24 @@ interface StellarSignOptions {
1515
submitUrl?: string;
1616
[key: string]: unknown;
1717
}
18-
import { getWallet, type MappedBalances } from "@/lib/helpers/stellar/wallet";
18+
import {
19+
getStellarWalletKit,
20+
type MappedBalances,
21+
} from "@/lib/helpers/stellar/wallet";
1922
import storage from "@/lib/helpers/storage";
2023
import { useBalances } from "@/hooks/useBalances";
2124
import { POLL_INTERVAL, STORAGE_KEYS } from "@/lib/constants/wallet";
2225

23-
const getWalletInstance = () => {
26+
const getWalletInstance = async () => {
2427
if (typeof window === "undefined") {
2528
throw new Error("Wallet can only be accessed in the browser");
2629
}
27-
return getWallet();
30+
return getStellarWalletKit();
2831
};
2932

30-
const signTransaction = (xdr: string, options: StellarSignOptions) => {
31-
const wallet = getWalletInstance();
32-
return wallet.signTransaction(xdr, options);
33+
const signTransaction = async (xdr: string, options: StellarSignOptions) => {
34+
const Kit = await getWalletInstance();
35+
return Kit.signTransaction(xdr, options);
3336
};
3437

3538
export interface WalletContextType {
@@ -108,13 +111,10 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
108111

109112
try {
110113
popupLock.current = true;
111-
const wallet = getWalletInstance();
112-
wallet.setWallet(walletId);
114+
const Kit = await getWalletInstance();
115+
Kit.setWallet(walletId);
113116
if (walletId !== "freighter" && walletAddr !== null) return;
114-
const [a, n] = await Promise.all([
115-
wallet.getAddress(),
116-
wallet.getNetwork(),
117-
]);
117+
const [a, n] = await Promise.all([Kit.getAddress(), Kit.getNetwork()]);
118118

119119
if (!a.address) storage.setItem(STORAGE_KEYS.walletId, "");
120120
if (

0 commit comments

Comments
 (0)