Merge pull request #814 from Ekep-Obasi/feat/called-getprice-endpoint…

…-on-cost-step

feat: called /getprice to retrive price on cost step

src/components/AddContentModal/BudgetStep/index.tsx

@@ -1,19 +1,38 @@
 import { Button } from '@mui/material'
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import CheckIcon from '~/components/Icons/CheckIcon'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
+import { getPriceData } from '~/network/fetchSourcesData'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors, formatBudget } from '~/utils'
+import { isSource } from '../utils'
 
 type Props = {
   onClick: () => void
   loading: boolean
+  type: string
 }
 
-export const BudgetStep: FC<Props> = ({ onClick, loading }) => {
+export const BudgetStep: FC<Props> = ({ onClick, loading, type }) => {
   const budget = useUserStore((s) => s.budget)
+  const [price, setPrice] = useState<number>(10)
+  const endPoint = isSource(type) ? 'radar' : 'add_node'
+
+  useEffect(() => {
+    const run = async () => {
+      try {
+        const res = await getPriceData(endPoint)
+
+        setPrice(res.data.price)
+      } catch (err) {
+        console.error('cannot fetch', err)
+      }
+    }
+
+    run()
+  }, [endPoint])
 
   return (
     <Flex>
@@ -26,7 +45,7 @@ export const BudgetStep: FC<Props> = ({ onClick, loading }) => {
       <Flex align="center" direction="row" justify="space-between" mb={20}>
         <Cost>
           <div className="title">COST</div>
-          <div className="value">10 sats</div>
+          <div className="value">{price} sats</div>
         </Cost>
         <Budget>
           <div className="title">BUDGET</div>

src/components/AddContentModal/index.tsx

@@ -209,7 +209,7 @@ export const AddContentModal = () => {
               )}
             </>
           )}
-          {currentStep === 2 && <BudgetStep loading={loading} onClick={() => null} />}
+          {currentStep === 2 && <BudgetStep loading={loading} onClick={() => null} type={type} />}
         </form>
       </FormProvider>
     </BaseModal>

src/network/fetchSourcesData/index.ts

@@ -35,6 +35,16 @@ export type TStatParams = {
   num_video: number
 }
 
+export type TPriceParams = {
+  success: string
+  message: string
+  data: {
+    price: number
+    endpoint: string
+    method: string
+  }
+}
+
 export type TMergeTopicsParams = {
   from: string
   to: string
@@ -136,3 +146,9 @@ export const deleteRadarData = async (id: string) => {
 
   return response
 }
+
+export const getPriceData = async (endpoint: string) => {
+  const response = await api.get<TPriceParams>(`/getprice?endpoint=${endpoint}&method=post`)
+
+  return response
+}