Skip to content

Commit

Permalink
Update liquidity pool page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Peixer
Peixer committed Jan 20, 2024
1 parent 1341c60 commit f5c001e
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 35 deletions.
3 changes: 3 additions & 0 deletions contracts/src/zkramp/zkramp.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,9 @@ mod zkramp {
let mut order = self.orders.get(order_claim.order_index).unwrap();
order.status = OrderStatus::Filled;
self.orders.insert(order_claim.order_index, &order);

// Transfer the funds to the buyer
// Release the funds to the seller
}

Ok(())
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/app/components/home-top-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Link from 'next/link'
import { FC } from 'react'

import { Bars3Icon } from '@heroicons/react/24/outline'
import { HiOutlineExternalLink } from 'react-icons/hi'

import { Button } from '../../components/ui/button'

Expand All @@ -19,7 +18,10 @@ export const HomeTopBar: FC = () => {
<header className="absolute inset-x-0 top-0 z-50 inline-flex h-16 w-full items-center justify-between bg-zinc-900 px-4 shadow md:px-32">
<div className="flex items-center gap-6">
<Bars3Icon className="h-6 w-6 text-zinc-400 md:hidden" />
<img src="/vectors/logo.svg" alt="logo" className="h-8 w-auto" />
<a href="/">
<img src="/vectors/logo.svg" alt="logo" className="h-8 w-auto" />
</a>

<nav className="hidden gap-6 md:flex">
{navigation.map(({ name, href }) => (
<Link key={name} href={href}>
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/components/ui/badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@

export default function Badge({ children }: { children: string }) {
return <div className="w-[57px] h-5 px-2.5 py-0.5 bg-emerald-100 rounded-[10px] justify-center items-center inline-flex">
<span className="text-center text-emerald-800 text-xs font-medium font-inter leading-none">Badge</span>
return (
<div className="inline-flex h-5 w-full items-center justify-center rounded-[10px] bg-emerald-100 px-2.5 py-0.5">
<span className="text-center font-inter text-xs font-medium leading-none text-emerald-800">
{children}
</span>
</div>
};
)
}
142 changes: 113 additions & 29 deletions frontend/src/components/ui/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,153 @@
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import Badge from './badge'
import { useEffect, useState } from 'react'

import { ContractIds } from '@/deployments/deployments'
import {
contractQuery,
decodeOutput,
useInkathon,
useRegisteredContract,
} from '@scio-labs/use-inkathon'

// dummy data
const data = [
{ index: 1, token: 'AZERO', depositor: 'fx45xj....98s72', exchange: '-0.3%', depositAmount: 1.000, status: "Badge" },
{ index: 2, token: 'AZERO', depositor: 'e3r4xj....98s72', exchange: '0.34%', depositAmount: 2.000, status: "Badge" },
{ index: 3, token: 'AZERO', depositor: 'fx45xj....98s72', exchange: '-0.3%', depositAmount: 1.000, status: "Badge" },
{ index: 4, token: 'AZERO', depositor: 'e3r4xj....98s72', exchange: '0.34%', depositAmount: 2.000, status: "Badge" },
{ index: 5, token: 'AZERO', depositor: 'fx45xj....98s72', exchange: '-0.3%', depositAmount: 1.000, status: "Badge" },
{ index: 6, token: 'AZERO', depositor: 'e3r4xj....98s72', exchange: '0.34%', depositAmount: 2.000, status: "Badge" },
{ index: 7, token: 'AZERO', depositor: 'fx45xj....98s72', exchange: '-0.3%', depositAmount: 1.000, status: "Badge" },
]
import Badge from './badge'

export default function Table() {
const { api } = useInkathon()
const { contract } = useRegisteredContract(ContractIds.zkramp)
const [orders, setOrders] = useState<any>([])
const [claimOrders, setClaimOrders] = useState<any>([])

const fetchAllOrders = async () => {
if (!contract || !api) return

const result = await contractQuery(api, '', contract, 'get_all_orders')
const { output, isError, decodedOutput } = decodeOutput(result, contract, 'get_all_orders')
if (isError) throw new Error(decodedOutput)

setOrders(output)
}

const fetchAllClaimOrders = async () => {
if (!contract || !api) return

const result = await contractQuery(api, '', contract, 'get_all_orders_claim')
const { output, isError, decodedOutput } = decodeOutput(
result,
contract,
'get_all_orders_claim',
)
if (isError) throw new Error(decodedOutput)
setClaimOrders(output)
}

useEffect(() => {
fetchAllOrders()
fetchAllClaimOrders()
}, [contract, api])

const getStatus = (order: any): string => {
const claimedOrder = claimOrders.filter((claimOrder: any) => {
return claimOrder.orderIndex == order.id && claimOrder.status != 'Canceled'
})

if (claimedOrder.length > 0) {
return claimedOrder[0].status
}

return order.status
}

const convertStatus = (status: string): string => {
switch (status) {
case 'Open':
return 'Open'
case 'WaitingForBuyerProof':
return 'Pending Buyer'
case 'WaitingForSellerProof':
return 'Pending Seller'
case 'Filled':
return 'Filled'
case 'Canceled':
return 'Canceled'
default:
return 'Unknown'
}
}

return (
<div className="w-full">
<div className="flow-root">
<div className="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table className="min-w-full border-spacing-x-10 divide-y table-fixed divide-gray-300">
<thead className='bg-surfaceHover'>
<table className="min-w-full table-fixed border-spacing-x-10 divide-y divide-gray-300">
<thead className="bg-surfaceHover">
<tr>
<th scope="col" className="whitespace-pre py-3 pl-4 pr-3 text-left text-sm font-medium text-subtlest">
<th
scope="col"
className="whitespace-pre py-3 pl-4 pr-3 text-left text-sm font-medium text-subtlest"
>
<a href="#" className="group inline-flex">
#
</a>
</th>
<th scope="col" className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest">
<th
scope="col"
className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest"
>
<a href="#" className="group inline-flex">
Token
</a>
</th>
<th scope="col" className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest">
<th
scope="col"
className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest"
>
<a href="#" className="group inline-flex">
Depositor
</a>
</th>
<th scope="col" className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest">
<th
scope="col"
className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest"
>
<a href="#" className="group inline-flex">
Exchange
</a>
</th>
<th scope="col" className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest">
<th
scope="col"
className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest"
>
<a href="#" className="group inline-flex">
Deposit Amount
</a>
</th>
<th scope="col" className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest">
<th
scope="col"
className="whitespace-pre px-6 py-3 text-left text-sm font-medium text-subtlest"
>
<a href="#" className="group inline-flex">
Status
</a>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-surface2">
{data.map((person) => (
<tr key={person.depositor}>
{orders.map((order: any, index: any) => (
<tr key={order.depositor}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-subtlest">
{person.index}
{order.id}
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">AZERO</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">
{order.owner}
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">-0.3%</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">
{order.amountToReceive}
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">
<Badge>{convertStatus(getStatus(order))}</Badge>
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">{person.token}</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">{person.depositor}</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">{person.exchange}</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest">{person.depositAmount}</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-subtlest"><Badge>{person.status}</Badge></td>
</tr>
))}
</tbody>
Expand All @@ -73,4 +157,4 @@ export default function Table() {
</div>
</div>
)
}
}

0 comments on commit f5c001e

Please sign in to comment.