Skip to content

Commit

Permalink
feat: restruct oapp configuration table
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdlyy
sdlyy committed Mar 19, 2024
1 parent d33fc04 commit 984fb4a
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 73 deletions.
223 changes: 155 additions & 68 deletions packages/frontend/src/pages/Applications.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import { ChainId, getPrettyChainName, OAppWithConfigs } from '@lz/libs'
import {
ChainId,
getPrettyChainName,
OAppsResponse,
OAppWithConfigs,
} from '@lz/libs'
import cx from 'classnames'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { ReactNode, useState } from 'react'

import { config } from '../config'
import { useTrackingApi } from '../hooks/useTrackingApi'
import { BlockchainAddress } from '../view/components/BlockchainAddress'
import { BlockchainIcon } from '../view/components/BlockchainIcon'
import { Layout } from '../view/components/Layout'
import { Navbar } from '../view/components/Navbar'
import { PaginatedContainer } from '../view/components/PaginatedContainer'
import { Row } from '../view/components/Row'
import { Tooltip } from '../view/components/Tooltip'
import { SolidMinusIcon } from '../view/icons/MinusIcon'
import { SolidPlusIcon } from '../view/icons/PlusIcon'
import { SimpleArrowIcon } from '../view/icons/SimpleArrowIcon'
import { WarningIcon } from '../view/icons/WarningIcon'

export function Applications() {
const chainsToDisplay = [ChainId.ETHEREUM] as [ChainId, ...ChainId[]]
Expand All @@ -39,50 +41,48 @@ export function Applications() {

<Layout>
<div className="mt-10 overflow-x-auto rounded bg-gray-900 px-7 py-5">
<div className="col-span-5 grid min-w-[800px] grid-cols-applications rounded bg-gray-700 py-3 text-left text-[13px] font-semibold text-gray-50">
<div className="col-span-5 grid min-w-[800px] grid-cols-applications rounded bg-gray-600 py-3 text-left text-[13px] font-semibold text-gray-50">
<div className="px-6">TOKEN</div>
<div>SOURCE CHAIN</div>
<div>ADDRESS</div>
<div>PATHWAYS</div>
<div>CONFIG</div>
<div />
</div>
<PaginatedContainer itemsPerPage={12} page={1}>
{oApps.data.oApps.map((oApp) => (
<OAppRow
key={oApp.name}
oApp={oApp}
sourceChain={ChainId.ETHEREUM}
/>
))}
</PaginatedContainer>
{oApps.data.oApps.map((oApp) => (
<OAppRow
key={oApp.name}
oApp={oApp}
defaults={oApps.data.defaultConfigurations}
sourceChain={ChainId.ETHEREUM}
/>
))}
</div>
</Layout>
</>
)
}

