Skip to content

Commit

Permalink
feat(voucher): adding platform fees
Browse files Browse the repository at this point in the history
  • Loading branch information
siddhart1o1 committed May 16, 2024
1 parent 4d4291b commit 9120b77
Show file tree
Hide file tree
Showing 10 changed files with 270 additions and 169 deletions.
136 changes: 136 additions & 0 deletions apps/voucher/app/create/client-side-page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
"use client"
import { useEffect, useState } from "react"

import { gql } from "@apollo/client"

import { useSession } from "next-auth/react"

import CreatePageAmount from "@/components/create/create-page-amount"
import CreatePagePercentage from "@/components/create/create-page-percentage"
import { getWalletDetails } from "@/utils/helpers"
import ConfirmModal from "@/components/create/confirm-modal"
import { useCurrency } from "@/context/currency-context"
import { useCurrencyConversionEstimationQuery } from "@/lib/graphql/generated"
import { amountCalculator } from "@/lib/amount-calculator"
import { convertCurrency } from "@/lib/utils"

gql`
mutation CreateWithdrawLink($input: CreateWithdrawLinkInput!) {
createWithdrawLink(input: $input) {
commissionPercentage
createdAt
id
identifierCode
salesAmountInCents
status
uniqueHash
userId
voucherAmountInCents
voucherSecret
paidAt
}
}
`

gql`
query CurrencyConversionEstimation($amount: Float!, $currency: DisplayCurrency!) {
currencyConversionEstimation(amount: $amount, currency: $currency) {
btcSatAmount
id
usdCentAmount
timestamp
}
}
`

type Props = {
platformFeesInPpm: number
}

export default function CreatePage({ platformFeesInPpm }: Props) {
const session = useSession()
const { currency } = useCurrency()

const storedCommission =
typeof window !== "undefined" ? localStorage.getItem("commission") : null
const [commissionPercentage, setCommissionPercentage] = useState<string>(
storedCommission || "0",
)

const [amount, setAmount] = useState<string>("0")
const [confirmModal, setConfirmModal] = useState<boolean>(false)
const [currentPage, setCurrentPage] = useState<string>("AMOUNT")

const { data: currencyConversion, refetch } = useCurrencyConversionEstimationQuery({
variables: { amount: Number(amount), currency },
context: { endpoint: "GALOY" },
pollInterval: 60000,
})

useEffect(() => {
refetch({ amount: Number(amount), currency })
}, [amount, currency, refetch])

const voucherAmountInCents =
amountCalculator.voucherAmountAfterPlatformFeesAndCommission({
voucherPrice: currencyConversion?.currencyConversionEstimation.usdCentAmount,
commissionPercentage: Number(commissionPercentage),
platformFeesInPpm,
})

const voucherAmountInDollars = convertCurrency.centsToUsd({
cents: voucherAmountInCents,
})

if (!session?.data?.userData?.me?.defaultAccount.wallets) {
return null
}

const { btcWallet, usdWallet } = getWalletDetails({
wallets: session?.data?.userData?.me?.defaultAccount?.wallets,
})

if (!btcWallet || !usdWallet) {
return null
}

if (currentPage === "AMOUNT") {
return (
<div className="top_page_container">
<ConfirmModal
open={confirmModal}
onClose={() => setConfirmModal(false)}
amount={amount}
currency={currency}
commissionPercentage={commissionPercentage}
btcWallet={btcWallet}
usdWallet={usdWallet}
platformFeesInPpm={platformFeesInPpm}
voucherAmountInDollars={voucherAmountInDollars}
/>

<CreatePageAmount
amount={amount}
currency={currency}
setAmount={setAmount}
setCurrentPage={setCurrentPage}
setConfirmModal={setConfirmModal}
commissionPercentage={commissionPercentage}
voucherAmountInDollars={voucherAmountInDollars}
/>
</div>
)
} else {
return (
<>
<div className="top_page_container">
<CreatePagePercentage
commissionPercentage={commissionPercentage}
setCommissionPercentage={setCommissionPercentage}
setCurrentPage={setCurrentPage}
/>
</div>
</>
)
}
}
107 changes: 5 additions & 102 deletions apps/voucher/app/create/page.tsx
Original file line number Diff line number Diff line change
@@ -1,105 +1,8 @@
"use client"
import { useState } from "react"
import CreatePage from "@/app/create/client-side-page"
import { env } from "@/env"

