feat(swap): input component

packages/yoroi-extension/app/components/swap/PriceInput.js

@@ -0,0 +1,75 @@
+// @flow
+import type { Node } from 'react';
+import { Box, Typography } from '@mui/material';
+import type { AssetAmount } from './types'
+import { BigNumber } from 'bignumber.js';
+
+type Props = {|
+  label: string,
+  baseCurrency: AssetAmount,
+  quoteCurrency: AssetAmount,
+  readonly?: boolean,
+|};
+
+export default function PriceInput({
+  label,
+  baseCurrency,
+  quoteCurrency,
+  readonly = false,
+}: Props): Node {
+  return (
+    <Box
+      component="fieldset"
+      sx={{
+        border: '1px solid',
+        borderColor: 'grayscale.400',
+        borderRadius: '8px',
+        p: '16px',
+        display: 'grid',
+        gridTemplateColumns: '1fr auto',
+        justifyContent: 'start',
+        position: 'relative',
+        bgcolor: readonly ? 'grayscale.50' : 'common.white',
+        columnGap: '6px',
+        rowGap: '8px',
+      }}
+    >
+      <Box
+        component="legend"
+        sx={{
+          top: '-9px',
+          left: '16px',
+          position: 'absolute',
+          px: '4px',
+          bgcolor: 'common.white',
+        }}
+      >
+        {label}
+      </Box>
+
+      <Typography
+        sx={{
+          appearance: 'none',
+          border: '0',
+          outline: 'none',
+          '::placeholder': { color: 'grayscale.600' },
+        }}
+        component="input"
+        type="text"
+        variant="body1"
+        color="#000"
+        placeholder="0"
+        bgcolor={readonly ? 'grayscale.50' : 'common.white'}
+        readOnly={readonly}
+        value={(new BigNumber(baseCurrency.amount)).div(quoteCurrency.amount).toString()}
+      />
+      <Box sx={{ justifySelf: 'end' }}>
+        <Box height="100%" width="min-content" display="flex" alignItems="center">
+          <Box>{baseCurrency.ticker || '-'}</Box>
+          <Box>/</Box>
+          <Box>{quoteCurrency.ticker || '-'}</Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

packages/yoroi-extension/app/components/swap/SwapInput.js

@@ -0,0 +1,150 @@
+// @flow
+import type { Node } from 'react';
+import { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import { ReactComponent as ChevronDownIcon } from '../../assets/images/revamp/icons/chevron-down.inline.svg';
+import { ReactComponent as DefaultTokenImage } from '../../assets/images/revamp/token-default.inline.svg';
+import type { AssetAmount } from './types';
+
+type Props = {|
+  label: string,
+  asset: AssetAmount,
+  onAssetSelect: function,
+  handleAmountChange: function,
+  showMax?: boolean,
+  image?: Node | null,
+  isFrom?: boolean,
+|};
+
+export default function SwapInput({
+  label,
+  asset,
+  isFrom = false,
+  showMax = false,
+  image = null,
+  onAssetSelect,
+  handleAmountChange,
+}: Props): Node {
+  const { amount, walletAmount, ticker } = asset;
+  const [error, setError] = useState('');
+  const [inputValue, setInputValue] = useState(amount);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleChange = e => {
+    if (e.target.value === '') {
+      setError('');
+      setInputValue('');
+      return;
+    }
+
+    const val = Number(e.target.value);
+    const checkAmount = isFrom ? walletAmount : Infinity;
+
+    if (val !== 0 && val > checkAmount) {
+      setError('Not enough balance');
+    } else if (Number.isNaN(val)) {
+      setError('Invalid amount');
+    } else {
+      handleAmountChange(val);
+    }
+
+    setInputValue(e.target.value);
+  };
+
+  const isFocusedColor = isFocused ? 'black' : 'gray.400';
+
+  return (
+    <Box>
+      <Box
+        component="fieldset"
+        sx={{
+          borderStyle: 'solid',
+          borderWidth: isFocused || error ? '2px' : '1px',
+          borderColor: error ? 'magenta.500' : isFocusedColor,
+          borderRadius: '8px',
+          p: '16px',
+          pr: '8px',
+          display: 'grid',
+          gridTemplateColumns: '1fr auto',
+          gridTemplateRows: '1fr 1fr',
+          justifyContent: 'start',
+          position: 'relative',
+          bgcolor: 'common.white',
+          columnGap: '6px',
+          rowGap: '8px',
+        }}
+      >
+        <Box
+          component="legend"
+          sx={{
+            top: '-9px',
+            left: '16px',
+            position: 'absolute',
+            px: '4px',
+            bgcolor: 'common.white',
+            color: error ? 'magenta.500' : 'black',
+          }}
+        >
+          {label}
+        </Box>
+
+        <Typography
+          sx={{
+            appearance: 'none',
+            border: '0',
+            outline: 'none',
+            '::placeholder': { color: 'grayscale.600' },
+          }}
+          component="input"
+          type="text"
+          variant="body1"
+          color="grayscale.max"
+          placeholder="0"
+          onChange={handleChange}
+          value={inputValue}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
+        <Box sx={{ justifySelf: 'end', cursor: 'pointer' }} onClick={onAssetSelect}>
+          <Box height="100%" width="min-content" display="flex" gap="8px" alignItems="center">
+            <Box width="24px" height="24px" sx={{ '& > svg': { width: '100%', height: '100%' } }}>
+              {ticker ? image || <DefaultTokenImage /> : <DefaultTokenImage />}
+            </Box>
+            <Box width="max-content">{ticker || 'Select asset'}</Box>
+            <Box display="inline-flex">
+              <ChevronDownIcon />
+            </Box>
+          </Box>
+        </Box>
+        {!error && showMax ? (
+          <Box>
+            <Typography
+              component="button"
+              variant="caption"
+              fontWeight={500}
+              sx={{ p: '4px 8px', bgcolor: 'grayscale.50', borderRadius: '8px' }}
+              onClick={() => {
+                setInputValue(walletAmount);
+                handleAmountChange(walletAmount);
+              }}
+            >
+              MAX
+            </Typography>
+          </Box>
+        ) : (
+          <Box minHeight="31px" />
+        )}
+        <Box sx={{ justifySelf: 'end', alignSelf: 'end' }}>
+          <Typography variant="caption" color="grayscale.600">
+            Current balance: {walletAmount || 0} {ticker}
+          </Typography>
+        </Box>
+      </Box>
+      {error && (
+        <Typography pt="4px" variant="caption" color="magenta.500">
+          {error}
+        </Typography>
+      )}
+    </Box>
+  );
+}

packages/yoroi-extension/app/components/swap/types.js

@@ -0,0 +1,7 @@
+//@flow
+
+export type AssetAmount = {|
+  ticker: string,
+  amount: string,
+  walletAmount: number,
+|};

packages/yoroi-extension/app/containers/swap/asset-swap/SwapForm.js

@@ -0,0 +1,116 @@
+// @flow
+import type { Node } from 'react';
+import { useState } from 'react';
+import { Box, Button, Typography } from '@mui/material';
+import { ReactComponent as SwitchIcon } from '../../../assets/images/revamp/icons/switch.inline.svg';
+import { ReactComponent as RefreshIcon } from '../../../assets/images/revamp/icons/refresh.inline.svg';
+import { ReactComponent as AdaTokenImage } from './img.inline.svg';
+import { ReactComponent as UsdaTokenImage } from './usda.inline.svg';
+import SwapInput from '../../../components/swap/SwapInput';
+import PriceInput from '../../../components/swap/PriceInput';
+
+const defaultFromAsset = {
+  amount: '',
+  ticker: 'TADA',
+  walletAmount: 212,
+};
+const defaultToAsset = {
+  amount: '',
+  ticker: '',
+  walletAmount: 0,
+};
+
+export default function SwapForm(): Node {
+  const [isMarketOrder, setIsMarketOrder] = useState(true);
+  const [fromAsset, setFromAsset] = useState(defaultFromAsset);
+  const [toAsset, setToAsset] = useState(defaultToAsset);
+
+  const handleSwitchSelectedAssets = () => {
+    setFromAsset(toAsset);
+    setToAsset(fromAsset);
+  };
+
+  const handleAmountChange = (amount, type) => {
+    const func = type === 'from' ? setFromAsset : setToAsset;
+    func(p => ({ ...p, amount }));
+  };
+
+  const handleResetForm = () => {
+    setFromAsset(defaultFromAsset);
+    setToAsset(defaultToAsset);
+  };
+
+  return (
+    <Box width="100%" mx="auto" maxWidth="506px" display="flex" flexDirection="column" gap="16px">
+      <Box display="flex" alignItems="center" justifyContent="space-between" mb="16px">
+        <Box sx={{ cursor: 'pointer' }} display="flex" alignItems="center">
+          <Box
+            onClick={() => setIsMarketOrder(true)}
+            p="8px"
+            borderRadius="8px"
+            bgcolor={isMarketOrder ? 'grayscale.200' : ''}
+          >
+            <Typography variant="body1" fontWeight={500}>
+              Market
+            </Typography>
+          </Box>
+          <Box
+            onClick={() => setIsMarketOrder(false)}
+            p="8px"
+            borderRadius="8px"
+            bgcolor={!isMarketOrder ? 'grayscale.200' : ''}
+          >
+            <Typography variant="body1" fontWeight={500}>
+              Limit
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ cursor: 'pointer' }}>
+          <RefreshIcon />
+        </Box>
+      </Box>
+
+      {/* From Field */}
+      <SwapInput
+        label="Swap from"
+        image={fromAsset.ticker.includes('ADA') ? <AdaTokenImage /> : <UsdaTokenImage />}
+        asset={fromAsset}
+        onAssetSelect={() => null}
+        handleAmountChange={amount => handleAmountChange(amount, 'from')}
+        showMax
+        isFrom
+      />
+
+      {/* Clear and switch */}
+      <Box display="flex" alignItems="center" justifyContent="space-between">
+        <Box sx={{ cursor: 'pointer', color: 'primary.500' }} onClick={handleSwitchSelectedAssets}>
+          <SwitchIcon />
+        </Box>
+        <Box>
+          <Button onClick={handleResetForm} variant="tertiary" color="primary">
+            Clear
+          </Button>
+        </Box>
+      </Box>
+
+      {/* To Field */}
+      <SwapInput
+        label="Swap to"
+        image={toAsset.ticker.includes('ADA') ? <AdaTokenImage /> : <UsdaTokenImage />}
+        asset={toAsset}
+        onAssetSelect={() => null}
+        handleAmountChange={amount => handleAmountChange(amount, 'to')}
+      />
+
+      {/* Price between assets */}
+      <Box mt="16px">
+        <PriceInput
+          baseCurrency={fromAsset}
+          quoteCurrency={toAsset}
+          readonly={isMarketOrder}
+          label="Market price"
+        />
+      </Box>
+    </Box>
+  );
+}