diff --git a/.changelog/519.feature.md b/.changelog/519.feature.md new file mode 100644 index 00000000..4b2309ae --- /dev/null +++ b/.changelog/519.feature.md @@ -0,0 +1 @@ +Use the newly added Oasis UI Library in wrap diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 29e088e8..f40b5d6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -457,6 +457,9 @@ importers: bignumber.js: specifier: ^9.1.2 version: 9.1.2 + lucide-react: + specifier: ^0.513.0 + version: 0.513.0(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 diff --git a/ui/src/wrap/components/Spinner/index.module.css b/ui/src/core/components/Spinner/index.module.css similarity index 100% rename from ui/src/wrap/components/Spinner/index.module.css rename to ui/src/core/components/Spinner/index.module.css diff --git a/ui/src/wrap/components/Spinner/index.tsx b/ui/src/core/components/Spinner/index.tsx similarity index 100% rename from ui/src/wrap/components/Spinner/index.tsx rename to ui/src/core/components/Spinner/index.tsx diff --git a/ui/src/core/components/icons/Logo.tsx b/ui/src/core/components/icons/Logo.tsx index acb4a74b..96476566 100644 --- a/ui/src/core/components/icons/Logo.tsx +++ b/ui/src/core/components/icons/Logo.tsx @@ -1,37 +1,55 @@ -export const Logo = () => ( - - Oasis ROSE app logo - +import { FC } from 'react' + +export const Logo: FC<{ imageOnly?: boolean }> = imageOnly => + imageOnly ? ( + + Oasis ROSE app logo + + + + + + + + + + ) : ( + + Oasis ROSE app logo + + + + + + + + - - - - - - - - - - - - - -) + + + + + + + ) diff --git a/ui/src/core/components/index.ts b/ui/src/core/components/index.ts index 58c34645..c028dbba 100644 --- a/ui/src/core/components/index.ts +++ b/ui/src/core/components/index.ts @@ -5,3 +5,4 @@ export * from './Header' export * from './RainbowKitConnectButton' export * from './NavbarLink' export * from './AppLayout' +export * from './Spinner' diff --git a/ui/src/index.ts b/ui/src/index.ts index a441b952..464549f8 100644 --- a/ui/src/index.ts +++ b/ui/src/index.ts @@ -1,4 +1,3 @@ export * from './stake' export * from './move' export * from './core' -export * from './wrap' diff --git a/ui/src/wrap/components/Alert/index.module.css b/ui/src/wrap/components/Alert/index.module.css deleted file mode 100644 index 3f2fafbe..00000000 --- a/ui/src/wrap/components/Alert/index.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.alert { - padding: 0.5rem 0.25rem; - background-color: white; - font-size: 14px; - line-height: 120%; - border-radius: 10px; - margin-top: 1rem; - text-align: center; - word-wrap: break-word; -} - -.alertDanger { - color: var(--danger); -} - -.alertWarn { - color: var(--warn); -} - -.alertInfo { - color: var(--brand-dark); -} diff --git a/ui/src/wrap/components/Alert/index.tsx b/ui/src/wrap/components/Alert/index.tsx deleted file mode 100644 index cc27c4be..00000000 --- a/ui/src/wrap/components/Alert/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import classes from './index.module.css' -import { FC, PropsWithChildren } from 'react' - -type AlertVariant = 'danger' | 'warn' | 'info' - -interface Props extends PropsWithChildren { - variant?: AlertVariant -} - -const variantMap: Record = { - danger: classes.alertDanger, - warn: classes.alertWarn, - info: classes.alertInfo, -} - -export const Alert: FC = ({ children, variant = 'info' }) => ( -

{children}

-) diff --git a/ui/src/wrap/components/Button/index.module.css b/ui/src/wrap/components/Button/index.module.css deleted file mode 100644 index f8cd3d11..00000000 --- a/ui/src/wrap/components/Button/index.module.css +++ /dev/null @@ -1,58 +0,0 @@ -.button { - width: auto; - border-radius: 46px; - border: 1px solid transparent; - box-shadow: none; - cursor: pointer; - font-family: 'Figtree Variable', 'Helvetica', 'Arial', sans-serif; - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 125%; - outline: none; - padding: 1.125rem 1.5rem; - text-decoration: none; - user-select: none; - text-transform: capitalize; - color: var(--white); -} - -.buttonPrimary { - border-color: var(--gray-medium-light); - background-color: var(--brand-medium); -} - -.buttonSecondary { - border-color: var(--gray-medium-light); - background-color: transparent; -} - -.buttonTertiary { - border-width: 2px; - border-color: var(--gray-medium-light); - background-color: transparent; - min-width: 75px; - padding: 0.4rem; - line-height: 120%; - border-radius: 10px; - font-size: 13.5px; -} - -.buttonDisabled { - cursor: not-allowed; - border-color: var(--gray-medium-light); - background-color: var(--gray-wrap-medium-dark); - opacity: 0.5; -} - -.fullWidth { - width: 100%; -} - -@media screen and (min-width: 1000px) { - .buttonTertiary { - min-width: 100px; - padding: 0.58rem 1.5rem; - font-size: 18px; - } -} diff --git a/ui/src/wrap/components/Button/index.tsx b/ui/src/wrap/components/Button/index.tsx deleted file mode 100644 index 95525b15..00000000 --- a/ui/src/wrap/components/Button/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import classes from './index.module.css' -import { FC, MouseEventHandler, PropsWithChildren } from 'react' - -type ButtonVariant = 'primary' | 'secondary' | 'tertiary' - -interface Props extends PropsWithChildren { - disabled?: boolean - variant?: ButtonVariant - fullWidth?: boolean - onClick?: MouseEventHandler - className?: string - type?: 'submit' | 'reset' | 'button' -} - -const variantMap: Record = { - primary: classes.buttonPrimary, - secondary: classes.buttonSecondary, - tertiary: classes.buttonTertiary, -} - -export const Button: FC = ({ - className, - children, - disabled, - variant = 'primary', - fullWidth, - onClick, - type, -}) => ( - -) diff --git a/ui/src/wrap/components/Input/index.module.css b/ui/src/wrap/components/Input/index.module.css deleted file mode 100644 index bd6c7a82..00000000 --- a/ui/src/wrap/components/Input/index.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.inputGroup { - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: space-between; - width: 100%; - border-radius: 46px; - padding: 1.125rem 2.8125rem; -} - -.inputGroupDisabled { - cursor: not-allowed; - - * { - cursor: not-allowed; - } -} - -.inputGroup > label { - color: var(--gray-wrap-extra-dark); - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 125%; - opacity: 0.7; - flex: 0 1 auto; -} - -.inputGroup > input { - margin: 0; - flex: 1 1 auto; - max-width: 60%; - outline: none; - border: none; - background-image: none; - background-color: transparent; - box-shadow: none; - font-size: 22px; - font-style: normal; - font-weight: 700; - line-height: 125%; - text-align: right; - color: revert; /* Workaround for tailwindcss/preflight */ -} - -.inputGroup > input::placeholder { - opacity: 0.75; -} - -.inputGroupLight { - border: 1px solid var(--white); - background: var(--white); -} - -.inputGroupDark { - border: 2px solid var(--gray-wrap-medium-dark); - background: var(--white); -} - -@media screen and (min-width: 1000px) { - @media screen and (min-width: 1000px) { - .inputGroup > input { - max-width: 75%; - } - } -} diff --git a/ui/src/wrap/components/Input/index.tsx b/ui/src/wrap/components/Input/index.tsx deleted file mode 100644 index d1b822ce..00000000 --- a/ui/src/wrap/components/Input/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import classes from './index.module.css' -import { HTMLInputTypeAttribute, PropsWithChildren, useId } from 'react' - -type InputGroupVariant = 'light' | 'dark' - -const inputGroupVariantMap: Record = { - light: classes.inputGroupLight, - dark: classes.inputGroupDark, -} - -interface Props extends PropsWithChildren { - type: HTMLInputTypeAttribute - label: string - variant?: InputGroupVariant - pattern?: string - placeholder?: string - id?: string - disabled?: boolean - inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' - className?: string - value: T - valueChange?: (value: T) => void -} - -export const Input = ({ - type, - label, - variant = 'light', - pattern, - placeholder, - id, - disabled, - inputMode, - className, - value, - valueChange, -}: Props) => { - const uniqueId = useId() - const inputId = id || uniqueId - - return ( -
- - valueChange?.(value as T)} - /> -
- ) -} diff --git a/ui/src/wrap/components/Modal/index.module.css b/ui/src/wrap/components/Modal/index.module.css deleted file mode 100644 index bec60f79..00000000 --- a/ui/src/wrap/components/Modal/index.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.modalOverlay { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(6, 21, 43, 0.9); -} - -.modal { - position: relative; - background: #fff; - padding: 1.25rem; - width: 100%; - max-width: 675px; - border-radius: 20px; -} - -.modalContent { - padding: 3.5rem 3.5rem 0; -} - -.modalCloseButton { - float: right; - border: none; - background: none; - cursor: pointer; -} - -@media screen and (max-width: 1000px) { - .modal { - max-width: none; - width: 100%; - height: 100vh; - padding: 1.75rem; - overflow: auto; - } - .modalContent { - padding: 1rem; - } -} diff --git a/ui/src/wrap/components/Modal/index.tsx b/ui/src/wrap/components/Modal/index.tsx deleted file mode 100644 index 9c6a32c4..00000000 --- a/ui/src/wrap/components/Modal/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { FC, PropsWithChildren } from 'react' -import classes from './index.module.css' -import { TimesIcon } from '../icons/TimesIcon' -import { WrapModalProps } from '../../types' - -export const Modal: FC> = ({ - children, - isOpen, - disableBackdropClick, - closeModal, -}) => { - if (!isOpen) { - return null - } - - const handleOverlayClick = () => { - if (!disableBackdropClick) { - closeModal() - } - } - - return ( -
-
- -
{children}
-
-
- ) -} diff --git a/ui/src/wrap/components/icons/CachedIcon.tsx b/ui/src/wrap/components/icons/CachedIcon.tsx deleted file mode 100644 index 85857fbb..00000000 --- a/ui/src/wrap/components/icons/CachedIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright 2024 https://github.com/material-icons/material-icons - * SPDX-License-Identifier: Apache-2.0 - */ -import { FC } from 'react' - -export const CachedIcon: FC = () => ( - - - - - - - - - - -) diff --git a/ui/src/wrap/components/icons/LogoIconRound.tsx b/ui/src/wrap/components/icons/LogoIconRound.tsx deleted file mode 100644 index a4935953..00000000 --- a/ui/src/wrap/components/icons/LogoIconRound.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC } from 'react' - -export const LogoIconRound: FC = () => ( - - - - - - -) diff --git a/ui/src/wrap/components/icons/OpenInNewIcon.tsx b/ui/src/wrap/components/icons/OpenInNewIcon.tsx deleted file mode 100644 index c4f87766..00000000 --- a/ui/src/wrap/components/icons/OpenInNewIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright 2024 https://github.com/material-icons/material-icons - * SPDX-License-Identifier: Apache-2.0 - */ -import { FC } from 'react' - -export const OpenInNewIcon: FC = () => ( - - - - - - - - - - -) diff --git a/ui/src/wrap/components/icons/TimesIcon.tsx b/ui/src/wrap/components/icons/TimesIcon.tsx deleted file mode 100644 index cfdbd9f6..00000000 --- a/ui/src/wrap/components/icons/TimesIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright 2024 https://github.com/material-icons/material-icons - * SPDX-License-Identifier: Apache-2.0 - */ -import { FC } from 'react' - -export const TimesIcon: FC = () => ( - - - - - - - - - - -) diff --git a/ui/src/wrap/components/icons/index.ts b/ui/src/wrap/components/icons/index.ts deleted file mode 100644 index f4ca08be..00000000 --- a/ui/src/wrap/components/icons/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './CachedIcon' -export * from './WrapLogoIcon' -export * from './LogoIconRound' -export * from './OpenInNewIcon' -export * from './TimesIcon' diff --git a/ui/src/wrap/components/index.ts b/ui/src/wrap/components/index.ts deleted file mode 100644 index 8c0753d2..00000000 --- a/ui/src/wrap/components/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { Alert as WrapAlert } from './Alert' -export { Button as WrapButton } from './Button' -export * from './icons' -export { Input as WrapInput } from './Input' -export { Layout as WrapLayout } from './Layout' -export { Modal as WrapModal } from './Modal' -export * from './Spinner' -export { ToggleButton as WrapToggleButton } from './ToggleButton' diff --git a/ui/src/wrap/index.module.css b/ui/src/wrap/index.module.css deleted file mode 100644 index 0dc857b6..00000000 --- a/ui/src/wrap/index.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.global { - :global(h1), - :global(h2), - :global(h3), - :global(h4), - :global(h5), - :global(h6), - :global(p) { - margin-top: 0; - margin-bottom: 0.5rem; - } - - :global(h2) { - font-size: 32px; - font-weight: 700; - line-height: 140%; - } - - :global(h3) { - font-size: 24px; - font-weight: 700; - line-height: 140%; - } - - :global(h4) { - font-size: 18px; - font-weight: 700; - line-height: 120%; - } - - :global(p) { - font-size: 16px; - font-weight: 400; - line-height: 150%; - } -} diff --git a/ui/src/wrap/index.ts b/ui/src/wrap/index.ts deleted file mode 100644 index 7e739fe1..00000000 --- a/ui/src/wrap/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './components' -export * from './types' diff --git a/ui/src/wrap/types/ModalProps.ts b/ui/src/wrap/types/ModalProps.ts deleted file mode 100644 index 65e00d20..00000000 --- a/ui/src/wrap/types/ModalProps.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { MouseEvent } from 'react' - -export interface ModalProps { - isOpen: boolean - disableBackdropClick?: boolean - closeModal: (event?: MouseEvent) => void -} diff --git a/ui/src/wrap/types/index.ts b/ui/src/wrap/types/index.ts deleted file mode 100644 index d22dcf67..00000000 --- a/ui/src/wrap/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export type { ModalProps as WrapModalProps } from './ModalProps' diff --git a/wrap/package.json b/wrap/package.json index ec00dafa..2a037591 100644 --- a/wrap/package.json +++ b/wrap/package.json @@ -21,6 +21,7 @@ "@oasisprotocol/ui-library": "file:../ui-library", "@rainbow-me/rainbowkit": "^2.1.2", "bignumber.js": "^9.1.2", + "lucide-react": "^0.513.0", "react": "^18.2.0", "react-responsive": "^9.0.2", "react-router-dom": "^6.22.2", diff --git a/wrap/src/App.tsx b/wrap/src/App.tsx index e93fd0ab..7ee34511 100644 --- a/wrap/src/App.tsx +++ b/wrap/src/App.tsx @@ -1,9 +1,9 @@ import { FC } from 'react' -import { WrapLayout } from '@oasisprotocol/rose-app-ui/wrap' +import { Layout } from './components/Layout' import { Web3ContextProvider } from './providers/Web3Provider' export const App: FC = () => ( - + ) diff --git a/ui/src/wrap/components/Layout/index.module.css b/wrap/src/components/Layout/index.module.css similarity index 100% rename from ui/src/wrap/components/Layout/index.module.css rename to wrap/src/components/Layout/index.module.css diff --git a/ui/src/wrap/components/Layout/index.tsx b/wrap/src/components/Layout/index.tsx similarity index 90% rename from ui/src/wrap/components/Layout/index.tsx rename to wrap/src/components/Layout/index.tsx index 965bbea9..bc71f375 100644 --- a/ui/src/wrap/components/Layout/index.tsx +++ b/wrap/src/components/Layout/index.tsx @@ -1,11 +1,11 @@ import { FC, PropsWithChildren } from 'react' import { NavLink, Outlet, useMatch } from 'react-router-dom' -import { WrapLogoIcon } from '../icons/WrapLogoIcon' +import { WrapLogoIcon } from '../Logo/WrapLogoIcon' import { ConnectButton } from '@rainbow-me/rainbowkit' import { useMediaQuery } from 'react-responsive' import classes from './index.module.css' -import globalClasses from '../../index.module.css' -import { Header } from '../../../core' +import { Header } from '@oasisprotocol/rose-app-ui/core' +import { cn } from '@oasisprotocol/ui-library/src' const dateFormatLong = new Intl.DateTimeFormat('en', { year: 'numeric', @@ -21,7 +21,7 @@ export const Layout: FC = () => { const isMobileScreen = useMediaQuery({ query: '(max-width: 1023px)' }) return ( -
+
= ({ className, disabled, onClick }) => ( ) diff --git a/wrap/src/components/WrapFeeWarningModal/index.module.css b/wrap/src/components/WrapFeeWarningModal/index.module.css index ffc18ba5..9be85e32 100644 --- a/wrap/src/components/WrapFeeWarningModal/index.module.css +++ b/wrap/src/components/WrapFeeWarningModal/index.module.css @@ -1,83 +1,4 @@ -.wrapFeeWarningModalContent { - display: flex; - flex-direction: column; - - h4 { - color: var(--gray-wrap-extra-dark); - } - - p { - color: var(--gray-wrap-extra-dark); - - &:first-of-type { - margin-bottom: 1rem; - } - - &:last-of-type { - margin-bottom: 3.125rem; - } - } -} - -.wrapFeeWarningModalLogo { - align-self: center; - margin-bottom: 3.125rem; -} - .wrapFeeWarningModalInput { width: 75%; margin: 0 auto; } - -.wrapFeeWarningModalActions { - display: flex; - flex-direction: column; - gap: 2.125rem; - margin: 2.5rem auto; - text-align: center; -} - -.wrapFeeWarningModalButton { - min-width: 250px; -} - -.wrapFeeWarningModalButtonText { - font-size: 13px; -} - -.wrapFeeWarningModalFullAmount { - background: none; - border: none; - padding: 0; - font: inherit; - outline: inherit; - color: var(--danger); - text-decoration: underline; - cursor: pointer; -} - -@media screen and (max-width: 1000px) { - .wrapFeeWarningModalContent { - p { - &:last-of-type { - margin-bottom: 2.625rem; - } - } - } - - .wrapFeeWarningModalLogo { - margin-bottom: 2rem; - } - - .wrapFeeWarningModalInput { - width: 100%; - } - - .wrapFeeWarningModalActions { - display: flex; - flex-direction: column; - gap: 1.625rem; - margin: 1.25rem auto; - text-align: center; - } -} diff --git a/wrap/src/components/WrapFeeWarningModal/index.tsx b/wrap/src/components/WrapFeeWarningModal/index.tsx index ab9ef94d..6fceb369 100644 --- a/wrap/src/components/WrapFeeWarningModal/index.tsx +++ b/wrap/src/components/WrapFeeWarningModal/index.tsx @@ -1,11 +1,18 @@ import { FC } from 'react' +import { Logo } from '@oasisprotocol/rose-app-ui' import { - WrapModal, - WrapModalProps, - LogoIconRound, - WrapInput, - WrapButton, -} from '@oasisprotocol/rose-app-ui/wrap' + Button, + cn, + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + Input, + Label, +} from '@oasisprotocol/ui-library/src' import classes from './index.module.css' import { useWrapForm } from '../../hooks/useWrapForm' import { WRAP_FEE_DEDUCTION_MULTIPLIER } from '../../constants/config' @@ -13,7 +20,9 @@ import { NumberUtils } from '../../utils/number.utils' import BigNumber from 'bignumber.js' import { formatEther } from 'viem' -interface WrapFeeWarningModalProps extends Pick { +interface WrapFeeWarningModalProps { + isOpen: boolean + closeModal: () => void next: (amount: BigNumber) => void } @@ -27,47 +36,56 @@ export const WrapFeeWarningModal: FC = ({ isOpen, clos const estimatedAmountWithDeductedFees = roseAmount!.minus(estimatedFeeDeduction) return ( - -
-
- -
+ + + +
+ +
-

You have chosen to wrap your entire balance

+ You have chosen to wrap your entire balance -

- It is recommended to keep a small amount in your wallet at all times to cover future transactions. -

-

- Choose if you want to wrap the reduced amount and keep {sum of {WRAP_FEE_DEDUCTION_MULTIPLIER}{' '} - x gas fee - e.g. ‘{formatEther(NumberUtils.BNtoBigInt(estimatedFeeDeduction))} ROSE’} in - your account, or continue with the full amount. -

+ +

+ It is recommended to keep a small amount in your wallet at all times to cover future + transactions. +

+

+ Choose if you want to wrap the reduced amount and keep {sum of{' '} + {WRAP_FEE_DEDUCTION_MULTIPLIER} x gas fee - e.g. ‘ + {formatEther(NumberUtils.BNtoBigInt(estimatedFeeDeduction))} ROSE’} in your account, + or continue with the full amount. +

+ + - - className={classes.wrapFeeWarningModalInput} - variant="dark" - disabled - type="text" - label="wROSE" - placeholder="0" - inputMode="decimal" - value={formatEther(NumberUtils.BNtoBigInt(estimatedAmountWithDeductedFees))} - /> +
+ + +
-
- next(estimatedAmountWithDeductedFees)} - > - Wrap reduced amount - + + + + - -
-
- + + + + + + ) } diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index 2375dce6..43a1b0ef 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -1,5 +1,6 @@ -import { FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' -import { WrapInput, WrapButton, WrapAlert, WrapToggleButton } from '@oasisprotocol/rose-app-ui/wrap' +import { ChangeEvent, FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' +import { Button, Alert, cn } from '@oasisprotocol/ui-library/src' +import { Input, Label } from '@oasisprotocol/ui-library/src' import classes from './index.module.css' import { useNavigate } from 'react-router-dom' import { useWrapForm } from '../../hooks/useWrapForm' @@ -9,6 +10,7 @@ import { NumberUtils } from '../../utils/number.utils' import { WrapFeeWarningModal } from '../WrapFeeWarningModal' import { formatEther, parseEther } from 'viem' import BigNumber from 'bignumber.js' +import { ToggleButton } from '../ToggleButton' const AMOUNT_PATTERN = '^[0-9]*[.,]?[0-9]*$' @@ -62,8 +64,8 @@ export const WrapForm: FC = () => { setValue(formattedAmount) }, [setValue, amount]) - const handleValueChange = (amount: string) => { - setValue(amount) + const handleValueChange = (event: ChangeEvent) => { + setValue(event.target.value) } const handleToggleFormType = (e: MouseEvent) => { @@ -99,12 +101,12 @@ export const WrapForm: FC = () => { ) { setIsWrapFeeModalOpen(true) } else { - submitTransaction(amount) + void submitTransaction(amount) } } const submitWrapFeeModal = (amount: BigNumber) => { - submitTransaction(amount) + void submitTransaction(amount) setIsWrapFeeModalOpen(false) } @@ -115,39 +117,41 @@ export const WrapForm: FC = () => {
- - disabled={isLoading} - type="text" - label={firstInputLabel} - pattern={AMOUNT_PATTERN} - placeholder="0" - inputMode="decimal" - value={value} - valueChange={handleValueChange} - /> - - disabled={isLoading} - type="text" - label={secondInputLabel} - pattern={AMOUNT_PATTERN} - placeholder="0" - inputMode="decimal" - value={value} - valueChange={handleValueChange} - /> - +
+ + +
+
+ + +
+

Estimated fee: {estimatedFeeTruncated}

- + + {error && {error}} { return ( diff --git a/wrap/src/pages/Transaction/index.tsx b/wrap/src/pages/Transaction/index.tsx index fe7215f2..0ac5e2b0 100644 --- a/wrap/src/pages/Transaction/index.tsx +++ b/wrap/src/pages/Transaction/index.tsx @@ -1,5 +1,7 @@ import { FC, useEffect, useState } from 'react' -import { WrapButton, OpenInNewIcon, Spinner } from '@oasisprotocol/rose-app-ui/wrap' +import { ExternalLink } from 'lucide-react' +import { Spinner } from '@oasisprotocol/rose-app-ui' +import { Button } from '@oasisprotocol/ui-library/src' import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import classes from './index.module.css' import { StringUtils } from '../../utils/string.utils' @@ -89,15 +91,15 @@ const TransactionCmp: FC = () => { {txUrl && ( - + )} - +
)} {status === TransactionStatus.Fail && ( @@ -109,9 +111,9 @@ const TransactionCmp: FC = () => { Please try again. - +
)} diff --git a/wrap/src/pages/Wrapper/index.tsx b/wrap/src/pages/Wrapper/index.tsx index c5f2ce79..2048b7d7 100644 --- a/wrap/src/pages/Wrapper/index.tsx +++ b/wrap/src/pages/Wrapper/index.tsx @@ -1,6 +1,6 @@ import { FC, useEffect } from 'react' import classes from './index.module.css' -import { WrapButton } from '@oasisprotocol/rose-app-ui/wrap' +import { Button } from '@oasisprotocol/ui-library/src' import { NumberUtils } from '../../utils/number.utils' import { WrapForm } from '../../components/WrapForm' import { useWeb3 } from '../../hooks/useWeb3' @@ -69,21 +69,21 @@ const WrapperCmp: FC = () => {

Quickly wrap your ROSE into wROSE and vice versa with the (un)wrap ROSE tool.

- +
{percentageList.map(({ label, value }) => ( - handlePercentageCalc(value)} key={label} - variant="tertiary" + variant="outline" > {label} - + ))}