Round up MTM while requesting payment

src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
+import Big from 'big.js';
 import BN from 'bn.js';
 
 import WalletHeader from '../components/WalletHeader'
@@ -61,6 +62,19 @@ const Page: React.FC = (): React.ReactElement => {
     }
   }
 
+  const roundUpBN = (bnValue: BN) : BN => {
+    // Divide by 10^6
+    const decimalBN = bnValue.div(new BN (10 ** 6));
+    // Conver to Big decimal
+    const bigValue = new Big(decimalBN.toString())
+    // Ceil the result
+    const ceiledValue = bigValue.add(1);
+    // Convert back to BN
+    const ceiledBN = new BN(ceiledValue.toString());
+    // Multiple by 10^6
+    return ceiledBN.mul(new BN (10 ** 6))
+  }
+
   const handleFluxGeneration = (modelId: string, cost: BN) => {
     return async (prompt: string): Promise<FluxGenerationResult> => {
       const { connected, publicKey, type } = walletState;
@@ -75,7 +89,7 @@ const Page: React.FC = (): React.ReactElement => {
         // Convert cost in USDC to MTM tokens using the price ratio
         const paymentResult = await processMTMPayment(
           publicKey,
-          cost,
+          roundUpBN(cost),
           type
         )