Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: Transaction history improvements #298

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+157 −18
Open

Feat: Transaction history improvements #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e8858d1
feat: add chevron icon for clarity
Xaroz Oct 21, 2024
e48d473
feat: wallet floating buttons
Xaroz Oct 21, 2024
a46c810
chore: added warp docs link and sort imports
Xaroz Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions src/components/icons/Docs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { memo } from 'react';
import { Color } from '../../styles/Color';

interface Props {
width?: string | number;
height?: string | number;
color?: string;
className?: string;
}

function _DocsIcon({ className, color, height = 24, width = 24 }: Props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 -960 960 960"
width={width}
fill={color || Color.white}
className={className}
>
<path d="M320-440h320v-80H320v80Zm0 120h320v-80H320v80Zm0 120h200v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z" />
</svg>
);
}

export const DocsIcon = memo(_DocsIcon);
28 changes: 28 additions & 0 deletions src/components/icons/Wallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { memo } from 'react';

interface Props {
width?: string | number;
height?: string | number;
color?: string;
className?: string;
}

function _WalletIcon({ className, color, height = 14, width = 17 }: Props) {
return (
<svg
width={width}
height={height}
viewBox="0 0 17 14"
fill={color}
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M3.33333 13.4737C2.41667 13.4737 1.63194 13.1439 0.979167 12.4842C0.326389 11.8246 0 11.0316 0 10.1053V3.36842C0 2.44211 0.326389 1.64912 0.979167 0.989474C1.63194 0.329825 2.41667 0 3.33333 0H13.3333C14.25 0 15.0347 0.329825 15.6875 0.989474C16.3403 1.64912 16.6667 2.44211 16.6667 3.36842V10.1053C16.6667 11.0316 16.3403 11.8246 15.6875 12.4842C15.0347 13.1439 14.25 13.4737 13.3333 13.4737H3.33333ZM3.33333 3.57895H13.3333C13.7361 3.57895 14.1146 3.64211 14.4687 3.76842C14.8229 3.89474 15.1389 4.07719 15.4167 4.31579V3.36842C15.4167 2.77895 15.2153 2.2807 14.8125 1.87368C14.4097 1.46667 13.9167 1.26316 13.3333 1.26316H3.33333C2.75 1.26316 2.25694 1.46667 1.85417 1.87368C1.45139 2.2807 1.25 2.77895 1.25 3.36842V4.31579C1.52778 4.07719 1.84375 3.89474 2.19792 3.76842C2.55208 3.64211 2.93056 3.57895 3.33333 3.57895ZM1.3125 6.4421L11.25 8.86316C11.3472 8.89123 11.4479 8.89474 11.5521 8.87368C11.6562 8.85263 11.7431 8.80702 11.8125 8.73684L15.1458 5.91579C14.9653 5.59298 14.7153 5.33333 14.3958 5.13684C14.0764 4.94035 13.7222 4.84211 13.3333 4.84211H3.33333C2.84722 4.84211 2.41667 4.99298 2.04167 5.29474C1.66667 5.59649 1.42361 5.97895 1.3125 6.4421Z"
fill={color}
/>
</svg>
);
}

export const WalletIcon = memo(_WalletIcon);
28 changes: 28 additions & 0 deletions src/components/layout/AppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,26 @@ import Head from 'next/head';
import { PropsWithChildren } from 'react';

import { APP_NAME, BACKGROUND_COLOR, BACKGROUND_IMAGE } from '../../consts/app';
import { useStore } from '../../features/store';
import { SideBarMenu } from '../../features/wallet/SideBarMenu';
import { WalletEnvSelectionModal } from '../../features/wallet/WalletEnvSelectionModal';
import { useAccounts } from '../../features/wallet/hooks/multiProtocol';
import { Footer } from '../nav/Footer';
import { Header } from '../nav/Header';

