From fc3fff15a4d7c8591321bce7dc4170dd8f1abad8 Mon Sep 17 00:00:00 2001 From: Xaroz Date: Tue, 5 Nov 2024 15:30:13 -0400 Subject: [PATCH 01/11] chore: remove repeated components from widgets --- src/components/icons/Chevron.tsx | 53 ------------ src/components/icons/Discord.tsx | 38 --------- src/components/icons/Docs.tsx | 30 ------- src/components/icons/Github.tsx | 30 ------- src/components/icons/History.tsx | 30 ------- src/components/icons/HyperlaneLogo.tsx | 38 --------- src/components/icons/LinkedIn.tsx | 30 ------- src/components/icons/Medium.tsx | 32 -------- src/components/icons/Twitter.tsx | 30 ------- src/components/icons/Wallet.tsx | 30 ------- src/components/icons/Web.tsx | 80 ------------------- src/components/icons/WideChevron.tsx | 2 +- src/components/icons/XIcon.tsx | 31 ------- src/components/nav/Footer.tsx | 14 ++-- src/features/transfer/TransferTokenForm.tsx | 2 +- src/features/wallet/WalletFloatingButtons.tsx | 5 +- 16 files changed, 10 insertions(+), 465 deletions(-) delete mode 100644 src/components/icons/Chevron.tsx delete mode 100644 src/components/icons/Discord.tsx delete mode 100644 src/components/icons/Docs.tsx delete mode 100644 src/components/icons/Github.tsx delete mode 100644 src/components/icons/History.tsx delete mode 100644 src/components/icons/HyperlaneLogo.tsx delete mode 100644 src/components/icons/LinkedIn.tsx delete mode 100644 src/components/icons/Medium.tsx delete mode 100644 src/components/icons/Twitter.tsx delete mode 100644 src/components/icons/Wallet.tsx delete mode 100644 src/components/icons/Web.tsx delete mode 100644 src/components/icons/XIcon.tsx diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx deleted file mode 100644 index 17f990d2..00000000 --- a/src/components/icons/Chevron.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { memo } from 'react'; - -import { Color } from '../../styles/Color'; - -interface Props { - width?: string | number; - height?: string | number; - direction: 'n' | 'e' | 's' | 'w'; - color?: string; - classes?: string; -} - -function _ChevronIcon({ width, height, direction, color, classes }: Props) { - let directionClass; - switch (direction) { - case 'n': - directionClass = 'rotate-180'; - break; - case 'e': - directionClass = '-rotate-90'; - break; - case 's': - directionClass = ''; - break; - case 'w': - directionClass = 'rotate-90'; - break; - default: - throw new Error(`Invalid chevron direction ${direction}`); - } - - return ( - - - - ); -} - -export const ChevronIcon = memo(_ChevronIcon); diff --git a/src/components/icons/Discord.tsx b/src/components/icons/Discord.tsx deleted file mode 100644 index 9831cb3d..00000000 --- a/src/components/icons/Discord.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { memo } from 'react'; - -function _Discord({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - - - - - - - - ); -} - -export const Discord = memo(_Discord); diff --git a/src/components/icons/Docs.tsx b/src/components/icons/Docs.tsx deleted file mode 100644 index 7579a350..00000000 --- a/src/components/icons/Docs.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -import { Color } from '../../styles/Color'; -import { IconProps } from './types'; - -function _DocsIcon({ - width = 24, - height = 24, - className, - color = Color.black, - ...props -}: IconProps) { - return ( - - - - ); -} - -export const DocsIcon = memo(_DocsIcon); diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx deleted file mode 100644 index cc12880c..00000000 --- a/src/components/icons/Github.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Github({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Github = memo(_Github); diff --git a/src/components/icons/History.tsx b/src/components/icons/History.tsx deleted file mode 100644 index 13aa37c8..00000000 --- a/src/components/icons/History.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -import { Color } from '../../styles/Color'; -import { IconProps } from './types'; - -function _HistoryIcon({ - width = 24, - height = 24, - className, - color = Color.black, - ...props -}: IconProps) { - return ( - - - - ); -} - -export const HistoryIcon = memo(_HistoryIcon); diff --git a/src/components/icons/HyperlaneLogo.tsx b/src/components/icons/HyperlaneLogo.tsx deleted file mode 100644 index 52810465..00000000 --- a/src/components/icons/HyperlaneLogo.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { memo } from 'react'; - -function _HyperlaneLogo({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - - - ); -} - -export const HyperlaneLogo = memo(_HyperlaneLogo); diff --git a/src/components/icons/LinkedIn.tsx b/src/components/icons/LinkedIn.tsx deleted file mode 100644 index f0adaddc..00000000 --- a/src/components/icons/LinkedIn.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Linkedin({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Linkedin = memo(_Linkedin); diff --git a/src/components/icons/Medium.tsx b/src/components/icons/Medium.tsx deleted file mode 100644 index 11d0d175..00000000 --- a/src/components/icons/Medium.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { memo } from 'react'; - -function _Medium({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Medium = memo(_Medium); diff --git a/src/components/icons/Twitter.tsx b/src/components/icons/Twitter.tsx deleted file mode 100644 index c47f6583..00000000 --- a/src/components/icons/Twitter.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Twitter({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Twitter = memo(_Twitter); diff --git a/src/components/icons/Wallet.tsx b/src/components/icons/Wallet.tsx deleted file mode 100644 index f6ff18a0..00000000 --- a/src/components/icons/Wallet.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -import { Color } from '../../styles/Color'; -import { IconProps } from './types'; - -function _WalletIcon({ - width = 17, - height = 14, - className, - color = Color.black, - ...props -}: IconProps) { - return ( - - - - ); -} - -export const WalletIcon = memo(_WalletIcon); diff --git a/src/components/icons/Web.tsx b/src/components/icons/Web.tsx deleted file mode 100644 index cb97eb33..00000000 --- a/src/components/icons/Web.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { memo } from 'react'; - -function _Web({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - - - - - - - - - - - - - ); -} - -export const Web = memo(_Web); diff --git a/src/components/icons/WideChevron.tsx b/src/components/icons/WideChevron.tsx index 7d579376..4d8ae602 100644 --- a/src/components/icons/WideChevron.tsx +++ b/src/components/icons/WideChevron.tsx @@ -1,4 +1,4 @@ -import { WideChevron as WideChevronInner } from '@hyperlane-xyz/widgets'; +import { WideChevronIcon as WideChevronInner } from '@hyperlane-xyz/widgets'; import { Color } from '../../styles/Color'; diff --git a/src/components/icons/XIcon.tsx b/src/components/icons/XIcon.tsx deleted file mode 100644 index 311510f8..00000000 --- a/src/components/icons/XIcon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { memo } from 'react'; - -function _XIcon({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - - ); -} - -export const XIcon = memo(_XIcon); diff --git a/src/components/nav/Footer.tsx b/src/components/nav/Footer.tsx index 6d8c65a7..09842dd2 100644 --- a/src/components/nav/Footer.tsx +++ b/src/components/nav/Footer.tsx @@ -1,12 +1,10 @@ import Link from 'next/link'; import { ReactNode } from 'react'; +import { DiscordIcon, GithubIcon, HyperlaneLogo, TwitterIcon } from '@hyperlane-xyz/widgets'; + import { links } from '../../consts/links'; import { Color } from '../../styles/Color'; -import { Discord } from '../icons/Discord'; -import { Github } from '../icons/Github'; -import { HyperlaneLogo } from '../icons/HyperlaneLogo'; -import { Twitter } from '../icons/Twitter'; type FooterLink = { title: string; @@ -18,13 +16,13 @@ type FooterLink = { const footerLinks: FooterLink[] = [ { title: 'Docs', url: links.docs, external: true }, { title: 'Terms', url: links.tos, external: true }, - { title: 'Twitter', url: links.twitter, external: true, icon: }, + { title: 'Twitter', url: links.twitter, external: true, icon: }, { title: 'Homepage', url: links.home, external: true }, { title: 'Privacy', url: links.privacyPolicy, external: true }, - { title: 'Discord', url: links.discord, external: true, icon: }, + { title: 'Discord', url: links.discord, external: true, icon: }, { title: 'Explorer', url: links.explorer, external: true }, { title: 'Bounty', url: links.bounty, external: true }, - { title: 'Github', url: links.github, external: true, icon: }, + { title: 'Github', url: links.github, external: true, icon: }, ]; export function Footer() { @@ -44,7 +42,7 @@ function FooterLogo() { return (
- +
Go interchain
diff --git a/src/features/transfer/TransferTokenForm.tsx b/src/features/transfer/TransferTokenForm.tsx index 7a2415ff..c3539cdb 100644 --- a/src/features/transfer/TransferTokenForm.tsx +++ b/src/features/transfer/TransferTokenForm.tsx @@ -5,12 +5,12 @@ import { toast } from 'react-toastify'; import { TokenAmount } from '@hyperlane-xyz/sdk'; import { ProtocolType, errorToString, isNullish, toWei } from '@hyperlane-xyz/utils'; +import { ChevronIcon } from '@hyperlane-xyz/widgets'; import { SmallSpinner } from '../../components/animation/SmallSpinner'; import { ConnectAwareSubmitButton } from '../../components/buttons/ConnectAwareSubmitButton'; import { IconButton } from '../../components/buttons/IconButton'; import { SolidButton } from '../../components/buttons/SolidButton'; -import { ChevronIcon } from '../../components/icons/Chevron'; import { TextField } from '../../components/input/TextField'; import { getIndexForToken, getTokenByIndex, getTokens, getWarpCore } from '../../context/context'; import SwapIcon from '../../images/icons/swap.svg'; diff --git a/src/features/wallet/WalletFloatingButtons.tsx b/src/features/wallet/WalletFloatingButtons.tsx index f2f90828..80c6a7fc 100644 --- a/src/features/wallet/WalletFloatingButtons.tsx +++ b/src/features/wallet/WalletFloatingButtons.tsx @@ -1,13 +1,12 @@ import Link from 'next/link'; +import { DocsIcon, HistoryIcon, WalletIcon } from '@hyperlane-xyz/widgets'; + import { IconButton } from '../../components/buttons/IconButton'; -import { DocsIcon } from '../../components/icons/Docs'; -import { WalletIcon } from '../../components/icons/Wallet'; import { links } from '../../consts/links'; import { Color } from '../../styles/Color'; import { useStore } from '../store'; -import { HistoryIcon } from '../../components/icons/History'; import { useAccounts } from './hooks/multiProtocol'; export function WalletFloatingButtons() { From ae55f6cbb1a61c8721266ba91391dc39489c2422 Mon Sep 17 00:00:00 2001 From: Xaroz Date: Mon, 11 Nov 2024 12:55:20 -0400 Subject: [PATCH 02/11] chore: remove components --- package.json | 8 +- src/images/icons/docs.svg | 1 - yarn.lock | 240 ++++++++++++++++++++++++++++---------- 3 files changed, 182 insertions(+), 67 deletions(-) delete mode 100644 src/images/icons/docs.svg diff --git a/package.json b/package.json index 9231e320..339f7fe3 100644 --- a/package.json +++ b/package.json @@ -17,10 +17,10 @@ "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@headlessui/react": "^1.7.14", - "@hyperlane-xyz/registry": "5.0.0", - "@hyperlane-xyz/sdk": "5.6.2", - "@hyperlane-xyz/utils": "5.6.2", - "@hyperlane-xyz/widgets": "5.6.2", + "@hyperlane-xyz/registry": "6.0.0", + "@hyperlane-xyz/sdk": "7.0.0", + "@hyperlane-xyz/utils": "7.0.0", + "@hyperlane-xyz/widgets": "7.0.0", "@interchain-ui/react": "^1.23.28", "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6", "@metamask/post-message-stream": "6.1.2", diff --git a/src/images/icons/docs.svg b/src/images/icons/docs.svg deleted file mode 100644 index 22a3fb13..00000000 --- a/src/images/icons/docs.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index db799358..f77b8717 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4017,13 +4017,13 @@ __metadata: languageName: node linkType: hard -"@hyperlane-xyz/core@npm:5.6.1": - version: 5.6.1 - resolution: "@hyperlane-xyz/core@npm:5.6.1" +"@hyperlane-xyz/core@npm:5.8.0": + version: 5.8.0 + resolution: "@hyperlane-xyz/core@npm:5.8.0" dependencies: "@arbitrum/nitro-contracts": "npm:^1.2.1" "@eth-optimism/contracts": "npm:^0.6.0" - "@hyperlane-xyz/utils": "npm:5.6.2" + "@hyperlane-xyz/utils": "npm:7.0.0" "@layerzerolabs/lz-evm-oapp-v2": "npm:2.0.2" "@openzeppelin/contracts": "npm:^4.9.3" "@openzeppelin/contracts-upgradeable": "npm:^v4.9.3" @@ -4032,64 +4032,61 @@ __metadata: "@ethersproject/abi": "*" "@ethersproject/providers": "*" "@types/sinon-chai": "*" - checksum: 10/e11dddbd8d4e08d76798699f9b848ce48e7144edaf247bd41d73067c2ed2364a0529c51a57d789515059fe28c2923badf614b590600c40deb5a5311face653c1 + checksum: 10/49ca59dd59e02acf996a047d90ff5a2db7b6bcce1eb3425d91261383686076f584f6fc9efc1e21ed14d961b69ed0156e8bbaa8148873d898cc101cf6d7d0959e languageName: node linkType: hard -"@hyperlane-xyz/registry@npm:5.0.0": - version: 5.0.0 - resolution: "@hyperlane-xyz/registry@npm:5.0.0" +"@hyperlane-xyz/registry@npm:6.0.0": + version: 6.0.0 + resolution: "@hyperlane-xyz/registry@npm:6.0.0" dependencies: yaml: "npm:2.4.5" zod: "npm:^3.21.2" - checksum: 10/0d2b0066776ddae1fc67abc976a3a2e1bede700f8fa8fab8a0c901a483cb0fb8125aba34b84b9dbdd08503ca94e50d7577359e200b8a4d353c4e45e9e80790e3 + checksum: 10/6877653d442425afd979ccbb90b12c0e561c09f15a854b0a2858ed0cd13f1f0e5887a821890a54264f6eab1736fce333362ea5711f9f775bb4463e3bea5e28ad languageName: node linkType: hard -"@hyperlane-xyz/sdk@npm:5.6.2": - version: 5.6.2 - resolution: "@hyperlane-xyz/sdk@npm:5.6.2" +"@hyperlane-xyz/sdk@npm:7.0.0": + version: 7.0.0 + resolution: "@hyperlane-xyz/sdk@npm:7.0.0" dependencies: "@arbitrum/sdk": "npm:^4.0.0" "@aws-sdk/client-s3": "npm:^3.74.0" "@cosmjs/cosmwasm-stargate": "npm:^0.32.4" "@cosmjs/stargate": "npm:^0.32.4" - "@hyperlane-xyz/core": "npm:5.6.1" - "@hyperlane-xyz/utils": "npm:5.6.2" + "@hyperlane-xyz/core": "npm:5.8.0" + "@hyperlane-xyz/utils": "npm:7.0.0" "@safe-global/api-kit": "npm:1.3.0" "@safe-global/protocol-kit": "npm:1.3.0" "@safe-global/safe-deployments": "npm:1.37.8" - "@solana/spl-token": "npm:^0.3.8" - "@solana/web3.js": "npm:^1.78.0" - "@types/coingecko-api": "npm:^1.0.10" - "@wagmi/chains": "npm:^1.8.0" + "@solana/spl-token": "npm:^0.4.9" + "@solana/web3.js": "npm:^1.95.4" bignumber.js: "npm:^9.1.1" - coingecko-api: "npm:^1.0.10" cosmjs-types: "npm:^0.9.0" cross-fetch: "npm:^3.1.5" ethers: "npm:^5.7.2" pino: "npm:^8.19.0" - viem: "npm:^1.20.0" + viem: "npm:^2.21.40" zod: "npm:^3.21.2" peerDependencies: "@ethersproject/abi": "*" "@ethersproject/providers": "*" - checksum: 10/8dbb6da1df9d4664d02c3d9c3a3e183dab471707d34315308c4f9f6de3198e3a265b3d34078e6345ccfb6bc336c3496a813167aff6e50aa9703f4f0c7bf6523f + checksum: 10/e4139de27ab89fc3313392d99e5e3e4a8c4a9ad841643d307b99670b05b2032c25be7ad5c17a67453fe97b02234862c2fcc9fba7e1d3bbda762d6486b877f5ab languageName: node linkType: hard -"@hyperlane-xyz/utils@npm:5.6.2": - version: 5.6.2 - resolution: "@hyperlane-xyz/utils@npm:5.6.2" +"@hyperlane-xyz/utils@npm:7.0.0": + version: 7.0.0 + resolution: "@hyperlane-xyz/utils@npm:7.0.0" dependencies: "@cosmjs/encoding": "npm:^0.32.4" - "@solana/web3.js": "npm:^1.78.0" + "@solana/web3.js": "npm:^1.95.4" bignumber.js: "npm:^9.1.1" ethers: "npm:^5.7.2" lodash-es: "npm:^4.17.21" pino: "npm:^8.19.0" yaml: "npm:2.4.5" - checksum: 10/777152d32450c2fa724f969e76838d82f209d5edf6c1c10f5ecd6d2fe46d0e520535ed44ee097f9e8665d7beda045dd735604d93bd52b8c4d106fe5680091c63 + checksum: 10/57c4e10ba2d4467aecce4b7a698d3081a270f0d8fde165f055a78efdc0a5c221a75b04c024048721dae587b1724ee50fc1c7ad8aee9e19ece5aa48cadbe70bcd languageName: node linkType: hard @@ -4110,10 +4107,10 @@ __metadata: "@emotion/react": "npm:^11.13.0" "@emotion/styled": "npm:^11.13.0" "@headlessui/react": "npm:^1.7.14" - "@hyperlane-xyz/registry": "npm:5.0.0" - "@hyperlane-xyz/sdk": "npm:5.6.2" - "@hyperlane-xyz/utils": "npm:5.6.2" - "@hyperlane-xyz/widgets": "npm:5.6.2" + "@hyperlane-xyz/registry": "npm:6.0.0" + "@hyperlane-xyz/sdk": "npm:7.0.0" + "@hyperlane-xyz/utils": "npm:7.0.0" + "@hyperlane-xyz/widgets": "npm:7.0.0" "@interchain-ui/react": "npm:^1.23.28" "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6" "@metamask/post-message-stream": "npm:6.1.2" @@ -4167,19 +4164,19 @@ __metadata: languageName: unknown linkType: soft -"@hyperlane-xyz/widgets@npm:5.6.2": - version: 5.6.2 - resolution: "@hyperlane-xyz/widgets@npm:5.6.2" +"@hyperlane-xyz/widgets@npm:7.0.0": + version: 7.0.0 + resolution: "@hyperlane-xyz/widgets@npm:7.0.0" dependencies: "@headlessui/react": "npm:^2.1.8" - "@hyperlane-xyz/sdk": "npm:5.6.2" - "@hyperlane-xyz/utils": "npm:5.6.2" + "@hyperlane-xyz/sdk": "npm:7.0.0" + "@hyperlane-xyz/utils": "npm:7.0.0" clsx: "npm:^2.1.1" react-tooltip: "npm:^5.28.0" peerDependencies: react: ^18 react-dom: ^18 - checksum: 10/06ad467f6a3a10610a9d551c24e4de6f420d49894e455d6f9b6ed3887562a093eecb998d9e689f68b7d11e38962c1802c7a87eb49bd3201904e668aa6fbf66c9 + checksum: 10/6f7d095b53ed13c6ff385eb0214fe4f49ca2bba3c9367a1cb31903ed08d7902f3e0f40f104c475731ac5e5f4b88f05b2acf9086b222a38250b9e5cd180395154 languageName: node linkType: hard @@ -8319,6 +8316,122 @@ __metadata: languageName: node linkType: hard +"@solana/codecs-core@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/codecs-core@npm:2.0.0-rc.1" + dependencies: + "@solana/errors": "npm:2.0.0-rc.1" + peerDependencies: + typescript: ">=5" + checksum: 10/4ea0b7a12dfb2d28e132bd1ab7a574bad375fcc4a938ea79f38e881cfd56878a6d09a8b2173a28d5be477c28cbb2eb6deeb33902661ec44687fe3749c2aa0dd7 + languageName: node + linkType: hard + +"@solana/codecs-data-structures@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/codecs-data-structures@npm:2.0.0-rc.1" + dependencies: + "@solana/codecs-core": "npm:2.0.0-rc.1" + "@solana/codecs-numbers": "npm:2.0.0-rc.1" + "@solana/errors": "npm:2.0.0-rc.1" + peerDependencies: + typescript: ">=5" + checksum: 10/738cde99885b7e111a9e237e04364cb4157290b28bd91ed1933120e27a43588e51c51983d074677941f734c380cabb7821c2e2c2047e5879f2f17b5d21cd1888 + languageName: node + linkType: hard + +"@solana/codecs-numbers@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/codecs-numbers@npm:2.0.0-rc.1" + dependencies: + "@solana/codecs-core": "npm:2.0.0-rc.1" + "@solana/errors": "npm:2.0.0-rc.1" + peerDependencies: + typescript: ">=5" + checksum: 10/dade8f7cdba9004a26abc8845424b5b4efe9cf0008ac9b4f5e7663676f42957a3c146c87cfa47b764e06c05119692d5a5011e8daa8abf07ce08a28445f401f8e + languageName: node + linkType: hard + +"@solana/codecs-strings@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/codecs-strings@npm:2.0.0-rc.1" + dependencies: + "@solana/codecs-core": "npm:2.0.0-rc.1" + "@solana/codecs-numbers": "npm:2.0.0-rc.1" + "@solana/errors": "npm:2.0.0-rc.1" + peerDependencies: + fastestsmallesttextencoderdecoder: ^1.0.22 + typescript: ">=5" + checksum: 10/2e10b54ca73374e86fb9afea15ae2ea63f24f2cc6c93386bd8f4d9193c8f55b7df103c5438a02dfc0c34e8cd0369f09c678b5aab07c1d7c38c37a8fa9b79b7da + languageName: node + linkType: hard + +"@solana/codecs@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/codecs@npm:2.0.0-rc.1" + dependencies: + "@solana/codecs-core": "npm:2.0.0-rc.1" + "@solana/codecs-data-structures": "npm:2.0.0-rc.1" + "@solana/codecs-numbers": "npm:2.0.0-rc.1" + "@solana/codecs-strings": "npm:2.0.0-rc.1" + "@solana/options": "npm:2.0.0-rc.1" + peerDependencies: + typescript: ">=5" + checksum: 10/eb9dbd8fad5d6e34d1a14f3184d1e6764a895667c6ca5cf785a199eb07a3f129a7681f4e330e8d983d0844b1581720235dc910b7bb22afdca4a2363ebc6481e2 + languageName: node + linkType: hard + +"@solana/errors@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/errors@npm:2.0.0-rc.1" + dependencies: + chalk: "npm:^5.3.0" + commander: "npm:^12.1.0" + peerDependencies: + typescript: ">=5" + bin: + errors: bin/cli.mjs + checksum: 10/e084d9930d4b17163e838c59fb5255d4ea85e87a3a1142cf1731505eaa036525818980abe9c9230eae6a5076d63e8559780d2126c81b9989e2d217f9326f6063 + languageName: node + linkType: hard + +"@solana/options@npm:2.0.0-rc.1": + version: 2.0.0-rc.1 + resolution: "@solana/options@npm:2.0.0-rc.1" + dependencies: + "@solana/codecs-core": "npm:2.0.0-rc.1" + "@solana/codecs-data-structures": "npm:2.0.0-rc.1" + "@solana/codecs-numbers": "npm:2.0.0-rc.1" + "@solana/codecs-strings": "npm:2.0.0-rc.1" + "@solana/errors": "npm:2.0.0-rc.1" + peerDependencies: + typescript: ">=5" + checksum: 10/99091f2a79c8745e63d3a618724daf296789b9d4d1a465bfdebe470c9eae191832f8e4c1d5c75797a3398f9ef5ba62a23d9afbf66bb8b19cd572bb0169408283 + languageName: node + linkType: hard + +"@solana/spl-token-group@npm:^0.0.7": + version: 0.0.7 + resolution: "@solana/spl-token-group@npm:0.0.7" + dependencies: + "@solana/codecs": "npm:2.0.0-rc.1" + peerDependencies: + "@solana/web3.js": ^1.95.3 + checksum: 10/9a048fee471e1e829b39c30991f2e168bcf5b2ad269f891cf6148c0226f66463a221545e306e395e43826dd7e44de431a1266b70e366bb0682d4b8f799f5195b + languageName: node + linkType: hard + +"@solana/spl-token-metadata@npm:^0.1.6": + version: 0.1.6 + resolution: "@solana/spl-token-metadata@npm:0.1.6" + dependencies: + "@solana/codecs": "npm:2.0.0-rc.1" + peerDependencies: + "@solana/web3.js": ^1.95.3 + checksum: 10/c38c656c22248aff6c89c52930301cbcf571061e0d99ba80f05cd7d4bde7cb243e4a13c0d28116a0e6e8ccd2dac1f5094c206426a95d3cc6c188cfd6f6a8d2b5 + languageName: node + linkType: hard + "@solana/spl-token@npm:^0.3.8": version: 0.3.8 resolution: "@solana/spl-token@npm:0.3.8" @@ -8332,6 +8445,21 @@ __metadata: languageName: node linkType: hard +"@solana/spl-token@npm:^0.4.9": + version: 0.4.9 + resolution: "@solana/spl-token@npm:0.4.9" + dependencies: + "@solana/buffer-layout": "npm:^4.0.0" + "@solana/buffer-layout-utils": "npm:^0.2.0" + "@solana/spl-token-group": "npm:^0.0.7" + "@solana/spl-token-metadata": "npm:^0.1.6" + buffer: "npm:^6.0.3" + peerDependencies: + "@solana/web3.js": ^1.95.3 + checksum: 10/8df4eb4199eae9c1ea26f7d04170ca4bc7011e2b86155e8872000534d4aafc5bb270bba391b8bda1bc422251d9dc87357dee8c2abec588d2b9b4b7c041ed9490 + languageName: node + linkType: hard + "@solana/wallet-adapter-alpha@npm:^0.1.9": version: 0.1.9 resolution: "@solana/wallet-adapter-alpha@npm:0.1.9" @@ -9620,13 +9748,6 @@ __metadata: languageName: node linkType: hard -"@types/coingecko-api@npm:^1.0.10": - version: 1.0.10 - resolution: "@types/coingecko-api@npm:1.0.10" - checksum: 10/2523f946e6d293c2ee94a0abee624f53c34b4643f8df685d0164509aba66e8234276e5d8c202c514551024757f0987f7062daa7428ccaf6673bad9a5c55779a2 - languageName: node - linkType: hard - "@types/connect@npm:^3.4.33": version: 3.4.35 resolution: "@types/connect@npm:3.4.35" @@ -10297,18 +10418,6 @@ __metadata: languageName: node linkType: hard -"@wagmi/chains@npm:^1.8.0": - version: 1.8.0 - resolution: "@wagmi/chains@npm:1.8.0" - peerDependencies: - typescript: ">=5.0.4" - peerDependenciesMeta: - typescript: - optional: true - checksum: 10/8248419554a90c0d514acfc46f3a6f2090a282ff546b2488705e81fcdfaf197590e67a1fc62539383b4dd22ccafe9f16018cadad27acee098dc9d87b82f173e4 - languageName: node - linkType: hard - "@wagmi/connectors@npm:3.1.10": version: 3.1.10 resolution: "@wagmi/connectors@npm:3.1.10" @@ -12334,6 +12443,13 @@ __metadata: languageName: node linkType: hard +"chalk@npm:^5.3.0": + version: 5.3.0 + resolution: "chalk@npm:5.3.0" + checksum: 10/6373caaab21bd64c405bfc4bd9672b145647fc9482657b5ea1d549b3b2765054e9d3d928870cdf764fb4aad67555f5061538ff247b8310f110c5c888d92397ea + languageName: node + linkType: hard + "char-regex@npm:^1.0.2": version: 1.0.2 resolution: "char-regex@npm:1.0.2" @@ -12550,13 +12666,6 @@ __metadata: languageName: node linkType: hard -"coingecko-api@npm:^1.0.10": - version: 1.0.10 - resolution: "coingecko-api@npm:1.0.10" - checksum: 10/e0000df5aebbeee508f25824485fe8e4be57cd07825b3cfbf2dc3c51b646200eefd336c833e81747d4a209bf10c32019baef1070fb2bfbcdbae099420954d1fa - languageName: node - linkType: hard - "collect-v8-coverage@npm:^1.0.0": version: 1.0.2 resolution: "collect-v8-coverage@npm:1.0.2" @@ -12621,6 +12730,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^12.1.0": + version: 12.1.0 + resolution: "commander@npm:12.1.0" + checksum: 10/cdaeb672d979816853a4eed7f1310a9319e8b976172485c2a6b437ed0db0a389a44cfb222bfbde772781efa9f215bdd1b936f80d6b249485b465c6cb906e1f93 + languageName: node + linkType: hard + "commander@npm:^2.20.3": version: 2.20.3 resolution: "commander@npm:2.20.3" From f5fb54b501cb71deca479db44ed877841e7a8f6c Mon Sep 17 00:00:00 2001 From: Xaroz Date: Mon, 11 Nov 2024 14:38:42 -0400 Subject: [PATCH 03/11] chore: dedup icon button --- src/components/buttons/IconButton.tsx | 51 ------------------- src/components/icons/HelpIcon.tsx | 23 --------- src/components/layout/Modal.tsx | 30 +++++------ src/components/tip/TipCard.tsx | 12 ++--- src/features/transfer/TransferTokenForm.tsx | 11 ++-- src/features/wallet/WalletFloatingButtons.tsx | 7 ++- src/images/icons/swap.svg | 3 -- src/images/icons/x-circle.svg | 4 -- 8 files changed, 25 insertions(+), 116 deletions(-) delete mode 100644 src/components/buttons/IconButton.tsx delete mode 100644 src/components/icons/HelpIcon.tsx delete mode 100644 src/images/icons/swap.svg delete mode 100644 src/images/icons/x-circle.svg diff --git a/src/components/buttons/IconButton.tsx b/src/components/buttons/IconButton.tsx deleted file mode 100644 index c8c8c2a7..00000000 --- a/src/components/buttons/IconButton.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import Image from 'next/image'; -import { PropsWithChildren } from 'react'; - -export interface IconButtonProps { - width?: number; - height?: number; - classes?: string; - onClick?: () => void; - disabled?: boolean; - imgSrc?: any; - title?: string; - type?: 'button' | 'submit'; - passThruProps?: any; -} - -export function IconButton(props: PropsWithChildren) { - const { - width, - height, - classes, - onClick, - imgSrc, - disabled, - title, - type, - children, - passThruProps, - } = props; - - const base = 'flex items-center justify-center transition-all'; - const onHover = 'hover:opacity-70'; - const onDisabled = 'disabled:opacity-30 disabled:cursor-default'; - const onActive = 'active:opacity-60'; - const allClasses = `${base} ${onHover} ${onDisabled} ${onActive} ${classes}`; - - return ( - - ); -} diff --git a/src/components/icons/HelpIcon.tsx b/src/components/icons/HelpIcon.tsx deleted file mode 100644 index 05cbc993..00000000 --- a/src/components/icons/HelpIcon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { memo } from 'react'; -import { toast } from 'react-toastify'; -import Question from '../../images/icons/question-circle.svg'; -import { IconButton } from '../buttons/IconButton'; - -function _HelpIcon({ text, size = 20 }: { text: string; size?: number }) { - const onClick = () => { - toast.info(text, { autoClose: 8000 }); - }; - - return ( - - ); -} - -export const HelpIcon = memo(_HelpIcon); diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx index 226535a1..70642a46 100644 --- a/src/components/layout/Modal.tsx +++ b/src/components/layout/Modal.tsx @@ -1,7 +1,6 @@ -import { Dialog, Transition } from '@headlessui/react'; +import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'; +import { IconButton, XCircleIcon } from '@hyperlane-xyz/widgets'; import { Fragment, PropsWithChildren } from 'react'; -import XCircle from '../../images/icons/x-circle.svg'; -import { IconButton } from '../buttons/IconButton'; export function Modal({ isOpen, @@ -22,7 +21,7 @@ export function Modal({ return ( -
- +
- - - + {title} - + {children} {showCloseBtn && (
- + + +
)} - - + +
diff --git a/src/components/tip/TipCard.tsx b/src/components/tip/TipCard.tsx index 80f21f5f..2ffe3b21 100644 --- a/src/components/tip/TipCard.tsx +++ b/src/components/tip/TipCard.tsx @@ -1,10 +1,9 @@ +import { IconButton, XCircleIcon } from '@hyperlane-xyz/widgets'; import Image from 'next/image'; import { useState } from 'react'; -import { IconButton } from '../../components/buttons/IconButton'; import { config } from '../../consts/config'; import { links } from '../../consts/links'; import InfoCircle from '../../images/icons/info-circle.svg'; -import XCircle from '../../images/icons/x-circle.svg'; import { Card } from '../layout/Card'; export function TipCard() { @@ -29,12 +28,9 @@ export function TipCard() {
- setShow(false)} - title="Hide tip" - classes="hover:rotate-90" - /> + setShow(false)} title="Hide tip" className="hover:rotate-90"> + +
); diff --git a/src/features/transfer/TransferTokenForm.tsx b/src/features/transfer/TransferTokenForm.tsx index 756d2ca5..2e285f91 100644 --- a/src/features/transfer/TransferTokenForm.tsx +++ b/src/features/transfer/TransferTokenForm.tsx @@ -1,17 +1,15 @@ import { TokenAmount } from '@hyperlane-xyz/sdk'; import { ProtocolType, errorToString, isNullish, toWei } from '@hyperlane-xyz/utils'; -import { ChevronIcon } from '@hyperlane-xyz/widgets'; +import { ChevronIcon, IconButton, SwapIcon } from '@hyperlane-xyz/widgets'; import BigNumber from 'bignumber.js'; import { Form, Formik, useFormikContext } from 'formik'; import { useMemo, useState } from 'react'; import { toast } from 'react-toastify'; import { SmallSpinner } from '../../components/animation/SmallSpinner'; import { ConnectAwareSubmitButton } from '../../components/buttons/ConnectAwareSubmitButton'; -import { IconButton } from '../../components/buttons/IconButton'; import { SolidButton } from '../../components/buttons/SolidButton'; import { TextField } from '../../components/input/TextField'; import { getIndexForToken, getTokenByIndex, getTokens, getWarpCore } from '../../context/context'; -import SwapIcon from '../../images/icons/swap.svg'; import { Color } from '../../styles/Color'; import { logger } from '../../utils/logger'; import { ChainSelectField } from '../chains/ChainSelectField'; @@ -95,14 +93,15 @@ function SwapChainsButton({ disabled }: { disabled?: boolean }) { return ( + > + + ); } diff --git a/src/features/wallet/WalletFloatingButtons.tsx b/src/features/wallet/WalletFloatingButtons.tsx index b57f9082..8fc43cd0 100644 --- a/src/features/wallet/WalletFloatingButtons.tsx +++ b/src/features/wallet/WalletFloatingButtons.tsx @@ -1,7 +1,6 @@ import Link from 'next/link'; -import { DocsIcon, HistoryIcon, WalletIcon } from '@hyperlane-xyz/widgets'; -import { IconButton } from '../../components/buttons/IconButton'; +import { DocsIcon, HistoryIcon, IconButton, WalletIcon } from '@hyperlane-xyz/widgets'; import { links } from '../../consts/links'; import { Color } from '../../styles/Color'; import { useStore } from '../store'; @@ -21,7 +20,7 @@ export function WalletFloatingButtons() {
{numReady === 0 && ( setShowEnvSelectModal(true)} > @@ -30,7 +29,7 @@ export function WalletFloatingButtons() { )} {numReady >= 1 && ( setIsSideBarOpen(!isSideBarOpen)} > diff --git a/src/images/icons/swap.svg b/src/images/icons/swap.svg deleted file mode 100644 index 5c76d120..00000000 --- a/src/images/icons/swap.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/icons/x-circle.svg b/src/images/icons/x-circle.svg deleted file mode 100644 index b34fb647..00000000 --- a/src/images/icons/x-circle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file From 54d7d976005e50fe959cda7e98b4790b070c1d6d Mon Sep 17 00:00:00 2001 From: Xaroz Date: Mon, 11 Nov 2024 15:57:22 -0400 Subject: [PATCH 04/11] chore: remove more unused icons --- src/components/icons/Chevron.tsx | 52 -------------------------------- src/components/icons/Docs.tsx | 29 ------------------ src/components/icons/History.tsx | 29 ------------------ src/components/icons/Wallet.tsx | 29 ------------------ 4 files changed, 139 deletions(-) delete mode 100644 src/components/icons/Chevron.tsx delete mode 100644 src/components/icons/Docs.tsx delete mode 100644 src/components/icons/History.tsx delete mode 100644 src/components/icons/Wallet.tsx diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx deleted file mode 100644 index 4b8eb4a1..00000000 --- a/src/components/icons/Chevron.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { memo } from 'react'; -import { Color } from '../../styles/Color'; - -interface Props { - width?: string | number; - height?: string | number; - direction: 'n' | 'e' | 's' | 'w'; - color?: string; - classes?: string; -} - -function _ChevronIcon({ width, height, direction, color, classes }: Props) { - let directionClass; - switch (direction) { - case 'n': - directionClass = 'rotate-180'; - break; - case 'e': - directionClass = '-rotate-90'; - break; - case 's': - directionClass = ''; - break; - case 'w': - directionClass = 'rotate-90'; - break; - default: - throw new Error(`Invalid chevron direction ${direction}`); - } - - return ( - - - - ); -} - -export const ChevronIcon = memo(_ChevronIcon); diff --git a/src/components/icons/Docs.tsx b/src/components/icons/Docs.tsx deleted file mode 100644 index 1b1dbbbb..00000000 --- a/src/components/icons/Docs.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { memo } from 'react'; -import { Color } from '../../styles/Color'; -import { IconProps } from './types'; - -function _DocsIcon({ - width = 24, - height = 24, - className, - color = Color.black, - ...props -}: IconProps) { - return ( - - - - ); -} - -export const DocsIcon = memo(_DocsIcon); diff --git a/src/components/icons/History.tsx b/src/components/icons/History.tsx deleted file mode 100644 index f6c43e77..00000000 --- a/src/components/icons/History.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { memo } from 'react'; -import { Color } from '../../styles/Color'; -import { IconProps } from './types'; - -function _HistoryIcon({ - width = 24, - height = 24, - className, - color = Color.black, - ...props -}: IconProps) { - return ( - - - - ); -} - -export const HistoryIcon = memo(_HistoryIcon); diff --git a/src/components/icons/Wallet.tsx b/src/components/icons/Wallet.tsx deleted file mode 100644 index 17c8b06c..00000000 --- a/src/components/icons/Wallet.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { memo } from 'react'; -import { Color } from '../../styles/Color'; -import { IconProps } from './types'; - -function _WalletIcon({ - width = 17, - height = 14, - className, - color = Color.black, - ...props -}: IconProps) { - return ( - - - - ); -} - -export const WalletIcon = memo(_WalletIcon); From aa89fae9b7f63b8d41121ff0e1c9db17a0614b88 Mon Sep 17 00:00:00 2001 From: Xaroz Date: Tue, 12 Nov 2024 15:42:55 -0400 Subject: [PATCH 05/11] feat: dedup modal --- src/components/layout/Modal.tsx | 72 ------------------- src/consts/warpRoutes.yaml | 20 +++++- src/features/chains/ChainSelectModal.tsx | 4 +- src/features/tokens/SelectTokenIdField.tsx | 10 ++- src/features/tokens/TokenListModal.tsx | 5 +- .../transfer/TransfersDetailsModal.tsx | 12 +--- .../wallet/WalletEnvSelectionModal.tsx | 10 ++- 7 files changed, 42 insertions(+), 91 deletions(-) delete mode 100644 src/components/layout/Modal.tsx diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx deleted file mode 100644 index 70642a46..00000000 --- a/src/components/layout/Modal.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'; -import { IconButton, XCircleIcon } from '@hyperlane-xyz/widgets'; -import { Fragment, PropsWithChildren } from 'react'; - -export function Modal({ - isOpen, - title, - close, - width, - padding, - children, - showCloseBtn = true, -}: PropsWithChildren<{ - isOpen: boolean; - title: string; - close: () => void; - width?: string; - padding?: string; - showCloseBtn?: boolean; -}>) { - return ( - - - -
- - -
-
- - - - {title} - - {children} - {showCloseBtn && ( -
- - - -
- )} - - -
-
-
- - ); -} diff --git a/src/consts/warpRoutes.yaml b/src/consts/warpRoutes.yaml index 090dcb3b..3128ea43 100644 --- a/src/consts/warpRoutes.yaml +++ b/src/consts/warpRoutes.yaml @@ -2,5 +2,23 @@ # These configs will be merged with the warp routes in the configured registry # The input here is typically the output of the Hyperlane CLI warp deploy command --- -tokens: [] +tokens: + - addressOrDenom: '0x78fe869f19f917fde4192c51c446Fbd3721788ee' + chainName: alfajores + connections: + - token: ethereum|sepolia|0xeDF994D49F865D3a4bd6F74AeFbe1DcCAE7204F2 + decimals: 18 + logoURI: /deployments/warp_routes/ETH/logo.svg + name: Ether + standard: EvmHypSynthetic + symbol: ETH + - addressOrDenom: '0xeDF994D49F865D3a4bd6F74AeFbe1DcCAE7204F2' + chainName: sepolia + connections: + - token: ethereum|alfajores|0x78fe869f19f917fde4192c51c446Fbd3721788ee + decimals: 18 + logoURI: /deployments/warp_routes/ETH/logo.svg + name: Ether + standard: EvmHypNative + symbol: ETH options: {} diff --git a/src/features/chains/ChainSelectModal.tsx b/src/features/chains/ChainSelectModal.tsx index 3b15c77b..ef4016a2 100644 --- a/src/features/chains/ChainSelectModal.tsx +++ b/src/features/chains/ChainSelectModal.tsx @@ -1,6 +1,6 @@ +import { Modal } from '@hyperlane-xyz/widgets'; import { useMemo } from 'react'; import { ChainLogo } from '../../components/icons/ChainLogo'; -import { Modal } from '../../components/layout/Modal'; import { useMultiProvider } from './hooks'; import { getChainDisplayName } from './utils'; @@ -27,7 +27,7 @@ export function ChainSelectListModal({ }; return ( - +
{sortedChains.map((c) => ( From daa5453793c77534c6cdacc7d5880afaf8f2f079 Mon Sep 17 00:00:00 2001 From: Xaroz Date: Tue, 12 Nov 2024 17:22:52 -0400 Subject: [PATCH 07/11] feat: remove redundant components, add from widgets --- src/components/animation/Spinner.module.css | 81 ------------------- src/components/animation/Spinner.tsx | 25 ------ src/components/banner/WarningBanner.tsx | 5 +- src/components/buttons/CopyButton.tsx | 4 +- src/features/WarpContextInitGate.tsx | 4 +- src/features/chains/ChainSelectField.tsx | 5 +- src/features/tokens/SelectTokenIdField.tsx | 9 +-- src/features/tokens/TokenSelectField.tsx | 5 +- .../transfer/TransfersDetailsModal.tsx | 11 ++- src/features/wallet/SideBarMenu.tsx | 26 +----- src/features/wallet/WalletControlBar.tsx | 6 +- src/images/icons/checkmark.svg | 3 - src/images/icons/chevron-down.svg | 3 - src/images/icons/gear.svg | 3 - src/images/icons/logout.svg | 1 - src/images/icons/plus-circle-fill.svg | 3 - src/images/icons/plus.svg | 3 - src/images/icons/send.svg | 3 - src/images/icons/three-dots.svg | 3 - src/images/icons/warning.svg | 3 - src/images/icons/x.svg | 3 - 21 files changed, 26 insertions(+), 183 deletions(-) delete mode 100644 src/components/animation/Spinner.module.css delete mode 100644 src/components/animation/Spinner.tsx delete mode 100644 src/images/icons/checkmark.svg delete mode 100644 src/images/icons/chevron-down.svg delete mode 100644 src/images/icons/gear.svg delete mode 100644 src/images/icons/logout.svg delete mode 100644 src/images/icons/plus-circle-fill.svg delete mode 100644 src/images/icons/plus.svg delete mode 100644 src/images/icons/send.svg delete mode 100644 src/images/icons/three-dots.svg delete mode 100644 src/images/icons/warning.svg delete mode 100644 src/images/icons/x.svg diff --git a/src/components/animation/Spinner.module.css b/src/components/animation/Spinner.module.css deleted file mode 100644 index 45e51818..00000000 --- a/src/components/animation/Spinner.module.css +++ /dev/null @@ -1,81 +0,0 @@ -.spinner { - color: official; - display: inline-block; - position: relative; - width: 80px; - height: 80px; -} -.spinner div { - transform-origin: 40px 40px; - animation: spinner 1.2s linear infinite; -} -.spinner div:after { - content: ' '; - display: block; - position: absolute; - top: 3px; - left: 37px; - width: 6px; - height: 18px; - border-radius: 20%; - background: #010101; -} -.spinner.white div:after { - background: #ffffff; -} -.spinner div:nth-child(1) { - transform: rotate(0deg); - animation-delay: -1.1s; -} -.spinner div:nth-child(2) { - transform: rotate(30deg); - animation-delay: -1s; -} -.spinner div:nth-child(3) { - transform: rotate(60deg); - animation-delay: -0.9s; -} -.spinner div:nth-child(4) { - transform: rotate(90deg); - animation-delay: -0.8s; -} -.spinner div:nth-child(5) { - transform: rotate(120deg); - animation-delay: -0.7s; -} -.spinner div:nth-child(6) { - transform: rotate(150deg); - animation-delay: -0.6s; -} -.spinner div:nth-child(7) { - transform: rotate(180deg); - animation-delay: -0.5s; -} -.spinner div:nth-child(8) { - transform: rotate(210deg); - animation-delay: -0.4s; -} -.spinner div:nth-child(9) { - transform: rotate(240deg); - animation-delay: -0.3s; -} -.spinner div:nth-child(10) { - transform: rotate(270deg); - animation-delay: -0.2s; -} -.spinner div:nth-child(11) { - transform: rotate(300deg); - animation-delay: -0.1s; -} -.spinner div:nth-child(12) { - transform: rotate(330deg); - animation-delay: 0s; -} -@keyframes spinner { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} diff --git a/src/components/animation/Spinner.tsx b/src/components/animation/Spinner.tsx deleted file mode 100644 index d6b58fe5..00000000 --- a/src/components/animation/Spinner.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { memo } from 'react'; - -import styles from './Spinner.module.css'; - -// From https://loading.io/css/ -function _Spinner({ white, classes }: { white?: boolean; classes?: string }) { - return ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); -} - -export const Spinner = memo(_Spinner); diff --git a/src/components/banner/WarningBanner.tsx b/src/components/banner/WarningBanner.tsx index b4070d91..7bbcee39 100644 --- a/src/components/banner/WarningBanner.tsx +++ b/src/components/banner/WarningBanner.tsx @@ -1,6 +1,5 @@ -import Image from 'next/image'; +import { WarningIcon } from '@hyperlane-xyz/widgets'; import { PropsWithChildren, ReactNode } from 'react'; -import WarningIcon from '../../images/icons/warning.svg'; export function WarningBanner({ isVisible, @@ -21,7 +20,7 @@ export function WarningBanner({ } overflow-hidden transition-all duration-500 ${className}`} >
- Warning: + {children}
- +
- + {isLoading ? (
- +

Finding token IDs

) : tokenIds && tokenIds.length !== 0 ? ( diff --git a/src/features/tokens/TokenSelectField.tsx b/src/features/tokens/TokenSelectField.tsx index f7834d2f..17a4d690 100644 --- a/src/features/tokens/TokenSelectField.tsx +++ b/src/features/tokens/TokenSelectField.tsx @@ -1,9 +1,8 @@ import { IToken } from '@hyperlane-xyz/sdk'; +import { ChevronIcon } from '@hyperlane-xyz/widgets'; import { useField, useFormikContext } from 'formik'; -import Image from 'next/image'; import { useEffect, useState } from 'react'; import { TokenIcon } from '../../components/icons/TokenIcon'; -import ChevronIcon from '../../images/icons/chevron-down.svg'; import { TransferFormValues } from '../transfer/types'; import { TokenListModal } from './TokenListModal'; import { getIndexForToken, getTokenByIndex, useWarpCore } from './hooks'; @@ -98,7 +97,7 @@ function TokenButton({ {token?.symbol || (isAutomatic ? 'No routes available' : 'Select Token')} - {!isAutomatic && } + {!isAutomatic && } ); } diff --git a/src/features/transfer/TransfersDetailsModal.tsx b/src/features/transfer/TransfersDetailsModal.tsx index c13abf1b..6a0be1a0 100644 --- a/src/features/transfer/TransfersDetailsModal.tsx +++ b/src/features/transfer/TransfersDetailsModal.tsx @@ -1,8 +1,13 @@ import { ProtocolType } from '@hyperlane-xyz/utils'; -import { MessageStatus, MessageTimeline, Modal, useMessageTimeline } from '@hyperlane-xyz/widgets'; +import { + MessageStatus, + MessageTimeline, + Modal, + SpinnerIcon, + useMessageTimeline, +} from '@hyperlane-xyz/widgets'; import Image from 'next/image'; import { useCallback, useEffect, useMemo, useState } from 'react'; -import { Spinner } from '../../components/animation/Spinner'; import { CopyButton } from '../../components/buttons/CopyButton'; import { ChainLogo } from '../../components/icons/ChainLogo'; import { TokenIcon } from '../../components/icons/TokenIcon'; @@ -184,7 +189,7 @@ export function TransfersDetailsModal({ ) : (
- +
diff --git a/src/features/wallet/SideBarMenu.tsx b/src/features/wallet/SideBarMenu.tsx index 498157d2..4c76b0d2 100644 --- a/src/features/wallet/SideBarMenu.tsx +++ b/src/features/wallet/SideBarMenu.tsx @@ -1,4 +1,4 @@ -import { SpinnerIcon } from '@hyperlane-xyz/widgets'; +import { LogoutIcon, SpinnerIcon, WalletIcon } from '@hyperlane-xyz/widgets'; import Image from 'next/image'; import { useEffect, useMemo, useRef, useState } from 'react'; import { toast } from 'react-toastify'; @@ -6,9 +6,7 @@ import { ChainLogo } from '../../components/icons/ChainLogo'; import { WalletLogo } from '../../components/icons/WalletLogo'; import ArrowRightIcon from '../../images/icons/arrow-right.svg'; import CollapseIcon from '../../images/icons/collapse-icon.svg'; -import Logout from '../../images/icons/logout.svg'; import ResetIcon from '../../images/icons/reset-icon.svg'; -import Wallet from '../../images/icons/wallet.svg'; import { tryClipboardSet } from '../../utils/clipboard'; import { STATUSES_WITH_ICON, getIconByTransferStatus } from '../../utils/transfer'; import { useMultiProvider } from '../chains/hooks'; @@ -90,11 +88,11 @@ export function SideBarMenu({ ))}
@@ -219,24 +217,6 @@ function TransferSummary({ ); } -function Icon({ - src, - alt, - size, - className, -}: { - src: any; - alt?: string; - size?: number; - className?: string; -}) { - return ( -
- {alt -
- ); -} - const styles = { btn: 'w-full flex items-center px-1 py-2 text-sm hover:bg-gray-200 active:scale-95 transition-all duration-500 cursor-pointer rounded-sm', }; diff --git a/src/features/wallet/WalletControlBar.tsx b/src/features/wallet/WalletControlBar.tsx index 8e92cf1e..bfc06e6c 100644 --- a/src/features/wallet/WalletControlBar.tsx +++ b/src/features/wallet/WalletControlBar.tsx @@ -1,9 +1,7 @@ import { ProtocolType, shortenAddress } from '@hyperlane-xyz/utils'; -import { ChevronIcon } from '@hyperlane-xyz/widgets'; -import Image from 'next/image'; +import { ChevronIcon, WalletIcon } 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 { useAccounts, useWalletDetails } from './hooks/multiProtocol'; @@ -36,7 +34,7 @@ export function WalletControlBar() { classes="py-2 px-3" onClick={() => setShowEnvSelectModal(true)} title="Choose wallet" - icon={} + icon={} color="white" >
Connect wallet
diff --git a/src/images/icons/checkmark.svg b/src/images/icons/checkmark.svg deleted file mode 100644 index 400f6c44..00000000 --- a/src/images/icons/checkmark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/chevron-down.svg b/src/images/icons/chevron-down.svg deleted file mode 100644 index 7ce35e5f..00000000 --- a/src/images/icons/chevron-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/gear.svg b/src/images/icons/gear.svg deleted file mode 100644 index 437d56e3..00000000 --- a/src/images/icons/gear.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/icons/logout.svg b/src/images/icons/logout.svg deleted file mode 100644 index 7168ca78..00000000 --- a/src/images/icons/logout.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icons/plus-circle-fill.svg b/src/images/icons/plus-circle-fill.svg deleted file mode 100644 index 49084451..00000000 --- a/src/images/icons/plus-circle-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/plus.svg b/src/images/icons/plus.svg deleted file mode 100644 index e33f98ee..00000000 --- a/src/images/icons/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/send.svg b/src/images/icons/send.svg deleted file mode 100644 index 5ba9cbff..00000000 --- a/src/images/icons/send.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/three-dots.svg b/src/images/icons/three-dots.svg deleted file mode 100644 index e6d3c608..00000000 --- a/src/images/icons/three-dots.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/icons/warning.svg b/src/images/icons/warning.svg deleted file mode 100644 index 521bbbe9..00000000 --- a/src/images/icons/warning.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/icons/x.svg b/src/images/icons/x.svg deleted file mode 100644 index 5f420e46..00000000 --- a/src/images/icons/x.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 4da2ac791470fbadefc7714a0f0358491922b04d Mon Sep 17 00:00:00 2001 From: Xaroz Date: Tue, 12 Nov 2024 17:24:41 -0400 Subject: [PATCH 08/11] chore: remove custom warp route --- src/consts/warpRoutes.yaml | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/consts/warpRoutes.yaml b/src/consts/warpRoutes.yaml index 3128ea43..090dcb3b 100644 --- a/src/consts/warpRoutes.yaml +++ b/src/consts/warpRoutes.yaml @@ -2,23 +2,5 @@ # These configs will be merged with the warp routes in the configured registry # The input here is typically the output of the Hyperlane CLI warp deploy command --- -tokens: - - addressOrDenom: '0x78fe869f19f917fde4192c51c446Fbd3721788ee' - chainName: alfajores - connections: - - token: ethereum|sepolia|0xeDF994D49F865D3a4bd6F74AeFbe1DcCAE7204F2 - decimals: 18 - logoURI: /deployments/warp_routes/ETH/logo.svg - name: Ether - standard: EvmHypSynthetic - symbol: ETH - - addressOrDenom: '0xeDF994D49F865D3a4bd6F74AeFbe1DcCAE7204F2' - chainName: sepolia - connections: - - token: ethereum|alfajores|0x78fe869f19f917fde4192c51c446Fbd3721788ee - decimals: 18 - logoURI: /deployments/warp_routes/ETH/logo.svg - name: Ether - standard: EvmHypNative - symbol: ETH +tokens: [] options: {} From eb201acc1064590673fb944053ecb662f0b024b5 Mon Sep 17 00:00:00 2001 From: Xaroz Date: Wed, 13 Nov 2024 14:14:07 -0400 Subject: [PATCH 09/11] chore: remove unneeded fragment --- src/features/wallet/SideBarMenu.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/wallet/SideBarMenu.tsx b/src/features/wallet/SideBarMenu.tsx index 4c76b0d2..b6c7c599 100644 --- a/src/features/wallet/SideBarMenu.tsx +++ b/src/features/wallet/SideBarMenu.tsx @@ -208,9 +208,7 @@ function TransferSummary({ {STATUSES_WITH_ICON.includes(status) ? ( ) : ( - <> - - + )}
From 3696d4e98fcabbbe8119ef8ca68d46b86f2c14ed Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Mon, 18 Nov 2024 18:14:05 -0500 Subject: [PATCH 10/11] Remove dead code and images --- .../buttons/SwitchButton.module.css | 56 ------------------- src/components/buttons/SwitchButton.tsx | 21 ------- src/components/errors/ErrorBoundary.tsx | 56 ++++--------------- src/components/icons/WideChevron.tsx | 15 ----- .../transfer/TransfersDetailsModal.tsx | 15 ++++- src/features/wallet/WalletFloatingButtons.tsx | 2 +- src/images/icons/checkmark-circle.svg | 4 -- src/images/icons/chevron-compact-left.svg | 3 - src/images/icons/chevron-compact-right.svg | 3 - src/images/icons/copy-stack.svg | 4 -- src/images/icons/cube.svg | 1 - src/images/icons/envelope-check.svg | 4 -- src/images/icons/envelope-heart.svg | 3 - src/images/icons/hamburger.svg | 1 - src/images/icons/question-circle.svg | 1 - src/images/icons/question-mark.svg | 1 - src/images/icons/transfer-warning-status.svg | 5 -- src/images/icons/wallet.svg | 3 - src/images/logos/discord.svg | 4 -- src/images/logos/github.svg | 3 - src/images/logos/hyperlane-white-pink.svg | 1 - src/images/logos/hyperlane-white.svg | 1 - src/images/logos/medium.svg | 1 - src/images/logos/metamask.svg | 1 - src/images/logos/twitter.svg | 3 - 25 files changed, 25 insertions(+), 187 deletions(-) delete mode 100644 src/components/buttons/SwitchButton.module.css delete mode 100644 src/components/buttons/SwitchButton.tsx delete mode 100644 src/components/icons/WideChevron.tsx delete mode 100644 src/images/icons/checkmark-circle.svg delete mode 100644 src/images/icons/chevron-compact-left.svg delete mode 100644 src/images/icons/chevron-compact-right.svg delete mode 100644 src/images/icons/copy-stack.svg delete mode 100644 src/images/icons/cube.svg delete mode 100644 src/images/icons/envelope-check.svg delete mode 100644 src/images/icons/envelope-heart.svg delete mode 100644 src/images/icons/hamburger.svg delete mode 100644 src/images/icons/question-circle.svg delete mode 100644 src/images/icons/question-mark.svg delete mode 100644 src/images/icons/transfer-warning-status.svg delete mode 100644 src/images/icons/wallet.svg delete mode 100644 src/images/logos/discord.svg delete mode 100644 src/images/logos/github.svg delete mode 100644 src/images/logos/hyperlane-white-pink.svg delete mode 100644 src/images/logos/hyperlane-white.svg delete mode 100644 src/images/logos/medium.svg delete mode 100644 src/images/logos/metamask.svg delete mode 100644 src/images/logos/twitter.svg diff --git a/src/components/buttons/SwitchButton.module.css b/src/components/buttons/SwitchButton.module.css deleted file mode 100644 index b12025cb..00000000 --- a/src/components/buttons/SwitchButton.module.css +++ /dev/null @@ -1,56 +0,0 @@ -/* The switch - the box around the slider */ -.switch { - position: relative; - display: inline-block; - width: 32px; - height: 18px; -} - -/* Hide default HTML checkbox */ -.switch input { - opacity: 0; - width: 0; - height: 0; -} - -/* The slider */ -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: 0.4s; - transition: 0.4s; -} - -.slider:before { - position: absolute; - content: ''; - height: 14px; - width: 14px; - left: 2px; - bottom: 2px; - background-color: white; - -webkit-transition: 0.4s; - transition: 0.4s; -} - -input:checked + .slider { - background-color: #45cd85; -} - -input:checked + .slider:before { - transform: translateX(13px); -} - -/* Rounded sliders */ -.slider.round { - border-radius: 24px; -} - -.slider.round:before { - border-radius: 50%; -} diff --git a/src/components/buttons/SwitchButton.tsx b/src/components/buttons/SwitchButton.tsx deleted file mode 100644 index ecf72241..00000000 --- a/src/components/buttons/SwitchButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { ChangeEvent } from 'react'; -import styles from 'src/components/buttons/SwitchButton.module.css'; - -interface Props { - checked: boolean; - onChange: (checked: boolean) => void; -} - -export function SwitchButton({ checked, onChange }: Props) { - const handleChange = (event: ChangeEvent) => { - const target = event.target; - onChange(target.checked); - }; - - return ( - - ); -} diff --git a/src/components/errors/ErrorBoundary.tsx b/src/components/errors/ErrorBoundary.tsx index 05c5b1f8..357ef022 100644 --- a/src/components/errors/ErrorBoundary.tsx +++ b/src/components/errors/ErrorBoundary.tsx @@ -1,51 +1,15 @@ -import Image from 'next/image'; -import { Component } from 'react'; +import { ErrorBoundary as ErrorBoundaryInner } from '@hyperlane-xyz/widgets'; +import { PropsWithChildren } from 'react'; import { links } from '../../consts/links'; -import ErrorIcon from '../../images/icons/error-circle.svg'; -import { logger } from '../../utils/logger'; -interface ErrorBoundaryState { - error: any; - errorInfo: any; +export function ErrorBoundary({ children }: PropsWithChildren) { + return }>{children}; } -export class ErrorBoundary extends Component { - constructor(props: any) { - super(props); - this.state = { error: null, errorInfo: null }; - } - - componentDidCatch(error: any, errorInfo: any) { - this.setState({ - error, - errorInfo, - }); - logger.error('Error caught by error boundary', error, errorInfo); - } - - render() { - const errorInfo = this.state.error || this.state.errorInfo; - if (errorInfo) { - const details = errorInfo.message || JSON.stringify(errorInfo); - return ( -
-
- -

Fatal Error Occurred

-
{details}
- - For support, join the{' '} - Hyperlane Discord{' '} - -
-
- ); - } - return this.props.children; - } +function SupportLink() { + return ( + + For support, join the Hyperlane Discord{' '} + + ); } diff --git a/src/components/icons/WideChevron.tsx b/src/components/icons/WideChevron.tsx deleted file mode 100644 index a080a8b5..00000000 --- a/src/components/icons/WideChevron.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { WideChevronIcon } from '@hyperlane-xyz/widgets'; -import { Color } from '../../styles/Color'; - -export function WideChevron({ className }: { className?: string }) { - return ( - - ); -} diff --git a/src/features/transfer/TransfersDetailsModal.tsx b/src/features/transfer/TransfersDetailsModal.tsx index 5431de66..84d757c1 100644 --- a/src/features/transfer/TransfersDetailsModal.tsx +++ b/src/features/transfer/TransfersDetailsModal.tsx @@ -9,13 +9,14 @@ import { useMessageTimeline, useTimeout, useWalletDetails, + WideChevronIcon, } from '@hyperlane-xyz/widgets'; import Image from 'next/image'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { ChainLogo } from '../../components/icons/ChainLogo'; import { TokenIcon } from '../../components/icons/TokenIcon'; -import { WideChevron } from '../../components/icons/WideChevron'; import LinkIcon from '../../images/icons/external-link-icon.svg'; +import { Color } from '../../styles/Color'; import { formatTimestamp } from '../../utils/date'; import { getHypExplorerLink } from '../../utils/links'; import { logger } from '../../utils/logger'; @@ -255,6 +256,18 @@ function TransferProperty({ name, value, url }: { name: string; value: string; u ); } +function WideChevron() { + return ( + + ); +} + // https://github.com/wagmi-dev/wagmi/discussions/2928 function useSignIssueWarning(status: TransferStatus) { const [showWarning, setShowWarning] = useState(false); diff --git a/src/features/wallet/WalletFloatingButtons.tsx b/src/features/wallet/WalletFloatingButtons.tsx index f944997a..c0ab5b24 100644 --- a/src/features/wallet/WalletFloatingButtons.tsx +++ b/src/features/wallet/WalletFloatingButtons.tsx @@ -25,7 +25,7 @@ export function WalletFloatingButtons() { target="_blank" className={`p-0.5 ${styles.roundedCircle} ${styles.link}`} > - + ); diff --git a/src/images/icons/checkmark-circle.svg b/src/images/icons/checkmark-circle.svg deleted file mode 100644 index d8dd0cd5..00000000 --- a/src/images/icons/checkmark-circle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/images/icons/chevron-compact-left.svg b/src/images/icons/chevron-compact-left.svg deleted file mode 100644 index ea287cf8..00000000 --- a/src/images/icons/chevron-compact-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/chevron-compact-right.svg b/src/images/icons/chevron-compact-right.svg deleted file mode 100644 index 4933b1cd..00000000 --- a/src/images/icons/chevron-compact-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/copy-stack.svg b/src/images/icons/copy-stack.svg deleted file mode 100644 index 140da76f..00000000 --- a/src/images/icons/copy-stack.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/icons/cube.svg b/src/images/icons/cube.svg deleted file mode 100644 index b5a077da..00000000 --- a/src/images/icons/cube.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icons/envelope-check.svg b/src/images/icons/envelope-check.svg deleted file mode 100644 index 8a501810..00000000 --- a/src/images/icons/envelope-check.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/images/icons/envelope-heart.svg b/src/images/icons/envelope-heart.svg deleted file mode 100644 index 2d925aec..00000000 --- a/src/images/icons/envelope-heart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/icons/hamburger.svg b/src/images/icons/hamburger.svg deleted file mode 100644 index 292138ed..00000000 --- a/src/images/icons/hamburger.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icons/question-circle.svg b/src/images/icons/question-circle.svg deleted file mode 100644 index 951ea094..00000000 --- a/src/images/icons/question-circle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icons/question-mark.svg b/src/images/icons/question-mark.svg deleted file mode 100644 index c5921de0..00000000 --- a/src/images/icons/question-mark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icons/transfer-warning-status.svg b/src/images/icons/transfer-warning-status.svg deleted file mode 100644 index 69ed4c2e..00000000 --- a/src/images/icons/transfer-warning-status.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/images/icons/wallet.svg b/src/images/icons/wallet.svg deleted file mode 100644 index cd590958..00000000 --- a/src/images/icons/wallet.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/logos/discord.svg b/src/images/logos/discord.svg deleted file mode 100644 index 1ff21c41..00000000 --- a/src/images/logos/discord.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/images/logos/github.svg b/src/images/logos/github.svg deleted file mode 100644 index bb4e45ce..00000000 --- a/src/images/logos/github.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/logos/hyperlane-white-pink.svg b/src/images/logos/hyperlane-white-pink.svg deleted file mode 100644 index 5624c430..00000000 --- a/src/images/logos/hyperlane-white-pink.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/logos/hyperlane-white.svg b/src/images/logos/hyperlane-white.svg deleted file mode 100644 index 7fb313a6..00000000 --- a/src/images/logos/hyperlane-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/logos/medium.svg b/src/images/logos/medium.svg deleted file mode 100644 index 11be42cb..00000000 --- a/src/images/logos/medium.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/logos/metamask.svg b/src/images/logos/metamask.svg deleted file mode 100644 index 9da6a503..00000000 --- a/src/images/logos/metamask.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/logos/twitter.svg b/src/images/logos/twitter.svg deleted file mode 100644 index 8a83fa67..00000000 --- a/src/images/logos/twitter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 54c05a7869c4c4d3b4de42de16e47103673c1bcd Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Mon, 18 Nov 2024 18:29:19 -0500 Subject: [PATCH 11/11] Improve token image error handling --- src/components/icons/TokenIcon.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/icons/TokenIcon.tsx b/src/components/icons/TokenIcon.tsx index 00b327a5..af241f1b 100644 --- a/src/components/icons/TokenIcon.tsx +++ b/src/components/icons/TokenIcon.tsx @@ -2,8 +2,8 @@ import { IRegistry } from '@hyperlane-xyz/registry'; import { IToken } from '@hyperlane-xyz/sdk'; import { isHttpsUrl, isRelativeUrl } from '@hyperlane-xyz/utils'; import { Circle } from '@hyperlane-xyz/widgets'; +import { useState } from 'react'; import { useStore } from '../../features/store'; -import { ErrorBoundary } from '../errors/ErrorBoundary'; interface Props { token?: IToken | null; @@ -15,17 +15,24 @@ export function TokenIcon({ token, size = 32 }: Props) { const character = title ? title.charAt(0).toUpperCase() : ''; const fontSize = Math.floor(size / 2); + const [fallbackToText, setFallbackToText] = useState(false); const registry = useStore((s) => s.registry); const imageSrc = getImageSrc(registry, token); const bgColorSeed = - token && !imageSrc ? (Buffer.from(token.addressOrDenom).at(0) || 0) % 5 : undefined; + token && (!imageSrc || fallbackToText) + ? (Buffer.from(token.addressOrDenom).at(0) || 0) % 5 + : undefined; return ( - {imageSrc ? ( - - - + {imageSrc && !fallbackToText ? ( + setFallbackToText(true)} + /> ) : (
{character}
)}