From 1accdb3444ef7ff09f5bf4224bb9af7bb8fe06b0 Mon Sep 17 00:00:00 2001 From: kev1n-peters <96065607+kev1n-peters@users.noreply.github.com> Date: Mon, 23 Sep 2024 13:16:05 -0500 Subject: [PATCH] removed unused legacy connect code (#2649) --- .../src/components/ChainsModal.tsx | 215 --------- .../src/components/ConnectWallet.tsx | 206 -------- wormhole-connect/src/components/Input.tsx | 37 -- .../src/components/InputContainer.tsx | 44 -- wormhole-connect/src/components/Menu.tsx | 86 ---- wormhole-connect/src/components/Options.tsx | 99 ---- wormhole-connect/src/components/Price.tsx | 32 -- .../src/components/RenderRows.tsx | 85 ---- wormhole-connect/src/components/Scroll.tsx | 70 --- .../src/components/Stepper/Stepper.tsx | 47 -- .../src/components/Stepper/StepperContent.tsx | 52 -- .../src/components/Stepper/StepperLabel.tsx | 116 ----- wormhole-connect/src/components/Tabs.tsx | 84 ---- .../src/components/TokensModal.tsx | 454 ------------------ wormhole-connect/src/components/Tooltip.tsx | 48 -- .../hooks/useComputeReceiverNativeBalance.ts | 53 -- .../src/routes/porticoBridge/utils.ts | 2 - wormhole-connect/src/routes/relay/index.ts | 1 - wormhole-connect/src/routes/relay/types.ts | 15 - wormhole-connect/src/store/index.ts | 2 - wormhole-connect/src/store/porticoBridge.ts | 83 ---- wormhole-connect/src/store/transferInput.ts | 32 +- wormhole-connect/src/views/Bridge/Bridge.tsx | 186 ------- .../src/views/Bridge/ChainTile.tsx | 66 --- .../src/views/Bridge/Collapse.tsx | 181 ------- .../src/views/Bridge/Inputs/AmountInput.tsx | 93 ---- .../src/views/Bridge/Inputs/From.tsx | 153 ------ .../src/views/Bridge/Inputs/Input.tsx | 61 --- .../src/views/Bridge/Inputs/Inputs.tsx | 258 ---------- .../src/views/Bridge/Inputs/Select.tsx | 79 --- .../src/views/Bridge/Inputs/To.tsx | 166 ------- .../src/views/Bridge/Inputs/TokenWarnings.tsx | 335 ------------- .../src/views/Bridge/NativeGasSlider.tsx | 210 -------- wormhole-connect/src/views/Bridge/Preview.tsx | 167 ------- .../src/views/Bridge/RouteOptions.tsx | 400 --------------- wormhole-connect/src/views/Bridge/Send.tsx | 341 ------------- .../src/views/Bridge/SwapChains.tsx | 98 ---- .../src/views/Bridge/ValidationError.tsx | 29 -- .../src/views/Redeem/AddToWallet.tsx | 233 --------- .../src/views/Redeem/BridgeComplete.tsx | 75 --- .../src/views/Redeem/Confirmations.tsx | 136 ------ .../src/views/Redeem/DestinationQueued.tsx | 173 ------- .../src/views/Redeem/ExplorerLink.tsx | 94 ---- wormhole-connect/src/views/Redeem/Header.tsx | 80 --- wormhole-connect/src/views/Redeem/Redeem.tsx | 210 -------- .../views/Redeem/RelayerDeliveryFailed.tsx | 63 --- .../src/views/Redeem/SendFrom.tsx | 57 --- wormhole-connect/src/views/Redeem/SendTo.tsx | 333 ------------- wormhole-connect/src/views/Redeem/Stepper.tsx | 46 -- .../src/views/Redeem/SwitchToManualClaim.tsx | 49 -- wormhole-connect/src/views/Redeem/Tag.tsx | 77 --- wormhole-connect/src/views/WalletModal.tsx | 238 --------- 52 files changed, 3 insertions(+), 6547 deletions(-) delete mode 100644 wormhole-connect/src/components/ChainsModal.tsx delete mode 100644 wormhole-connect/src/components/ConnectWallet.tsx delete mode 100644 wormhole-connect/src/components/Input.tsx delete mode 100644 wormhole-connect/src/components/InputContainer.tsx delete mode 100644 wormhole-connect/src/components/Menu.tsx delete mode 100644 wormhole-connect/src/components/Options.tsx delete mode 100644 wormhole-connect/src/components/Price.tsx delete mode 100644 wormhole-connect/src/components/RenderRows.tsx delete mode 100644 wormhole-connect/src/components/Scroll.tsx delete mode 100644 wormhole-connect/src/components/Stepper/Stepper.tsx delete mode 100644 wormhole-connect/src/components/Stepper/StepperContent.tsx delete mode 100644 wormhole-connect/src/components/Stepper/StepperLabel.tsx delete mode 100644 wormhole-connect/src/components/Tabs.tsx delete mode 100644 wormhole-connect/src/components/TokensModal.tsx delete mode 100644 wormhole-connect/src/components/Tooltip.tsx delete mode 100644 wormhole-connect/src/hooks/useComputeReceiverNativeBalance.ts delete mode 100644 wormhole-connect/src/routes/porticoBridge/utils.ts delete mode 100644 wormhole-connect/src/routes/relay/index.ts delete mode 100644 wormhole-connect/src/routes/relay/types.ts delete mode 100644 wormhole-connect/src/store/porticoBridge.ts delete mode 100644 wormhole-connect/src/views/Bridge/Bridge.tsx delete mode 100644 wormhole-connect/src/views/Bridge/ChainTile.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Collapse.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/From.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/Input.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/Select.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/To.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/TokenWarnings.tsx delete mode 100644 wormhole-connect/src/views/Bridge/NativeGasSlider.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Preview.tsx delete mode 100644 wormhole-connect/src/views/Bridge/RouteOptions.tsx delete mode 100644 wormhole-connect/src/views/Bridge/Send.tsx delete mode 100644 wormhole-connect/src/views/Bridge/SwapChains.tsx delete mode 100644 wormhole-connect/src/views/Bridge/ValidationError.tsx delete mode 100644 wormhole-connect/src/views/Redeem/AddToWallet.tsx delete mode 100644 wormhole-connect/src/views/Redeem/BridgeComplete.tsx delete mode 100644 wormhole-connect/src/views/Redeem/Confirmations.tsx delete mode 100644 wormhole-connect/src/views/Redeem/DestinationQueued.tsx delete mode 100644 wormhole-connect/src/views/Redeem/ExplorerLink.tsx delete mode 100644 wormhole-connect/src/views/Redeem/Header.tsx delete mode 100644 wormhole-connect/src/views/Redeem/Redeem.tsx delete mode 100644 wormhole-connect/src/views/Redeem/RelayerDeliveryFailed.tsx delete mode 100644 wormhole-connect/src/views/Redeem/SendFrom.tsx delete mode 100644 wormhole-connect/src/views/Redeem/SendTo.tsx delete mode 100644 wormhole-connect/src/views/Redeem/Stepper.tsx delete mode 100644 wormhole-connect/src/views/Redeem/SwitchToManualClaim.tsx delete mode 100644 wormhole-connect/src/views/Redeem/Tag.tsx delete mode 100644 wormhole-connect/src/views/WalletModal.tsx diff --git a/wormhole-connect/src/components/ChainsModal.tsx b/wormhole-connect/src/components/ChainsModal.tsx deleted file mode 100644 index 158445c85..000000000 --- a/wormhole-connect/src/components/ChainsModal.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import React, { ChangeEvent, useMemo, useState } from 'react'; -import { useTheme } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; -import { ChainConfig } from 'sdklegacy'; -import config from 'config'; -import { CENTER, joinClass } from 'utils/style'; - -import Header from './Header'; -import Modal from './Modal'; -import Spacer from './Spacer'; -import Search from './Search'; -import Scroll from './Scroll'; -import TokenIcon from 'icons/TokenIcons'; -import MoreNetworkIcon from 'icons/MoreNetworkIcon'; -import { Chain } from '@wormhole-foundation/sdk'; - -const useStyles = makeStyles()((theme: any) => ({ - chainsContainer: { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fill, 150px)', - justifyContent: 'space-between', - }, - noResults: { - ...CENTER, - minHeight: '130px', - }, - chainTile: { - width: '117px', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center', - margin: '12px 4px', - padding: '16px', - transition: 'background-color 0.4s', - cursor: 'pointer', - borderRadius: '8px', - '&:hover': { - backgroundColor: theme.palette.options.select, - }, - }, - extraChainTile: { - textDecoration: 'none', - color: 'inherit', - }, - chainIcon: { - width: '48px', - height: '48px', - }, - chainText: { - fontSize: '14px', - marginTop: '16px', - }, - disabled: { - opacity: '40%', - cursor: 'not-allowed', - clickEvent: 'none', - }, - subtitle: { - opacity: '60%', - }, -})); - -export enum ModalType { - FROM = 1, - TO = 2, -} - -type Props = { - title: string; - open: boolean; - chains?: ChainConfig[]; - isDisabled?: (chain: Chain) => boolean; - onClose: () => any; - onSelect: (chain: Chain) => any; - onMoreNetworkSelect?: ( - href: string, - chainName: string, - target?: string, - ) => any; -}; - -function ChainsModal(props: Props) { - const { classes } = useStyles(); - const theme: any = useTheme(); - - const chains = props.chains || config.chainsArr; - const [search, setSearch] = useState(); - const handleExtraNetwork = ( - href: string, - chainName: string, - target?: string, - ) => { - if (href) { - props.onMoreNetworkSelect?.(href, chainName, target); - } else { - props.onMoreNetworkSelect?.( - config.ui.moreChains!.href, - chainName, - target, - ); - } - }; - const supportedChains = useMemo(() => { - const supported = config.routes.allSupportedChains(); - return chains.filter((chain) => { - return supported.includes(chain.key); - }); - }, [chains]); - - const searchChains = ( - e: - | ChangeEvent - | ChangeEvent - | undefined, - ) => { - setSearch(e?.target.value.toLowerCase()); - }; - - const showChain = (chain: Chain) => { - if (chain === 'Wormchain') return false; - if (!search) return true; - const chainConfig = config.chains[chain]!; - const name = chainConfig.displayName.toLowerCase(); - return name.includes(search); - }; - - const handleClose = () => { - setTimeout(() => setSearch(undefined), 500); - props.onClose(); - }; - - const handleSelect = (chain: Chain) => { - props.onSelect(chain); - handleClose(); - }; - - return ( - 6 ? 650 : 500} - onClose={handleClose} - > -
-
Select Network
- - - - - {supportedChains.length > 0 ? ( -
- {supportedChains.map((chain: any, i) => { - const disabled = props.isDisabled - ? props.isDisabled(chain.key) - : false; - return ( - showChain(chain.key) && ( -
handleSelect(chain.key)} - > - -
{chain.displayName}
-
- ) - ); - })} - {config.ui.moreChains?.chains.map((chain, i) => { - return ( -
- handleExtraNetwork( - chain.href || config.ui.moreChains!.href, - chain.name || - chain.label.toLocaleLowerCase().split(' ').join('_'), - chain.target || config.ui.moreChains?.target, - ) - } - > - -
{chain.label}
-
- ); - })} -
- ) : ( -
No results
- )} - - - ); -} - -export default ChainsModal; diff --git a/wormhole-connect/src/components/ConnectWallet.tsx b/wormhole-connect/src/components/ConnectWallet.tsx deleted file mode 100644 index 6d6f494a3..000000000 --- a/wormhole-connect/src/components/ConnectWallet.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import React from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { useTheme } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; -import { ScopedCssBaseline, Tooltip, useMediaQuery } from '@mui/material'; - -import { RootState } from 'store'; -import { setWalletModal } from 'store/router'; -import { disconnectWallet as disconnectFromStore } from 'store/wallet'; -import { TransferWallet } from 'utils/wallet'; -import { copyTextToClipboard, displayWalletAddress } from 'utils'; - -import DownIcon from 'icons/Down'; -import WalletIcon from 'icons/Wallet'; -import WalletIcons from 'icons/WalletIcons'; -import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; -import Popover from '@mui/material/Popover'; -import config from 'config'; -import { TransferSide } from 'config/types'; -import { ExplorerConfig } from 'config/ui'; - -type StyleProps = { disabled?: boolean }; -const useStyles = makeStyles()((theme: any, { disabled }) => ({ - connectWallet: { - display: 'flex', - alignItems: 'center', - justifyContent: 'end', - gap: '8px', - padding: '8px 16px', - borderRadius: '8px', - backgroundColor: theme.palette.button.primary, - cursor: disabled ? 'not-allowed' : 'pointer', - opacity: disabled ? 0.7 : 1.0, - }, - walletIcon: { - width: '24px', - height: '24px', - }, - down: { - marginRight: '-8px', - }, - dropdown: { - backgroundColor: theme.palette.popover.background, - display: 'flex', - flexDirection: 'column', - gap: '8px', - padding: '8px', - width: '175px', - }, - dropdownItem: { - borderRadius: '8px', - padding: '16px', - cursor: 'pointer', - '&:hover': { - backgroundColor: theme.palette.popover.secondary, - }, - }, -})); - -type Props = { - side: TransferSide; - type: TransferWallet; - disabled?: boolean; -}; - -type ExplorerLinkProps = { - address: string; -} & ExplorerConfig; - -function ExplorerLink({ - address, - href, - target = '_blank', - label = 'Transactions', -}: ExplorerLinkProps) { - const { classes } = useStyles({ disabled: false }); - const handleOpenExplorer = () => - window.open(href.replace('{:address}', address), target); - return ( -
- {label} -
- ); -} - -function ConnectWallet(props: Props) { - const { disabled = false, type } = props; - const { classes } = useStyles({ disabled }); - const theme = useTheme(); - const dispatch = useDispatch(); - const mobile = useMediaQuery(theme.breakpoints.down('sm')); - const wallet = useSelector((state: RootState) => state.wallet[type]); - - const connect = async (popupState?: any) => { - if (disabled) return; - if (popupState) popupState.close(); - dispatch(setWalletModal(type)); - }; - - const copy = async (popupState: any) => { - await copyTextToClipboard(wallet.address); - popupState.close(); - }; - - const disconnectWallet = async () => { - dispatch(disconnectFromStore(type)); - }; - - if (wallet && wallet.address) { - return ( - - {(popupState) => { - const { onClick: triggerPopup, ...boundProps } = - bindTrigger(popupState); - - const onClick = (e: React.MouseEvent) => { - if (disabled) return; - triggerPopup(e); - }; - - return ( -
-
- - {displayWalletAddress(wallet.type, wallet.address)} - {!disabled && } -
- - -
-
copy(popupState)} - > - Copy address -
- {config.ui.explorer ? ( - - ) : null} -
connect(popupState)} - > - Change wallet -
-
- Disconnect -
-
- - -
- ); - }} - - ); - } else { - const button = ( -
connect()} - data-testid={`${props.side}-section-connect-wallet-button`} - > - -
{mobile ? 'Connect' : 'Connect wallet'}
-
- ); - - if (disabled) { - return ( - {button} - ); - } else { - return button; - } - } -} - -export default ConnectWallet; diff --git a/wormhole-connect/src/components/Input.tsx b/wormhole-connect/src/components/Input.tsx deleted file mode 100644 index 1027f5041..000000000 --- a/wormhole-connect/src/components/Input.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import InputTransparent from './InputTransparent'; -import InputContainer from './InputContainer'; - -type Props = { - left?: JSX.Element; - right?: JSX.Element; -}; - -const useStyles = makeStyles()((theme) => ({ - inputContent: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - input: { - flexGrow: 1, - }, -})); - -function Input({ left, right }: Props) { - const { classes } = useStyles(); - return ( - -
- {left} -
- -
- {right} -
- - ); -} - -export default Input; diff --git a/wormhole-connect/src/components/InputContainer.tsx b/wormhole-connect/src/components/InputContainer.tsx deleted file mode 100644 index dff18dc1e..000000000 --- a/wormhole-connect/src/components/InputContainer.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { joinClass } from 'utils/style'; -import { makeStyles } from 'tss-react/mui'; - -type StyleProps = { bg?: string }; -const useStyles = makeStyles()((theme: any, { bg }) => ({ - input: { - width: '100%', - padding: theme.spacing(1.5), - borderRadius: '8px', - backgroundColor: bg || theme.palette.card.background, - boxShadow: theme.palette.card.elevation, - }, - border: { - borderRadius: '0px !important', - border: `1px solid ${theme.palette.divider}`, - }, -})); - -type Props = { - bg?: string; - border?: boolean; - children: JSX.Element | JSX.Element[]; - styles?: React.CSSProperties; - onClick?: React.MouseEventHandler; -}; - -function InputContainer(props: Props) { - const { classes } = useStyles({ bg: props.bg }); - return ( -
- {props.children} -
- ); -} - -export default InputContainer; diff --git a/wormhole-connect/src/components/Menu.tsx b/wormhole-connect/src/components/Menu.tsx deleted file mode 100644 index ccd894005..000000000 --- a/wormhole-connect/src/components/Menu.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import { useDispatch } from 'react-redux'; -import Popover from '@mui/material/Popover'; -import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; -import { makeStyles } from 'tss-react/mui'; - -import { ICON } from 'utils/style'; -import { Route, setRoute } from 'store/router'; -import MenuIcon from 'icons/Menu'; - -const useStyles = makeStyles()((theme: any) => ({ - menuIcon: ICON, - menu: { - backgroundColor: theme.palette.popover.background, - display: 'flex', - flexDirection: 'column', - gap: '8px', - padding: '8px', - width: '200px', - }, - menuItem: { - borderRadius: '8px', - padding: '16px', - cursor: 'pointer', - '&:hover': { - backgroundColor: theme.palette.popover.secondary, - }, - }, -})); - -export default function Menu() { - const { classes } = useStyles(); - const dispatch = useDispatch(); - - const navigate = (name: Route) => { - dispatch(setRoute(name)); - }; - - return ( - - {(popupState) => ( -
-
- -
- -
-
navigate('bridge')} - > - Bridge -
-
navigate('redeem')} - > - Resume transaction -
-
navigate('faq')}> - FAQ -
-
navigate('terms')} - > - Terms of Use -
-
- -
- )} - - ); -} diff --git a/wormhole-connect/src/components/Options.tsx b/wormhole-connect/src/components/Options.tsx deleted file mode 100644 index 9e12631f8..000000000 --- a/wormhole-connect/src/components/Options.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import { joinClass } from 'utils/style'; -import { Collapse } from '@mui/material'; - -const useStyles = makeStyles()((theme: any) => ({ - options: { - backgroundColor: theme.palette.card.background, - borderBottomLeftRadius: '8px', - borderBottomRightRadius: '8px', - }, - option: { - width: '100%', - borderRadius: '0', - backgroundColor: theme.palette.card.background, - '&:last-child': { - borderBottomLeftRadius: '8px', - borderBottomRightRadius: '8px', - }, - '&:not(:last-child)': { - borderBottom: `0.5px solid ${theme.palette.divider}`, - }, - }, - optionContent: { - padding: '16px', - }, - optionContentEnabled: { - '&:hover': { - backgroundColor: theme.palette.options.hover, - }, - }, - arrow: { - position: 'absolute', - right: '0', - height: '100%', - display: 'flex', - justifyContent: 'center', - }, - invert: { - transform: 'rotate(180deg)', - }, - active: { - backgroundColor: `${theme.palette.options.select} !important`, - }, -})); - -export type Option = { - key: any; - child: any; - disabled?: boolean; -}; -type Props = { - children: Option[]; - onSelect: (value: any) => void; - active?: number | string; - collapsable?: boolean; - collapsed?: boolean; -}; - -function Options(props: Props) { - const { classes } = useStyles(); - - const isCollapsed = (key: any) => { - return props.collapsable && props.collapsed && props.active !== key; - }; - - return ( -
- {props.children.map((option, i) => { - return ( - -
props.onSelect(option.key)} - style={{ - cursor: props.children.length > 0 ? 'pointer' : 'default', - }} - > - {option.child} -
- - ); - })} -
- ); -} - -export default Options; diff --git a/wormhole-connect/src/components/Price.tsx b/wormhole-connect/src/components/Price.tsx deleted file mode 100644 index 28fe42117..000000000 --- a/wormhole-connect/src/components/Price.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; -import React from 'react'; - -const useStyles = makeStyles()(() => ({ - price: { - fontSize: '10px', - }, - alignRight: { - textAlign: 'right', - }, -})); - -interface priceProps { - children?: string; - textAlign?: 'left' | 'right'; -} -const Price = ({ children, textAlign = 'left' }: priceProps) => { - const { classes } = useStyles(); - return ( - <> - {children?.length ? ( -
- {children} -
- ) : ( - <> - )} - - ); -}; - -export default Price; diff --git a/wormhole-connect/src/components/RenderRows.tsx b/wormhole-connect/src/components/RenderRows.tsx deleted file mode 100644 index ce04f96ec..000000000 --- a/wormhole-connect/src/components/RenderRows.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import Down from 'icons/Down'; -import { Collapse } from '@mui/material'; -import { joinClass } from 'utils/style'; -import { NestedRow } from 'routes/types'; -import Price from './Price'; - -const useStyles = makeStyles()((theme) => ({ - row: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - margin: '4px 0', - }, - rowTitle: { - fontSize: '14px', - opacity: '70%', - }, - arrow: { - height: '24px', - marginLeft: '8px', - transition: 'transform 0.4s', - }, - invert: { - transform: 'rotate(180deg)', - }, - subrow: { - marginLeft: '16px', - }, - subrowText: { - fontSize: '14px', - }, -})); - -interface RenderRowsProps { - rows: NestedRow[]; - small?: boolean; -} - -export function RenderRows(props: RenderRowsProps) { - const { classes } = useStyles(); - const [collapsed, setCollapsed] = React.useState(true); - const toggleCollapsed = () => setCollapsed((prev) => !prev); - return ( -
- {props.rows.map((row, i) => ( -
-
row.rows && toggleCollapsed()} - > -
- {row.title} - {row.rows && ( - - )} -
-
-
- {row.value} -
- {row.valueUSD} -
-
-
- {row.rows && ( - -
- -
- - )} -
-
- ))} -
- ); -} diff --git a/wormhole-connect/src/components/Scroll.tsx b/wormhole-connect/src/components/Scroll.tsx deleted file mode 100644 index 8fe0f47e3..000000000 --- a/wormhole-connect/src/components/Scroll.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import { OPACITY } from 'utils/style'; - -const useStyles = makeStyles<{ blendColor: string }>()( - (theme, { blendColor }) => ({ - anchor: { - position: 'relative', - width: '100%', - }, - scrollContainer: { - width: '100%', - height: 'calc(100% - 48px)', - overflowY: 'scroll', - overflowX: 'hidden', - padding: 0, - }, - fadeOverlay: { - position: 'absolute', - left: '0', - right: '0', - bottom: '0', - height: '40px', - zIndex: '5', - backgroundImage: `linear-gradient(${blendColor + OPACITY[0]} 0%, ${ - blendColor + OPACITY[100] - } 100%)`, - pointerEvents: 'none', - }, - fadeOverlayTop: { - position: 'absolute', - left: '0', - right: '0', - top: '0', - height: '8px', - zIndex: '5', - backgroundImage: `linear-gradient(${blendColor + OPACITY[100]} 0%, ${ - blendColor + OPACITY[0] - } 100%)`, - pointerEvents: 'none', - }, - content: { - padding: '8px 0 16px 0', - }, - }), -); - -type Props = { - height: string; - blendColor: string; - children: JSX.Element | JSX.Element[]; -}; - -function Scroll(props: Props) { - const { classes } = useStyles({ blendColor: props.blendColor }); - return ( -
-
-
-
-
{props.children}
-
-
- ); -} - -export default Scroll; diff --git a/wormhole-connect/src/components/Stepper/Stepper.tsx b/wormhole-connect/src/components/Stepper/Stepper.tsx deleted file mode 100644 index 2cd455025..000000000 --- a/wormhole-connect/src/components/Stepper/Stepper.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import StepperContent from './StepperContent'; -import StepperLabel from './StepperLabel'; - -type Step = { - label: string; - component: JSX.Element | JSX.Element[]; - warningLabel?: boolean; - warningLine?: boolean; -}; - -type Props = { - steps: Step[]; - activeStep: number; -}; - -export default function Stepper(props: Props) { - const { steps, activeStep } = props; - const theme = useTheme(); - - return ( - - {steps.map((step, index) => ( -
- -
{step.label}
- - - {step.component} - -
- ))} - - ); -} diff --git a/wormhole-connect/src/components/Stepper/StepperContent.tsx b/wormhole-connect/src/components/Stepper/StepperContent.tsx deleted file mode 100644 index 0683660a6..000000000 --- a/wormhole-connect/src/components/Stepper/StepperContent.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import { joinClass } from 'utils/style'; - -const useStyles = makeStyles()((theme: any) => ({ - content: { - marginLeft: '14px', - minHeight: '40px', - borderLeft: `1px solid ${theme.palette.primary[700]}`, - padding: '8px 0 16px 32px', - [theme.breakpoints.down('sm')]: { - marginLeft: '0', - borderLeft: 'none', - paddingLeft: '0', - }, - }, - lineActive: { - borderColor: theme.palette.success[400], - }, - lineWarning: { - borderColor: theme.palette.warning[400], - }, - lineNone: { - border: 'none !important', - }, -})); - -type Props = { - index: number; - activeStep: number; - last?: boolean; - children: JSX.Element | JSX.Element[]; - warning?: boolean; -}; - -export default function StepperLabel(props: Props) { - const { classes } = useStyles(); - const { index, activeStep, last, children, warning } = props; - - return ( -
index && - (warning ? classes.lineWarning : classes.lineActive), - !!last && classes.lineNone, - ])} - > - {activeStep >= index && children} -
- ); -} diff --git a/wormhole-connect/src/components/Stepper/StepperLabel.tsx b/wormhole-connect/src/components/Stepper/StepperLabel.tsx deleted file mode 100644 index 5b3e5180a..000000000 --- a/wormhole-connect/src/components/Stepper/StepperLabel.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; -import { joinClass, OPACITY } from 'utils/style'; -import Check from '@mui/icons-material/Check'; -import Warning from '@mui/icons-material/Warning'; - -const useStyles = makeStyles()((theme: any) => ({ - label: { - display: 'flex', - alignItems: 'center', - }, - textInactive: { - color: `${theme.palette.text.primary}${OPACITY[30]} !important`, - }, - icon: { - width: '32px', - height: '32px', - backgroundColor: theme.palette.card.background, - borderRadius: '50%', - border: `1px solid ${theme.palette.primary[500]}`, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - fontSize: '16px', - marginRight: '32px', - [theme.breakpoints.down('sm')]: { - margin: '0 8px 0 16px', - }, - }, - filled: { - backgroundColor: `${theme.palette.success[400]} !important`, - }, - iconActive: { - border: `1px solid ${theme.palette.success[400]} !important`, - }, - iconWarning: { - border: `1px solid ${theme.palette.warning[400]} !important`, - }, -})); - -function StepIcon(props: { - index: number; - active?: boolean; - filled?: boolean; - completed?: boolean; - warning?: boolean; -}) { - const { active, completed, filled, warning } = props; - const { classes } = useStyles(); - const theme: any = useTheme(); - - if (warning) { - return ( -
- -
- ); - } else if (completed) { - return ( -
- -
- ); - } else if (active) { - return ( -
- {props.index} -
- ); - } - return
{props.index}
; -} - -type Props = { - index: number; - activeStep: number; - filled?: boolean; - children: JSX.Element | JSX.Element[]; - warning?: boolean; -}; - -export default function StepperLabel(props: Props) { - const { classes } = useStyles(); - const { index, activeStep, filled, children, warning } = props; - - return ( -
activeStep && classes.textInactive, - ])} - > - - {children} -
- ); -} diff --git a/wormhole-connect/src/components/Tabs.tsx b/wormhole-connect/src/components/Tabs.tsx deleted file mode 100644 index 170f804fd..000000000 --- a/wormhole-connect/src/components/Tabs.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import * as React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; -import { useTheme } from '@mui/material/styles'; - -const useStyles = makeStyles()((theme) => ({ - tabs: { - display: 'flex', - flexDirection: 'row', - justifyContext: 'space-between', - }, - tab: { - flexGrow: 1, - }, -})); - -interface TabPanelProps { - children?: React.ReactNode; - index: number; - value: number; -} - -function CustomTabPanel(props: TabPanelProps) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -function a11yProps(index: number) { - return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}`, - }; -} - -type TabData = { - label: string; - panel: React.ReactNode; -}; - -export default function BasicTabs(props: { tabs: TabData[] }) { - const { tabs } = props; - const { classes } = useStyles(); - const theme = useTheme(); - const [value, setValue] = React.useState(0); - - const handleChange = (event: React.SyntheticEvent, newValue: number) => { - setValue(newValue); - }; - - return ( - - - - {tabs.map((tab, i) => ( - - ))} - - - {tabs.map((tab, i) => ( - - {tab.panel} - - ))} - - ); -} diff --git a/wormhole-connect/src/components/TokensModal.tsx b/wormhole-connect/src/components/TokensModal.tsx deleted file mode 100644 index 42b2a24e7..000000000 --- a/wormhole-connect/src/components/TokensModal.tsx +++ /dev/null @@ -1,454 +0,0 @@ -import { Alert, Link, useMediaQuery } from '@mui/material'; -import CircularProgress from '@mui/material/CircularProgress'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import { useTheme } from '@mui/material/styles'; -import { AVAILABLE_MARKETS_URL } from 'config/constants'; -import config from 'config'; -import { TokenConfig } from 'config/types'; -import TokenIcon from 'icons/TokenIcons'; -import React, { ChangeEvent, useEffect, useMemo, useState } from 'react'; -import { useSelector } from 'react-redux'; -import { RootState } from 'store'; -import { makeStyles } from 'tss-react/mui'; -import { displayAddress, sortTokens } from 'utils'; -import { isGatewayChain } from 'utils/cosmos'; -import { CENTER, NO_INPUT } from 'utils/style'; -import Header from './Header'; -import Modal from './Modal'; -import Scroll from './Scroll'; -import Search from './Search'; -import Spacer from './Spacer'; -import Tabs from './Tabs'; -import useGetTokenBalances from 'hooks/useGetTokenBalances'; -import { Balances } from 'store/transferInput'; -import { Chain } from '@wormhole-foundation/sdk'; - -const useStyles = makeStyles()((theme: any) => ({ - tokensContainer: { - display: 'flex', - flexDirection: 'column', - }, - noResults: { - ...CENTER, - minHeight: '72px', - }, - tokenRow: { - position: 'relative', - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - padding: '16px 8px', - transition: `background-color 0.4s`, - cursor: 'pointer', - '&:hover': { - backgroundColor: theme.palette.options.select, - }, - '&:not(:last-child)': { - borderBottom: `0.5px solid ${theme.palette.divider}`, - }, - }, - moreTokensRow: { - textDecoration: 'none', - color: 'inherit', - }, - tokenRowLeft: { - display: 'flex', - alignItems: 'center', - fontSize: '14px', - gap: '8px', - textAlign: 'left', - }, - tokenRowRight: { - display: 'flex', - flexDirection: 'column', - alignItems: 'right', - textAlign: 'right', - }, - tokenRowBalanceText: { - opacity: '60%', - fontSize: '12px', - }, - tokenRowBalance: { - fontSize: '14px', - }, - tokenRowAddressContainer: { - width: '100%', - position: 'absolute', - fontSize: '14px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - tokenRowAddress: { - width: '100px', - textAlign: 'left', - opacity: '60%', - }, - nativeChain: { - opacity: '60%', - }, - loading: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '72px', - }, - moreTokens: { - textTransform: 'none', - marginTop: '66px', - minHeight: '64px', - minWidth: '193px', - backgroundColor: theme.palette.button.primary, - }, - iconButton: { - width: '32px', - height: '32px', - color: theme.palette.modal.background, - backgroundColor: theme.palette.button.primaryText, - '&:hover': { - backgroundColor: theme.palette.button.primaryText, - }, - borderRadius: '100%', - }, - iconOpenInNew: { - width: '19px', - height: '19px', - }, - moreTokensLabel: { - marginRight: '16px', - }, - noWrap: { - whiteSpace: 'nowrap', - }, -})); - -const displayNativeChain = (token: TokenConfig): string => { - const chainConfig = config.chains[token.nativeChain]; - if (!chainConfig) return ''; - return chainConfig.displayName; -}; - -type DisplayTokensProps = { - tokens: TokenConfig[]; - balances: Balances; - walletAddress: string | undefined; - chain: any; - selectToken: (tokenKey: string) => void; - loading: boolean; - search: string; - moreTokens?: (href: string, target?: string) => void; -}; - -function DisplayTokens(props: DisplayTokensProps) { - const { classes } = useStyles(); - const theme: any = useTheme(); - const { - tokens, - balances, - walletAddress, - chain, - selectToken, - loading, - search, - moreTokens = () => { - /* noop */ - }, - } = props; - - const showCircularProgress = (token: string): boolean => { - if (!chain || !walletAddress) return false; - if (balances[token]?.balance !== null) return true; - return false; - }; - - const sortedTokens = useMemo(() => { - return sortTokens(tokens, chain); - }, [tokens, chain]); - - return ( - -
- {sortedTokens.length > 0 ? ( - <> - {sortedTokens.map((token) => ( -
selectToken(token.key)} - > -
- -
-
{token.symbol}
-
- {displayNativeChain(token)} -
-
-
-
-
Balance
-
- {balances[token.key]?.balance && walletAddress ? ( -
{balances[token.key].balance}
- ) : showCircularProgress(token.key) ? ( - - ) : ( -
{NO_INPUT}
- )} -
-
-
-
-
- {token.nativeChain === chain - ? 'Native' - : 'Wormhole Wrapped'} -
- {token.tokenId && ( -
- {displayAddress( - token.tokenId.chain, - token.tokenId.address, - )} -
- )} -
-
-
- ))} - {config.ui.moreTokens ? ( - <> -
- -
- - ) : null} - - ) : loading ? ( -
- -
- ) : ( -
- {search ? 'No results' : 'No balances detected'} -
- )} -
- - ); -} - -type Props = { - open: boolean; - chain: Chain | undefined; - walletAddress: string | undefined; - onSelect: (token: string) => any; - onClose: any; - type: 'source' | 'dest'; -}; - -function isGatewayNativeToken(token: TokenConfig) { - return token.tokenId && isGatewayChain(token.tokenId.chain); -} - -function TokensModal(props: Props) { - const theme = useTheme(); - const { open, chain, walletAddress, type } = props; - const mobile = useMediaQuery(theme.breakpoints.down('sm')); - const [tokens, setTokens] = useState([]); - const [search, setSearch] = useState(''); - - const { supportedSourceTokens, supportedDestTokens, fromChain, toChain } = - useSelector((state: RootState) => state.transferInput); - - const allSupportedDestTokens = []; - - const supportedTokens = useMemo(() => { - const supported = - type === 'source' ? supportedSourceTokens : supportedDestTokens; - return supported.filter((t) => !isGatewayNativeToken(t)); - }, [type, supportedSourceTokens, supportedDestTokens]); - - const queryTokens = - type === 'dest' ? allSupportedDestTokens : supportedTokens; - - const { isFetching, balances } = useGetTokenBalances( - walletAddress || '', - chain, - queryTokens, - ); - - // search tokens - const handleSearch = ( - e: - | ChangeEvent - | ChangeEvent - | undefined, - ) => { - if (e) { - const lowercase = e.target.value.toLowerCase(); - setSearch(lowercase); - } else { - setSearch(''); - } - }; - - const handleMoreTokens = (href: string, target = '_self') => { - let hydratedHref = href; - if (fromChain) { - hydratedHref = hydratedHref.replace('{:sourceChain}', fromChain); - } - if (toChain) { - hydratedHref = hydratedHref.replace('{:targetChain}', toChain); - } - window.open( - hydratedHref.replace('&targetChain={:targetChain}', ''), - target, - ); - }; - - const displayedTokens = useMemo(() => { - if (!search) return tokens; - return tokens.filter((c) => { - const symbol = c.symbol.toLowerCase(); - return ( - symbol.includes(search) || - (c.tokenId && c.tokenId.address.toLowerCase().includes(search)) - ); - }); - }, [tokens, search]); - - // listen for close event - const closeTokensModal = () => { - setTimeout(() => setSearch(''), 500); - props.onClose(); - }; - - // select token - const selectToken = (token: string) => { - props.onSelect(token); - closeTokensModal(); - }; - - useEffect(() => { - // get tokens that exist on the chain and have a balance greater than 0 - const filtered = supportedTokens.filter((t) => { - if (!t.tokenId && t.nativeChain !== chain) return false; - - /* TODO SDKV2 - // if token is USDC and the chain is cctp enabled, only show native ones - const isCctpChain = chain && CCTPManual_CHAINS.includes(chain); - if (t.symbol === 'USDC' && t.nativeChain !== chain && isCctpChain) - return false; - */ - - if (t.symbol === 'tBTC' && chain) { - // if the chain is canonical then only show the native tBTC token - if (false /* TODO SDKV2 isTBTCCanonicalChain(chain)*/) { - if (t.nativeChain !== chain) { - return false; - } - } else { - // if the chain is not canonical then only show the ethereum tBTC token - // which is considered the canonical tBTC token - if (t.nativeChain !== 'Ethereum') { - return false; - } - } - } - - if (type === 'dest') return true; - if (!balances[t.key]) return true; - const { balance } = balances[t.key]; - const isNonzeroBalance = balance !== null && balance !== '0'; - return isNonzeroBalance; - }); - setTokens(filtered); - }, [balances, chain, supportedTokens, type]); - - const tabs = [ - { - label: 'Available Tokens', - panel: ( - - ), - }, - { - label: 'All Tokens', - panel: ( - - ), - }, - ]; - - return ( - -
- - - You should always check for markets and liquidity before sending tokens.{' '} - - Click here to see available markets for wrapped tokens. - - - - - - - ); -} - -export default TokensModal; diff --git a/wormhole-connect/src/components/Tooltip.tsx b/wormhole-connect/src/components/Tooltip.tsx deleted file mode 100644 index 76d1195da..000000000 --- a/wormhole-connect/src/components/Tooltip.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import Tooltip from '@mui/material/Tooltip'; -import InfoIcon from 'icons/Info'; -import { CENTER } from 'utils/style'; - -type Position = - | 'top-start' - | 'top' - | 'top-end' - | 'left-start' - | 'left' - | 'left-end' - | 'right-start' - | 'right' - | 'right-end' - | 'bottom-start' - | 'bottom' - | 'bottom-end'; - -const useStyles = makeStyles()(() => ({ - icon: { - height: '16px', - cursor: 'pointer', - }, - clickArea: { - width: '40px', - height: '40px', - ...CENTER, - }, -})); - -type Props = { - text: string; - position?: Position; -}; - -export default function BasicTooltip(props: Props) { - const position = props.position || 'top'; - const { classes } = useStyles(); - return ( - -
- -
- - ); -} diff --git a/wormhole-connect/src/hooks/useComputeReceiverNativeBalance.ts b/wormhole-connect/src/hooks/useComputeReceiverNativeBalance.ts deleted file mode 100644 index 8c2342c3b..000000000 --- a/wormhole-connect/src/hooks/useComputeReceiverNativeBalance.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* TODO SDKV2 -import config from 'config'; -import { useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { BigNumber } from 'ethers'; -import { setReceiverNativeBalance } from 'store/transferInput'; -*/ - -import { Chain } from '@wormhole-foundation/sdk'; - -import type { WalletData } from 'store/wallet'; - -/* TODO SDKV2 -import { getTokenDecimals } from 'utils'; -import { toDecimals } from 'utils/balance'; -*/ - -type Props = { - sourceChain: Chain | undefined; - destChain: Chain | undefined; - receiving: WalletData; -}; - -export const useComputeReceiverNativeBalance = (props: Props): void => { - /* - * TODO SDKV2 - const { sourceChain, destChain, receiving } = props; - const dispatch = useDispatch(); - // check destination native balance - useEffect(() => { - if (!sourceChain || !destChain || !receiving.address) { - return; - } - - const chainConfig = config.chains?.[destChain]; - - config.wh - .getNativeBalance(receiving.address, destChain) - .then((res: BigNumber) => { - const tokenConfig = chainConfig?.gasToken - ? config.tokens[chainConfig.gasToken] - : undefined; - if (!tokenConfig) - throw new Error('Could not get native gas token config'); - const decimals = getTokenDecimals( - toChainId(tokenConfig.nativeChain), - 'native', - ); - dispatch(setReceiverNativeBalance(toDecimals(res, decimals, 6))); - }); - }, [sourceChain, destChain, receiving.address, dispatch]); - */ -}; diff --git a/wormhole-connect/src/routes/porticoBridge/utils.ts b/wormhole-connect/src/routes/porticoBridge/utils.ts deleted file mode 100644 index ab30261f9..000000000 --- a/wormhole-connect/src/routes/porticoBridge/utils.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const isPorticoRoute = (a: any) => false; -export const isPorticoTransferDestInfo = (a: any) => false; diff --git a/wormhole-connect/src/routes/relay/index.ts b/wormhole-connect/src/routes/relay/index.ts deleted file mode 100644 index fcb073fef..000000000 --- a/wormhole-connect/src/routes/relay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './types'; diff --git a/wormhole-connect/src/routes/relay/types.ts b/wormhole-connect/src/routes/relay/types.ts deleted file mode 100644 index 0db41477d..000000000 --- a/wormhole-connect/src/routes/relay/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TokenPrices } from 'store/tokenPrices'; -import { TransferInfo } from 'utils/sdkv2'; - -export type RelayOptions = { - relayerFee?: number; - toNativeToken?: number; - receiveNativeAmt: number; -}; - -export interface TransferDestInfoParams { - txData: TransferInfo; - tokenPrices: TokenPrices; - receiveTx?: string; - transferComplete?: boolean; -} diff --git a/wormhole-connect/src/store/index.ts b/wormhole-connect/src/store/index.ts index bbb302436..96a8c498c 100644 --- a/wormhole-connect/src/store/index.ts +++ b/wormhole-connect/src/store/index.ts @@ -4,7 +4,6 @@ import transferInputReducer from './transferInput'; import relayReducer from './relay'; import routerReducer from './router'; import walletReducer from './wallet'; -import porticoBridgeReducer from './porticoBridge'; import tokenPricesReducer from './tokenPrices'; export const store = configureStore({ @@ -14,7 +13,6 @@ export const store = configureStore({ router: routerReducer, wallet: walletReducer, relay: relayReducer, - porticoBridge: porticoBridgeReducer, tokenPrices: tokenPricesReducer, }, }); diff --git a/wormhole-connect/src/store/porticoBridge.ts b/wormhole-connect/src/store/porticoBridge.ts deleted file mode 100644 index 0603f6ee7..000000000 --- a/wormhole-connect/src/store/porticoBridge.ts +++ /dev/null @@ -1,83 +0,0 @@ -// TODO: SDKV2 remove this file -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { - DataWrapper, - errorDataWrapper, - fetchDataWrapper, - getEmptyDataWrapper, - receiveDataWrapper, -} from './helpers'; - -export interface PorticoSwapAmounts { - minAmountStart: string; - minAmountFinish: string; - amountFinish: string; -} - -export interface PorticoBridgeState { - relayerFee: DataWrapper; - swapAmounts: DataWrapper; -} - -const initialState: PorticoBridgeState = { - relayerFee: getEmptyDataWrapper(), - swapAmounts: getEmptyDataWrapper(), -}; - -export const porticoBridgeSlice = createSlice({ - name: 'porticoBridge', - initialState, - reducers: { - setRelayerFee: ( - state: PorticoBridgeState, - { payload }: PayloadAction, - ) => { - state.relayerFee = receiveDataWrapper(payload); - }, - setFetchingRelayerFee: (state: PorticoBridgeState) => { - state.relayerFee = fetchDataWrapper(); - }, - setRelayerFeeError: ( - state: PorticoBridgeState, - { payload }: PayloadAction, - ) => { - state.relayerFee = errorDataWrapper(payload); - }, - resetRelayerFee: (state: PorticoBridgeState) => { - state.relayerFee = getEmptyDataWrapper(); - }, - setSwapAmounts: ( - state: PorticoBridgeState, - { payload }: PayloadAction, - ) => { - state.swapAmounts = receiveDataWrapper(payload); - }, - setFetchingSwapAmounts: (state: PorticoBridgeState) => { - state.swapAmounts = fetchDataWrapper(); - }, - setSwapAmountsError: ( - state: PorticoBridgeState, - { payload }: PayloadAction, - ) => { - state.swapAmounts = errorDataWrapper(payload); - }, - resetSwapAmounts: (state: PorticoBridgeState) => { - state.swapAmounts = getEmptyDataWrapper(); - }, - clearPorticoBridge: () => initialState, - }, -}); - -export const { - setRelayerFee, - setFetchingRelayerFee, - setRelayerFeeError, - resetRelayerFee, - setSwapAmounts, - setFetchingSwapAmounts, - setSwapAmountsError, - resetSwapAmounts, - clearPorticoBridge, -} = porticoBridgeSlice.actions; - -export default porticoBridgeSlice.reducer; diff --git a/wormhole-connect/src/store/transferInput.ts b/wormhole-connect/src/store/transferInput.ts index 2a970654e..52f22982b 100644 --- a/wormhole-connect/src/store/transferInput.ts +++ b/wormhole-connect/src/store/transferInput.ts @@ -16,7 +16,6 @@ import { getEmptyDataWrapper, receiveDataWrapper, } from './helpers'; -import { isPorticoRoute } from 'routes/porticoBridge/utils'; import { amount, Chain } from '@wormhole-foundation/sdk'; export type Balance = { @@ -177,7 +176,7 @@ function getInitialState(): TransferInputState { } const performModificationsIfFromChainChanged = (state: TransferInputState) => { - const { fromChain, token, route } = state; + const { fromChain, token } = state; if (token) { const tokenConfig = config.tokens[token]; // clear token and amount if not supported on the selected network @@ -186,9 +185,7 @@ const performModificationsIfFromChainChanged = (state: TransferInputState) => { (!tokenConfig.tokenId && tokenConfig.nativeChain !== fromChain) ) { state.token = ''; - if (!route || !isPorticoRoute(route)) { - state.amount = ''; - } + state.amount = ''; } if ( tokenConfig.symbol === 'USDC' && @@ -203,16 +200,12 @@ const performModificationsIfFromChainChanged = (state: TransferInputState) => { getNativeVersionOfToken('tBTC', fromChain!) || config.tokens['tBTC']?.key || ''; - } else if (route && isPorticoRoute(route)) { - if (tokenConfig.nativeChain !== fromChain) { - state.token = getNativeVersionOfToken(tokenConfig.symbol, fromChain!); - } } } }; const performModificationsIfToChainChanged = (state: TransferInputState) => { - const { toChain, destToken, route } = state; + const { toChain, destToken } = state; if (destToken) { const tokenConfig = config.tokens[destToken]; @@ -229,10 +222,6 @@ const performModificationsIfToChainChanged = (state: TransferInputState) => { getNativeVersionOfToken('tBTC', toChain!) || config.tokens['tBTC']?.key || ''; - } else if (route && isPorticoRoute(route)) { - if (tokenConfig.nativeChain !== toChain) { - state.destToken = getNativeVersionOfToken(tokenConfig.symbol, toChain!); - } } } }; @@ -373,19 +362,6 @@ export const transferInputSlice = createSlice({ state.route = undefined; } }, - // gas estimates - setSendingGasEst: ( - state: TransferInputState, - { payload }: PayloadAction, - ) => { - state.gasEst.send = payload; - }, - setClaimGasEst: ( - state: TransferInputState, - { payload }: PayloadAction, - ) => { - state.gasEst.claim = payload; - }, // clear inputs clearTransfer: (state: TransferInputState) => { const initialState = getInitialState(); @@ -497,8 +473,6 @@ export const { setForeignAsset, setAssociatedTokenAddress, setTransferRoute, - setSendingGasEst, - setClaimGasEst, updateBalances, clearTransfer, setIsTransactionInProgress, diff --git a/wormhole-connect/src/views/Bridge/Bridge.tsx b/wormhole-connect/src/views/Bridge/Bridge.tsx deleted file mode 100644 index dca1f286f..000000000 --- a/wormhole-connect/src/views/Bridge/Bridge.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import { makeStyles } from 'tss-react/mui'; - -import { RootState } from 'store'; -import { TransferInputState } from 'store/transferInput'; -import config from 'config'; -import { joinClass } from 'utils/style'; -import { isTransferValid, useValidate } from 'utils/transferValidation'; -import useConfirmBeforeLeaving from 'utils/confirmBeforeLeaving'; - -import NativeGasSlider from './NativeGasSlider'; -import Preview from './Preview'; -import Send from './Send'; -import { Collapse, useTheme } from '@mui/material'; -import PageHeader from 'components/PageHeader'; -import FromInputs from './Inputs/From'; -import ToInputs from './Inputs/To'; -import SwapChains from './SwapChains'; -import RouteOptions from './RouteOptions'; -import PoweredByIcon from 'icons/PoweredBy'; -import { Alignment } from 'components/Header'; -import FooterNavBar from 'components/FooterNavBar'; -import useComputeDestinationTokens from 'hooks/useComputeDestinationTokens'; -import useComputeQuote from 'hooks/useComputeQuote'; -import useComputeSourceTokens from 'hooks/useComputeSourceTokens'; -import { useFetchTokenPrices } from 'hooks/useFetchTokenPrices'; -import { useGasSlider } from 'hooks/useGasSlider'; -import { useConnectToLastUsedWallet } from 'utils/wallet'; -import { useComputeReceiverNativeBalance } from 'hooks/useComputeReceiverNativeBalance'; - -const useStyles = makeStyles()((_theme) => ({ - spacer: { - display: 'flex', - flexDirection: 'column', - gap: '16px', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - }, - bridgeContent: { - margin: 'auto', - maxWidth: '650px', - }, - header: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - }, - poweredBy: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: '8px', - marginTop: '24px', - }, -})); - -function Bridge() { - const { classes } = useStyles(); - const theme = useTheme(); - const { - showValidationState, - validations, - fromChain, - toChain, - token, - destToken, - route, - isTransactionInProgress, - amount, - }: TransferInputState = useSelector( - (state: RootState) => state.transferInput, - ); - const { toNativeToken } = useSelector((state: RootState) => state.relay); - const receiving = useSelector((state: RootState) => state.wallet.receiving); - - // Warn user before closing tab if transaction has begun - useConfirmBeforeLeaving(isTransactionInProgress); - - // Compute and set destination native balance - useComputeReceiverNativeBalance({ - sourceChain: fromChain, - destChain: toChain, - receiving, - }); - - // Compute and set source tokens - useComputeSourceTokens({ - sourceChain: fromChain, - destChain: toChain, - sourceToken: token, - destToken, - route, - }); - - // Compute and set destination tokens - useComputeDestinationTokens({ - sourceChain: fromChain, - destChain: toChain, - sourceToken: token, - route, - }); - - // Compute and set quote - useComputeQuote({ - sourceChain: fromChain, - destChain: toChain, - sourceToken: token, - destToken, - amount, - route, - toNativeToken, - }); - - useFetchTokenPrices(); - useConnectToLastUsedWallet(); - - // validate transfer inputs - useValidate(); - const valid = isTransferValid(validations); - - // Get Gas Slider props - const { disabled, showGasSlider } = useGasSlider({ - destChain: toChain, - destToken: destToken, - route, - valid, - isTransactionInProgress, - }); - - const pageHeader = getPageHeader(); - - return ( -
- - - - - - - -
- - {showGasSlider && } - - - - - -
- - {config.ui.showHamburgerMenu ? null : } - -
- -
-
- ); -} - -const getPageHeader = (): { text: string; align: Alignment } => { - const defaults: { text: string; align: Alignment } = { - text: '', - align: 'left', - }; - if (typeof config.ui.pageHeader === 'string') { - return { ...defaults, text: config.ui.pageHeader }; - } else { - return { ...defaults, ...config.ui.pageHeader }; - } -}; - -export default Bridge; diff --git a/wormhole-connect/src/views/Bridge/ChainTile.tsx b/wormhole-connect/src/views/Bridge/ChainTile.tsx deleted file mode 100644 index 48865a425..000000000 --- a/wormhole-connect/src/views/Bridge/ChainTile.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import TokenIcon from 'icons/TokenIcons'; -import { ERROR_BORDER, joinClass } from 'utils/style'; -import { ChainConfig } from 'config/types'; - -const useStyles = makeStyles()((theme: any) => ({ - chainTile: { - backgroundColor: theme.palette.card.secondary, - borderRadius: '8px', - padding: theme.spacing(1.5), - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - height: '100%', - cursor: 'pointer', - textAlign: 'center', - gap: theme.spacing(1.5), - }, - chainIcon: { - width: '56px', - height: '56px', - }, - chainHeader: { - fontSize: '16px', - opacity: '60%', - }, - chainName: { - fontSize: '16px', - }, - error: ERROR_BORDER(theme), -})); - -type Props = { - chain?: ChainConfig; - onClick: React.MouseEventHandler; - error?: boolean; - disabled?: boolean; -}; - -function ChainTile(props: Props) { - const { disabled = false } = props; - const { classes } = useStyles(); - - const onClick = (e: React.MouseEvent) => { - if (disabled) return; - props.onClick(e); - }; - - return ( -
- {props.chain ?
Network
: null} - -
- {props.chain?.displayName || 'Select network'} -
-
- ); -} - -export default ChainTile; diff --git a/wormhole-connect/src/views/Bridge/Collapse.tsx b/wormhole-connect/src/views/Bridge/Collapse.tsx deleted file mode 100644 index 479177b5c..000000000 --- a/wormhole-connect/src/views/Bridge/Collapse.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import React, { useCallback, useEffect } from 'react'; -import { makeStyles } from 'tss-react/mui'; -import Collapse from '@mui/material/Collapse'; -import Down from 'icons/Down'; -import { LINK, joinClass } from 'utils/style'; -import Switch from 'components/Switch'; - -const useStyles = makeStyles()((theme: any) => ({ - container: { - width: '100%', - borderRadius: '8px', - boxShadow: theme.palette.card.elevation, - }, - header: { - width: '100%', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - padding: '16px', - backgroundColor: theme.palette.card.background, - backgroundOpacity: '80%', - borderRadius: '8px', - transition: 'border-radius 0.4s', - }, - title: { - fontSize: '14px', - fontWeight: 'bold', - }, - description: { - fontSize: '14px', - opacity: '80%', - }, - invert: { - transform: 'rotate(180deg)', - }, - arrow: { - width: '32px', - height: '32px', - transition: 'transform 0.4s', - }, - controlled: { - cursor: 'default !important', - }, - banner: { - borderBottomRightRadius: '8px', - borderBottomLeftRadius: '8px', - backgroundColor: theme.palette.info[500], - padding: '8px 16px', - display: 'flex', - flexDirection: 'row', - transition: 'border-radius 0.1s 0.3s', - }, - open: { - transition: 'border-radius 0s 0s', - borderBottomLeftRadius: '0 !important', - borderBottomRightRadius: '0 !important', - }, - disabled: { - opacity: '70%', - cursor: 'not-allowed !important', - }, - link: { - ...LINK(theme), - margin: '0 0 0 4px', - }, - collapseControl: { - cursor: 'pointer', - }, -})); - -export enum CollapseControlStyle { - None = 1, - Arrow = 2, - Switch = 3, -} - -function DownControl(props: { collapsed: boolean }) { - const { classes } = useStyles(); - return ( - - ); -} - -function getControlComponent( - control: CollapseControlStyle, - collapsed: boolean, -) { - switch (control) { - case CollapseControlStyle.None: { - return <>; - } - case CollapseControlStyle.Arrow: { - return ; - } - case CollapseControlStyle.Switch: { - return ; - } - default: { - return <>; - } - } -} - -type Props = { - title: string; - description?: string; - children: JSX.Element | JSX.Element[]; - startClosed?: boolean; - disabled?: boolean; - banner?: JSX.Element | JSX.Element[] | false | undefined; - controlled?: boolean; // control the open/closed state - controlStyle?: CollapseControlStyle; - value?: boolean; // open/closed value - onCollapseChange?: (value: boolean) => void; - disableCollapse?: boolean; -}; - -function BridgeCollapse(props: Props) { - const { classes } = useStyles(); - const { onCollapseChange, disabled, startClosed } = props; - const [collapsed, setCollapsed] = React.useState(startClosed || false); - - const toggleCollapsed = useCallback(() => { - if (disabled) return; - setCollapsed((prev) => { - if (onCollapseChange) { - onCollapseChange(!prev); - } - return !prev; - }); - }, [disabled, onCollapseChange]); - - useEffect(() => { - setCollapsed(startClosed || false); - }, [startClosed]); - - const controlStyle = props.controlStyle || CollapseControlStyle.Arrow; - const collapsedState = props.controlled ? props.value || false : collapsed; - - const collapseControl = getControlComponent(controlStyle, collapsedState); - - return ( -
-
-
-
{props.title}
- {props.description && ( -
{props.description}
- )} -
-
- {collapseControl} -
-
- {props.banner && ( -
- {props.banner} -
- )} - - - {props.children} - -
- ); -} - -export default BridgeCollapse; diff --git a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx b/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx deleted file mode 100644 index 1c65b9333..000000000 --- a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React, { useMemo, useRef } from 'react'; -import { useSelector } from 'react-redux'; - -import { RootState } from 'store'; -import { toFixedDecimals } from 'utils/balance'; -import { NO_INPUT } from 'utils/style'; - -import InputTransparent from 'components/InputTransparent'; -import Input from './Input'; -import config from 'config'; -import Price from 'components/Price'; -import { getTokenPrice, getUSDFormat } from 'utils'; -import { TransferSide } from 'config/types'; - -type Props = { - handleAmountChange: (value: string) => void; - value: string; - disabled?: boolean; - label?: string; - side: TransferSide; -}; -function AmountInput(props: Props) { - const amountEl = useRef(null); - const { - showValidationState: showErrors, - validations, - token, - isTransactionInProgress, - } = useSelector((state: RootState) => state.transferInput); - const { - usdPrices: { data }, - } = useSelector((state: RootState) => state.tokenPrices); - const prices = data || {}; - - function handleAmountChange( - e: - | React.ChangeEvent - | React.ChangeEvent - | undefined, - ) { - let value = e!.target.value; - const index = value.indexOf('.'); - if (index > 0 && value.length - index - 8 > 0) { - value = toFixedDecimals(value, 8); - } - - props.handleAmountChange(value); - } - - const focus = () => { - if (amountEl.current) { - (amountEl.current as any).focus(); - } - }; - - const price = useMemo(() => { - const tokenPrice = getTokenPrice(prices, config.tokens[token]) || 0; - if (!tokenPrice) return undefined; - return getUSDFormat(Number(props.value) * tokenPrice); - }, [props.value, token, prices]); - - return ( - - {token ? ( - <> - - {price && {price}} - - ) : ( -
{NO_INPUT}
- )} - - ); -} - -export default AmountInput; diff --git a/wormhole-connect/src/views/Bridge/Inputs/From.tsx b/wormhole-connect/src/views/Bridge/Inputs/From.tsx deleted file mode 100644 index f0f1d67b2..000000000 --- a/wormhole-connect/src/views/Bridge/Inputs/From.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { useCallback, useMemo, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; - -import { RootState } from 'store'; -import { - setToken, - selectFromChain, - setAmount, - isDisabledChain, -} from 'store/transferInput'; -import config from 'config'; -import { TransferWallet } from 'utils/wallet'; -import { getTokenPrice, hydrateHrefTemplate } from 'utils'; -import Inputs from './Inputs'; -import Select from './Select'; -import AmountInput from './AmountInput'; -import TokensModal from 'components/TokensModal'; -import ChainsModal from 'components/ChainsModal'; -import useGetTokenBalances from 'hooks/useGetTokenBalances'; -import { Chain } from '@wormhole-foundation/sdk'; - -function FromInputs() { - const dispatch = useDispatch(); - const [showTokensModal, setShowTokensModal] = useState(false); - const [showChainsModal, setShowChainsModal] = useState(false); - - const wallet = useSelector((state: RootState) => state.wallet.sending); - const { - usdPrices: { data }, - } = useSelector((state: RootState) => state.tokenPrices); - const prices = data || {}; - const { - showValidationState: showErrors, - validations, - fromChain, - toChain, - token, - amount, - isTransactionInProgress, - } = useSelector((state: RootState) => state.transferInput); - const tokenConfig = token && config.tokens[token]; - const tokenConfigArr = useMemo( - () => (tokenConfig ? [tokenConfig] : []), - [tokenConfig], - ); - const { balances } = useGetTokenBalances( - wallet.address, - fromChain, - tokenConfigArr, - ); - - const isDisabled = useCallback( - (chain: Chain) => isDisabledChain(chain, wallet), - [wallet], - ); - - const selectChain = async (chain: Chain) => { - await selectFromChain(dispatch, chain, wallet); - }; - - const selectToken = (token: string) => { - dispatch(setToken(token)); - }; - - // token input jsx - const selectedToken = useMemo(() => { - if (!tokenConfig) return undefined; - const chain = config.chains[tokenConfig.nativeChain]?.displayName; - return { - icon: tokenConfig.icon, - text: tokenConfig.symbol, - secondaryText: `(${chain})`, - }; - }, [tokenConfig]); - const tokenInput = ( - -
- )} - {/* token select */} -
{props.tokenInput}
-
- -
- {/* amount input */} -
{props.amountInput}
- - {/* balance */} -
- -
- {props.balance ? ( -
-
{props.balance}
- {usdPrice} -
- ) : ( - NO_INPUT - )} -
- -
-
- - - - {/* validation error banner */} - - - {props.warning && props.warning} - - - - ); -} - -export default Inputs; diff --git a/wormhole-connect/src/views/Bridge/Inputs/Select.tsx b/wormhole-connect/src/views/Bridge/Inputs/Select.tsx deleted file mode 100644 index f50c03095..000000000 --- a/wormhole-connect/src/views/Bridge/Inputs/Select.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; - -import { Icon } from 'config/types'; -import { NO_INPUT } from 'utils/style'; -import TokenIcon from 'icons/TokenIcons'; -import Input from './Input'; - -const useStyles = makeStyles()((theme) => ({ - select: { - display: 'flex', - alignItems: 'center', - gap: '8px', - }, - secondaryText: { - opacity: '0.6', - fontSize: '13px', - [theme.breakpoints.down('sm')]: { - display: 'none', - }, - }, -})); - -type Selected = { - icon: Icon | string; - text: string; - secondaryText?: string; -}; - -type Props = { - label: string; - testId?: string; - selected: Selected | undefined; - error?: boolean; - editable?: boolean; - disabled?: boolean; - onClick?: any; -}; - -function Select(props: Props) { - const { classes } = useStyles(); - const { selected } = props; - const handleClick = () => { - if (props.editable && !props.disabled) { - props.onClick(); - } - }; - - return ( - - {selected ? ( -
- - {selected.text} - {selected.secondaryText && ( -
- {selected.secondaryText} -
- )} -
- ) : props.disabled ? ( - NO_INPUT - ) : ( -
- - Select -
- )} - - ); -} - -export default Select; diff --git a/wormhole-connect/src/views/Bridge/Inputs/To.tsx b/wormhole-connect/src/views/Bridge/Inputs/To.tsx deleted file mode 100644 index c1c1b3946..000000000 --- a/wormhole-connect/src/views/Bridge/Inputs/To.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import React, { useCallback, useMemo, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; - -import { RootState } from 'store'; -import { - isDisabledChain, - selectToChain, - setDestToken, -} from 'store/transferInput'; -import { TransferWallet } from 'utils/wallet'; -import { getTokenPrice, hydrateHrefTemplate } from 'utils'; -import config from 'config'; - -import Inputs from './Inputs'; -import Select from './Select'; -import AmountInput from './AmountInput'; -import TokenWarnings from './TokenWarnings'; -import TokensModal from 'components/TokensModal'; -import ChainsModal from 'components/ChainsModal'; -import { isPorticoRoute } from 'routes/porticoBridge/utils'; -import useGetTokenBalances from 'hooks/useGetTokenBalances'; -import { Chain } from '@wormhole-foundation/sdk'; - -function ToInputs() { - const dispatch = useDispatch(); - const [showTokensModal, setShowTokensModal] = useState(false); - const [showChainsModal, setShowChainsModal] = useState(false); - - const { - showValidationState: showErrors, - validations, - fromChain, - toChain, - destToken, - receiveAmount, - route, - isTransactionInProgress, - } = useSelector((state: RootState) => state.transferInput); - const receiving = useSelector((state: RootState) => state.wallet.receiving); - const { - usdPrices: { data }, - } = useSelector((state: RootState) => state.tokenPrices); - const prices = data || {}; - const tokenConfig = config.tokens[destToken]; - const tokenConfigArr = useMemo( - () => (tokenConfig ? [tokenConfig] : []), - [tokenConfig], - ); - const { balances } = useGetTokenBalances( - receiving.address, - toChain, - tokenConfigArr, - ); - - const selectToken = (token: string) => { - dispatch(setDestToken(token)); - }; - - const isDisabled = useCallback( - (chain: Chain) => isDisabledChain(chain, receiving), - [receiving], - ); - - const selectChain = async (chain: Chain) => { - await selectToChain(dispatch, chain, receiving); - }; - - // token display jsx - const selectedToken = useMemo(() => { - if (!tokenConfig) return undefined; - const symbol = tokenConfig.symbol; - const chain = config.chains[tokenConfig.nativeChain]?.displayName; - return { - icon: tokenConfig.icon, - text: symbol, - secondaryText: `(${chain})`, - }; - }, [tokenConfig]); - const tokenInput = ( -