fix: swap console logs, closes #4438

leather-io · Oct 30, 2023 · e8fa72f · e8fa72f
1 parent dc209c2
commit e8fa72f
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 27 deletions.
diff --git a/src/app/pages/swap/components/select-asset-trigger-button.tsx b/src/app/pages/swap/components/select-asset-trigger-button.tsx
@@ -0,0 +1,30 @@
+import { useField } from 'formik';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { LeatherButton } from '@app/components/button/button';
+import { ChevronDownIcon } from '@app/components/icons/chevron-down-icon';
+
+interface SelectAssetTriggerButtonProps {
+  icon?: string;
+  name: string;
+  onChooseAsset(): void;
+  symbol: string;
+}
+export function SelectAssetTriggerButton({
+  icon,
+  name,
+  onChooseAsset,
+  symbol,
+}: SelectAssetTriggerButtonProps) {
+  const [field] = useField(name);
+
+  return (
+    <LeatherButton onClick={onChooseAsset} p="space.02" variant="ghost" {...field}>
+      <HStack>
+        {icon && <styled.img src={icon} width="32px" height="32px" alt="Swap asset" />}
+        <styled.span textStyle="label.01">{symbol}</styled.span>
+        <ChevronDownIcon />
+      </HStack>
+    </LeatherButton>
+  );
+}
diff --git a/.../swap/components/selected-asset-field.tsx → .../pages/swap/components/selected-asset.tsx b/.../swap/components/selected-asset-field.tsx → .../pages/swap/components/selected-asset.tsx
@@ -1,18 +1,12 @@
-import { Field } from 'formik';
 import { Box, HStack, styled } from 'leather-styles/jsx';
 
-interface SelectedAssetFieldProps {
+interface SelectedAssetProps {
   contentLeft: React.JSX.Element;
   contentRight: React.JSX.Element;
   name: string;
   showError?: boolean;
 }
-export function SelectedAssetField({
-  contentLeft,
-  contentRight,
-  name,
-  showError,
-}: SelectedAssetFieldProps) {
+export function SelectedAsset({ contentLeft, contentRight, name, showError }: SelectedAssetProps) {
   return (
     <styled.label
       _focusWithin={{ border: 'action-primary-default' }}
@@ -28,12 +22,10 @@ export function SelectedAssetField({
       width="100%"
     >
       <Box width="100%">
-        <Field as="div" name={name}>
-          <HStack alignItems="center" justifyContent="space-between">
-            {contentLeft}
-            {contentRight}
-          </HStack>
-        </Field>
+        <HStack alignItems="center" justifyContent="space-between">
+          {contentLeft}
+          {contentRight}
+        </HStack>
       </Box>
     </styled.label>
   );

diff --git a/src/app/pages/swap/components/swap-amount-field.tsx b/src/app/pages/swap/components/swap-amount-field.tsx
@@ -71,7 +71,10 @@ export function SwapAmountField({ amountAsFiat, isDisabled, name }: SwapAmountFi
         textStyle="heading.05"
         width="100%"
         {...field}
-        onBlur={onBlur}
+        onBlur={async e => {
+          field.onBlur(e);
+          await onBlur(e);
+        }}
       />
       {amountAsFiat ? (
         <styled.span color={showError ? 'error' : 'accent.text-subdued'} textStyle="caption.02">

diff --git a/src/app/pages/swap/components/swap-details/swap-details.tsx b/src/app/pages/swap/components/swap-details/swap-details.tsx
@@ -19,10 +19,10 @@ function RouteNames(props: { swapSubmissionData: SwapSubmissionData }) {
   return props.swapSubmissionData.router.map((route, i) => {
     const insertIcon = isDefined(props.swapSubmissionData.router[i + 1]);
     return (
-      <>
+      <HStack gap="space.01" key={route.name}>
         <styled.span>{route.name}</styled.span>
         {insertIcon && <ChevronUpIcon transform="rotate(90)" />}
-      </>
+      </HStack>
     );
   });
 }

diff --git a/src/app/pages/swap/components/swap-selected-asset.layout.tsx b/src/app/pages/swap/components/swap-selected-asset.layout.tsx
@@ -3,10 +3,10 @@ import { Box, HStack, styled } from 'leather-styles/jsx';
 import { noop } from '@shared/utils';
 
 import { LeatherButton } from '@app/components/button/button';
-import { ChevronDownIcon } from '@app/components/icons/chevron-down-icon';
 import { Tooltip } from '@app/components/tooltip';
 
-import { SelectedAssetField } from './selected-asset-field';
+import { SelectAssetTriggerButton } from './select-asset-trigger-button';
+import { SelectedAsset } from './selected-asset';
 import { SwapToggleButton } from './swap-toggle-button';
 
 function getTextColor(showError?: boolean, onClickHandler?: boolean) {
@@ -58,15 +58,14 @@ export function SwapSelectedAssetLayout({
         <styled.span textStyle="label.01">{title}</styled.span>
         {showToggle && <SwapToggleButton />}
       </HStack>
-      <SelectedAssetField
+      <SelectedAsset
         contentLeft={
-          <LeatherButton onClick={onChooseAsset} p="space.02" variant="ghost">
-            <HStack>
-              {icon && <styled.img src={icon} width="32px" height="32px" alt="Swap asset" />}
-              <styled.span textStyle="label.01">{symbol}</styled.span>
-              <ChevronDownIcon />
-            </HStack>
-          </LeatherButton>
+          <SelectAssetTriggerButton
+            icon={icon}
+            name={name}
+            onChooseAsset={onChooseAsset}
+            symbol={symbol}
+          />
         }
         contentRight={swapAmountInput}
         name={name}