@magic-ext/wallet-kit 0.1.0 → 0.2.0

package/dist/types/types.d.ts

@@ -0,0 +1,168 @@
+import { ComponentType } from 'react';
+import { OAuthRedirectResult } from './extension';
+/**
+ * Available third-party wallet providers.
+ * Use these constants or pass string literals directly: 'metamask', 'coinbase', etc.
+ */
+export declare const ThirdPartyWallets: {
+    readonly METAMASK: "metamask";
+    readonly WALLETCONNECT: "walletconnect";
+    readonly COINBASE: "coinbase";
+    readonly PHANTOM: "phantom";
+    readonly RABBY: "rabby";
+};
+/** Type representing valid third-party wallet values */
+export type ThirdPartyWallet = (typeof ThirdPartyWallets)[keyof typeof ThirdPartyWallets];
+export interface ProviderMetadata {
+    displayName: string;
+    Icon: ComponentType<{
+        width?: number;
+        height?: number;
+        className?: string;
+    }>;
+}
+export declare enum RpcErrorMessage {
+    MalformedEmail = "Invalid params: Please provide a valid email address.",
+    SanEmail = "We are unable to create an account with that email."
+}
+export declare enum OAuthProvider {
+    GOOGLE = "google",
+    APPLE = "apple",
+    FACEBOOK = "facebook",
+    GITHUB = "github",
+    TWITTER = "twitter",
+    LINKEDIN = "linkedin",
+    MICROSOFT = "microsoft",
+    TWITCH = "twitch",
+    BITBUCKET = "bitbucket",
+    DISCORD = "discord",
+    GITLAB = "gitlab",
+    TELEGRAM = "telegram"
+}
+export type LoginProvider = OAuthProvider | ThirdPartyWallet;
+export interface ProviderConfig {
+    title: string;
+    description: string;
+    Icon: ComponentType<{
+        width?: number;
+        height?: number;
+        className?: string;
+    }>;
+}
+/**
+ * OAuth user information returned from social login
+ */
+export interface OAuthUserInfo {
+    /** The OAuth provider used (e.g., 'google', 'apple') */
+    provider: string;
+    name?: string;
+    email?: string;
+    picture?: string;
+    [key: string]: unknown;
+}
+/**
+ * Result returned on successful email login
+ */
+export interface EmailLoginResult {
+    method: 'email';
+    /** The DID token for authentication */
+    didToken: string;
+}
+/**
+ * Result returned on successful OAuth login
+ */
+export interface OAuthLoginResult {
+    method: 'oauth';
+    /** OAuth provider information */
+    oauth: OAuthRedirectResult['oauth'];
+    /** Magic user metadata */
+    magic: OAuthRedirectResult['magic'];
+}
+/**
+ * Result returned on successful wallet login
+ */
+export interface WalletLoginResult {
+    method: 'wallet';
+    /** The connected wallet address */
+    walletAddress: string;
+}
+/**
+ * Discriminated union of all login result types.
+ * Check the `method` property to determine which fields are available.
+ *
+ * @example
+ * onSuccess={(result) => {
+ *   if (result.method === 'email' || result.method === 'oauth') {
+ *     sendToBackend(result.didToken);
+ *   } else {
+ *     console.log('Wallet:', result.walletAddress);
+ *   }
+ * }}
+ */
+export type LoginResult = EmailLoginResult | OAuthLoginResult | WalletLoginResult;
+/**
+ * How the widget is displayed on the page.
+ * - 'inline': Rendered in the document flow (default)
+ * - 'modal': Positioned as a modal dialog, slightly above center
+ */
+export type DisplayMode = 'inline' | 'modal';
+export interface MagicWidgetProps {
+    /**
+     * How the widget is displayed on the page. Defaults to 'inline'.
+     * - 'inline': Rendered in the document flow
+     * - 'modal': Positioned as a modal dialog with backdrop
+     * @example displayMode="modal"
+     */
+    displayMode?: DisplayMode;
+    /**
+     * Whether the widget modal is open. Defaults to true.
+     * @example isOpen={showLogin}
+     */
+    isOpen?: boolean;
+    /**
+     * Callback fired when the widget is closed (e.g., user clicks X button).
+     * @example onClose={() => setShowLogin(false)}
+     */
+    onClose?: () => void;
+    /**
+     * Automatically call onClose after successful login (with a 2 second delay to show success screen).
+     * Defaults to false.
+     * @example closeOnSuccess={true}
+     */
+    closeOnSuccess?: boolean;
+    /**
+     * Close the modal when clicking the backdrop. Only applies when displayMode="modal".
+     * Defaults to false.
+     * @example closeOnClickOutside={true}
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Third-party wallets to display. None enabled by default.
+     * Accepts constants or string literals: 'metamask', 'walletconnect', 'coinbase', 'phantom', 'rabby'
+     * @example wallets={['metamask', 'coinbase']}
+     * @example wallets={[ThirdPartyWallets.METAMASK, ThirdPartyWallets.COINBASE]}
+     */
+    wallets?: ThirdPartyWallet[];
+    /**
+     * Callback fired when login succeeds.
+     * The result type varies by login method - check `result.method` to determine the shape.
+     * @example
+     * onSuccess={(result) => {
+     *   if (result.method === 'email' || result.method === 'oauth') {
+     *     authenticate(result.didToken);
+     *   }
+     * }}
+     */
+    onSuccess?: (result: LoginResult) => void;
+    /**
+     * Callback fired when login fails
+     * @example onError={(error) => console.error(error.message)}
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback fired when the widget has finished initializing and is ready to display.
+     * Use this to hide your custom loading UI.
+     * @example onReady={() => setIsLoading(false)}
+     */
+    onReady?: () => void;
+}

