# Wallet Playground

This example is the front-end interface for the Crypto.com Wallet Playground, built using React, Vite, and TypeScript. It provides a simple UI to create wallets using the official Crypto.com Developer Platform SDK.

### Features

* Simple wallet creation using the Crypto.com Developer SDK
* Displays:
  * Wallet address
  * Private key
  * Mnemonic phrase
* Clean, dark-themed UI with styled components

<div data-full-width="false"><figure><img src="https://524814724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FktUMyU5bBece2vVjrTg7%2Fuploads%2FnUrrlVW7HvrVFJOtDCqf%2FScreenshot%202025-07-23%20at%204.47.19%E2%80%AFPM.png?alt=media&#x26;token=8341dba1-ccaa-4b76-ab9b-703532806752" alt=""><figcaption></figcaption></figure></div>

### Installation

Navigate to the app folder and install dependencies:

```sh
cd developer-platform-sdk-examples/sdk-examples/categories/wallet
npm install
```

### Environment Variables

This example uses a client-side SDK and may require an API key. You can initialize the SDK inside your app (`src/app/Wallet/index.tsx`) code like so:

```typescript
import { Client } from '@crypto.com/developer-platform-client';

Client.init({
  apiKey: 'your-crypto.com-developer-platform-api-key',
});
```

{% hint style="info" %}
For Crypto.com Developer Platform API Key, [click here to learn how to obtain your Crypto.com Developer Platform API key](https://ai-agent-sdk-docs.crypto.com/crypto.com-developer-platform/developer-platform-dashboard).
{% endhint %}

{% hint style="info" %}
**Note:** Never expose real or production API keys in a public or client-side app.
{% endhint %}

### Usage

To run the app in development mode:

```sh
npm run dev
```

Open your browser at `http://localhost:5173`.

### Build

To generate a production-ready build:

```sh
npm run build
```

To preview the build:

```sh
npm run preview
```

### Demo Video

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FktUMyU5bBece2vVjrTg7%2Fuploads%2FAmHjrKmmYJ8L4begeTLe%2FWalletDemo.mp4?alt=media&token=5efe87b7-83e7-4a1e-a5f5-ae66b747644c>" %}