Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 34 additions & 3 deletions appkit/javascript/core/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,14 @@ import BitcoinImplementation from '/snippets/appkit/javascript/bitcoin/about/imp

import TonImplementation from '/snippets/appkit/javascript/ton/about/implementation.mdx'

import TronImplementation from '/snippets/appkit/javascript/tron/about/implementation.mdx'

import CoreImplementation from '/snippets/appkit/javascript/core/about/implementation.mdx'

AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
Choose one of these to get started.
AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks.

AppKit Core with [Universal Provider](https://www.npmjs.com/package/@walletconnect/universal-provider) library, enable compatibility across any blockchain protocol.

<Note>
We recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get
Expand Down Expand Up @@ -172,6 +175,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-ton

</CodeGroup>

</Tab>
<Tab title="TRON">

<CodeGroup>

```bash npm
npm install @reown/appkit @reown/appkit-adapter-tron
```

```bash Yarn
yarn add @reown/appkit @reown/appkit-adapter-tron
```

```bash Bun
bun add @reown/appkit @reown/appkit-adapter-tron
```

```bash pnpm
pnpm add @reown/appkit @reown/appkit-adapter-tron
```

</CodeGroup>

</Tab>
<Tab title="Others networks (AppKit Core)">

Expand Down Expand Up @@ -251,6 +277,11 @@ Check the JavaScript TON example

<TonImplementation />

</Tab>
<Tab title="TRON">

<TronImplementation />

</Tab>
<Tab title="Others networks (AppKit Core)">
<Card title="AppKit Core Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-core-universal-connector">
Expand Down
10 changes: 6 additions & 4 deletions appkit/next/core/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ import TonImplementation from '/snippets/appkit/next/ton/about/implementation.md

import CoreImplementation from '/snippets/appkit/react/core/about/implementation.mdx'

AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks.

AppKit Core with [Universal Provider](https://www.npmjs.com/package/@walletconnect/universal-provider) library, enable compatibility across any blockchain protocol.

<Note>
These steps are specific to [Next.js](https://nextjs.org/) app router. For other React frameworks
Expand All @@ -29,9 +31,9 @@ AppKit provides seamless integration with multiple blockchain ecosystems. . It s

## Installation

**If you prefer referring to a video tutorial for this, please [click here](#video-tutorial).**
If you prefer referring to a video tutorial for this, please [click here](#video-tutorial).

**Setting up from scratch? Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation).**
Setting up from scratch? Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation).

## Custom Installation

Expand Down
74 changes: 68 additions & 6 deletions appkit/react/core/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,22 @@ import BitcoinImplementation from '/snippets/appkit/react/bitcoin/about/implemen

import TonImplementation from '/snippets/appkit/react/ton/about/implementation.mdx'

import TronImplementation from '/snippets/appkit/react/tron/about/implementation.mdx'

import CoreImplementation from '/snippets/appkit/react/core/about/implementation.mdx'

AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks.

AppKit Core with [Universal Provider](https://www.npmjs.com/package/@walletconnect/universal-provider) library, enable compatibility across any blockchain protocol.

Choose one of these to get started.

## Installation

**If you prefer referring to a video tutorial for this, please [click here](#video-tutorial).**
If you prefer referring to a video tutorial for this, please [click here](#video-tutorial).

**Setting up from scratch? Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation).**
Setting up from scratch? Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation).

## Custom Installation

Expand Down Expand Up @@ -177,6 +181,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-ton

</CodeGroup>

</Tab>
<Tab title="TRON">

<CodeGroup>

```bash npm
npm install @reown/appkit @reown/appkit-adapter-tron
```

```bash Yarn
yarn add @reown/appkit @reown/appkit-adapter-tron
```

```bash Bun
bun add @reown/appkit @reown/appkit-adapter-tron
```

```bash pnpm
pnpm add @reown/appkit @reown/appkit-adapter-tron
```

</CodeGroup>

</Tab>
<Tab title="Others networks (AppKit Core)">

Expand Down Expand Up @@ -211,9 +238,13 @@ Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtai

## Implementation

### `AppKitProvider` Component
AppKit providers two different approaches on React to initialize it.

<Tabs>

AppKit now provides an `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components.
<Tab title="AppKitProvider">

Use `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components.

```tsx
import { AppKitProvider } from '@reown/appkit/react'
Expand All @@ -234,7 +265,33 @@ function App() {
}
```

### Framework Specific Implementation
</Tab>
<Tab title="createAppKit">

Use `createAppKit` method from `@reown/appkit/react` to initialize AppKit instance and call it on the root of your application with desired parameters depending on your use case.

```tsx
import { createAppKit } from '@reown/appkit/react'

createAppKit({
networks: [
/* Your networks */
],
adapters: [
/* Your adapters */
],
...appKitProps
})

function App() {
return <>{children}</>
}
```

</Tab>
</Tabs>

### Adapter Configuration

<Tabs>
<Tab title="Wagmi">
Expand Down Expand Up @@ -281,6 +338,11 @@ Check the React Bitcoin example

<TonImplementation />

</Tab>
<Tab title="TRON">

<TronImplementation />

</Tab>
<Tab title="Others networks (AppKit Core)">
<Card title="AppKit Core Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-core-universal-connector">
Expand Down
32 changes: 31 additions & 1 deletion appkit/vue/core/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ import BitcoinImplementation from '/snippets/appkit/vue/bitcoin/about/implementa

import TonImplementation from '/snippets/appkit/vue/ton/about/implementation.mdx'

import TronImplementation from '/snippets/appkit/vue/tron/about/implementation.mdx'

## Introduction

AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin and TON.
AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin, TON and TRON.
Choose one of these to get started.

## Installation
Expand Down Expand Up @@ -165,6 +167,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-ton

</CodeGroup>

</Tab>
<Tab title="TRON">

<CodeGroup>

```bash npm
npm install @reown/appkit @reown/appkit-adapter-tron
```

```bash Yarn
yarn add @reown/appkit @reown/appkit-adapter-tron
```

```bash Bun
bun add @reown/appkit @reown/appkit-adapter-tron
```

```bash pnpm
pnpm add @reown/appkit @reown/appkit-adapter-tron
```

</CodeGroup>

</Tab>
</Tabs>

Expand Down Expand Up @@ -220,6 +245,11 @@ Check the Vue TON example

<TonImplementation />

</Tab>
<Tab title="TRON">

<TronImplementation />

</Tab>
</Tabs>

Expand Down
Loading