|
1 | 1 | # @web3-onboard/capsule |
2 | 2 |
|
3 | | -## Wallet module for connecting Capsule Embedded Wallets to web3-onboard |
| 3 | +## Wallet module for connecting Capsule Embedded Wallets to Web3-Onboard |
4 | 4 |
|
5 | | -[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure embedded MPC wallets to onboard your users with just an email or social login. Capsule wallets are recoverable, portable, and permissioned across different crypto applications, so your users don't need to create different signers or contract accounts for every app they use |
| 5 | +[Capsule](https://usecapsule.com/) is a signing solution that enables you to create secure embedded MPC wallets, allowing users to onboard with just an email or social login. Capsule wallets are recoverable, portable, and permissioned across different crypto applications, eliminating the need for users to create separate signers or contract accounts for each app. |
6 | 6 |
|
7 | | -If you'd like to use Capsule's full functionality within the web3onboard package without any extra integration steps, you can also [request a Capsule API Key](https://usecapsule.com/api) and use it with this package. |
| 7 | +### Getting Started |
8 | 8 |
|
9 | | -To learn more, check out the [Capsule Developer Docs](https://docs.usecapsule.com/) |
| 9 | +1. Visit the [Capsule Developer Portal](https://developer.usecapsule.com) |
| 10 | +2. Create a new project |
| 11 | +3. Generate an API key for your project |
| 12 | +4. Configure your project settings and environments |
10 | 13 |
|
11 | | -### Install |
| 14 | +### Installation |
12 | 15 |
|
13 | 16 | ```bash |
14 | | -yarn add @web3-onboard/capsule |
15 | | -# OR |
| 17 | +# Using npm |
16 | 18 | npm install @web3-onboard/capsule |
17 | | -# OR |
| 19 | + |
| 20 | +# Using yarn |
| 21 | +yarn add @web3-onboard/capsule |
| 22 | + |
| 23 | +# Using pnpm |
18 | 24 | pnpm install @web3-onboard/capsule |
| 25 | + |
| 26 | +# Using bun |
| 27 | +bun add @web3-onboard/capsule |
19 | 28 | ``` |
20 | 29 |
|
21 | | -## Options |
22 | | -For configuration options, check out the [Integration Guide Docs](https://docs.usecapsule.com/integration-guide) |
| 30 | +## Configuration Options |
23 | 31 |
|
24 | 32 | ```typescript |
25 | | -type CapsuleInitOptions = { |
26 | | - environment: string |
| 33 | +export type CapsuleInitOptions = { |
| 34 | + // The environment to connect to (PROD or BETA) |
| 35 | + environment: Environment |
| 36 | + |
| 37 | + // Your Capsule API key from the developer portal |
27 | 38 | apiKey: string |
28 | | - /** @optional capsule object opts */ |
29 | | - constructorOpts?: ConstructorOpts |
30 | | - appName: string |
31 | | - /** @optional capsule modal props */ |
32 | | - modalProps?: CapsuleModalProps |
| 39 | + |
| 40 | + // Optional: Additional constructor options for the Capsule client |
| 41 | + constructorOpts?: Partial<ConstructorOpts> |
| 42 | + |
| 43 | + // Optional: Customization props for the Capsule modal |
| 44 | + modalProps?: Partial<CapsuleModalProps> |
| 45 | + |
| 46 | + // Optional: Custom function to load wallet icon |
| 47 | + walletIcon?: () => Promise<string> |
| 48 | + |
| 49 | + // Optional: Custom label for the wallet |
| 50 | + walletLabel?: string |
33 | 51 | } |
34 | 52 | ``` |
35 | | -## Usage |
| 53 | +
|
| 54 | +## Implementation |
| 55 | +
|
36 | 56 | ```typescript |
37 | 57 | import Onboard from '@web3-onboard/core' |
38 | | -import Capsule, { Environment } from '@usecapsule/react-sdk'; |
| 58 | +import Capsule, { Environment } from '@usecapsule/react-sdk' |
39 | 59 | import capsuleModule from '@web3-onboard/capsule' |
40 | 60 |
|
41 | | -// initialize capsule |
| 61 | +// Initialize Capsule client |
42 | 62 | const capsule = new Capsule( |
43 | | - Environment.BETA, // for production, use ENVIRONMENT.PROD |
44 | | - "YOUR_API_KEY" |
45 | | - { opts } // find these at docs.usecapsule.com |
46 | | -); |
| 63 | + Environment.BETA, // Use Environment.PROD for production |
| 64 | + 'YOUR_API_KEY' // Your API key from developer.usecapsule.com |
| 65 | +) |
47 | 66 |
|
48 | | -// initialize the module with options |
| 67 | +// Initialize the Capsule module |
49 | 68 | const capsuleWallet = capsuleModule(capsule) |
50 | 69 |
|
| 70 | +// Initialize web3-onboard |
51 | 71 | const onboard = Onboard({ |
52 | 72 | // ... other Onboard options |
53 | 73 | wallets: [ |
54 | | - capsule |
| 74 | + capsuleWallet |
55 | 75 | //... other wallets |
56 | 76 | ] |
57 | 77 | }) |
58 | 78 |
|
| 79 | +// Connect wallet |
59 | 80 | const connectedWallets = await onboard.connectWallet() |
60 | 81 | console.log(connectedWallets) |
61 | 82 | ``` |
62 | 83 |
|
63 | | -## Build env settings (webpack config) |
| 84 | +## Additional Resources |
64 | 85 |
|
65 | | -You may need to add the following rule to your webpack config module |
66 | | -in order to handle certain styling files (See the config for the |
67 | | -Blocknative demo app): |
68 | | - |
69 | | -```typescript |
70 | | -{ |
71 | | - test: /\.(woff(2)?|eot|ttf|otf|svg)$/, |
72 | | - type: 'asset/resource', |
73 | | - generator: { |
74 | | - filename: 'fonts/[name][ext][query]' |
75 | | - } |
76 | | -} |
77 | | -``` |
| 86 | +- [Capsule Documentation](https://docs.usecapsule.com/) |
| 87 | +- [Developer Portal](https://developer.usecapsule.com) |
0 commit comments