Merge pull request #12 from rsksmart/fungibleRskToBtc

Feat:adding fungible rsk to btc cycle

app/api/mint-rune/route.ts

@@ -18,9 +18,6 @@ export async function GET(request: NextRequest) {
         return NextResponse.json(confirmations! > 0, { status: 200 })
     }
   } catch (error) {
-    return NextResponse.json(
-      { error: 'Internal Server Error' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: error }, { status: 500 })
   }
 }

app/utils/schemas/index.ts

@@ -29,7 +29,7 @@ export const formSchemaRuneToBTC = z.object({
     .max(24, {
       message: 'Name cannot exceed 24 characters.',
     }),
-  amount: z.string().min(0, { message: 'Amount is required.' }),
+  amount: z.number().min(0, { message: 'Amount is required.' }),
   address: z
     .string()
     .length(62, { message: 'Address cannot exceed 62 characters.' }),

components/tabs/EtchRunesToRBTC.tsx

@@ -37,6 +37,7 @@ import {
   //@ts-ignore
 } from 'bc-runes-js'
 import { getRequest, postRequest } from '@/app/utils/apiRequests'
+import { ethers } from 'ethers'
 
 export default function EtchRunesToRBTC(): JSX.Element {
   const [updateStatusInterval, setUpdateStatusInterval] =
@@ -53,7 +54,7 @@ export default function EtchRunesToRBTC(): JSX.Element {
     resolver: zodResolver(formSchemaRuneToBTC),
     defaultValues: {
       name: '',
-      amount: '1',
+      amount: '',
       address: '',
     },
   })
@@ -90,6 +91,24 @@ export default function EtchRunesToRBTC(): JSX.Element {
   }, [])
 
   const onSubmit = (data: FormDataRuneToBTC) => {
+    console.log('data on form is', data)
+    console.log('data amount on form is', data.amount)
+    console.log('runeToBTC userbalance is', runeToBTC?.userBalance)
+    console.log(
+      'runeToBTC userbalance parsed is ',
+      ethers.formatUnits(runeToBTC?.userBalance ?? '0', 18)
+    )
+    if (!runeToBTC?.userBalance) {
+      toast.error('No balance found')
+      return
+    }
+    if (
+      Number(data.amount) >
+      Number(ethers.formatUnits(runeToBTC?.userBalance ?? '0', 18))
+    ) {
+      toast.error('Amount is higher than your balance')
+      return
+    }
     processRSKFreeze(data)
   }
   const processRSKFreeze = async (data: FormDataRuneToBTC) => {
@@ -205,60 +224,87 @@ export default function EtchRunesToRBTC(): JSX.Element {
     <Card>
       <CardHeader>
         <CardTitle>Runes to BTC</CardTitle>
-        {/* <CardDescription>runes a new rune.</CardDescription> */}
       </CardHeader>
       <CardContent>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <div className="grid md:grid-cols-2 gap-4">
+            <div className="grid md:grid-cols-1 gap-4">
               <InputField
                 form={form}
                 name="name"
                 placeholder="Enter rune name"
                 tooltip='Name of the rune. e.g. "UNCOMMON•GOODS"'
                 disabled
               />
-              <InputField
-                form={form}
-                name="amount"
-                placeholder="Enter rune amount"
-                tooltip="Amount of the rune."
-                disabled
-              />
             </div>
             <FormField
               control={form.control}
-              name="address"
+              name="amount"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="flex items-center gap-1">
-                    BTC Address
+                    Amount
                     <Tooltip>
                       <TooltipTrigger>
                         <CircleHelp className="w-4 h-4" />
                       </TooltipTrigger>
                       <TooltipContent>
                         <p className="max-w-[200px]">
-                          Enter the Rootstock address where runes will be minted
-                          into ERC20s
+                          Enter the amount of runes you want to send back to BTC
                         </p>
                       </TooltipContent>
                     </Tooltip>
                   </FormLabel>
                   <FormControl>
                     <Input
                       {...field}
-                      placeholder="BTC address"
-                      id="address"
-                      type="text"
+                      placeholder={'Enter rune amount'}
+                      id="amount"
+                      type="number"
+                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
                     />
                   </FormControl>
                   <FormMessage>
-                    {form.formState.errors.address?.message}
+                    {form.formState.errors.amount?.message}
                   </FormMessage>
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="address"
+              render={({ field }) => (
+                <Fragment>
+                  <FormItem>
+                    <FormLabel className="flex items-center gap-1">
+                      BTC Address
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <CircleHelp className="w-4 h-4" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="max-w-[200px]">
+                            Enter the Rootstock address where runes will be
+                            minted into ERC20s
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder="BTC address"
+                        id="address"
+                        type="text"
+                      />
+                    </FormControl>
+                    <FormMessage>
+                      {form.formState.errors.address?.message}
+                    </FormMessage>
+                  </FormItem>
+                </Fragment>
+              )}
+            />
             {loading && (
               <Fragment>
                 <div className="space-y-2">

components/tabs/EtchTab.tsx

@@ -78,6 +78,7 @@ export default function EtchTab({
         setLoading(false)
         return
       }
+      console.log('data of rune is:', data)
       const commitData = await postRequest('/api/etch-rune', {
         name: data.name,
         action: 'commitTx',

components/tabs/RuneItem.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { Button } from '../ui/button'
 import { ROUTER } from '@/constants'
 import { useAuth } from '@/app/context/AuthContext'
+import { ethers } from 'ethers'
 
 function RuneItem({ rune }: { rune: IRune }) {
   const route = useRouter()
@@ -34,7 +35,13 @@ function RuneItem({ rune }: { rune: IRune }) {
       }
     }
   }, [])
+  const formatUnits = (value: string, decimals = 18) => {
+    console.log(value)
 
+    if (value !== '1') {
+      return ethers.formatUnits(value, decimals)
+    }
+  }
   return (
     <div className="flex justify-between items-center border border-input my-3 p-2 h-16 rounded-lg">
       <div className="flex flex-col justify-start items-start h-full">
@@ -52,7 +59,7 @@ function RuneItem({ rune }: { rune: IRune }) {
             ? 'Bridge in progress'
             : Number(rune.userBalance) === 0
               ? 'Locked'
-              : rune.userBalance}
+              : formatUnits(rune.userBalance)}
         </div>
       </div>
       <div className="flex gap-2">

components/tabs/RunesList.tsx

@@ -4,16 +4,18 @@ import { useRuneERC1155 } from '@/app/utils/hooks/useRuneERC1155'
 import { useEffect, useRef } from 'react'
 
 function RunesList() {
-  const { getUserRunes, runes, contract } = useRuneERC1155()
+  const { getUserRunes, runes } = useRuneERC1155()
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
   useEffect(() => {
     fetchRunes()
     intervalRef.current = setInterval(fetchRunes, 30000)
     return () => clearInterval(intervalRef.current!)
-  }, [contract])
+  }, [])
 
   const fetchRunes = async () => {
+    console.log('fetching runes')
+
     await getUserRunes()
   }
   return (

components/ui/InputField.tsx

@@ -17,6 +17,7 @@ type props = {
   placeholder: string
   tooltip: string
   disabled?: boolean
+  userBalance?: string | null | undefined
 }
 
 function InputField({
@@ -26,6 +27,7 @@ function InputField({
   placeholder,
   type = 'text',
   disabled = false,
+  userBalance = null,
 }: props) {
   return (
     <FormField
@@ -49,7 +51,7 @@ function InputField({
           <FormControl>
             <Input
               {...field}
-              placeholder={placeholder}
+              placeholder={userBalance ?? placeholder}
               type={type}
               id={name}
               disabled={disabled}