> For the complete documentation index, see [llms.txt](https://developer.xyxyx.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.xyxyx.pro/utilities/xyxyx-web-components/tokenizer.md).

# Tokenizer

#### Overview

The Xyxyx Tokenizer is the first component included in the `xyxyx-web-components` package. It provides a simple and intuitive user interface that simplifies and streamlines the process of contract deployment and token issuance. 

The Xyxyx Tokenizer is specifically designed for the [1x1](https://docs.xyxyx.pro/products-and-services/tokenization-models/1x1) tokenization model, with the Xyxyxx API underneath.

***

#### Features

* Supports the integration of 1x1 smart contract deployment & token issuance into any React application, with the Xyxyx API serving as the execution layer behind the scenes
* Enables the generation of 1x1 token previews in SVG format
* Provides easy error handling and state management for 1x1 contract deployment and token issuance

***

#### Intended Use

* [ERC-721F](/api-endpoints/erc-721f.md): You need an already deployed ERC-721F contract. The Xyxyx Tokenizer will be used to streamline the individualized minting of tokens for this contract.
* [ERC-404](/api-endpoints/deploy.md): The Xyxyx Tokenizer helps you deploy an ERC-404 smart contract, arbitraging via Tokenizer the token SVG output for the entire token supply.
* [ERC-721](/api-endpoints/erc-721f.md): The process is the same as for ERC-404.

***

#### 1x1 Props

* `isDeployAllowed` – Enables or disables contract deployment/token issuance button externally
* `tokenText` – The text content that is stamped in the token SVG output
* `metadataText` – The text content that is inserted in the token metadata, stored within its SVG file
* `background` – Hexadecimal color for the token output background
* `textColor` – Hexadecimal color for the token output text
* `fontFamily` – Font-family that is used in the token output text
* `borderRadius` – Border radius that is applied to the token output
* `logo` – 1:1 SVG that is displayed on the top left corner of the token output
* `watermark` – 1:1 SVG that is displayed in the background of the token output (with 70% opacity)
* `showDeployerAddress` – Option to display wallet address
* `showTrademark` – Xyxyx trademark displayed on the token output bottom right corner

***

#### ERC-721F Props (Token Mint)

* `contractAddress` – Existing ERC-721F contract address
* `tokenId` – Token ID of the token to be minted
* `mintCost` – Amount required to mint a token
* `smartContract` – Token standard (`ERC721F`)
* `network`  – Blockchain network to mint the token
* `walletPrivateKey` – Deployer private key for authorizing transaction

***

#### ERC-404 Props (Smart Contract Deploy)

* `name` – Token name
* `ticker` – Token ticker
* `decimals` – Token decimals
* `supply` – Token total supply
* `smartContract` – Token standard (`ERC404`)
* `network` – Blockchain network to deploy the contract
* `walletPrivateKey`– Deployer private key for authorizing transaction

***

#### ERC-721 Props (Smart Contract Deploy)

* `name` – Token name
* `ticker` – Token ticker
* `supply` – Token total supply
* `mintPrice` – Token mint price
* `restrictToOwner` – Defines if minting is restricted to contract owner
* `smartContract` – Token standard (`ERC721`
* `network` – Blockchain network to deploy the contract
* `walletPrivateKey`– Deployer private key for authorizing transaction

***

**Usage Example**

Below is a basic usage example demonstrating how to integrate the `XyxyxTokenizer` component into your React app:

```jsx
import React from 'react';
import { XyxyxTokenizer } from 'xyxyx-web-components';

const App = () => (
  <XyxyxTokenizer
    name="Lorem Ipsum"
    ticker="LI"
    supply={1}
    tokenText="Insert the token SVG output text here"
    metadata="Insert the token metadata here"
    walletPrivateKey="your-wallet-private-key"
    background="#000000"
    textColor="#FFFFFF"
    fontFamily="Arial, sans-serif"
    borderRadius="10"
    showDeployerAddress={true}
    walletAddress="0xABCDEF1234567890"
    smartContract="ERC404"
    network="mainnet"
/>
);
```