# @d-sports/wallet 中文文档

规范地址：https://npmcn.com/package/%40d-sports/wallet/

版本：1\.1\.1
npm 元数据更新时间：2026-07-31T03:59:18.642Z
中文译文更新时间：2026-11-14T09:48:00.074Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40d-sports/wallet
原文对照：https://npmcn.com/package/%40d-sports/wallet/?lang=original
项目主页：https://github.com/D-Sports-Ecosystem/wallet#readme
源码仓库：https://github.com/D-Sports-Ecosystem/wallet

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.7 MB，396 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：21 个
- peer 依赖：react ^18\.0\.0，react-dom ^18\.0\.0，tailwindcss ^3\.0\.0，react-native ^0\.72\.0，react-native-keychain ^8\.0\.0，react-native-url-polyfill ^2\.0\.0
- 首次发布：2025-07-04T03:31:09.684Z
- 最新版本发布：2025-07-22T00:17:50.887Z
- 近 30 天下载量：2088（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

\[进步\] 包含有 Rainbow Kit 和 Wagmi 连接器的综合钱包包, 支持 Next.js 和 React Industrial 的 社会登录功能

## 安装

```sh
npm install @d-sports/wallet
```

也可以使用：`pnpm add @d-sports/wallet`、`yarn add @d-sports/wallet`、`bun add @d-sports/wallet`

## README

# @d-sports/wallet (英语)

> **请慎用.**

一个强大的多平台钱包 SDK 用于 React, Next.js 和 React Indust 应用程序 **免费、自定义的社会登录** 并且支持"彩虹"和"瓦格米" 100%的D-体育品牌没有供应商依赖.

## \* 特性

-   🌐 **多平台支持**: 与 React 、 Next.js 和 React 本地公司合作
-   🔐 **自定义社会登录**:FREE OAuth与Google,Facebook,Twitter,Discord,GitHub和苹果的集成
-   🏆 **D-体育品牌**: 完全定制,没有供应商锁定
-   🌈 **彩虹套装兼容**: 与 Rainbow Kit 钱包连接 UI 的简单集成
-   ⚡ **Wagmi 兼容**: 全力支持 Wagmi v1 和 v2
-   🎨 **自定义 UI**: 弹性主题和型式选项
-   🔒 **安全存储**: 平台专用安全存储解决方案
-   📱 **移动第一**: 深度链接和移动优化经验
-   🔄 **自动重联**: 会话间持续钱包连接
-   💰 **零成本**: 不向每个用户收费或外部依赖性
-   🎯 **类型脚本**: 包含全面类型定义的完整类型脚本支持

## \* 安装

```bash
npm install @d-sports/wallet
# or
yarn add @d-sports/wallet
# or
bun add @d-sports/wallet
```

### 平台特有的依赖

**下个.js/反应:**

```bash
# No additional dependencies required!
```

**反应原生 :**

```bash
npm install react-native-keychain react-native-url-polyfill
```

## QQ 快速启动

### 超级快起步(5分钟)

立即开始 **D-体育管理 OAuth 证书** - 不需要OAuth设置!

```typescript
import { createDSportsWalletQuickStart, mainnet, polygon } from '@d-sports/wallet';

// 🎉 ONE LINE SETUP - No OAuth configuration needed!
const wallet = createDSportsWalletQuickStart({
  projectId: 'your-project-id',
  chains: [mainnet, polygon],
  metadata: {
    name: 'My Awesome App',
    description: 'Built with D-Sports Wallet',
    url: 'https://my-app.com',
    icons: ['https://my-app.com/icon.png']
  }
});

// Connect with social login (Google, Facebook, Twitter, Discord, GitHub ready!)
await wallet.connect({ socialLogin: true });

console.log('🎊 Wallet connected with zero OAuth setup!');
```

**完美为:**

