show custom tokens

packages/features/src/common/hooks/use-account.ts

@@ -1,3 +1,5 @@
+import type { AccountToken } from "@/common/types.ts"
+import { formatMina } from "@mina-js/utils"
 import { Network, getAccountProperties } from "@palladco/pallad-core"
 import { sessionPersistence } from "@palladco/vault"
 import { getPublicKey, isDelegated, useVault } from "@palladco/vault"
@@ -20,13 +22,16 @@ export const useAccount = () => {
   )
   const fetchWallet = async () => {
     await _syncWallet()
-    const accountInfo = getAccountsInfo(currentNetworkId, publicKey)
+    const accountsInfo = getAccountsInfo(
+      currentNetworkId,
+      publicKey,
+    ).accountInfo
     const chain = currentWallet.credential.credential?.chain
-    const props = getAccountProperties(
-      accountInfo.accountInfo,
-      chain ?? Network.Mina,
-    )
-    return props
+    const props = getAccountProperties(accountsInfo, chain ?? Network.Mina)
+    return {
+      ...props,
+      accountsInfo,
+    }
   }
   const publicKey = getPublicKey(currentWallet)
   const swr = useSWR(
@@ -36,9 +41,27 @@ export const useAccount = () => {
       refreshInterval: 30000,
     },
   )
