Skip to content

Commit a656d58

Browse files
DengreSarthakDengreSarthak
authored
Merge pull request #83 from StabilityNexus/Frontend
Ui fixxes and Sync improvements.
2 parents 3d0f37b + 7f9e783 commit a656d58

File tree

3 files changed

+44
-65
lines changed

3 files changed

+44
-65
lines changed

‎web/src/app/[cat]/InteractionClient.tsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,16 @@ export default function InteractionClient() {
7070
const formatNumber = (num: number, decimals: number = 4): string => {
7171
if (num === 0) return "0";
7272
if (num < 0.0001) return num.toExponential(2);
73-
return num.toFixed(decimals);
73+
74+
// Format with specified decimals
75+
const formatted = num.toFixed(decimals);
76+
77+
// Remove trailing zeros after decimal point
78+
if (formatted.includes('.')) {
79+
return formatted.replace(/\.?0+$/, '');
80+
}
81+
82+
return formatted;
7483
};
7584

7685
const [isLoading, setIsLoading] = useState(true);
@@ -539,11 +548,13 @@ export default function InteractionClient() {
539548
try {
540549
await fetchTokenDetailsFromBlockchain();
541550
toast.success('Token details synced successfully');
551+
// Force re-initialization to refresh all data
552+
await initializeTokenDetails();
542553
} catch (error) {
543554
console.error('Manual sync failed:', error);
544555
toast.error('Failed to sync token details. Please try again.');
545556
}
546-
}, [tokenAddress, chainId, address, isOnline, fetchTokenDetailsFromBlockchain]);
557+
}, [tokenAddress, chainId, address, isOnline, fetchTokenDetailsFromBlockchain, initializeTokenDetails]);
547558