-   🧪 **原型制作** 概念的证明
-   👨‍💻 **发展** 测试
-   🎓 **学习** 和辅导
-   🏁 **开始** 快点

### 生产设置

对于生产应用,设置自己的 OAuth 应用程序:

### 下一个.js

```typescript
import { createDSportsWallet } from '@d-sports/wallet/nextjs';

// Create wallet instance
const wallet = createDSportsWallet({
  projectId: 'your-project-id',
  chains: [/* your chains */],
  environment: 'production', // Validates production config
  socialLogin: {
    appSecret: 'your-app-secret', // For deterministic key generation
    redirectUri: 'https://your-app.com/auth/callback',
    providers: {
      google: {
        clientId: 'your-google-client-id',
      },
      facebook: {
        clientId: 'your-facebook-app-id',
      },
      twitter: {
        clientId: 'your-twitter-client-id',
      },
      discord: {
        clientId: 'your-discord-client-id',
      },
    },
  },
});

// Connect wallet
await wallet.connect();
```

### 原生反应

```typescript
import { createDSportsWallet, setupURLPolyfill } from '@d-sports/wallet/react-native';

// Setup URL polyfill (required for React Native)
setupURLPolyfill();

// Create wallet instance
const wallet = createDSportsWallet({
  projectId: 'your-project-id',
  chains: [/* your chains */],
  socialLogin: {
    appSecret: 'your-app-secret',
    redirectUri: 'dsports://auth/callback', // Deep link for mobile
    providers: {
      google: {
        clientId: 'your-google-client-id',
      },
      apple: {
        clientId: 'your-apple-client-id',
      },
    },
  },
});

// Connect wallet
await wallet.connect();
```

## 使用实例

### 基本钱包连接

```typescript
import { createDSportsWallet } from '@d-sports/wallet';

const wallet = createDSportsWallet({
  projectId: 'your-project-id',
  chains: [
    {
      id: 1,
      name: 'Ethereum',
      network: 'homestead',
      nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
      rpcUrls: {
        default: { http: ['https://mainnet.infura.io/v3/your-key'] },
        public: { http: ['https://mainnet.infura.io/v3/your-key'] }
      }
    }
  ]
});

// Connect to wallet
const account = await wallet.connect();
console.log('Connected account:', account);

// Get wallet state
const state = wallet.getState();
console.log('Wallet state:', state);

// Switch chain
await wallet.switchChain(137); // Polygon

// Disconnect
await wallet.disconnect();
```

### 自定义社会登录

```typescript
import { createDSportsWallet, CustomSocialLoginProvider } from '@d-sports/wallet';

const wallet = createDSportsWallet({
  projectId: 'your-project-id',
  chains: [/* your chains */],
  socialLogin: {
    appSecret: 'your-unique-app-secret', // Used for deterministic key generation
    redirectUri: 'https://your-app.com/auth/callback',
    providers: {
      google: {
        clientId: 'your-google-oauth-client-id',
      },
      facebook: {
        clientId: 'your-facebook-app-id',
      },
      twitter: {
        clientId: 'your-twitter-oauth-client-id',
      },
      discord: {
        clientId: 'your-discord-oauth-client-id',
      },
      github: {
        clientId: 'your-github-oauth-client-id',
      },
    },
  },
});

// Connect with social login
await wallet.connect({ socialLogin: true });

// Get social login provider
const socialProvider = wallet.getConnector('dsports-wallet').customSocialLoginProvider;

// Login with specific provider
const result = await socialProvider.login('google');
console.log('Social login result:', result);

// Get wallet from social login
const ethersWallet = await socialProvider.getWalletFromSocial(result);
console.log('Generated wallet address:', ethersWallet.address);
```

### 彩虹套装集成