-  const rawBalance = swr.isLoading ? 0 : (swr.data?.balance ?? 0)
-  const minaBalance =
-    rawBalance && Number.parseInt(String(rawBalance)) / 1_000_000_000
+  const rawBalance = useMemo(
+    () => (swr.isLoading ? 0 : (swr.data?.balance ?? 0)),
+    [swr],
+  )
+  const minaBalance = useMemo(
+    () => rawBalance && formatMina(BigInt(rawBalance)),
+    [rawBalance],
+  )
+  const tokens: AccountToken[] | undefined = useMemo(() => {
+    if (!swr.isLoading) {
+      const accountsInfo = swr.data?.accountsInfo
+      if (accountsInfo) {
+        return Object.keys(accountsInfo).map((tokenSymbol) => ({
+          tokenSymbol,
+          balance: {
+            total: BigInt(accountsInfo[tokenSymbol].balance.total),
+          },
+        }))
+      }
+    }
+  }, [swr])
   const gradientBackground = useMemo(
     () =>
       publicKey &&
@@ -67,6 +90,7 @@ export const useAccount = () => {
     ...swr,
     fetchWallet,
     minaBalance,
+    tokens,
     gradientBackground,
     copyWalletAddress,
     currentWallet,

packages/features/src/common/types.ts

@@ -64,6 +64,13 @@ export type Account = {
   }
 }
 
+export type AccountToken = {
+  tokenSymbol: string
+  balance: {
+    total: bigint
+  }
+}
+
 export type Contact = {
   name: string
   address: string

packages/features/src/lib/locales/en/en.json

@@ -129,6 +129,8 @@
     "detailsGetStarted": "Here you'll find details about your transactions. Fund your wallet to get started!"
   },
   "wallet": {
+    "assets": "Assets",
+    "tokens": "Tokens",
     "openBeta": "Open Beta version",
     "onlyWorksForDevnet": "Only works for Devnet before Mainnet launch",
     "available": "Available",

packages/features/src/lib/locales/tr/tr.json

@@ -129,6 +129,8 @@
     "detailsGetStarted": "İşlemlerinizle ilgili ayrıntıları burada bulabilirsiniz. Başlamak için cüzdanınıza para yatırın!"
   },
   "wallet": {
+    "assets": "Varlıklar",
+    "tokens": "Tokenlar",
     "openBeta": "Açık Beta sürümü",
     "onlyWorksForDevnet": "Yalnızca Mainnet lansmanından önceki Devnet için çalışır",
     "available": "Kullanılabilir",

packages/features/src/wallet/index.stories.tsx

@@ -9,6 +9,7 @@ export const Dashboard = () => {
     <OverviewView
       lastMonthPrices={[]}
       chartLabel="test"
+      minaDailyPriceDiffText="test"
       loading={false}
       currentPriceIndex={undefined}
       setCurrentPriceIndex={action("Set Current Price Index")}
@@ -20,6 +21,9 @@ export const Dashboard = () => {
       minaBalance={200}
       setUseFiatBalance={action("Set Use Fiat Balance")}
       useFiatBalance={true}
+      setIsAssetsView={action("Set Is Assets View")}
+      isAssetsView={false}
+      tokens={[]}
     />
   )
 }

packages/features/src/wallet/routes/overview.tsx

@@ -42,12 +42,14 @@ export const OverviewRoute = () => {
   const dailyPriceDiffMina = (
     Number(dailyPriceDiffFiat) / (minaPrice ?? 1)
   ).toFixed(2)
+  const minaDailyPriceDiffText = `${dailyPriceDiff >= 0 ? "+" : ""}${
+    useFiatBalance ? dailyPriceDiffFiat : dailyPriceDiffMina
+  }`
   const chartLabel =
     typeof currentPriceIndex === "undefined"
-      ? `${dailyPriceDiff >= 0 ? "+" : ""}${
-          useFiatBalance ? dailyPriceDiffFiat : dailyPriceDiffMina
-        } (24h)`
+      ? `${minaDailyPriceDiffText} (24h)`
       : dayjs(lastMonthPrices[currentPriceIndex]?.[0]).format("MMM D")
+  const [isAssetsView, setIsAssetsView] = useState(true)
   return (
     <OverviewView
       lastMonthPrices={lastMonthPrices}
@@ -63,6 +65,10 @@ export const OverviewRoute = () => {
       onReceive={() => navigate("/receive")}
       useFiatBalance={useFiatBalance}
       setUseFiatBalance={setUseFiatBalance}
+      isAssetsView={isAssetsView}
+      setIsAssetsView={setIsAssetsView}
+      tokens={account.tokens}
+      minaDailyPriceDiffText={minaDailyPriceDiffText}
     />
   )
 }

packages/features/src/wallet/views/overview.tsx

@@ -1,7 +1,9 @@
 import ArrowRightIcon from "@/common/assets/arrow-right.svg?react"
+import type { AccountToken } from "@/common/types.ts"
 import { AppLayout } from "@/components/app-layout"
 import { MenuBar } from "@/components/menu-bar"
 import { Skeleton } from "@/components/skeleton"
+import { formatMina } from "@mina-js/utils"
 import type { Tx } from "@palladco/pallad-core"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
@@ -23,6 +25,10 @@ type OverviewViewProps = {
   onReceive: () => void
   useFiatBalance: boolean
   setUseFiatBalance: (useFiatBalance: boolean) => void
+  isAssetsView: boolean
+  setIsAssetsView: (isAssetsView: boolean) => void
+  tokens: AccountToken[] | undefined
+  minaDailyPriceDiffText: string
 }
 
 export const OverviewView = ({
@@ -39,6 +45,10 @@ export const OverviewView = ({
   onReceive,
   useFiatBalance,
   setUseFiatBalance,
+  isAssetsView,
+  setIsAssetsView,
+  tokens,
+  minaDailyPriceDiffText,
 }: OverviewViewProps) => {
   const [bucks, cents] = (useFiatBalance ? fiatBalance : minaBalance)
     .toFixed(2)
@@ -102,34 +112,94 @@ export const OverviewView = ({
         </div>
       </div>
       <div className="flex flex-col px-8 py-4 gap-3 pb-16">
-        <div className="flex justify-between items-end">
-          <div className="flex flex-col gap-1">
-            <p className="text-mint">{t("wallet.recent")}</p>
-            <h2 className="text-xl">{t("wallet.transactions")}</h2>
-          </div>
-          <Link to="/transactions" className="flex items-center mb-[2px]">
-            <span>{t("wallet.seeAll")}</span>
-            <ArrowRightIcon />
-          </Link>
-        </div>
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
-          {loading ? (
-            <>
-              <Skeleton loading={true} h="145px" />
-              <Skeleton loading={true} h="145px" />
-            </>
-          ) : transactions.length > 0 ? (
-            transactions.map((tx) => (
-              <TxTile
-                key={tx.hash}
-                tx={tx}
-                currentWalletAddress={publicAddress}
-              />
-            ))
-          ) : (
-            <p className="col-span-2">{t("wallet.noTransactionsYet")}</p>
-          )}
+        <div className="p-1 flex bg-secondary rounded-full gap-4">
+          <button
+            type="button"
+            className={`flex-1 btn ${isAssetsView ? "bg-neutral" : "btn-secondary"}`}
+            onClick={() => setIsAssetsView(true)}
+            data-testid="dashboard/assets"
+          >
+            {t("wallet.assets")}
+          </button>
+          <button
+            type="button"
+            className={`flex-1 btn ${isAssetsView ? "btn-secondary" : "bg-neutral"}`}
+            onClick={() => setIsAssetsView(false)}
+            data-testid="dashboard/recent"
+          >
+            {t("wallet.recent")}
+          </button>
         </div>
+        {isAssetsView ? (
+          <>
+            <h2 className="text-xl">{t("wallet.tokens")}</h2>
+            <div className="flex flex-col space-y-4">
+              {tokens === undefined ? (
+                <>
+                  <Skeleton loading={true} h="70px" />
+                  <Skeleton loading={true} h="70px" />
+                </>
+              ) : (
+                tokens.map((token) => (
+                  <div
+                    key={token.tokenSymbol}
+                    className="flex justify-between py-2"
+                  >
+                    <div className="flex space-x-4">
+                      <div className="w-12 h-12 flex items-center justify-center bg-base-100 rounded-full">
+                        {token.tokenSymbol[0].toUpperCase()}
+                      </div>
+                      <div>
+                        <p>{token.tokenSymbol}</p>
+                        <p className="text-[#7D7A9C]">
+                          {token.tokenSymbol === "MINA"
+                            ? minaDailyPriceDiffText
+                            : "-"}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p>{formatMina(token.balance.total)}</p>
+                      <p className="text-[#7D7A9C]">
+                        {token.tokenSymbol === "MINA"
+                          ? `$${fiatBalance.toFixed(2)}`
+                          : "-"}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex justify-between items-end">
+              <h2 className="text-xl">{t("wallet.transactions")}</h2>
+              <Link to="/transactions" className="flex items-center mb-[2px]">
+                <span>{t("wallet.seeAll")}</span>
+                <ArrowRightIcon />
+              </Link>
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+              {loading ? (
+                <>
+                  <Skeleton loading={true} h="145px" />
+                  <Skeleton loading={true} h="145px" />
+                </>
+              ) : transactions.length > 0 ? (
+                transactions.map((tx) => (
+                  <TxTile
+                    key={tx.hash}
+                    tx={tx}
+                    currentWalletAddress={publicAddress}
+                  />
+                ))
+              ) : (
+                <p className="col-span-2">{t("wallet.noTransactionsYet")}</p>
+              )}
+            </div>
+          </>
+        )}
       </div>
     </AppLayout>
   )

packages/pallad-core/src/Mina/Providers/account-info-provider/types.ts

@@ -17,6 +17,7 @@ export interface AccountInfo {
   inferredNonce: number
   delegate: string
   publicKey: Mina.PublicKey
+  tokenId: string
 }
 
 export interface AccountInfoProvider extends Provider {

packages/pallad-core/src/Mina/Providers/index.ts

@@ -1,4 +1,5 @@
 export * from "./account-info-provider"
+export * from "./token-info-provider"
 export * from "./chain-history-provider"
 export * from "./daemon-status-provider"
 export * from "./provider"

packages/pallad-core/src/Mina/Providers/token-info-provider/index.ts

@@ -0,0 +1 @@
+export * from "./types"

packages/pallad-core/src/Mina/Providers/token-info-provider/types.ts

@@ -0,0 +1,19 @@
+import type { Provider } from "../.."
+
+export type TokenInfoArgs = {
+  tokenIds: string[]
+}
+
+export interface TokenInfo {
+  tokenSymbol: string
+}
+
+export interface TokenInfoProvider extends Provider {
+  /**
+   * Gets token info for the tokenIds provided in the arguments
+   *
+   * @param {string[]} tokenIds - tokenIds
+   * @returns {Record<string, TokenInfo>} - An object with token info objects
+   */
+  getTokenInfo: (args: TokenInfoArgs) => Promise<Record<string, TokenInfo>>
+}

packages/pallad-core/src/Mina/Providers/unified-mina-provider.ts

@@ -7,6 +7,7 @@ import type {
 } from "./chain-history-provider"
 import type { DaemonStatus } from "./daemon-status-provider"
 import type { HealthCheckResponse } from "./provider"
+import type { TokenInfo, TokenInfoArgs } from "./token-info-provider"
 import type { TxStatus, TxStatusArgs } from "./tx-status-provider"
 import type { SubmitTxArgs, SubmitTxResult } from "./tx-submit-provider"
 
@@ -26,6 +27,8 @@ export interface UnifiedMinaProviderType {
   getTransactionStatus?(args: TxStatusArgs): Promise<TxStatus | undefined>
   submitTransaction(args: SubmitTxArgs): Promise<SubmitTxResult | undefined>
 
+  getTokenInfo(args: TokenInfoArgs): Promise<Record<string, TokenInfo>>
+
   // Methods related to ProviderArchive
   getTransactions(
     args: TransactionsByAddressesArgs,

packages/pallad-core/src/Pallad/providers/account-info-provider/types.ts

@@ -19,6 +19,7 @@ export interface AccountInfo {
   inferredNonce: number
   delegate?: string
   publicKey: Mina.PublicKey | Address
+  tokenId: string
 }
 
 export interface AccountInfoProvider extends Provider {
@@ -31,4 +32,12 @@ export interface AccountInfoProvider extends Provider {
   getAccountInfo: (
     args: AccountInfoArgs,
   ) => Promise<Record<string, AccountInfo>>
+
+  /**
+   * Gets the account balance and information based for all accounts of a public key.
+   *
+   * @param {Mina.PublicKey | Address} publicKey - Public Key of the account
+   * @returns {AccountInfo[]} - An array of balance and account information
+   */
+  getAccountsInfo: (args: AccountInfoArgs) => Promise<AccountInfo[]>
 }

packages/pallad-core/src/Pallad/providers/index.ts

@@ -1,4 +1,5 @@
 export * from "./account-info-provider"
+export * from "./token-info-provider"
 export * from "./chain-history-provider"
 export * from "./node-status-provider"
 export * from "./provider"

packages/pallad-core/src/Pallad/providers/token-info-provider/index.ts

@@ -0,0 +1 @@
+export * from "./types"