From 5523939ff02928fde2f0d79e030517508ef55f4b Mon Sep 17 00:00:00 2001 From: Adw8 Date: Tue, 28 Jan 2025 19:18:13 +0530 Subject: [PATCH] Display decimals in UI --- .env.example | 1 + package-lock.json | 11 +++++++++++ src/app/page.tsx | 6 +++--- src/components/AIServiceCard.tsx | 11 +++++++++-- src/services/paymentService.ts | 5 ++--- src/utils/verifyPayment.ts | 4 +++- 6 files changed, 29 insertions(+), 9 deletions(-) diff --git a/.env.example b/.env.example index 9caa6f0..06f74b9 100644 --- a/.env.example +++ b/.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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e12ba2b..d9269ca 100644 --- a/package-lock.json +++ b/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", diff --git a/src/app/page.tsx b/src/app/page.tsx index 88e94c2..fe8278c 100644 --- a/src/app/page.tsx +++ b/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 ( { 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} /> ); })} diff --git a/src/components/AIServiceCard.tsx b/src/components/AIServiceCard.tsx index 2745663..68c2a2e 100644 --- a/src/components/AIServiceCard.tsx +++ b/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 = ({ title, description, @@ -82,7 +89,7 @@ const AIServiceCard: React.FC = ({

{description}

- Cost: {mtmPrice ? mtmPrice.div(new BN(10).pow(new BN(6))).toString() : '...'} MTM + Cost: {mtmPrice ? formatBNWithDecimals(mtmPrice, 6) : '...'} MTM
@@ -106,7 +113,7 @@ const AIServiceCard: React.FC = ({ 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`} diff --git a/src/services/paymentService.ts b/src/services/paymentService.ts index b9eeb95..6660895 100644 --- a/src/services/paymentService.ts +++ b/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 ) ) diff --git a/src/utils/verifyPayment.ts b/src/utils/verifyPayment.ts index 19547d3..c2dd89a 100644 --- a/src/utils/verifyPayment.ts +++ b/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);