Upgrade Stellar Wallet Kits to the latest version#1855
Upgrade Stellar Wallet Kits to the latest version#1855jeesunikim wants to merge 3 commits intomainfrom
Conversation
- Migrate from @creit.tech/stellar-wallets-kit (npm) to @creit-tech/stellar-wallets-kit (jsr) - Update to new static API: StellarWalletsKit.init(), .authModal(), .signTransaction(), etc. - Replace openModal() with authModal() which returns address directly - Update module imports to use new paths (e.g., /modules/albedo) - Use Networks enum from /types instead of WalletNetwork - Add DynamicWalletKitProvider for client-side only loading with next/dynamic - Simplify WalletKitContextProvider to use static methods - Update all consumers: ConnectWallet, useSignWithExtensionWallet, InvokeContractForm
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
|
Preview is available here: |
There was a problem hiding this comment.
Pull request overview
This PR upgrades the Stellar Wallets Kit integration to the newer @creit-tech/stellar-wallets-kit SDK, moving from instance-based usage to the SDK’s static API and adjusting client-only initialization in Next.js.
Changes:
- Replace
@creit.tech/stellar-wallets-kitusage with@creit-tech/stellar-wallets-kit(jsr:2.0.0-beta.9) and update imports/APIs accordingly. - Refactor wallet-kit initialization to run client-side only (via a dynamic provider +
StellarWalletsKit.init()). - Update signing/auth flows to use
StellarWalletsKit.authModal()/signTransaction()and refresh network limit constants.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/useSignWithExtensionWallet.ts | Switch signing/auth to static SDK methods and gate usage on initialization. |
| src/helpers/getWalletKitNetwork.ts | Update network mapping to new SDK types (Networks). |
| src/helpers/errorUtils.ts | Treat new package name as “external” for error classification. |
| src/constants/networkLimits.ts | Update Soroban network limits window values. |
| src/components/WalletKit/WalletKitContextProvider.tsx | Refactor kit setup to StellarWalletsKit.init() + expose isInitialized. |
| src/components/WalletKit/DynamicWalletKitProvider.tsx | New SSR-disabled provider wrapper to ensure client-only loading. |
| src/components/WalletKit/ConnectWallet.tsx | Update connect/disconnect/autoconnect flows to use static SDK methods. |
| src/app/layout.tsx | Swap provider to dynamic client-only wallet kit provider. |
| src/app/(sidebar)/smart-contracts/contract-explorer/components/InvokeContractForm.tsx | Update contract invoke signing to use static SDK signing. |
| package.json | Replace old wallet-kit dependency with new jsr: dependency. |
| pnpm-lock.yaml | Lockfile updates for new wallet-kit SDK + transitive deps. |
| .tool-versions | Add asdf tool pins (Node/Yarn). |
Comments suppressed due to low confidence (1)
src/components/WalletKit/ConnectWallet.tsx:45
disconnect()now always callsStellarWalletsKit.disconnect()even if the kit hasn't been initialized yet. Ifdisconnect()can run beforeWalletKitContextProviderfinishes initialization (or if init fails), this can throw and prevent local state cleanup. Consider guarding withwalletKitContext.isInitializedand/or wrapping the SDK call in a try/catch soupdateWalletKit/localStorage cleanup always happens.
const disconnect = () => {
updateWalletKit({
publicKey: undefined,
walletType: undefined,
});
StellarWalletsKit.disconnect();
setShowModal(false);
setConnected(false);
setHasAttemptedAutoConnect(false);
localStorageSavedWallet.remove();
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const { address } = await StellarWalletsKit.authModal(); | ||
|
|
||
| if (!address) { | ||
| const errorMessage = "Unable to load wallet information"; | ||
| setErrorMessageOnConnect(errorMessage); | ||
| disconnect(); | ||
| return; | ||
| } | ||
|
|
||
| localStorageSavedWallet.set({ | ||
| id: option.id, | ||
| network: { | ||
| id: network.id, | ||
| label: network.label, | ||
| }, | ||
| }); | ||
|
|
||
| trackEvent(TrackingEvent.WALLET_KIT_SELECTED, { | ||
| walletType: option.id, | ||
| }); | ||
| }, | ||
| updateWalletKit({ | ||
| publicKey: address, | ||
| }); | ||
| setConnected(true); | ||
|
|
||
| // Get the selected wallet ID to save | ||
| const wallets = await StellarWalletsKit.refreshSupportedWallets(); | ||
| const availableWallet = wallets.find((w) => w.isAvailable); | ||
|
|
||
| if (availableWallet) { | ||
| localStorageSavedWallet.set({ | ||
| id: availableWallet.id, | ||
| network: { | ||
| id: network.id, | ||
| label: network.label, | ||
| }, | ||
| }); | ||
|
|
||
| trackEvent(TrackingEvent.WALLET_KIT_SELECTED, { | ||
| walletType: availableWallet.id, | ||
| }); | ||
| } |
There was a problem hiding this comment.
connectWallet() saves availableWallet.id by picking the first wallet where isAvailable is true. This is not necessarily the wallet the user actually selected in authModal(), so the persisted wallet ID (and the tracking event) can be incorrect and break auto-connect on reload. Prefer using the wallet identifier returned by authModal() (if provided), or otherwise capture the actual selected wallet during the auth flow instead of guessing from availability.
| const connectWallet = async () => { | ||
| try { | ||
| await walletKitInstance.walletKit?.openModal({ | ||
| onWalletSelected: async (option: ISupportedWallet) => { | ||
| walletKitInstance.walletKit?.setWallet(option.id); | ||
| const isWalletConnected = await handleSetWalletAddress({ | ||
| skipRequestAccess: false, | ||
| }); | ||
|
|
||
| if (!isWalletConnected) { | ||
| const errorMessage = "Unable to load wallet information"; | ||
| setErrorMessageOnConnect(errorMessage); | ||
| disconnect(); | ||
| return; | ||
| } | ||
| const { address } = await StellarWalletsKit.authModal(); | ||
|
|
There was a problem hiding this comment.
connectWallet() calls StellarWalletsKit.authModal() without checking walletKitContext.isInitialized, even though other flows (auto-connect, signing) explicitly gate SDK calls on initialization. If the user clicks “Connect Wallet” before the provider finishes StellarWalletsKit.init(), this can fail and show a confusing error. Consider early-returning (or disabling the button) until walletKitContext.isInitialized is true.
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
isInProgress is set to true at the start of signTx, but there are code paths where it never gets reset (e.g., when the user closes authModal() and you intentionally suppress the error message, or when getErrorMsg() returns an empty string for Ledger "is busy" errors). This can leave the hook permanently stuck "in progress" and prevent subsequent signing attempts. Consider resetting isInProgress in a finally block (or explicitly when the modal is closed / when errors are intentionally suppressed).
| } | |
| } | |
| setIsInProgress(false); |
|
Preview is available here: |
No description provided.