Smart contract: N signatures | Passport wallets need multiple confirmations | | **Approval** | Per collection | One-time approval per NFT collection | ## How It Works ```mermaid theme={null} sequenceDiagram User->>SDK: prepareBulkListings(20 items) SDK-->>User: completeListings() User->>Wallet: Sign message Wallet-->>User: Signature User->>SDK: completeListings(sig) SDK->>Orderbook: Submit all Orderbook-->>SDK: Results ``` The `prepareBulkListings()` call returns: 1. **Actions** - Approval transactions (if needed) + `signable` message 2. **completeListings()** method - Scoped method to submit signatures ```typescript theme={null} const { actions, completeListings } = await sdk.prepareBulkListings({ makerAddress: `userAddress`, listingParams: [...], // Array of listing configs }); ``` ## Basic Example Create multiple ERC-721 listings at once: ```typescript theme={null} import { Orderbook } from '@imtbl/orderbook'; import { Environment } from '@imtbl/config'; import { ethers } from 'ethers'; async function createBulkListings() {
Logged in
; return ( ); } ``` ### Popup Login ```tsx theme={null} const { loginWithPopup } = useLogin(); await loginWithPopup(loginConfig); ``` ### Redirect Login ```tsx theme={null} const { loginWithRedirect } = useLogin(); // Navigates away from the page for OAuth authentication await loginWithRedirect(loginConfig); ``` ### Direct Login Options Skip the login method selection screen and go directly to a specific provider: ```tsx theme={null} import { MarketingConsentStatus } from '@imtbl/auth-next-client'; const { loginWithPopup } = useLogin(); // Direct to Google login await loginWithPopup(config, { directLoginOptions: { directLoginMethod: 'google', marketingConsentStatus: MarketingConsentStatus.OptedIn, }, }); // Direct to email login with marketing consent await loginWithPopup(config, { directLoginOptions: { directLoginMethod: 'email', email: 'user@example.com', marketingConsentStatus: MarketingConsentStatus.OptedIn, }, }); ``` | Option | Description | | ------------------------ | ----------------------------------------------------------- | | `directLoginMethod` | The authentication provider (`email`, `google`, or `apple`) | | `email` | Required when `directLoginMethod` is `email` | | `marketingConsentStatus` | Marketing consent (`OptedIn` or `Unsubscribed`) |Completing login...
User ID: {session?.user?.sub}
Email: {session?.user?.email}
Wallet: {session?.zkEvm?.ethAddress}
Loading...
;
if (!isAuthenticated) return Please log in
;
return Protected content
;
}
```
Please log in
;
// Incorrect -- session can exist with expired/invalid tokens
const { session } = useImmutableSession();
if (!session) return Please log in
;
// Incorrect -- status doesn't account for token errors
const { status } = useImmutableSession();
if (status !== "authenticated") return Please log in
;
```
{error}
} ); } ``` To customize the logout redirect URI: ```tsx theme={null} const { logout } = useLogout(); await logout({ clientId: process.env.NEXT_PUBLIC_IMMUTABLE_CLIENT_ID!, logoutRedirectUri: `${window.location.origin}/logged-out`, }); ```Your session has expired. Please sign in again.
Please sign in to continue.
; } const handleFetch = async () => { try { const token = await getAccessToken(); await fetch('/api/data', { headers: { Authorization: `Bearer ${token}` }, }); } catch (error) { console.error('Failed to get access token:', error); } }; return ; } ``` | Session Error | Description | Action | | --------------------- | --------------------- | ------------------------------------------- | | `"TokenExpired"` | Access token expired | Handled automatically by `getAccessToken()` | | `"RefreshTokenError"` | Refresh token invalid | Prompt user to sign in again |
{address ? (
);
}
```
Wallet connected: {address}
) : ( )}TypeScript SDK packages"] end end end Game --> GameSDK ``` ### Communication Flow How the game engine communicates with TypeScript SDK packages through JSON serialization: ```mermaid theme={null} graph LR Game["Game Engine"] SDK["Game SDK"] WebView["Invisible
WebView"] IndexFile["Game Bridge"] TSPackage["TypeScript
SDK"] Game <-->|"function call"| SDK SDK <-->|"JSON serialize/
deserialize"| WebView WebView <-->|"callFunction()
parse JSON"| IndexFile IndexFile <-->|"callFunction()
callbackToGame()"| TSPackage ``` ### PKCE Authentication Flow How authentication works using in-app browsers for security: ```mermaid theme={null} sequenceDiagram participant Game participant SDK as Game SDK participant Native as Native Code participant Browser as In-App Browser Game->>SDK: Login via PKCE flow SDK->>Native: Launch in-app browser Native->>Browser: Open authentication URL Browser->>Browser: User authenticates Browser->>Native: Deep link callback Native->>SDK: Authentication complete SDK->>Game: Login success ``` ## Core Components ### 1. Game Bridge The game bridge enables string-based communication between your game engine and the [TypeScript SDK](/docs/sdks/typescript). **How it works:** * The [`game-bridge`](https://github.com/immutable/ts-immutable-sdk/tree/main/packages/game-bridge) package enables communication with TypeScript SDK packages * TypeScript packages are bundled into a single file loaded into an invisible WebView * The game SDK sends JSON string messages to the WebView and receives responses **Implementation:** * Unity: [`index.html`](https://github.com/immutable/unity-immutable-sdk/blob/main/src/Packages/Passport/Runtime/Resources/index.html) * Unreal: [`index.js`](https://github.com/immutable/unreal-immutable-sdk/blob/main/Web/index.js) Both contain the bundled TypeScript SDK and `game-bridge` package. ### 2. WebView An invisible WebView loads the game bridge and executes TypeScript SDK functionality. **Requirements:** * HTML/JavaScript loading support * Modern JavaScript (ES6+) * Bidirectional native-JavaScript communication * Hidden from user view (no UI rendering) **Platform considerations:** * Mobile: Native WebView components (Android/iOS) * Desktop: May require embedded browser frameworks * Windows: CEF 90+ required ### 3. In-App Browser Authentication uses an in-app browser (not WebView) for security and SSO compatibility. **Requirements:** * Secure, isolated browser context * Process isolation (runs separately from your app) * Deep link callback handling * System authentication session support