Skip to content

Commit

Permalink
feat: redesign - add search to nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@He1DAr
He1DAr committed Feb 20, 2025
1 parent b68a048 commit 4088ef0
Show file tree
Hide file tree
Showing 11 changed files with 365 additions and 94 deletions.
33 changes: 31 additions & 2 deletions src/app/_components/NewNavBar/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,40 @@
import { Input } from '@/ui/Input';
import { Box, Flex, FlexProps, Icon, useDisclosure } from '@chakra-ui/react';
import { List } from '@phosphor-icons/react';
import { useSearchParams } from 'next/navigation';

import {
buildAdvancedSearchQuery,
getRecentResultsLocalStorage,
} from '../../../common/queries/useSearchQuery';
import { Search } from '../Search/Search';
import { FeePopover } from './FeePopover';
import { Logo } from './Logo';
import { MobileNavPage } from './MobileNavPage';
import { PagesSlidingMenu } from './PagesSlidingMenu';
import { SettingsPopover } from './SettingsPopover';

function useFilterParams() {
const params = new URLSearchParams(useSearchParams());
const filterParams: Record<string, string> = {};
params.forEach((value, filter) => {
if (
filter === 'fromAddress' ||
filter === 'toAddress' ||
filter === 'startTime' ||
filter === 'endTime' ||
filter.startsWith('term_')
) {
filterParams[filter] = value;
}
});
return filterParams;
}

