# Onboarding and Account Access

## 1. Import useWallet hook to access embedded wallet functions

```tsx
import { useWallet } from "@enclavemoney/enclave-wallet-sdk/dist/components/WalletProvider";

export function Page() {
     const {
          isLoggedIn,
          username,
          connect,
          walletSDK,
          disconnect,
     } = useWallet();

     return (
          <div>
               <!-- -->
               {
                    isLoggedIn ? 
                    <div>
                         <button onClick = {() => walletSDK.openWalletModal()}>Welcome {username}</button>
                         <button onClick = {() => disconnect()}>Log Out</button>
                    </div> :
                    <div>
                         <button onClick = {() => connect()}>Log In</button>
                    </div>
               }
          </div>
     )
     
}
```

### 1.a. Login modal after calling connect()

Calling the **connect()** funtion triggers the modal displayed below where user's can continue onboarding

<figure><img src="https://2429876521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaftPmsUdt8hxUf6uzhp%2Fuploads%2FpoiTRYMcXYZcAfTXE2xU%2FScreenshot%202025-06-30%20at%205.33.02%E2%80%AFPM.png?alt=media&#x26;token=02c6dcba-183b-4098-9975-8108e4395bb0" alt="" width="375"><figcaption></figcaption></figure>

### 1.b. Wallet modal after calling walletSDK.openWalletModal()

<figure><img src="https://2429876521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaftPmsUdt8hxUf6uzhp%2Fuploads%2FHWEtf9igEkFqCmr5htwq%2FScreenshot%202025-06-30%20at%205.39.57%E2%80%AFPM.png?alt=media&#x26;token=96cea0cd-de8f-401d-94f1-39177442b516" alt="" width="375"><figcaption></figcaption></figure>