Fix Front End UI documentation -> feat/docs-v2

docs/assets/front-end-ui/_category_.json

@@ -1,11 +1,8 @@
 {
-    "label": "Front End UI",
+    "label": "Asets Front End UI",
     "position": 2,
-    "collapsible": true,
-    "collapsed": false,
     "link": {
         "type": "generated-index",
-        "title": "Assets Front End UI",
-        "description": "User interface components and implementation guides for Defactor Assets platform"
+        "description": "Asset tokenization platform for creating, managing, and trading real-world assets on blockchain with comprehensive lifecycle management tools."
     }
 }

docs/assets/front-end-ui/arte.md

@@ -0,0 +1,118 @@
+---
+id: assets-frontend-arte
+title: ARTe
+sidebar_position: 4
+---
+
+This guide provides a comprehensive overview of the ARTe (Asset Representation Token) interface, focusing on creating and managing liquidity units that combine multiple tokenized assets into tradeable bundles.
+
+---
+
+## ARTe Overview
+
+![ARTe Overview](../../../../documentation/static/img/front-end/assets/arte-dash.png)
+
+The **ARTe** section enables you to create Asset Representation Tokens, which are liquidity units that bundle multiple tokenized assets together. ARTe tokens provide a way to create diversified asset portfolios and enhance trading liquidity by combining different assets into a single tradeable token.
+
+## Creating ARTe Tokens
+
+![ARTe Create Button](../../../../documentation/static/img/front-end/assets/arte-create-button.png)
+
+To create a new ARTe token, click the **"+ Create"** button in the top-right corner. This opens the ARTe creation workflow with a three-step process.
+
+### Step 1: Information
+
+![ARTe Create Information](../../../../documentation/static/img/front-end/assets/arte-create-information-empty.png)
+
+The first step requires basic token configuration:
+
+**Token Icon**
+Upload an image file to represent your ARTe token visually. Supports PNG, JPG formats up to 10MB.
+
+**Token Name**
+Enter a descriptive name for your ARTe token that clearly identifies the bundled assets.
+
+**Token Symbol**
+Create a short symbol (ticker) for your ARTe token for easy identification in trading interfaces.
+
+**Chain**
+Select the blockchain network where your ARTe token will be deployed from the dropdown menu.
+
+### Step 2: Assets
+
+<!-- ![ARTe Create Assets](../../../../documentation/static/img/front-end/assets/arte-create-assets.png) -->
+
+The second step allows you to select which tokenized assets to include in your ARTe bundle:
+
+**Select Assets**
+Choose from your available tokenized assets by checking the boxes next to each asset you want to include. The interface displays:
+- Asset icons for visual identification
+- Asset ticker symbols
+- Checkbox selection for inclusion in the bundle
+
+Selected assets will be combined into your ARTe token according to the allocation percentages you set in the next step.
+
+### Step 3: Allocation
+
+![ARTe Create Allocation](../../../../documentation/static/img/front-end/assets/arte-create-allocation-filled.png)
+
+The final step defines how the selected assets are weighted within your ARTe token:
+
+**Asset Allocation**
+For each selected asset, specify the percentage allocation:
+- Enter percentage values in the allocation fields
+- The **Total Allocation** must equal 100%
+- The interface shows real-time calculation of your total allocation
+
+**Allocation Controls**
+- Each asset displays its name and allocation input field
+- Percentage symbol (%) is automatically included
+- Total allocation tracker ensures proper distribution
+
+Once allocations total 100%, click **"Finish"** to create your ARTe token.
+
+## ARTe Creation Success
+
+![ARTe Creation Success](../../../../documentation/static/img/front-end/assets/arte-creation-success.png)
+
+Upon successful creation, you'll see a confirmation message: **"Successfully created ARTe token!"**
+
+## ARTe Management Table
+
+![ARTe Management Table](../../../../documentation/static/img/front-end/assets/arte-management-table.png)
+
+After creation, your ARTe tokens appear in the management table with the following information:
+
+### Table Columns
+
+**Name**
+The name of your ARTe token with its associated icon.
+
+**No. Assets**
+The number of individual tokenized assets bundled within this ARTe token.
+
+**Chain**
+The blockchain network where the ARTe token is deployed.
+
+### ARTe Details View
+
+![ARTe Details View](../../../../documentation/static/img/front-end/assets/arte-details-view.png)
+
+Click on any ARTe token to view detailed information including:
+
+**Token Information**
+- Token name, symbol, and balance
+- Contract address on the blockchain
+- Current token holdings
+
+**Asset Composition**
+A detailed breakdown of the underlying assets:
+- **Token**: Name and icon of each bundled asset
+- **Contract Address**: Blockchain address of each underlying asset
+- **Ratio**: Percentage allocation of each asset within the ARTe token
+- **Ticker**: Symbol for each underlying asset
+
+**Registration Status**
+Monitor the registration status of your ARTe token and access the **Register** function when needed.
+
+ARTe tokens provide an efficient way to create diversified asset portfolios, enhance liquidity, and simplify trading of multiple tokenized assets through a single token interface.

