diff --git a/rooch-portal-v1/src/common/interface.ts b/rooch-portal-v1/src/common/interface.ts
index cbec0397e7..c667d1612c 100644
--- a/rooch-portal-v1/src/common/interface.ts
+++ b/rooch-portal-v1/src/common/interface.ts
@@ -74,4 +74,5 @@ export type PaymentTypes = {
export type TabItem = {
id: string
label: string
+ available: boolean
}
diff --git a/rooch-portal-v1/src/pages/mint/components/featured-sfts.tsx b/rooch-portal-v1/src/pages/mint/components/featured-sfts.tsx
index 8e2ac3c46f..94113cdf37 100644
--- a/rooch-portal-v1/src/pages/mint/components/featured-sfts.tsx
+++ b/rooch-portal-v1/src/pages/mint/components/featured-sfts.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
import {
Table,
TableBody,
- TableCaption,
TableCell,
TableHead,
TableHeader,
@@ -72,7 +71,6 @@ export const FeaturedSfts = () => {
return (
- Lorem ipsum dolor sit.
SFT Name
diff --git a/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx b/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx
index c00e580ff6..4cdb302755 100644
--- a/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx
+++ b/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx
@@ -1,25 +1,41 @@
// Copyright (c) RoochNetwork
// SPDX-License-Identifier: Apache-2.0
import { useState } from 'react'
-
import { FeaturedSfts } from './featured-sfts'
import { Tokens } from './tokens'
-
import { TabItem } from '@/common/interface'
+import { AlertCircle } from 'lucide-react'
const mintTabItems: TabItem[] = [
- { id: 'allTokens', label: 'All Tokens' },
- { id: 'featuredTokens', label: 'Featured Tokens' },
+ { id: 'allTokens', label: 'All Tokens', available: false },
+ { id: 'featuredTokens', label: 'Featured Tokens', available: false },
]
export const SftTabs = () => {
const [activeId, setActiveId] = useState('allTokens')
- const handleTabClick = (id: string) => {
- setActiveId(id)
+ const handleTabClick = (id: string, available: boolean) => {
+ if (available) {
+ setActiveId(id)
+ }
}
+ const renderComingSoon = () => (
+
+
+
Coming Soon!
+
+ We're working hard to bring this feature to you. Stay tuned!
+
+
+ )
+
const renderTabContent = () => {
+ const activeTab = mintTabItems.find((item) => item.id === activeId)
+ if (activeTab && !activeTab.available) {
+ return renderComingSoon()
+ }
+
switch (activeId) {
case 'allTokens':
return
@@ -41,7 +57,7 @@ export const SftTabs = () => {
? 'border-b-2 border-blue-500 text-blue-500'
: 'border-b-2 border-transparent text-muted-foreground'
} hover:text-blue-500 transition-all`}
- onClick={() => handleTabClick(item.id)}
+ onClick={() => handleTabClick(item.id, item.available)}
>
{item.label}
diff --git a/rooch-portal-v1/src/pages/mint/components/tokens.tsx b/rooch-portal-v1/src/pages/mint/components/tokens.tsx
index 7ff3222ebf..e9538ec304 100644
--- a/rooch-portal-v1/src/pages/mint/components/tokens.tsx
+++ b/rooch-portal-v1/src/pages/mint/components/tokens.tsx
@@ -3,7 +3,6 @@
import {
Table,
TableBody,
- TableCaption,
TableCell,
TableHead,
TableHeader,
@@ -59,7 +58,6 @@ export const Tokens = () => {
return (
- Lorem ipsum dolor sit.
SFT Name