improve Blinks Components

messages/en/common.json

@@ -13,6 +13,8 @@
     "readThisArticle": "Read this article",
     "toNext": "Next",
     "toPrevious": "Previous",
+    "balance": "Balance",
+    "updated": "Updated!",
     "aiChat": "AI Chat",
     "githubRepo": "GitHub Repo",
     "priceDataFromCoingecko": "※ Price data is retrieved from CoinGecko",

messages/en/staking.json

@@ -17,6 +17,12 @@
       "title2": "Additional Incentives",
       "subtitle1": "Stake your SOL in the elSOL pool (created with Solana Foundation official Stake Pool Program) to earn staking rewards and additional incentives.",
       "subtitle2": "As an elSOL holder, you contribute to the decentralization and security enhancement of the Solana blockchain."
+    },
+    "DirectStakingRow": {
+      "title1": "Stake SOL",
+      "title2": "for Max TrueAPY",
+      "subtitle1": "To enhance the decentralization and security of the Solana network, we constantly operate and update high-performance, top-tier validators with zero downtime.",
+      "subtitle2": "By minimizing downtime and selecting optimal regions for operation, we aim to maximize returns. With all fees set to 0%, we provide the highest TrueAPY among Solana validators."
     }
   }
 }

messages/ja/common.json

@@ -13,6 +13,8 @@
     "readThisArticle": "この記事を読む",
     "toNext": "次へ",
     "toPrevious": "前へ",
+    "balance": "残高",
+    "updated": "更新完了!",
     "aiChat": "AIチャット",
     "githubRepo": "GitHub リポ",
     "priceDataFromCoingecko": "※ 価格データは CoinGecko より取得",

messages/ja/staking.json

@@ -17,6 +17,12 @@
       "title2": "Additional Incentives",
       "subtitle1": "SOLをelSOLプール(Solana Foundation 公式の Stake Pool Program で作成)にステークし、ステーキング報酬と追加インセンティブを獲得しましょう。",
       "subtitle2": "elSOL ホルダーとして、Solanaブロックチェーンの分散化とセキュリティ向上に貢献できます。"
+    },
+    "DirectStakingRow": {
+      "title1": "Stake SOL",
+      "title2": "for Max TrueAPY",
+      "subtitle1": "Solana ネットワークの分散化とセキュリティ強化のため、私たちは常に高性能かつハイスコアのバリデータをノーダウンタイムで運用・アップデートしています。",
+      "subtitle2": "ダウンタイムを最小化し、最適なエリアで運用することで、より高いリターンを追求します。すべての手数料は 0% に設定されており、Solana バリデータ最大の TrueAPY を実現しています。"
     }
   }
 }

src/app/[locale]/(default)/blinks/DirectStakingRow.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import {
+  OPOSOpenCube,
+  SolanaFoundationLogoHorizontal,
+  SolanaFoundationLogoInvertHorizontal
+} from '@/assets/img'
+import { mainShardGradation } from '@/lib/decoration'
+import { cn } from '@/lib/utils'
+import { Link } from '@/navigation'
+import { useLocale, useTranslations } from 'next-intl'
+import Image from 'next/image'
+import { useTheme } from '@/hooks/utils/useTheme'
+import { SOLANA_VALIDATOR_LINK } from '@/constants/links'
+import DirectStakingTabs from './DirectStakingTabs'
+
+const logos = [
+  {
+    title: 'SolanaFoundation',
+    logo: SolanaFoundationLogoHorizontal,
+    logoInvert: SolanaFoundationLogoInvertHorizontal,
+    href: SOLANA_VALIDATOR_LINK
+  }
+]
+
+export default function DirectStakingRow() {
+  const t = useTranslations()
+  const locale = useLocale()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
+
+  return (
+    <>
+      <div className="relative mx-auto max-w-7xl p-3">
+        <div className="absolute left-0 top-0 -z-10 opacity-10 dark:opacity-20">
+          <Image
+            src={OPOSOpenCube}
+            alt="Background"
+            className="h-48 w-48 sm:h-64 sm:w-64 md:h-96 md:w-96 lg:h-[440px] lg:w-[440px]"
+            unoptimized
+            width={256}
+            height={256}
+          />
+        </div>
+
+        <div className="relative mx-auto grid items-center gap-24 py-24 md:grid-cols-2 md:py-48">
+          <div className="grid w-full gap-4 p-4">
+            <h2
+              className={cn(
+                'py-2 text-5xl font-bold tracking-tighter sm:text-7xl lg:text-8xl',
+                mainShardGradation
+              )}
+            >
+              {t('staking.DirectStakingRow.title1')} <br />
+              {t('staking.DirectStakingRow.title2')}
+            </h2>
+            <p
+              className={cn(
+                'max-w-96 text-sm font-medium sm:max-w-lg sm:text-lg lg:-mt-2 lg:max-w-xl lg:text-xl',
+                'text-zinc-500 dark:text-zinc-300'
+              )}
+            >
+              {t('staking.DirectStakingRow.subtitle1')} <br />
+              {t('staking.DirectStakingRow.subtitle2')}
+            </p>
+
+            <div className="mt-3 flex flex-wrap items-center justify-start gap-4">
+              {logos.map((logo) => (
+                <Link
+                  key={logo.title}
+                  href={logo.href}
+                  className="hover:opacity-80"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Image
+                    src={theme === 'light' ? logo.logo : logo.logoInvert}
+                    alt="Background"
+                    className="w-20 sm:w-24 md:w-28"
+                    unoptimized
+                    width={256}
+                  />
+                </Link>
+              ))}
+            </div>
+          </div>
+          <div className="mx-auto w-full max-w-xl p-4">
+            <DirectStakingTabs />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/[locale]/(default)/blinks/DirectStakingTabs.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+import BlinksWalletIndicator from '@/components/solana/BlinksWalletIndicator'
+import BlinksComponent from '@/components/solana/BlinksComponent'
+import { VALIDATORS_BLINKS_BASE_URL } from '@/constants/links'
+
+export default function DirectStakingTabs() {
+  const t = useTranslations()
+
+  const [tabValue, setTabValue] = useState('labo')
+
+  return (
+    <>
+      <div className="grid gap-6">
+        <Tabs value={tabValue} onValueChange={setTabValue} className="w-full">
+          <TabsList className="mb-7 grid w-full grid-cols-2">
+            <TabsTrigger value="labo">ELSOUL</TabsTrigger>
+            <TabsTrigger value="epics">Epics DAO</TabsTrigger>
+          </TabsList>
+          <TabsContent value="labo">
+            <BlinksComponent
+              actionUrl={`${VALIDATORS_BLINKS_BASE_URL}/v1/stake/delegate?validator=labo`}
+            />
+          </TabsContent>
+          <TabsContent value="epics">
+            <BlinksComponent
+              actionUrl={`${VALIDATORS_BLINKS_BASE_URL}/v1/stake/delegate?validator=epics`}
+            />
+          </TabsContent>
+        </Tabs>
+        <BlinksWalletIndicator />
+      </div>
+    </>
+  )
+}