# Internal Wallet Services

Tomo provides a few internal wallet services to wallet users so developers can selectively embed these services into their applications with minimum effort. <mark style="color:red;">**Currently, these features are only available for users using social login, and users can only operate through a pop-up Tomo UI component**</mark>. We will add support for extension wallet users and provide more configurable ways to invoke these services.

### Service Types

Tomo supports the following basic service types:

<pre class="language-tsx"><code class="lang-tsx"><strong>enum WebWalletInvokeType {
</strong>  SWAP = "swap",             // Swap between selected token pairs
  ONRAMP = "onramp",         // Purchase Token by card
  SEND = "send",             // Send token to a given address
  RECEIVE = "receive",       // Display QR code and address for given token
}
</code></pre>

#### Modals for Internal Services

<img src="https://159454010-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKx6QtlW3V2up9KOIn1lx%2Fuploads%2FbRYfzR3owpcA75ubqap5%2Ffile.excalidraw.svg?alt=media&#x26;token=22058710-aad2-4610-bc34-a2c8d5614d94" alt="Modals for Onramp Services" class="gitbook-drawing">

<img src="https://159454010-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKx6QtlW3V2up9KOIn1lx%2Fuploads%2FctY2uWxcLlTiXQ69d1Px%2Ffile.excalidraw.svg?alt=media&#x26;token=49f0f633-ae38-4b82-85ff-8dd9a6eda41b" alt="Modals for Swap Services" class="gitbook-drawing">

### Invoke Services

```tsx
import "@tomo-inc/tomo-web-sdk/style.css";
import { TomoContextProvider, useTomo,WebWalletInvokeType  } from "@tomo-inc/tomo-web-sdk";

// Get tomo SDK instance
const { openConnectModal, tomoSDK } = useTomo();

const handleAction = async (type: WebWalletInvokeType) => {
    tomoSDK?.handleWebWalletInvoke(type);
  };

// your app logic
...
<button onClick={() => handleAction(WebWalletInvokeType.SWAP)}>
        Swap
      </button>
```

#### Example

```tsx

import "@tomo-inc/tomo-web-sdk/style.css";
import { TomoContextProvider, useTomo,WebWalletInvokeType  } from "@tomo-inc/tomo-web-sdk";

const OrderComponent = () => {
  const { openConnectModal, tomoSDK } = useTomo();

  const handleAction = async (type: WebWalletInvokeType) => {
    tomoSDK?.handleWebWalletInvoke(type);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <h1>WebSDK Demo</h1>
      <button  onClick={() => openConnectModal()}>Connect Wallet</button>
      <button  onClick={() => handleAction(WebWalletInvokeType.ONRAMP)}>Onramp</button>
      <button  onClick={() => handleAction(WebWalletInvokeType.SWAP)}>Swap</button>
      <button  onClick={() => handleAction(WebWalletInvokeType.SEND)}>Send</button>
      <button  onClick={() => handleAction(WebWalletInvokeType.RECEIVE)}>Receive</button>
    </div>
  );
};

export default function WebSDKPage() {

  return (
    <TomoContextProvider
      theme="light"
      chainTypes={["sui"]}
      clientId="YOUR_CLIENT_ID"
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {/* Add your page content here */}
        <OrderComponent />
      </div>
    </TomoContextProvider>
  );
}
```