From a35854384a290dfc477f5b26d3f4582208637495 Mon Sep 17 00:00:00 2001
From: Noah Gundotra <ngundotra@users.noreply.github.com>
Date: Thu, 10 Oct 2024 07:32:34 -0400
Subject: [PATCH] Add token state back to token account sections (#387)

---
 app/components/account/TokenAccountSection.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/components/account/TokenAccountSection.tsx b/app/components/account/TokenAccountSection.tsx
index b446e16f..4bca9bfa 100644
--- a/app/components/account/TokenAccountSection.tsx
+++ b/app/components/account/TokenAccountSection.tsx
@@ -37,6 +37,7 @@ import {
     TransferHookAccount,
 } from '@validators/accounts/token-extension';
 import { BigNumber } from 'bignumber.js';
+import { capitalCase } from 'change-case';
 import { useEffect, useMemo, useState } from 'react';
 import { ExternalLink, RefreshCw } from 'react-feather';
 import { create } from 'superstruct';
@@ -59,6 +60,11 @@ const getEthAddress = (link?: string) => {
     return address;
 };
 
+const StatusBadge = ({ status }: { status: string }) => {
+    const badgeClass = status === 'initialized' ? 'bg-success-soft' : 'bg-warning-soft';
+    return <span className={`badge ${badgeClass}`}>{capitalCase(status)}</span>;
+};
+
 export function TokenAccountSection({
     account,
     tokenAccount,
@@ -465,12 +471,12 @@ function TokenAccountCard({ account, info }: { account: Account; info: TokenAcco
                     <td>Token balance {typeof symbol === 'string' && `(${symbol})`}</td>
                     <td className="text-lg-end">{balance}</td>
                 </tr>
-                {info.state === 'uninitialized' && (
-                    <tr>
-                        <td>Status</td>
-                        <td className="text-lg-end">Uninitialized</td>
-                    </tr>
-                )}
+                <tr>
+                    <td>Status</td>
+                    <td className="text-lg-end">
+                        <StatusBadge status={info.state} />
+                    </td>
+                </tr>
                 {info.rentExemptReserve && (
                     <tr>
                         <td>Rent-exempt reserve (SOL)</td>