Skip to content

Commit a037c47

Browse files
akbarsaputraitakbarsaputrait
committed
fix: example
1 parent 515f06e commit a037c47

File tree

11 files changed

+439
-1318
lines changed

11 files changed

+439
-1318
lines changed

‎examples/nextjs-app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@headlessui/react": "^2.2.0",
1515
"@rainbow-me/rainbowkit": "^2.2.8",
1616
"@rozoai/intent-common": "0.1.8",
17-
"@rozoai/intent-pay": "0.1.14",
17+
"@rozoai/intent-pay": "workspace:*",
1818
"@tanstack/react-query": "^5.51.11",
1919
"@types/react-syntax-highlighter": "^15.5.13",
2020
"@wagmi/core": "^2.22.0",

‎examples/nextjs-app/src/app/basic/page.tsx‎

Lines changed: 154 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import {
1414
rozoStellarEURC,
1515
TokenSymbol,
1616
} from "@rozoai/intent-common";
17-
import { RozoPayButton, useRozoPayUI } from "@rozoai/intent-pay";
17+
import {
18+
RozoPayButton,
19+
useRozoConnectStellar,
20+
useRozoPayUI,
21+
} from "@rozoai/intent-pay";
1822
import { useCallback, useEffect, useMemo, useState } from "react";
1923
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
2024
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
@@ -175,6 +179,152 @@ const CodeSnippetDisplay = ({ code }: { code: string }) => {
175179
);
176180
};
177181