export function AppLayout({ children }: PropsWithChildren) {
const { readyAccounts } = useAccounts();
const numReady = readyAccounts.length;

const { showEnvSelectModal, setShowEnvSelectModal, isSideBarOpen, setIsSideBarOpen } = useStore(
(s) => ({
showEnvSelectModal: s.showEnvSelectModal,
setShowEnvSelectModal: s.setShowEnvSelectModal,
isSideBarOpen: s.isSideBarOpen,
setIsSideBarOpen: s.setIsSideBarOpen,
}),
);

return (
<>
<Head>
Expand All @@ -24,6 +40,18 @@ export function AppLayout({ children }: PropsWithChildren) {
</div>
<Footer />
</div>

<WalletEnvSelectionModal
isOpen={showEnvSelectModal}
close={() => setShowEnvSelectModal(false)}
/>
{numReady > 0 && (
<SideBarMenu
onClose={() => setIsSideBarOpen(false)}
isOpen={isSideBarOpen}
onConnectWallet={() => setShowEnvSelectModal(true)}
/>
)}
</>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/consts/links.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const links = {
discord: 'https://discord.gg/VK9ZUy3aTV',
github: 'https://github.com/hyperlane-xyz/hyperlane-warp-ui-template',
docs: 'https://docs.hyperlane.xyz',
warpDocs: 'https://docs.hyperlane.xyz/docs/reference/applications/warp-routes',
gasDocs: 'https://docs.hyperlane.xyz/docs/reference/hooks/interchain-gas',
chains: 'https://docs.hyperlane.xyz/docs/resources/domains',
twitter: 'https://twitter.com/hyperlane',
Expand Down
12 changes: 12 additions & 0 deletions src/features/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export interface AppState {
failUnconfirmedTransfers: () => void;
transferLoading: boolean;
setTransferLoading: (isLoading: boolean) => void;
isSideBarOpen: boolean;
setIsSideBarOpen: (isOpen: boolean) => void;
showEnvSelectModal: boolean;
setShowEnvSelectModal: (show: boolean) => void;
}

export const useStore = create<AppState>()(
Expand Down Expand Up @@ -55,6 +59,14 @@ export const useStore = create<AppState>()(
setTransferLoading: (isLoading) => {
set(() => ({ transferLoading: isLoading }));
},
isSideBarOpen: false,
setIsSideBarOpen: (isOpen) => {
set(() => ({ isSideBarOpen: isOpen }));
},
showEnvSelectModal: false,
setShowEnvSelectModal: (show) => {
set(() => ({ showEnvSelectModal: show }));
},
}),
{
name: 'app-state',
Expand Down
27 changes: 9 additions & 18 deletions src/features/wallet/WalletControlBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import Image from 'next/image';
import { useState } from 'react';

import { ProtocolType, shortenAddress } from '@hyperlane-xyz/utils';
import { ChevronIcon } from '@hyperlane-xyz/widgets';

import { SolidButton } from '../../components/buttons/SolidButton';
import { WalletLogo } from '../../components/icons/WalletLogo';
import Wallet from '../../images/icons/wallet.svg';
import { useIsSsr } from '../../utils/ssr';
import { useStore } from '../store';

import { SideBarMenu } from './SideBarMenu';
import { WalletEnvSelectionModal } from './WalletEnvSelectionModal';
import { useAccounts, useWalletDetails } from './hooks/multiProtocol';

export function WalletControlBar() {
const isSsr = useIsSsr();

const [showEnvSelectModal, setShowEnvSelectModal] = useState(false);
const [isSideBarOpen, setIsSideBarOpen] = useState(false);
const { setShowEnvSelectModal, setIsSideBarOpen } = useStore((s) => ({
setShowEnvSelectModal: s.setShowEnvSelectModal,
setIsSideBarOpen: s.setIsSideBarOpen,
}));

const { readyAccounts } = useAccounts();
const walletDetails = useWalletDetails();
Expand Down Expand Up @@ -47,7 +48,7 @@ export function WalletControlBar() {

{numReady === 1 && (
<SolidButton onClick={() => setIsSideBarOpen(true)} classes="px-2.5 py-1" color="white">
<div className="flex items-center justify-center">
<div className="flex w-36 items-center justify-center xs:w-auto">
<WalletLogo walletDetails={firstWallet} size={26} />
<div className="mx-3 flex flex-col items-start">
<div className="text-xs text-gray-500">{firstWallet.name || 'Wallet'}</div>
Expand All @@ -57,6 +58,7 @@ export function WalletControlBar() {
: 'Unknown'}
</div>
</div>
<ChevronIcon direction="s" width={10} height={6} />
</div>
</SolidButton>
)}
Expand All @@ -74,22 +76,11 @@ export function WalletControlBar() {
<div className="text-xs text-gray-500">Wallets</div>
<div className="text-xs">{`${numReady} Connected`}</div>
</div>
<ChevronIcon direction="s" width={10} height={6} />
</div>
</SolidButton>
)}
</div>

<WalletEnvSelectionModal
isOpen={showEnvSelectModal}
close={() => setShowEnvSelectModal(false)}
/>
{numReady > 0 && (
<SideBarMenu
onClose={() => setIsSideBarOpen(false)}
isOpen={isSideBarOpen}
onConnectWallet={() => setShowEnvSelectModal(true)}
/>
)}
</div>
);
}
48 changes: 48 additions & 0 deletions src/features/wallet/WalletFloatingButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import Link from 'next/link';

import { IconButton } from '../../components/buttons/IconButton';
import { DocsIcon } from '../../components/icons/Docs';
import { WalletIcon } from '../../components/icons/Wallet';
import { links } from '../../consts/links';
import HistoryIcon from '../../images/icons/history.svg';
import { Color } from '../../styles/Color';
import { useIsMobile } from '../../styles/mediaQueries';
import { useStore } from '../store';

import { useAccounts } from './hooks/multiProtocol';

export function WalletFloatingButtons() {
const { readyAccounts } = useAccounts();
const isMobile = useIsMobile();
const { setShowEnvSelectModal, setIsSideBarOpen, isSideBarOpen } = useStore((s) => ({
setShowEnvSelectModal: s.setShowEnvSelectModal,
setIsSideBarOpen: s.setIsSideBarOpen,
isSideBarOpen: s.isSideBarOpen,
}));

const numReady = readyAccounts.length;

if (isMobile) return null;

return (
<div className="flex items-center justify-end gap-4">
<Link href={links.warpDocs} target="_blank" className={linkStyles}>
<DocsIcon />
</Link>
{numReady === 0 && (
<IconButton title="Connect Wallet" onClick={() => setShowEnvSelectModal(true)}>
<WalletIcon color={Color.white} height={17} width={20} />
</IconButton>
)}
{numReady >= 1 && (
<IconButton
imgSrc={HistoryIcon}
title="History"
onClick={() => setIsSideBarOpen(!isSideBarOpen)}
/>
)}
</div>
);
}

const linkStyles = 'hover:opacity-70 active:opacity-60';
1 change: 1 addition & 0 deletions src/images/icons/docs.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/images/icons/history.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import type { NextPage } from 'next';
import { TipCard } from '../components/tip/TipCard';
import { TransferTokenCard } from '../features/transfer/TransferTokenCard';

import { WalletFloatingButtons } from '../features/wallet/WalletFloatingButtons';

const Home: NextPage = () => {
return (
<div className="space-y-3 pt-4">
<TipCard />
<WalletFloatingButtons />
<TransferTokenCard />
</div>
);
Expand Down
Loading