package/dist/types/utils/device.d.ts

@@ -0,0 +1,5 @@
+export declare function isAndroid(): boolean;
+export declare function isSmallIOS(): boolean;
+export declare function isLargeIOS(): boolean;
+export declare function isIOS(): boolean;
+export declare function isMobile(): boolean;

package/dist/types/views/AdditionalProvidersView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetAction } from 'src/reducer';
+interface AdditionalProvidersViewProps {
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export default function AdditionalProvidersView({ dispatch }: AdditionalProvidersViewProps): React.JSX.Element;
+export {};

package/dist/types/views/DeviceVerificationView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+interface DeviceVerificationViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const DeviceVerificationView: ({ state, dispatch }: DeviceVerificationViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/EmailOTPView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+interface EmailOTPViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const EmailOTPView: ({ state, dispatch }: EmailOTPViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/LoginSuccessView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetState } from '../reducer';
+interface LoginSuccessViewProps {
+    state: WidgetState;
+}
+export declare const LoginSuccessView: ({ state }: LoginSuccessViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/LoginView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+interface LoginViewProps {
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const LoginView: ({ dispatch }: LoginViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/LostRecoveryCode.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+export declare const LostRecoveryCode: ({ dispatch }: {
+    dispatch: React.Dispatch<WidgetAction>;
+}) => React.JSX.Element;

package/dist/types/views/MfaView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+interface MFAViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const MFAView: ({ state, dispatch }: MFAViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/OAuthPendingView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+import { OAuthProvider } from '../types';
+interface OAuthPendingViewProps {
+    provider: OAuthProvider;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const OAuthPendingView: ({ provider, dispatch }: OAuthPendingViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/RecoveryCode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+interface RecoveryCodeViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const RecoveryCodeView: ({ state, dispatch }: RecoveryCodeViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/WalletConnectView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+interface WalletConnectViewProps {
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const WalletConnectView: ({ dispatch }: WalletConnectViewProps) => React.JSX.Element;
+export {};

package/dist/types/views/WalletPendingView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+import { ThirdPartyWallet } from '../types';
+interface WalletPendingViewProps {
+    provider: ThirdPartyWallet;
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const WalletPendingView: ({ provider, state, dispatch }: WalletPendingViewProps) => React.JSX.Element | null;
+export {};

package/dist/types/wagmi/config.d.ts

@@ -0,0 +1,8 @@
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import type { AppKitNetwork } from '@reown/appkit/networks';
+export declare const networks: [AppKitNetwork, ...AppKitNetwork[]];
+export declare function createWagmiConfig(projectId?: string): {
+    projectId: string;
+    wagmiAdapter: WagmiAdapter;
+    wagmiConfig: import("wagmi").Config;
+};

package/dist/types/wagmi/connectors.d.ts

@@ -0,0 +1,9 @@
+import { ThirdPartyWallet } from '../types';
+/**
+ * Map wallet types to wagmi connector IDs
+ */
+export declare const CONNECTOR_IDS: Record<ThirdPartyWallet, string>;
+/**
+ * Alternative names to match connectors by name if ID doesn't match
+ */
+export declare const CONNECTOR_NAME_PATTERNS: Record<ThirdPartyWallet, string>;

package/dist/types/wagmi/walletconnect-provider.d.ts

@@ -0,0 +1,3 @@
+import type { EthereumProvider } from '@walletconnect/ethereum-provider';
+export declare function setWalletConnectProvider(provider: Awaited<ReturnType<typeof EthereumProvider.init>> | null): void;
+export declare function getWalletConnectProvider(): Awaited<ReturnType<typeof EthereumProvider.init>> | null;

package/package.json

@@ -1,5 +1,83 @@
 {
   "name": "@magic-ext/wallet-kit",
-  "version": "0.1.0",
-  "description": "Magic SDK Wallet Kit Extension"
+  "useCustomBuild": true,
+  "version": "0.2.0",
+  "description": "Magic SDK Wallet Kit Extension",
+  "author": "Magic <team@magic.link> (https://magic.link/)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magiclabs/magic-js"
+  },
+  "scripts": {
+    "prepare": "panda codegen",
+    "build:css": "panda cssgen --outfile dist/styles.css",
+    "build": "rollup -c rollup.config.mjs && tsc"
+  },
+  "files": [
+    "dist"
+  ],
+  "target": "browser",
+  "type": "module",
+  "module": "./dist/es/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/es/index.mjs"
+    }
+  },
+  "externals": {
+    "include": [
+      "@magic-sdk/provider",
+      "@reown/appkit",
+      "@reown/appkit-adapter-wagmi",
+      "@tanstack/react-query",
+      "@wagmi/core",
+      "@walletconnect/ethereum-provider",
+      "react",
+      "react-dom",
+      "viem",
+      "wagmi"
+    ]
+  },
+  "esbuildAliases": {
+    "@styled/css": "./styled-system/css",
+    "@styled/jsx": "./styled-system/jsx",
+    "@styled/tokens": "./styled-system/tokens",
+    "@styled/patterns": "./styled-system/patterns"
+  },
+  "dependencies": {
+    "@magiclabs/ui-components": "^1.49.2",
+    "@reown/appkit": "^1.8.0",
+    "@reown/appkit-adapter-wagmi": "^1.8.0",
+    "@wagmi/core": "^2.0.0",
+    "@walletconnect/ethereum-provider": "^2.23.0",
+    "wagmi": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "viem": "^2.0.0"
+  },
+  "devDependencies": {
+    "@magic-sdk/provider": "^33.3.0",
+    "@magic-sdk/types": "^27.3.0",
+    "@pandacss/dev": "^0.35.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@tanstack/react-query": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "^4.18.0",
+    "tslib": "^2.6.3",
+    "viem": "^2.37.9"
+  },
+  "gitHead": "36ebb29c1090e98d4d66c56a395b528e6369f7c9"
 }