Skip to content

Commit

Permalink
ui and bug fixes
Browse files Browse the repository at this point in the history
aadilhasan committed Aug 8, 2023
1 parent b0bdb03 commit 4f5ff54
Showing 8 changed files with 107 additions and 91 deletions.
10 changes: 8 additions & 2 deletions src/Components/SearchForHome.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
import classNames from 'classnames';
import { Icon } from './Icon';
import { InputWithMention } from './Input/Input';
import { FormEvent, useCallback, useState } from 'react';
import { FormEvent, useCallback, useEffect, useState } from 'react';
import { createSearchParams, useNavigate } from 'react-router-dom';
import { getValuesFromId, isMention } from './Input/utils';
import { UserInputs } from '../hooks/useSearchInput';
import { UserInputs, useSearchInput } from '../hooks/useSearchInput';
import { createFormattedRawInput } from '../utils/createQueryParamsWithMention';

const tokenHoldersPlaceholder = 'Use @ mention or enter any contract address';
const tokenBalancesPlaceholder =
'Enter 0x, name.eth, fc_fname:name, or name.lens';

export function HomeSearch() {
const setData = useSearchInput()[1];
const [isTokenBalances, setIsTokenBalances] = useState(true);

useEffect(() => {
// reset search params on mount
setData({}, { reset: true });
}, [setData]);

const [value, setValue] = useState('');

const navigate = useNavigate();
19 changes: 16 additions & 3 deletions src/pages/TokenBalances/Tokens.tsx
Original file line number Diff line number Diff line change
@@ -136,6 +136,11 @@ function TokensComponent() {
const [tokens, setTokens] = useState<(TokenType | Poap)[]>([]);
const isPoap = tokenType === 'POAP';

const canFetchPoap = useMemo(() => {
const hasPolygonChainFilter = blockchainType.includes('polygon');
return !hasPolygonChainFilter && (!tokenType || isPoap);
}, [blockchainType, isPoap, tokenType]);

useEffect(() => {
if (owner) {
const hasPolygonChainFilter = blockchainType.includes('polygon');
@@ -152,7 +157,7 @@ function TokensComponent() {
});
}

if (!hasPolygonChainFilter && (!tokenType || isPoap)) {
if (canFetchPoap) {
fetchPoaps({
owner,
limit: isPoap ? 20 : 10,
@@ -163,6 +168,7 @@ function TokensComponent() {
}
}, [
blockchainType,
canFetchPoap,
fetchAllBlockchains,
fetchPoaps,
fetchTokens,
@@ -192,10 +198,17 @@ function TokensComponent() {
paginationTokens.getNextPage();
}

if (!loadingPoaps && paginationPoaps?.hasNextPage) {
if (canFetchPoap && !loadingPoaps && paginationPoaps?.hasNextPage) {
paginationPoaps.getNextPage();
}
}, [isPoap, loadingPoaps, loadingTokens, paginationPoaps, paginationTokens]);
}, [
canFetchPoap,
isPoap,
loadingPoaps,
loadingTokens,
paginationPoaps,
paginationTokens
]);

const loading = loadingTokens || loadingPoaps;

This file was deleted.

44 changes: 40 additions & 4 deletions src/pages/TokenHolders/OverviewDetails/Tokens/Token.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { ListWithMoreOptions } from './ListWithMoreOptions';
import { Poap, Token as TokenType } from '../../types';
import { Icon } from '../../../../Components/Icon';
import { useMemo, useCallback } from 'react';
import { getDAppType } from '../../utils';
import { ListWithMoreOptions } from '../../Tokens/ListWithMoreOptions';
import { useNavigate } from 'react-router-dom';
import { createTokenBalancesUrl } from '../../../../utils/createTokenUrl';
import { WalletAddress } from '../../Tokens/WalletAddress';

export function Token({
token,
@@ -12,10 +15,14 @@ export function Token({
onShowMore?: (value: string[], dataType: string) => void;
}) {
const owner = token?.owner;
const walletAddress = owner?.addresses || '';
const walletAddresses = owner?.addresses || '';
const walletAddress = Array.isArray(walletAddresses)
? walletAddresses[0]
: '';
const primarEns = owner?.primaryDomain?.name || '';
const ens = owner?.domains?.map(domain => domain.name) || [];
const xmtpEnabled = owner?.xmtp?.find(({ isXMTPEnabled }) => isXMTPEnabled);
const navigate = useNavigate();

const { lens, farcaster } = useMemo(() => {
const social = owner?.socials || [];
@@ -39,28 +46,57 @@ export function Token({
[onShowMore]
);

const handleAddressClick = useCallback(
(address: string, type = '') => {
const isFarcaster = type?.includes('farcaster');
navigate(
createTokenBalancesUrl({
address: isFarcaster ? `fc_fname:${address}` : address,
blockchain: 'ethereum',
inputType: 'ADDRESS'
})
);
},
[navigate]
);

return (
<>
<td>
<div className="max-w-[30vw] sm:max-w-none">
<ListWithMoreOptions
list={ens}
onShowMore={getShowMoreHandler(ens, 'ens')}
listFor="ens"
onItemClick={handleAddressClick}
/>
</div>
</td>
<td className="ellipsis">{primarEns || '--'}</td>
<td className="ellipsis">{walletAddress || '--'}</td>
<td className="ellipsis">
<ListWithMoreOptions
list={[primarEns || '']}
onShowMore={getShowMoreHandler(ens, 'ens')}
listFor="ens"
onItemClick={handleAddressClick}
/>
</td>
<td className="ellipsis">
<WalletAddress address={walletAddress} onClick={handleAddressClick} />
</td>
<td>
<ListWithMoreOptions
list={lens}
onShowMore={getShowMoreHandler(lens, 'lens')}
listFor="lens"
onItemClick={handleAddressClick}
/>
</td>
<td>
<ListWithMoreOptions
list={farcaster}
onShowMore={getShowMoreHandler(farcaster, 'farcaster')}
listFor="farcaster"
onItemClick={handleAddressClick}
/>
</td>
<td>
2 changes: 1 addition & 1 deletion src/pages/TokenHolders/OverviewDetails/Tokens/Tokens.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ function TableRow({ isLoader, children, ...props }: TableRowProps) {
return (
<tr
className={classNames(
'[&>td]:px-8 [&>td]:py-5 [&>td]:align-middle min-h-[54px] hover:bg-glass cursor-pointer',
'[&>td]:px-8 [&>td]:py-5 [&>td]:align-middle min-h-[54px]',
{
'skeleton-loader [&>td:last-child]:hidden': isLoader,
'[&>div>td]:px-8 [&>div>td]:py-5': isLoader
7 changes: 5 additions & 2 deletions src/pages/TokenHolders/Tokens/ListWithMoreOptions.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import classNames from 'classnames';
import { useState, useMemo, useCallback } from 'react';

const maxTokens = 7;
@@ -34,10 +35,12 @@ export function ListWithMoreOptions({
{items.map((name, index) => (
<li key={index} className="ellipsis mb-1">
<div
className="px-1 py-1 rounded-18 ellipsis hover:bg-glass-1 cursor-pointer"
className={classNames('px-1 py-1 rounded-18 ellipsis', {
'hover:bg-glass-1 cursor-pointer': name
})}
onClick={getItemClickHandler(name)}
>
{name}
{name || '--'}
</div>
</li>
))}
27 changes: 4 additions & 23 deletions src/pages/TokenHolders/Tokens/Token.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import { getDAppType } from '../utils';
import { Poap, Token as TokenType } from '../types';
import { ListWithMoreOptions } from './ListWithMoreOptions';
import { createTokenBalancesUrl } from '../../../utils/createTokenUrl';
import { showToast } from '../../../utils/showToast';
import { WalletAddress } from './WalletAddress';

export function Token({
token,
@@ -55,7 +55,7 @@ export function Token({
);

const handleAddressClick = useCallback(
(address: string, type: string) => {
(address: string, type = '') => {
const isFarcaster = type?.includes('farcaster');
navigate(
createTokenBalancesUrl({
@@ -83,26 +83,7 @@ export function Token({
</div>
</td>
<td className="ellipsis">
<div
className="flex px-1 py-1 rounded-18 hover:bg-glass-1 cursor-pointer"
onClick={() => {
handleAddressClick(walletAddress, '');
}}
>
<span className="ellipsis">{walletAddress || '--'}</span>
{walletAddress && (
<Icon
name="copy"
height={16}
width={16}
onClick={async e => {
e.stopPropagation();
await navigator.clipboard.writeText(walletAddress);
showToast('Copied to clipboard');
}}
/>
)}
</div>
<WalletAddress address={walletAddress} onClick={handleAddressClick} />
</td>
<td className="ellipsis">
{_token?.tokenType === 'ERC20'
@@ -114,7 +95,7 @@ export function Token({
<td className="ellipsis">
{}
<ListWithMoreOptions
list={[primarEns || '--']}
list={[primarEns || '']}
onShowMore={getShowMoreHandler(ens, 'ens')}
listFor="ens"
onItemClick={handleAddressClick}
33 changes: 33 additions & 0 deletions src/pages/TokenHolders/Tokens/WalletAddress.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Icon } from '../../../Components/Icon';
import { showToast } from '../../../utils/showToast';

export function WalletAddress({
address,
onClick
}: {
address: string;
onClick: (address: string) => void;
}) {
return (
<div
className="flex px-1 py-1 rounded-18 hover:bg-glass-1 cursor-pointer"
onClick={() => {
onClick(address);
}}
>
<span className="ellipsis">{address || '--'}</span>
{address && (
<Icon
name="copy"
height={16}
width={16}
onClick={async e => {
e.stopPropagation();
await navigator.clipboard.writeText(address);
showToast('Copied to clipboard');
}}
/>
)}
</div>
);
}

0 comments on commit 4f5ff54

Please sign in to comment.