WIP: Swap details

thorchain · Oct 26, 2022 · cffbf36 · cffbf36
1 parent 03def52
commit cffbf36
Show file tree

Hide file tree

Showing 16 changed files with 443 additions and 130 deletions.
diff --git a/src/renderer/components/deposit/add/SymDeposit.tsx b/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 {

diff --git a/src/renderer/components/swap/EditableAddress.tsx b/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">
           <PencilAltIcon
-            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} />
           <ExternalLinkIcon
-            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>
       )
     },

diff --git a/src/renderer/components/swap/Swap.stories.tsx b/src/renderer/components/swap/Swap.stories.tsx
@@ -10,23 +10,25 @@ import {
   assetToBase,
   assetToString,
   baseAmount,
+  bn,
   BNBChain
 } from '@xchainjs/xchain-util'
 import * as O from 'fp-ts/lib/Option'
 import * as Rx from 'rxjs'
 import * as RxOp from 'rxjs/operators'
 
 import { mockValidatePassword$ } from '../../../shared/mock/wallet'
+import { ONE_BN } from '../../const'
 import { THORCHAIN_DECIMAL } from '../../helpers/assetHelper'
 import { RUNE_PRICE_POOL } from '../../helpers/poolHelper'
 import { INITIAL_SWAP_STATE } from '../../services/chain/const'
 import { SwapState } from '../../services/chain/types'
 import { DEFAULT_MIMIR_HALT } from '../../services/thorchain/const'
-import { AssetWithDecimal } from '../../types/asgardex'
 import { Swap as Component, SwapProps } from './Swap'
+import { SwapAsset } from './Swap.types'
 
-const sourceAsset: AssetWithDecimal = { asset: AssetRuneNative, decimal: THORCHAIN_DECIMAL }
-const targetAsset: AssetWithDecimal = { asset: AssetBTC, decimal: BTC_DECIMAL }
+const sourceAsset: SwapAsset = { asset: AssetRuneNative, decimal: THORCHAIN_DECIMAL, price: ONE_BN }
+const targetAsset: SwapAsset = { asset: AssetBTC, decimal: BTC_DECIMAL, price: bn('56851.67420275761') }
 
 /* Mock all (default) data needed by `Swap` commponent */
 const defaultProps: SwapProps = {