Skip to content

Commit

Permalink
Tree shaking: react-ui fix (#837)
Browse files Browse the repository at this point in the history
* Tree shaking: react-ui fix

* moved twind provider to auth provider

* added changeset
  • Loading branch information
jmderby authored Oct 26, 2024
1 parent 7d95b83 commit aecf9b0
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 42 deletions.
5 changes: 5 additions & 0 deletions .changeset/clean-crews-greet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@crossmint/client-sdk-react-ui": patch
---

Added support for tree shaking
2 changes: 1 addition & 1 deletion packages/client/ui/react-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"types": "./dist/index.d.ts",
"files": ["dist", "src", "LICENSE"],
"scripts": {
"build": "tsup",
"build": "NODE_OPTIONS='--max-old-space-size=8192' tsup",
"dev": "tsup --watch",
"test": "vitest run"
},
Expand Down
8 changes: 0 additions & 8 deletions packages/client/ui/react-ui/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
import { install } from "@twind/core";

import twindConfig from "./twind.config";

// Initialize twind with custom configuration
// This sets up the CSS-in-JS styling solution for the entire application
install(twindConfig);

export * from "./components";
export * from "./hooks";
export * from "./providers";
Expand Down
67 changes: 35 additions & 32 deletions packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
import { deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
import { AuthFormProvider } from "./auth/AuthFormProvider";
import { TwindProvider } from "./TwindProvider";

export type CrossmintAuthWalletConfig = {
defaultChain: EVMSmartWalletChain;
Expand Down Expand Up @@ -140,40 +141,42 @@ export function CrossmintAuthProvider({
};

return (
<AuthContext.Provider
value={{
login,
logout,
jwt: crossmint.jwt,
refreshToken: crossmint.refreshToken,
user,
status: getAuthStatus(),
getUser,
}}
>
<CrossmintWalletProvider
defaultChain={embeddedWallets.defaultChain}
showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
appearance={appearance}
<TwindProvider>
<AuthContext.Provider
value={{
login,
logout,
jwt: crossmint.jwt,
refreshToken: crossmint.refreshToken,
user,
status: getAuthStatus(),
getUser,
}}
>
<AuthFormProvider
initialState={{
apiKey: crossmint.apiKey,
baseUrl: crossmintBaseUrl,
fetchAuthMaterial,
appearance,
setDialogOpen,
loginMethods,
}}
<CrossmintWalletProvider
defaultChain={embeddedWallets.defaultChain}
showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
appearance={appearance}
>
<WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
{children}
</WalletManager>

<AuthFormDialog open={dialogOpen} />
</AuthFormProvider>
</CrossmintWalletProvider>
</AuthContext.Provider>
<AuthFormProvider
initialState={{
apiKey: crossmint.apiKey,
baseUrl: crossmintBaseUrl,
fetchAuthMaterial,
appearance,
setDialogOpen,
loginMethods,
}}
>
<WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
{children}
</WalletManager>

<AuthFormDialog open={dialogOpen} />
</AuthFormProvider>
</CrossmintWalletProvider>
</AuthContext.Provider>
</TwindProvider>
);
}

Expand Down
14 changes: 14 additions & 0 deletions packages/client/ui/react-ui/src/providers/TwindProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type React from "react";
import twindConfig from "@/twind.config";
import { install } from "@twind/core";
import { useEffect } from "react";

export function TwindProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
// Initialize twind with custom configuration
// This sets up the CSS-in-JS styling solution for the entire application
install(twindConfig);
}, []);

return <>{children}</>;
}
1 change: 0 additions & 1 deletion packages/client/ui/react-ui/tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { treeShakableConfig } from "../../../../tsup.config.base";
const config: Options = {
...treeShakableConfig,
external: ["react", "react-dom"],
entry: ["src/index.ts"],
};

export default config;

0 comments on commit aecf9b0

Please sign in to comment.