Merge pull request #128 from labscommunity/development

release: bounty feature updates
labscommunity · Jun 18, 2024 · dca5793 · dca5793
2 parents a415651 + 457d4c7
commit dca5793
Show file tree

Hide file tree

Showing 13 changed files with 233 additions and 33 deletions.
diff --git a/src/components/DragonDeploy/ArNSRegister.tsx b/src/components/DragonDeploy/ArNSRegister.tsx
@@ -7,7 +7,14 @@ import * as yup from 'yup'
 
 import { Button } from '@/components/common/buttons'
 import { withAsync } from '@/helpers/withAsync'
-import { getARBalance, getArNSNameFees, getIOBalance, registerArNSName, searchArNSName } from '@/lib/dragondeploy/arns'
+import {
+  formatIOBalance,
+  getARBalance,
+  getArNSNameFees,
+  getIOBalance,
+  registerArNSName,
+  searchArNSName
+} from '@/lib/dragondeploy/arns'
 import { useGlobalStore } from '@/stores/globalStore'
 
 const schema = yup
@@ -143,11 +150,11 @@ export default function ArNSRegister({ closeModal }: ArNSRegisterProps) {
               <h3 className="font-semibold">$IO Test</h3>
               <div className="mt-2">
                 <div className="text-gray-600">Balance</div>
-                <div>{balance.io}</div>
+                <div>{formatIOBalance(balance.io)}</div>
               </div>
               <div className="mt-2">
                 <div className="text-gray-600">Fee</div>
-                <div>{fees.io}</div>
+                <div>{formatIOBalance(fees.io)}</div>
               </div>
             </div>
             <div className="text-right">

diff --git a/src/lib/dragondeploy/arns.ts b/src/lib/dragondeploy/arns.ts
@@ -10,6 +10,7 @@ const warp = WarpFactory.forMainnet(defaultCacheOptions, true).use(new DeployPlu
 
 const REGISTRY = 'bLAgYxAdX2Ry-nt6aH2ixgvJXbpsEYm28NgJgyqfs-U'
 const ANT_SOURCE = 'H2uxnw_oVIEzXeBeYmxDgJuxPqwBCGPO4OmQzdWQu3U'
+const IO_DECIMALS = 6
 
 const arweave = new Arweave({
   host: 'ar-io.net',
@@ -113,6 +114,10 @@ export async function updateArNSDomain({
   return { success: true, id: result.originalTxId, message: 'Successfully updated domain' }
 }
 
+export function formatIOBalance(balance: number) {
+  return (balance / Math.pow(10, IO_DECIMALS)).toFixed(3)
+}
+
 export async function getIOBalance(owner: string) {
   const response = await fetch(`https://api.arns.app/v1/contract/${REGISTRY}/balances/${owner}`)
   return +((await response.json())?.balance ?? 0).toFixed(2)

diff --git a/src/pages/issue/read/tabs/bounty/BountyRow.tsx b/src/pages/issue/read/tabs/bounty/BountyRow.tsx
@@ -1,10 +1,10 @@
-import { differenceInDays, formatDistanceToNow } from 'date-fns'
+import { differenceInDays, formatDistanceToNow, startOfToday } from 'date-fns'
 import { TbMoneybag } from 'react-icons/tb'
 import SVG from 'react-inlinesvg'
 
 import ArweaveLogo from '@/assets/arweave.svg'
 import { resolveUsernameOrShorten } from '@/helpers/resolveUsername'
-import { BountyStatus } from '@/types/repository'
+import { BountyBase, BountyStatus } from '@/types/repository'
 
 type Props = {
   status: BountyStatus
@@ -13,6 +13,7 @@ type Props = {
   author: string
   timestamp: number
   expiry: number
+  base: BountyBase
   onClick: () => void
 }
 
@@ -30,10 +31,11 @@ const STATUS_TO_TEXT = {
   CLAIMED: 'been completed'
 }
 
-export default function BountyRow({ status, author, id, amount, expiry, timestamp, onClick }: Props) {
+export default function BountyRow({ status, author, id, amount, expiry, timestamp, onClick, base }: Props) {
   const Icon = STATUS_TO_ICON_MAP[status]
 
   const isActive = status === 'ACTIVE'
+
   return (
     <div
       onClick={onClick}
@@ -45,7 +47,9 @@ export default function BountyRow({ status, author, id, amount, expiry, timestam
           src={ArweaveLogo}
           className="w-5 h-5 [&>circle]:stroke-gray-900 [&>circle]:stroke-[2.5] [&>circle]:fill-none [&>path]:fill-gray-900"
         />
-        <span className="font-medium text-lg">{amount.toFixed(2)} AR</span>
+        <span className="font-medium text-lg">
+          {amount.toFixed(2)} {base}
+        </span>
       </div>
       <div className="flex gap-3 text-gray-900">
         <span className="font-semibold">Reward#{id}</span>
@@ -54,7 +58,7 @@ export default function BountyRow({ status, author, id, amount, expiry, timestam
         {expiry && isActive && (
           <>
             and expires in
-            <span className="font-medium">{differenceInDays(new Date(expiry * 1000), new Date())} Days</span>
+            <span className="font-medium">{differenceInDays(new Date(expiry * 1000), startOfToday())} Days</span>
           </>
         )}
         {expiry && !isActive && <>and has {STATUS_TO_TEXT[status]}!</>}

diff --git a/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx b/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
@@ -11,6 +11,7 @@ import ArweaveLogo from '@/assets/arweave.svg'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
 import { useGlobalStore } from '@/stores/globalStore'
+import { BountyBase } from '@/types/repository'
 
 type NewBountyModalProps = {
   setIsOpen: (val: boolean) => void
@@ -33,6 +34,7 @@ const schema = yup
   .required()
 
 export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProps) {
+  const [base, setBase] = React.useState<BountyBase>('AR')
   const { issueId } = useParams()
   const [addBounty] = useGlobalStore((state) => [state.issuesActions.addBounty])
   const [isSubmitting, setIsSubmitting] = React.useState(false)
@@ -49,7 +51,7 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
 
     const unixTimestampOfExpiry = Math.floor(data.expiry.getTime() / 1000)
 
-    await addBounty(+issueId!, data.amount, unixTimestampOfExpiry)
+    await addBounty(+issueId!, data.amount, unixTimestampOfExpiry, base)
 
     setIsSubmitting(false)
 
@@ -60,6 +62,10 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
     setIsOpen(false)
   }
 
+  function handleBaseChange(newBase: BountyBase) {
+    setBase(newBase)
+  }
+
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={closeModal}>
@@ -106,6 +112,37 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
                       <span>Arweave</span>
                     </div>
                   </div>
+                  <div className="mt-2">
+                    <label htmlFor="amount" className="block mb-1 text-sm font-medium text-gray-600">
+                      Base
+                    </label>
+                    <div className="flex items-center p-1 bg-gray-100 border-[1px] border-gray-300 rounded-lg gap-1 h-10 order-1">
+                      <div
+                        onClick={() => handleBaseChange('AR')}
+                        className={clsx(
+                          'cursor-pointer text-gray-700 w-1/2 h-full flex items-center justify-center font-semibold',
+                          {
+                            'px-2': base !== 'AR',
+                            'px-3 bg-primary-600 text-white rounded-md': base === 'AR'
+                          }
+                        )}
+                      >
+                        AR
+                      </div>
+                      <div
+                        onClick={() => handleBaseChange('USD')}
+                        className={clsx(
+                          'cursor-pointer text-gray-700  w-1/2 h-full flex items-center justify-center font-semibold',
+                          {
+                            'px-2': base === 'AR',
+                            'px-3 bg-primary-600 text-white rounded-md': base !== 'AR'
+                          }
+                        )}
+                      >
+                        USD
+                      </div>
+                    </div>
+                  </div>
                   <div className="mt-2">
                     <label htmlFor="amount" className="block mb-1 text-sm font-medium text-gray-600">
                       Amount
@@ -123,7 +160,7 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
                         min={'0'}
                       />
                       <div className="h-full absolute right-4 top-0 flex items-center">
-                        <span className="font-medium text-gray-600">AR</span>
+                        <span className="font-medium text-gray-600">{base}</span>
                       </div>
                     </div>
                     {errors.amount && <p className="text-red-500 text-sm italic mt-2">{errors.amount.message}</p>}