# 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:

```tsx
enum WebWalletInvokeType {
  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
}
```

#### 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 { TomoEVMKitProvider, WebWalletInvokeType} from "@tomo-inc/tomo-evm-kit";

const handleAction = async (type: WebWalletInvokeType) => {
     // Take SDK from the provider core
    const provider = (await connector?.getProvider());
    const tomoSDK = provider?.core;
    try {
      tomoSDK?.handleWebWalletInvoke(type);
    } catch (e) {
      console.log("handleAction error:", e);
    }
  };

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

#### Example

```tsx

import { getDefaultConfig, TomoEVMKitProvider, useConnectModal, useAccountModal, useWalletConnectors, WebWalletInvokeType } from "@tomo-inc/tomo-evm-kit";
import { WagmiProvider, useAccount } from "wagmi";
import { mainnet, polygon, optimism, arbitrum, base } from "wagmi/chains";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const ConnectButton = () => {
  const { openConnectModal } = useConnectModal();

  return (
    <button onClick={openConnectModal}>
      Connect Wallet
    </button>
  );
};

const OrderComponent = () => {

  const { connector } = useAccount();

  const handleAction = async (type: WebWalletInvokeType) => {
     // get sdk instance
    const provider = (await connector?.getProvider());
    const tomoSDK = provider?.core;
    try {
      tomoSDK?.handleWebWalletInvoke(type);
    } catch (e) {
      console.log("handleAction error:", e);
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <h1>EVMKit Demo</h1>
      <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 EVMKitPage() {
  const config = getDefaultConfig({
    clientId:
      "YOUR_CLIENT_ID", // Replace with your clientId
    appName: "My TomoEVMKit App",
    projectId: "YOUR_PROJECT_ID", // Note: Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud.
    chains: [mainnet, polygon, optimism, arbitrum, base],
    ssr: true, // If your dApp uses server-side rendering (SSR)
  });

  const queryClient = new QueryClient();

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TomoEVMKitProvider>
          <ConnectButton />
          <OrderComponent />
        </TomoEVMKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```