diff --git a/apps/explorer/src/comps/ExploreInput.tsx b/apps/explorer/src/comps/ExploreInput.tsx index d9601a05f..8a5fc84fb 100644 --- a/apps/explorer/src/comps/ExploreInput.tsx +++ b/apps/explorer/src/comps/ExploreInput.tsx @@ -22,6 +22,7 @@ export function ExploreInput(props: ExploreInput.Props) { size = 'medium', disabled, className, + wide, tabIndex, } = props const formRef = React.useRef(null) @@ -180,7 +181,7 @@ export function ExploreInput(props: ExploreInput.Props) { return } }} - className="relative z-10 w-full max-w-md" + className={cx('relative z-10 w-full', !wide && 'max-w-md')} > + ) } @@ -40,7 +41,8 @@ export namespace Header { initialBlockNumber?: bigint } - export function Search() { + export function Search(props: { compact?: boolean }) { + const { compact = false } = props const router = useRouter() const navigate = useNavigate() const [inputValue, setInputValue] = React.useState('') @@ -73,10 +75,38 @@ export namespace Header { return () => clearTimeout(timer) }, [isNavigating]) - return ( - showSearch && ( -
+ if (!showSearch) return null + + const exploreInput = ( + { + if (type === 'hash') { + navigate({ to: '/receipt/$hash', params: { hash: value } }) + return + } + if (type === 'token') { + navigate({ to: '/token/$address', params: { address: value } }) + return + } + if (type === 'address') { + navigate({ + to: '/address/$address', + params: { address: value }, + }) + return + } + }} + /> + ) + + if (compact) + return ( +
) + + return ( + <> +
+ {exploreInput} +
+
+ { + if (type === 'hash') { + navigate({ to: '/receipt/$hash', params: { hash: value } }) + return + } + if (type === 'token') { + navigate({ to: '/token/$address', params: { address: value } }) + return + } + if (type === 'address') { + navigate({ + to: '/address/$address', + params: { address: value }, + }) + return + } + }} + /> +
+ ) }