> For the complete documentation index, see [llms.txt](https://docs.joeywallet.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.joeywallet.xyz/integration/actions/connect.md).

# Connect

The provider comes with a `connect` action that establishes a new connection to WalletConnect. 

```typescript
// Some where within your codebase...

const { actions, session, accounts } = useProvider();

const response = await actions.connect()
```

#### Inputs (Optional)

You can optionally pass in the `chain` , `pairing.topic` , or `openModal` directives. 

```typescript
{
  chain: string;
  pairing?: { topic: string };
  openModal?: boolean;
}
```

#### Return Type

The method will resolve with the active session if a connection is established by the user.

<pre class="language-typescript"><code class="lang-typescript"><strong>Promise&#x3C;{
</strong>    data: SessionTypes.Struct || null
    error: Error || null
}>
</code></pre>

#### Example usage:

```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 response = await actions.connect();
    if (response.error) throw response.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>
  );
}
```