move: Sapphire to CEX

move/src/App.module.css

@@ -51,6 +51,7 @@
   h1 {
     margin-bottom: 10px;
   }
+
   .cards {
     display: flex;
     flex-direction: row;
@@ -89,6 +90,7 @@
     display: flex;
     justify-content: center;
   }
+
   .addressWrapper {
     display: grid;
     grid-template-columns: auto auto auto auto auto;
@@ -113,22 +115,26 @@
       color: var(--brand-extra-dark);
       border-radius: 8px 0 0 8px;
     }
+
     .address {
       font-family: Roboto Mono Variable, monospace;
       flex-grow: 1;
       display: flex;
       padding: 23px;
       gap: 8px;
     }
+
     .addressLonger > * {
       max-width: 50ch;
     }
+
     .endAdornment {
       display: flex;
       gap: 6px;
 
       border-left: 2px solid var(--white);
     }
+
     .plainButton {
       background-color: transparent;
     }
@@ -150,15 +156,19 @@
         border-radius: 8px 8px 0 0;
         text-align: center;
       }
+
       .endAdornment {
         border: none;
       }
+
       button {
         padding: 0px 15px;
       }
+
       .address {
         padding: 10px;
       }
+
       .addressLonger > * {
         max-width: calc(100cqw - 300px);
       }
@@ -186,6 +196,7 @@
   background-color: var(--white);
   color: var(--brand-extra-dark);
 }
+
 .cardContent {
   display: flex;
   flex-direction: column;
@@ -194,14 +205,11 @@
   gap: 8px;
   padding: 16px;
 }
+
 .cardImage {
   width: 100%;
 }
 
-.opacity50 {
-  opacity: 0.5;
-}
-
 .collapsible {
   max-height: 30em;
   overflow: hidden;
@@ -221,3 +229,46 @@
   cursor: pointer;
   outline: inherit;
 }
+
+.withdrawStep1 {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 575px;
+  padding-left: 105px;
+
+  form {
+    button {
+      margin-top: 2rem;
+    }
+  }
+
+  .withdrawStep1Address {
+    margin-bottom: 1.5rem;
+  }
+
+  .withdrawStep1Breakdown {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1rem;
+
+    div {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 1rem 0;
+
+      border-bottom: 1px solid var(--white);
+
+      &:last-of-type {
+        border-bottom: 2px solid var(--white);
+      }
+    }
+  }
+}
+
+.withdrawStep4ProgressBarLabel {
+  text-align: center;
+  margin-bottom: 0.5rem;
+}

move/src/App.tsx

@@ -9,7 +9,6 @@ import { useDeposit } from './useDeposit'
 import { useWithdraw } from './useWithdraw'
 import { useIsRpcResponding } from './utils/useIsRpcResponding'
 
-import open_in_new_svg from '@material-design-icons/svg/filled/open_in_new.svg'
 import videocam_svg from '@material-design-icons/svg/filled/videocam.svg'
 import vpn_key_svg from '@material-design-icons/svg/filled/vpn_key.svg'
 import { useState } from 'react'
@@ -22,8 +21,6 @@ import { Deposit } from './deposit/Deposit'
 import { useReloadIfAccountSwitched } from './utils/useReloadIfAccountSwitched'
 import { Withdraw } from './withdraw/Withdraw'
 
