Skip to content

Commit dcb9238

Browse files
CJ42CJ42
authored
Merge pull request #94 from lukso-network/docs/howto-section
docs: add howto subsection
2 parents ac7f2d2 + e3d556e commit dcb9238

File tree

9 files changed

+547
-0
lines changed

9 files changed

+547
-0
lines changed

‎docs/general/how-to/_category_.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
label: '💡 How To'
2+
collapsed: true
3+
position: 2

‎docs/general/how-to/_create-edit-profile-grid.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Create and Edit Your Profile Grid
3+
sidebar_position: 2
4+
---
5+
6+
# Create and Edit Your Profile Grid

‎docs/general/how-to/_create-universal-profile.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: Create a Universal Profile
3+
sidebar_position: 1
4+
---
5+
6+
## Additional Resources
7+
8+
- [Universal Profile Documentation](https://docs.lukso.tech/standards/universal-profile/introduction)
9+
- [LUKSO Standards](https://docs.lukso.tech/standards/introduction)
10+
- [Community Support](https://discord.gg/lukso)

‎docs/general/how-to/fund-your-controller.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: Fund your Controller
3+
sidebar_position: 3
4+
---
5+
6+
# Fund your Controller
7+
8+
Controllers are wallet addresses that manage your Universal Profile. To perform transactions and interact with dApps, your controller needs to be funded with LYX tokens.
9+
10+
## Understanding Controllers
11+
12+
### What is a Controller?
13+
14+
A controller is an address with specific permissions to execute transactions on behalf of your Universal Profile. Controllers can:
15+
16+
- Send transactions
17+
- Interact with smart contracts
18+
- Manage profile settings
19+
- Transfer assets
20+
- Sign messages
21+
22+
### Types of Controllers
23+
24+
1. **Main Controller**: The primary address with full permissions
25+
2. **Limited Controllers**: Addresses with restricted permissions
26+
3. **Browser Extension Controller**: Automatically created by the UP extension
27+
4. **Hardware Wallet Controller**: External wallet addresses
28+
29+
## Why Fund Your Controller?
30+
31+
Controllers need LYX to:
32+
33+
- Pay for gas fees on transactions
34+
- Deploy smart contracts
35+
- Interact with dApps
36+
- Transfer tokens and NFTs
37+
- Update profile metadata
38+
39+
## How to Fund Your Controller
40+
41+
### Method 1: Direct Transfer
42+
43+
The simplest way to fund your controller:
44+
45+
1. Get your controller address from your Universal Profile
46+
2. Send LYX directly to this address
47+
3. Verify the balance in your profile dashboard
48+
49+
### Method 2: From External Wallet
50+
51+
If you have LYX in an external wallet:
52+
53+
1. Copy your controller address
54+
2. Open your external wallet (MetaMask, etc.)
55+
3. Send LYX to the controller address
56+
4. Wait for confirmation (usually 15-30 seconds)
57+
58+
### Method 3: Using the LUKSO Faucet (Testnet Only)
59+
60+
For testing purposes on testnet:
61+
62+
1. Visit the LUKSO Testnet Faucet
63+
2. Enter your controller address
64+
3. Complete the captcha
65+
4. Receive test LYX tokens
66+
67+
## Checking Controller Balance
68+
69+
### Via Universal Profile Dashboard
70+
71+
1. Open your profile dashboard
72+
2. Go to "Controllers" section
73+
3. View balance next to each controller address
74+
75+
### Via Block Explorer
76+
77+
1. Visit the LUKSO Block Explorer
78+
2. Search for your controller address
79+
3. View current LYX balance and transaction history
80+
81+
### Via Browser Extension
82+
83+
1. Open the UP Browser Extension
84+
2. Check the balance display
85+
3. View individual controller balances

‎docs/general/how-to/use-lukso-bridge.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Use the LUKSO Bridge
3+
sidebar_position: 4
4+
---
5+
6+
import ImportTokenSection from '@site/src/components/ImportTokenSection'
7+
8+
# Use the LUKSO Bridge
9+
10+
LUKSO uses the Hyperlane Warp UI for the bridging tokens to/from LUKSO Mainnet.
11+
12+
![Bridge UI](../../../static/img/general/bridge_ui.png)
13+
14+
## Prerequisites
15+
16+
Before using the bridge, ensure you have:
17+
18+
1. **A Web3 Wallet**: MetaMask, Rabby, or another compatible wallet
19+
2. **Network Configuration**: The correct network added to your wallet
20+
3. **Gas Fees**: Native tokens of the destination network to manage your bridged tokens.
21+
22+
## How to Bridge Tokens
23+
24+
1. **Visit [_Hyperlane Warp UI_](https://lukso-bridgev1.pages.dev/)** : Make sure to visit the official webpage
25+
2. **Connect Your Wallet**: Connect your Web3 wallet to the bridge interface
26+
3. **Select Networks**: Choose the **from**(source) and **to**(destination) networks
27+
4. **Enter Amount**: Specify the amount of tokens to bridge
28+
5. **Confirm Transaction**: Review and confirm the transaction in your wallet
29+
6. **Wait for Confirmation**: Bridge transactions typically take a few minutes
30+
7. **Import Token**: Use the buttons [**below**](#import-lyx-to-wallet) to add the bridged token to your wallet
31+
32+
:::tip Import Bridged Tokens to Your Wallet
33+
34+
After bridging tokens, you need to **import LYX to your wallet** to see your balance.
35+
36+
:::
37+
38+
## Import LYX to Wallet
39+
40+
Click the buttons below to add the bridged LYX tokens to your wallet:
41+
42+
<ImportTokenSection />
43+
44+
## Important Notes
45+
46+
- Bridge transactions are irreversible - double-check all details before confirming
47+
- Keep some native tokens for gas fees on both networks
48+
- Bridging times may vary depending on network congestion
49+
- Always verify contract addresses when manually adding tokens

‎src/components/ImportTokenSection/ImportTokenSection.module.scss‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
gap: 0.5rem;
6+
max-width: 300px;
7+
}
8+
9+
.importButton {
10+
display: inline-flex;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 44px;
14+
padding: 12px 20px;
15+
background: #6981ec;
16+
color: white;
17+
border: none;
18+
border-radius: 8px;
19+
font-size: 14px;
20+
font-weight: 600;
21+
cursor: pointer;
22+
transition: all 0.2s ease;
23+
box-shadow: 0 2px 4px rgba(105, 129, 236, 0.2);
24+
white-space: nowrap;
25+
min-width: 140px;
26+
27+
&:hover:not(:disabled) {
28+
background: #5a70d8;
29+
box-shadow: 0 4px 8px rgba(105, 129, 236, 0.3);
30+
}
31+
32+
&:active:not(:disabled) {
33+
transform: translateY(0);
34+
box-shadow: 0 2px 4px rgba(105, 129, 236, 0.2);
35+
}
36+
37+
&:disabled {
38+
opacity: 0.7;
39+
cursor: not-allowed;
40+
transform: none;
41+
box-shadow: 0 2px 4px rgba(105, 129, 236, 0.1);
42+
}
43+
44+
&.importing {
45+
background: #94a3b8;
46+
}
47+
}
48+
49+
.buttonContent {
50+
display: flex;
51+
align-items: center;
52+
gap: 8px;
53+
}
54+
55+
.tokenSymbol {
56+
background: rgba(255, 255, 255, 0.2);
57+
padding: 2px 6px;
58+
border-radius: 4px;
59+
font-size: 12px;
60+
font-weight: 700;
61+
}
62+
63+
.buttonText {
64+
font-size: 14px;
65+
}
66+
67+
.loadingContainer {
68+
display: flex;
69+
align-items: center;
70+
gap: 8px;
71+
}
72+
73+
.spinner {
74+
width: 16px;
75+
height: 16px;
76+
border: 2px solid rgba(255, 255, 255, 0.3);
77+
border-top: 2px solid white;
78+
border-radius: 50%;
79+
animation: spin 1s linear infinite;
80+
}
81+
82+
@keyframes spin {
83+
0% { transform: rotate(0deg); }
84+
100% { transform: rotate(360deg); }
85+
}
86+
87+
.statusMessage {
88+
padding: 8px 12px;
89+
border-radius: 6px;
90+
font-size: 12px;
91+
text-align: center;
92+
font-weight: 500;
93+
animation: slideIn 0.3s ease;
94+
max-width: 100%;
95+
word-wrap: break-word;
96+
97+
&.success {
98+
background-color: #d1fae5;
99+
color: #065f46;
100+
border: 1px solid #a7f3d0;
101+
}
102+
103+
&.error {
104+
background-color: #fee2e2;
105+
color: #991b1b;
106+
border: 1px solid #fecaca;
107+
}
108+
109+
&.warning {
110+
background-color: #fef3c7;
111+
color: #92400e;
112+
border: 1px solid #fde68a;
113+
}
114+
}
115+
116+
@keyframes slideIn {
117+
from {
118+
opacity: 0;
119+
transform: translateY(-10px);
120+
}
121+
to {
122+
opacity: 1;
123+
transform: translateY(0);
124+
}
125+
}
126+
127+
.networkInfo {
128+
text-align: center;
129+
background: #f8fafc;
130+
border: 1px solid #e2e8f0;
131+
border-radius: 6px;
132+
padding: 8px 12px;
133+
margin-top: 4px;
134+
font-size: 12px;
135+
}
136+
137+
.networkDetails {
138+
display: flex;
139+
align-items: center;
140+
justify-content: center;
141+
gap: 6px;
142+
}
143+
144+
.networkLabel {
145+
color: #64748b;
146+
font-weight: 500;
147+
}
148+
149+
.networkName {
150+
color: #1e293b;
151+
font-weight: 600;
152+
background: #e0e7ff;
153+
padding: 2px 6px;
154+
border-radius: 4px;
155+
font-size: 11px;
156+
}
157+
158+
.tokenButtonsWrapper {
159+
display: flex;
160+
gap: 2rem;
161+
flex-wrap: wrap;
162+
align-items: flex-start;
163+
justify-content: center;
164+
}
165+
166+
.tokenSection {
167+
flex: 0 1 300px;
168+
text-align: center;
169+
}
170+
171+
.tokenSectionTitle {
172+
margin-bottom: 1rem;
173+
color: #374151;
174+
font-size: 18px;
175+
font-weight: 600;
176+
}
177+
178+
.separator {
179+
width: 1px;
180+
background: #e5e7eb;
181+
margin: 0 1rem;
182+
align-self: stretch;
183+
}
184+
185+
@media (max-width: 768px) {
186+
.separator {
187+
display: none;
188+
}
189+
190+
.tokenButtonsWrapper {
191+
flex-direction: column;
192+
align-items: center;
193+
}
194+
195+
.tokenSection {
196+
width: 100%;
197+
max-width: 300px;
198+
}
199+
.importButton {
200+
min-width: 120px;
201+
padding: 10px 16px;
202+
font-size: 13px;
203+
}
204+
205+
.tokenSymbol {
206+
font-size: 11px;
207+
}
208+
209+
.container {
210+
max-width: 100%;
211+
}
212+
}
213+
214+
@media (max-width: 480px) {
215+
.importButton {
216+
min-width: 100%;
217+
min-height: 48px;
218+
}
219+
220+
.buttonContent {
221+
flex-direction: column;
222+
gap: 4px;
223+
}
224+
225+
.statusMessage {
226+
font-size: 11px;
227+
}
228+
}

0 commit comments

Comments
 (0)