import { gql } from "@apollo/client"
export default function Page() {
const platformFeesInPpm = env.PLATFORM_FEES_IN_PPM

import { useSession } from "next-auth/react"

import CreatePageAmount from "@/components/create/create-page-amount"
import CreatePagePercentage from "@/components/create/create-page-percentage"
import { getWalletDetails } from "@/utils/helpers"
import ConfirmModal from "@/components/create/confirm-modal"
import { useCurrency } from "@/context/currency-context"

gql`
mutation CreateWithdrawLink($input: CreateWithdrawLinkInput!) {
createWithdrawLink(input: $input) {
commissionPercentage
createdAt
id
identifierCode
salesAmountInCents
status
uniqueHash
userId
voucherAmountInCents
voucherSecret
paidAt
}
}
`

gql`
query CurrencyConversionEstimation($amount: Float!, $currency: DisplayCurrency!) {
currencyConversionEstimation(amount: $amount, currency: $currency) {
btcSatAmount
id
usdCentAmount
timestamp
}
}
`

export default function CreatePage() {
const session = useSession()
const { currency } = useCurrency()
const storedCommission =
typeof window !== "undefined" ? localStorage.getItem("commission") : null

const [commissionPercentage, setCommissionPercentage] = useState<string>(
storedCommission || "0",
)

const [amount, setAmount] = useState<string>("0")
const [confirmModal, setConfirmModal] = useState<boolean>(false)
const [currentPage, setCurrentPage] = useState<string>("AMOUNT")

if (!session?.data?.userData?.me?.defaultAccount.wallets) {
return null
}

const { btcWallet, usdWallet } = getWalletDetails({
wallets: session?.data?.userData?.me?.defaultAccount?.wallets,
})

if (!btcWallet || !usdWallet) {
return null
}

if (currentPage === "AMOUNT") {
return (
<div className="top_page_container">
<ConfirmModal
open={confirmModal}
onClose={() => setConfirmModal(false)}
amount={amount}
currency={currency}
commissionPercentage={commissionPercentage}
btcWallet={btcWallet}
usdWallet={usdWallet}
/>

<CreatePageAmount
amount={amount}
currency={currency}
setAmount={setAmount}
setCurrentPage={setCurrentPage}
setConfirmModal={setConfirmModal}
commissionPercentage={commissionPercentage}
/>
</div>
)
} else {
return (
<>
<div className="top_page_container">
<CreatePagePercentage
commissionPercentage={commissionPercentage}
setCommissionPercentage={setCommissionPercentage}
setCurrentPage={setCurrentPage}
/>
</div>
</>
)
}
return <CreatePage platformFeesInPpm={platformFeesInPpm} />
}
73 changes: 39 additions & 34 deletions apps/voucher/components/create/confirm-modal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, MouseEvent, useEffect } from "react"
import React, { useState, MouseEvent } from "react"

import { useRouter } from "next/navigation"

Expand All @@ -8,13 +8,14 @@ import styles from "./confirm-modal.module.css"

import Button from "@/components/button"
import ModalComponent from "@/components/modal-component"
import { calculateAmountAfterCommission, WalletDetails } from "@/utils/helpers"
import { WalletDetails } from "@/utils/helpers"
import {
useCreateWithdrawLinkMutation,
useCurrencyConversionEstimationQuery,
} from "@/lib/graphql/generated"
import LoadingComponent from "@/components/loading/loading-component"
import { formatCurrency } from "@/lib/utils"
import { convertPpmToPercentage, formatCurrency } from "@/lib/utils"
import { amountCalculator } from "@/lib/amount-calculator"

