@b3dotfun/sdk 0.0.38 → 0.0.40-test.2
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.
- package/dist/cjs/global-account/examples/client-selection-example.d.ts +5 -0
- package/dist/cjs/global-account/examples/client-selection-example.js +96 -0
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts +9 -2
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +12 -1
- package/dist/esm/global-account/examples/client-selection-example.d.ts +5 -0
- package/dist/esm/global-account/examples/client-selection-example.js +93 -0
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts +9 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +12 -1
- package/dist/types/global-account/examples/client-selection-example.d.ts +5 -0
- package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts +9 -2
- package/package.json +5 -4
- package/src/global-account/app.d.ts +14 -0
- package/src/global-account/docs/client-selection.md +292 -0
- package/src/global-account/examples/client-selection-example.tsx +197 -0
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +13 -3
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ClientSelectionApp = ClientSelectionApp;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("../../global-account/react");
|
|
6
|
+
const react_2 = require("react");
|
|
7
|
+
/**
|
|
8
|
+
* Example component showing how to use the client selection system
|
|
9
|
+
*/
|
|
10
|
+
function ClientSelectionExample() {
|
|
11
|
+
const { clientType, switchClientType, getCurrentClient, authenticateWithType } = (0, react_1.useClient)();
|
|
12
|
+
const { user } = (0, react_1.useB3)();
|
|
13
|
+
const [data, setData] = (0, react_2.useState)(null);
|
|
14
|
+
const [loading, setLoading] = (0, react_2.useState)(false);
|
|
15
|
+
const handleSwitchClient = (type) => {
|
|
16
|
+
switchClientType(type);
|
|
17
|
+
};
|
|
18
|
+
const handleFetchData = async () => {
|
|
19
|
+
setLoading(true);
|
|
20
|
+
try {
|
|
21
|
+
const client = getCurrentClient();
|
|
22
|
+
const result = await client.service("users").find();
|
|
23
|
+
setData(result);
|
|
24
|
+
}
|
|
25
|
+
catch (error) {
|
|
26
|
+
console.error("Failed to fetch data:", error);
|
|
27
|
+
}
|
|
28
|
+
finally {
|
|
29
|
+
setLoading(false);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const handleAuthenticateWithType = async (type) => {
|
|
33
|
+
try {
|
|
34
|
+
const result = await authenticateWithType(type, "your-access-token", "your-identity-token");
|
|
35
|
+
console.log(`Authenticated with ${type}:`, result);
|
|
36
|
+
}
|
|
37
|
+
catch (error) {
|
|
38
|
+
console.error(`Authentication failed with ${type}:`, error);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: "20px", fontFamily: "Arial, sans-serif" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Client Selection Example" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "20px" }, children: [(0, jsx_runtime_1.jsxs)("h3", { children: ["Current Client Type: ", clientType] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "10px", marginBottom: "10px" }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleSwitchClient("socket"), style: {
|
|
42
|
+
padding: "8px 16px",
|
|
43
|
+
backgroundColor: clientType === "socket" ? "#007bff" : "#f8f9fa",
|
|
44
|
+
color: clientType === "socket" ? "white" : "black",
|
|
45
|
+
border: "1px solid #007bff",
|
|
46
|
+
borderRadius: "4px",
|
|
47
|
+
cursor: "pointer"
|
|
48
|
+
}, children: "Switch to Socket" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSwitchClient("rest"), style: {
|
|
49
|
+
padding: "8px 16px",
|
|
50
|
+
backgroundColor: clientType === "rest" ? "#007bff" : "#f8f9fa",
|
|
51
|
+
color: clientType === "rest" ? "white" : "black",
|
|
52
|
+
border: "1px solid #007bff",
|
|
53
|
+
borderRadius: "4px",
|
|
54
|
+
cursor: "pointer"
|
|
55
|
+
}, children: "Switch to REST" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "20px" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Test API Calls" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleFetchData, disabled: loading, style: {
|
|
56
|
+
padding: "8px 16px",
|
|
57
|
+
backgroundColor: "#28a745",
|
|
58
|
+
color: "white",
|
|
59
|
+
border: "none",
|
|
60
|
+
borderRadius: "4px",
|
|
61
|
+
cursor: loading ? "not-allowed" : "pointer"
|
|
62
|
+
}, children: loading ? "Loading..." : "Fetch Data" }), data && ((0, jsx_runtime_1.jsx)("pre", { style: {
|
|
63
|
+
marginTop: "10px",
|
|
64
|
+
padding: "10px",
|
|
65
|
+
backgroundColor: "#f8f9fa",
|
|
66
|
+
borderRadius: "4px",
|
|
67
|
+
overflow: "auto"
|
|
68
|
+
}, children: JSON.stringify(data, null, 2) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "20px" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Authentication Tests" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleAuthenticateWithType("socket"), style: {
|
|
69
|
+
padding: "8px 16px",
|
|
70
|
+
backgroundColor: "#17a2b8",
|
|
71
|
+
color: "white",
|
|
72
|
+
border: "none",
|
|
73
|
+
borderRadius: "4px",
|
|
74
|
+
cursor: "pointer"
|
|
75
|
+
}, children: "Auth with Socket" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleAuthenticateWithType("rest"), style: {
|
|
76
|
+
padding: "8px 16px",
|
|
77
|
+
backgroundColor: "#17a2b8",
|
|
78
|
+
color: "white",
|
|
79
|
+
border: "none",
|
|
80
|
+
borderRadius: "4px",
|
|
81
|
+
cursor: "pointer"
|
|
82
|
+
}, children: "Auth with REST" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "User Status" }), (0, jsx_runtime_1.jsxs)("p", { children: ["Authenticated: ", user ? "Yes" : "No"] }), user && ((0, jsx_runtime_1.jsx)("pre", { style: {
|
|
83
|
+
padding: "10px",
|
|
84
|
+
backgroundColor: "#f8f9fa",
|
|
85
|
+
borderRadius: "4px",
|
|
86
|
+
overflow: "auto"
|
|
87
|
+
}, children: JSON.stringify(user, null, 2) }))] })] }));
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Example app showing different client configurations
|
|
91
|
+
*/
|
|
92
|
+
function ClientSelectionApp() {
|
|
93
|
+
const [clientType, setClientType] = (0, react_2.useState)("socket");
|
|
94
|
+
return ((0, jsx_runtime_1.jsx)(react_1.B3Provider, { environment: "development", clientType: clientType, automaticallySetFirstEoa: true, theme: "light", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "B3 SDK Client Selection Demo" }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: "20px" }, children: (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Provider Client Type:" }), (0, jsx_runtime_1.jsxs)("select", { value: clientType, onChange: (e) => setClientType(e.target.value), style: { marginLeft: "10px", padding: "4px 8px" }, children: [(0, jsx_runtime_1.jsx)("option", { value: "socket", children: "Socket (Default)" }), (0, jsx_runtime_1.jsx)("option", { value: "rest", children: "REST" })] })] }) }), (0, jsx_runtime_1.jsx)(ClientSelectionExample, {})] }) }));
|
|
95
|
+
}
|
|
96
|
+
exports.default = ClientSelectionApp;
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { PermissionsConfig } from "../../../../global-account/types/permissions";
|
|
2
|
+
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
2
3
|
import { Account } from "thirdweb/wallets";
|
|
3
4
|
import { ClientType } from "../../../client-manager";
|
|
4
5
|
import { B3ContextType } from "./types";
|
|
5
|
-
import "
|
|
6
|
-
|
|
6
|
+
export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly [import("wagmi").CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
|
|
7
|
+
connect(parameters?: import("@thirdweb-dev/wagmi-adapter/dist/types/connector").ConnectionOptions): Promise<{
|
|
8
|
+
accounts: readonly `0x${string}`[];
|
|
9
|
+
chainId: number;
|
|
10
|
+
}>;
|
|
11
|
+
}, {
|
|
12
|
+
"thirdweb:lastChainId": number;
|
|
13
|
+
}>]>;
|
|
7
14
|
/**
|
|
8
15
|
* Main B3Provider component
|
|
9
16
|
*/
|
|
@@ -6,8 +6,12 @@ exports.InnerProvider = InnerProvider;
|
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const react_1 = require("../../../../global-account/react");
|
|
8
8
|
const analytics_1 = require("../../../../global-account/utils/analytics");
|
|
9
|
+
const constants_1 = require("../../../../shared/constants");
|
|
9
10
|
const supported_1 = require("../../../../shared/constants/chains/supported");
|
|
11
|
+
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
12
|
+
require("@reservoir0x/relay-kit-ui/styles.css");
|
|
10
13
|
const react_query_1 = require("@tanstack/react-query");
|
|
14
|
+
const wagmi_adapter_1 = require("@thirdweb-dev/wagmi-adapter");
|
|
11
15
|
const react_2 = require("react");
|
|
12
16
|
const sonner_1 = require("sonner");
|
|
13
17
|
const react_3 = require("thirdweb/react");
|
|
@@ -15,7 +19,6 @@ const wagmi_1 = require("wagmi");
|
|
|
15
19
|
const client_manager_1 = require("../../../client-manager");
|
|
16
20
|
const StyleRoot_1 = require("../StyleRoot");
|
|
17
21
|
const types_1 = require("./types");
|
|
18
|
-
require("@reservoir0x/relay-kit-ui/styles.css");
|
|
19
22
|
/**
|
|
20
23
|
* Default permissions configuration for B3 provider
|
|
21
24
|
*/
|
|
@@ -28,6 +31,14 @@ const DEFAULT_PERMISSIONS = {
|
|
|
28
31
|
exports.wagmiConfig = (0, wagmi_1.createConfig)({
|
|
29
32
|
chains: [supported_1.supportedChains[0], ...supported_1.supportedChains.slice(1)],
|
|
30
33
|
transports: Object.fromEntries(supported_1.supportedChains.map(chain => [chain.id, (0, wagmi_1.http)()])),
|
|
34
|
+
connectors: [
|
|
35
|
+
(0, wagmi_adapter_1.inAppWalletConnector)({
|
|
36
|
+
ecosystemId: constants_1.ecosystemWalletId,
|
|
37
|
+
client: thirdweb_1.client,
|
|
38
|
+
}),
|
|
39
|
+
// injected(),
|
|
40
|
+
// coinbaseWallet({ appName: "HypeDuel" }),
|
|
41
|
+
],
|
|
31
42
|
});
|
|
32
43
|
// Create queryClient instance
|
|
33
44
|
const queryClient = new react_query_1.QueryClient();
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { B3Provider, useB3, useClient } from "../../global-account/react/index.js";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
/**
|
|
5
|
+
* Example component showing how to use the client selection system
|
|
6
|
+
*/
|
|
7
|
+
function ClientSelectionExample() {
|
|
8
|
+
const { clientType, switchClientType, getCurrentClient, authenticateWithType } = useClient();
|
|
9
|
+
const { user } = useB3();
|
|
10
|
+
const [data, setData] = useState(null);
|
|
11
|
+
const [loading, setLoading] = useState(false);
|
|
12
|
+
const handleSwitchClient = (type) => {
|
|
13
|
+
switchClientType(type);
|
|
14
|
+
};
|
|
15
|
+
const handleFetchData = async () => {
|
|
16
|
+
setLoading(true);
|
|
17
|
+
try {
|
|
18
|
+
const client = getCurrentClient();
|
|
19
|
+
const result = await client.service("users").find();
|
|
20
|
+
setData(result);
|
|
21
|
+
}
|
|
22
|
+
catch (error) {
|
|
23
|
+
console.error("Failed to fetch data:", error);
|
|
24
|
+
}
|
|
25
|
+
finally {
|
|
26
|
+
setLoading(false);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const handleAuthenticateWithType = async (type) => {
|
|
30
|
+
try {
|
|
31
|
+
const result = await authenticateWithType(type, "your-access-token", "your-identity-token");
|
|
32
|
+
console.log(`Authenticated with ${type}:`, result);
|
|
33
|
+
}
|
|
34
|
+
catch (error) {
|
|
35
|
+
console.error(`Authentication failed with ${type}:`, error);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
return (_jsxs("div", { style: { padding: "20px", fontFamily: "Arial, sans-serif" }, children: [_jsx("h2", { children: "Client Selection Example" }), _jsxs("div", { style: { marginBottom: "20px" }, children: [_jsxs("h3", { children: ["Current Client Type: ", clientType] }), _jsxs("div", { style: { display: "flex", gap: "10px", marginBottom: "10px" }, children: [_jsx("button", { onClick: () => handleSwitchClient("socket"), style: {
|
|
39
|
+
padding: "8px 16px",
|
|
40
|
+
backgroundColor: clientType === "socket" ? "#007bff" : "#f8f9fa",
|
|
41
|
+
color: clientType === "socket" ? "white" : "black",
|
|
42
|
+
border: "1px solid #007bff",
|
|
43
|
+
borderRadius: "4px",
|
|
44
|
+
cursor: "pointer"
|
|
45
|
+
}, children: "Switch to Socket" }), _jsx("button", { onClick: () => handleSwitchClient("rest"), style: {
|
|
46
|
+
padding: "8px 16px",
|
|
47
|
+
backgroundColor: clientType === "rest" ? "#007bff" : "#f8f9fa",
|
|
48
|
+
color: clientType === "rest" ? "white" : "black",
|
|
49
|
+
border: "1px solid #007bff",
|
|
50
|
+
borderRadius: "4px",
|
|
51
|
+
cursor: "pointer"
|
|
52
|
+
}, children: "Switch to REST" })] })] }), _jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { children: "Test API Calls" }), _jsx("button", { onClick: handleFetchData, disabled: loading, style: {
|
|
53
|
+
padding: "8px 16px",
|
|
54
|
+
backgroundColor: "#28a745",
|
|
55
|
+
color: "white",
|
|
56
|
+
border: "none",
|
|
57
|
+
borderRadius: "4px",
|
|
58
|
+
cursor: loading ? "not-allowed" : "pointer"
|
|
59
|
+
}, children: loading ? "Loading..." : "Fetch Data" }), data && (_jsx("pre", { style: {
|
|
60
|
+
marginTop: "10px",
|
|
61
|
+
padding: "10px",
|
|
62
|
+
backgroundColor: "#f8f9fa",
|
|
63
|
+
borderRadius: "4px",
|
|
64
|
+
overflow: "auto"
|
|
65
|
+
}, children: JSON.stringify(data, null, 2) }))] }), _jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { children: "Authentication Tests" }), _jsxs("div", { style: { display: "flex", gap: "10px" }, children: [_jsx("button", { onClick: () => handleAuthenticateWithType("socket"), style: {
|
|
66
|
+
padding: "8px 16px",
|
|
67
|
+
backgroundColor: "#17a2b8",
|
|
68
|
+
color: "white",
|
|
69
|
+
border: "none",
|
|
70
|
+
borderRadius: "4px",
|
|
71
|
+
cursor: "pointer"
|
|
72
|
+
}, children: "Auth with Socket" }), _jsx("button", { onClick: () => handleAuthenticateWithType("rest"), style: {
|
|
73
|
+
padding: "8px 16px",
|
|
74
|
+
backgroundColor: "#17a2b8",
|
|
75
|
+
color: "white",
|
|
76
|
+
border: "none",
|
|
77
|
+
borderRadius: "4px",
|
|
78
|
+
cursor: "pointer"
|
|
79
|
+
}, children: "Auth with REST" })] })] }), _jsxs("div", { children: [_jsx("h3", { children: "User Status" }), _jsxs("p", { children: ["Authenticated: ", user ? "Yes" : "No"] }), user && (_jsx("pre", { style: {
|
|
80
|
+
padding: "10px",
|
|
81
|
+
backgroundColor: "#f8f9fa",
|
|
82
|
+
borderRadius: "4px",
|
|
83
|
+
overflow: "auto"
|
|
84
|
+
}, children: JSON.stringify(user, null, 2) }))] })] }));
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Example app showing different client configurations
|
|
88
|
+
*/
|
|
89
|
+
export function ClientSelectionApp() {
|
|
90
|
+
const [clientType, setClientType] = useState("socket");
|
|
91
|
+
return (_jsx(B3Provider, { environment: "development", clientType: clientType, automaticallySetFirstEoa: true, theme: "light", children: _jsxs("div", { children: [_jsx("h1", { children: "B3 SDK Client Selection Demo" }), _jsx("div", { style: { marginBottom: "20px" }, children: _jsxs("label", { children: [_jsx("strong", { children: "Provider Client Type:" }), _jsxs("select", { value: clientType, onChange: (e) => setClientType(e.target.value), style: { marginLeft: "10px", padding: "4px 8px" }, children: [_jsx("option", { value: "socket", children: "Socket (Default)" }), _jsx("option", { value: "rest", children: "REST" })] })] }) }), _jsx(ClientSelectionExample, {})] }) }));
|
|
92
|
+
}
|
|
93
|
+
export default ClientSelectionApp;
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { PermissionsConfig } from "../../../../global-account/types/permissions";
|
|
2
|
+
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
2
3
|
import { Account } from "thirdweb/wallets";
|
|
3
4
|
import { ClientType } from "../../../client-manager";
|
|
4
5
|
import { B3ContextType } from "./types";
|
|
5
|
-
import "
|
|
6
|
-
|
|
6
|
+
export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly [import("wagmi").CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
|
|
7
|
+
connect(parameters?: import("@thirdweb-dev/wagmi-adapter/dist/types/connector").ConnectionOptions): Promise<{
|
|
8
|
+
accounts: readonly `0x${string}`[];
|
|
9
|
+
chainId: number;
|
|
10
|
+
}>;
|
|
11
|
+
}, {
|
|
12
|
+
"thirdweb:lastChainId": number;
|
|
13
|
+
}>]>;
|
|
7
14
|
/**
|
|
8
15
|
* Main B3Provider component
|
|
9
16
|
*/
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { RelayKitProviderWrapper, TooltipProvider, useAuthStore } from "../../../../global-account/react/index.js";
|
|
3
3
|
import { loadGA4Script } from "../../../../global-account/utils/analytics.js";
|
|
4
|
+
import { ecosystemWalletId } from "../../../../shared/constants/index.js";
|
|
4
5
|
import { supportedChains } from "../../../../shared/constants/chains/supported.js";
|
|
6
|
+
import { client } from "../../../../shared/utils/thirdweb.js";
|
|
7
|
+
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
5
8
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
9
|
+
import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
|
|
6
10
|
import { useCallback, useEffect, useState } from "react";
|
|
7
11
|
import { Toaster } from "sonner";
|
|
8
12
|
import { getLastAuthProvider, ThirdwebProvider, useActiveAccount, useConnectedWallets, useSetActiveWallet, } from "thirdweb/react";
|
|
@@ -10,7 +14,6 @@ import { createConfig, http, WagmiProvider } from "wagmi";
|
|
|
10
14
|
import { setClientType } from "../../../client-manager.js";
|
|
11
15
|
import { StyleRoot } from "../StyleRoot.js";
|
|
12
16
|
import { B3Context } from "./types.js";
|
|
13
|
-
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
14
17
|
/**
|
|
15
18
|
* Default permissions configuration for B3 provider
|
|
16
19
|
*/
|
|
@@ -23,6 +26,14 @@ const DEFAULT_PERMISSIONS = {
|
|
|
23
26
|
export const wagmiConfig = createConfig({
|
|
24
27
|
chains: [supportedChains[0], ...supportedChains.slice(1)],
|
|
25
28
|
transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])),
|
|
29
|
+
connectors: [
|
|
30
|
+
inAppWalletConnector({
|
|
31
|
+
ecosystemId: ecosystemWalletId,
|
|
32
|
+
client,
|
|
33
|
+
}),
|
|
34
|
+
// injected(),
|
|
35
|
+
// coinbaseWallet({ appName: "HypeDuel" }),
|
|
36
|
+
],
|
|
26
37
|
});
|
|
27
38
|
// Create queryClient instance
|
|
28
39
|
const queryClient = new QueryClient();
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
|
|
2
|
+
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
2
3
|
import { Account } from "thirdweb/wallets";
|
|
3
4
|
import { ClientType } from "../../../client-manager";
|
|
4
5
|
import { B3ContextType } from "./types";
|
|
5
|
-
import "
|
|
6
|
-
|
|
6
|
+
export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly [import("wagmi").CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
|
|
7
|
+
connect(parameters?: import("@thirdweb-dev/wagmi-adapter/dist/types/connector").ConnectionOptions): Promise<{
|
|
8
|
+
accounts: readonly `0x${string}`[];
|
|
9
|
+
chainId: number;
|
|
10
|
+
}>;
|
|
11
|
+
}, {
|
|
12
|
+
"thirdweb:lastChainId": number;
|
|
13
|
+
}>]>;
|
|
7
14
|
/**
|
|
8
15
|
* Main B3Provider component
|
|
9
16
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@b3dotfun/sdk",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.40-test.2",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"react-native": "./dist/cjs/index.native.js",
|
|
@@ -241,8 +241,8 @@
|
|
|
241
241
|
"@b3dotfun/basement-api": "0.0.11",
|
|
242
242
|
"@feathersjs/authentication-client": "5.0.33",
|
|
243
243
|
"@feathersjs/feathers": "5.0.33",
|
|
244
|
-
"@feathersjs/socketio-client": "5.0.33",
|
|
245
244
|
"@feathersjs/rest-client": "5.0.33",
|
|
245
|
+
"@feathersjs/socketio-client": "5.0.33",
|
|
246
246
|
"@feathersjs/typebox": "5.0.33",
|
|
247
247
|
"@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
|
|
248
248
|
"@hey-api/client-fetch": "0.8.3",
|
|
@@ -261,6 +261,7 @@
|
|
|
261
261
|
"@solana/web3.js": "^1.98.2",
|
|
262
262
|
"@stripe/react-stripe-js": "^3.7.0",
|
|
263
263
|
"@stripe/stripe-js": "^7.3.1",
|
|
264
|
+
"@thirdweb-dev/wagmi-adapter": "^0.2.141",
|
|
264
265
|
"@web3icons/react": "3.16.0",
|
|
265
266
|
"big.js": "^7.0.1",
|
|
266
267
|
"class-variance-authority": "0.7.0",
|
|
@@ -331,8 +332,8 @@
|
|
|
331
332
|
"react-native-mmkv": "^3.2.0",
|
|
332
333
|
"thirdweb": "^5.105.20",
|
|
333
334
|
"three": "^0.175.0",
|
|
334
|
-
"
|
|
335
|
-
"
|
|
335
|
+
"viem": "^2.28.1",
|
|
336
|
+
"wagmi": "^2.14.15"
|
|
336
337
|
},
|
|
337
338
|
"peerDependenciesMeta": {
|
|
338
339
|
"@react-three/postprocessing": {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ClientApplication } from "@b3dotfun/b3-api";
|
|
2
|
+
import { ClientType } from "./client-manager";
|
|
3
|
+
|
|
4
|
+
// Hybrid app type that is both a client instance AND a function
|
|
5
|
+
export interface HybridApp extends ClientApplication {
|
|
6
|
+
(clientType: "socket"): ClientApplication;
|
|
7
|
+
(clientType: "rest"): ClientApplication;
|
|
8
|
+
(clientType: ClientType): ClientApplication;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Export the hybrid app as the default
|
|
12
|
+
declare const app: HybridApp;
|
|
13
|
+
export default app;
|
|
14
|
+
|
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
# FeathersJS Client Selection
|
|
2
|
+
|
|
3
|
+
The B3 SDK now supports both Socket.IO and REST clients for communicating with the B3 API. This document explains how to choose and configure the appropriate client type for your application.
|
|
4
|
+
|
|
5
|
+
## Client Types
|
|
6
|
+
|
|
7
|
+
### Socket Client (Default)
|
|
8
|
+
- **Real-time communication** via WebSocket
|
|
9
|
+
- **Lower latency** for frequent updates
|
|
10
|
+
- **Automatic reconnection** on connection loss
|
|
11
|
+
- **Best for**: Interactive applications, real-time features, frequent API calls
|
|
12
|
+
|
|
13
|
+
### REST Client
|
|
14
|
+
- **HTTP-based communication** via REST API
|
|
15
|
+
- **Better for server-side rendering** and static generation
|
|
16
|
+
- **Simpler debugging** and network inspection
|
|
17
|
+
- **Best for**: Static sites, server-side rendering, simple integrations
|
|
18
|
+
|
|
19
|
+
## Configuration
|
|
20
|
+
|
|
21
|
+
### 1. Provider-Level Configuration (Recommended)
|
|
22
|
+
|
|
23
|
+
Configure the client type at the provider level for your entire application:
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { B3Provider } from "@b3dotfun/sdk/global-account/react";
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<B3Provider
|
|
31
|
+
environment="production"
|
|
32
|
+
clientType="rest" // or "socket"
|
|
33
|
+
// ... other props
|
|
34
|
+
>
|
|
35
|
+
<YourApp />
|
|
36
|
+
</B3Provider>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 2. Programmatic Configuration
|
|
42
|
+
|
|
43
|
+
Change the client type at runtime:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
47
|
+
|
|
48
|
+
function MyComponent() {
|
|
49
|
+
const { switchClientType, clientType } = useClient();
|
|
50
|
+
|
|
51
|
+
const handleSwitchToRest = () => {
|
|
52
|
+
switchClientType("rest");
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<div>
|
|
57
|
+
<p>Current client: {clientType}</p>
|
|
58
|
+
<button onClick={handleSwitchToRest}>Switch to REST</button>
|
|
59
|
+
</div>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 3. Direct Client Access
|
|
65
|
+
|
|
66
|
+
Access specific client types directly:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
70
|
+
|
|
71
|
+
function MyComponent() {
|
|
72
|
+
const { getCurrentClient, getClientByType } = useClient();
|
|
73
|
+
|
|
74
|
+
// Get the currently active client
|
|
75
|
+
const currentClient = getCurrentClient();
|
|
76
|
+
|
|
77
|
+
// Get a specific client type
|
|
78
|
+
const restClient = getClientByType("rest");
|
|
79
|
+
const socketClient = getClientByType("socket");
|
|
80
|
+
|
|
81
|
+
// Use the clients directly
|
|
82
|
+
const data = await currentClient.service("users").find();
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Authentication
|
|
87
|
+
|
|
88
|
+
### Single Client Authentication
|
|
89
|
+
|
|
90
|
+
Authenticate with the currently active client:
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
94
|
+
|
|
95
|
+
function LoginComponent() {
|
|
96
|
+
const { getCurrentClient } = useClient();
|
|
97
|
+
|
|
98
|
+
const handleLogin = async () => {
|
|
99
|
+
const client = getCurrentClient();
|
|
100
|
+
await client.authenticate({
|
|
101
|
+
strategy: "jwt",
|
|
102
|
+
accessToken: "your-token"
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Multi-Client Authentication
|
|
109
|
+
|
|
110
|
+
Authenticate with both clients simultaneously (useful for migration scenarios):
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
114
|
+
|
|
115
|
+
function LoginComponent() {
|
|
116
|
+
const { authenticateWithBoth } = useClient();
|
|
117
|
+
|
|
118
|
+
const handleLogin = async () => {
|
|
119
|
+
const result = await authenticateWithBoth("access-token", "identity-token");
|
|
120
|
+
|
|
121
|
+
if (result.success) {
|
|
122
|
+
console.log("Socket auth:", result.socket);
|
|
123
|
+
console.log("REST auth:", result.rest);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Type-Specific Authentication
|
|
130
|
+
|
|
131
|
+
Authenticate with a specific client type:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
135
|
+
|
|
136
|
+
function LoginComponent() {
|
|
137
|
+
const { authenticateWithType } = useClient();
|
|
138
|
+
|
|
139
|
+
const handleRestLogin = async () => {
|
|
140
|
+
await authenticateWithType("rest", "access-token", "identity-token");
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
const handleSocketLogin = async () => {
|
|
144
|
+
await authenticateWithType("socket", "access-token", "identity-token");
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Migration Guide
|
|
150
|
+
|
|
151
|
+
### From Socket-Only to Client Selection
|
|
152
|
+
|
|
153
|
+
**Before:**
|
|
154
|
+
```tsx
|
|
155
|
+
import app from "@b3dotfun/sdk/global-account/app";
|
|
156
|
+
|
|
157
|
+
// Always used socket client
|
|
158
|
+
const data = await app.service("users").find();
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
**After (Backwards Compatible):**
|
|
162
|
+
```tsx
|
|
163
|
+
import app from "@b3dotfun/sdk/global-account/app";
|
|
164
|
+
|
|
165
|
+
// Still works - defaults to socket client
|
|
166
|
+
const data = await app.service("users").find();
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
**After (Explicit Client Selection):**
|
|
170
|
+
```tsx
|
|
171
|
+
import { B3Provider } from "@b3dotfun/sdk/global-account/react";
|
|
172
|
+
|
|
173
|
+
// Configure at provider level
|
|
174
|
+
<B3Provider clientType="rest">
|
|
175
|
+
<App />
|
|
176
|
+
</B3Provider>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### From Direct REST Import
|
|
180
|
+
|
|
181
|
+
**Before:**
|
|
182
|
+
```tsx
|
|
183
|
+
import app from "@b3dotfun/sdk/global-account/app.rest";
|
|
184
|
+
|
|
185
|
+
// Always used REST client
|
|
186
|
+
const data = await app.service("users").find();
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
**After:**
|
|
190
|
+
```tsx
|
|
191
|
+
import { B3Provider } from "@b3dotfun/sdk/global-account/react";
|
|
192
|
+
|
|
193
|
+
// Configure at provider level
|
|
194
|
+
<B3Provider clientType="rest">
|
|
195
|
+
<App />
|
|
196
|
+
</B3Provider>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
## Best Practices
|
|
200
|
+
|
|
201
|
+
### 1. Choose the Right Client Type
|
|
202
|
+
|
|
203
|
+
- **Use Socket** for: Real-time apps, frequent updates, interactive features
|
|
204
|
+
- **Use REST** for: Static sites, SSR, simple integrations, debugging
|
|
205
|
+
|
|
206
|
+
### 2. Consistent Client Usage
|
|
207
|
+
|
|
208
|
+
- Set the client type once at the provider level
|
|
209
|
+
- Avoid mixing client types within the same app unless necessary
|
|
210
|
+
- Use the `useClient` hook for runtime client access
|
|
211
|
+
|
|
212
|
+
### 3. Error Handling
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
216
|
+
|
|
217
|
+
function MyComponent() {
|
|
218
|
+
const { getCurrentClient } = useClient();
|
|
219
|
+
|
|
220
|
+
const fetchData = async () => {
|
|
221
|
+
try {
|
|
222
|
+
const client = getCurrentClient();
|
|
223
|
+
const data = await client.service("users").find();
|
|
224
|
+
return data;
|
|
225
|
+
} catch (error) {
|
|
226
|
+
console.error("API call failed:", error);
|
|
227
|
+
// Handle error appropriately
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### 4. Performance Considerations
|
|
234
|
+
|
|
235
|
+
- Socket clients maintain persistent connections
|
|
236
|
+
- REST clients make individual HTTP requests
|
|
237
|
+
- Consider your app's communication patterns when choosing
|
|
238
|
+
|
|
239
|
+
## Troubleshooting
|
|
240
|
+
|
|
241
|
+
### Common Issues
|
|
242
|
+
|
|
243
|
+
1. **Client Type Not Switching**
|
|
244
|
+
- Ensure you're calling `switchClientType` after the provider is mounted
|
|
245
|
+
- Check that the provider has the correct `clientType` prop
|
|
246
|
+
|
|
247
|
+
2. **Authentication Failures**
|
|
248
|
+
- Verify the client type matches your authentication strategy
|
|
249
|
+
- Check that tokens are valid for the selected client type
|
|
250
|
+
|
|
251
|
+
3. **Connection Issues**
|
|
252
|
+
- For socket clients: Check WebSocket connectivity
|
|
253
|
+
- For REST clients: Verify HTTP endpoints are accessible
|
|
254
|
+
|
|
255
|
+
### Debug Information
|
|
256
|
+
|
|
257
|
+
```tsx
|
|
258
|
+
import { useClient } from "@b3dotfun/sdk/global-account/react";
|
|
259
|
+
|
|
260
|
+
function DebugComponent() {
|
|
261
|
+
const { clientType, getCurrentClient } = useClient();
|
|
262
|
+
|
|
263
|
+
console.log("Current client type:", clientType);
|
|
264
|
+
console.log("Current client:", getCurrentClient());
|
|
265
|
+
}
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## API Reference
|
|
269
|
+
|
|
270
|
+
### B3Provider Props
|
|
271
|
+
|
|
272
|
+
```tsx
|
|
273
|
+
interface B3ProviderProps {
|
|
274
|
+
clientType?: "socket" | "rest"; // Default: "socket"
|
|
275
|
+
// ... other props
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
### useClient Hook
|
|
280
|
+
|
|
281
|
+
```tsx
|
|
282
|
+
interface UseClientReturn {
|
|
283
|
+
clientType: "socket" | "rest";
|
|
284
|
+
getCurrentClient: () => ClientApplication;
|
|
285
|
+
getClientByType: (type: ClientType) => ClientApplication;
|
|
286
|
+
switchClientType: (type: ClientType) => void;
|
|
287
|
+
authenticateWithType: (type: ClientType, accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<any>;
|
|
288
|
+
authenticateWithBoth: (accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<{socket: any, rest: any, success: boolean}>;
|
|
289
|
+
}
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import { B3Provider, useB3, useClient } from "@b3dotfun/sdk/global-account/react";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { ClientType } from "../client-manager";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Example component showing how to use the client selection system
|
|
7
|
+
*/
|
|
8
|
+
function ClientSelectionExample() {
|
|
9
|
+
const { clientType, switchClientType, getCurrentClient, authenticateWithType } = useClient();
|
|
10
|
+
const { user } = useB3();
|
|
11
|
+
const [data, setData] = useState<any>(null);
|
|
12
|
+
const [loading, setLoading] = useState(false);
|
|
13
|
+
|
|
14
|
+
const handleSwitchClient = (type: ClientType) => {
|
|
15
|
+
switchClientType(type);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const handleFetchData = async () => {
|
|
19
|
+
setLoading(true);
|
|
20
|
+
try {
|
|
21
|
+
const client = getCurrentClient();
|
|
22
|
+
const result = await client.service("users").find();
|
|
23
|
+
setData(result);
|
|
24
|
+
} catch (error) {
|
|
25
|
+
console.error("Failed to fetch data:", error);
|
|
26
|
+
} finally {
|
|
27
|
+
setLoading(false);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const handleAuthenticateWithType = async (type: ClientType) => {
|
|
32
|
+
try {
|
|
33
|
+
const result = await authenticateWithType(
|
|
34
|
+
type,
|
|
35
|
+
"your-access-token",
|
|
36
|
+
"your-identity-token"
|
|
37
|
+
);
|
|
38
|
+
console.log(`Authenticated with ${type}:`, result);
|
|
39
|
+
} catch (error) {
|
|
40
|
+
console.error(`Authentication failed with ${type}:`, error);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
|
|
46
|
+
<h2>Client Selection Example</h2>
|
|
47
|
+
|
|
48
|
+
<div style={{ marginBottom: "20px" }}>
|
|
49
|
+
<h3>Current Client Type: {clientType}</h3>
|
|
50
|
+
<div style={{ display: "flex", gap: "10px", marginBottom: "10px" }}>
|
|
51
|
+
<button
|
|
52
|
+
onClick={() => handleSwitchClient("socket")}
|
|
53
|
+
style={{
|
|
54
|
+
padding: "8px 16px",
|
|
55
|
+
backgroundColor: clientType === "socket" ? "#007bff" : "#f8f9fa",
|
|
56
|
+
color: clientType === "socket" ? "white" : "black",
|
|
57
|
+
border: "1px solid #007bff",
|
|
58
|
+
borderRadius: "4px",
|
|
59
|
+
cursor: "pointer"
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
Switch to Socket
|
|
63
|
+
</button>
|
|
64
|
+
<button
|
|
65
|
+
onClick={() => handleSwitchClient("rest")}
|
|
66
|
+
style={{
|
|
67
|
+
padding: "8px 16px",
|
|
68
|
+
backgroundColor: clientType === "rest" ? "#007bff" : "#f8f9fa",
|
|
69
|
+
color: clientType === "rest" ? "white" : "black",
|
|
70
|
+
border: "1px solid #007bff",
|
|
71
|
+
borderRadius: "4px",
|
|
72
|
+
cursor: "pointer"
|
|
73
|
+
}}
|
|
74
|
+
>
|
|
75
|
+
Switch to REST
|
|
76
|
+
</button>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div style={{ marginBottom: "20px" }}>
|
|
81
|
+
<h3>Test API Calls</h3>
|
|
82
|
+
<button
|
|
83
|
+
onClick={handleFetchData}
|
|
84
|
+
disabled={loading}
|
|
85
|
+
style={{
|
|
86
|
+
padding: "8px 16px",
|
|
87
|
+
backgroundColor: "#28a745",
|
|
88
|
+
color: "white",
|
|
89
|
+
border: "none",
|
|
90
|
+
borderRadius: "4px",
|
|
91
|
+
cursor: loading ? "not-allowed" : "pointer"
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
{loading ? "Loading..." : "Fetch Data"}
|
|
95
|
+
</button>
|
|
96
|
+
|
|
97
|
+
{data && (
|
|
98
|
+
<pre style={{
|
|
99
|
+
marginTop: "10px",
|
|
100
|
+
padding: "10px",
|
|
101
|
+
backgroundColor: "#f8f9fa",
|
|
102
|
+
borderRadius: "4px",
|
|
103
|
+
overflow: "auto"
|
|
104
|
+
}}>
|
|
105
|
+
{JSON.stringify(data, null, 2)}
|
|
106
|
+
</pre>
|
|
107
|
+
)}
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div style={{ marginBottom: "20px" }}>
|
|
111
|
+
<h3>Authentication Tests</h3>
|
|
112
|
+
<div style={{ display: "flex", gap: "10px" }}>
|
|
113
|
+
<button
|
|
114
|
+
onClick={() => handleAuthenticateWithType("socket")}
|
|
115
|
+
style={{
|
|
116
|
+
padding: "8px 16px",
|
|
117
|
+
backgroundColor: "#17a2b8",
|
|
118
|
+
color: "white",
|
|
119
|
+
border: "none",
|
|
120
|
+
borderRadius: "4px",
|
|
121
|
+
cursor: "pointer"
|
|
122
|
+
}}
|
|
123
|
+
>
|
|
124
|
+
Auth with Socket
|
|
125
|
+
</button>
|
|
126
|
+
<button
|
|
127
|
+
onClick={() => handleAuthenticateWithType("rest")}
|
|
128
|
+
style={{
|
|
129
|
+
padding: "8px 16px",
|
|
130
|
+
backgroundColor: "#17a2b8",
|
|
131
|
+
color: "white",
|
|
132
|
+
border: "none",
|
|
133
|
+
borderRadius: "4px",
|
|
134
|
+
cursor: "pointer"
|
|
135
|
+
}}
|
|
136
|
+
>
|
|
137
|
+
Auth with REST
|
|
138
|
+
</button>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div>
|
|
143
|
+
<h3>User Status</h3>
|
|
144
|
+
<p>Authenticated: {user ? "Yes" : "No"}</p>
|
|
145
|
+
{user && (
|
|
146
|
+
<pre style={{
|
|
147
|
+
padding: "10px",
|
|
148
|
+
backgroundColor: "#f8f9fa",
|
|
149
|
+
borderRadius: "4px",
|
|
150
|
+
overflow: "auto"
|
|
151
|
+
}}>
|
|
152
|
+
{JSON.stringify(user, null, 2)}
|
|
153
|
+
</pre>
|
|
154
|
+
)}
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* Example app showing different client configurations
|
|
162
|
+
*/
|
|
163
|
+
export function ClientSelectionApp() {
|
|
164
|
+
const [clientType, setClientType] = useState<ClientType>("socket");
|
|
165
|
+
|
|
166
|
+
return (
|
|
167
|
+
<B3Provider
|
|
168
|
+
environment="development"
|
|
169
|
+
clientType={clientType}
|
|
170
|
+
automaticallySetFirstEoa={true}
|
|
171
|
+
theme="light"
|
|
172
|
+
>
|
|
173
|
+
<div>
|
|
174
|
+
<h1>B3 SDK Client Selection Demo</h1>
|
|
175
|
+
|
|
176
|
+
<div style={{ marginBottom: "20px" }}>
|
|
177
|
+
<label>
|
|
178
|
+
<strong>Provider Client Type:</strong>
|
|
179
|
+
<select
|
|
180
|
+
value={clientType}
|
|
181
|
+
onChange={(e) => setClientType(e.target.value as ClientType)}
|
|
182
|
+
style={{ marginLeft: "10px", padding: "4px 8px" }}
|
|
183
|
+
>
|
|
184
|
+
<option value="socket">Socket (Default)</option>
|
|
185
|
+
<option value="rest">REST</option>
|
|
186
|
+
</select>
|
|
187
|
+
</label>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<ClientSelectionExample />
|
|
191
|
+
</div>
|
|
192
|
+
</B3Provider>
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
export default ClientSelectionApp;
|
|
197
|
+
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
import { Users } from "@b3dotfun/b3-api";
|
|
1
2
|
import { RelayKitProviderWrapper, TooltipProvider, useAuthStore } from "@b3dotfun/sdk/global-account/react";
|
|
2
3
|
import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
|
|
3
4
|
import { loadGA4Script } from "@b3dotfun/sdk/global-account/utils/analytics";
|
|
5
|
+
import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
|
|
4
6
|
import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
|
|
7
|
+
import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
|
|
8
|
+
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
5
9
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
10
|
+
import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
|
|
6
11
|
import { useCallback, useEffect, useState } from "react";
|
|
7
12
|
import { Toaster } from "sonner";
|
|
8
13
|
import {
|
|
@@ -18,9 +23,6 @@ import { ClientType, setClientType } from "../../../client-manager";
|
|
|
18
23
|
import { StyleRoot } from "../StyleRoot";
|
|
19
24
|
import { B3Context, B3ContextType } from "./types";
|
|
20
25
|
|
|
21
|
-
import { Users } from "@b3dotfun/b3-api";
|
|
22
|
-
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
23
|
-
|
|
24
26
|
/**
|
|
25
27
|
* Default permissions configuration for B3 provider
|
|
26
28
|
*/
|
|
@@ -34,6 +36,14 @@ const DEFAULT_PERMISSIONS = {
|
|
|
34
36
|
export const wagmiConfig = createConfig({
|
|
35
37
|
chains: [supportedChains[0], ...supportedChains.slice(1)],
|
|
36
38
|
transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])) as any,
|
|
39
|
+
connectors: [
|
|
40
|
+
inAppWalletConnector({
|
|
41
|
+
ecosystemId: ecosystemWalletId,
|
|
42
|
+
client,
|
|
43
|
+
}),
|
|
44
|
+
// injected(),
|
|
45
|
+
// coinbaseWallet({ appName: "HypeDuel" }),
|
|
46
|
+
],
|
|
37
47
|
});
|
|
38
48
|
|
|
39
49
|
// Create queryClient instance
|