Skip to content

Commit e18de00

Browse files
Quint-SQuint-S
committed
mobile work
1 parent 3a37b88 commit e18de00

File tree

10 files changed

+100
-95
lines changed

10 files changed

+100
-95
lines changed

‎src/components/ASCIILogo.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,27 @@ export const ASCIILogo = () => {
3232
// %*-----::::::::::::::+##
3333
// ##-::::::::.=###`
3434

35-
const text = `██▓ ░ ░░░░░░░░░░░ ░███
35+
const text = `██▓ ░░░░░░░░░░░░░░░ ░███
3636
█████████ ░░░░░░░░░░░░░░░░░░░░░ ██████████
3737
████████████ ░░░░░░░░░░░░░░░░░░░ █████████████
3838
█████████████ ░░░▒▒▒▒▒▒▒▒▒▒▒░░ ████████████
3939
████████░ ░▒▒▒▒▒▒▒▒▒▒▒▒ ████████▓
40-
████████ ░▒▒▓▓▒▒▒▒▒▒░ ████████
40+
████████ ░▒▒▒▒▓▓▒▒▒▒░ ████████
4141
░░░░ ███████ ▒▓▓▓▓▓▓▓▓▒ ███████ ░░░░░
4242
░░░░░░▒▒ ██████ ▒▓▓▓▓▓▓▒ ██████░ ▒▒░░░░░░
4343
░░░░░▒▒▒▒▒░ ██████▒▓▓▓▓▓▓▒██████ ░▒▒▒▒▒░░░░░
4444
░░░░░░▒▒▒▒▒▓▒ █████▒▓████▓░██████░▓▒▒▒▒▒▒░░░░░
4545
██████▒▓▓▓▓▒██████
4646
███████████████████████████████████████████████████
47-
███████████████████████TOREX███████████████████████
48-
███████████████████████████████████████████████████
47+
███████████████████████TorEx███████████████████████
48+
██████████████████████████████████████████████████
4949
██████▒▓▓▓▓▓██████
5050
░░░░░▒▒▒▒▒▓▓▒ ██████▓████▓▒█████ ▒▓▓▒▒▒▒▒░░░░░
5151
░░░░░▒▒▒▒▒▒░ ██████▒▓▓████▒██████ ░▒▒▒▒▒▒░░░░░
5252
░░░░░▒▒▒▒░ ██████░▓▓▓▓▓▓▓▓░██████ ░▒▒▒▒░░░░░
5353
░░░░░▒ ███████░▓▓▓▓▓▓▓▓▒ ██████ ▒░░░░░░
5454
░░░ ███████ ░▒▓▓▓▓▓▓▓▓▓▒ ███████ ░░░
55-
████████ ░▒▒▒▒▓▒▒▓▓▒▒▒░ ████████
55+
████████ ░▒▒▒▒▓▓▓▓▓▒▒▒░ ████████
5656
██████████ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ██████████
5757
█████████████ ░░▒▒▒▒▒▒▒▒▒▒▒▒▒░░░ ██████████████
5858
██████████ ░░░░░░░░░░░░░░░░░░░░░░ ███████████

‎src/components/PaginationControls.tsx‎

Lines changed: 56 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,74 @@
1+
import { useEffect, useState } from "react";
12

23
interface PaginationControlsProps {
34
currentPage: number;
45
totalCount: number;
56
itemsPerPage: number;
67
dataLength?: number;
7-
onNext: () => void;
8-
onPrevious: () => void;
8+
onPageChange: (page: number) => void;
99
}
1010

1111
export const PaginationControls = ({
1212
currentPage,
1313
totalCount,
1414
itemsPerPage,
1515
dataLength,
16-
onNext,
17-
onPrevious
16+
onPageChange
1817
}: PaginationControlsProps) => {
18+
const [inputValue, setInputValue] = useState((currentPage + 1).toString());
19+
20+
const totalPages = Math.ceil(totalCount / itemsPerPage);
21+
22+
useEffect(() => {
23+
setInputValue((currentPage + 1).toString());
24+
}, [currentPage]);
25+
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
26+
setInputValue(e.target.value);
27+
};
28+
const handlePageChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
29+
if (e.key === 'Enter') {
30+
const page = parseInt(inputValue);
31+
if (!isNaN(page) && page > 0 && page <= totalPages) {
32+
onPageChange(page - 1);
33+
} else {
34+
// Reset to current page if invalid
35+
setInputValue((currentPage + 1).toString());
36+
}
37+
}
38+
};
39+
1940
return (
20-
<div className={'flex items-center'}>
21-
<div style={{borderRight: '1px solid #00c4ff'}}>
22-
<button
23-
onClick={onPrevious}
24-
disabled={currentPage === 0}
25-
className={'p-1 bg-transparent border-0 hover:text-blue-400'}
26-
>
27-
⟵
28-
</button>
29-
<span>{currentPage + 1} of {Math.ceil(totalCount/itemsPerPage)}</span>
30-
<button
31-
onClick={onNext}
32-
disabled={Boolean((dataLength && dataLength < itemsPerPage))}
33-
className={'p-1 bg-transparent border-0 hover:text-blue-400'}
34-
>
35-
⟶
36-
</button>
37-
</div>
38-
<div>
39-
<span style={{paddingLeft: '5px'}}>[{Math.min(((currentPage)*itemsPerPage)+1, totalCount)}..{Math.min((currentPage+1)*itemsPerPage, totalCount)} of {totalCount}]</span>
40-
</div>
41+
<div className={'flex items-center whitespace-nowrap'}>
42+
<div style={{borderRight: '1px solid #00c4ff'}} className="flex items-center">
43+
<button
44+
onClick={() => onPageChange(currentPage-1)}
45+
disabled={currentPage === 0}
46+
className={'p-1 bg-transparent border-0 hover:text-blue-400'}
47+
>
48+
⟵
49+
</button>
50+
<input
51+
// type="number"
52+
min={1}
53+
max={totalPages}
54+
value={inputValue}
55+
onChange={handleInputChange}
56+
onKeyDown={handlePageChange}
57+
className="w-12 mx-1 text-center bg-transparent border border-gray-400 focus:outline-none appearance-none"
58+
style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' }}
59+
/>
60+
<span>of {totalPages}</span>
61+
<button
62+
onClick={() => onPageChange(currentPage+1)}
63+
disabled={Boolean((dataLength && dataLength < itemsPerPage))}
64+
className={'p-1 bg-transparent border-0 hover:text-blue-400'}
65+
>
66+
⟶
67+
</button>
68+
</div>
69+
<div>
70+
<span style={{paddingLeft: '5px'}}>[{Math.min(((currentPage)*itemsPerPage)+1, totalCount)}..{Math.min((currentPage+1)*itemsPerPage, totalCount)} of {totalCount}]</span>
71+
</div>
4172
</div>
4273
);
4374
};