-const isProduction = import.meta.env.PROD
-
 export function App() {
   useReloadIfAccountSwitched()
   const isRpcResponding = useIsRpcResponding()
@@ -129,25 +126,13 @@ export function App() {
             </div>
 
             <div className={classes.card}>
-              <img className={`${classes.cardImage} ${classes.opacity50}`} src={sapphire_to_consensus_svg} alt="" />
+              <img className={`${classes.cardImage}`} src={sapphire_to_consensus_svg} alt="" />
               <div className={classes.cardContent}>
                 <h2>Sapphire to Consensus</h2>
                 <p>
                   Move ROSE from your Sapphire account (e.g. in MetaMask) to your Consensus account (e.g. an exchange).
                 </p>
-                <Button onClick={withdraw.step2} className={classes.opacity50} disabled={isProduction}>
-                  Coming soon
-                </Button>
-                <Button
-                  onClick={() => open('https://wallet.oasis.io/')}
-                  style={{
-                    position: 'absolute',
-                    marginTop: -50,
-                  }}
-                >
-                  Instead use our ROSE Wallet &nbsp;&nbsp;&nbsp;&nbsp;
-                  <img src={open_in_new_svg} alt="" width="24" style={{ filter: 'invert(1)' }} />
-                </Button>
+                <Button onClick={withdraw.step2}>Select and sign-in</Button>
               </div>
             </div>
           </div>

move/src/components/Amount/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { useAccount } from 'wagmi'
+import { formatAmount } from '../../utils/getBalances.ts'
+
+interface Props {
+  value: bigint
+  dp?: number
+  formatDp?: number
+}
+
+export const Amount: FC<Props> = ({ value, dp, formatDp = 3 }) => {
+  const { chain } = useAccount()
+  const nativeCurrency = chain?.nativeCurrency
+
+  if (!nativeCurrency) return null
+
+  const _dp = dp ?? nativeCurrency?.decimals
+
+  const formattedAmount = formatAmount(value, _dp, formatDp)
+
+  return (
+    <span>
+      {formattedAmount}&nbsp;<b>{nativeCurrency.symbol}</b>
+    </span>
+  )
+}

move/src/components/Button/ButtonWithClickedIndicator.tsx

@@ -4,7 +4,9 @@ import { Button } from '.'
 export function ButtonWithClickedIndicator({
   clickedIndicator,
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { clickedIndicator: React.ReactNode }) {
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  clickedIndicator: React.ReactNode
+}) {
   const [wasClicked, setWasClicked] = useState(false)
   return (
     <Button

move/src/components/Button/index.module.css

@@ -18,13 +18,16 @@
     &:focus-visible {
       filter: contrast(0.9);
     }
+
     &:active {
       filter: contrast(0.7);
     }
   }
+
   &:disabled {
     cursor: not-allowed;
   }
+
   img {
     vertical-align: middle;
   }

move/src/components/Hint/index.module.css

@@ -13,6 +13,7 @@
   margin-top: 16px;
   border-radius: 4px;
   position: relative;
+
   &::before {
     content: '';
     border-radius: 2px;
@@ -40,8 +41,10 @@
     left: 50px; /* Extra space so hint doesn't cover sidebar toggle */
     right: 110px;
     margin-top: -60px;
+
     .hint {
       width: 100%;
+
       &::before {
         right: -8px;
         left: auto;

move/src/components/Hint/index.tsx

@@ -1,4 +1,5 @@
 import classes from './index.module.css'
+
 export function Hint(props: { title: string | undefined; children: React.ReactNode }) {
   return (
     <div>

move/src/components/Input/index.module.css

@@ -0,0 +1,36 @@
+.input {
+  width: 100%;
+  position: relative;
+
+  input {
+    width: 100%;
+    height: 2.8125rem;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    padding-inline-start: 12px;
+    padding-inline-end: 12px;
+    border-radius: 4px;
+    min-width: 0;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    position: relative;
+    appearance: none;
+    transition-property: border;
+    transition-duration: 100ms;
+    border: 2px solid var(--brand-blue);
+    color: var(--brand-extra-dark);
+    font-family: Roboto Mono Variable, monospace;
+  }
+
+  label {
+    color: var(--white);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+}
+
+.inputError {
+  margin-top: 0.5rem;
+}

move/src/components/Input/index.tsx

@@ -0,0 +1,46 @@
+import { FC, HTMLAttributes, useId, useLayoutEffect, useRef } from 'react'
+import classes from './index.module.css'
+
+interface Props {
+  required?: boolean
+  label?: string
+  error?: string
+  className?: string
+  initialValue?: string
+  pattern?: string
+  inputMode?: HTMLAttributes<HTMLInputElement>['inputMode']
+  onChange: (value?: string) => void
+}
+
+export const Input: FC<Props> = ({ required, label, error, className, initialValue, pattern, inputMode, onChange }) => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement | null>(null)
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.value = initialValue ?? ''
+    }
+  }, [initialValue])
+
+  return (
+    <div className={className}>
+      <div className={classes.input}>
+        <label htmlFor={id}>{label}</label>
+        <input
+          onChange={({ target: { value } }) => {
+            onChange?.(value)
+          }}
+          ref={ref}
+          placeholder=" "
+          id={id}
+          required={required}
+          autoComplete="off"
+          translate="no"
+          pattern={pattern}
+          inputMode={inputMode}
+        />
+      </div>
+      {error && <p className={`error ${classes.inputError}`}>{error}</p>}
+    </div>
+  )
+}

move/src/components/Modal/index.module.css

@@ -44,6 +44,7 @@
     padding: 1.75rem;
     overflow: auto;
   }
+
   .modalContent {
     padding: 1rem;
   }

move/src/components/ProgressBar/index.module.css

@@ -15,6 +15,7 @@
 
   &.isError {
     border: 1px solid #f44336;
+
     .progressbarFill {
       background-color: #f44336;
       margin-left: 50%;