# Quick Start

Here’s a concise guide to integrating Joey Wallet into your XRPL-based dApp using WalletConnect

{% hint style="info" %}
Do you have an existing that dapp that already supports WalletConnect? See [here](/overview/add-to-existing-project.md) for  details on how to add Joey Wallet.
{% endhint %}

1. Set Up Your Development Environment: 

* Install Node.js and npm. ◦ Set up a project with a framework like React, NextJS or plain Typescript/Javascript.

{% hint style="warning" %}
In this example, we will be using NextJS and pnpm
{% endhint %}

* Install our joey provider:

```bash
pnpm install @joey-wallet/wc-client
```

2. Obtain your Reown Project Identification:

Go to [Reown Dashboard](https://dashboard.reown.com/) and configure your projects details. Once finished, copy your Reown ProjectId.

3. Configure your Joey `provider`:

Create a configuration file for your provider.

```jsx
// File: ./src/app/config.ts
import type { Config } from '@joey-wallet/wc-client';

export default {
	// Required
  projectId: process.env['NEXT_PUBLIC_PROJECT_ID'],
  // Optional - Add your projects details
  metadata: {
    name: 'Joey Example Project',
    description:
      'A sample project using walletconnect and Joey Wallet.',
    url: "http://localhost:3000",
    icons: ['/assets/favicon.ico'],
    redirect: {
      universal: "http://localhost:3000",
    },
  },
} as Config
```

View [here](https://github.com/Joey-Wallet/wc-client/blob/main/packages/core/src/typings/config.ts) for a more thorough explanation for all the acceptable configuration parameters for the provider.

4. Create, import your config file, and include the context provider around your page components:

```jsx
// File: ./src/app/page.tsx
'use client';

import * as React from 'react';
import { advanced } from '@joey-wallet/wc-client/react';

import config from './config';

const { Provider: WcProvider, useProvider } = advanced.default;
export { useProvider };

export const Provider = (props: React.PropsWithChildren) => (
  <WcProvider config={config}>{props.children}</WcProvider>
);

export default function Page() {
  return (
    <Provider>
      {/*  Your page components here  */}
    </Provider>
  )
}
```

5. Handling Wallet Events and Actions:

The first thing to do - connect to WalletConnect using Joey Wallet! See below for an example using the `connect` action included in the provider:

```jsx
// File: ./src/app/component.tsx
'use client';

import * as React from 'react';
import { useProvider } from './page';

export default function Component() {
  const { actions, session, accounts } = useProvider();

  const handleConnect = async () => {
    const connect = await actions.connect();
    if (connect.error) throw connect.error;
    // You have been connected using wallet connect.
    // Now you can start interacting with the XRP Ledger.
    // ...
  };

  return (
    <div>
      {!session && (
        <button type="button" onClick={handleConnect}>
          Connect
        </button>
      )}
      {session && (
        <div>
           <span>Successfully connected!</span>
          {accounts && accounts.map((account,index) => (
		          <div key={index}>{account}</div>
		          )
	         )}
        </div>
      )}
    </div>
  );
}
```

After the `connect` button is clicked, the WalletConnect modal will open and ask for the user to sign-in using Joey Wallet. Once the user approves the interaction, the connection will be complete and you can proceed to issuing transaction request.

6. Interact with the XRP Ledger and Joey Wallet

Issue your first sign request!

```jsx
// File: ./src/app/signer.tsx
'use client';

import * as React from 'react';
import xrpl from 'xrpl';
import core from '@joey-wallet/wc-client/core';

import { useProvider } from './page';

export default function Signer() {
  const { provider, session, chain, accounts } = useProvider();
  const [response, setResponse] = React.useState<string | undefined>();

  const handleSign = async () => {
    try {
      if (!provider) throw Error('Provider not ready for request.');

      const address = accounts?.map((account) => account.replace(chain, ''))?.[0];
      if (!address) throw Error('Could not determine address for request');

      const tx_json: xrpl.Payment = {
        TransactionType: 'Payment',
        Account: address,
        Destination: 'ra5nK24KXen9AHvsdFTKHSANinZseWnPcX',
        Amount: {
          currency: 'USD',
          value: '1',
          issuer: 'rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn',
        },
        Fee: '12',
        Flags: 2147483648,
        Sequence: 2,
      };

      const response = await core.methods.signTransaction({
        provider,
        chainId: chain,
        request: {
          tx_json,
          options: { autofill: true, submit: true },
        },
      });

      setResponse(JSON.stringify(response, null, 2));
    } catch (e: any) {
      console.error(e);
      return new Error(e.message);
    }
  };

  return (
    <div>
      {session && (
        <button type="button" onClick={handleSign}>
          Submit
        </button>
      )}
      {response && (
        <div>
          <span>Received a response from Joey Wallet!</span>
          {response}
        </div>
      )}
    </div>
  );
}

```

For a complete list of embedded methods, see here: <https://github.com/Joey-Wallet/wc-client/tree/main/packages/core/src/methods>

{% hint style="info" %}
Pro Tip: Leverage Joey Wallet’s integration with platforms like [xrp.cafe](http://xrp.cafe) and [firstledger.net](http://firstledger.net) for real-world testing.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.joeywallet.xyz/overview/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.