Display decimals in UI

.env.example

@@ -4,3 +4,4 @@ NEXT_PUBLIC_MTM_TOKEN_MINT=97RggLo3zV5kFGYW4yoQTxr4Xkz4Vg2WPHzNYXXWpump
 NEXT_PUBLIC_PAYMENT_RECEIVER_ADDRESS=FFDx3SdAEeXrp6BTmStB4BDHpctGsaasZq4FFcowRobY
 NEXT_PUBLIC_SOLANA_RPC_URL=https://young-radial-orb.solana-mainnet.quiknode.pro/67612b364664616c29514e551bf5de38447ca3d4
 NEXT_PUBLIC_SOLANA_WEBSOCKET_URL=wss://young-radial-orb.solana-mainnet.quiknode.pro/67612b364664616c29514e551bf5de38447ca3d4
+NEXT_PUBLIC_USDC_MINT=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v

package-lock.json

@@ -21,6 +21,7 @@
         "typeorm": "^0.3.12"
       },
       "devDependencies": {
+        "@types/bn.js": "^5.1.6",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -791,6 +792,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@types/bn.js": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.6.tgz",
+      "integrity": "sha512-Xh8vSwUeMKeYYrj3cX4lGQgFSF/N03r+tv4AiLl1SucqV+uTQpxRcnM8AkXKHwYP9ZPXOYXRr2KPXpVlIvqh9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",

src/app/page.tsx

@@ -121,7 +121,7 @@ const Page: React.FC = (): React.ReactElement => {
           {FLUX_MODELS.map((model) => {
             // Convert cost from number to BN
             const costBN = new BN(model.cost * 100);
-            const mtmPriceBN = costBN.mul(MTMFor1USDC);
+            const mtmPriceBN = costBN.mul(MTMFor1USDC).div(new BN(100));
 
             return (
               <AIServiceCard
@@ -132,9 +132,9 @@ const Page: React.FC = (): React.ReactElement => {
                 onGenerate={handleFluxGeneration(
                   model.modelId,
                   // Calculate scaled cost directly in bn.js
-                  mtmPriceBN.div(new BN(100))
+                  mtmPriceBN
                 )}
-                mtmPrice={mtmPriceBN.div(new BN(100))}
+                mtmPrice={mtmPriceBN}
               />
             );
           })}

src/components/AIServiceCard.tsx

@@ -18,6 +18,13 @@ interface GenerationState {
   error: string | null
 }
 
+const formatBNWithDecimals = (value: BN, decimals: number): string => {
+  const quotient = value.div(new BN(10).pow(new BN(decimals)));
+  const remainder = value.mod(new BN(10).pow(new BN(decimals)));
+  const decimalPart = remainder.mul(new BN(10).pow(new BN(6))).div(new BN(10).pow(new BN(decimals)));
+  return `${quotient.toString()}.${decimalPart.toString().padStart(6, '0')}`;
+}
+
 const AIServiceCard: React.FC<AIServiceCardProps> = ({
   title,
   description,
@@ -82,7 +89,7 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
           </h2>
           <p className="text-gray-400 mt-2">{description}</p>
           <div className="mt-2 inline-block px-3 py-1 bg-green-500/20 rounded-full text-green-300 text-sm">
-            Cost: {mtmPrice ? mtmPrice.div(new BN(10).pow(new BN(6))).toString() : '...'} MTM
+            Cost: {mtmPrice ? formatBNWithDecimals(mtmPrice, 6) : '...'} MTM
           </div>
         </div>
 
@@ -106,7 +113,7 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
                      transition-all duration-200 shadow-lg hover:shadow-green-500/25
                      disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
           >
-            {generationState.loading ? 'Processing...' : `Pay ${mtmPrice ? mtmPrice.div(new BN(10).pow(new BN(6))).toString() : '...'} MTM & Generate`}
+            {generationState.loading ? 'Processing...' : `Pay ${mtmPrice ? formatBNWithDecimals(mtmPrice, 6) : '...'} MTM & Generate`}
           </button>
         </div>
 

src/services/paymentService.ts

@@ -145,15 +145,14 @@ export async function processMTMPayment(
       )
     }
 
-    const tokens = tokenAmount.div(new BN(10).pow(new BN(6)));
+    const amountToSend = BigInt(tokenAmount.toString());
 
-    console.log('TA:', tokenAmount.toString())
     transaction.add(
       createTransferInstruction(
         senderATA,
         receiverATA,
         senderPublicKey,
-        tokens.mul(new BN(10).pow(new BN(6)))
+        amountToSend
       )
     )
 

src/utils/verifyPayment.ts

@@ -77,6 +77,8 @@ export async function verifyPayment(
     console.log('Transfer amount:', amount);
 
     const transactionAmount = new BN(amount);
+
+    // Transaction amount should be within 10% of the expected amount
     const lowerBound = expectedAmount.mul(new BN(9)).div(new BN(10));
     const upperBound = expectedAmount.mul(new BN(11)).div(new BN(10));
 
@@ -86,7 +88,7 @@ export async function verifyPayment(
       return true;
     }
     console.log('Transaction amount is not within the expected range.');
-    // TODO: Handle difference between paid amount and token price during verification being greater than 10%
+    // TODO: Handle spillage being greater than 10%
     return false;
   } catch (error) {
     console.error('Verification error:', error);