docs/assets/front-end-ui/asset-details-page.md

@@ -0,0 +1,113 @@
+---
+id: asset-details-page
+title: Asset Details Page
+sidebar_position: 7
+---
+
+This guide provides a comprehensive overview of the Asset Details Page interface, focusing on viewing detailed information about individual tokenized assets and performing asset-specific management operations.
+
+---
+
+## Asset Details Page Overview
+
+![Asset Details Page](../../../../documentation/static/img/front-end/assets/assets-details-page.png)
+
+When you click on any asset row in the dashboard tables, you're taken to a comprehensive asset details page that provides complete information about the specific tokenized asset. This interface serves as the central hub for understanding and managing individual assets in your portfolio.
+
+## Asset Header Information
+
+![Asset Details Header](../../../../documentation/static/img/front-end/assets/assets-details-page-header.png)
+
+The header section displays essential asset identification information:
+
+**Asset Title**
+The full name of the tokenized asset displayed prominently at the top of the page.
+
+**Ownership Details**
+- **Owned By**: Wallet address of the asset creator/owner
+- **Contract Address**: Blockchain contract address where the asset is deployed
+
+## Key Metrics Dashboard
+
+![Asset Details Metrics](../../../../documentation/static/img/front-end/assets/assets-details-page-metrics.png)
+
+Four key performance indicators provide essential asset information at a glance:
+
+### Total Value
+The complete valuation of the asset displayed in USDC, representing the total market capitalization of all tokens for this asset.
+
+### Token Supply
+Total number of tokens minted for this asset, indicating the complete token allocation and divisibility of ownership.
+
+### Price Per Token
+Individual token price in USDC, showing the cost per unit of ownership in this tokenized asset.
+
+### My Wallet Tokens
+Number of tokens you currently hold for this asset, displaying your personal stake in the tokenized asset.
+
+## Asset Description
+
+![Asset Details Description](../../../../documentation/static/img/front-end/assets/assets-details-page-desc.png)
+
+The detailed description section provides comprehensive information about the tokenized asset, including:
+
+- Asset background and provenance details
+- Investment highlights and key value propositions
+- Ownership structure and token distribution methodology
+- Storage and management arrangements
+- Regulatory compliance information and standards
+- Professional verification and documentation status
+
+This section helps investors understand the underlying value and structure of the tokenized asset.
+
+## Available Actions
+
+![Asset Details Actions](../../../../documentation/static/img/front-end/assets/assets-details-page-actions.png)
+
+The right sidebar provides quick access to asset management functions:
+
+### Make a Pool
+Create a liquidity pool for trading this asset, enabling other users to buy and sell tokens.
+
+### Transfer Tokens
+Send tokens from your wallet to other addresses on the same blockchain network.
+
+### View Information
+Access detailed asset documentation, files, and additional supporting materials.
+
+### Burn Assets
+Permanently remove tokens from circulation, reducing both your holdings and the total token supply.
+
+### Update Dynamic Data
+Modify changeable asset information fields that were configured during template creation.
+
+### Verify
+Submit the asset for email-based verification review by designated third-party auditors.
+
+The available actions may vary depending on your ownership rights and the current status of the asset.
+
+## Transaction History
+
+![Asset Details History](../../../../documentation/static/img/front-end/assets/assets-details-page-history.png)
+
+The History section provides complete transparency by tracking all blockchain events related to this asset:
+
+### Event Types
+- **Deploy** - Initial asset creation and blockchain deployment
+- **Transfer** - Token movements between wallet addresses
+- **Mint** - New token creation events
+- **Burn** - Token destruction events
+
+### Event Information
+
+**Event**
+The type of blockchain transaction with appropriate icons for visual identification.
+
+**Date**
+Precise timestamp showing when the transaction occurred on the blockchain.
+
+**Receiver**
+Destination wallet address for transfer events, or relevant address for other transaction types.
+
+**Amount**
+Number of tokens involved in the transaction, providing transparency about token movements.

