[Swap] Redesign (#2420)

- [x] Refactor `Swap` / `SwapView`
- [x] Remove `{Swap|View}.styles`
- [x] Update misc. styles: `HeaderSettings`, `EditableAddress`, `AssetMenu`, `CheckButton`, `MaxBalanceButton`, `InfoIcon`, `Input`, `InputSearch`
- [x] Refactor components: `AssetInput`
- [x] Update `InputBigNumber` to handle `onKeyDownHandler`
- [x] New components: `SelectableSlipTolerance`, `AssetSelectButton`
- [x] Remove helpers:`poolAssetToAsset`, `DEFAULT_SWAP_DATA`
- [x] Add helpers: `noDataString`, `assetInList`
- [x] Update `i18n`
- [x] Update `tailwind` config: `boxShadow` (full, fulld)

src/renderer/components/deposit/add/SymDeposit.tsx

@@ -90,7 +90,7 @@ import { TxModal } from '../../modal/tx'
 import { DepositAssets } from '../../modal/tx/extra'
 import { FlatButton, ViewTxButton } from '../../uielements/button'
 import { Fees, UIFeesRD } from '../../uielements/fees'
-import * as InfoIconStyled from '../../uielements/info/InfoIcon.styles'
+import { Color as InfoIconColor } from '../../uielements/info/InfoIcon'
 import { AssetMissmatchWarning } from './AssetMissmatchWarning'
 import { AsymAssetsWarning } from './AsymAssetsWarning'
 import * as Helper from './Deposit.helper'
@@ -139,7 +139,7 @@ export type Props = {
 
 type SelectedInput = 'asset' | 'rune' | 'none'
 
-type WalletTypeTooltip = { text: string; color: InfoIconStyled.Color }
+type WalletTypeTooltip = { text: string; color: InfoIconColor }
 
 export const SymDeposit: React.FC<Props> = (props) => {
   const {

src/renderer/components/header/settings/HeaderSettings.tsx

@@ -17,10 +17,10 @@ export const HeaderSettings: React.FC<Props> = (props): JSX.Element => {
   const intl = useIntl()
 
   return (
-    <HeaderIconWrapper onClick={onPress}>
+    <HeaderIconWrapper className="group" onClick={onPress}>
       {!isDesktopView && <Styled.Label>{intl.formatMessage({ id: 'common.settings' })} </Styled.Label>}
       <Tooltip title={intl.formatMessage({ id: 'common.settings' })}>
-        <Cog8ToothIcon className="h-[24px] w-[24px] text-text2 dark:text-text2d" />
+        <Cog8ToothIcon className="ease h-[24px] w-[24px] text-text2 group-hover:rotate-180 dark:text-text2d" />
       </Tooltip>
     </HeaderIconWrapper>
   )

src/renderer/components/swap/EditableAddress.tsx

@@ -11,7 +11,8 @@ import { Network } from '../../../shared/api/types'
 import { truncateAddress } from '../../helpers/addressHelper'
 import { AddressValidationAsync } from '../../services/clients'
 import { InnerForm } from '../shared/form'
-import { Input } from '../uielements/input'
+import { BaseButton } from '../uielements/button'
+import { Input } from '../uielements/input/Input'
 import { CopyLabel } from '../uielements/label'
 
 export type EditableAddressProps = {
@@ -91,21 +92,28 @@ export const EditableAddress = ({
 
   const renderAddress = useMemo(() => {
     return (
-      <div className="flex items-center overflow-hidden font-main text-[16px] normal-case text-text1 dark:text-text1d">
+      <div className="flex items-center overflow-hidden font-main text-[16px] normal-case text-text2 dark:text-text2d">
         <Tooltip overlayStyle={{ maxWidth: '100%', whiteSpace: 'nowrap' }} title={address}>
-          {truncatedAddress}
+          <BaseButton
+            className="!px-0 normal-case !text-text2 dark:!text-text2d"
+            onClick={() => {
+              setEditableAddress(O.fromNullable(address))
+              onChangeEditableMode(true)
+            }}>
+            {truncatedAddress}
+          </BaseButton>
         </Tooltip>
         <div className="flex flex-row items-center">
           <PencilSquareIcon
-            className="ml-[5px] h-[20px] w-[20px] cursor-pointer text-turquoise"
+            className="ml-[5px] h-[20px] w-[20px] cursor-pointer text-gray2 dark:text-gray2d"
             onClick={() => {
               setEditableAddress(O.fromNullable(address))
               onChangeEditableMode(true)
             }}
           />
-          <CopyLabel className="text-turquoise" textToCopy={address} />
+          <CopyLabel className="text-gray2 dark:text-gray2d" textToCopy={address} />
           <ArrowTopRightOnSquareIcon
-            className="ml-[5px] h-[20px] w-[20px] cursor-pointer text-turquoise"
+            className="ml-[5px] h-[20px] w-[20px] cursor-pointer text-gray2 dark:text-gray2d"
             onClick={() => onClickOpenAddress(address)}
           />
         </div>
@@ -126,14 +134,17 @@ export const EditableAddress = ({
             className="!mb-0 w-full"
             rules={[{ required: true, validator: validateAddress }]}
             name={RECIPIENT_FIELD}>
-            <Input className="!text-[16px]" color="primary" onKeyUp={inputOnKeyUpHandler} />
+            <Input className="!text-[16px] normal-case" color="primary" onKeyUp={inputOnKeyUpHandler} />
           </Form.Item>
 
           <CheckCircleIcon
-            className="ml-[5px] h-[24px] w-[24px] cursor-pointer text-turquoise"
+            className="ml-[5px] h-[30px] w-[30px] cursor-pointer text-turquoise"
             onClick={confirmEditHandler}
           />
-          <XCircleIcon className="ml-[5px] h-[24px] w-[24px] cursor-pointer text-error0" onClick={cancelEditHandler} />
+          <XCircleIcon
+            className="ml-[5px] h-[30px] w-[30px] cursor-pointer text-gray2 dark:text-gray2d"
+            onClick={cancelEditHandler}
+          />
         </InnerForm>
       )
     },

src/renderer/components/swap/SelectableSlipTolerance.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react'
+
+import { Popover } from '@headlessui/react'
+import { Cog8ToothIcon } from '@heroicons/react/20/solid'
+import * as A from 'fp-ts/lib/Array'
+import * as FP from 'fp-ts/lib/function'
+
+import { ChangeSlipToleranceHandler } from '../../services/app/types'
+import { SlipTolerance } from '../../types/asgardex'
+import { BaseButton } from '../uielements/button'
+
+export const SLIP_PERCENTAGES: SlipTolerance[] = [0.5, 1, 3, 5, 10]
+export const SLIP_TOLERANCE_KEY = 'asgdx-slip-tolerance'
+
+export type Props = {
+  value: SlipTolerance
+  onChange: ChangeSlipToleranceHandler
+}
+
+export const SelectableSlipTolerance: React.FC<Props> = (props): JSX.Element => {
+  const { onChange, value } = props
+
+  const changeSlipToleranceHandler = useCallback(
+    (slipTolerance: SlipTolerance) => {
+      // TODO (@veado) Move storage to services/app, there is already a `changeSlipTolerance` state
+      localStorage.setItem(SLIP_TOLERANCE_KEY, slipTolerance.toString())
+      onChange(slipTolerance)
+    },
+    [onChange]
+  )
+
+  return (
+    <Popover className="relative">
+      <Popover.Button className="group flex items-center">
+        {value.toString()} %
+        <Cog8ToothIcon className="ease ml-5px h-[15px] w-[15px] text-gray2 group-hover:rotate-180 dark:text-gray2d" />
+      </Popover.Button>
+      <Popover.Panel className="absolute z-10 translate-y-[-100%] translate-x-[-50%] bg-bg0 shadow dark:bg-bg0d ">
+        {({ close }) => (
+          <div>
+            {FP.pipe(
+              SLIP_PERCENTAGES,
+              A.map((slip) => (
+                <BaseButton
+                  font={slip === value ? 'bold' : 'normal'}
+                  className={`w-full hover:bg-bg2 dark:hover:bg-bg2d `}
+                  key={slip}
+                  onClick={() => {
+                    changeSlipToleranceHandler(slip)
+                    close()
+                  }}>
+                  {slip}%
+                </BaseButton>
+              ))
+            )}
+          </div>
+        )}
+      </Popover.Panel>
+    </Popover>
+  )
+}