@unowallet/token-price-widget/README.md

Uno Wallet Token Price Widget for displaying token price information and linking to uno wallet for swapping

# uno-token-price-widget

Large

<img width="300" alt="Image" src="https://assets.partyworld.dev/uno/uno-widget-large.png" />

Medium

<img width="300" alt="Image" src="https://assets.partyworld.dev/uno/uno-widget-medium.png" />

Small

<img width="300" alt="Image" src="https://assets.partyworld.dev/uno/uno-widget-small.png" />

## Usage

#### Installation

```sh
$ npm i --save @unowallet/token-price-widget
```

#### React Component usage

Import the `<UnoTokenPriceWidget />` component, and the token-price-widget stylesheet.

```tsx
import { UnoTokenPriceWidget } from "@unowallet/token-price-widget";
import "@unowallet/token-price-widget/dist/styles.css";

// ...in your render function

<UnoTokenPriceWidget
  tokenName="ORO"
  tokenSymbol="ORO"
  tokenImage="https://assets.partyworld.dev/tokens/oro-icon.png"
  tokenAddress="0xcd1E32B86953D79a6AC58e813D2EA7a1790cAb63"
  appId="app_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" // Your World Mini App ID
  onClickSwap={() => {
    /* handle on click swap */
  }}
  size="large"
  language="en" // Not implimented yet
/>;
```

If you are using Next.js you will need to update `transpilePackages` in your `next.config.js`.

```
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    // other transpiled packages
    '@unowallet/token-price-widget'
  ],
}

module.exports = nextConfig
```