# Minter Widget

The Minter Widget is a frontend tool to facilitate minting USDV with alternative stablecoins (e.g., USDC, USDT, DAI), providing flexibility for minters who support these alternatives.

A Verified Minter can configure the Minter Widget with its registered color to enforce that all newly minted USDV through this widget be colored accordingly.

The Minter Widget supports [Minter.sol](https://docs.usdv.money/docs/app-integrations/pages/awT44vPij95sXkT9p4Bs#default-minter.sol) (via MinterProxy) on Ethereum and [BridgeRecolor.sol](https://docs.usdv.money/docs/app-integrations/pages/fxV9o8rnpCPrO5p8c96n#default-bridgerecolor.sol) on Sidechains.

## Architecture (Ethereum)

<figure><img src="/files/zb8ngsg9HKbpeLAoGQew" alt=""><figcaption><p>The minter widget allows users to easily interact with minter contracts. For security, users should only ever interact with the Minter proxy contract, which routes their mint requests to the correct Minter contract.</p></figcaption></figure>

### Deploy Minter Widget

Here is an example of how to deploy a minter widget on your website with the React framework.

1. Add `@usdv/usdv-widget` to the dependencies of your package.

```
yarn add @usdv/usdv-widget
```

or

<pre><code><strong> npm install @usdv/usdv-widget
</strong></code></pre>

2. In your page file

```
import {bootstrapWidget} from '@usdv/usdv-widget';

bootstrapWidget({color: YOUR_COLOR_NUMBER});
```

3. Declare elements in html or jsx file. `usdv-tracker`、`usdv-bridge`、`usdv-mint` and `usdv-widget` are custom HTML elements. `usdv-tracker` is used for displaying transaction status, `usdv-bridge` is used for transferring across chains, and `usdv-mint` is used for minting. `usdv-widget` is a combination of the above three elements.

```
<!-- DO NOT USE SELF CLOSING TAGS -->
<div class="center">
    <usdv-widget style="padding:20px"></usdv-widget>
</div>
```

or if you only want mint feature with transaction tracker, you can use it like this:

```
<!-- DO NOT USE SELF CLOSING TAGS -->
<div class="center">
    <usdv-tracker style="width:468px;margin-bottom:10px"></usdv-tracker>
    <usdv-mint style="background-color:white;border-radius:16px;padding:20px"></usdv-mint>
</div>
```

4. You can customize the theme.

```
import {bootstrapWidget, themes} from '@usdv/usdv-widget';
bootstrapWidget({color: YOUR_COLOR_NUMBER, theme: themes.dark});
```

5. Switch to testnet

```
bootstrapWidget({color: YOUR_COLOR_NUMBER, isTestnet: true});
```

6. Enable minting in side chain

```
// for testnet
bootstrapWidget({
    color: YOUR_COLOR_NUMBER,
    isTestnet: true,
    bridgeRecolorConfig: [
      {
        address: YOUR_BRIDGE_RECOLOR_ADDRESS,
        chainKey: 'fuji',
      },
      {
        address: YOUR_BRIDGE_RECOLOR_ADDRESS,
        chainKey: 'arbitrum-goerli',
      },
      {
        address: YOUR_BRIDGE_RECOLOR_ADDRESS,
        chainKey: 'bsc-testnet',
      },
      {
        address: YOUR_BRIDGE_RECOLOR_ADDRESS,
        chainKey: 'optimism-goerli',
      },
    ],
});

// for mainnet
bootstrapWidget({
    color: YOUR_COLOR_NUMBER,
    bridgeRecolorConfig: [
     {
       address: YOUR_BRIDGE_RECOLOR_ADDRESS,
       chainKey: 'avalanche',
     },
     {
       address: YOUR_BRIDGE_RECOLOR_ADDRESS,
       chainKey: 'arbitrum',
     },
     {
       address: YOUR_BRIDGE_RECOLOR_ADDRESS,
       chainKey: 'bsc',
     },
     {
       address: YOUR_BRIDGE_RECOLOR_ADDRESS,
       chainKey: 'optimism',
     },
   ],
});
```

### Request Mint

This is the interface to mint USDV :

```
    function mint(
        address _token, // must be whitelisted assets like STBT
        address _receiver, // receiver of the minted USDV
        uint64 _usdvAmount, // target USDV amount to mint
        uint32 _color, // color of the USDV
        bytes32 _memo // a reserved field to record meaning extra data for mint
    ) public {}
```

The Minter Widget can also provide a minting memo for this minting action for extensibility, such as keeping record or external attributions.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usdv.money/docs/app-integrations/minter-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.