From 340480940befdcb164b883f3791c639a3de61fed Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Wed, 28 May 2025 00:29:44 +0200 Subject: [PATCH 01/29] Wrap: Use the Button from ui-library - Replace component references - Replace all WrapButton references - Get rid of WrapButton --- .changelog/519.feature.md | 1 + .../wrap/components/Button/index.module.css | 58 ------------------- ui/src/wrap/components/Button/index.tsx | 44 -------------- ui/src/wrap/components/index.ts | 1 - .../components/WrapFeeWarningModal/index.tsx | 13 ++--- wrap/src/components/WrapForm/index.tsx | 7 ++- wrap/src/pages/Transaction/index.tsx | 15 ++--- wrap/src/pages/Wrapper/index.tsx | 12 ++-- 8 files changed, 23 insertions(+), 128 deletions(-) create mode 100644 .changelog/519.feature.md delete mode 100644 ui/src/wrap/components/Button/index.module.css delete mode 100644 ui/src/wrap/components/Button/index.tsx 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/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/index.ts b/ui/src/wrap/components/index.ts index 8c0753d2..fe413d6c 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,5 +1,4 @@ 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' diff --git a/wrap/src/components/WrapFeeWarningModal/index.tsx b/wrap/src/components/WrapFeeWarningModal/index.tsx index ab9ef94d..4f247b47 100644 --- a/wrap/src/components/WrapFeeWarningModal/index.tsx +++ b/wrap/src/components/WrapFeeWarningModal/index.tsx @@ -1,11 +1,6 @@ import { FC } from 'react' -import { - WrapModal, - WrapModalProps, - LogoIconRound, - WrapInput, - WrapButton, -} from '@oasisprotocol/rose-app-ui/wrap' +import { WrapModal, WrapModalProps, LogoIconRound, WrapInput } from '@oasisprotocol/rose-app-ui/wrap' +import { Button } from '@oasisprotocol/ui-library/src' import classes from './index.module.css' import { useWrapForm } from '../../hooks/useWrapForm' import { WRAP_FEE_DEDUCTION_MULTIPLIER } from '../../constants/config' @@ -56,12 +51,12 @@ export const WrapFeeWarningModal: FC = ({ isOpen, clos />
- next(estimatedAmountWithDeductedFees)} > Wrap reduced amount - + {error && {error}} { {txUrl && ( - + )} - +
)} {status === TransactionStatus.Fail && ( @@ -109,9 +110,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} - + ))}
From a40a1f263a267569e8f5c5835ed4aafb37830c48 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Wed, 20 Aug 2025 16:55:05 +0200 Subject: [PATCH 02/29] Wrap: re-implement ToggleButton using lucide icons --- ui/src/wrap/components/ToggleButton/index.tsx | 4 ++-- ui/src/wrap/components/icons/CachedIcon.tsx | 21 ------------------- ui/src/wrap/components/icons/index.ts | 1 - 3 files changed, 2 insertions(+), 24 deletions(-) delete mode 100644 ui/src/wrap/components/icons/CachedIcon.tsx diff --git a/ui/src/wrap/components/ToggleButton/index.tsx b/ui/src/wrap/components/ToggleButton/index.tsx index d5a0bcd7..c59d6029 100644 --- a/ui/src/wrap/components/ToggleButton/index.tsx +++ b/ui/src/wrap/components/ToggleButton/index.tsx @@ -1,6 +1,6 @@ import classes from './index.module.css' import { FC, MouseEventHandler } from 'react' -import { CachedIcon } from '../icons/CachedIcon' +import { RefreshCw } from 'lucide-react' interface Props { className?: string @@ -10,6 +10,6 @@ interface Props { export const ToggleButton: FC = ({ className, disabled, onClick }) => ( ) 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/index.ts b/ui/src/wrap/components/icons/index.ts index f4ca08be..9fac3220 100644 --- a/ui/src/wrap/components/icons/index.ts +++ b/ui/src/wrap/components/icons/index.ts @@ -1,4 +1,3 @@ -export * from './CachedIcon' export * from './WrapLogoIcon' export * from './LogoIconRound' export * from './OpenInNewIcon' From cf4b96ba2e803c8e307f81f520975ebe9a1e592f Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Wed, 20 Aug 2025 17:34:36 +0200 Subject: [PATCH 03/29] Wrap: use Alert from UI Library --- ui/src/wrap/components/Alert/index.module.css | 22 ------------------- ui/src/wrap/components/Alert/index.tsx | 18 --------------- ui/src/wrap/components/index.ts | 1 - wrap/src/components/WrapForm/index.tsx | 6 ++--- 4 files changed, 3 insertions(+), 44 deletions(-) delete mode 100644 ui/src/wrap/components/Alert/index.module.css delete mode 100644 ui/src/wrap/components/Alert/index.tsx 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/index.ts b/ui/src/wrap/components/index.ts index fe413d6c..6585950f 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,4 +1,3 @@ -export { Alert as WrapAlert } from './Alert' export * from './icons' export { Input as WrapInput } from './Input' export { Layout as WrapLayout } from './Layout' diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index 1256f4e9..5dd08215 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -1,6 +1,6 @@ import { FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' -import { Button } from '@oasisprotocol/ui-library/src' -import { WrapInput, WrapAlert, WrapToggleButton } from '@oasisprotocol/rose-app-ui/wrap' +import { Button, Alert } from '@oasisprotocol/ui-library/src' +import { WrapInput, WrapToggleButton } from '@oasisprotocol/rose-app-ui/wrap' import classes from './index.module.css' import { useNavigate } from 'react-router-dom' import { useWrapForm } from '../../hooks/useWrapForm' @@ -148,7 +148,7 @@ export const WrapForm: FC = () => { - {error && {error}} + {error && {error}} Date: Wed, 20 Aug 2025 17:36:34 +0200 Subject: [PATCH 04/29] Solve some warnings --- wrap/src/components/WrapForm/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index 5dd08215..36960fb0 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -100,12 +100,12 @@ export const WrapForm: FC = () => { ) { setIsWrapFeeModalOpen(true) } else { - submitTransaction(amount) + void submitTransaction(amount) } } const submitWrapFeeModal = (amount: BigNumber) => { - submitTransaction(amount) + void submitTransaction(amount) setIsWrapFeeModalOpen(false) } From f7835f415ebd278521b9db36ca27fa22d6a2ab93 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 16:49:11 +0200 Subject: [PATCH 05/29] Move (wrap) layout and icon out of the UI library First they go to the main wrap project. In next step we will try to replace them with ui-library components, or completely eliminate them. --- ui/src/wrap/components/icons/index.ts | 1 - ui/src/wrap/components/index.ts | 1 - wrap/src/App.tsx | 4 ++-- .../wrap => wrap/src}/components/Layout/index.module.css | 0 {ui/src/wrap => wrap/src}/components/Layout/index.tsx | 6 +++--- .../icons => wrap/src/components/Logo}/WrapLogoIcon.tsx | 0 wrap/src/pages/ConnectWallet/index.tsx | 2 +- 7 files changed, 6 insertions(+), 8 deletions(-) rename {ui/src/wrap => wrap/src}/components/Layout/index.module.css (100%) rename {ui/src/wrap => wrap/src}/components/Layout/index.tsx (91%) rename {ui/src/wrap/components/icons => wrap/src/components/Logo}/WrapLogoIcon.tsx (100%) diff --git a/ui/src/wrap/components/icons/index.ts b/ui/src/wrap/components/icons/index.ts index 9fac3220..e6b21a7c 100644 --- a/ui/src/wrap/components/icons/index.ts +++ b/ui/src/wrap/components/icons/index.ts @@ -1,4 +1,3 @@ -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 index 6585950f..39d64eb1 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,6 +1,5 @@ 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/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 91% rename from ui/src/wrap/components/Layout/index.tsx rename to wrap/src/components/Layout/index.tsx index 965bbea9..fd66e87e 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 globalClasses from '../../../../ui/src/wrap/index.module.css' +import { Header } from '@oasisprotocol/rose-app-ui/core' const dateFormatLong = new Intl.DateTimeFormat('en', { year: 'numeric', diff --git a/ui/src/wrap/components/icons/WrapLogoIcon.tsx b/wrap/src/components/Logo/WrapLogoIcon.tsx similarity index 100% rename from ui/src/wrap/components/icons/WrapLogoIcon.tsx rename to wrap/src/components/Logo/WrapLogoIcon.tsx diff --git a/wrap/src/pages/ConnectWallet/index.tsx b/wrap/src/pages/ConnectWallet/index.tsx index 740907c7..278dd4ad 100644 --- a/wrap/src/pages/ConnectWallet/index.tsx +++ b/wrap/src/pages/ConnectWallet/index.tsx @@ -2,7 +2,7 @@ import { FC } from 'react' import classes from './index.module.css' import { ConnectButton } from '@rainbow-me/rainbowkit' import { withConnectedWallet } from '../../hoc/withConnectedWallet' -import { WrapLogoIcon } from '@oasisprotocol/rose-app-ui' +import { WrapLogoIcon } from '../../components/Logo/WrapLogoIcon' const ConnectWalletCmp: FC = () => { return ( From e8382c02b859631a59235f5ae7da65caa4a27e42 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 17:10:43 +0200 Subject: [PATCH 06/29] Logo: support showing the image only, w/o title --- ui/src/core/components/icons/Logo.tsx | 86 ++++++++++++++++----------- 1 file changed, 52 insertions(+), 34 deletions(-) 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 + + + + + + + + - - - - - - - - - - - - - -) + + + + + + + ) From de89dfabbf8df577b1fb97b23734ee9dd147dd2a Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 17:11:39 +0200 Subject: [PATCH 07/29] Use proper app logo and wrap fee modal --- wrap/src/components/WrapFeeWarningModal/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/wrap/src/components/WrapFeeWarningModal/index.tsx b/wrap/src/components/WrapFeeWarningModal/index.tsx index 4f247b47..14615479 100644 --- a/wrap/src/components/WrapFeeWarningModal/index.tsx +++ b/wrap/src/components/WrapFeeWarningModal/index.tsx @@ -1,5 +1,6 @@ import { FC } from 'react' -import { WrapModal, WrapModalProps, LogoIconRound, WrapInput } from '@oasisprotocol/rose-app-ui/wrap' +import { WrapModal, WrapModalProps, WrapInput } from '@oasisprotocol/rose-app-ui/wrap' +import { Logo } from '@oasisprotocol/rose-app-ui' import { Button } from '@oasisprotocol/ui-library/src' import classes from './index.module.css' import { useWrapForm } from '../../hooks/useWrapForm' @@ -25,7 +26,7 @@ export const WrapFeeWarningModal: FC = ({ isOpen, clos
- +

You have chosen to wrap your entire balance

From 0ab97577f5488fcc82f2847a75664ae191bcd05b Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 17:12:47 +0200 Subject: [PATCH 08/29] Get rid of obsolete LogoIconRound --- .../wrap/components/icons/LogoIconRound.tsx | 25 ------------------- ui/src/wrap/components/icons/index.ts | 1 - 2 files changed, 26 deletions(-) delete mode 100644 ui/src/wrap/components/icons/LogoIconRound.tsx 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/index.ts b/ui/src/wrap/components/icons/index.ts index e6b21a7c..d29325e8 100644 --- a/ui/src/wrap/components/icons/index.ts +++ b/ui/src/wrap/components/icons/index.ts @@ -1,3 +1,2 @@ -export * from './LogoIconRound' export * from './OpenInNewIcon' export * from './TimesIcon' From cab87f3ca5d89d0b5901c60ac306aa051a80d103 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 17:39:36 +0200 Subject: [PATCH 09/29] Get rid of obsolete TimesIcon --- ui/src/wrap/components/Modal/index.tsx | 4 ++-- ui/src/wrap/components/icons/TimesIcon.tsx | 21 --------------------- ui/src/wrap/components/icons/index.ts | 1 - 3 files changed, 2 insertions(+), 24 deletions(-) delete mode 100644 ui/src/wrap/components/icons/TimesIcon.tsx diff --git a/ui/src/wrap/components/Modal/index.tsx b/ui/src/wrap/components/Modal/index.tsx index 9c6a32c4..387fb1d2 100644 --- a/ui/src/wrap/components/Modal/index.tsx +++ b/ui/src/wrap/components/Modal/index.tsx @@ -1,6 +1,6 @@ import { FC, PropsWithChildren } from 'react' import classes from './index.module.css' -import { TimesIcon } from '../icons/TimesIcon' +import { X as TimesIcon } from 'lucide-react' import { WrapModalProps } from '../../types' export const Modal: FC> = ({ @@ -23,7 +23,7 @@ export const Modal: FC> = ({
{children}
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 index d29325e8..6d75a47d 100644 --- a/ui/src/wrap/components/icons/index.ts +++ b/ui/src/wrap/components/icons/index.ts @@ -1,2 +1 @@ export * from './OpenInNewIcon' -export * from './TimesIcon' From 67264880c100a0d378fbdb6b5633a767ecec86a4 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 18:42:06 +0200 Subject: [PATCH 10/29] Replace Wrap Model with Dialog from UI-Library --- ui/src/wrap/components/Modal/index.module.css | 44 ----------- ui/src/wrap/components/Modal/index.tsx | 32 -------- ui/src/wrap/components/index.ts | 1 - ui/src/wrap/index.ts | 1 - ui/src/wrap/types/ModalProps.ts | 7 -- ui/src/wrap/types/index.ts | 1 - .../WrapFeeWarningModal/index.module.css | 79 ------------------- .../components/WrapFeeWarningModal/index.tsx | 78 +++++++++++------- 8 files changed, 48 insertions(+), 195 deletions(-) delete mode 100644 ui/src/wrap/components/Modal/index.module.css delete mode 100644 ui/src/wrap/components/Modal/index.tsx delete mode 100644 ui/src/wrap/types/ModalProps.ts delete mode 100644 ui/src/wrap/types/index.ts 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 387fb1d2..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 { X as TimesIcon } from 'lucide-react' -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/index.ts b/ui/src/wrap/components/index.ts index 39d64eb1..5fb3a2a5 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,5 +1,4 @@ export * from './icons' export { Input as WrapInput } from './Input' -export { Modal as WrapModal } from './Modal' export * from './Spinner' export { ToggleButton as WrapToggleButton } from './ToggleButton' diff --git a/ui/src/wrap/index.ts b/ui/src/wrap/index.ts index 7e739fe1..cb64ac1b 100644 --- a/ui/src/wrap/index.ts +++ b/ui/src/wrap/index.ts @@ -1,2 +1 @@ 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/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 14615479..0370a7cd 100644 --- a/wrap/src/components/WrapFeeWarningModal/index.tsx +++ b/wrap/src/components/WrapFeeWarningModal/index.tsx @@ -1,7 +1,16 @@ import { FC } from 'react' -import { WrapModal, WrapModalProps, WrapInput } from '@oasisprotocol/rose-app-ui/wrap' +import { WrapInput } from '@oasisprotocol/rose-app-ui/wrap' import { Logo } from '@oasisprotocol/rose-app-ui' -import { Button } from '@oasisprotocol/ui-library/src' +import { + Button, + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@oasisprotocol/ui-library/src' import classes from './index.module.css' import { useWrapForm } from '../../hooks/useWrapForm' import { WRAP_FEE_DEDUCTION_MULTIPLIER } from '../../constants/config' @@ -9,7 +18,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 } @@ -23,22 +34,28 @@ 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} @@ -51,19 +68,20 @@ export const WrapFeeWarningModal: FC = ({ isOpen, clos value={formatEther(NumberUtils.BNtoBigInt(estimatedAmountWithDeductedFees))} /> -
- + + + + - -
-
- + + + + + + ) } From f081726a1bf6d4a4f23fee82041bc042278a4e12 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 18:49:03 +0200 Subject: [PATCH 11/29] Add lucide-react dependency directly to Wrap --- pnpm-lock.yaml | 3 +++ wrap/package.json | 1 + 2 files changed, 4 insertions(+) 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/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", From 43366dfb54f1797ba505531c4338f4ae375b4b7f Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 19:18:24 +0200 Subject: [PATCH 12/29] Move Spinner from ui/wrap to ui/common --- ui/src/{wrap => core}/components/Spinner/index.module.css | 0 ui/src/{wrap => core}/components/Spinner/index.tsx | 0 ui/src/core/components/index.ts | 1 + ui/src/wrap/components/index.ts | 1 - wrap/src/pages/Transaction/index.tsx | 2 +- 5 files changed, 2 insertions(+), 2 deletions(-) rename ui/src/{wrap => core}/components/Spinner/index.module.css (100%) rename ui/src/{wrap => core}/components/Spinner/index.tsx (100%) 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/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/wrap/components/index.ts b/ui/src/wrap/components/index.ts index 5fb3a2a5..fca66e78 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,4 +1,3 @@ export * from './icons' export { Input as WrapInput } from './Input' -export * from './Spinner' export { ToggleButton as WrapToggleButton } from './ToggleButton' diff --git a/wrap/src/pages/Transaction/index.tsx b/wrap/src/pages/Transaction/index.tsx index 6d1e8b18..f1f851c2 100644 --- a/wrap/src/pages/Transaction/index.tsx +++ b/wrap/src/pages/Transaction/index.tsx @@ -1,5 +1,5 @@ import { FC, useEffect, useState } from 'react' -import { OpenInNewIcon, Spinner } from '@oasisprotocol/rose-app-ui/wrap' +import { OpenInNewIcon, 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' From 91a3c7a92a1a37db5c40581c6eedc40b4ddd233c Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 19:28:28 +0200 Subject: [PATCH 13/29] Replace OpenInNew icon with lucide With this all custom Wrap icons are gone. --- .../wrap/components/icons/OpenInNewIcon.tsx | 21 ------------------- ui/src/wrap/components/icons/index.ts | 1 - ui/src/wrap/components/index.ts | 1 - wrap/src/pages/Transaction/index.tsx | 5 +++-- 4 files changed, 3 insertions(+), 25 deletions(-) delete mode 100644 ui/src/wrap/components/icons/OpenInNewIcon.tsx delete mode 100644 ui/src/wrap/components/icons/index.ts 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/index.ts b/ui/src/wrap/components/icons/index.ts deleted file mode 100644 index 6d75a47d..00000000 --- a/ui/src/wrap/components/icons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './OpenInNewIcon' diff --git a/ui/src/wrap/components/index.ts b/ui/src/wrap/components/index.ts index fca66e78..aa855391 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,3 +1,2 @@ -export * from './icons' export { Input as WrapInput } from './Input' export { ToggleButton as WrapToggleButton } from './ToggleButton' diff --git a/wrap/src/pages/Transaction/index.tsx b/wrap/src/pages/Transaction/index.tsx index f1f851c2..0ac5e2b0 100644 --- a/wrap/src/pages/Transaction/index.tsx +++ b/wrap/src/pages/Transaction/index.tsx @@ -1,5 +1,6 @@ import { FC, useEffect, useState } from 'react' -import { OpenInNewIcon, Spinner } from '@oasisprotocol/rose-app-ui' +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' @@ -92,7 +93,7 @@ const TransactionCmp: FC = () => { )} From 8f8606af0521835ecf39927e96c47df1fee601a0 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 22 Aug 2025 19:37:25 +0200 Subject: [PATCH 14/29] Move ToggleButton from ui/wrap to Wrap main --- ui/src/wrap/components/index.ts | 1 - .../src}/components/ToggleButton/index.module.css | 0 .../wrap => wrap/src}/components/ToggleButton/index.tsx | 0 wrap/src/components/WrapForm/index.tsx | 9 +++------ 4 files changed, 3 insertions(+), 7 deletions(-) rename {ui/src/wrap => wrap/src}/components/ToggleButton/index.module.css (100%) rename {ui/src/wrap => wrap/src}/components/ToggleButton/index.tsx (100%) diff --git a/ui/src/wrap/components/index.ts b/ui/src/wrap/components/index.ts index aa855391..667fcddb 100644 --- a/ui/src/wrap/components/index.ts +++ b/ui/src/wrap/components/index.ts @@ -1,2 +1 @@ export { Input as WrapInput } from './Input' -export { ToggleButton as WrapToggleButton } from './ToggleButton' diff --git a/ui/src/wrap/components/ToggleButton/index.module.css b/wrap/src/components/ToggleButton/index.module.css similarity index 100% rename from ui/src/wrap/components/ToggleButton/index.module.css rename to wrap/src/components/ToggleButton/index.module.css diff --git a/ui/src/wrap/components/ToggleButton/index.tsx b/wrap/src/components/ToggleButton/index.tsx similarity index 100% rename from ui/src/wrap/components/ToggleButton/index.tsx rename to wrap/src/components/ToggleButton/index.tsx diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index 36960fb0..a4cc956e 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -1,6 +1,6 @@ import { FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' import { Button, Alert } from '@oasisprotocol/ui-library/src' -import { WrapInput, WrapToggleButton } from '@oasisprotocol/rose-app-ui/wrap' +import { WrapInput } from '@oasisprotocol/rose-app-ui/wrap' import classes from './index.module.css' import { useNavigate } from 'react-router-dom' import { useWrapForm } from '../../hooks/useWrapForm' @@ -10,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]*$' @@ -136,11 +137,7 @@ export const WrapForm: FC = () => { value={value} valueChange={handleValueChange} /> - +

Estimated fee: {estimatedFeeTruncated}

From 7a78994f5f66686c153b929dbaa6162adf7f13d2 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 25 Aug 2025 17:51:04 +0200 Subject: [PATCH 15/29] Use UI library input fields at wrap form --- wrap/src/components/WrapForm/index.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index a4cc956e..11e8269b 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -1,6 +1,6 @@ -import { FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' +import { ChangeEvent, FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' import { Button, Alert } from '@oasisprotocol/ui-library/src' -import { WrapInput } from '@oasisprotocol/rose-app-ui/wrap' +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' @@ -64,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) => { @@ -117,25 +117,27 @@ export const WrapForm: FC = () => {
- + + - + +
From 4497ac4a97b3ddcbd877d183cf1bbe82fcf8d6bd Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 25 Aug 2025 18:00:48 +0200 Subject: [PATCH 16/29] Replace WrapInput also in the wrap fee warning form --- .../components/WrapFeeWarningModal/index.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/wrap/src/components/WrapFeeWarningModal/index.tsx b/wrap/src/components/WrapFeeWarningModal/index.tsx index 0370a7cd..6fceb369 100644 --- a/wrap/src/components/WrapFeeWarningModal/index.tsx +++ b/wrap/src/components/WrapFeeWarningModal/index.tsx @@ -1,8 +1,8 @@ import { FC } from 'react' -import { WrapInput } from '@oasisprotocol/rose-app-ui/wrap' import { Logo } from '@oasisprotocol/rose-app-ui' import { Button, + cn, Dialog, DialogClose, DialogContent, @@ -10,6 +10,8 @@ import { DialogFooter, DialogHeader, DialogTitle, + Input, + Label, } from '@oasisprotocol/ui-library/src' import classes from './index.module.css' import { useWrapForm } from '../../hooks/useWrapForm' @@ -57,16 +59,18 @@ export const WrapFeeWarningModal: FC = ({ isOpen, clos - - className={classes.wrapFeeWarningModalInput} - variant="dark" - disabled - type="text" - label="wROSE" - placeholder="0" - inputMode="decimal" - value={formatEther(NumberUtils.BNtoBigInt(estimatedAmountWithDeductedFees))} - /> +
+ + +
From 010f4f27d7fcbde7acba38c1a677f3629376db16 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 25 Aug 2025 18:01:32 +0200 Subject: [PATCH 17/29] Improve formatting a bit --- wrap/src/components/WrapForm/index.tsx | 50 ++++++++++++++------------ 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index 11e8269b..43a1b0ef 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' -import { Button, Alert } from '@oasisprotocol/ui-library/src' +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' @@ -117,28 +117,32 @@ export const WrapForm: FC = () => {
- - - - +
+ + +
+
+ + +
From 5e6ae7901d94d494e100549ab6987f85b4c2485f Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 25 Aug 2025 18:06:30 +0200 Subject: [PATCH 18/29] Layout: don't reference custom CSS --- wrap/src/components/Layout/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wrap/src/components/Layout/index.tsx b/wrap/src/components/Layout/index.tsx index fd66e87e..bc71f375 100644 --- a/wrap/src/components/Layout/index.tsx +++ b/wrap/src/components/Layout/index.tsx @@ -4,8 +4,8 @@ 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 '../../../../ui/src/wrap/index.module.css' 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 ( -
+
Date: Mon, 25 Aug 2025 18:07:11 +0200 Subject: [PATCH 19/29] Get rid of WrapInput --- ui/src/wrap/components/Input/index.module.css | 66 ------------------- ui/src/wrap/components/Input/index.tsx | 65 ------------------ 2 files changed, 131 deletions(-) delete mode 100644 ui/src/wrap/components/Input/index.module.css delete mode 100644 ui/src/wrap/components/Input/index.tsx 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)} - /> -
- ) -} From 59f79e0a03867aa316b7ec57a4b841eb007c17e1 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 25 Aug 2025 18:07:19 +0200 Subject: [PATCH 20/29] Completely get rid of all UI components from Wrap --- ui/src/index.ts | 1 - ui/src/wrap/components/index.ts | 1 - ui/src/wrap/index.module.css | 36 --------------------------------- ui/src/wrap/index.ts | 1 - 4 files changed, 39 deletions(-) delete mode 100644 ui/src/wrap/components/index.ts delete mode 100644 ui/src/wrap/index.module.css delete mode 100644 ui/src/wrap/index.ts 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/index.ts b/ui/src/wrap/components/index.ts deleted file mode 100644 index 667fcddb..00000000 --- a/ui/src/wrap/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Input as WrapInput } from './Input' 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 cb64ac1b..00000000 --- a/ui/src/wrap/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components' From b31bc201559af2b54006c602e58e0bb57335056f Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 14:25:08 +0200 Subject: [PATCH 21/29] Set the logo to white --- ui/src/core/components/icons/AppLogo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/core/components/icons/AppLogo.tsx b/ui/src/core/components/icons/AppLogo.tsx index c0e953e4..f3ce617e 100644 --- a/ui/src/core/components/icons/AppLogo.tsx +++ b/ui/src/core/components/icons/AppLogo.tsx @@ -8,7 +8,7 @@ export const AppLogo = () => { ) @@ -18,7 +18,7 @@ export const AppLogo = () => { Date: Tue, 2 Sep 2025 14:25:44 +0200 Subject: [PATCH 22/29] Wrap: remove duplicate footer --- wrap/src/components/Layout/index.tsx | 35 ---------------------------- 1 file changed, 35 deletions(-) diff --git a/wrap/src/components/Layout/index.tsx b/wrap/src/components/Layout/index.tsx index bc71f375..ed8ce2c4 100644 --- a/wrap/src/components/Layout/index.tsx +++ b/wrap/src/components/Layout/index.tsx @@ -7,15 +7,6 @@ import classes from './index.module.css' import { Header } from '@oasisprotocol/rose-app-ui/core' import { cn } from '@oasisprotocol/ui-library/src' -const dateFormatLong = new Intl.DateTimeFormat('en', { - year: 'numeric', - month: 'numeric', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', -}) - export const Layout: FC = () => { const isHomePage = useMatch('/wrap') const isMobileScreen = useMediaQuery({ query: '(max-width: 1023px)' }) @@ -41,32 +32,6 @@ export const Layout: FC = () => {
-
-
-
- Version: {APP_VERSION} (commit:{' '} - - {BUILD_COMMIT.substring(0, 7)} - - ) built at {dateFormatLong.format(BUILD_DATETIME)} -
- - | - - - GitHub - - - - - Oasis Protocol Foundation | 2024 - - -
) } From 9e3704a9a36300bbfae384dc35b3852b882a1a99 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 14:47:29 +0200 Subject: [PATCH 23/29] Bump ui-library to latest master --- ui-library | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-library b/ui-library index f283d7a7..c67396b0 160000 --- a/ui-library +++ b/ui-library @@ -1 +1 @@ -Subproject commit f283d7a7f4ee71153716523ee208a276a91eec4d +Subproject commit c67396b00e9f6544e4f8c04dfa1472e8be1d0db1 From 04a000fd4e1f5969ded51cd640365fa7bc0465c8 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 15:01:04 +0200 Subject: [PATCH 24/29] Make our configured connect wallet button available as a component --- .../RainbowKitConnectButton/index.tsx | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/ui/src/core/components/RainbowKitConnectButton/index.tsx b/ui/src/core/components/RainbowKitConnectButton/index.tsx index 4a6cd20f..2200fc5f 100644 --- a/ui/src/core/components/RainbowKitConnectButton/index.tsx +++ b/ui/src/core/components/RainbowKitConnectButton/index.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import { ConnectButton } from '@rainbow-me/rainbowkit' import { ChevronDown, Wallet } from 'lucide-react' -import { Button } from '@oasisprotocol/ui-library/src/components/ui/button' +import { cn, Button } from '@oasisprotocol/ui-library/src' import { DropdownMenu, DropdownMenuContent, @@ -25,15 +25,34 @@ const TruncatedAddress: FC<{ address: string; className?: string }> = ({ address interface Props { onMobileClose?: () => void + className?: string } +export const ConnectWalletButton: FC = ({ onMobileClose, className }) => ( + + {({ openConnectModal }) => ( + + )} + +) + export const RainbowKitConnectButton: FC = ({ onMobileClose }) => { const isMobile = useIsMobile() const { disconnect } = useDisconnect() return ( - {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => { + {({ account, chain, openAccountModal, openChainModal, mounted }) => { const ready = mounted const connected = ready && account && chain @@ -50,19 +69,7 @@ export const RainbowKitConnectButton: FC = ({ onMobileClose }) => { > {(() => { if (!connected) { - return ( - - ) + return } if (chain.unsupported) { From 4635be2f27832a8a060fa2fe78e24f0ab2ef9a66 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 15:08:23 +0200 Subject: [PATCH 25/29] Wrap: apply design to the "connect wallet" page --- wrap/src/pages/ConnectWallet/index.module.css | 28 ------------------- wrap/src/pages/ConnectWallet/index.tsx | 26 +++++++++-------- 2 files changed, 14 insertions(+), 40 deletions(-) delete mode 100644 wrap/src/pages/ConnectWallet/index.module.css diff --git a/wrap/src/pages/ConnectWallet/index.module.css b/wrap/src/pages/ConnectWallet/index.module.css deleted file mode 100644 index 1513f881..00000000 --- a/wrap/src/pages/ConnectWallet/index.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.connectWallet { - display: flex; - flex-direction: column; - gap: 1.5rem; - align-items: flex-start; - width: 100%; - - button { - &&& { - padding: 0 32px; - border-radius: 999px; - } - } -} - -.subHeader { - margin-bottom: 34dvh; -} - -.installMetaMaskBtn { - margin-bottom: 1.5rem; -} - -@media screen and (min-width: 1000px) { - .subHeader { - margin-bottom: 4.85rem; - } -} diff --git a/wrap/src/pages/ConnectWallet/index.tsx b/wrap/src/pages/ConnectWallet/index.tsx index 278dd4ad..5239ab0d 100644 --- a/wrap/src/pages/ConnectWallet/index.tsx +++ b/wrap/src/pages/ConnectWallet/index.tsx @@ -1,22 +1,24 @@ import { FC } from 'react' -import classes from './index.module.css' -import { ConnectButton } from '@rainbow-me/rainbowkit' +import { Card, CardHeader, CardDescription, CardTitle, CardFooter } from '@oasisprotocol/ui-library/src' import { withConnectedWallet } from '../../hoc/withConnectedWallet' -import { WrapLogoIcon } from '../../components/Logo/WrapLogoIcon' +import { ConnectWalletButton } from '@oasisprotocol/rose-app-ui' const ConnectWalletCmp: FC = () => { return ( -
- + + + WRAP -

- Quickly wrap your ROSE into wROSE and vice versa with the (un)wrap ROSE tool. -
- Please connect your wallet to get started. -

+ + Quickly wrap your ROSE into wROSE and vice versa with the (un)wrap ROSE tool. Please connect your + wallet to get started. + + - -
+ + + + ) } From 5310fc9df959f3d7fb056bffbf96c021f119ef35 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 15:27:50 +0200 Subject: [PATCH 26/29] Wrap: eliminate local Layout component --- wrap/src/App.tsx | 6 +- wrap/src/components/Layout/index.module.css | 72 --------------------- wrap/src/components/Layout/index.tsx | 37 ----------- 3 files changed, 4 insertions(+), 111 deletions(-) delete mode 100644 wrap/src/components/Layout/index.module.css delete mode 100644 wrap/src/components/Layout/index.tsx diff --git a/wrap/src/App.tsx b/wrap/src/App.tsx index 7ee34511..291cea08 100644 --- a/wrap/src/App.tsx +++ b/wrap/src/App.tsx @@ -1,9 +1,11 @@ import { FC } from 'react' -import { Layout } from './components/Layout' +import { Outlet } from 'react-router-dom' import { Web3ContextProvider } from './providers/Web3Provider' export const App: FC = () => ( - +
+ +
) diff --git a/wrap/src/components/Layout/index.module.css b/wrap/src/components/Layout/index.module.css deleted file mode 100644 index 23cd5ee5..00000000 --- a/wrap/src/components/Layout/index.module.css +++ /dev/null @@ -1,72 +0,0 @@ -.layout { - min-height: 100dvh; - display: flex; - flex-direction: column; - justify-content: space-between; - - margin: 0; - font-family: 'Figtree Variable', 'Helvetica', 'Arial', sans-serif; - font-size: 16px; - font-style: normal; - font-weight: normal; - line-height: 150%; - color: var(--white); - text-align: left; - background-color: var(--brand-blue); - background-size: contain; - background-position: left bottom; - background-repeat: no-repeat; -} - -.main { - display: flex; - justify-content: center; - flex: 1 0 auto; - margin: 0 auto; - width: 100%; - padding: 6.875rem 1.875rem 1.875rem; -} - -.headerLink { - text-decoration: none; - color: var(--white); - min-height: 70px; - display: flex; - align-items: center; -} - -.footer { - display: flex; - flex-wrap: wrap; - justify-content: start; - align-items: center; - padding: 2.5rem 1rem 0.5rem; - color: var(--white); - font-size: 12px; - font-weight: 400; - line-height: 150%; - margin: 0 auto; - width: 100%; - max-width: 1076px; - gap: 0.5rem; - - a { - color: var(--white); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -@media screen and (min-width: 1000px) { - .main { - max-width: 670px; - padding: 1.5rem 0 0; - } - - .footer { - padding: 3rem 2rem 1.25rem; - } -} diff --git a/wrap/src/components/Layout/index.tsx b/wrap/src/components/Layout/index.tsx deleted file mode 100644 index ed8ce2c4..00000000 --- a/wrap/src/components/Layout/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { FC, PropsWithChildren } from 'react' -import { NavLink, Outlet, useMatch } from 'react-router-dom' -import { WrapLogoIcon } from '../Logo/WrapLogoIcon' -import { ConnectButton } from '@rainbow-me/rainbowkit' -import { useMediaQuery } from 'react-responsive' -import classes from './index.module.css' -import { Header } from '@oasisprotocol/rose-app-ui/core' -import { cn } from '@oasisprotocol/ui-library/src' - -export const Layout: FC = () => { - const isHomePage = useMatch('/wrap') - const isMobileScreen = useMediaQuery({ query: '(max-width: 1023px)' }) - - return ( -
-
- - - ) - } - > - {isHomePage &&
} - {!isHomePage && !isMobileScreen && } -
-
- -
-
- ) -} From 84b423033735ba5bbac271a98d0b982d31a084f4 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 15:49:21 +0200 Subject: [PATCH 27/29] Fix wallet icon <-> text distance --- ui/src/core/components/RainbowKitConnectButton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/core/components/RainbowKitConnectButton/index.tsx b/ui/src/core/components/RainbowKitConnectButton/index.tsx index 2200fc5f..03a9856a 100644 --- a/ui/src/core/components/RainbowKitConnectButton/index.tsx +++ b/ui/src/core/components/RainbowKitConnectButton/index.tsx @@ -39,7 +39,7 @@ export const ConnectWalletButton: FC = ({ onMobileClose, className }) => variant="default" className={cn('max-md:w-full', className)} > - + Connect Wallet )} From 0288ee9067fc392ea842a74cb9a9e115a55ff73e Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Tue, 2 Sep 2025 17:53:58 +0200 Subject: [PATCH 28/29] Apply design to wrap/un-wrap page --- ui-library | 2 +- .../components/ToggleButton/index.module.css | 23 --- wrap/src/components/ToggleButton/index.tsx | 14 +- wrap/src/components/WrapForm/index.module.css | 36 ----- wrap/src/components/WrapForm/index.tsx | 142 +++++++++++------- wrap/src/pages/Wrapper/index.tsx | 139 ++++++++--------- 6 files changed, 171 insertions(+), 185 deletions(-) delete mode 100644 wrap/src/components/ToggleButton/index.module.css delete mode 100644 wrap/src/components/WrapForm/index.module.css diff --git a/ui-library b/ui-library index c67396b0..ab33ecb9 160000 --- a/ui-library +++ b/ui-library @@ -1 +1 @@ -Subproject commit c67396b00e9f6544e4f8c04dfa1472e8be1d0db1 +Subproject commit ab33ecb94526104313d7437612328473fbf3ecfa diff --git a/wrap/src/components/ToggleButton/index.module.css b/wrap/src/components/ToggleButton/index.module.css deleted file mode 100644 index 598bdbf9..00000000 --- a/wrap/src/components/ToggleButton/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.toggleButton { - display: flex; - justify-content: center; - align-items: center; - width: 38px; - height: 38px; - border-radius: 50%; - border: 1px solid transparent; - box-shadow: none; - cursor: pointer; - outline: none; - text-decoration: none; - user-select: none; - color: var(--white); - background: var(--brand-dark); -} - -@media screen and (min-width: 1000px) { - .toggleButton { - width: 48px; - height: 48px; - } -} diff --git a/wrap/src/components/ToggleButton/index.tsx b/wrap/src/components/ToggleButton/index.tsx index c59d6029..7e668053 100644 --- a/wrap/src/components/ToggleButton/index.tsx +++ b/wrap/src/components/ToggleButton/index.tsx @@ -1,15 +1,17 @@ -import classes from './index.module.css' import { FC, MouseEventHandler } from 'react' -import { RefreshCw } from 'lucide-react' +import { ArrowDownUp } from 'lucide-react' interface Props { - className?: string disabled?: boolean onClick?: MouseEventHandler } -export const ToggleButton: FC = ({ className, disabled, onClick }) => ( - ) diff --git a/wrap/src/components/WrapForm/index.module.css b/wrap/src/components/WrapForm/index.module.css deleted file mode 100644 index d64403a2..00000000 --- a/wrap/src/components/WrapForm/index.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.wrapForm { - display: flex; - flex-direction: column; - position: relative; -} - -.wrapFormInputs { - position: relative; - display: flex; - flex-direction: column; - gap: 0.625rem; -} - -.toggleBtn { - position: absolute; - left: 2.8125rem; - top: 50%; - transform: translateY(-50%); -} - -.gasEstimateLabel.gasEstimateLabel { - text-align: center; - margin: 2rem 0 1rem; -} - -@media screen and (min-width: 1000px) { - .toggleBtn { - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); - } - - .gasEstimateLabel { - margin: 3.875rem 0 1.5rem; - } -} diff --git a/wrap/src/components/WrapForm/index.tsx b/wrap/src/components/WrapForm/index.tsx index 43a1b0ef..23262b17 100644 --- a/wrap/src/components/WrapForm/index.tsx +++ b/wrap/src/components/WrapForm/index.tsx @@ -1,7 +1,6 @@ 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 { Button, Alert, AlertTitle, cn, Separator, Input, Label } from '@oasisprotocol/ui-library/src' +import { Typography } from '@oasisprotocol/ui-library/src/components/typography' import { useNavigate } from 'react-router-dom' import { useWrapForm } from '../../hooks/useWrapForm' import { WrapFormType } from '../../utils/types' @@ -14,34 +13,45 @@ import { ToggleButton } from '../ToggleButton' const AMOUNT_PATTERN = '^[0-9]*[.,]?[0-9]*$' -interface WrapFormLabels { +interface WrapFormData { firstInputLabel: string secondInputLabel: string submitBtnLabel: string -} - -const labelMapByFormType: Record = { - [WrapFormType.WRAP]: { - firstInputLabel: 'ROSE', - secondInputLabel: 'wROSE', - submitBtnLabel: 'Wrap tokens', - }, - [WrapFormType.UNWRAP]: { - firstInputLabel: 'wROSE', - secondInputLabel: 'ROSE', - submitBtnLabel: 'Unwrap tokens', - }, + firstBalance: string + secondBalance: string } export const WrapForm: FC = () => { const navigate = useNavigate() const { - state: { formType, amount, isLoading, balance, estimatedFee }, + state: { formType, amount, isLoading, balance, wRoseBalance, estimatedFee }, toggleFormType, submit, debounceLeadingSetFeeAmount, } = useWrapForm() - const { firstInputLabel, secondInputLabel, submitBtnLabel } = labelMapByFormType[formType] + + const roseBalanceString = `${balance ? formatEther(NumberUtils.BNtoBigInt(balance)) : '0'} ROSE` + const wRoseBalanceString = `${wRoseBalance ? formatEther(NumberUtils.BNtoBigInt(wRoseBalance)) : '0'} wROSE` + + const labelMapByFormType: Record = { + [WrapFormType.WRAP]: { + firstInputLabel: 'ROSE', + secondInputLabel: 'wROSE', + submitBtnLabel: 'Wrap tokens', + firstBalance: roseBalanceString, + secondBalance: wRoseBalanceString, + }, + [WrapFormType.UNWRAP]: { + firstInputLabel: 'wROSE', + secondInputLabel: 'ROSE', + submitBtnLabel: 'Unwrap tokens', + firstBalance: wRoseBalanceString, + secondBalance: roseBalanceString, + }, + } + + const { firstInputLabel, secondInputLabel, submitBtnLabel, firstBalance, secondBalance } = + labelMapByFormType[formType] const [value, setValue] = useState('') const [error, setError] = useState('') const [isWrapFeeModalOpen, setIsWrapFeeModalOpen] = useState(false) @@ -115,43 +125,73 @@ export const WrapForm: FC = () => { return (
- -
-
- - + +
+
+ +
+ + {firstInputLabel} +
+ + Balance: {firstBalance} +
-
- - + +
+
+ +
+ +
+ +
+
+
+ +
+ + {secondInputLabel} +
+ + Balance: {secondBalance} +
-
-

Estimated fee: {estimatedFeeTruncated}

+
+ Estimated gas fee: + {estimatedFeeTruncated} +
- - {error && {error}} +
+ + {error && ( + + {error} + + )} +
{ const { address } = useAccount() - const { addTokenToWallet } = useWeb3() + // const { addTokenToWallet } = useWeb3() const { - state: { isLoading, balance, wRoseBalance, formType, estimatedFee }, + // state: { isLoading, balance, wRoseBalance, formType, estimatedFee }, init, - setAmount, + // setAmount, } = useWrapForm() useEffect(() => { @@ -48,47 +47,51 @@ const WrapperCmp: FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [address]) - const handlePercentageCalc = (percentage: BigNumber) => { - if (formType === WrapFormType.WRAP) { - if (percentage.eq(100)) { - /* In case of 100% WRAP, deduct gas fee */ - const percAmount = NumberUtils.getPercentageAmount(balance, percentage) - setAmount(percAmount.minus(estimatedFee)) - } else { - setAmount(NumberUtils.getPercentageAmount(balance, percentage)) - } - } else if (formType === WrapFormType.UNWRAP) { - setAmount(NumberUtils.getPercentageAmount(wRoseBalance, percentage)) - } else { - throw new Error('[formType] Invalid form type') - } - } + // const handlePercentageCalc = (percentage: BigNumber) => { + // if (formType === WrapFormType.WRAP) { + // if (percentage.eq(100)) { + // /* In case of 100% WRAP, deduct gas fee */ + // const percAmount = NumberUtils.getPercentageAmount(balance, percentage) + // setAmount(percAmount.minus(estimatedFee)) + // } else { + // setAmount(NumberUtils.getPercentageAmount(balance, percentage)) + // } + // } else if (formType === WrapFormType.UNWRAP) { + // setAmount(NumberUtils.getPercentageAmount(wRoseBalance, percentage)) + // } else { + // throw new Error('[formType] Invalid form type') + // } + // } return ( -
-
-

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

- - -
+ + + WRAP + + Quickly wrap your ROSE into wROSE and vice versa with the (un)wrap ROSE tool. + + -
- {percentageList.map(({ label, value }) => ( - - ))} -
+ {/**/} - -
+ + {/*
*/} + {/* {percentageList.map(({ label, value }) => (*/} + {/* handlePercentageCalc(value)}*/} + {/* key={label}*/} + {/* variant="outline"*/} + {/* >*/} + {/* {label}*/} + {/* */} + {/* ))}*/} + {/*
*/} + + + ) } From 889e5d51443f48142f6f9dddbd832df95a7271b8 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Thu, 4 Sep 2025 10:48:48 +0200 Subject: [PATCH 29/29] Bump UI-Library version --- ui-library | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-library b/ui-library index ab33ecb9..85623267 160000 --- a/ui-library +++ b/ui-library @@ -1 +1 @@ -Subproject commit ab33ecb94526104313d7437612328473fbf3ecfa +Subproject commit 856232676828081ba9a806d9d9646b4f41668112