Getting started with Vite

This guide will walk you through setting up Wallet UI in a new or existing Vite application with React and TypeScript.

1. Generate new application

If you're starting from scratch, you can use create-vite to generate a new React and TypeScript project.

npm create vite@latest my-vite-app -- --template react-ts
cd my-vite-app

2. Install dependencies

Install the required Wallet UI packages.

npm install @wallet-ui/react @wallet-ui/tailwind

3. Set up Tailwind CSS

For more information about styling, see the Styling section.

Wallet UI components are designed with Tailwind CSS. If you don't have it set up yet, follow these steps.

First, install Tailwind and its peer dependencies.

npm install -D tailwindcss @tailwindcss/vite

Next, configure the Tailwind CSS plugin in your vite.config.ts (or vite.config.js) file.

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), tailwindcss()],
});

Finally, add the Tailwind directives and the Wallet UI styles to your main CSS file.

src/index.css

@import 'tailwindcss';
@import '@wallet-ui/tailwind/index.css';

4. Add WalletUiProvider

Create a provider component that will set up the Wallet UI configuration and wrap your application.

src/providers/wallet-ui-provider.tsx

import { createSolanaDevnet, createSolanaLocalnet, createWalletUiConfig, WalletUi } from '@wallet-ui/react';
import { ReactNode } from 'react';

const config = createWalletUiConfig({
    clusters: [
        // You can add mainnet when you're ready
        // createSolanaMainnet('https://mainnet.your-rpc.com?api-key=secret'),
        createSolanaDevnet(),
        createSolanaLocalnet(),
    ],
});

export function WalletUiProvider({ children }: { children: ReactNode }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}

5. Update your main application file

Now, wrap your root App component with the WalletUiProvider you just created.

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { WalletUiProvider } from './providers/wallet-ui-provider.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <WalletUiProvider>
            <App />
        </WalletUiProvider>
    </React.StrictMode>,
);

You should now be able to use the components and hooks in your Vite app.

1. Generate new application

2. Install dependencies

3. Set up Tailwind CSS

4. Add WalletUiProvider

5. Update your main application file

On this page