docs/assets/front-end-ui/contacts.md

@@ -0,0 +1,59 @@
+---
+id: assets-frontend-contacts
+title: Contacts
+sidebar_position: 6
+---
+
+The **Contacts Module** in the Assets frontend provides a convenient way to manage frequently used wallet addresses.  
+Instead of manually pasting long wallet strings for every transaction, users can save labeled contacts for quick and reliable access.
+
+This improves efficiency, prevents errors, and provides clear context for wallet interactions across the platform.
+
+## Dashboard Overview  
+
+![Contacts Dashboard](../../../static/img/front-end/assets/assets-contacts-dashboard.png)
+
+The **Contacts Dashboard** displays all saved contacts, including their labels and wallet addresses.  
+Users can add or remove contacts as needed.  
+
+- **Name** – Human-readable label (e.g., Treasury Wallet, Partner Wallet)  
+- **Wallet** – The saved blockchain address  
+- **Actions** – Delete icon for removing contacts  
+
+## Empty State  
+
+![Contacts Dashboard Empty](../../../static/img/front-end/assets/assets-contacts-dash-empty.png)
+
+When no contacts are added, the dashboard shows an **Empty State** with the option to add your first contact.  
+Clicking **+ Add Contact** opens the add contact modal.  
+
+## Adding a Contact  
+
+![Add Contact Modal Empty](../../../static/img/front-end/assets/assets-contacts-modal-add-constact-empty.png)
+
+To add a new contact:  
+
+1. Click **+ Add Contact**  
+2. Enter:  
+   - **Name** – e.g., *Treasury Wallet*  
+   - **Wallet** – The blockchain address (EVM-compatible)  
+3. Click **Add Contact** to save  
+
+### Example Contact  
+
+![Add Contact Modal Filled](../../../static/img/front-end/assets/assets-contacts-modal-add-constact-filled.png)
+
+For example, you might add a **Treasury Wallet** as the first contact:  
+- **Name** – Treasury Wallet  
+- **Wallet** – `0xa5AF486F08a336725336b119D5E282Fd30C6887O`  
+
+Once saved, this contact appears in the dashboard for quick access.
+
+## Best Practices  
+
+- **Use Clear Labels** – Choose descriptive names (e.g., Foundation Wallet, Staking Rewards) so contacts are easily recognizable.  
+- **Verify Addresses** – Always double-check wallet addresses before saving to prevent sending tokens to the wrong account.  
+- **Keep It Clean** – Remove outdated or unused contacts to maintain an organized list.  
+- **Add Key Wallets First** – Treasury, liquidity, and partner wallets are strong candidates for initial contacts.  
+
+> The Contacts module ensures frequent interactions are fast, accurate, and traceable by using clear labels instead of raw wallet addresses.