Align Wrap layout with new design quide

ui/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
     "@fontsource-variable/figtree": "^5.0.20",
+    "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/roboto-mono": "^5.0.18",
     "@material-design-icons/svg": "^0.14.13",
     "@metamask/jazzicon": "^2.0.0",

ui/src/core/components/AppLayout/index.tsx

@@ -55,6 +55,7 @@ export const AppLayout = () => {
 
   return (
     <Layout
+      className="[&_main]:mx-0"
       headerContent={
         <div className="w-full flex justify-between items-center">
           <NavLink to="/">

ui/src/core/index.css

@@ -1,5 +1,6 @@
 @import '@fontsource-variable/figtree/index.css';
 @import '@fontsource-variable/roboto-mono/index.css';
+@import '@fontsource-variable/inter';
 
 /** Use Figtree for "…" instead of Roboto Mono. */
 @font-face {
@@ -12,6 +13,7 @@
 }
 
 :root {
+  --default-font-family: 'Inter Variable', sans-serif;
   --black: #000;
   --blue-bg: #3902e1;
   --blue-dark-border: #1b0f33;
@@ -62,7 +64,7 @@
 
 body {
   margin: 0;
-  font-family: 'Figtree Variable', system-ui, sans-serif;
+  font-family: 'Inter Variable', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: normal;

ui/src/wrap/components/index.ts

@@ -2,7 +2,6 @@ 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'

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",

wrap/src/App.tsx

@@ -1,9 +1,11 @@
 import { FC } from 'react'
-import { WrapLayout } from '@oasisprotocol/rose-app-ui/wrap'
+import { Outlet } from 'react-router-dom'
 import { Web3ContextProvider } from './providers/Web3Provider'
 
 export const App: FC = () => (
   <Web3ContextProvider>
-    <WrapLayout />
+    <div className="p-6 w-full flex">
+      <Outlet />
+    </div>
   </Web3ContextProvider>
 )

wrap/src/components/WrapFeeWarningModal/index.tsx

@@ -1,19 +1,28 @@
 import { FC } from 'react'
-import {
-  WrapModal,
-  WrapModalProps,
-  LogoIconRound,
-  WrapInput,
-  WrapButton,
-} from '@oasisprotocol/rose-app-ui/wrap'
-import classes from './index.module.css'
 import { useWrapForm } from '../../hooks/useWrapForm'
 import { WRAP_FEE_DEDUCTION_MULTIPLIER } from '../../constants/config'
 import { NumberUtils } from '../../utils/number.utils'
 import BigNumber from 'bignumber.js'
 import { formatEther } from 'viem'
+import { Button } from '@oasisprotocol/ui-library/src/components/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@oasisprotocol/ui-library/src/components/dialog'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@oasisprotocol/ui-library/src/components/ui/input-group' // TODO: fix import path in UIL
 
-interface WrapFeeWarningModalProps extends Pick<WrapModalProps, 'isOpen' | 'closeModal'> {
+interface WrapFeeWarningModalProps {
+  isOpen: boolean
+  closeModal: () => void
   next: (amount: BigNumber) => void
 }
 
@@ -22,52 +31,59 @@ export const WrapFeeWarningModal: FC<WrapFeeWarningModalProps> = ({ isOpen, clos
     state: { amount, estimatedFee },
   } = useWrapForm()
   const estimatedFeeDeduction = estimatedFee.multipliedBy(WRAP_FEE_DEDUCTION_MULTIPLIER)
-
   const roseAmount = NumberUtils.ensureNonNullBigNumber(amount)
   const estimatedAmountWithDeductedFees = roseAmount!.minus(estimatedFeeDeduction)
 
   return (
-    <WrapModal isOpen={isOpen} closeModal={closeModal} disableBackdropClick>
-      <div className={classes.wrapFeeWarningModalContent}>
-        <div className={classes.wrapFeeWarningModalLogo}>
-          <LogoIconRound />
-        </div>
+    <Dialog open={isOpen} onOpenChange={closeModal}>
+      <DialogContent className="sm:max-w-[45vw]">
+        <DialogHeader className="gap-3">
+          <DialogTitle>You have chosen to wrap your entire balance</DialogTitle>
+          <DialogDescription className="flex flex-col gap-3">
+            <span className="text-muted-foreground">
+              It is recommended to keep a small amount in your wallet at all times to cover future
+              transactions.
+            </span>
+            <span className="text-muted-foreground">
+              Choose if you want to wrap the reduced amount and keep &#123;sum of{' '}
+              {WRAP_FEE_DEDUCTION_MULTIPLIER} x gas fee - e.g. ‘
+              <b>{formatEther(NumberUtils.BNtoBigInt(estimatedFeeDeduction))} ROSE</b>’&#125; in your account,
+              or continue with the full amount.
+            </span>
+          </DialogDescription>
+        </DialogHeader>
 
-        <h4>You have chosen to wrap your entire balance</h4>
-
-        <p>
-          It is recommended to keep a small amount in your wallet at all times to cover future transactions.
-        </p>
-        <p>
-          Choose if you want to wrap the reduced amount and keep &#123;sum of {WRAP_FEE_DEDUCTION_MULTIPLIER}{' '}
-          x gas fee - e.g. ‘<b>{formatEther(NumberUtils.BNtoBigInt(estimatedFeeDeduction))} ROSE</b>’&#125; in
-          your account, or continue with the full amount.
-        </p>
-
-        <WrapInput<string>
-          className={classes.wrapFeeWarningModalInput}
-          variant="dark"
-          disabled
-          type="text"
-          label="wROSE"
-          placeholder="0"
-          inputMode="decimal"
-          value={formatEther(NumberUtils.BNtoBigInt(estimatedAmountWithDeductedFees))}
-        />
-
-        <div className={classes.wrapFeeWarningModalActions}>
-          <WrapButton
-            className={classes.wrapFeeWarningModalButton}
-            onClick={() => next(estimatedAmountWithDeductedFees)}
-          >
-            <span className={classes.wrapFeeWarningModalButtonText}>Wrap reduced amount</span>
-          </WrapButton>
-
-          <button className={classes.wrapFeeWarningModalFullAmount} onClick={() => next(amount!)}>
-            Continue with full amount
-          </button>
+        <div className="inline-flex items-center justify-center my-4">
+          <div className="flex items-center justify-center">
+            <InputGroup>
+              <InputGroupInput
+                id="value-field"
+                disabled
+                type="text"
+                placeholder="0"
+                inputMode="decimal"
+                value={formatEther(NumberUtils.BNtoBigInt(estimatedAmountWithDeductedFees))}
+              />
+              <InputGroupAddon align="inline-end">
+                <span className="text-muted-foreground font-medium">wROSE</span>
+              </InputGroupAddon>
+            </InputGroup>
+          </div>
         </div>
-      </div>
-    </WrapModal>
+
+        <DialogFooter className="flex justify-between gap-3">
+          <DialogClose asChild>
+            <Button variant="ghost" size="lg" onClick={() => next(amount!)}>
+              Continue with full amount
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button size="lg" onClick={() => next(estimatedAmountWithDeductedFees)}>
+              Wrap reduced amount
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }