From 920ddbf065b339361e4ab6f6f7e1efb01ec53085 Mon Sep 17 00:00:00 2001
From: Satoshi Qazi Muhammed <info@pezkuwichain.io>
Date: Fri, 12 Jun 2026 21:34:49 -0700
Subject: [PATCH] feat(web): PEZ-20 badge on PEZ and USDT balance cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a small reusable Pez20Badge pill next to the PEZ and USDT tokens in
the wallet balance view, linking to the Token Standards docs. These are
fungible assets on Asset Hub, i.e. the PEZ-20 standard — this gives users
the familiar ERC-20-style mental model at a glance.

Additive only: no labels removed, native HEZ is intentionally not badged
(it is the native/gas token, not a PEZ-20 asset).
---
 web/src/components/AccountBalance.tsx |  3 +++
 web/src/components/Pez20Badge.tsx     | 28 +++++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 web/src/components/Pez20Badge.tsx

diff --git a/web/src/components/AccountBalance.tsx b/web/src/components/AccountBalance.tsx
index 680636c1..243a5379 100644
--- a/web/src/components/AccountBalance.tsx
+++ b/web/src/components/AccountBalance.tsx
@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Wallet, TrendingUp, RefreshCw, Award, Plus, Coins, Send, Shield, Users, Fuel, Lock } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ASSET_IDS, getAssetSymbol } from '@pezkuwi/lib/wallet';
+import { Pez20Badge } from './Pez20Badge';
 import { AddTokenModal } from './AddTokenModal';
 import { TransferModal } from './TransferModal';
 import { XCMTeleportModal } from './XCMTeleportModal';
@@ -811,6 +812,7 @@ export const AccountBalance: React.FC = () => {
               <CardTitle className="text-lg font-medium text-gray-300 whitespace-nowrap">
                 {t('balance.pezBalance')}
               </CardTitle>
+              <Pez20Badge className="flex-shrink-0" />
             </div>
             <Button
               size="sm"
@@ -853,6 +855,7 @@ export const AccountBalance: React.FC = () => {
             <CardTitle className="text-lg font-medium text-gray-300">
               {t('balance.usdtBalance')}
             </CardTitle>
+            <Pez20Badge className="flex-shrink-0" />
           </div>
         </CardHeader>
         <CardContent>
diff --git a/web/src/components/Pez20Badge.tsx b/web/src/components/Pez20Badge.tsx
new file mode 100644
index 00000000..1f3aa39e
--- /dev/null
+++ b/web/src/components/Pez20Badge.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ * Small pill marking a token as a Pezkuwi token-standard asset.
+ * PEZ-20 = fungible standard (pallet-assets on Asset Hub), PEZ-721 = NFT standard.
+ * See docs.pezkuwichain.io → Token Standards.
+ */
+export const Pez20Badge: React.FC<{ standard?: 'PEZ-20' | 'PEZ-721'; className?: string }> = ({
+  standard = 'PEZ-20',
+  className = '',
+}) => (
+  <a
+    href="https://docs.pezkuwichain.io/token-standards"
+    target="_blank"
+    rel="noopener noreferrer"
+    title={`${standard} token standard on Pezkuwi Asset Hub`}
+    className={
+      'inline-flex items-center rounded-full border border-blue-500/40 bg-blue-500/10 ' +
+      'px-2 py-0.5 text-[10px] font-semibold tracking-wide text-blue-300 ' +
+      'hover:bg-blue-500/20 transition-colors no-underline ' +
+      className
+    }
+  >
+    {standard}
+  </a>
+);
+
+export default Pez20Badge;