Skip to content

Add Solutions landing page #591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
cylon56 wants to merge 1 commit into
base: main
Choose a base branch
from
+229 −0
Draft

Add Solutions landing page #591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,17 @@
]
},
"tabs": [
{
"tab": "Solutions",
"groups": [
{
"group": "Solutions",
"pages": [
"solutions/overview"
]
}
]
},
{
"tab": "Documentation",
"groups": [
Expand Down
218 changes: 218 additions & 0 deletions solutions/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
---
title: "Solutions"
description: "Composable infrastructure for embedded wallets and onchain automation. Find your use case and explore working code examples."
sidebarTitle: "Overview"
mode: custom
---

export const ExamplesSearch = () => {
const S = "https://github.com/tkhq/sdk/tree/main/examples/";
const R = "https://github.com/tkhq/";
const examples = [
{ name: "Embedded Wallet", d: "Passkeys, email, OAuth", lang: "TypeScript", cat: "Demo Apps", github: R+"demo-embedded-wallet", live: "https://wallet.tx.xyz" },
{ name: "Consumer Wallet", d: "Ethers + WalletConnect", lang: "TypeScript", cat: "Demo Apps", github: R+"demo-consumer-wallet", live: null },
{ name: "Passkey Wallet", d: "Passkey-only wallet", lang: "TypeScript", cat: "Demo Apps", github: R+"demo-passkey-wallet", live: null },
{ name: "EWK Demo", d: "Embedded Wallet Kit", lang: "TypeScript", cat: "Demo Apps", github: R+"demo-ewk", live: null },
{ name: "React Embedded", d: "React embedded wallet", lang: "TypeScript", cat: "Demo Apps", github: R+"demo-embedded-wallet-react", live: null },
{ name: "React Native", d: "Mobile wallet app", lang: "TypeScript", cat: "Demo Apps", github: R+"react-native-demo-wallet", live: null },
{ name: "Telegram Mini App", d: "TG mini app wallet", lang: "TypeScript", cat: "Demo Apps", github: R+"demo-telegram-mini-app", live: null },
{ name: "Wagmi", d: "Wagmi integration", lang: "TypeScript", cat: "Demo Apps", github: R+"wagmi-demo", live: null },
{ name: "Popup Wallet", d: "Popup-based wallet", lang: "TypeScript", cat: "Demo Apps", github: R+"popup-wallet-demo", live: null },
{ name: "Flutter", d: "iOS/Android wallet", lang: "Dart", cat: "Demo Apps", github: R+"dart-sdk/tree/main/examples/flutter-demo-app", live: null },
{ name: "Kitchen Sink", d: "All features demo", lang: "TypeScript", cat: "Demo Apps", github: S+"kitchen-sink", live: null },
{ name: "Viem Passkeys", d: "Passkeys + viem signer", lang: "TypeScript", cat: "Auth", github: R+"demo-viem-passkeys", live: null },
{ name: "Ethers Passkeys", d: "Passkeys + ethers signer", lang: "TypeScript", cat: "Auth", github: R+"demo-ethers-passkeys", live: null },
{ name: "Federated Passkeys", d: "WebAuthn federation", lang: "TypeScript", cat: "Auth", github: S+"with-federated-passkeys", live: null },
{ name: "ETH Passkeys Galore", d: "Multiple passkey flows", lang: "TypeScript", cat: "Auth", github: S+"with-eth-passkeys-galore", live: null },
{ name: "Solana Passkeys", d: "Passkeys on Solana", lang: "TypeScript", cat: "Auth", github: S+"with-solana-passkeys", live: null },
{ name: "Email Auth", d: "Email-based login", lang: "TypeScript", cat: "Auth", github: S+"email-auth", live: null },
{ name: "Email + Local Storage", d: "Email auth w/ persistence", lang: "TypeScript", cat: "Auth", github: S+"email-auth-local-storage", live: null },
{ name: "Magic Link", d: "Passwordless email links", lang: "TypeScript", cat: "Auth", github: S+"magic-link-auth", live: null },
{ name: "OTP Auth", d: "One-time passcodes", lang: "TypeScript", cat: "Auth", github: S+"otp-auth", live: null },
{ name: "OAuth", d: "Social login providers", lang: "TypeScript", cat: "Auth", github: S+"oauth", live: null },
{ name: "Wallet Auth", d: "Sign-in with wallet", lang: "TypeScript", cat: "Auth", github: S+"wallet-auth", live: null },
{ name: "Offline Signing", d: "Offline request signing", lang: "TypeScript", cat: "Auth", github: S+"with-offline", live: null },
{ name: "Delegated Access", d: "Sub-org policy delegation", lang: "TypeScript", cat: "Auth", github: S+"delegated-access", live: null },
{ name: "Delegated Signing", d: "Delegated key access", lang: "TypeScript", cat: "Auth", github: S+"with-delegated", live: null },
{ name: "Ethers", d: "Sign + broadcast via Ethers", lang: "TypeScript", cat: "EVM", github: S+"with-ethers", live: null },
{ name: "Viem", d: "Turnkey Custom Account", lang: "TypeScript", cat: "EVM", github: S+"with-viem", live: null },
{ name: "EIP-1193 Provider", d: "Standard ETH provider", lang: "TypeScript", cat: "EVM", github: S+"with-eip-1193-provider", live: null },
{ name: "Gnosis Safe", d: "Multisig transactions", lang: "TypeScript", cat: "EVM", github: S+"with-gnosis", live: null },
{ name: "Nonce Manager", d: "Sequential/optimistic txs", lang: "TypeScript", cat: "EVM", github: S+"with-nonce-manager", live: null },
{ name: "Wallet Stamper", d: "External wallet stamping", lang: "TypeScript", cat: "EVM", github: S+"with-wallet-stamper", live: null },
{ name: "Porto", d: "Porto integration", lang: "TypeScript", cat: "EVM", github: S+"with-porto", live: null },
{ name: "Solana", d: "SPL tokens + Jupiter swaps", lang: "TypeScript", cat: "Multi-chain", github: S+"with-solana", live: null },
{ name: "Bitcoin", d: "Construct + broadcast BTC tx", lang: "TypeScript", cat: "Multi-chain", github: S+"with-bitcoin", live: null },
{ name: "Cosmos (CosmJS)", d: "Celestia testnet signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-cosmjs", live: null },
{ name: "Sui", d: "Sign + broadcast Sui tx", lang: "TypeScript", cat: "Multi-chain", github: S+"with-sui", live: null },
{ name: "IOTA", d: "IOTA transaction signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-iota", live: null },
{ name: "Aptos", d: "Aptos transaction signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-aptos", live: null },
{ name: "Movement", d: "Movement chain signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-movement", live: null },
{ name: "Tron", d: "TRC-20 + TRX transfers", lang: "TypeScript", cat: "Multi-chain", github: S+"with-tron", live: null },
{ name: "TON", d: "TON blockchain signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-ton", live: null },
{ name: "Stacks", d: "STX transaction signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-stacks", live: null },
{ name: "Doge", d: "DOGE transaction signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-doge", live: null },
{ name: "Tempo", d: "Tempo chain signing", lang: "TypeScript", cat: "Multi-chain", github: S+"with-tempo", live: null },
{ name: "Uniswap", d: "V3 swap via Ethers", lang: "TypeScript", cat: "DeFi", github: S+"with-uniswap", live: null },
{ name: "0x", d: "DEX aggregator swap", lang: "TypeScript", cat: "DeFi", github: S+"with-0x", live: null },
{ name: "Jupiter", d: "Solana DEX aggregator", lang: "TypeScript", cat: "DeFi", github: S+"with-jupiter", live: null },
{ name: "Morpho", d: "Lending + borrowing", lang: "TypeScript", cat: "DeFi", github: S+"with-morpho", live: null },
{ name: "Aave", d: "DeFi lending protocol", lang: "TypeScript", cat: "DeFi", github: S+"with-aave", live: null },
{ name: "Li.Fi", d: "Cross-chain bridge + swap", lang: "TypeScript", cat: "DeFi", github: S+"with-lifi", live: null },
{ name: "Breeze", d: "Breeze protocol integration", lang: "TypeScript", cat: "DeFi", github: S+"with-breeze", live: null },
{ name: "Yield XYZ", d: "Yield protocol integration", lang: "TypeScript", cat: "DeFi", github: S+"with-yield-xyz", live: null },
{ name: "Arc", d: "Arc protocol integration", lang: "TypeScript", cat: "DeFi", github: S+"with-arc", live: null },
{ name: "x402", d: "HTTP 402 payments", lang: "TypeScript", cat: "DeFi", github: S+"with-x402", live: null },
{ name: "ETH USDC Swap", d: "EVM stablecoin swap", lang: "TypeScript", cat: "DeFi", github: S+"eth-usdc-swap", live: null },
{ name: "Solana USDC Swap", d: "Solana stablecoin swap", lang: "TypeScript", cat: "DeFi", github: S+"solana-usdc-swap", live: null },
{ name: "Gas Station", d: "Turnkey gas sponsorship", lang: "TypeScript", cat: "Gas and AA", github: S+"tk-gas-station", live: null },
{ name: "EVM Paymaster", d: "ERC-4337 gas sponsorship", lang: "TypeScript", cat: "Gas and AA", github: S+"with-paymaster", live: null },
{ name: "Solana Paymaster", d: "Solana gas sponsorship", lang: "TypeScript", cat: "Gas and AA", github: S+"with-solana-paymaster", live: null },
{ name: "Biconomy AA", d: "Biconomy smart accounts", lang: "TypeScript", cat: "Gas and AA", github: S+"with-biconomy-aa", live: null },
{ name: "ZeroDev AA", d: "ZeroDev smart accounts", lang: "TypeScript", cat: "Gas and AA", github: S+"with-zerodev-aa", live: null },
{ name: "Trading Runner", d: "Multi-key Uniswap trading", lang: "TypeScript", cat: "Automation", github: S+"trading-runner", live: null },
{ name: "Rebalancer", d: "Portfolio rebalancing", lang: "TypeScript", cat: "Automation", github: S+"rebalancer", live: null },
{ name: "Sweeper", d: "EVM fund sweeping", lang: "TypeScript", cat: "Automation", github: S+"sweeper", live: null },
{ name: "Solana Sweeper", d: "Solana fund sweeping", lang: "TypeScript", cat: "Automation", github: S+"solana-sweeper", live: null },
{ name: "Deployer", d: "Smart contract deployment", lang: "TypeScript", cat: "Automation", github: S+"deployer", live: null },
{ name: "Balances", d: "Query wallet balances", lang: "TypeScript", cat: "Automation", github: S+"with-balances", live: null },
{ name: "Export + Sign", d: "Export wallet and sign", lang: "TypeScript", cat: "Wallet Ops", github: S+"wallet-export-sign", live: null },
{ name: "Import/Export (iFrame)", d: "Via iframe stamper", lang: "TypeScript", cat: "Wallet Ops", github: S+"import-export-with-iframe-stamper", live: null },
{ name: "Import/Export (RWK)", d: "Via recovery key", lang: "TypeScript", cat: "Wallet Ops", github: S+"import-export-with-rwk", live: null },
{ name: "Import (Node)", d: "Server-side import", lang: "TypeScript", cat: "Wallet Ops", github: S+"import-in-node", live: null },
{ name: "Export (Node)", d: "Server-side export", lang: "TypeScript", cat: "Wallet Ops", github: S+"export-in-node", live: null },
{ name: "Export + Sign Escrow", d: "Escrow key export", lang: "TypeScript", cat: "Wallet Ops", github: S+"with-export-and-sign-escrow", live: null },
{ name: "Disaster Recovery", d: "Key backup + restore", lang: "TypeScript", cat: "Wallet Ops", github: S+"disaster-recovery", live: null },
{ name: "Key Escrow", d: "Encryption key escrow", lang: "TypeScript", cat: "Wallet Ops", github: S+"encryption-key-escrow", live: null },
{ name: "React Components", d: "Pre-built UI components", lang: "TypeScript", cat: "Frameworks", github: S+"react-components", live: null },
{ name: "React Wallet Kit", d: "Wallet kit for React", lang: "TypeScript", cat: "Frameworks", github: S+"react-wallet-kit", live: null },
{ name: "RN Wallet Kit", d: "Wallet kit for React Native", lang: "TypeScript", cat: "Frameworks", github: S+"with-react-native-wallet-kit", live: null },
{ name: "IndexedDB", d: "Browser key persistence", lang: "TypeScript", cat: "Frameworks", github: S+"with-indexed-db", live: null },
{ name: "SDK Browser", d: "Client-side SDK usage", lang: "TypeScript", cat: "Frameworks", github: S+"with-sdk-js", live: null },
{ name: "SDK Server", d: "Server-side SDK usage", lang: "TypeScript", cat: "Frameworks", github: S+"with-sdk-server", live: null },
{ name: "Twitter Auth", d: "X/Twitter OAuth", lang: "TypeScript", cat: "Frameworks", github: S+"with-x", live: null },
{ name: "Foundry", d: "Foundry forge integration", lang: "TypeScript", cat: "Frameworks", github: S+"foundry", live: null },
{ name: "TypeScript", d: "Browser, server, React, RN", lang: "TypeScript", cat: "SDKs", github: R+"sdk", live: null },
{ name: "Go", d: "API client + request signing", lang: "Go", cat: "SDKs", github: R+"go-sdk", live: null },
{ name: "Rust", d: "Generated client + stamping", lang: "Rust", cat: "SDKs", github: R+"rust-sdk", live: null },
{ name: "Python", d: "API stamper utility", lang: "Python", cat: "SDKs", github: R+"python-sdk", live: null },
{ name: "Swift", d: "iOS + macOS integration", lang: "Swift", cat: "SDKs", github: R+"swift-sdk", live: null },
{ name: "Kotlin", d: "Android wallet integration", lang: "Kotlin", cat: "SDKs", github: R+"kotlin-sdk", live: null },
{ name: "Dart", d: "Flutter mobile integration", lang: "Dart", cat: "SDKs", github: R+"dart-sdk", live: null },
];
const categories = ["Demo Apps", "Auth", "EVM", "Multi-chain", "DeFi", "Gas and AA", "Automation", "Wallet Ops", "Frameworks", "SDKs"];
const langColors = { TypeScript: "#3178C6", Go: "#00ADD8", Rust: "#CE422B", Python: "#3572A5", Dart: "#0175C2", Swift: "#F05138", Kotlin: "#A97BFF" };
const [query, setQuery] = React.useState("");
const filtered = query
? examples.filter((ex) => [ex.name, ex.d, ex.lang, ex.cat].join(" ").toLowerCase().includes(query.toLowerCase()))
: examples;
const visibleCats = categories.filter((cat) => filtered.some((ex) => ex.cat === cat));
return (
<div>
<div style={{ position: "relative", marginBottom: "12px" }}>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search examples by name, language, or category..."
style={{ width: "100%", padding: "8px 12px", paddingRight: "60px", borderRadius: "6px", border: "1px solid #3f3f46", backgroundColor: "#18181b", color: "#e4e4e7", fontSize: "13px" }}
/>
{query && (
<span style={{ position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: "6px" }}>
<span style={{ fontSize: "10px", padding: "2px 6px", borderRadius: "9999px", backgroundColor: "#27272a", color: "#a1a1aa" }}>{filtered.length} results</span>
<button onClick={() => setQuery("")} style={{ width: "16px", height: "16px", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "9999px", backgroundColor: "#3f3f46", color: "#a1a1aa", border: "none", cursor: "pointer", fontSize: "10px", lineHeight: 1 }}>{"×"}</button>
</span>
)}
</div>
{filtered.length === 0 && (
<div style={{ padding: "24px 0", textAlign: "center", color: "#71717a", fontSize: "13px" }}>No examples match your search.</div>
)}
{visibleCats.map((cat) => (
<div key={cat} style={{ marginBottom: "10px" }}>
<div style={{ fontSize: "11px", fontWeight: 600, color: "#a1a1aa", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: "6px" }}>{cat}</div>
<div style={{ display: "flex", flexWrap: "wrap", gap: "5px" }}>
{filtered.filter((ex) => ex.cat === cat).map((ex) => (
<a
key={ex.name}
href={ex.github}
target="_blank"
rel="noopener noreferrer"
title={ex.d}
style={{ display: "inline-flex", alignItems: "center", gap: "6px", padding: "5px 10px", borderRadius: "6px", border: "1px solid #3f3f46", backgroundColor: "#18181b", textDecoration: "none", transition: "border-color 0.15s" }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#6a5bf5"; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = "#3f3f46"; }}
>
<span style={{ width: "6px", height: "6px", borderRadius: "9999px", flexShrink: 0, backgroundColor: langColors[ex.lang] || "#6b7280" }} />
<span style={{ fontSize: "12px", color: "#e4e4e7", whiteSpace: "nowrap" }}>{ex.name}</span>
<span style={{ fontSize: "10px", color: "#71717a", whiteSpace: "nowrap" }}>{ex.d}</span>
{ex.live && (
<a href={ex.live} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} style={{ fontSize: "10px", fontWeight: 700, padding: "2px 6px", borderRadius: "4px", backgroundColor: "#16a34a", color: "#fff", lineHeight: 1, textDecoration: "none", cursor: "pointer" }} onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = "#15803d"; }} onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = "#16a34a"; }}>LIVE {"↗"}</a>
)}
</a>
))}
</div>
</div>
))}
</div>
);
};