type Props = {
open: boolean
Expand All @@ -24,16 +25,8 @@ type Props = {
commissionPercentage: string
btcWallet: WalletDetails
usdWallet: WalletDetails
}

const calculateProfitAmount = ({
amount,
commissionRatePercentage,
}: {
amount: number
commissionRatePercentage: number
}) => {
return (amount * commissionRatePercentage) / 100
platformFeesInPpm: number
voucherAmountInDollars: number
}

const ConfirmModal = ({
Expand All @@ -44,6 +37,8 @@ const ConfirmModal = ({
commissionPercentage,
btcWallet,
usdWallet,
platformFeesInPpm,
voucherAmountInDollars,
}: Props) => {
const router = useRouter()
const { update } = useSession()
Expand All @@ -56,36 +51,29 @@ const ConfirmModal = ({
const [createWithdrawLink, { loading: withdrawLinkLoading }] =
useCreateWithdrawLinkMutation()

const { data: currencyConversion, refetch } = useCurrencyConversionEstimationQuery({
variables: { amount: Number(amount), currency },
context: { endpoint: "GALOY" },
pollInterval: 60000,
})

const { data: currencyDataForOneUnit } = useCurrencyConversionEstimationQuery({
variables: { amount: 1, currency },
context: { endpoint: "GALOY" },
})

useEffect(() => {
refetch({ amount: Number(amount), currency })
}, [amount, currency, refetch])
const profitAmount = amountCalculator.profitAmount({
voucherPrice: Number(amount),
commissionPercentage: Number(commissionPercentage),
})

const usdToCurrencyRate = Number(
currencyDataForOneUnit?.currencyConversionEstimation.usdCentAmount / 100,
)
const profitAmount = calculateProfitAmount({
amount: Number(amount),
commissionRatePercentage: Number(commissionPercentage),
})

const amountInDollars = Number(
(currencyConversion?.currencyConversionEstimation.usdCentAmount / 100).toFixed(2),
)
const platformFeesInPercentage = convertPpmToPercentage({ ppm: platformFeesInPpm })
const platformFeesAmount = amountCalculator.profitAmount({
voucherPrice: Number(amount),
commissionPercentage: platformFeesInPercentage,
})

const voucherAmountInDollars = calculateAmountAfterCommission({
amount: amountInDollars,
commissionRatePercentage: Number(commissionPercentage),
const totalPaying = amountCalculator.voucherAmountAfterCommission({
voucherPrice: Number(amount),
commissionPercentage: Number(commissionPercentage),
})

const handleSubmit = async ({
Expand Down Expand Up @@ -145,12 +133,14 @@ const ConfirmModal = ({
<div>
<h3 className={styles.modalSubtitle}>Price</h3>
<p className={styles.modalText}>
{formatCurrency({ amount: Number(amount), currency })}
{formatCurrency({ amount: Number(amount), currency })} {currency}
</p>
</div>
<div>
<h3 className={`${styles.modalSubtitle} text-right`}>Value</h3>
<p className={styles.modalText}>{Number(voucherAmountInDollars)} US Dollar</p>
<p className={styles.modalText}>
{formatCurrency({ amount: Number(voucherAmountInDollars), currency })} USD
</p>
</div>
</div>
<div className="flex justify-between w-full">
Expand Down Expand Up @@ -181,6 +171,21 @@ const ConfirmModal = ({
)}
</div>
</div>
<div className="flex justify-between w-full">
<div>
<h3 className={styles.modalSubtitle}>Total Paying</h3>
<p className={styles.modalText}>
{formatCurrency({ amount: totalPaying, currency })} {currency}
</p>
</div>
<div>
<h3 className={`${styles.modalSubtitle} text-right`}>Platform fees</h3>
<p className={`${styles.modalText} text-right`}>
{platformFeesInPercentage}% (
{formatCurrency({ amount: platformFeesAmount, currency })} {currency})
</p>
</div>
</div>
<div>
<h3 className={styles.modalSubtitle}>Paying Wallet</h3>
<select
Expand Down
Loading

0 comments on commit 9120b77

Please sign in to comment.