‎src/components/ResponsiveAddress.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,58 @@ import { useEffect, useState, useRef } from 'react';
33
interface ResponsiveAddressProps {
44
address: string;
55
}
6+
// ... existing imports ...
7+
8+
const ADDRESS_BOOK = [
9+
{ name: "BASE BRIDGE", address: "5DDXwRsgvdfukGZbq2o27n43qyDaAnZ6rsfeckGxnaQ1ih2D" },
10+
// Add more entries as needed
11+
];
612

713
export const ResponsiveAddress = ({ address }: ResponsiveAddressProps) => {
814
const [formattedAddress, setFormattedAddress] = useState(`${address.slice(0, 1)}..${address.slice(-1)}`);
915
const containerRef = useRef<HTMLSpanElement>(null);
16+
const [isHovered, setIsHovered] = useState(false);
17+
18+
// Find matching address in address book
19+
const addressEntry = ADDRESS_BOOK.find(entry => entry.address === address);
20+
const displayName = addressEntry?.name;
1021

1122
useEffect(() => {
12-
// let initial = true;
1323
const updateAddressFormat = () => {
1424
if (!containerRef.current?.parentElement) return;
1525

1626
const parentWidth = containerRef.current.parentElement.offsetWidth;
17-
const fontSize = 15;//might need to change
18-
const cutoff = (parentWidth-30)/(fontSize);
19-
// initial = false;
27+
const fontWidth = 8*2;
28+
const cutoff = (parentWidth-32)/(fontWidth);
29+
2030
if(cutoff < address.length/2){
2131
setFormattedAddress(`${address.slice(0, cutoff)}..${address.slice(-cutoff)}`);
2232
}else{
2333
setFormattedAddress(address);
2434
}
25-
26-
2735
};
2836

2937
const observer = new ResizeObserver(updateAddressFormat);
3038
if (containerRef.current?.parentElement) {
3139
observer.observe(containerRef.current.parentElement);
3240
}
3341

34-
// Initial format
3542
updateAddressFormat();
3643

3744
return () => {
3845
observer.disconnect();
3946
};
40-
}, [address]);
41-
42-
return <div style={{width: '100%'}}><span ref={containerRef}>{formattedAddress}</span></div>;
47+
}, [address, displayName]);
48+
49+
return (
50+
<div
51+
style={{width: '100%'}}
52+
onMouseEnter={() => setIsHovered(true)}
53+
onMouseLeave={() => setIsHovered(false)}
54+
>
55+
<span ref={containerRef}>
56+
{!isHovered ? formattedAddress : (displayName || formattedAddress)}
57+
</span>
58+
</div>
59+
);
4360
};

