Fix DCA and OTC minor issues

apps/main/src/components/AssetSelect/AssetSelect.tsx

@@ -47,7 +47,8 @@ export const AssetSelect = ({
   const displayValue = props.displayValue ?? displayValue_
   const displayValueLoading = props.displayValueLoading ?? displayValueLoading_
 
-  const { getTransferableBalance } = useAccountBalances()
+  const { getTransferableBalance, isBalanceLoading } = useAccountBalances()
+
   const maxBalance = ((): string | undefined => {
     if (providedMaxBalance) {
       return providedMaxBalance
@@ -74,6 +75,7 @@ export const AssetSelect = ({
         }
         symbol={selectedAsset?.symbol}
         modalDisabled={!setSelectedAsset}
+        loading={isBalanceLoading}
         displayValue={displayValue}
         displayValueLoading={displayValueLoading}
         maxBalance={maxBalance}

apps/main/src/components/AssetSelectModal/AssetSelectModal.utils.ts

@@ -19,7 +19,9 @@ export const useAssetSelectModalAssets = ({
   search,
   selectedAssetId,
   ignoreAssetIds,
-  ...sortOptions
+  tickerOrder,
+  lowPriorityAssetIds,
+  highPriorityAssetIds,
 }: {
   assets: TAssetData[]
   ignoreAssetIds?: string[]
@@ -45,33 +47,54 @@ export const useAssetSelectModalAssets = ({
   const { getAssetPrice, isLoading: isPriceLoading } =
     useAssetsPrice(assetsBalanceIds)
 
-  if (!account || !assets.length) {
-    return {
-      sortedAssets: filteredAssets,
-      isLoading: false,
-    }
-  }
-
-  const assetsWithBalances = filteredAssets.map((asset) => {
-    const balance = scaleHuman(getTransferableBalance(asset.id), asset.decimals)
+  const invalidState = !account || !assets.length
 
-    const { price, isValid } = getAssetPrice(asset.id)
-    const balanceDisplay = isValid ? Big(price).times(balance).toString() : "0"
+  const isLoading = isPriceLoading || isBalanceLoading
 
-    return {
-      ...asset,
-      balance,
-      balanceDisplay,
+  const sortedAssets = useMemo(() => {
+    if (invalidState || isLoading) {
+      return filteredAssets
     }
-  })
 
-  const sortedAssets = sortAssets(assetsWithBalances, "balanceDisplay", {
-    firstAssetId: selectedAssetId,
+    const assetsWithBalances = filteredAssets.map((asset) => {
+      const balance = scaleHuman(
+        getTransferableBalance(asset.id),
+        asset.decimals,
+      )
+
+      const { price, isValid } = getAssetPrice(asset.id)
+      const balanceDisplay = isValid
+        ? Big(price).times(balance).toString()
+        : "0"
+
+      return {
+        ...asset,
+        balance,
+        balanceDisplay,
+      }
+    })
+
+    return sortAssets(assetsWithBalances, "balanceDisplay", {
+      firstAssetId: selectedAssetId,
+      search,
+      tickerOrder,
+      lowPriorityAssetIds,
+      highPriorityAssetIds,
+    })
+  }, [
+    invalidState,
+    filteredAssets,
+    getAssetPrice,
+    getTransferableBalance,
+    highPriorityAssetIds,
+    isLoading,
+    lowPriorityAssetIds,
+    selectedAssetId,
     search,
-    ...sortOptions,
-  })
+    tickerOrder,
+  ])
 
-  return { sortedAssets, isLoading: isPriceLoading || isBalanceLoading }
+  return { sortedAssets, isLoading: invalidState ? false : isLoading }
 }
 
 export const useFilteredSearchAssets = <T extends TAssetData>(
@@ -85,6 +108,7 @@ export const useFilteredSearchAssets = <T extends TAssetData>(
     }
 
     const ignoredAssetIdSet = new Set(ignoreAssetIds ?? [])
+    const searchLower = search.length ? search.toLowerCase() : ""
 
     return assets.filter((asset) => {
       if (ignoredAssetIdSet.has(asset.id)) {
@@ -93,8 +117,8 @@ export const useFilteredSearchAssets = <T extends TAssetData>(
 
       if (search.length) {
         return (
-          asset.name.toLowerCase().includes(search.toLowerCase()) ||
-          asset.symbol.toLowerCase().includes(search.toLowerCase())
+          asset.name.toLowerCase().includes(searchLower) ||
+          asset.symbol.toLowerCase().includes(searchLower)
         )
       }
 

apps/main/src/modules/layout/components/LayoutSkeleton/AppSkeleton.tsx

@@ -1,4 +1,5 @@
 import {
+  AssetButton,
   Box,
   Flex,
   LoadingButton,
@@ -8,10 +9,11 @@ import {
   Stack,
   Text,
 } from "@galacticcouncil/ui/components"
+import { pxToRem } from "@galacticcouncil/ui/utils"
 
 const AssetSectionSkeleton = () => {
   return (
-    <Stack gap="s" py="m" px="l">
+    <Stack gap="m" py="l" px="xl">
       <Flex justify="space-between">
         <Text fs="p6">
           <Skeleton width={100} />
@@ -21,13 +23,14 @@ const AssetSectionSkeleton = () => {
         </Text>
       </Flex>
       <Flex justify="space-between" align="center">
-        <Flex gap="m" align="center">
-          <Skeleton width={42} height={42} circle />
-          <Skeleton width={70} height={30} />
-        </Flex>
-        <Flex gap="base" direction="column" align="end">
-          <Skeleton width={40} height={30} />
-          <Skeleton width={50} height={14} />
+        <AssetButton loading error={false} />
+        <Flex gap="s" direction="column" align="end">
+          <div sx={{ height: pxToRem(26), lineHeight: 1 }}>
+            <Skeleton width={pxToRem(40)} height={pxToRem(26)} />
+          </div>
+          <div sx={{ height: pxToRem(12), lineHeight: 1 }}>
+            <Skeleton width={pxToRem(50)} height={pxToRem(12)} />
+          </div>
         </Flex>
       </Flex>
     </Stack>
@@ -36,11 +39,11 @@ const AssetSectionSkeleton = () => {
 
 const SwitcherSkeleton = () => {
   return (
-    <Flex align="center" justify="space-between" gap="s">
-      <Separator sx={{ flexShrink: 0, width: "m" }} />
+    <Flex align="center" justify="space-between">
+      <Separator sx={{ flexShrink: 0, width: 32 }} />
       <Skeleton
-        width={30}
-        height={30}
+        width={34}
+        height={34}
         circle
         sx={{ display: "inline-flex", flexShrink: 0 }}
       />

apps/main/src/modules/trade/orders/DcaOrderDetailsModal.tsx

@@ -66,9 +66,9 @@ export const DcaOrderDetailsModal = ({ details, onTerminate }: Props) => {
               {t("number", {
                 value: details.isOpenBudget
                   ? details.fromAmountExecuted
-                  : details.status === DcaScheduleStatus.Created
-                    ? details.fromAmountRemaining
-                    : "0",
+                  : details.status === DcaScheduleStatus.Completed
+                    ? "0"
+                    : (details.fromAmountRemaining ?? details.fromAmountBudget),
               })}
               {!details.isOpenBudget && (
                 <>

apps/main/src/modules/trade/orders/columns/SwapPrice.tsx

@@ -13,7 +13,14 @@ type Props = {
 }
 
 export const SwapPrice: FC<Props> = ({ from, to, price }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation("common")
+
+  if (!price)
+    return (
+      <Text fw={500} fs="p6" lh="s" color={getToken("text.high")}>
+        -
+      </Text>
+    )
 
   return (
     <Flex align="center" gap="s" justify="center">

apps/main/src/modules/trade/otc/place-order/PlaceOrderModalContent.tsx

@@ -449,7 +449,6 @@ export const PlaceOrderModalContent: FC<Props> = ({ onClose }) => {
                 )}
               </>
             )}
-            <Separator />
           </ModalBody>
           <ModalFooter>
             <Button

apps/main/src/modules/trade/otc/place-order/PlaceOrderPrice.tsx

@@ -1,7 +1,8 @@
-import { AssetIcon } from "@galacticcouncil/ui/assets/icons"
+import { ArrowLeftRight } from "@galacticcouncil/ui/assets/icons"
 import {
   ButtonIcon,
   Flex,
+  Icon,
   NumberInput,
   Text,
 } from "@galacticcouncil/ui/components"
@@ -79,6 +80,11 @@ export const PlaceOrderPrice: FC<Props> = ({
       <Flex justify="space-between" align="center">
         <Flex py="s" pl="s" gap="s" align="center">
           <ButtonIcon
+            sx={{
+              border: "1px solid",
+              borderColor: getToken("buttons.secondary.low.borderRest"),
+            }}
+            size="small"
             onClick={() =>
               viewField.onChange(
                 (isOfferView
@@ -87,7 +93,11 @@ export const PlaceOrderPrice: FC<Props> = ({
               )
             }
           >
-            <AssetIcon />
+            <Icon
+              component={ArrowLeftRight}
+              size="s"
+              color={getToken("icons.onContainer")}
+            />
           </ButtonIcon>
           <Text fw={600} fs="p3" lh="s" color={getToken("text.high")}>
             {isOfferView ? buyAsset.symbol : offerAsset.symbol}

apps/main/src/states/account.ts

@@ -1,5 +1,6 @@
 import { Balance as SdkBalance } from "@galacticcouncil/sdk-next"
 import { useStableArray } from "@galacticcouncil/utils"
+import { useAccount } from "@galacticcouncil/web3-connect"
 import { produce } from "immer"
 import { useCallback, useMemo } from "react"
 import { pick } from "remeda"
@@ -138,6 +139,7 @@ export const useAccountData = create<
 }))
 
 export const useAccountBalances = () => {
+  const { account } = useAccount()
   const { balances, isBalanceLoading } = useAccountData(
     useShallow(pick(["balances", "isBalanceLoading"])),
   )
@@ -159,7 +161,7 @@ export const useAccountBalances = () => {
 
   return {
     balances,
-    isBalanceLoading,
+    isBalanceLoading: account ? isBalanceLoading : false,
     getBalance,
     getTransferableBalance,
     isBalanceLoaded,

packages/ui/src/assets/icons/index.ts

@@ -1,5 +1,4 @@
 export { default as ArrowRightLong } from "./ArrowRightLong.svg?react"
-export { default as AssetIcon } from "./AssetIcon.svg?react"
 export { default as CaretDown } from "./CaretDown.svg?react"
 export { default as CircleAlert } from "./CircleAlert.svg?react"
 export { default as CircleCheck } from "./CircleCheck.svg?react"

packages/ui/src/components/AssetInput/AssetInput.tsx

@@ -5,7 +5,7 @@ import { ReactNode } from "react"
 
 import { Flex, Icon, MicroButton, Skeleton, Text } from "@/components"
 import { FormError } from "@/components/FormError"
-import { getToken } from "@/utils"
+import { getToken, pxToRem } from "@/utils"
 
 import {
   SAssetButton,
@@ -75,7 +75,8 @@ export const AssetInput = ({
     <Flex
       direction="column"
       gap="m"
-      sx={{ position: "relative", py: 20, overflow: "hidden" }}
+      py="l"
+      sx={{ position: "relative", overflow: "hidden" }}
       className={className}
     >
       <Flex align="center" gap="s" justify="space-between">
@@ -222,20 +223,9 @@ export const AssetButton = ({
 }) => {
   if (loading)
     return (
-      <Flex
-        direction="column"
-        height="2.375rem"
-        gap="xs"
-        justify="center"
-        className={className}
-      >
-        <div sx={{ height: "xs", lineHeight: 1 }}>
-          <Skeleton sx={{ width: "m", height: "xs" }} />
-        </div>
-        <div sx={{ height: "xs", lineHeight: 1 }}>
-          <Skeleton sx={{ width: "100%", minWidth: "xl", height: "xs" }} />
-        </div>
-      </Flex>
+      <div sx={{ height: pxToRem(34), lineHeight: 1 }}>
+        <Skeleton sx={{ width: pxToRem(80), height: pxToRem(34) }} />
+      </div>
     )
 
   if (symbol && icon)