548559
useEffect(() => {
549560
if (isInitialized && tokenAddress && chainId && address) {
@@ -1116,7 +1127,7 @@ export default function InteractionClient() {
11161127
<Coins className="h-5 w-5 text-green-500 dark:text-[#FFD600]" />
11171128
<h3 className="text-lg font-semibold text-blue-400 dark:text-yellow-200">Max Supply</h3>
11181129
</div>
1119-
<p className="text-lg font-bold text-blue-400 dark:text-yellow-200">{tokenDetails.maxSupply} {tokenDetails.tokenSymbol}</p>
1130+
<p className="text-lg font-bold text-blue-400 dark:text-yellow-200">{formatNumber(tokenDetails.maxSupply)} {tokenDetails.tokenSymbol}</p>
11201131
</div>
11211132
<Button
11221133
onClick={openMaxSupplyModal}
@@ -1133,7 +1144,7 @@ export default function InteractionClient() {
11331144
<Target className="h-5 w-5 text-blue-400 dark:text-[#FFD600]" />
11341145
<h3 className="text-lg font-semibold text-blue-400 dark:text-yellow-200">Threshold Supply</h3>
11351146
</div>
1136-
<p className="text-lg font-bold text-blue-400 dark:text-yellow-200">{tokenDetails.thresholdSupply} {tokenDetails.tokenSymbol}</p>
1147+
<p className="text-lg font-bold text-blue-400 dark:text-yellow-200">{formatNumber(tokenDetails.thresholdSupply)} {tokenDetails.tokenSymbol}</p>
11371148
</div>
11381149
<Button
11391150
onClick={openThresholdModal}
@@ -1150,7 +1161,7 @@ export default function InteractionClient() {
11501161
<ArrowUp className="h-5 w-5 text-purple-500 dark:text-[#FFD600]" />
11511162
<h3 className="text-lg font-semibold text-blue-400 dark:text-yellow-200">Expansion Rate</h3>
11521163
</div>
1153-
<p className="text-lg font-bold text-blue-400 dark:text-yellow-200">{tokenDetails.maxExpansionRate} %</p>
1164+
<p className="text-lg font-bold text-blue-400 dark:text-yellow-200">{formatNumber(tokenDetails.maxExpansionRate)}%</p>
11541165
</div>
11551166
<Button
11561167
onClick={openExpansionRateModal}
@@ -1220,8 +1231,7 @@ export default function InteractionClient() {
12201231
<div className="flex items-center justify-between mb-4">
12211232
<div className="space-y-1">
12221233
<p className="text-sm text-gray-600 dark:text-yellow-200">
1223-
Max Mintable Amount:
1224-
<span
1234+
Max Mintable Amount: <span
12251235
className="font-bold cursor-help"
12261236
title={`${tokenDetails.maxMintableAmount} ${tokenDetails.tokenSymbol}`}
12271237
>
@@ -1230,8 +1240,7 @@ export default function InteractionClient() {
12301240
</p>
12311241
</div>
12321242
<p className="text-sm text-gray-600 dark:text-yellow-200">
1233-
Current Supply:
1234-
<span
1243+
Current Supply: <span
12351244
className="font-bold cursor-help"
12361245
title={`${tokenDetails.currentSupply} ${tokenDetails.tokenSymbol}`}
12371246
>
@@ -1266,8 +1275,7 @@ export default function InteractionClient() {
12661275
{mintAmount && !isNaN(Number(mintAmount)) && Number(mintAmount) > 0 && (
12671276
<div className="mt-2 p-2 rounded-lg bg-blue-50 dark:bg-yellow-400/10 border border-blue-200 dark:border-yellow-400/20">
12681277
<p className="text-xs text-blue-600 dark:text-yellow-200">
1269-
You will receive:
1270-
<span
1278+
You will receive: <span
12711279
className="font-bold cursor-help"
12721280
title={`${userAmountAfterFees || 0} ${tokenDetails.tokenSymbol}`}
12731281
>
@@ -1280,8 +1288,7 @@ export default function InteractionClient() {
12801288
)} {tokenDetails.tokenSymbol}
12811289
</span>
12821290
<br />
1283-
Clowder fee:
1284-
<span
1291+
Clowder fee: <span
12851292
className="font-bold cursor-help"
12861293
title={`${!isNaN(userAmountAfterFees) && userAmountAfterFees !== null ? Number(mintAmount) - userAmountAfterFees : 0} ${tokenDetails.tokenSymbol}`}
12871294
>

‎web/src/app/my-cats/page.tsx‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -300,22 +300,7 @@ export default function MyCATsPage() {
300300
}
301301
}, [address, isOnline, getCache, batchSaveCatDetails, saveCache, fetchAllCATsFromBlockchain]);
302302

303-
// Manual sync function for consistency with InteractionClient
304-
const handleManualSync = useCallback(async () => {
305-
if (!address || !isOnline) {
306-
if (!isOnline) {
307-
toast.error('Cannot sync while offline. Please check your internet connection.');
308-
}
309-
return;
310-
}
311-
312-
try {
313-
await syncWithBlockchain(true);
314-
} catch (error) {
315-
console.error('Manual sync failed:', error);
316-
toast.error('Failed to sync CATs. Please try again.');
317-
}
318-
}, [address, isOnline, syncWithBlockchain]);
303+
319304

320305
// Listen for CAT creation events and auto-sync
321306
useEffect(() => {
@@ -405,6 +390,25 @@ export default function MyCATsPage() {
405390
}
406391
}, [address, isInitialized, loadCATsFromStorage, pagination.catsPerPage]);
407392

393+
// Manual sync function for consistency with InteractionClient
394+
const handleManualSync = useCallback(async () => {
395+
if (!address || !isOnline) {
396+
if (!isOnline) {
397+
toast.error('Cannot sync while offline. Please check your internet connection.');
398+
}
399+
return;
400+
}
401+
402+
try {
403+
await syncWithBlockchain(true);
404+
// Refresh the page data after successful sync
405+
await updateFilteredCATs();
406+
} catch (error) {
407+
console.error('Manual sync failed:', error);
408+
toast.error('Failed to sync CATs. Please try again.');
409+
}
410+
}, [address, isOnline, syncWithBlockchain, updateFilteredCATs]);
411+
408412
// Update current page CATs when page changes (without refetching from storage)
409413
const updateCurrentPageCATs = useCallback((page: number) => {
410414
// Early return with empty slice when no pages

‎web/src/app/page.tsx‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -245,38 +245,6 @@ export default function Home() {
245245
viewport={{ once: true }}
246246
>
247247
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
248-
{/* Enhanced Flow arrows for desktop */}
249-
<motion.div
250-
className="hidden lg:block absolute top-1/2 left-1/3 w-12 h-0.5 bg-gradient-to-r from-blue-400 via-purple-400 to-blue-500 dark:from-yellow-400 dark:via-yellow-500 dark:to-yellow-600 transform -translate-y-1/2 shadow-sm"
251-
initial={{ scaleX: 0 }}
252-
whileInView={{ scaleX: 1 }}
253-
transition={{ duration: 0.6, delay: 1.2 }}
254-
viewport={{ once: true }}
255-
>
256-
<motion.div
257-
className="absolute -right-2 -top-1.5 w-4 h-4 border-r-2 border-t-2 border-blue-500 dark:border-yellow-500 transform rotate-45"
258-
initial={{ opacity: 0, x: -10 }}
259-
whileInView={{ opacity: 1, x: 0 }}
260-
transition={{ duration: 0.4, delay: 1.8 }}
261-
viewport={{ once: true }}
262-
></motion.div>
263-
</motion.div>
264-
<motion.div
265-
className="hidden lg:block absolute top-1/2 left-2/3 w-12 h-0.5 bg-gradient-to-r from-blue-400 via-purple-400 to-blue-500 dark:from-yellow-400 dark:via-yellow-500 dark:to-yellow-600 transform -translate-y-1/2 shadow-sm"
266-
initial={{ scaleX: 0 }}
267-
whileInView={{ scaleX: 1 }}
268-
transition={{ duration: 0.6, delay: 1.4 }}
269-
viewport={{ once: true }}
270-
>
271-
<motion.div
272-
className="absolute -right-2 -top-1.5 w-4 h-4 border-r-2 border-t-2 border-blue-500 dark:border-yellow-500 transform rotate-45"
273-
initial={{ opacity: 0, x: -10 }}
274-
whileInView={{ opacity: 1, x: 0 }}
275-
transition={{ duration: 0.4, delay: 2.0 }}
276-
viewport={{ once: true }}
277-
></motion.div>
278-
</motion.div>
279-
280248
{[
281249
{
282250
step: "01",
@@ -386,22 +354,22 @@ export default function Home() {
386354
{
387355
title: "Open Source Projects",
388356
explanation: "Reward developers for coding, bug fixing, documentation, and improving the projects impact.",
389-
gradient: "from-green-400 to-blue-500"
357+
gradient: "from-blue-500 to-blue-600 dark:from-yellow-400 dark:to-yellow-500"
390358
},
391359
{
392360
title: "Creative Collaboratives",
393361
explanation: "Artists, musicians, and content creators can fairly share ownership according to their creative input and effort.",
394-
gradient: "from-pink-400 to-purple-500"
362+
gradient: "from-blue-500 to-blue-600 dark:from-yellow-500 dark:to-yellow-600"
395363
},
396364
{
397365
title: "Event Management",
398366
explanation: "Recognize and reward event organizers, volunteers, and promoters for making events successful and engaging.",
399-
gradient: "from-cyan-400 to-sky-500"
367+
gradient: "from-blue-500 to-blue-600 dark:from-yellow-400 dark:to-yellow-500"
400368
},
401369
{
402370
title: "Community DAOs",
403371
explanation: "Give community members fair governance rights and influence based on their active participation and contributions.",
404-
gradient: "from-teal-400 to-emerald-500"
372+
gradient: "from-blue-500 to-blue-600 dark:from-yellow-500 dark:to-yellow-600"
405373
}
406374
].map((useCase, index) => (
407375
<motion.div

0 commit comments

Comments
 (0)