From 4108f47180aeba2521a09a94dbae14db88dc030d Mon Sep 17 00:00:00 2001 From: CaidynLuckyBeard <156078435+CaidynLuckyBeard@users.noreply.github.com> Date: Mon, 6 May 2024 12:02:32 +0200 Subject: [PATCH] fix(explorer/ui): mobile view landing (#990) Changes to the mobile view task: https://app.asana.com/0/1206208509925075/1207122698129971 --------- Co-authored-by: Morne --- explorer/ui/app/assets/images/Close-Med.svg | 5 ++ explorer/ui/app/assets/images/Group.svg | 9 +++ .../ui/app/components/details/BackBtn.tsx | 28 ++++++++++ .../app/components/home/messageDataTable.tsx | 14 +++-- .../ui/app/components/queries/messages.tsx | 22 +++++++- .../ui/app/components/shared/dropdown.tsx | 7 ++- .../components/shared/explorerDropdown.tsx | 6 +- .../app/components/shared/filterOptions.tsx | 4 +- explorer/ui/app/components/shared/navbar.tsx | 56 +++++++++++++++++-- .../ui/app/components/shared/simpleTable.tsx | 1 - explorer/ui/app/components/svg/closeIcon.tsx | 14 +++++ explorer/ui/app/components/svg/menuIcon.tsx | 36 ++++++++++++ explorer/ui/app/root.tsx | 24 +++++--- explorer/ui/app/routes/_index.tsx | 3 +- explorer/ui/app/routes/xblock.$id/route.tsx | 28 ---------- 15 files changed, 199 insertions(+), 58 deletions(-) create mode 100644 explorer/ui/app/assets/images/Close-Med.svg create mode 100644 explorer/ui/app/assets/images/Group.svg create mode 100644 explorer/ui/app/components/details/BackBtn.tsx create mode 100644 explorer/ui/app/components/svg/closeIcon.tsx create mode 100644 explorer/ui/app/components/svg/menuIcon.tsx delete mode 100644 explorer/ui/app/routes/xblock.$id/route.tsx diff --git a/explorer/ui/app/assets/images/Close-Med.svg b/explorer/ui/app/assets/images/Close-Med.svg new file mode 100644 index 000000000..7d2269cdc --- /dev/null +++ b/explorer/ui/app/assets/images/Close-Med.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/explorer/ui/app/assets/images/Group.svg b/explorer/ui/app/assets/images/Group.svg new file mode 100644 index 000000000..5513eb92b --- /dev/null +++ b/explorer/ui/app/assets/images/Group.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/explorer/ui/app/components/details/BackBtn.tsx b/explorer/ui/app/components/details/BackBtn.tsx new file mode 100644 index 000000000..672fc5e9a --- /dev/null +++ b/explorer/ui/app/components/details/BackBtn.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export const BackBtn = ({onBackClickHandler}) => { + return ( + + ) +} diff --git a/explorer/ui/app/components/home/messageDataTable.tsx b/explorer/ui/app/components/home/messageDataTable.tsx index 5bccf9675..ef1f7819a 100644 --- a/explorer/ui/app/components/home/messageDataTable.tsx +++ b/explorer/ui/app/components/home/messageDataTable.tsx @@ -130,7 +130,7 @@ export default function XMsgDataTable() { header: () => ID, cell: (value: any) => { return ( - + {value.getValue()} ) @@ -147,6 +147,12 @@ export default function XMsgDataTable() { ), }, + { + ...columnConfig, + accessorKey: 'Node.Status', + header: () => Status, + cell: (value: any) => , + }, { ...columnConfig, accessorKey: 'Node.SourceChainID', @@ -368,8 +374,8 @@ export default function XMsgDataTable() { value={filterParams.destChain} /> -
-
+
+
{ @@ -385,7 +391,7 @@ export default function XMsgDataTable() { disabled={!hasFiltersApplied} onClick={clearFilters} kind="text" - className={`flex justify-center items-center ${!hasFiltersApplied && 'opacity-40'}`} + className={`flex items-center ${!hasFiltersApplied && 'opacity-40'}`} > {' '} diff --git a/explorer/ui/app/components/queries/messages.tsx b/explorer/ui/app/components/queries/messages.tsx index 526f0e066..a37dd315e 100644 --- a/explorer/ui/app/components/queries/messages.tsx +++ b/explorer/ui/app/components/queries/messages.tsx @@ -1,7 +1,25 @@ import { DocumentNode } from 'graphql' -import { gql } from 'urql' +import { gql, useQuery } from 'urql' import { graphql } from '~/graphql' -import { XMsgsDocument } from '~/graphql/graphql' +import { XMsg, XMsgsDocument } from '~/graphql/graphql' + +export const GetXMsg = (sourceChainID: string, destChainID: string, streamOffset: string): XMsg | null => { + const [result] = useQuery({ + query: xmsg, + variables: { + sourceChainID, + destChainID, + streamOffset, + }, + }) + const { data, fetching, error } = result + // TODO handle error properly here + if (!error) { + return data as XMsg + } else { + return null + } +} export const xmsg = graphql(` diff --git a/explorer/ui/app/components/shared/dropdown.tsx b/explorer/ui/app/components/shared/dropdown.tsx index fa6136624..195c35651 100644 --- a/explorer/ui/app/components/shared/dropdown.tsx +++ b/explorer/ui/app/components/shared/dropdown.tsx @@ -4,6 +4,7 @@ interface Props { onChange?: Function position?: 'left' | 'right' | 'center' defaultValue?: string + isFullWidth?: boolean } const Dropdown: React.FC = ({ @@ -11,6 +12,7 @@ const Dropdown: React.FC = ({ onChange = () => {}, position = 'center', defaultValue = '', + isFullWidth = false, ...props }) => { // conditional styles @@ -27,11 +29,12 @@ const Dropdown: React.FC = ({ onClick={e => { setIsOpen(!isOpen) }} - className={`flex items-center gap-4 text-left px-3 pl-5 py-2 h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px] border-[1px] border-border-subtle overflow-hidden ${position === 'left' && leftStyle} ${position === 'right' && rightStyle} ${isOpen && 'bg-overlay bg-opacity-100 !border-border-default'} `} + className={`flex items-center gap-4 text-left px-3 pl-5 py-2 h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px] border-[1px] border-border-subtle overflow-hidden ${position === 'left' && leftStyle} ${position === 'right' && rightStyle} ${isOpen && 'bg-overlay bg-opacity-100 !border-border-default'} ${isFullWidth && 'w-full'}`} > {options.find(option => option.value === value)?.display} +
@@ -47,7 +50,7 @@ const Dropdown: React.FC = ({ {/* dropdown container */} {isOpen && ( -
+
{options.map((option, i) => (
= ({ ...props }) => { onClick={e => { setIsOpen(!isOpen) }} - className={`flex gap-2 flex-row items-center text-nowrap relative text-left px-3 pl-5 h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px] border-subtle overflow-hidden ${isOpen && 'bg-overlay bg-opacity-100'} `} + className={`flex gap-2 px-3 flex-row items-center text-nowrap relative text-left h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px] border-subtle overflow-hidden ${isOpen && 'bg-overlay bg-opacity-100'} `} >