Skip to content

Commit e55a3bb

Browse files
guibescoscctdaniel
guibescos
and
cctdaniel
authored
[xc-admin] rework pyth hook (#490)
* Rework pyth hooks * Delete unused files * Checkpoint * xc admin/add min pub page (#492) * add min pubs page * add wallet * update connect wallet button * fix header * add ClusterSwitch * fix header css * Cleanup Co-authored-by: Daniel Chew <cctdaniel@outlook.com>
1 parent b05845e commit e55a3bb

File tree

19 files changed

+26363
-17744
lines changed

19 files changed

+26363
-17744
lines changed

‎governance/xc-admin/package-lock.json

Lines changed: 25827 additions & 17002 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎governance/xc-admin/packages/xc-admin-frontend/components/ClusterSwitch.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { Menu, Transition } from '@headlessui/react'
2+
import { useRouter } from 'next/router'
3+
import { Fragment, useCallback, useContext, useEffect } from 'react'
4+
import { ClusterContext, DEFAULT_CLUSTER } from '../contexts/ClusterContext'
5+
import Arrow from '../images/icons/down.inline.svg'
6+
7+
const ClusterSwitch = ({ light }: { light?: boolean | null }) => {
8+
const router = useRouter()
9+
10+
const { cluster, setCluster } = useContext(ClusterContext)
11+
const handleChange = useCallback(
12+
(event: any) => {
13+
if (event.target.value) {
14+
router.query.cluster = event.target.value
15+
setCluster(event.target.value)
16+
router.push(
17+
{
18+
pathname: router.pathname,
19+
query: router.query,
20+
},
21+
undefined,
22+
{ scroll: false }
23+
)
24+
}
25+
},
26+
[setCluster, router]
27+
)
28+
29+
useEffect(() => {
30+
router.query && router.query.cluster
31+
? setCluster(router.query.cluster)
32+
: setCluster(DEFAULT_CLUSTER)
33+
}, [setCluster, router])
34+
35+
const clusters = [
36+
{
37+
value: 'pythnet',
38+
name: 'pythnet',
39+
},
40+
{
41+
value: 'mainnet-beta',
42+
name: 'mainnet-beta',
43+
},
44+
{
45+
value: 'testnet',
46+
name: 'testnet',
47+
},
48+
{
49+
value: 'devnet',
50+
name: 'devnet',
51+
},
52+
// hide pythtest as its broken
53+
// {
54+
// value: 'pythtest',
55+
// name: 'pythtest',
56+
// },
57+
]
58+
59+
return (
60+
<Menu as="div" className="relative z-[2] block w-[180px] text-left">
61+
{({ open }) => (
62+
<>
63+
<Menu.Button
64+
className={`inline-flex w-full items-center justify-between py-3 px-6 text-sm outline-0 ${
65+
light ? 'bg-beige2' : 'bg-darkGray2'
66+
}`}
67+
>
68+
<span className="mr-3">{cluster}</span>
69+
<Arrow className={`${open && 'rotate-180'}`} />
70+
</Menu.Button>
71+
<Transition
72+
as={Fragment}
73+
enter="transition ease-out duration-100"
74+
enterFrom="transform opacity-0 scale-95"
75+
enterTo="transform opacity-100 scale-100"
76+
leave="transition ease-in duration-75"
77+
leaveFrom="transform opacity-100 scale-100"
78+
leaveTo="transform opacity-0 scale-95"
79+
>
80+
<Menu.Items className="absolute right-0 mt-2 w-full origin-top-right">
81+
{clusters.map((c) => (
82+
<Menu.Item key={c.name}>
83+
<button
84+
className={`block w-full py-3 px-6 text-left text-sm ${
85+
light
86+
? 'bg-beige2 hover:bg-beige3'
87+
: 'bg-darkGray hover:bg-darkGray2'
88+
} `}
89+
value={c.value}
90+
onClick={handleChange}
91+
>
92+
{c.name}
93+
</button>
94+
</Menu.Item>
95+
))}
96+
</Menu.Items>
97+
</Transition>
98+
</>
99+
)}
100+
</Menu>
101+
)
102+
}
103+
104+
export default ClusterSwitch

‎governance/xc-admin/packages/xc-admin-frontend/components/Main.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎governance/xc-admin/packages/xc-admin-frontend/components/MinPublishers.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { usePythContext } from '../contexts/PythContext'
2+
import ClusterSwitch from './ClusterSwitch'
3+
import Loadbar from './loaders/Loadbar'
4+
5+
function MinPublishers() {
6+
const { rawConfig, dataIsLoading } = usePythContext()
7+
8+
return (
9+
<div className="pt-15 relative lg:pt-20">
10+
<div className="container flex flex-col items-center justify-between pt-32 lg:flex-row ">
11+
<div className="mb-10 w-full text-left lg:mb-0">
12+
<h1 className="h1 mb-3">Min Publishers</h1>
13+
</div>
14+
</div>
15+
<div className="container">
16+
<div className="mb-4 md:mb-0">
17+
<ClusterSwitch />
18+
</div>
19+
<div className="table-responsive relative mt-6">
20+
{dataIsLoading ? (
21+
<div className="mt-3">
22+
<Loadbar theme="light" />
23+
</div>
24+
) : (
25+
<div className="table-responsive mb-10">
26+
<table className="w-full bg-darkGray text-left">
27+
<thead>
28+
<tr>
29+
<th className="base16 pt-8 pb-6 pl-4 pr-2 font-semibold opacity-60 lg:pl-14">
30+
Symbol
31+
</th>
32+
<th className="base16 pt-8 pb-6 pl-1 pr-2 font-semibold opacity-60 lg:pl-14">
33+
Minimum Publishers
34+
</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
{rawConfig.mappingAccounts.length ? (
39+
rawConfig.mappingAccounts[0].products.map((product) =>
40+
product.priceAccounts.map((priceAccount) => {
41+
return (
42+
<tr
43+
key={product.metadata.symbol}
44+
className="border-t border-beige-300"
45+
>
46+
<td className="py-3 pl-4 pr-2 lg:pl-14">
47+
{product.metadata.symbol}
48+
</td>
49+
<td className="py-3 pl-1 lg:pl-14">
50+
<span className="mr-2">
51+
{priceAccount.minPub}
52+
</span>
53+
</td>
54+
</tr>
55+
)
56+
})
57+
)
58+
) : (
59+
<tr className="border-t border-beige-300">
60+
<td className="py-3 pl-1 lg:pl-14" colSpan={2}>
61+
No mapping accounts found.
62+
</td>
63+
</tr>
64+
)}
65+
</tbody>
66+
</table>
67+
</div>
68+
)}
69+
</div>
70+
</div>
71+
</div>
72+
)
73+
}
74+
75+
export default MinPublishers

‎governance/xc-admin/packages/xc-admin-frontend/components/layout/Header.tsx

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
12
import Link from 'next/link'
23
import { useRouter } from 'next/router'
34
import { useContext, useEffect, useState } from 'react'
@@ -66,50 +67,37 @@ function Header() {
6667
<>
6768
<header
6869
className={`left-0 top-0 z-40 w-full px-1 transition-all lg:px-10
69-
${isSticky || headerState.opened ? 'fixed ' : 'absolute'}
70+
${isSticky || headerState.opened ? 'fixed' : 'absolute'}
7071
${isSticky && !headerState.opened ? 'bg-darkGray shadow-black' : ''}
7172
`}
7273
>
7374
<div
7475
className={`relative flex items-center justify-between ${
7576
isSticky ? 'lg:py-4' : 'before:gradient-border md:py-6'
76-
}
77-
${
78-
!headerState.opened
79-
? 'px-4 py-3 lg:px-10 lg:py-6'
80-
: 'sm:px-4 sm:py-3 sm:lg:px-10 sm:lg:py-6'
81-
}
82-
`}
77+
} px-4 py-3 lg:px-10 lg:py-6`}
8378
>
8479
<Link href="/">
8580
<a
86-
className={`basis-7 ${
87-
headerState.opened &&
88-
'fixed left-5 top-3 sm:relative sm:left-0 sm:top-0'
89-
}`}
81+
className={`flex min-h-[45px] basis-[160px] cursor-pointer items-center`}
9082
>
9183
<Pyth />
9284
</a>
9385
</Link>
9486
<nav>
9587
<ul
96-
className={`hidden list-none lg:flex ${
97-
headerState.opened && 'hidden'
88+
className={`list-none space-x-10 ${
89+
headerState.opened ? 'hidden' : 'hidden lg:flex'
9890
}`}
9991
>
10092
{navigation.map((item) => (
10193
<li key={item.name}>
10294
<Link href={item.href}>
10395
<a
104-
className={`px-6 text-sm leading-none tracking-wide transition-colors hover:text-white lg:px-6 xl:px-8 ${
105-
router.pathname === item.href
106-
? 'text-white'
107-
: 'text-light'
108-
}`}
109-
aria-current={
110-
router.pathname === item.href ? 'page' : undefined
96+
className={
97+
router.pathname == item.href
98+
? 'nav-link font-bold'
99+
: 'nav-link'
111100
}
112-
target={item.target}
113101
>
114102
{item.name}
115103
</a>
@@ -118,34 +106,41 @@ function Header() {
118106
))}
119107
</ul>
120108
</nav>
121-
<div
122-
className={`basis-7 ${
123-
headerState.opened &&
124-
'fixed right-5 top-[20px] sm:relative sm:left-0 sm:top-0'
125-
}`}
126-
onClick={handleToggleMenu}
127-
>
128-
<button className="group ml-auto block lg:hidden">
129-
<span
130-
className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
131-
headerState.opened
132-
? 'mb-0 w-5 translate-y-1 rotate-45'
133-
: 'mb-1'
134-
}`}
135-
></span>
136-
<span
137-
className={`mb-1 block h-0.5 w-5 rounded-sm bg-light transition-all ${
138-
headerState.opened && 'opacity-0'
139-
}`}
140-
></span>
141-
<span
142-
className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
143-
headerState.opened
144-
? 'mb-0 w-5 -translate-y-1 -rotate-45'
145-
: 'mb-1'
109+
<div className="flex items-center justify-end space-x-2">
110+
{headerState.opened ? null : (
111+
<WalletMultiButton className="primary-btn pt-0.5" />
112+
)}
113+
<div
114+
className={`relative top-0 right-5 left-0 basis-7
115+
`}
116+
onClick={handleToggleMenu}
117+
>
118+
<button
119+
className={`group ml-auto align-middle ${
120+
headerState.opened ? 'block' : 'lg:hidden'
146121
}`}
147-
></span>
148-
</button>
122+
>
123+
<span
124+
className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
125+
headerState.opened
126+
? 'mb-0 w-5 translate-y-1 rotate-45'
127+
: 'mb-1'
128+
}`}
129+
></span>
130+
<span
131+
className={`mb-1 block h-0.5 w-5 rounded-sm bg-light transition-all ${
132+
headerState.opened && 'opacity-0'
133+
}`}
134+
></span>
135+
<span
136+
className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
137+
headerState.opened
138+
? 'mb-0 w-5 -translate-y-1 -rotate-45'
139+
: 'mb-1'
140+
}`}
141+
></span>
142+
</button>
143+
</div>
149144
</div>
150145
</div>
151146
</header>

‎governance/xc-admin/packages/xc-admin-frontend/components/loaders/Loadbar.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
3+
interface LoadbarProps {
4+
theme?: string
5+
width?: string | null
6+
}
7+
8+
const Loadbar: React.FC<LoadbarProps> = ({ theme, width }) => {
9+
let color = 'bg-dark-300'
10+
if (theme == 'light') {
11+
color = 'bg-beige-300'
12+
}
13+
return (
14+
<div className=" animate-pulse">
15+
{width ? (
16+
<div className="w-full">
17+
<div className={`h-3 ${color} w-${width} mb-2.5`}></div>
18+
</div>
19+
) : (
20+
<div className="w-full">
21+
<div className={`h-3 ${color} mb-2.5 w-48`}></div>
22+
<div className={`h-3 ${color} mb-2.5 max-w-[480px]`}></div>
23+
<div className={`h-3 ${color} mb-2.5`}></div>
24+
<div className={`h-3 ${color} mb-2.5 max-w-[840px]`}></div>
25+
<div className={`h-3 ${color} mb-2.5 max-w-[760px]`}></div>
26+
<div className={`h-3 ${color} max-w-[560px]`}></div>
27+
</div>
28+
)}
29+
30+
<span className="sr-only">Loading...</span>
31+
</div>
32+
)
33+
}
34+
35+
export default Loadbar

‎governance/xc-admin/packages/xc-admin-frontend/contexts/ClusterContext.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { PythCluster } from '@pythnetwork/client/lib/cluster'
22
import { createContext, useMemo, useState } from 'react'
3-
import { isValidCluster } from '../utils/isValidCluster'
43

5-
export const DEFAULT_CLUSTER: PythCluster = 'pythnet'
4+
export const DEFAULT_CLUSTER: PythCluster = 'mainnet-beta'
65

76
export const ClusterContext = createContext<{
87
cluster: PythCluster
98
setCluster: any
109
}>({
1110
cluster: DEFAULT_CLUSTER,
12-
setCluster: (cluster: PythCluster) => {},
11+
setCluster: {},
1312
})
1413

1514
export const ClusterProvider = (props: any) => {

0 commit comments

Comments
 (0)