function OAppRow(props: { oApp: OAppWithConfigs; sourceChain: ChainId }) {
function OAppRow(props: {
oApp: OAppWithConfigs
sourceChain: ChainId
defaults: OAppsResponse['defaultConfigurations']
}) {
const [isExpanded, setIsExpanded] = useState(false)
const navigate = useNavigate()

const hasAnyCustomConfig = props.oApp.configurations.some(
(config) => !config.isDefault,
)
const hasDefaultConfig = !hasAnyCustomConfig

function forwardToDefaults() {
navigate('/')
}

function toggleExpand() {
setIsExpanded(!isExpanded)
}

return (
<div
className={cx(
'col-span-full grid-cols-applications-small border-b border-gray-700 py-3 text-xs last:rounded-b last:border-none md:min-w-[800px] md:grid-cols-applications',
'col-span-full grid-cols-applications-small border-b border-gray-700 py-3.5 text-xs last:rounded-b last:border-none md:min-w-[800px] md:grid-cols-applications',
isExpanded ? 'rounded border-none bg-gray-750' : 'bg-gray-800',
)}
>
Expand Down Expand Up @@ -117,64 +117,125 @@ function OAppRow(props: { oApp: OAppWithConfigs; sourceChain: ChainId }) {

<button
className="brightness-100 filter transition-all duration-300 hover:brightness-[120%]"
onClick={hasDefaultConfig ? forwardToDefaults : toggleExpand}
onClick={toggleExpand}
>
{hasDefaultConfig ? (
<SolidArrowRight />
) : isExpanded ? (
<SolidMinusIcon />
) : (
<SolidPlusIcon />
)}
{isExpanded ? <SolidMinusIcon /> : <SolidPlusIcon />}
</button>
</div>

{isExpanded && !hasDefaultConfig && (
<div className="mx-5 mt-3 rounded bg-gray-500 px-8 py-4">
{props.oApp.configurations.map(
(config) =>
!config.isDefault && (
<CustomConfig
key={config.targetChainId.toString()}
config={config}
/>
),
)}
{isExpanded && (
<div className="mt-3 flex flex-col gap-5 rounded bg-gray-750 md:mx-5 md:px-8 md:py-4">
{props.oApp.configurations.map((config) => (
<CustomConfig
key={config.targetChainId.toString()}
defaults={props.defaults}
config={config}
/>
))}
</div>
)}
</div>
)
}

function CustomConfig(props: {
config: OAppWithConfigs['configurations'][number] & { isDefault: false }
config: OAppWithConfigs['configurations'][number]
defaults: OAppsResponse['defaultConfigurations']
}) {
const defaultForChain = props.defaults.find(
(d) => d.targetChainId === props.config.targetChainId,
)

if (!defaultForChain) {
return null
}

const squashed = props.config.isDefault
? defaultForChain.configuration
: { ...defaultForChain.configuration, ...props.config.changedConfiguration }

return (
<div className="flex flex-col">
<span className="flex items-center gap-1.5">
{getPrettyChainName(props.config.targetChainId)}
{<BlockchainIcon chainId={props.config.targetChainId} />}
</span>
<div className="pt-2">
{Object.entries(props.config.changedConfiguration).map(
([property, value]) => (
<Row
dense
label={property}
value={
<div className="flex items-center gap-2">
{value}
<Tooltip
text="This property differs from the default"
variant="text"
>
<WarningIcon className="h-4 w-4 stroke-yellow-100" />
</Tooltip>
</div>
}
<div className="flex flex-col rounded bg-gray-500">
<div className="flex items-center justify-between px-6 py-4">
<div className="flex items-center gap-2">
{getPrettyChainName(props.config.targetChainId)}
{<BlockchainIcon chainId={props.config.targetChainId} />}
</div>
<div>
{props.config.isDefault ? (
<DefaultConfigBadge />
) : (
<CustomConfigBadge />
)}
</div>
</div>
<div className="bg-gray-800">
<R
label="Relayer"
currentValue={
<BlockchainAddress alwaysShort address={squashed.relayer} />
}
previousValue={
!props.config.isDefault &&
props.config.changedConfiguration.relayer && (
<BlockchainAddress
alwaysShort
address={defaultForChain.configuration.relayer}
/>
),
)}
)
}
/>
<R
label="Oracle"
currentValue={
<BlockchainAddress alwaysShort address={squashed.oracle} />
}
previousValue={
!props.config.isDefault &&
props.config.changedConfiguration.oracle && (
<BlockchainAddress
alwaysShort
address={defaultForChain.configuration.oracle}
/>
)
}
/>
<R
label="Inbound proof type"
currentValue={squashed.inboundProofLibraryVersion}
previousValue={
!props.config.isDefault &&
props.config.changedConfiguration.inboundProofLibraryVersion &&
defaultForChain.configuration.inboundProofLibraryVersion
}
/>
<R
label="Inbound block confirmations"
currentValue={squashed.inboundBlockConfirmations}
previousValue={
!props.config.isDefault &&
props.config.changedConfiguration.inboundBlockConfirmations &&
defaultForChain.configuration.inboundBlockConfirmations
}
/>
<R
label="Outbound proof type"
currentValue={squashed.outboundProofType}
previousValue={
!props.config.isDefault &&
props.config.changedConfiguration.outboundProofType &&
defaultForChain.configuration.outboundProofType
}
/>
<R
label="Outbound block confirmations"
currentValue={squashed.outboundBlockConfirmations}
previousValue={
!props.config.isDefault &&
props.config.changedConfiguration.outboundBlockConfirmations &&
defaultForChain.configuration.outboundBlockConfirmations
}
/>
</div>
</div>
)
Expand Down Expand Up @@ -216,8 +277,34 @@ function CustomConfigBadge() {

function SolidArrowRight() {
return (
<div className="flex h-4 w-4 items-center justify-center rounded bg-yellow-100">
<SimpleArrowIcon width={10} height={10} />
<div className="flex h-4 w-4 items-center justify-center rounded ">
<SimpleArrowIcon className="fill-white" width={10} height={10} />
</div>
)
}

function R(props: {
label: ReactNode
previousValue?: ReactNode
currentValue: ReactNode
}) {
return (
<Row
dense
label={props.label}
hideBorder
className={cx('!py-1.5 !pl-5', props.previousValue && 'bg-[#3C3223]')}
value={
props.previousValue ? (
<div className="flex items-center gap-2">
<span className="opacity-50 filter">{props.previousValue}</span>
<SolidArrowRight />
{props.currentValue}
</div>
) : (
props.currentValue
)
}
/>
)
}
7 changes: 2 additions & 5 deletions packages/frontend/src/view/icons/SimpleArrowIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,11 @@ export function SimpleArrowIcon(props: React.SVGProps<SVGSVGElement>) {
width="11"
height="15"
viewBox="0 0 10 11"
fill="none"
fill="black"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M-0.000213785 5.66408L7.75365 5.66408L5.01929 8.51563L5.91772 9.375L10.0827 5.04885L5.91772 0.70317L5.01929 1.56254L7.74877 4.41409L-0.00021384 4.41409L-0.000213785 5.66408Z"
fill="black"
/>
<path d="M-0.000213785 5.66408L7.75365 5.66408L5.01929 8.51563L5.91772 9.375L10.0827 5.04885L5.91772 0.70317L5.01929 1.56254L7.74877 4.41409L-0.00021384 4.41409L-0.000213785 5.66408Z" />
</svg>
)
}

0 comments on commit 984fb4a

Please sign in to comment.