```typescript
import { createDSportsRainbowKitConnector } from '@d-sports/wallet';

const connector = createDSportsRainbowKitConnector({
  chains: [/* your chains */],
  projectId: 'your-project-id',
  appName: 'My App',
  socialLogin: {
    appSecret: 'your-app-secret',
    redirectUri: 'https://your-app.com/auth/callback',
    providers: {
      google: {
        clientId: 'your-google-client-id',
      },
      facebook: {
        clientId: 'your-facebook-client-id',
      },
    },
  },
});

// Use with Rainbow Kit
const connectors = [
  connector,
  // ... other connectors
];
```

### 瓦格米融合组织

```typescript
import { dsportsWagmiConnector } from '@d-sports/wallet';

const connector = dsportsWagmiConnector({
  chains: [/* your chains */],
  projectId: 'your-project-id',
  socialLogin: {
    appSecret: 'your-app-secret',
    redirectUri: 'https://your-app.com/auth/callback',
    providers: {
      google: {
        clientId: 'your-google-client-id',
      },
    },
  },
});

// Use with Wagmi
const connectors = [
  connector,
  // ... other connectors
];
```

## API 参考

### DSports 钱包

#### 构造选项

```typescript
interface DSportsWalletOptions {
  projectId: string;
  chains: Chain[];
  socialLogin?: CustomSocialLoginConfig;
  theme?: WalletTheme;
  metadata?: {
    name: string;
    description: string;
    url: string;
    icons: string[];
  };
}
```

#### 方法

-   `connect(config?: { socialLogin?: boolean }): Promise<WalletAccount>`
-   `disconnect(): Promise<void>`
-   `switchChain(chainId: number): Promise<void>`
-   `getState(): WalletState`
-   `isConnected(): boolean`
-   `getConnector(id: string): WalletConnector | undefined`
-   `addConnector(connector: WalletConnector): void`
-   `removeConnector(id: string): void`

#### 活动

-   `connect`: 钱包连接时发送
-   `disconnect`: 钱包断开时发送
-   `accountsChanged`: 账户变更时汇出
-   `chainChanged`: 当链条改变时发出
-   `error`: 发生错误时发出

### 反应钩

#### 使用 DSports 钱包

```typescript
const {
  account,
  isConnecting,
  isReconnecting,
  isDisconnected,
  error,
  connect,
  disconnect,
  switchChain,
  isConnected
} = useDSportsWallet(wallet);
```

#### 使用社会记录

```typescript
const {
  user,
  isLoading,
  error,
  login,
  logout
} = useSocialLogin(customSocialLoginProvider);
```

## QQ 配置

### 自定义社会登录配置

```typescript
interface CustomSocialLoginConfig {
  appSecret?: string; // Used for deterministic wallet generation
  redirectUri?: string; // OAuth callback URL
  providers: {
    [key in SocialProvider]?: {
      clientId: string;
      clientSecret?: string; // For backend token exchange
    };
  };
}
```

### 支助社会提供者

-   **谷歌** (单位:千美元)`google`: OAuth 2.0 (英语)
-   **脸书** (单位:千美元)`facebook`: Facebook 登录
-   **微博** (单位:千美元)`twitter`: OAuth 2.0 (英语)
-   **解析器** (单位:千美元)`discord`: OAuth 2.0 (英语)
-   **GitHub 图像** (单位:千美元)`github`: OAuth 2.0 (英语)
-   **苹果公司** (单位:千美元)`apple`: 与苹果公司签约

### 设置 OAuth 应用程序

#### 谷歌 OAuth 设置