‎src/components/Sidebar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom'
33
import { useState, useEffect } from 'react';
44

55
const SidebarContainer = styled.div<{ $isExpanded: boolean }>`
6-
width: ${props => props.$isExpanded ? '180px' : '20px'};
6+
width: ${props => props.$isExpanded ? '180px' : '30px'};
77
padding: ${props => props.$isExpanded ? '16px' : '1px'};
88
border-radius: 2px;
99
border: 1px solid #0050a1;
@@ -102,12 +102,13 @@ export const Sidebar = () => {
102102
{navItems.map((item, index) => (
103103
<NavItem
104104
key={item.to}
105+
onClick={(e) => {if(!isExpanded && isMobile){e.preventDefault()}}}
105106
to={item.to}
106107
id={`nav-item-${index}`}
107108
className={focusedIndex === index ? `hovered` : ''}
108109
$isExpanded={isExpanded || !isMobile}
109110
>
110-
{isMobile && !isExpanded ? item.label[0] : item.label}
111+
{isMobile && !isExpanded ? item.label : item.label}
111112
</NavItem>
112113
))}
113114
</SidebarContainer>

‎src/pages/AccountTransfers.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,6 @@ export const AccountTransfers = () => {
3838
variables: { first: itemsPerPage, offset: currentPage * itemsPerPage, address }
3939
});
4040

41-
const handleNext = () => {
42-
setCurrentPage(prev => prev + 1);
43-
};
44-
45-
const handlePrevious = () => {
46-
setCurrentPage(prev => Math.max(0, prev - 1));
47-
};
48-
4941
const pageControls = (
5042
<>
5143
{loading && <TerminalLoading/>}
@@ -54,8 +46,7 @@ export const AccountTransfers = () => {
5446
totalCount={data?.transfers.totalCount}
5547
itemsPerPage={itemsPerPage}
5648
dataLength={data?.transfers.nodes.length}
57-
onNext={handleNext}
58-
onPrevious={handlePrevious}
49+
onPageChange={setCurrentPage}
5950
/>}</>
6051
);
6152

‎src/pages/Accounts.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,6 @@ export const Accounts = () => {
3131
const { loading, error, data } = useQuery(GET_ACCOUNTS, {
3232
variables: { first: itemsPerPage, offset: currentPage * itemsPerPage }
3333
});
34-
35-
const handleNext = () => {
36-
setCurrentPage(prev => prev + 1);
37-
};
38-
39-
const handlePrevious = () => {
40-
setCurrentPage(prev => Math.max(0, prev - 1));
41-
};
4234
const onsearch = (search: string) => {
4335
navigate(`/account/${search}`)
4436
}
@@ -50,8 +42,7 @@ export const Accounts = () => {
5042
totalCount={data.accounts.totalCount}
5143
itemsPerPage={itemsPerPage}
5244
dataLength={data?.accounts.nodes.length}
53-
onNext={handleNext}
54-
onPrevious={handlePrevious}
45+
onPageChange={setCurrentPage}
5546
/>}<SearchBar placeholder={'Enter address to lookup..'} onSearch={onsearch}/></div>
5647
);
5748

‎src/pages/Agents.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,6 @@ export const Agents = () => {
2929
variables: {first: itemsPerPage, offset: currentPage * itemsPerPage}
3030
});
3131

32-
const handleNext = () => {
33-
setCurrentPage(prev => prev + 1);
34-
};
35-
36-
const handlePrevious = () => {
37-
setCurrentPage(prev => Math.max(0, prev - 1));
38-
};
3932

4033
const pageControls = (
4134
<>
@@ -45,8 +38,8 @@ export const Agents = () => {
4538
totalCount={data?.agents.totalCount}
4639
itemsPerPage={itemsPerPage}
4740
dataLength={data?.agents.nodes.length}
48-
onNext={handleNext}
49-
onPrevious={handlePrevious}
41+
42+
onPageChange={setCurrentPage}
5043
/>}</>
5144
);
5245
return (

‎src/pages/Blocks.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,7 @@ export const Blocks = () => {
2828
variables: { first: itemsPerPage, offset: currentPage * itemsPerPage }
2929
});
3030

31-
const handleNext = () => {
32-
setCurrentPage(prev => prev + 1);
33-
};
3431

35-
const handlePrevious = () => {
36-
setCurrentPage(prev => Math.max(0, prev - 1));
37-
};
3832

3933
const pageControls = (
4034
<>
@@ -44,8 +38,8 @@ export const Blocks = () => {
4438
totalCount={data?.blocks.totalCount}
4539
itemsPerPage={itemsPerPage}
4640
dataLength={data?.blocks.nodes.length}
47-
onNext={handleNext}
48-
onPrevious={handlePrevious}
41+
42+
onPageChange={setCurrentPage}
4943
/>}</>
5044
);
5145
return (

‎src/pages/Events.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,7 @@ export const Events = () => {
3030
variables: {first: itemsPerPage, offset: currentPage * itemsPerPage}
3131
});
3232

33-
const handleNext = () => {
34-
setCurrentPage(prev => prev + 1);
35-
};
3633

37-
const handlePrevious = () => {
38-
setCurrentPage(prev => Math.max(0, prev - 1));
39-
};
4034

4135
const pageControls = (
4236
<>
@@ -46,8 +40,7 @@ export const Events = () => {
4640
totalCount={data?.events.totalCount}
4741
itemsPerPage={itemsPerPage}
4842
dataLength={data?.events.nodes.length}
49-
onNext={handleNext}
50-
onPrevious={handlePrevious}
43+
onPageChange={setCurrentPage}
5144
/>}</>
5245
);
5346
return (

‎src/pages/Extrinsics.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,7 @@ export const Extrinsics = () => {
3737
variables: { first: itemsPerPage, offset: currentPage * itemsPerPage }
3838
});
3939

40-
const handleNext = () => {
41-
setCurrentPage(prev => prev + 1);
42-
};
4340

44-
const handlePrevious = () => {
45-
setCurrentPage(prev => Math.max(0, prev - 1));
46-
};
4741

4842
const pageControls = (
4943
<>
@@ -53,8 +47,8 @@ export const Extrinsics = () => {
5347
totalCount={data?.extrinsics.totalCount}
5448
itemsPerPage={itemsPerPage}
5549
dataLength={data?.extrinsics.nodes.length}
56-
onNext={handleNext}
57-
onPrevious={handlePrevious}
50+
51+
onPageChange={setCurrentPage}
5852
/>}</>
5953
);
6054
return (

0 commit comments

Comments
 (0)