feat: new send to wallet functionality

packages/widget/src/components/AmountInput/AmountInput.style.tsx

@@ -46,13 +46,13 @@ export const Input = styled(InputBase)(({ theme }) => ({
 }))
 
 export const AmountInputCardTitle = styled(CardTitle)(({ theme }) => ({
-  padding: theme.spacing(2, 0, 0, 0),
+  padding: theme.spacing(0),
 }))
 
 export const AmountInputCardHeader = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(0, 2, 0, 2),
+  padding: theme.spacing(2, 2, 0, 2),
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'start',
+  alignItems: 'center',
   height: 30,
 }))

packages/widget/src/components/AmountInput/AmountInput.tsx

@@ -49,9 +49,6 @@ export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
     <AmountInputBase
       formType={formType}
       token={token}
-      endAdornment={
-        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
-      }
       bottomAdornment={<PriceFormHelperText formType={formType} />}
       disabled={disabled}
       {...props}
@@ -64,15 +61,13 @@ const AmountInputBase: React.FC<
     CardProps & {
       token?: Token
       startAdornment?: ReactNode
-      endAdornment?: ReactNode
       bottomAdornment?: ReactNode
       disabled?: boolean
     }
 > = ({
   formType,
   token,
   startAdornment,
-  endAdornment,
   bottomAdornment,
   disabled,
   ...props
@@ -174,7 +169,6 @@ const AmountInputBase: React.FC<
     <InputCard {...props}>
       <AmountInputCardHeader>
         <AmountInputCardTitle>{title}</AmountInputCardTitle>
-        {endAdornment}
       </AmountInputCardHeader>
       <FormContainer>
         <AmountInputStartAdornment formType={formType} />
@@ -204,6 +198,7 @@ const AmountInputBase: React.FC<
           {bottomAdornment}
         </FormControl>
       </FormContainer>
+      {!disabled && <AmountInputEndAdornment formType={formType} />}
     </InputCard>
   )
 }

packages/widget/src/components/AmountInput/AmountInputEndAdornment.style.ts

@@ -0,0 +1,18 @@
+import { Box, styled } from '@mui/material'
+import { ButtonTertiary } from '../ButtonTertiary.js'
+
+export const ButtonContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(1),
+  padding: theme.spacing(0, 2, 2, 2),
+}))
+
+export const AmountInputButton = styled(ButtonTertiary)(({ theme }) => ({
+  flex: 1,
+  padding: theme.spacing(0.5, 1.5),
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  height: 'auto',
+  borderRadius: theme.shape.borderRadiusSecondary,
+}))

packages/widget/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,5 +1,4 @@
 import { formatUnits } from '@lifi/sdk'
-import { InputAdornment } from '@mui/material'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
@@ -9,7 +8,10 @@ import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { ButtonContainer, MaxButton } from './AmountInputAdornment.style.js'
+import {
+  AmountInputButton,
+  ButtonContainer,
+} from './AmountInputEndAdornment.style.js'
 
 export const AmountInputEndAdornment = memo(({ formType }: FormTypeProps) => {
   const { t } = useTranslation()
@@ -69,24 +71,24 @@ export const AmountInputEndAdornment = memo(({ formType }: FormTypeProps) => {
     }
   }
 
+  if (formType !== 'from' || !token) {
+    return null
+  }
+
   return (
-    <InputAdornment position="end" sx={{ paddingTop: 2 }}>
-      {formType === 'from' && token?.amount ? (
-        <ButtonContainer>
-          <MaxButton onClick={() => handlePercentage(25)} data-delay="0">
-            25%
-          </MaxButton>
-          <MaxButton onClick={() => handlePercentage(50)} data-delay="1">
-            50%
-          </MaxButton>
-          <MaxButton onClick={() => handlePercentage(75)} data-delay="2">
-            75%
-          </MaxButton>
-          <MaxButton onClick={handleMax} data-delay="3">
-            {t('button.max')}
-          </MaxButton>
-        </ButtonContainer>
-      ) : null}
-    </InputAdornment>
+    <ButtonContainer>
+      <AmountInputButton onClick={() => handlePercentage(25)}>
+        25%
+      </AmountInputButton>
+      <AmountInputButton onClick={() => handlePercentage(50)}>
+        50%
+      </AmountInputButton>
+      <AmountInputButton onClick={() => handlePercentage(75)}>
+        75%
+      </AmountInputButton>
+      <AmountInputButton onClick={handleMax}>
+        {t('button.max')}
+      </AmountInputButton>
+    </ButtonContainer>
   )
 })