const DesktopNavBar = (props: any) => {
const searchTermFromQueryParams = buildAdvancedSearchQuery(useFilterParams());
const recentResults = getRecentResultsLocalStorage();

return (
<Flex
width="full"
Expand All @@ -24,8 +50,11 @@ const DesktopNavBar = (props: any) => {
<Logo logoSize={10} />
<PagesSlidingMenu width={50} />
</Flex>
<Flex flexGrow={1} flexShrink={1} maxWidth="474px">
<Input placeholder="Explore" bg="surfaceSecondary" variant="redesignPrimary" />
<Flex flexGrow={1} flexShrink={1} maxWidth="507px">
<Search
searchTermFromQueryParams={searchTermFromQueryParams}
recentResults={recentResults}
/>
</Flex>
<Flex gap={4}>
<FeePopover />
Expand Down
109 changes: 88 additions & 21 deletions src/app/_components/Search/ResultItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
ContractDeployTxs,
TokenTransferTxs,
} from '../../../common/types/tx';
import { buildUrl } from '../../../common/utils/buildUrl';
import {
getContractName,
microToStacksFormatted,
Expand Down Expand Up @@ -70,21 +71,31 @@ function ResultItemIcon({ type }: { type?: 'arrow' | 'enter' | undefined }) {
return null;
}

export function ResultItem({ value }: { value: string }) {
export function ResultItem({
value,
url,
iconType = 'arrow',
}: {
value: string;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<ResultItemWrapper>
<SearchLink href={'#'}>{value}</SearchLink>
<ResultItemIcon type={'arrow'} />
<SearchLink href={url}>{value}</SearchLink>
<ResultItemIcon type={iconType} />
</ResultItemWrapper>
);
}

function TxResultItem({
tx,
children,
iconType = 'arrow',
}: {
tx: Transaction | MempoolTransaction;
children: ReactNode;
iconType?: 'arrow' | 'enter';
}) {
return (
<ResultItemWrapper>
Expand All @@ -100,15 +111,23 @@ function TxResultItem({
}
/>
</Flex>
<ResultItemIcon type={'arrow'} />
<ResultItemIcon type={iconType} />
</ResultItemWrapper>
);
}

export function TokenTransferResultItem({ tx }: { tx: TokenTransferTxs }) {
export function TokenTransferResultItem({
tx,
url,
iconType = 'arrow',
}: {
tx: TokenTransferTxs;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<TxResultItem tx={tx}>
<SearchLink href={'#'}>{microToStacksFormatted(tx.token_transfer.amount)} STX</SearchLink>
<TxResultItem tx={tx} iconType={iconType}>
<SearchLink href={url}>{microToStacksFormatted(tx.token_transfer.amount)} STX</SearchLink>
<Flex gap={1.5} alignItems={'center'}>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(tx.sender_address, 4)}
Expand All @@ -124,32 +143,56 @@ export function TokenTransferResultItem({ tx }: { tx: TokenTransferTxs }) {
);
}

export function ContractDeployResultItem({ tx }: { tx: ContractDeployTxs }) {
export function ContractDeployResultItem({
tx,
url,
iconType = 'arrow',
}: {
tx: ContractDeployTxs;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<TxResultItem tx={tx}>
<SearchLink href={'#'}>{getContractName(tx.smart_contract.contract_id)}</SearchLink>
<SearchLink href={url}>{getContractName(tx.smart_contract.contract_id)}</SearchLink>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(tx.tx_id, 4)}
</Text>
</TxResultItem>
);
}

export function ContractCallResultItem({ tx }: { tx: ContractCallTxs }) {
export function ContractCallResultItem({
tx,
url,
iconType = 'arrow',
}: {
tx: ContractCallTxs;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<TxResultItem tx={tx}>
<SearchLink href={'#'}>{tx.contract_call.function_name}</SearchLink>
<SearchLink href={url}>{tx.contract_call.function_name}</SearchLink>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(tx.tx_id, 4)}
</Text>
</TxResultItem>
);
}

export function CoinbaseResultItem({ tx }: { tx: CoinbaseTxs }) {
export function CoinbaseResultItem({
tx,
url,
iconType = 'arrow',
}: {
tx: CoinbaseTxs;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<TxResultItem tx={tx}>
<SearchLink href={'#'}>Coinbase</SearchLink>
<SearchLink href={url}>Coinbase</SearchLink>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(tx.tx_id, 4)}
</Text>
Expand All @@ -159,38 +202,62 @@ export function CoinbaseResultItem({ tx }: { tx: CoinbaseTxs }) {

export function TenureChangeResultItem({
tx,
url,
iconType = 'arrow',
}: {
tx: TenureChangeTransaction | MempoolTenureChangeTransaction;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<TxResultItem tx={tx}>
<SearchLink href={'#'}>Tenure Change</SearchLink>
<SearchLink href={url}>Tenure Change</SearchLink>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(tx.tx_id, 4)}
</Text>
</TxResultItem>
);
}

export function BnsResultItem({ bns, address }: { bns: string; address: string }) {
export function BnsResultItem({
bns,
address,
url,
iconType = 'arrow',
}: {
bns: string;
address: string;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<ResultItemWrapper>
<Flex gap={4} flex={'1 1 auto'} minWidth={0}>
<SearchLink href={'#'}>{bns}</SearchLink>
<SearchLink href={url}>{bns}</SearchLink>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(address, 5)}
</Text>
</Flex>
<ResultItemIcon type={'arrow'} />
<ResultItemIcon type={iconType} />
</ResultItemWrapper>
);
}

export function BlockResultItem({ height, hash }: { height: number; hash: string }) {
export function BlockResultItem({
height,
hash,
url,
iconType = 'arrow',
}: {
height: number;
hash: string;
url: string;
iconType?: 'arrow' | 'enter';
}) {
return (
<ResultItemWrapper py={2.5}>
<Flex gap={4} flex={'1 1 auto'} minWidth={0}>
<TextLink href={'#'}>
<SearchLink href={url}>
<Flex
alignItems={'center'}
gap={1.5}
Expand Down Expand Up @@ -219,12 +286,12 @@ export function BlockResultItem({ height, hash }: { height: number; hash: string
#{height}
</Text>
</Flex>
</TextLink>
</SearchLink>
<Text fontSize={'sm'} color={'textPrimary'} whiteSpace={'nowrap'}>
{truncateMiddle(hash, 4)}
</Text>
</Flex>
<ResultItemIcon type={'arrow'} />
<ResultItemIcon type={iconType} />
</ResultItemWrapper>
);
}
Loading

0 comments on commit 4088ef0

Please sign in to comment.