Skip to content

Commit 8077041

Browse files
Tiimie1Tiimie1
authored
Merge pull request #212 from defactor-com/fix/engage-front-end-ui-documentation-211
Fix Front End UI documentation -> feat/docs-v2
2 parents ad375de + 8df0127 commit 8077041

File tree

448 files changed

+5460
-1919
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

448 files changed

+5460
-1919
lines changed

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{
2-
"label": "Front End UI",
2+
"label": "Asets Front End UI",
33
"position": 2,
4-
"collapsible": true,
5-
"collapsed": false,
64
"link": {
75
"type": "generated-index",
8-
"title": "Assets Front End UI",
9-
"description": "User interface components and implementation guides for Defactor Assets platform"
6+
"description": "Asset tokenization platform for creating, managing, and trading real-world assets on blockchain with comprehensive lifecycle management tools."
107
}
118
}

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
id: assets-frontend-arte
3+
title: ARTe
4+
sidebar_position: 4
5+
---
6+
7+
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.
8+
9+
---
10+
11+
## ARTe Overview
12+
13+
![ARTe Overview](../../../../documentation/static/img/front-end/assets/arte-dash.png)
14+
15+
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.
16+
17+
## Creating ARTe Tokens
18+
19+
![ARTe Create Button](../../../../documentation/static/img/front-end/assets/arte-create-button.png)
20+
21+
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.
22+
23+
### Step 1: Information
24+
25+
![ARTe Create Information](../../../../documentation/static/img/front-end/assets/arte-create-information-empty.png)
26+
27+
The first step requires basic token configuration:
28+
29+
**Token Icon**
30+
Upload an image file to represent your ARTe token visually. Supports PNG, JPG formats up to 10MB.
31+
32+
**Token Name**
33+
Enter a descriptive name for your ARTe token that clearly identifies the bundled assets.
34+
35+
**Token Symbol**
36+
Create a short symbol (ticker) for your ARTe token for easy identification in trading interfaces.
37+
38+
**Chain**
39+
Select the blockchain network where your ARTe token will be deployed from the dropdown menu.
40+
41+
### Step 2: Assets
42+
43+
<!-- ![ARTe Create Assets](../../../../documentation/static/img/front-end/assets/arte-create-assets.png) -->
44+
45+
The second step allows you to select which tokenized assets to include in your ARTe bundle:
46+
47+
**Select Assets**
48+
Choose from your available tokenized assets by checking the boxes next to each asset you want to include. The interface displays:
49+
- Asset icons for visual identification
50+
- Asset ticker symbols
51+
- Checkbox selection for inclusion in the bundle
52+
53+
Selected assets will be combined into your ARTe token according to the allocation percentages you set in the next step.
54+
55+
### Step 3: Allocation
56+
57+
![ARTe Create Allocation](../../../../documentation/static/img/front-end/assets/arte-create-allocation-filled.png)
58+
59+
The final step defines how the selected assets are weighted within your ARTe token:
60+
61+
**Asset Allocation**
62+
For each selected asset, specify the percentage allocation:
63+
- Enter percentage values in the allocation fields
64+
- The **Total Allocation** must equal 100%
65+
- The interface shows real-time calculation of your total allocation
66+
67+
**Allocation Controls**
68+
- Each asset displays its name and allocation input field
69+
- Percentage symbol (%) is automatically included
70+
- Total allocation tracker ensures proper distribution
71+
72+
Once allocations total 100%, click **"Finish"** to create your ARTe token.
73+
74+
## ARTe Creation Success
75+
76+
![ARTe Creation Success](../../../../documentation/static/img/front-end/assets/arte-creation-success.png)
77+
78+
Upon successful creation, you'll see a confirmation message: **"Successfully created ARTe token!"**
79+
80+
## ARTe Management Table
81+
82+
![ARTe Management Table](../../../../documentation/static/img/front-end/assets/arte-management-table.png)
83+
84+
After creation, your ARTe tokens appear in the management table with the following information:
85+
86+
### Table Columns
87+
88+
**Name**
89+
The name of your ARTe token with its associated icon.
90+
91+
**No. Assets**
92+
The number of individual tokenized assets bundled within this ARTe token.
93+
94+
**Chain**
95+
The blockchain network where the ARTe token is deployed.
96+
97+
### ARTe Details View
98+
99+
![ARTe Details View](../../../../documentation/static/img/front-end/assets/arte-details-view.png)
100+
101+
Click on any ARTe token to view detailed information including:
102+
103+
**Token Information**
104+
- Token name, symbol, and balance
105+
- Contract address on the blockchain
106+
- Current token holdings
107+
108+
**Asset Composition**
109+
A detailed breakdown of the underlying assets:
110+
- **Token**: Name and icon of each bundled asset
111+
- **Contract Address**: Blockchain address of each underlying asset
112+
- **Ratio**: Percentage allocation of each asset within the ARTe token
113+
- **Ticker**: Symbol for each underlying asset
114+
115+
**Registration Status**
116+
Monitor the registration status of your ARTe token and access the **Register** function when needed.
117+
118+
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‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
id: asset-details-page
3+
title: Asset Details Page
4+
sidebar_position: 7
5+
---
6+
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.
8+
9+
---
10+
11+
## Asset Details Page Overview
12+
13+
![Asset Details Page](../../../../documentation/static/img/front-end/assets/assets-details-page.png)
14+
15+
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.
16+
17+
## Asset Header Information
18+
19+
![Asset Details Header](../../../../documentation/static/img/front-end/assets/assets-details-page-header.png)
20+
21+
The header section displays essential asset identification information:
22+
23+
**Asset Title**
24+
The full name of the tokenized asset displayed prominently at the top of the page.
25+
26+
**Ownership Details**
27+
- **Owned By**: Wallet address of the asset creator/owner
28+
- **Contract Address**: Blockchain contract address where the asset is deployed
29+
30+
## Key Metrics Dashboard
31+
32+
![Asset Details Metrics](../../../../documentation/static/img/front-end/assets/assets-details-page-metrics.png)
33+
34+
Four key performance indicators provide essential asset information at a glance:
35+
36+
### Total Value
37+
The complete valuation of the asset displayed in USDC, representing the total market capitalization of all tokens for this asset.
38+
39+
### Token Supply
40+
Total number of tokens minted for this asset, indicating the complete token allocation and divisibility of ownership.
41+
42+
### Price Per Token
43+
Individual token price in USDC, showing the cost per unit of ownership in this tokenized asset.
44+
45+
### My Wallet Tokens
46+
Number of tokens you currently hold for this asset, displaying your personal stake in the tokenized asset.
47+
48+
## Asset Description
49+
50+
![Asset Details Description](../../../../documentation/static/img/front-end/assets/assets-details-page-desc.png)
51+
52+
The detailed description section provides comprehensive information about the tokenized asset, including:
53+
54+
- Asset background and provenance details
55+
- Investment highlights and key value propositions
56+
- Ownership structure and token distribution methodology
57+
- Storage and management arrangements
58+
- Regulatory compliance information and standards
59+
- Professional verification and documentation status
60+
61+
This section helps investors understand the underlying value and structure of the tokenized asset.
62+
63+
## Available Actions
64+
65+
![Asset Details Actions](../../../../documentation/static/img/front-end/assets/assets-details-page-actions.png)
66+
67+
The right sidebar provides quick access to asset management functions:
68+
69+
### Make a Pool
70+
Create a liquidity pool for trading this asset, enabling other users to buy and sell tokens.
71+
72+
### Transfer Tokens
73+
Send tokens from your wallet to other addresses on the same blockchain network.
74+
75+
### View Information
76+
Access detailed asset documentation, files, and additional supporting materials.
77+
78+
### Burn Assets
79+
Permanently remove tokens from circulation, reducing both your holdings and the total token supply.
80+
81+
### Update Dynamic Data
82+
Modify changeable asset information fields that were configured during template creation.
83+
84+
### Verify
85+
Submit the asset for email-based verification review by designated third-party auditors.
86+
87+
The available actions may vary depending on your ownership rights and the current status of the asset.
88+
89+
## Transaction History
90+
91+
![Asset Details History](../../../../documentation/static/img/front-end/assets/assets-details-page-history.png)
92+
93+
The History section provides complete transparency by tracking all blockchain events related to this asset:
94+
95+
### Event Types
96+
- **Deploy** - Initial asset creation and blockchain deployment
97+
- **Transfer** - Token movements between wallet addresses
98+
- **Mint** - New token creation events
99+
- **Burn** - Token destruction events
100+
101+
### Event Information
102+
103+
**Event**
104+
The type of blockchain transaction with appropriate icons for visual identification.
105+
106+
**Date**
107+
Precise timestamp showing when the transaction occurred on the blockchain.
108+
109+
**Receiver**
110+
Destination wallet address for transfer events, or relevant address for other transaction types.
111+
112+
**Amount**
113+
Number of tokens involved in the transaction, providing transparency about token movements.

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
id: assets-frontend-contacts
3+
title: Contacts
4+
sidebar_position: 6
5+
---
6+
7+
The **Contacts Module** in the Assets frontend provides a convenient way to manage frequently used wallet addresses.
8+
Instead of manually pasting long wallet strings for every transaction, users can save labeled contacts for quick and reliable access.
9+
10+
This improves efficiency, prevents errors, and provides clear context for wallet interactions across the platform.
11+
12+
## Dashboard Overview
13+
14+
![Contacts Dashboard](../../../static/img/front-end/assets/assets-contacts-dashboard.png)
15+
16+
The **Contacts Dashboard** displays all saved contacts, including their labels and wallet addresses.
17+
Users can add or remove contacts as needed.
18+
19+
- **Name** – Human-readable label (e.g., Treasury Wallet, Partner Wallet)
20+
- **Wallet** – The saved blockchain address
21+
- **Actions** – Delete icon for removing contacts
22+
23+
## Empty State
24+
25+
![Contacts Dashboard Empty](../../../static/img/front-end/assets/assets-contacts-dash-empty.png)
26+
27+
When no contacts are added, the dashboard shows an **Empty State** with the option to add your first contact.
28+
Clicking **+ Add Contact** opens the add contact modal.
29+
30+
## Adding a Contact
31+
32+
![Add Contact Modal Empty](../../../static/img/front-end/assets/assets-contacts-modal-add-constact-empty.png)
33+
34+
To add a new contact:
35+
36+
1. Click **+ Add Contact**
37+
2. Enter:
38+
- **Name** – e.g., *Treasury Wallet*
39+
- **Wallet** – The blockchain address (EVM-compatible)
40+
3. Click **Add Contact** to save
41+
42+
### Example Contact
43+
44+
![Add Contact Modal Filled](../../../static/img/front-end/assets/assets-contacts-modal-add-constact-filled.png)
45+
46+
For example, you might add a **Treasury Wallet** as the first contact:
47+
- **Name** – Treasury Wallet
48+
- **Wallet** – `0xa5AF486F08a336725336b119D5E282Fd30C6887O`
49+
50+
Once saved, this contact appears in the dashboard for quick access.
51+
52+
## Best Practices
53+
54+
- **Use Clear Labels** – Choose descriptive names (e.g., Foundation Wallet, Staking Rewards) so contacts are easily recognizable.
55+
- **Verify Addresses** – Always double-check wallet addresses before saving to prevent sending tokens to the wrong account.
56+
- **Keep It Clean** – Remove outdated or unused contacts to maintain an organized list.
57+
- **Add Key Wallets First** – Treasury, liquidity, and partner wallets are strong candidates for initial contacts.
58+
59+
> The Contacts module ensures frequent interactions are fast, accurate, and traceable by using clear labels instead of raw wallet addresses.

0 commit comments

Comments
 (0)