182+
/**
183+
* Simple Connect Stellar Wallet Component
184+
*/
185+
const ConnectStellarWallet = () => {
186+
const {
187+
kit,
188+
isConnected,
189+
publicKey,
190+
connector,
191+
setConnector,
192+
disconnect,
193+
setPublicKey,
194+
} = useRozoConnectStellar();
195+
const [wallets, setWallets] = useState<any[]>([]);
196+
const [isLoading, setIsLoading] = useState(false);
197+
const [showWallets, setShowWallets] = useState(false);
198+
199+
// Fetch available wallets
200+
useEffect(() => {
201+
const fetchWallets = async () => {
202+
if (!kit) return;
203+
setIsLoading(true);
204+
try {
205+
const availableWallets = await kit.getSupportedWallets();
206+
setWallets(availableWallets.filter((w: any) => w.isAvailable));
207+
} catch (error) {
208+
console.error("Error fetching Stellar wallets:", error);
209+
} finally {
210+
setIsLoading(false);
211+
}
212+
};
213+
214+
fetchWallets();
215+
}, [kit]);
216+
217+
const handleConnect = async (wallet: any) => {
218+
try {
219+
if (!kit) return;
220+
221+
kit.setWallet(wallet.id);
222+
const { address } = await kit.getAddress();
223+
setPublicKey(address);
224+
await setConnector(wallet);
225+
setShowWallets(false);
226+
} catch (error) {
227+
console.error("Error connecting wallet:", error);
228+
}
229+
};
230+
231+
const handleDisconnect = async () => {
232+
try {
233+
await disconnect();
234+
} catch (error) {
235+
console.error("Error disconnecting wallet:", error);
236+
}
237+
};
238+
239+
if (isConnected && publicKey) {
240+
return (
241+
<div className="w-full max-w-md bg-white rounded-lg shadow-md p-6">
242+
<h3 className="text-lg font-semibold text-gray-800 mb-4">
243+
Stellar Wallet Connected
244+
</h3>
245+
<div className="space-y-2">
246+
<div className="flex items-center gap-2">
247+
<span className="text-sm font-medium text-gray-600">Wallet:</span>
248+
<span className="text-sm text-gray-800">
249+
{connector?.name || "Unknown"}
250+
</span>
251+
</div>
252+
<div className="flex items-center gap-2">
253+
<span className="text-sm font-medium text-gray-600">Address:</span>
254+
<span className="text-sm text-gray-800 font-mono break-all">
255+
{publicKey}
256+
</span>
257+
</div>
258+
<button
259+
onClick={handleDisconnect}
260+
className="w-full mt-4 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors font-medium"
261+
>
262+
Disconnect
263+
</button>
264+
</div>
265+
</div>
266+
);
267+
}
268+
269+
return (
270+
<div className="w-full max-w-md bg-white rounded-lg shadow-md p-6">
271+
<h3 className="text-lg font-semibold text-gray-800 mb-4">
272+
Connect Stellar Wallet
273+
</h3>
274+
{isLoading ? (
275+
<p className="text-sm text-gray-600">Loading wallets...</p>
276+
) : (
277+
<>
278+
{!showWallets ? (
279+
<button
280+
onClick={() => setShowWallets(true)}
281+
className="w-full px-4 py-2 bg-primary-dark text-white rounded-lg hover:bg-primary-medium transition-colors font-medium"
282+
>
283+
Connect Wallet
284+
</button>
285+
) : (
286+
<div className="space-y-2">
287+
<button
288+
onClick={() => setShowWallets(false)}
289+
className="mb-2 text-sm text-gray-600 hover:text-gray-800"
290+
>
291+
← Back
292+
</button>
293+
{wallets.length === 0 ? (
294+
<p className="text-sm text-gray-600">
295+
No Stellar wallets detected. Please install a Stellar wallet
296+
extension.
297+
</p>
298+
) : (
299+
<div className="space-y-2">
300+
{wallets.map((wallet) => (
301+
<button
302+
key={wallet.id}
303+
onClick={() => handleConnect(wallet)}
304+
className="w-full px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-3"
305+
>
306+
{wallet.icon && (
307+
<img
308+
src={wallet.icon}
309+
alt={wallet.name}
310+
className="w-6 h-6"
311+
/>
312+
)}
313+
<span className="text-sm font-medium text-gray-800">
314+
{wallet.name}
315+
</span>
316+
</button>
317+
))}
318+
</div>
319+
)}
320+
</div>
321+
)}
322+
</>
323+
)}
324+
</div>
325+
);
326+
};
327+
178328
export default function DemoBasic() {
179329
const [isConfigOpen, setIsConfigOpen] = useState(false);
180330
const [config, setConfig] = usePersistedConfig("rozo-basic-config", {
@@ -448,6 +598,9 @@ export default function DemoBasic() {
448598
)}
449599
</div>
450600

601+
{/* Connect Stellar Wallet Section */}
602+
<ConnectStellarWallet />
603+
451604
{/* Main Content */}
452605
<div className="flex flex-col items-center gap-6">
453606
{/* Payment Button Section */}

‎examples/nextjs-app/src/app/basic/providers.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,19 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
88
import { type ReactNode } from "react";
99
import { createConfig, WagmiProvider } from "wagmi";
1010

11+
import {
12+
allowAllModules,
13+
FREIGHTER_ID,
14+
StellarWalletsKit,
15+
WalletNetwork,
16+
} from "@creit.tech/stellar-wallets-kit";
17+
18+
const stellarKit = new StellarWalletsKit({
19+
network: WalletNetwork.PUBLIC,
20+
selectedWalletId: FREIGHTER_ID,
21+
modules: allowAllModules(),
22+
});
23+
1124
export const rozoPayConfig = createConfig(
1225
getDefaultConfigRozo({
1326
appName: "Rozo Pay Basic Demo",
@@ -20,7 +33,12 @@ export function Providers(props: { children: ReactNode }) {
2033
return (
2134
<WagmiProvider config={rozoPayConfig}>
2235
<QueryClientProvider client={queryClient}>
23-
<RozoPayProvider debugMode mode="dark">
36+
<RozoPayProvider
37+
debugMode
38+
mode="dark"
39+
stellarKit={stellarKit}
40+
stellarWalletPersistence={false}
41+
>
2442
{props.children}
2543
</RozoPayProvider>
2644
</QueryClientProvider>

‎packages/connectkit/bundle-analysis.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/connectkit/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@rozoai/intent-pay",
33
"private": false,
4-
"version": "0.1.14",
4+
"version": "0.1.15-beta.6",
55
"author": "RozoAI",
66
"homepage": "https://github.com/RozoAI/intent-pay",
77
"license": "BSD-2-Clause",

‎packages/connectkit/src/components/Common/Modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ const Modal: React.FC<ModalProps> = ({
366366
case ROUTES.STELLAR_CONNECT:
367367
return "Connect Stellar Wallet";
368368
case ROUTES.STELLAR_CONNECTOR:
369-
return context.stellarConnector ?? "Stellar Wallet";
369+
return context.stellarConnector?.name ?? "Stellar Wallet";
370370
case ROUTES.CONNECTORS:
371371
return locales.connectorsScreen_heading;
372372
case ROUTES.MOBILECONNECTORS:

‎packages/connectkit/src/components/Pages/Stellar/ConnectStellar/index.tsx‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,15 @@ import { Stellar } from "../../../../assets/chains";
1010
import { SquircleIcon } from "../../../../assets/logos";
1111
import { ROUTES } from "../../../../constants/routes";
1212
import { usePayContext } from "../../../../hooks/usePayContext";
13-
import {
14-
STELLAR_WALLET_STORAGE_KEY,
15-
useStellar,
16-
} from "../../../../provider/StellarContextProvider";
17-
import * as LocalStorage from "../../../../utils/localstorage";
13+
import { useStellar } from "../../../../provider/StellarContextProvider";
1814
import { OptionsList } from "../../../Common/OptionsList";
1915
import { OrderHeader } from "../../../Common/OrderHeader";
2016
import SelectAnotherMethodButton from "../../../Common/SelectAnotherMethodButton";
2117
import WalletPaymentSpinner from "../../../Spinners/WalletPaymentSpinner";
2218

2319
const ConnectStellar: React.FC = () => {
2420
const { setStellarConnector, setRoute, log } = usePayContext();
25-
const { kit, setPublicKey, setConnector } = useStellar();
21+
const { kit } = useStellar();
2622

2723
// State to store the fetched Stellar wallets
2824
const [stellarWallets, setStellarWallets] = useState<Array<any>>([]);
@@ -48,6 +44,7 @@ const ConnectStellar: React.FC = () => {
4844
}, [kit]);
4945

5046
// Create options list from the fetched wallets
47+
// Following Solana pattern: only set connector and navigate, let ConnectorStellar handle connection
5148
const stellarOptions = useMemo(() => {
5249
return stellarWallets
5350
.filter((wallet) => wallet.isAvailable)
@@ -63,33 +60,21 @@ const ConnectStellar: React.FC = () => {
6360
icons: [
6461
<SquircleIcon key={wallet.id} icon={wallet.icon} alt={wallet.name} />,
6562
],
66-
onClick: async () => {
67-
log("wallet.name ", wallet.id);
68-
69-
await kit?.setWallet(wallet.id);
70-
kit?.getAddress().then(({ address }) => {
71-
// Stellar Provider
72-
setPublicKey(address);
73-
setConnector(wallet);
63+
onClick: () => {
64+
log(`[ConnectStellar] Wallet selected: ${wallet.id}`);
7465

75-
// Save wallet connection to localStorage for persistence
76-
LocalStorage.add(STELLAR_WALLET_STORAGE_KEY, {
77-
walletId: wallet.id,
78-
walletName: wallet.name,
79-
walletIcon: wallet.icon,
80-
publicKey: address,
81-
});
66+
// Set the selected wallet in context (like Solana pattern)
67+
// The full wallet object is stored so ConnectorStellar can use it
68+
setStellarConnector(wallet);
8269

83-
// PayContext
84-
setStellarConnector(wallet.id);
85-
setRoute(ROUTES.STELLAR_CONNECTOR, {
86-
event: "click-stellar-wallet",
87-
walletName: wallet.name,
88-
});
70+
// Navigate to connector page - actual connection happens there
71+
setRoute(ROUTES.STELLAR_CONNECTOR, {
72+
event: "click-stellar-wallet",
73+
walletName: wallet.name,
8974
});
9075
},
9176
}));
92-
}, [stellarWallets, kit]);
77+
}, [stellarWallets, log, setStellarConnector, setRoute]);
9378

9479
return (
9580
<PageContent>

0 commit comments

Comments
 (0)