@dogeos/dogeos-sdk 3.0.1 → 3.0.3

package/README.md

@@ -1,30 +1,85 @@
-# Wallet Connect SDK
+# dogeos-sdk
 
-A lightweight React SDK to integrate crypto wallet connection into your app. It ships with a configurable wallet list modal and basic account actions. The current focus is EVM, built on top of `@tomo-inc/wallet-adaptor-base`, and supports custom wallets and chain configuration.
+A lightweight React SDK for integrating crypto wallet connections into your app. It ships with a configurable wallet list modal and basic account actions. Currently focused on EVM chains, built on top of `@tomo-inc/wallet-adaptor-base`, and supports custom wallets and chain configuration.
 
-## Quick Start
+## On This Page
+
+- [Installation](#installation)
+- [Setup Provider](#setup-provider)
+- [Displaying the Modal](#displaying-the-modal)
+- [Customize Theme](#customize-theme)
+- [Account Actions](#account-actions)
+- [Advanced Configuration](#advanced-configuration)
+- [Additional Reference](#additional-reference)
+
+---
+
+## Installation
+
+```bash
+npm install @dogeos/dogeos-sdk
+
+```
+
+Or using yarn:
+
+```bash
+yarn add @dogeos/dogeos-sdk
+
+```
+
+Or using pnpm:
+
+```bash
+pnpm add @dogeos/dogeos-sdk
+
+```
+
+---
+
+## Setup Provider
+
+### Use React
+
+Wrap your app with `WalletConnectProvider` at the root component.
 
 ```tsx
-// App.tsx — wrap your app with provider (comments in English)
+// App.tsx
 import React from "react";
-import { WalletConnectProvider } from "@tomo-inc/wallet-connect-kit";
+import { WalletConnectProvider } from "@dogeos/dogeos-sdk";
+import "@dogeos/dogeos-sdk/style.css";
+import type { WalletConfig, WalletConnectConfig, WalletConnectProtocolConfig, tomoClientId } from "@dogeos/dogeos-sdk"
+
+const config = {
+  connectors?: WalletConfig[];
+  // Supported chains (for EVM, compatible with viem/Chain)
+  chains?: Partial<Record<ChainType, EvmChain[] | any[]>>;
+  walletConnectConfig?: WalletConnectProtocolConfig;
+  tomoClientId?: string;
+} as WalletConnectConfig;
 
 export default function App() {
   return (
-    <WalletConnectProvider>
+    <WalletConnectProvider config={config}>
       <YourApp />
     </WalletConnectProvider>
   );
 }
 ```
 
-### Open modal, connect and disconnect
+---
+
+## Displaying the Modal
+
+To display the modal for wallet connection, you can use the hooks provided by **dogeos-sdk**.
+
+### Example Code
 
 ```tsx
 import React from "react";
-import { useWalletConnect } from "@tomo-inc/wallet-connect-kit";
+import { useWalletConnect } from "@dogeos/dogeos-sdk";
 
-export function ConnectButton() {
+const ConnectButton = () => {
   const { openModal, isConnected, disconnect } = useWalletConnect();
 
   return (
@@ -32,26 +87,44 @@ export function ConnectButton() {
       {isConnected ? "Disconnect" : "Connect Wallet"}
     </button>
   );
-}
+};
+
+export default ConnectButton;
 ```
 
-### Read account and sign
+### MyDoge Social Login Experience
+
+When using the MyDoge theme, the modal will first display the social login interface, supporting:
+
+- **Twitter Login** - Quick login with Twitter/X account
+- **Google Login** - Quick login with Google account
+- **Email Login** - Login with email address
+
+Users can also select "Or connect a wallet" to directly connect traditional crypto wallets.
+
+---
+
+## Account Actions
+
+### Reading Account Info and Signing
+
+After connecting a wallet, you can use the `useAccount` hook to access account information and perform signing operations.
 
 ```tsx
 import React from "react";
-import { useAccount } from "@tomo-inc/wallet-connect-kit";
+import { useAccount } from "@dogeos/dogeos-sdk";
 
 export function AccountInfo() {
   const { address, chainId, signMessage, signInWithWallet } = useAccount();
 
   const onSignMessage = async () => {
     // Message signing for verification
-    const sig = await signMessage?.({ message: "Hello Tomo" });
+    const sig = await signMessage?.({ message: "Hello MyDoge" });
     console.log("signature:", sig);
   };
 
   const onSignin = async () => {
-    // SIW (sign-in with wallet) to get a token
+    // Sign in with wallet to get a token
     const token = await signInWithWallet();
     console.log("token:", token);
   };
@@ -59,7 +132,7 @@ export function AccountInfo() {
   return (
     <div>
       <div>Address: {address}</div>
-      <div>ChainId: {chainId}</div>
+      <div>Chain ID: {chainId}</div>
       <button onClick={onSignMessage}>Sign Message</button>
       <button onClick={onSignin}>Sign In With Wallet</button>
     </div>
@@ -67,83 +140,93 @@ export function AccountInfo() {
 }
 ```
 
-### Optional: custom wallets and chains
+### Available Account Actions
+
+- **address** - Current connected wallet address
+- **chainId** - Current connected chain ID
+- **balance** - Account balance
+- **chainType** - Chain type (e.g., "evm")
+- **currentWallet** - Current wallet information
+- **currentProvider** - Current wallet provider
+- **switchChain** - Switch network
+- **signMessage** - Sign message
+- **signInWithWallet** - Sign in with wallet
+
+---
+
+## Additional Reference
+
+### SDK Exports
+
+The SDK provides the following main exports:
+
+- **WalletConnectProvider** - Main provider component with optional `config` prop
+- **useWalletConnect** - Hook for modal control and connection state
+  - `{ isOpenModal, openModal, closeModal, isConnected, isConnecting, error, connect, disconnect }`
+- **useAccount** - Hook for account info and actions
+  - `{ address, balance, chainType, chainId, currentWallet, currentProvider, switchChain, signMessage, signInWithWallet }`
+- **Type Definitions**: `WalletConnectConfig`, `Chain`, `WalletProvider`, `UseAccount`, `UseWalletConnect`, `ChainType`, `ModalView`
+
+### Complete Example
 
 ```tsx
 import React from "react";
 import {
   WalletConnectProvider,
-  type Chain,
-} from "@tomo-inc/wallet-connect-kit";
+  useWalletConnect,
+  useAccount,
+} from "@dogeos/dogeos-sdk";
+import "@dogeos/dogeos-sdk/style.css";
 
-const config = {
-  // Custom wallet connectors (merge with defaults)
-  connectors: [
-    {
-      id: "my-wallet",
-      name: "My Wallet",
-      namespace: "my.wallet",
-      icon: "https://example.com/icon.png",
-      iconBackground: "#000",
-      downloadUrls: { chrome: "https://example.com/install" },
-    },
-  ],
-  // Supported chains by chain type (compatible with viem/Chain for EVM)
-  chains: {
-    evm: [
-      {
-        id: 1,
-        name: "Ethereum",
-        nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
-        rpcUrls: { default: { http: ["https://eth.merkle.io"] } },
-        blockExplorers: {
-          default: { name: "Etherscan", url: "https://etherscan.io" },
-        },
-      } as Chain,
-    ],
-    // aptos: [...],
-    // solana: [...],
-  },
-  // Optional: WalletConnect protocol configuration
-  // walletConnectConfig: { ... },
-
-  // Optional: Embedded wallet configuration for social login
-  embeddedWalletConfig: {
-    apiKey: "your-api-key",
-    // ... other embedded wallet settings
-  },
-
-  // Optional: Product type for UI theme (default: "tomo")
-  prodType: "mydoge", // or "tomo"
-};
+// Connect Button Component
+function ConnectButton() {
+  const { openModal, isConnected, disconnect } = useWalletConnect();
+  const { address } = useAccount();
+
+  if (isConnected && address) {
+    return (
+      <div>
+        <p>
+          Connected: {address.slice(0, 6)}...{address.slice(-4)}
+        </p>
+        <button onClick={disconnect}>Disconnect</button>
+      </div>
+    );
+  }
+
+  return <button onClick={openModal}>Connect Wallet</button>;
+}
+
+// App Component
+function App() {
+  // Configuration
+  const config = {};
 
-export function AppWithConfig() {
   return (
     <WalletConnectProvider config={config}>
-      <YourApp />
+      <div>
+        <h1>MyDoge Wallet Connect Example</h1>
+        <ConnectButton />
+      </div>
     </WalletConnectProvider>
   );
 }
+
+export default App;
 ```
 
-## Exports
+---
 
-- `WalletConnectProvider` - Main provider component with optional `config` prop
-- `useWalletConnect` - Hook for modal control and connection state: `{ isOpenModal, openModal, closeModal, isConnected, isConnecting, error, connect, disconnect }`
-- `useAccount` - Hook for account info and actions: `{ address, balance, chainType, chainId, currentWallet, currentProvider, switchChain, signMessage, signInWithWallet }`
-- Types: `WalletConnectConfig`, `Chain`, `WalletProvider`, `UseAccount`, `UseWalletConnect`, `ChainType`, `ModalView`
-- Views: `MyDogeSocialLoginView` - Custom MyDoge-styled social login view with Twitter, Google login and email support
+## Support
 
-### WalletConnectProvider Config
+For more help or if you encounter issues, please visit:
 
-The `config` prop accepts:
+- [GitHub Issues](https://github.com/DogeOS69/mydoge-sdk)
+- [Support](support@dogeos.com)
+- [Documentation](https://docs.dogeos.com)
 
-- `connectors?: WalletConfig[]` - Custom wallet connectors to merge with defaults
-- `chains?: Partial<Record<ChainType, EvmChain[] | any[]>>` - Supported chains by chain type (e.g., `{ evm: [...], aptos: [...], solana: [...] }`)
-- `walletConnectConfig?: WalletConnectProtocolConfig` - WalletConnect protocol configuration
-- `embeddedWalletConfig?: InitConfig` - Embedded wallet configuration for social login features (API key, OAuth settings, etc.)
-- `prodType?: ProdTypeEnum` - Product type to determine UI theme (`"tomo"` or `"mydoge"`). Controls which social login view is displayed by default
+---
 
-**Note:** When `prodType` is set to `"mydoge"`, the SDK will automatically use the MyDoge-styled UI theme for social login features. Set it to `"tomo"` or leave it unset for the default Tomo theme.
+## License
 
-For more comprehensive examples, see `EXAMPLE.md` in the same directory.
+Please check the project's LICENSE file for details.

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { AdaptorChainType } from '@tomo-inc/wallet-adaptor-base';
 import { Chain as Chain_2 } from 'viem/chains';
 import { Connector } from '@tomo-inc/wallet-adaptor-base';
-import { InitConfig } from '@tomo-inc/embedded-wallet-providers';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { SignInParams } from '@tomo-inc/wallet-adaptor-base';
 import { WalletConfig } from '@tomo-inc/wallet-adaptor-base';
@@ -159,9 +158,7 @@ export declare interface WalletConnectConfig {
     connectors?: WalletConfig[];
     chains?: Partial<Record<ChainType, EvmChain[] | any[]>>;
     walletConnectConfig?: WalletConnectConfig_2;
-    embeddedWalletConfig?: InitConfig;
-    prodType?: ProdTypeEnum;
-    themeMode?: "light" | "dark";
+    tomoClientId?: string;
 }
 
 /**