bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
140 lines (139 loc) • 7.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// Built-in provider configs
export const googleProvider = {
id: "google",
name: "Google",
color: "#4285F4",
icon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: [_jsx("title", { children: "Google" }), _jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] })),
};
export const githubProvider = {
id: "github",
name: "GitHub",
color: "#24292e",
icon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("title", { children: "GitHub" }), _jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })] })),
};
export const twitterProvider = {
id: "twitter",
name: "X (Twitter)",
color: "#000000",
icon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("title", { children: "X (Twitter)" }), _jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })] })),
};
// Extended providers for BSV ecosystem
export const handcashProvider = {
id: "handcash",
name: "HandCash",
color: "#38CB7C",
icon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: [_jsx("title", { children: "HandCash" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "handcash-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#38CB7C" }), _jsx("stop", { offset: "100%", stopColor: "#2FA85C" })] }) }), _jsx("circle", { cx: "12", cy: "12", r: "10", fill: "url(#handcash-gradient)" }), _jsx("text", { x: "12", y: "16", textAnchor: "middle", fill: "white", fontSize: "10", fontWeight: "bold", children: "HC" })] })),
customAuth: {
type: "redirect",
handler: async (config) => {
// Lazy load HandCash integration only when needed
try {
const { createHandCashAuthHandler } = await import("./handcash-provider.js");
return await createHandCashAuthHandler(config);
}
catch (error) {
return {
success: false,
error: error instanceof Error
? error.message
: "Failed to load HandCash integration",
};
}
},
},
};
export const yoursWalletProvider = {
id: "yours",
name: "Yours Wallet",
color: "#6B46C1",
icon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: [_jsx("title", { children: "Yours Wallet" }), _jsx("path", { fill: "#6B46C1", d: "M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" }), _jsx("path", { fill: "white", d: "M12 5.5l7 3.5v8c0 3.88-2.69 7.52-6.3 8.42-.23.06-.47.06-.7.01C8.39 24.53 5.7 20.88 5.7 17V9l6.3-3.5" })] })),
customAuth: {
type: "challenge",
handler: async (_config) => {
// Lazy load Yours Wallet integration only when needed
try {
const { createYoursAuthHandler } = await import("./yours-wallet-provider.js");
return await createYoursAuthHandler();
}
catch (error) {
return {
success: false,
error: error instanceof Error
? error.message
: "Failed to load Yours Wallet integration",
};
}
},
},
};
// Default providers
export const defaultProviders = [
googleProvider,
githubProvider,
twitterProvider,
];
// Provider registry for custom providers
const providerRegistry = new Map([
["google", googleProvider],
["github", githubProvider],
["twitter", twitterProvider],
["handcash", handcashProvider],
["yours", yoursWalletProvider],
]);
export function registerOAuthProvider(provider) {
providerRegistry.set(provider.id, provider);
}
export function getOAuthProvider(id) {
return providerRegistry.get(id);
}
export function getAllOAuthProviders() {
return Array.from(providerRegistry.values());
}
// Helper to build OAuth URLs
export function buildOAuthUrl(provider, params) {
// HandCash specific
if (provider.id === "handcash") {
if (!provider.authUrl) {
throw new Error("HandCash provider missing authUrl");
}
const url = new URL(provider.authUrl);
url.searchParams.set("client_id", params.clientId);
url.searchParams.set("redirect_uri", params.redirectUri);
url.searchParams.set("response_type", "code");
url.searchParams.set("scope", params.scope || "read");
if (params.state)
url.searchParams.set("state", params.state);
return url.toString();
}
// Default OAuth2 flow
return `/api/auth/${provider.id}?${new globalThis.URLSearchParams({
callbackUrl: params.redirectUri,
...(params.state && { state: params.state }),
}).toString()}`;
}
// Provider-specific handlers
export async function handleOAuthCallback(config) {
const provider = getOAuthProvider(config.provider);
if (!provider) {
return { success: false, error: "Unknown provider" };
}
// Custom handler
if (provider.customAuth?.handler) {
return provider.customAuth.handler(config);
}
// Standard OAuth flow - call your backend
const response = await fetch(`/api/auth/${config.provider}/callback`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
code: config.code,
state: config.state,
}),
});
if (!response.ok) {
return { success: false, error: "OAuth callback failed" };
}
const data = await response.json();
return { success: true, ...data };
}