-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
405 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| --- | ||
| pagination_next: appkit/react/core/installation | ||
| title: Bitcoin | ||
| --- | ||
|
|
||
| import Button from '../../components/button' | ||
| import Container from '../../components/Container.js' | ||
| import Wrapper from '../../components/Home/Wrapper' | ||
| import W3MQuickStart from '../../components/W3MQuickStart' | ||
| import useBaseUrl from '@docusaurus/useBaseUrl' | ||
|
|
||
| import reactLogo from '../../../static/assets/home/reactLogo.png' | ||
| import nextjsLogo from '../../../static/assets/home/nextjsLogo.png' | ||
| import vueLogo from '../../../static/assets/home/vueLogo.png' | ||
| import javascriptLogo from '../../../static/assets/home/javascriptLogo.png' | ||
|
|
||
| # Bitcoin | ||
|
|
||
| The AppKit SDK supports Bitcoin, allowing users to connect their Bitcoin wallets to applications. AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3. | ||
|
|
||
| <Button name="Try Demo" url="https://appkit-lab.reown.com/library/bitcoin/" /> | ||
|
|
||
| ## Get Started | ||
|
|
||
| <Wrapper | ||
| type="large" | ||
| fit={false} | ||
| items={[ | ||
| { | ||
| name: 'React', | ||
| type: 'react', | ||
| description: 'Get started with AppKit in React.', | ||
| icon: reactLogo, | ||
| href: '../react/core/installation?platform=bitcoin' | ||
| }, | ||
| { | ||
| name: 'Next.js', | ||
| type: 'next', | ||
| description: 'Get started with AppKit in Next.js.', | ||
| icon: nextjsLogo, | ||
| href: '../next/core/installation?platform=bitcoin', | ||
| isWhite: true | ||
| }, | ||
| { | ||
| name: 'Vue', | ||
| type: 'vue', | ||
| description: 'Get started with AppKit in Vue.', | ||
| icon: vueLogo, | ||
| href: '../vue/core/installation?platform=bitcoin' | ||
| }, | ||
| { | ||
| name: 'JavaScript', | ||
| type: 'javascript', | ||
| description: 'Get started with AppKit in JavaScript.', | ||
| icon: javascriptLogo, | ||
| href: '../javascript/core/installation?platform=bitcoin' | ||
| } | ||
| ]} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| AppKit Bitcoin is built on top of the AppKit library and provides a set of components and actions to easily connect Bitcoin wallets with your decentralized application. | ||
|
|
||
| On top of your app set up the following configuration. | ||
|
|
||
| ```tsx | ||
| // App.tsx | ||
| import { createAppKit } from '@reown/appkit' | ||
| import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin' | ||
| import { bitcoin, bitcoinTestnet } from '@reown/appkit/networks' | ||
|
|
||
| // 1. Get projectId from https://cloud.reown.com | ||
| const projectId = 'YOUR_PROJECT_ID' | ||
|
|
||
| // 2. Set the networks | ||
| const networks = [bitcoin, bitcoinTestnet] as [AppKitNetwork, ...AppKitNetwork[]] | ||
|
|
||
| // 3. Set up Bitcoin Adapter | ||
| const bitcoinAdapter = new BitcoinAdapter({ | ||
| networks, | ||
| projectId | ||
| }) | ||
|
|
||
| // 4. Create a metadata object - optional | ||
| const metadata = { | ||
| name: 'AppKit', | ||
| description: 'AppKit Bitcoin Example', | ||
| url: 'https://example.com', // origin must match your domain & subdomain | ||
| icons: ['https://avatars.githubusercontent.com/u/179229932'] | ||
| } | ||
|
|
||
| // 5. Create modal | ||
| const modal = createAppKit({ | ||
| adapters: [bitcoinAdapter], | ||
| networks, | ||
| metadata, | ||
| projectId, | ||
| features: { | ||
| analytics: true // Optional - defaults to your Cloud configuration, | ||
| email: false, | ||
| socials: [] | ||
| } | ||
| }) | ||
|
|
||
| // 6. Trigger modal programaticaly | ||
| const openConnectModalBtn = document.getElementById('open-connect-modal') | ||
| const openNetworkModalBtn = document.getElementById('open-network-modal') | ||
|
|
||
| openConnectModalBtn.addEventListener('click', () => modal.open()) | ||
| openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' })) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**actions**](../../core/actions.mdx#open-and-close-the-modal). | ||
| In this example we are going to use the `<appkit-button>` component. | ||
|
|
||
| Web components are global html elements that don't require importing. | ||
|
|
||
| ```tsx | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>HTML AppKit Example</title> | ||
| </head> | ||
| <body> | ||
| <appkit-button /> | ||
| <script type="module" src="main.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| AppKit Bitocin provides a set of React components and hooks to easily connect Bitcoin wallets with your application. | ||
|
|
||
| On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders. | ||
|
|
||
| ```tsx | ||
| // App.tsx | ||
| import { createAppKit } from '@reown/appkit/react' | ||
| import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin' | ||
| import { bitcoin, bitcoinTestnet } from '@reown/appkit/networks' | ||
|
|
||
| // 1. Get projectId from https://cloud.reown.com | ||
| const projectId = 'YOUR_PROJECT_ID' | ||
|
|
||
| // 2. Set the networks | ||
| const networks = [bitcoin, bitcoinTestnet] as [AppKitNetwork, ...AppKitNetwork[]] | ||
|
|
||
| // 3. Set up Bitcoin Adapter | ||
| const bitcoinAdapter = new BitcoinAdapter({ | ||
| networks, | ||
| projectId | ||
| }) | ||
|
|
||
| // 4. Create a metadata object - optional | ||
| const metadata = { | ||
| name: 'AppKit', | ||
| description: 'AppKit Bitcoin Example', | ||
| url: 'https://example.com', // origin must match your domain & subdomain | ||
| icons: ['https://avatars.githubusercontent.com/u/179229932'] | ||
| } | ||
|
|
||
| // 5. Create modal | ||
| createAppKit({ | ||
| adapters: [bitcoinAdapter], | ||
| networks, | ||
| metadata, | ||
| projectId, | ||
| features: { | ||
| analytics: true // Optional - defaults to your Cloud configuration, | ||
| email: false, | ||
| socials: [] | ||
| } | ||
| }) | ||
|
|
||
| export default function App() { | ||
| return <YourApp /> | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| To open AppKit you can use our default [web components](../../core/components.mdx) or build your own logic using [AppKit hooks](../../core/hooks.mdx). | ||
| In this example we are going to use the `<appkit-button>` component. | ||
|
|
||
| Web components are global html elements that don't require importing. | ||
|
|
||
| ```tsx | ||
| export default function ConnectButton() { | ||
| return <appkit-button /> | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.