1.  转到 [谷歌云控台](https://console.cloud.google.com/)
2.  创建新工程或选择已有项目
3.  启用 Google+ API
4.  创建 OAuth 2. 0 证书
5.  将您的域添加到授权的起源
6.  复制 **客户身份**

#### Facebook OAuth 设置

1.  转到 [Facebook 开发者](https://developers.facebook.com/)
2.  创建新应用程序
3.  设置 Facebook 登录
4.  将您的域添加到有效的 OAuth 重定向 URI
5.  复制 **应用标识**

#### Twitter OAuth 设置

1.  转到 [Twitter 开发者门户网站](https://developer.twitter.com/)
2.  创建新应用程序
3.  设置 OAuth 2. 0
4.  配置回调 URL
5.  复制 **客户身份**

### 主题配置

```typescript
interface WalletTheme {
  colors?: {
    primary?: string;
    secondary?: string;
    background?: string;
    text?: string;
    border?: string;
  };
  borderRadius?: number;
  fontFamily?: string;
}
```

### OAuth 回调页面

在您创建回调页面 `redirectUri` 处理 OAuth 回复:

```html
<!DOCTYPE html>
<html>
<head>
  <title>D-Sports Authentication</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
    .loading { color: #666; }
    .logo { width: 64px; height: 64px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="logo">🏆</div>
  <h2>D-Sports Authentication</h2>
  <p class="loading">Processing your login...</p>
  <script>
    // Handle OAuth callback
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    const error = urlParams.get('error');
    
    if (error) {
      window.parent.postMessage({
        type: 'OAUTH_ERROR',
        error: error
      }, window.location.origin);
    } else if (code) {
      // Exchange code for user data (implement your backend logic)
      window.parent.postMessage({
        type: 'OAUTH_SUCCESS',
        payload: {
          code,
          user: {
            id: 'user-id-from-your-backend',
            email: 'user@example.com',
            name: 'User Name',
            avatar: 'https://example.com/avatar.jpg'
          },
          token: 'access-token-from-your-backend',
          expiresAt: Date.now() + 3600000
        }
      }, window.location.origin);
    }
  </script>
</body>
</html>
```

### 深链接( 反应原生)

```typescript
import { handleDeepLink } from '@d-sports/wallet/react-native';

// Handle deep link
handleDeepLink('dsports://wallet/connect?connector=dsports-wallet', wallet);
```

## 费用比较

| 提供者 | 费用 | 锁定 | 标记 |
| --- | --- | --- | --- |
| **@d-sports/wallet (英语)** | **自由主义** | 无 | 完全D运动 |
| Web3 认证 | 0.05/MAU美元 | 对 | 有限 |
| 魔术 | 0.02/毛利美元 | 对 | 有限 |
| 枢密院 | 0.05/MAU美元 | 对 | 有限 |

## 发展

### 设置

```bash
git clone https://github.com/D-Sports-Ecosystem/wallet.git
cd wallet
bun install
```

### 构建

```bash
bun run build
```

### 测试

```bash
bun test
```

### 开发脚本

-   `bun run dev`: 启动开发模式
-   `bun run build`: 构建所有软件包
-   `bun run build:core`: 构建核心软件包
-   `bun run build:nextjs`: 构建下一个.js 软件包
-   `bun run build:react-native`: 构建本地反应软件包
-   `bun run clean`: 清洁的建筑文物
-   `bun run lint`: 运行 ESLint
-   `bun run test`: 运行测试
-   `bun run test:watch`: 在监视模式下运行测试

## QQ 软件包结构

```
@d-sports/wallet/
├── core              # Core wallet functionality
├── nextjs            # Next.js specific exports
├── react-native      # React Native specific exports
├── custom-social-login # Custom social login provider
└── types             # TypeScript type definitions
```

## 安全特性

-   **决定密钥生成**: 钱包是由社会登录数据决定性生成的
-   **安全存储**: 平台专用安全存储(localStorage, AsyncStorage, Keychain)
-   **无私钥传输**: 密钥是本地生成的, 从未发送到服务器
-   **自定义应用程序机密**: 使用你自己的秘密来增加安全性
-   **OAuth 最佳做法**: 遵循 OAuth 2.0 安全准则

## 捐款

1.  叉子存储器
2.  创建您的特性分支( E)`git checkout -b feature/amazing-feature`(中文(简体) )
3.  提交更改( E)`git commit -m 'Add some amazing feature'`(中文(简体) )
4.  推向分行(`git push origin feature/amazing-feature`(中文(简体) )
5.  打开拉请求

## 许可证

麻省理工学院的执照 - 看 [自由主义](https://npmcn.com/package/%40d-sports/wallet/LICENSE) 详细文件.

## 承认

-   [乙醚(js)](https://ethers.org/) 用于Ethereum 相互作用
-   [彩虹夹](https://www.rainbowkit.com/) 钱包连接 UI
-   [瓦格米语Name](https://wagmi.sh/) 用于 Ethereum 的反应钩
-   [滚动](https://rollupjs.org/) 模块捆绑

* * *

**由D体育队制作** - 一个免费、开源的替代物,取代昂贵的钱包提供者.

## 快速启动 生产迁移

### 发展到生产道路

1.  **从快速启动开始** (5分钟):
    
    ```typescript
    const wallet = createDSportsWalletQuickStart({
      projectId: 'your-project-id',
      chains: [mainnet, polygon]
    });
    ```
    
2.  **创建您的 OAuth 应用程序** (30分钟):
    
    -   [谷歌 OAuth 设置](https://npmcn.com/package/%40d-sports/wallet/#readme-google-oauth-setup)
    -   [Facebook OAuth 设置](https://npmcn.com/package/%40d-sports/wallet/#readme-facebook-oauth-setup)
    -   [Twitter OAuth 设置](https://npmcn.com/package/%40d-sports/wallet/#readme-twitter-oauth-setup)
3.  **切换到生产配置**数字 :
    
    ```typescript
    const wallet = createDSportsWallet({
      projectId: 'your-project-id',
      chains: [mainnet, polygon],
      environment: 'production', // Validates config
      socialLogin: {
        appSecret: 'your-production-secret',
        redirectUri: 'https://your-app.com/auth/callback',
        providers: {
          google: { clientId: 'your-google-client-id' },
          facebook: { clientId: 'your-facebook-app-id' },
          // ... other providers
        }
      }
    });
    ```
    

### D- 体育 OAuth 服务

D-体育 **oAuth 证书** 用于即时开发:

```typescript
import { DSportsOAuthService, createQuickStartSocialLogin } from '@d-sports/wallet';

// Get managed credentials
const managed = DSportsOAuthService.getManagedCredentials({ 
  environment: 'development' 
});

// Quick start config (auto-generated)
const quickStartConfig = createQuickStartSocialLogin();

// Validate production config
const productionConfig = validateSocialLoginConfig(myConfig, 'production');
```

**管理的OAuth包括:**

-   ✅ **谷歌** - 准备使用
-   ✅ **脸书** - 准备使用
-   ✅ **微博** - 准备使用
-   ✅ **解析器** - 准备使用
-   ✅ **GitHub 图像** - 准备使用
-   ⚠️ **苹果公司** - 需要个人设置

**福利:**

-   🚀 **即时设置** - 没有 OAuth 配置
-   🛡️ **生产警告** - 自动验证
-   🔄 **易行移徙** - 相同的API,不同的配置
-   📚 **适合演示** - 立即显示特性

## 常见问题

### @d-sports/wallet 是什么？

\[进步\] 包含有 Rainbow Kit 和 Wagmi 连接器的综合钱包包, 支持 Next\.js 和 React Industrial 的 社会登录功能

### 如何安装 @d-sports/wallet？

在项目目录运行 npm install @d-sports/wallet，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0）、react-dom（^18\.0\.0）、tailwindcss（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @d-sports/wallet 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @d-sports/wallet 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @d-sports/wallet 可以商用吗？

@d-sports/wallet 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @d-sports/wallet 的下载量有多少？

根据 npm 官方下载统计，@d-sports/wallet 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,088 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @d-sports/wallet 还在维护吗？

最新版本 1\.1\.1 发布于 2025/07/22（1\.3 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/07/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。