Skip to content

Upgrade Stellar Wallet Kits to the latest version #1742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jeesunikim wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Upgrade Stellar Wallet Kits to the latest version #1742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
"dependencies": {
"@amplitude/analytics-browser": "^2.20.1",
"@creit.tech/stellar-wallets-kit": "^1.9.3",
"@creit-tech/stellar-wallets-kit": "jsr:2.0.0-beta.6",
"@ledgerhq/hw-app-str": "^7.2.4",
"@ledgerhq/hw-transport-webhid": "^6.30.6",
"@monaco-editor/react": "^4.7.0",
Expand Down
2,280 changes: 1,425 additions & 855 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/WalletKit/ConnectWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useContext, useEffect, useState } from "react";
import { Button, Modal, Text } from "@stellar/design-system";
import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";
import { ISupportedWallet } from "@creit-tech/stellar-wallets-kit";
import { useStore } from "@/store/useStore";

import { useAccountInfo } from "@/query/useAccountInfo";
Expand Down
50 changes: 21 additions & 29 deletions src/components/WalletKit/WalletKitContextProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,25 @@
"use client";

import { createContext, useEffect, useMemo, useState } from "react";
import { createContext, useEffect, useState } from "react";
import { useStore } from "@/store/useStore";

import {
AlbedoModule,
FreighterModule,
HanaModule,
LobstrModule,
RabetModule,
StellarWalletsKit,
HotWalletModule,
xBullModule,
} from "@creit.tech/stellar-wallets-kit";
import { LedgerModule } from "@creit.tech/stellar-wallets-kit/modules/ledger.module";
import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
import { defaultModules } from "@creit-tech/stellar-wallets-kit/modules/utils";
import { LedgerModule } from "@creit-tech/stellar-wallets-kit/modules/ledger";
import { HotWalletModule } from "@creit-tech/stellar-wallets-kit/modules/hotwallet";

import { getWalletKitNetwork } from "@/helpers/getWalletKitNetwork";
import { localStorageSavedTheme } from "@/helpers/localStorageSavedTheme";
import { localStorageSavedWallet } from "@/helpers/localStorageSavedWallet";
import { SavedWallet } from "@/types/types";

type WalletKitProps = {
walletKit?: StellarWalletsKit;
walletKit: typeof StellarWalletsKit;
walletId?: string;
};

export const WalletKitContext = createContext<WalletKitProps>({
walletKit: undefined,
walletKit: StellarWalletsKit,
});

export const WalletKitContextProvider = ({
Expand All @@ -36,8 +29,14 @@ export const WalletKitContextProvider = ({
}) => {
const { network, theme, setTheme } = useStore();
const [savedWallet, setSavedWallet] = useState<SavedWallet | null>(null);
const [isClient, setIsClient] = useState(false);
const networkType = getWalletKitNetwork(network.id);

// Set isClient flag after mount
useEffect(() => {
setIsClient(true);
}, []);

useEffect(() => {
const savedTheme = localStorageSavedTheme.get();

Expand All @@ -57,10 +56,11 @@ export const WalletKitContextProvider = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const walletKitInstance = useMemo(() => {
// Only initialize on client side to avoid "window is not defined" errors in terminal
if (typeof window === "undefined") {
return undefined;
// Initialize wallet kit when dependencies change
useEffect(() => {
// Only initialize on client side
if (!isClient) {
return;
}

const isDarkTheme = theme === "sds-theme-dark";
Expand Down Expand Up @@ -99,19 +99,11 @@ export const WalletKitContextProvider = ({
notAvailableBorderColor: "#161616",
};

const TEST_MODULES = [
new AlbedoModule(),
new xBullModule(),
new FreighterModule(),
new LobstrModule(),
new RabetModule(),
new HanaModule(),
new LedgerModule(),
];
const TEST_MODULES = [...defaultModules(), new LedgerModule()];

const PROD_MODULES = [...TEST_MODULES, new HotWalletModule()];

return new StellarWalletsKit({
StellarWalletsKit.init({
network: networkType,
selectedWalletId: savedWallet?.id || "",
modules: network.id === "mainnet" ? PROD_MODULES : TEST_MODULES,
Expand All @@ -135,7 +127,7 @@ export const WalletKitContextProvider = ({
return (
<WalletKitContext.Provider
value={{
walletKit: walletKitInstance,
walletKit: StellarWalletsKit,
walletId: savedWallet?.id,
}}
>
Expand Down
2 changes: 1 addition & 1 deletion src/helpers/errorUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const isExternalError = (error: Error) => {

if (
stack.includes("stellar-wallets-kit") ||
stack.includes("@creit.tech/stellar-wallets-kit") ||
stack.includes("@creit-tech/stellar-wallets-kit") ||
stack.includes("@ledgerhq/") ||
stack.includes("@trezor/")
) {
Expand Down
12 changes: 6 additions & 6 deletions src/helpers/getWalletKitNetwork.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { NetworkType } from "@/types/types";
import { Networks } from "@stellar/stellar-sdk";

import { WalletNetwork } from "@creit.tech/stellar-wallets-kit";
import { NetworkType } from "@/types/types";

export const getWalletKitNetwork = (network: NetworkType) => {
switch (network) {
case "testnet":
return WalletNetwork.TESTNET;
return Networks.TESTNET;
case "mainnet":
return WalletNetwork.PUBLIC;
return Networks.PUBLIC;
case "futurenet":
return WalletNetwork.FUTURENET;
return Networks.FUTURENET;
// @TODO: stellar wallets kit doesn't support CUSTOM
// case "custom":
default:
return WalletNetwork.TESTNET;
return Networks.TESTNET;
}
};
4 changes: 3 additions & 1 deletion src/hooks/useSignWithExtensionWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useCallback, useContext, useEffect, useState } from "react";
import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";
import { ISupportedWallet } from "@creit-tech/stellar-wallets-kit";

import { WalletKitContext } from "@/components/WalletKit/WalletKitContextProvider";
import { getWalletKitNetwork } from "@/helpers/getWalletKitNetwork";
Expand All @@ -19,6 +19,8 @@ export const useSignWithExtensionWallet = ({

const walletKitInstance = useContext(WalletKitContext);

console.log("walletKitInstance: ", walletKitInstance);

const [signedTxXdr, setSignedTxXdr] = useState("");
const [successMsg, setSuccessMsg] = useState("");
const [errorMsg, setErrorMsg] = useState("");
Expand Down
Loading