<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "40px 48px 64px" }}>

<div style={{ marginBottom: "32px" }}>
<h1 style={{ fontSize: "28px", fontWeight: 700, color: "#fff", margin: "0 0 6px" }}>Solutions</h1>
<p style={{ fontSize: "15px", color: "#a1a1aa", margin: 0 }}>Find your use case and explore working code examples.</p>
</div>

<div style={{ marginBottom: "24px" }}>
<h2 style={{ fontSize: "16px", fontWeight: 600, color: "#e4e4e7", margin: "0 0 10px" }}>Embedded Wallets</h2>
<CardGroup cols={2}>
<Card title="Consumer Wallets" icon="user" href="#" horizontal>
OAuth, passkeys, and social login.
</Card>
<Card title="Business Wallets" icon="building" href="#" horizontal>
B2B payments with email-based recovery.
</Card>
<Card title="Wallets as a Service" icon="cloud" href="#" horizontal>
White-label wallet infra with full UX control.
</Card>
<Card title="Agentic Wallets" icon="robot" href="#" horizontal>
Policy-controlled signing for AI agents.
</Card>
</CardGroup>
</div>

<div style={{ marginBottom: "24px" }}>
<h2 style={{ fontSize: "16px", fontWeight: 600, color: "#e4e4e7", margin: "0 0 10px" }}>Company Wallets</h2>
<CardGroup cols={2}>
<Card title="Payment Orchestration" icon="money-bill-transfer" href="#" horizontal>
Control how funds are minted, moved, and authorized.
</Card>
<Card title="Smart Contract Mgmt" icon="file-contract" href="#" horizontal>
Key management for minting and permissions.
</Card>
</CardGroup>
</div>

<div style={{ marginBottom: "24px" }}>
<h2 style={{ fontSize: "16px", fontWeight: 600, color: "#e4e4e7", margin: "0 0 10px" }}>Key Management</h2>
<CardGroup cols={2}>
<Card title="Encryption Key Escrow" icon="lock" href="#" horizontal>
Secure access keys gated by user auth.
</Card>
<Card title="Disaster Recovery" icon="shield" href="#" horizontal>
Key backup and recovery for business continuity.
</Card>
</CardGroup>
</div>

<div style={{ borderTop: "1px solid #27272a", margin: "32px 0" }} />

<div style={{ marginBottom: "8px" }}>
<h2 style={{ fontSize: "16px", fontWeight: 600, color: "#e4e4e7", margin: "0 0 4px" }}>Code Examples</h2>
<p style={{ fontSize: "14px", color: "#a1a1aa", margin: "0 0 12px" }}>Explore working code examples from GitHub. Filter by name, language, or category.</p>
</div>

<ExamplesSearch />

</div>