packages/widget/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -13,6 +13,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   disabled,
   loading,
   route,
+  sx,
 }) => {
   const { t } = useTranslation()
   const { walletConfig } = useWidgetConfig()
@@ -62,6 +63,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       loading={loading}
       loadingPosition="center"
       fullWidth
+      sx={sx}
     >
       {getButtonText()}
     </Button>

packages/widget/src/components/BaseTransactionButton/types.ts

@@ -1,9 +1,11 @@
 import type { RouteExtended } from '@lifi/sdk'
+import type { SxProps, Theme } from '@mui/material'
 
 export interface BaseTransactionButtonProps {
   onClick?(): void
   text?: string
   disabled?: boolean
   loading?: boolean
   route?: RouteExtended
+  sx?: SxProps<Theme>
 }

packages/widget/src/components/Card/CardLabel.tsx

@@ -2,7 +2,7 @@ import { Box, styled, Typography } from '@mui/material'
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: 'secondary' | 'success' }>(({ theme }) => ({
+})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({
   borderRadius: theme.vars.shape.borderRadius,
   padding: 0,
   display: 'flex',
@@ -39,6 +39,17 @@ export const CardLabel = styled(Box, {
         }),
       },
     },
+    {
+      props: { variant: 'warning' },
+      style: {
+        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
+        ...theme.applyStyles('dark', {
+          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          color: theme.vars.palette.warning.main,
+        }),
+      },
+    },
   ],
 }))
 

packages/widget/src/components/Card/CardTitle.tsx

@@ -1,26 +1,10 @@
 import { styled, Typography } from '@mui/material'
 
-export const CardTitle = styled(Typography, {
-  shouldForwardProp: (prop) => !['required'].includes(prop as string),
-})<{ required?: boolean }>(({ theme }) => ({
+export const CardTitle = styled(Typography)(({ theme }) => ({
   fontSize: 14,
   lineHeight: 1,
   fontWeight: 700,
   padding: theme.spacing(2, 2, 0, 2),
   textAlign: 'left',
   color: theme.vars.palette.text.primary,
-  '&:after': {
-    content: 'none',
-    color: theme.vars.palette.error.main,
-  },
-  variants: [
-    {
-      props: ({ required }) => required,
-      style: {
-        '&:after': {
-          content: '" *"',
-        },
-      },
-    },
-  ],
 }))

packages/widget/src/components/Messages/WarningMessages.tsx

@@ -7,7 +7,6 @@ import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
 import { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'
 import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
-import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
 
 type WarningMessagesProps = BoxProps & {
@@ -52,8 +51,6 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
         return <AccountNotDeployedMessage {...props} />
       case 'ACCOUNT_DEPLOYED':
         return <AccountDeployedMessage {...props} />
-      case 'TO_ADDRESS_REQUIRED':
-        return <ToAddressRequiredMessage {...props} />
       default:
         return null
     }

packages/widget/src/components/Messages/useMessageQueue.ts

@@ -15,7 +15,6 @@ interface QueuedMessage {
 export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
   const {
     requiredToAddress,
-    toAddress,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,
     isLoading: isToAddressRequirementsLoading,
@@ -69,21 +68,14 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
       })
     }
 
-    if (requiredToAddress && !toAddress) {
-      queue.push({
-        id: 'TO_ADDRESS_REQUIRED',
-        priority: 6,
-      })
-    }
-
     if (
       requiredToAddress &&
       accountDeployedAtDestination &&
       !allowInteraction
     ) {
       queue.push({
         id: 'ACCOUNT_DEPLOYED',
-        priority: 7,
+        priority: 6,
       })
     }
 
@@ -95,7 +87,6 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     accountDeployedAtDestination,
     accountNotDeployedAtDestination,
     requiredToAddress,
-    toAddress,
     missingChain,
     missingAccountAddress,
     belowMinFromAmountUSD,