@roochnetwork/rooch-sdk-kit
Version:
Rooch SDK Kit
491 lines (474 loc) • 13.8 kB
JavaScript
// src/provider/roochProvider.tsx
import { createContext as createContext3, useRef } from "react";
// src/provider/clientProvider.tsx
import { createContext as createContext2, useMemo as useMemo2, useState } from "react";
import {
getRoochNodeUrl,
RoochClient as RoochClient2
} from "@roochnetwork/rooch-sdk";
// src/provider/useDefaultClient.ts
import { useCallback, useMemo } from "react";
import {
ErrorValidateInvalidAccountAuthKey,
ErrorValidateSessionIsExpired,
isRoochClient,
RoochClient
} from "@roochnetwork/rooch-sdk";
// src/hooks/useSessionsStore.ts
import { useContext as useContext2 } from "react";
import { useStore } from "zustand";
// src/provider/globalProvider.tsx
import { createContext, useContext } from "react";
import { jsx } from "react/jsx-runtime";
var RequestEventManager = class {
constructor() {
this.callbacks = [];
}
subscribe(callback) {
this.callbacks.push(callback);
return () => {
this.callbacks = this.callbacks.filter((cb) => cb !== callback);
};
}
trigger(status) {
this.callbacks.forEach((callback) => callback(status));
}
};
var ErrorEventManager = class {
constructor() {
this.callbacks = [];
}
subscribe(callback) {
this.callbacks.push(callback);
return () => {
this.callbacks = this.callbacks.filter((cb) => cb !== callback);
};
}
trigger(error) {
this.callbacks.forEach((callback) => callback(error));
}
};
var GlobalContext = createContext(null);
var GlobalProvider = ({ children }) => {
const errorEventManager = new ErrorEventManager();
const requestEventManager = new RequestEventManager();
const triggerError = (error) => {
errorEventManager.trigger(error);
};
const subscribeOnError = (callback) => {
return errorEventManager.subscribe(callback);
};
const triggerRequest = (status) => {
requestEventManager.trigger(status);
};
const subscribeOnRequest = (callback) => {
return requestEventManager.subscribe(callback);
};
return /* @__PURE__ */ jsx(
GlobalContext.Provider,
{
value: { triggerError, subscribeOnError, triggerRequest, subscribeOnRequest },
children
}
);
};
var useTriggerError = () => {
const ctx = useContext(GlobalContext);
if (!ctx) {
throw new Error("useTriggerError must be used within a GlobalProvider");
}
return ctx.triggerError;
};
var useTriggerRequest = () => {
const ctx = useContext(GlobalContext);
if (!ctx) {
throw new Error("useTriggerError must be used within a GlobalProvider");
}
return ctx.triggerRequest;
};
// src/utils/stateStorage.ts
function createInMemoryStore() {
const store = /* @__PURE__ */ new Map();
return {
getItem(key) {
return store.get(key);
},
setItem(key, value) {
store.set(key, value);
},
removeItem(key) {
store.delete(key);
}
};
}
function getDefaultStorage(type) {
let storage;
switch (type) {
case 0 /* Session */:
storage = typeof window !== "undefined" && window.sessionStorage ? sessionStorage : void 0;
break;
case 1 /* Local */:
storage = typeof window !== "undefined" && window.localStorage ? localStorage : void 0;
}
if (!storage) {
storage = createInMemoryStore();
}
return storage;
}
// src/hooks/useSessionsStore.ts
function useSessionStore(selector) {
const store = useContext2(RoochContext);
if (!store) {
throw new Error(
"Could not find RoochSessionContext. Ensure that you have set up the RoochClientProvider."
);
}
return useStore(store, selector);
}
// src/http/httpTransport.ts
import {
RoochHTTPTransport
} from "@roochnetwork/rooch-sdk";
var HTTPTransport = class extends RoochHTTPTransport {
constructor(options, requestErrorCallback) {
super(options);
this.requestCallback = requestErrorCallback;
}
async request(input) {
let result;
try {
if (input.method === "rooch_executeRawTransaction") {
this.requestCallback("requesting");
}
result = await super.request(input);
if (input.method === "rooch_executeRawTransaction") {
this.requestCallback("success");
}
return result;
} catch (e) {
if ("code" in e) {
this.requestCallback("error", {
code: e.code,
message: e.message
});
}
throw e;
}
}
};
// src/provider/useDefaultClient.ts
var DEFAULT_CREATE_CLIENT = (_name, config, requestErrorCallback) => {
if (isRoochClient(config)) {
return config;
}
config.transport = new HTTPTransport(
{
url: config.url.toString()
},
requestErrorCallback
);
return new RoochClient(config);
};
function useDefaultClient(params) {
const { currentNetwork, networks } = params;
const currentSession = useSessionStore((state) => state.currentSession);
const removeSession = useSessionStore((state) => state.removeSession);
const triggerError = useTriggerError();
const triggerRequest = useTriggerRequest();
const _requestErrorCallback = useCallback(
(state, error) => {
try {
if (state === "error") {
if (error.code === ErrorValidateInvalidAccountAuthKey || error.code === ErrorValidateSessionIsExpired) {
if (currentSession) {
removeSession(currentSession);
}
}
triggerError(error);
}
triggerRequest(state);
} catch (e) {
console.error(e);
}
},
[triggerError, currentSession, removeSession, triggerRequest]
);
return useMemo(() => {
return DEFAULT_CREATE_CLIENT(currentNetwork, networks[currentNetwork], _requestErrorCallback);
}, [currentNetwork, networks, _requestErrorCallback]);
}
// src/provider/clientProvider.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var ClientContext = createContext2(null);
var DEFAULT_NETWORKS = {
localnet: { url: getRoochNodeUrl("localnet") }
};
function RoochClientProvider(props) {
const { onNetworkChange, network, children } = props;
const networks = props.networks ?? DEFAULT_NETWORKS;
const [selectedNetwork, setSelectedNetwork] = useState(
props.network ?? props.defaultNetwork ?? Object.keys(networks)[0]
);
const currentNetwork = props.network ?? selectedNetwork;
const client = useDefaultClient({ currentNetwork, networks });
const ctx = useMemo2(() => {
return {
client,
network: currentNetwork,
networks,
config: networks[currentNetwork] instanceof RoochClient2 ? null : networks[currentNetwork],
selectNetwork: (newNetwork) => {
if (currentNetwork === newNetwork) {
return;
}
if (!network && newNetwork !== selectedNetwork) {
setSelectedNetwork(newNetwork);
}
onNetworkChange?.(newNetwork);
}
};
}, [client, currentNetwork, networks, network, selectedNetwork, onNetworkChange]);
return /* @__PURE__ */ jsx2(ClientContext.Provider, { value: ctx, children });
}
// src/provider/sessionStore.ts
import { createStore } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
import { Session } from "@roochnetwork/rooch-sdk";
function createSessionStore({ storage, storageKey, sessionConf }) {
return createStore()(
persist(
(set, get) => ({
sessions: [],
currentSession: null,
sessionConf,
addSession(session) {
const cache = get().sessions;
cache.push(session);
set(() => ({
sessions: cache
}));
},
setCurrentSession(session) {
if (!session) {
set(() => ({
currentSession: null
}));
} else {
const cache = get().sessions;
if (!cache.find((item) => item.getAuthKey() === session.getAuthKey())) {
cache.push(session);
}
set(() => ({
currentSession: session,
sessions: cache
}));
}
},
removeSession(session) {
const cacheSessions = get().sessions;
const cacheCurSession = get().currentSession;
set(() => ({
currentSession: cacheCurSession?.getAuthKey() === session.getAuthKey() ? null : cacheCurSession,
sessions: cacheSessions.filter((c) => c.getAuthKey() !== session.getAuthKey())
}));
}
}),
{
name: storageKey,
storage: createJSONStorage(() => storage, {
reviver: (key, value) => {
if (key === "sessions") {
return value.map((session) => Session.fromJson(session));
}
return value;
}
}),
partialize: ({ sessions }) => ({
sessions
})
}
)
);
}
// src/components/styling/InjectedThemeStyles.tsx
import { assignInlineVars } from "@vanilla-extract/dynamic";
// src/constants/styleDataAttribute.ts
var styleDataAttributeName = "data-sdk-kit";
var styleDataAttributeSelector = `[${styleDataAttributeName}]`;
var styleDataAttribute = { [styleDataAttributeName]: "" };
// src/themes/themeContract.ts
import { createGlobalThemeContract } from "@vanilla-extract/css";
var themeContractValues = {
blurs: {
modalOverlay: ""
},
backgroundColors: {
primaryButton: "",
primaryButtonHover: "",
outlineButtonHover: "",
walletItemHover: "",
walletItemSelected: "",
modalOverlay: "",
modalPrimary: "",
modalSecondary: "",
iconButton: "",
iconButtonHover: "",
dropdownMenu: "",
dropdownMenuSeparator: ""
},
borderColors: {
outlineButton: ""
},
colors: {
primaryButton: "",
outlineButton: "",
body: "",
bodyMuted: "",
bodyDanger: "",
bodyWarning: "",
iconButton: ""
},
radii: {
small: "",
medium: "",
large: "",
xlarge: ""
},
shadows: {
primaryButton: "",
walletItemSelected: ""
},
fontWeights: {
normal: "",
medium: "",
bold: ""
},
fontSizes: {
small: "",
medium: "",
large: "",
xlarge: ""
},
typography: {
fontFamily: "",
fontStyle: "",
lineHeight: "",
letterSpacing: ""
}
};
var themeVars = createGlobalThemeContract(
themeContractValues,
(_, path) => `dapp-kit-${path.join("-")}`
);
// src/components/styling/InjectedThemeStyles.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
function InjectedThemeStyles({ theme }) {
const themeStyles = Array.isArray(theme) ? getDynamicThemeStyles(theme) : getStaticThemeStyles(theme);
return /* @__PURE__ */ jsx3(
"style",
{
precedence: "default",
href: "rooch-sdk-kit-theme",
dangerouslySetInnerHTML: {
__html: themeStyles
}
}
);
}
function getDynamicThemeStyles(themes) {
return themes.map(({ mediaQuery, selector, variables }) => {
const themeStyles = getStaticThemeStyles(variables);
const themeStylesWithSelectorPrefix = selector ? `${selector} ${themeStyles}` : themeStyles;
return mediaQuery ? `@media ${mediaQuery}{${themeStylesWithSelectorPrefix}}` : themeStylesWithSelectorPrefix;
}).join(" ");
}
function getStaticThemeStyles(theme) {
return `${styleDataAttributeSelector} {${cssStringFromTheme(theme)}}`;
}
function cssStringFromTheme(theme) {
return Object.entries(assignInlineVars(themeVars, theme)).map(([key, value]) => `${key}:${value};`).join("");
}
// src/themes/lightTheme.ts
var lightTheme = {
blurs: {
modalOverlay: "blur(0)"
},
backgroundColors: {
primaryButton: "#F6F7F9",
primaryButtonHover: "#F0F2F5",
outlineButtonHover: "#F4F4F5",
modalOverlay: "rgba(24 36 53 / 20%)",
modalPrimary: "white",
modalSecondary: "#F7F8F8",
iconButton: "transparent",
iconButtonHover: "#F0F1F2",
dropdownMenu: "#FFFFFF",
dropdownMenuSeparator: "#F3F6F8",
walletItemSelected: "white",
walletItemHover: "#3C424226"
},
borderColors: {
outlineButton: "#E4E4E7"
},
colors: {
primaryButton: "#373737",
outlineButton: "#373737",
iconButton: "#000000",
body: "#182435",
bodyMuted: "#767A81",
bodyDanger: "#FF794B",
bodyWarning: "#FF4C4C"
},
radii: {
small: "6px",
medium: "8px",
large: "12px",
xlarge: "16px"
},
shadows: {
primaryButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
walletItemSelected: "0px 2px 6px rgba(0, 0, 0, 0.05)"
},
fontWeights: {
normal: "400",
medium: "500",
bold: "600"
},
fontSizes: {
small: "14px",
medium: "16px",
large: "18px",
xlarge: "20px"
},
typography: {
fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
fontStyle: "normal",
lineHeight: "1.3",
letterSpacing: "1"
}
};
// src/provider/roochProvider.tsx
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
var DEFAULT_SESSION_STORAGE_KEY = function(_) {
return "rooch-sdk-kit:rooch-session-info";
};
var RoochContext = createContext3(null);
function RoochProvider(props) {
const { children, networks, defaultNetwork, theme, sessionConf } = props;
const storeRef = useRef(
createSessionStore({
storage: getDefaultStorage(1 /* Local */),
storageKey: DEFAULT_SESSION_STORAGE_KEY(),
sessionConf
})
);
return /* @__PURE__ */ jsx4(RoochContext.Provider, { value: storeRef.current, children: /* @__PURE__ */ jsx4(GlobalProvider, { children: /* @__PURE__ */ jsxs(RoochClientProvider, { networks, defaultNetwork, children: [
/* @__PURE__ */ jsx4(InjectedThemeStyles, { theme: theme ?? lightTheme }),
children
] }) }) });
}
export {
RoochContext,
RoochProvider
};
//# sourceMappingURL=roochProvider.js.map