Skip to content

feat: ton adapter docs, refactor installation sections, missing icons #694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: ton adapter docs, refactor installation sections, missing icons #694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46d0262
feat: add ton adapter docs, refactor some sections and components
enesozturk Nov 17, 2025
eea9885
refactor: update code file names, add svelte icon, format files
enesozturk Nov 21, 2025
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
54 changes: 23 additions & 31 deletions advanced/providers/solana-adapter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,28 @@
title: Solana Adapter
---

import CloudBanner from "/snippets/cloud-banner.mdx";
import CloudBanner from '/snippets/cloud-banner.mdx'

The WalletConnect Solana Adapter allows you to integrate the WalletConnect protocol into the Wallet Adapter library.

<Info>
If you are not familiar with the Wallet Adapter library it is recommended to
use [AppKit instead](../../appkit//overview). AppKit now supports
multichain, which means you can choose and configure multiple blockchain
networks within your instance of AppKit, extending beyond just Ethereum-based
(EVM) networks.
If you are not familiar with the Wallet Adapter library it is recommended to use [AppKit
instead](../../appkit//overview). AppKit now supports multichain, which means you can choose and
configure multiple blockchain networks within your instance of AppKit, extending beyond just
Ethereum-based (EVM) networks.
</Info>

## Installation

<CodeGroup>
```bash npm npm install @walletconnect/solana-adapter ``` ```bash Yarn yarn
add @walletconnect/solana-adapter ``` ```bash Bun bun add
@walletconnect/solana-adapter ``` ```bash pnpm pnpm add
@walletconnect/solana-adapter ```
```bash npm npm install @walletconnect/solana-adapter ``` ```bash Yarn yarn add
@walletconnect/solana-adapter ``` ```bash Bun bun add @walletconnect/solana-adapter ``` ```bash
pnpm pnpm add @walletconnect/solana-adapter ```
</CodeGroup>

## Cloud Configuration

Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

<CloudBanner />

Expand All @@ -34,44 +32,38 @@ Create a new project on Reown Dashboard at https://dashboard.reown.com and obtai
Add the `WalletConnectAdapter` to your wallets list.

```tsx {12, 22-27}
import { ReactNode, useMemo, useState } from "react";
import {
ConnectionProvider,
WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { clusterApiUrl } from "@solana/web3.js";
import { ReactNode, useMemo, useState } from 'react'
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
import { clusterApiUrl } from '@solana/web3.js'

import "@solana/wallet-adapter-react-ui/styles.css";
import '@solana/wallet-adapter-react-ui/styles.css'

import { WalletConnectWalletAdapter } from "@walletconnect/solana-adapter";
import { WalletConnectWalletAdapter } from '@walletconnect/solana-adapter'

export const SolanaContext = ({ children }: { children: ReactNode }) => {
const endpoint = useMemo(
() => clusterApiUrl(WalletAdapterNetwork.Mainnet),
[]
);
const endpoint = useMemo(() => clusterApiUrl(WalletAdapterNetwork.Mainnet), [])

const wallets = useMemo(
() => [
new WalletConnectWalletAdapter({
network: WalletAdapterNetwork.Mainnet,
options: {
projectId: "YOUR_PROJECT_ID",
},
}),
projectId: 'YOUR_PROJECT_ID'
}
})
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
)

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>{children}</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};
)
}
```
Loading