|
1 | 1 | # Capsule |
2 | 2 |
|
3 | | -## Wallet module for connecting Capsule 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 with just an email or social login that 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 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 |
6 | 6 |
|
7 | | -Adding the Capsule Module to web3onboard gives your users the ability to log in with Capsule wallets created elsewhere. You can also [request a Capsule API Key](https://form.typeform.com/to/hLaJeYJW) to allow users to easily create embedded wallets within web3onboard without any extra integration steps. |
| 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. |
8 | 8 |
|
9 | 9 | To learn more, check out the [Capsule Developer Docs](https://docs.usecapsule.com/) |
10 | 10 |
|
11 | 11 | ### Install |
12 | 12 |
|
13 | | -`yarn add @web3-onboard/capsule` |
| 13 | +<Tabs values={['yarn', 'npm', 'pnpm']}> |
| 14 | +<TabPanel value="yarn"> |
| 15 | + |
| 16 | +```sh copy |
| 17 | +yarn add @web3-onboard/capsule |
| 18 | +``` |
| 19 | + |
| 20 | +</TabPanel> |
| 21 | +<TabPanel value="npm"> |
| 22 | + |
| 23 | +```sh copy |
| 24 | +npm install @web3-onboard/capsule |
| 25 | +``` |
| 26 | + |
| 27 | +</TabPanel> |
| 28 | +<TabPanel value="pnpm"> |
| 29 | + |
| 30 | +```sh copy |
| 31 | +pnpm install @web3-onboard/capsule |
| 32 | +``` |
| 33 | + |
| 34 | +</TabPanel> |
| 35 | +</Tabs> |
14 | 36 |
|
15 | 37 | ## Options |
| 38 | +For configuration options, check out the [Integration Guide Docs](https://docs.usecapsule.com/integration-guide) |
16 | 39 |
|
17 | 40 | ```typescript |
18 | 41 | type CapsuleInitOptions = { |
19 | | - environment: Environment |
| 42 | + environment: string |
| 43 | + apiKey: string |
| 44 | + /** @optional capsule object opts */ |
| 45 | + constructorOpts?: ConstructorOpts |
20 | 46 | appName: string |
21 | | - apiKey?: string |
| 47 | + /** @optional capsule modal props */ |
| 48 | + modalProps?: CapsuleModalV2Props |
22 | 49 | } |
23 | 50 | ``` |
24 | | -
|
25 | | -`environment` - The environment to which you want to connect, either `Environment.DEVELOPMENT` for testnets and development only or `Environment.PRODUCTION` for production use. |
26 | | -`appName` - Your Application's name - displayed in the modal when your users are prompted to log in. |
27 | | -`apiKey` - Your Capsule API Key. Required for new user creation, but not required if you are only allowing users to log in. To get an API key, fill out [this form](https://form.typeform.com/to/hLaJeYJW). |
28 | | -
|
29 | 51 | ## Usage |
30 | | -
|
31 | 52 | ```typescript |
32 | 53 | import Onboard from '@web3-onboard/core' |
| 54 | +import Capsule, { Environment } from '@usecapsule/react-sdk'; |
33 | 55 | import capsuleModule from '@web3-onboard/capsule' |
34 | 56 |
|
35 | | -// initialize the module with options |
36 | | -const capsule = capsuleModule() |
37 | | - |
38 | | -const onboard = Onboard({ |
39 | | - // ... other Onboard options |
40 | | - wallets: [ |
41 | | - capsule |
42 | | - //... other wallets |
43 | | - ] |
44 | | -}) |
| 57 | +// initialize capsule |
| 58 | +const capsule = new Capsule( |
| 59 | + Environment.BETA, // for production, use ENVIRONMENT.PROD |
| 60 | + "YOUR_API_KEY" |
| 61 | + { opts } // find these at docs.usecapsule.com |
| 62 | +); |
45 | 63 |
|
46 | 64 | const connectedWallets = await onboard.connectWallet() |
47 | 65 | console.log(connectedWallets) |
|
0 commit comments