Merge pull request #20 from macalinao/igm/token-dnum

Add basic token utilities

Author: macalinao

.changeset/shaky-papayas-judge.md

@@ -0,0 +1,11 @@
+---
+"@macalinao/solana-batch-accounts-loader": patch
+"@macalinao/wallet-adapter-compat": patch
+"@macalinao/dataloader-es": patch
+"@macalinao/token-utils": patch
+"@macalinao/zod-solana": patch
+"example-dapp": patch
+"@macalinao/grill": patch
+---
+
+Add sideEffects: false to pacakges

apps/example-dapp/src/components/ui/input-token-amount.tsx

@@ -1,8 +1,8 @@
+import type { TokenInfo } from "@macalinao/grill";
 import type * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import type { TokenInfo } from "@/types/token";
 
 export interface InputTokenAmountProps {
   token: TokenInfo;
@@ -56,9 +56,9 @@ export const InputTokenAmount: React.FC<InputTokenAmountProps> = ({
     <div className={cn("relative", className)}>
       <div className="flex items-center space-x-3 rounded-md border border-input bg-transparent p-3 shadow-sm transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
         <div className="flex items-center space-x-2 min-w-0 flex-1">
-          {token.icon && (
+          {token.iconURL && (
             <img
-              src={token.icon}
+              src={token.iconURL}
               alt={token.symbol}
               className="w-6 h-6 rounded-full flex-shrink-0"
               onError={(e) => {

apps/example-dapp/src/routes/examples/transfer-sol.tsx

@@ -1,6 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   addressSchema,
+  formatTokenAmount,
+  NATIVE_SOL,
+  parseTokenAmount,
   useAccount,
   useKitWallet,
   useSendTX,
@@ -25,7 +28,6 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { InputTokenAmount } from "@/components/ui/input-token-amount";
-import type { TokenInfo } from "@/types/token";
 
 export const Route = createFileRoute("/examples/transfer-sol")({
   component: () => <TransferSolPage />,
@@ -61,14 +63,6 @@ const TransferSolPage: React.FC = () => {
     address: signer?.address ?? null,
   });
 
-  // SOL token info
-  const solToken: TokenInfo = {
-    address: "11111111111111111111111111111111",
-    symbol: "SOL",
-    decimals: 9,
-    name: "Solana",
-  };
-
   const {
     register,
     handleSubmit,
@@ -93,6 +87,17 @@ const TransferSolPage: React.FC = () => {
     return Number(userAccount.lamports) / 1e9;
   }, [userAccount]);
 
+  const availableBalanceFormatted = useMemo(() => {
+    if (!userAccount) {
+      return "0";
+    }
+    const tokenAmount = {
+      token: NATIVE_SOL,
+      amount: [userAccount.lamports, NATIVE_SOL.decimals] as const,
+    };
+    return formatTokenAmount(tokenAmount, { symbol: true });
+  }, [userAccount]);
+
   const estimatedFee = 0.000005; // ~5000 lamports
 
   const totalCost = useMemo(() => {
@@ -108,6 +113,9 @@ const TransferSolPage: React.FC = () => {
 
     // The recipient is already an Address type from the zod schema
     const recipientAddress: Address = data.recipient;
+
+    // Parse the amount using parseTokenAmount
+    const parsedAmount = parseTokenAmount(NATIVE_SOL, data.amount);
     const amount = Number.parseFloat(data.amount);
 
     // Check balance
@@ -120,7 +128,7 @@ const TransferSolPage: React.FC = () => {
     const instruction = getTransferSolInstruction({
       source: signer,
       destination: recipientAddress,
-      amount: lamports(BigInt(Math.floor(amount * 1e9))),
+      amount: lamports(parsedAmount.amount[0]),
     });
 
     const signature = await sendTX(`Transfer ${amount.toString()} SOL`, [
@@ -196,7 +204,7 @@ const TransferSolPage: React.FC = () => {
                 Amount to Send
               </label>
               <InputTokenAmount
-                token={solToken}
+                token={NATIVE_SOL}
                 value={watch("amount")}
                 onChange={(value) => {
                   setValue("amount", value);
@@ -219,9 +227,7 @@ const TransferSolPage: React.FC = () => {
                   <span className="text-muted-foreground">
                     Available Balance:
                   </span>
-                  <span className="font-mono">
-                    {availableBalance.toFixed(9)} SOL
-                  </span>
+                  <span className="font-mono">{availableBalanceFormatted}</span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-muted-foreground">Amount to Send:</span>

apps/example-dapp/src/routes/examples/wrapped-sol.tsx

@@ -1,4 +1,8 @@
 import {
+  formatTokenAmount,
+  NATIVE_SOL,
+  parseTokenAmount,
+  type TokenInfo,
   useAccount,
   useAssociatedTokenAccount,
   useKitWallet,
@@ -19,8 +23,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { InputTokenAmount } from "@/components/ui/input-token-amount";
-import type { TokenInfo } from "@/types/token";
-import { formatTokenAmount } from "@/utils/format-token-amount";
 import {
   getCloseAccountInstructions,
   getWrapSOLInstructions,
@@ -46,21 +48,16 @@ const WrappedSOLPage: React.FC = () => {
   });
 
   // Token info definitions
-  const solToken: TokenInfo = {
-    address: "11111111111111111111111111111111", // Native SOL program ID
-    symbol: "SOL",
-    decimals: 9,
-    name: "Solana",
-    icon: "https://cryptologos.cc/logos/solana-sol-logo.png", // Using a CDN icon
-  };
-
-  const wsolToken: TokenInfo = {
-    address: "So11111111111111111111111111111111111111112", // wSOL mint address
-    symbol: "wSOL",
-    decimals: 9,
-    name: "Wrapped SOL",
-    icon: "https://cryptologos.cc/logos/solana-sol-logo.png", // Same icon as SOL
-  };
+  const wsolToken: TokenInfo = useMemo(
+    () => ({
+      mint: WSOL_MINT, // wSOL mint address
+      symbol: "wSOL",
+      decimals: 9,
+      name: "Wrapped SOL",
+      iconURL: "https://cryptologos.cc/logos/solana-sol-logo.png", // Same icon as SOL
+    }),
+    [],
+  );
 
   // Calculate available balances
   const solBalance = useMemo(() => {
@@ -75,8 +72,13 @@ const WrappedSOLPage: React.FC = () => {
     if (!wsolTokenAccount) {
       return "0";
     }
-    return formatTokenAmount(wsolTokenAccount.data.amount, 9);
-  }, [wsolTokenAccount]);
+    // Convert the bigint amount to a TokenAmount
+    const tokenAmount = {
+      token: wsolToken,
+      amount: [wsolTokenAccount.data.amount, wsolToken.decimals] as const,
+    };
+    return formatTokenAmount(tokenAmount);
+  }, [wsolTokenAccount, wsolToken]);
 
   // Handle wrap SOL action
   const handleWrapSOL = async (): Promise<void> => {
@@ -87,10 +89,9 @@ const WrappedSOLPage: React.FC = () => {
 
     setIsWrapping(true);
     try {
-      // Convert amount to lamports (1 SOL = 1e9 lamports)
-      const lamportAmount = BigInt(
-        Math.floor(Number.parseFloat(wrapAmount) * 1e9),
-      );
+      // Parse the amount using parseTokenAmount
+      const parsedAmount = parseTokenAmount(wsolToken, wrapAmount);
+      const lamportAmount = parsedAmount.amount[0];
 
       // Get the wrap instructions
       const instructions = await getWrapSOLInstructions(signer, lamportAmount);
@@ -228,7 +229,7 @@ const WrappedSOLPage: React.FC = () => {
           <div className="space-y-2">
             <div className="text-sm font-medium">From</div>
             <InputTokenAmount
-              token={solToken}
+              token={NATIVE_SOL}
               value={wrapAmount}
               onChange={setWrapAmount}
               maxAmount={solBalance}
@@ -249,9 +250,9 @@ const WrappedSOLPage: React.FC = () => {
             <div className="text-sm font-medium">To</div>
             <div className="flex items-center justify-between p-3 rounded-md border bg-muted/30">
               <div className="flex items-center space-x-2">
-                {wsolToken.icon && (
+                {wsolToken.iconURL && (
                   <img
-                    src={wsolToken.icon}
+                    src={wsolToken.iconURL}
                     alt={wsolToken.symbol}
                     className="w-6 h-6 rounded-full"
                     onError={(e) => {

apps/example-dapp/src/types/token.ts

@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "@macalinao/grill-monorepo",
+      "dependencies": {
+        "dnum": "^2.15.0",
+      },
       "devDependencies": {
         "@biomejs/biome": "^2.1.4",
         "@changesets/cli": "^2.29.5",
@@ -124,6 +127,7 @@
         "@macalinao/dataloader-es": "workspace:*",
         "@macalinao/solana-batch-accounts-loader": "workspace:*",
         "@macalinao/token-metadata-client": "workspace:*",
+        "@macalinao/token-utils": "workspace:*",
         "@macalinao/zod-solana": "workspace:*",
         "@solana-program/token": "^0.5.1",
         "@solana/kit": "catalog:",
@@ -204,6 +208,23 @@
         "@solana/kit": "*",
       },
     },
+    "packages/token-utils": {
+      "name": "@macalinao/token-utils",
+      "version": "0.1.0",
+      "dependencies": {
+        "dnum": "^2.15.0",
+      },
+      "devDependencies": {
+        "@macalinao/eslint-config": "catalog:",
+        "@macalinao/tsconfig": "catalog:",
+        "@solana/kit": "catalog:",
+        "@types/bun": "^1.2.19",
+        "typescript": "catalog:",
+      },
+      "peerDependencies": {
+        "@solana/kit": "catalog:",
+      },
+    },
     "packages/wallet-adapter-compat": {
       "name": "@macalinao/wallet-adapter-compat",
       "version": "0.2.4",
@@ -623,6 +644,8 @@
 
     "@macalinao/token-metadata-client": ["@macalinao/token-metadata-client@workspace:packages/token-metadata-client"],
 
+    "@macalinao/token-utils": ["@macalinao/token-utils@workspace:packages/token-utils"],
+
     "@macalinao/tsconfig": ["@macalinao/[email protected]", "", {}, "sha512-pw+l4EiyGQXwffxMQxqvJghLEm5fKGXZ3BAUYyitmkrtyD0D517RwwooSBrjCXP+sl3oefpHzUnZjowYTQd8wg=="],
 
     "@macalinao/wallet-adapter-compat": ["@macalinao/wallet-adapter-compat@workspace:packages/wallet-adapter-compat"],
@@ -1711,6 +1734,8 @@
 
     "dir-glob": ["[email protected]", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],
 
+    "dnum": ["[email protected]", "", { "dependencies": { "from-exponential": "^1.1.1" } }, "sha512-7wyYHrTq32laVKSQSuWsUysCY8kMjFjfgbZmcVECROyeT3yvwF9oaSDFWL1s1s8nAfhhERC04LdtFVbmx8xRWQ=="],
+
     "doctrine": ["[email protected]", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
     "dom-accessibility-api": ["[email protected]", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
@@ -1913,6 +1938,8 @@
 
     "fresh": ["[email protected]", "", {}, "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="],
 
+    "from-exponential": ["[email protected]", "", {}, "sha512-VBE7f5OVnYwdgB3LHa+Qo29h8qVpxhVO9Trlc+AWm+/XNAgks1tAwMFHb33mjeiof77GglsJzeYF7OqXrROP/A=="],
+
     "fs-extra": ["[email protected]", "", { "dependencies": { "graceful-fs": "^4.1.2", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } }, "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw=="],
 
     "fs.realpath": ["[email protected]", "", {}, "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="],

apps/example-dapp/src/utils/format-token-amount.ts

@@ -63,5 +63,8 @@
   "overrides": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
+  },
+  "dependencies": {
+    "dnum": "^2.15.0"
   }
 }

bun.lock

@@ -1,5 +1,7 @@
 # @macalinao/codama-instruction-accounts-dedupe-visitor
 
+[![npm version](https://img.shields.io/npm/v/@macalinao/codama-instruction-accounts-dedupe-visitor.svg)](https://www.npmjs.com/package/@macalinao/codama-instruction-accounts-dedupe-visitor)
+
 Codama visitor for deduplicating and flattening instruction accounts from Anchor IDL. This package helps handle nested account structures in Anchor programs by flattening them into a single-level structure with properly prefixed names.
 
 ## Why This Package Exists

package.json

@@ -1,5 +1,7 @@
 # @macalinao/codama-renderers-js-esm
 
+[![npm version](https://img.shields.io/npm/v/@macalinao/codama-renderers-js-esm.svg)](https://www.npmjs.com/package/@macalinao/codama-renderers-js-esm)
+
 ESM-native TypeScript renderer for [Codama](https://github.com/codama-idl/codama) JavaScript code generation. This package extends `@codama/renderers-js` to produce fully ESM-compatible TypeScript/JavaScript code.
 
 ## Why This Package Exists