From fd218cc82ef8d63ebe153dc07031c11073eb079f Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 6 Dec 2023 13:51:57 +0200
Subject: [PATCH 01/18] Add transfer page

---
 src/components/main/Main.module.sass          |  10 +-
 src/components/main/TransferPage.tsx          |  36 +++++
 src/components/transfer/SuccessContent.tsx    | 100 ++++++++++++++
 .../transfer/TokenSelector.module.sass        |  23 ++++
 src/components/transfer/TransferForm.tsx      |   2 +-
 src/components/transfer/TransferModal.tsx     |  88 +-----------
 .../transfer/TransferPageLayout.tsx           | 125 ++++++++++++++++++
 src/pages/send/[transferType].tsx             |  19 +++
 8 files changed, 314 insertions(+), 89 deletions(-)
 create mode 100644 src/components/main/TransferPage.tsx
 create mode 100644 src/components/transfer/SuccessContent.tsx
 create mode 100644 src/components/transfer/TransferPageLayout.tsx
 create mode 100644 src/pages/send/[transferType].tsx

diff --git a/src/components/main/Main.module.sass b/src/components/main/Main.module.sass
index 1e42a00d..a4070f39 100644
--- a/src/components/main/Main.module.sass
+++ b/src/components/main/Main.module.sass
@@ -4,6 +4,14 @@
   \:global .DfSectionOuter
     max-width: calc(1088px + #{$space_normal} * 2) !important
 
+.TransferPage
+  \:global .DfSectionOuter
+    max-width: 632px !important
+    height: 100%
+
+  \:global .DfSection
+    height: 100%
+
 .WarningMessage
   display: flex
   background: #fff
@@ -27,4 +35,4 @@
 @media (max-width: 767px)
   .CreatorStakingSection
     \:global .DfSection
-      margin-top: 0 !important
\ No newline at end of file
+      margin-top: 0 !important
diff --git a/src/components/main/TransferPage.tsx b/src/components/main/TransferPage.tsx
new file mode 100644
index 00000000..695d1f2a
--- /dev/null
+++ b/src/components/main/TransferPage.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { NextPage } from 'next'
+import TransferPageLayout from '../transfer/TransferPageLayout'
+import { PageContent } from '../utils/PageWrapper'
+import clsx from 'clsx'
+import Footer from '../footer/Footer'
+import styles from './Main.module.sass'
+
+type TransferPageProps = {
+  transferType?: string
+  asset?: string
+}
+
+const TransferPage: NextPage<TransferPageProps> = (props) => {
+  const { transferType, asset } = props
+
+  console.log(asset)
+
+  return (
+    <>
+      <div className={clsx('layout-wrapper', styles.TransferPage)}>
+        <PageContent>
+          <TransferPageLayout
+            transferType={
+              transferType === 'cross' ? 'cross-chain' : 'same-chain'
+            }
+            defaultSelectedToken={{ token: asset || 'DOT' }}
+          />
+        </PageContent>
+      </div>
+      <Footer />
+    </>
+  )
+}
+
+export default TransferPage
diff --git a/src/components/transfer/SuccessContent.tsx b/src/components/transfer/SuccessContent.tsx
new file mode 100644
index 00000000..c49de42e
--- /dev/null
+++ b/src/components/transfer/SuccessContent.tsx
@@ -0,0 +1,100 @@
+import { toShortMoney } from '@subsocial/utils'
+import { MutedSpan } from '../utils/MutedText'
+import { DfCardSideBySideContent, DfCardSideBySideContentProps } from '../utils/DfCard'
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { ExtendedTransferFormData } from './TransferForm'
+import { useIsMyConnectedAddress } from '../providers/MyExtensionAccountsContext'
+import { useTokenAmountInUsd } from '@/rtk/features/prices/pricesHooks'
+import { useRef } from 'react'
+import clsx from 'clsx'
+import { toShortAddress } from '../utils'
+
+function SuccessContent ({
+  data,
+  closeModal,
+}: {
+  data: ExtendedTransferFormData | undefined
+  closeModal?: (e: any) => void
+}) {
+  const { t } = useTranslation()
+  const isSendingToSelf = useIsMyConnectedAddress(data?.recipient ?? '')
+  const tokenAmountInUsd = useTokenAmountInUsd(
+    data?.token ?? '',
+    parseFloat(data?.amount || '0')
+  )
+  const cacheInvalidationTime = useRef(Date.now())
+
+  const cardClassName = clsx('DfBgColor')
+
+  if (!data) return null
+  const { amount, recipient, sourceChainName, token, destChainName } = data
+
+  const firstCardContent: DfCardSideBySideContentProps['content'] = [
+    {
+      label: t('transfer.recipient'),
+      value: isSendingToSelf
+        ? t('transfer.yourAccount')
+        : toShortAddress(recipient) ?? '',
+    },
+  ]
+  if (!destChainName) {
+    firstCardContent.push({
+      label: t('transfer.source'),
+      value: sourceChainName ?? '',
+    })
+  }
+  const secondCardContent: DfCardSideBySideContentProps['content'] = [
+    { label: t('transfer.source'), value: sourceChainName ?? '' },
+    { label: t('transfer.dest'), value: destChainName ?? '' },
+  ]
+
+  return (
+    <div className='position-relative'>
+      <div
+        className='position-absolute inset-0 w-100 h-100'
+        style={{
+          zIndex: 1,
+          transform: 'translateY(-70%)',
+          // date is added to make the gif animation runs every time
+          backgroundImage: `url(/images/confetti.gif?d=${cacheInvalidationTime.current})`,
+          backgroundSize: 'cover',
+          pointerEvents: 'none',
+        }}
+      />
+      <div className='d-flex flex-column align-items-stretch GapNormal position-relative'>
+        <div className='d-flex flex-column align-items-center bs-mb-2'>
+          <span className='FontBig font-weight-semibold'>
+            {amount} {token}
+          </span>
+          {tokenAmountInUsd ? (
+            <MutedSpan>${toShortMoney({ num: tokenAmountInUsd })}</MutedSpan>
+          ) : null}
+        </div>
+        <DfCardSideBySideContent
+          noShadow
+          className={cardClassName}
+          content={firstCardContent}
+        />
+        {destChainName && (
+          <DfCardSideBySideContent
+            noShadow
+            className={cardClassName}
+            content={secondCardContent}
+          />
+        )}
+        <Button
+          onClick={closeModal}
+          type='primary'
+          block
+          size='large'
+          className='bs-mt-2'
+        >
+          {t('buttons.gotIt')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default SuccessContent
\ No newline at end of file
diff --git a/src/components/transfer/TokenSelector.module.sass b/src/components/transfer/TokenSelector.module.sass
index 968fce95..ef8312c6 100644
--- a/src/components/transfer/TokenSelector.module.sass
+++ b/src/components/transfer/TokenSelector.module.sass
@@ -1,3 +1,5 @@
+@import 'src/styles/subsocial-vars.scss'
+
 .TokenSelector
   input
     caret-color: transparent
@@ -12,3 +14,24 @@
 
 .CustomSuccessModalContainer
   height: auto !important
+
+.TransferLayout
+  display: flex
+  flex-direction: column
+  padding: 1.5rem 1rem
+  overflow: hidden
+  max-height: 700px
+  height: 100%
+
+  border-radius: 16px
+  background: #fff
+  padding: $space_big
+
+  \:global .ant-row
+    display: block
+
+.TransferTitle
+  font-weight: bold
+  color: $color_font_normal
+  font-size: $font_big
+  margin-bottom: $space_mini
diff --git a/src/components/transfer/TransferForm.tsx b/src/components/transfer/TransferForm.tsx
index 17f09a66..1ff4421f 100644
--- a/src/components/transfer/TransferForm.tsx
+++ b/src/components/transfer/TransferForm.tsx
@@ -45,7 +45,7 @@ export type ExtendedTransferFormData = TransferFormData & {
 }
 export type TransferFormDefaultToken = {
   token: string
-  network: string
+  network?: string
   tokenId?: { id: any }
 }
 export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index 1c98c759..6d345a16 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -20,6 +20,7 @@ import { useIsMyConnectedAddress } from '../providers/MyExtensionAccountsContext
 import { useTranslation } from 'react-i18next'
 import styles from './TokenSelector.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
+import SuccessContent from './SuccessContent'
 
 type TransferModalProps = CustomModalProps & {
   defaultSelectedToken?: TransferFormDefaultToken
@@ -165,90 +166,3 @@ export default function TransferModal ({
     </TransferForm>
   )
 }
-
-function SuccessContent ({
-  data,
-  closeModal,
-}: {
-  data: ExtendedTransferFormData | undefined
-  closeModal?: (e: any) => void
-}) {
-  const { t } = useTranslation()
-  const isSendingToSelf = useIsMyConnectedAddress(data?.recipient ?? '')
-  const tokenAmountInUsd = useTokenAmountInUsd(
-    data?.token ?? '',
-    parseFloat(data?.amount || '0')
-  )
-  const cacheInvalidationTime = useRef(Date.now())
-
-  const cardClassName = clsx('DfBgColor')
-
-  if (!data) return null
-  const { amount, recipient, sourceChainName, token, destChainName } = data
-
-  const firstCardContent: DfCardSideBySideContentProps['content'] = [
-    {
-      label: t('transfer.recipient'),
-      value: isSendingToSelf
-        ? t('transfer.yourAccount')
-        : toShortAddress(recipient) ?? '',
-    },
-  ]
-  if (!destChainName) {
-    firstCardContent.push({
-      label: t('transfer.source'),
-      value: sourceChainName ?? '',
-    })
-  }
-  const secondCardContent: DfCardSideBySideContentProps['content'] = [
-    { label: t('transfer.source'), value: sourceChainName ?? '' },
-    { label: t('transfer.dest'), value: destChainName ?? '' },
-  ]
-
-  return (
-    <div className='position-relative'>
-      <div
-        className='position-absolute inset-0 w-100 h-100'
-        style={{
-          zIndex: 1,
-          transform: 'translateY(-70%)',
-          // date is added to make the gif animation runs every time
-          backgroundImage: `url(/images/confetti.gif?d=${cacheInvalidationTime.current})`,
-          backgroundSize: 'cover',
-          pointerEvents: 'none',
-        }}
-      />
-      <div className='d-flex flex-column align-items-stretch GapNormal position-relative'>
-        <div className='d-flex flex-column align-items-center bs-mb-2'>
-          <span className='FontBig font-weight-semibold'>
-            {amount} {token}
-          </span>
-          {tokenAmountInUsd ? (
-            <MutedSpan>${toShortMoney({ num: tokenAmountInUsd })}</MutedSpan>
-          ) : null}
-        </div>
-        <DfCardSideBySideContent
-          noShadow
-          className={cardClassName}
-          content={firstCardContent}
-        />
-        {destChainName && (
-          <DfCardSideBySideContent
-            noShadow
-            className={cardClassName}
-            content={secondCardContent}
-          />
-        )}
-        <Button
-          onClick={closeModal}
-          type='primary'
-          block
-          size='large'
-          className='bs-mt-2'
-        >
-          {t('buttons.gotIt')}
-        </Button>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
new file mode 100644
index 00000000..4f052304
--- /dev/null
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -0,0 +1,125 @@
+import { Tabs } from 'antd'
+import clsx from 'clsx'
+import React, { useEffect, useState } from 'react'
+import TransferForm, {
+  TransferFormDefaultToken,
+  ExtendedTransferFormData,
+  DEFAULT_TOKEN,
+} from './TransferForm'
+import LoadingTransaction from '../utils/LoadingTransaction'
+import { MutedSpan } from '../utils/MutedText'
+import { useTranslation } from 'react-i18next'
+import styles from './TokenSelector.module.sass'
+import { isTokenBridgeable } from './configs/cross-chain'
+import { useRouter } from 'next/router'
+import SuccessContent from './SuccessContent'
+
+type TransferPageLayoutProps = {
+  defaultSelectedToken?: TransferFormDefaultToken
+  defaultRecipient?: string
+  transferType?: string
+}
+
+type Tabs = 'same-chain' | 'cross-chain'
+const getTabKey = (tab: Tabs) => tab
+
+const TransferPageLayout = ({
+  defaultSelectedToken = DEFAULT_TOKEN,
+  defaultRecipient,
+  transferType,
+}: TransferPageLayoutProps) => {
+  const { t } = useTranslation()
+
+  const [currentState, setCurrentState] = useState<'form' | 'loading' | 'success'>('form')
+  const [transferData, setTransferData] = useState<
+    ExtendedTransferFormData | undefined
+  >()
+  const [activeTab, setActiveTab] = useState(
+    getTabKey((transferType as any) || 'same-chain')
+  )
+  const router = useRouter()
+
+  useEffect(() => {
+    if (activeTab === transferType) return
+
+    const newTransferType = activeTab === 'same-chain' ? 'same' : 'cross'
+    const { pathname, query } = router
+
+    router.replace({
+      pathname,
+      query: { ...query, transferType: newTransferType },
+    })
+  }, [activeTab])
+
+  useEffect(() => {
+    setCurrentState('form')
+    setTransferData(undefined)
+  }, [])
+
+  const disableCrossChainTab = !isTokenBridgeable(
+    defaultSelectedToken?.token ?? ''
+  )
+  const isFormVisible = currentState === 'form'
+
+  return (
+    <TransferForm
+      onTransferClick={(param) => {
+        setCurrentState('loading')
+        setTransferData(param)
+      }}
+      defaultRecipient={defaultRecipient}
+      onTransferFailed={() => setCurrentState('form')}
+      onTransferSuccess={() => setCurrentState('success')}
+      className='flex-fill h-100'
+      defaultSelectedToken={defaultSelectedToken}
+      crossChain={activeTab === getTabKey('cross-chain')}
+    >
+      {(formSection, buttonSection) => (
+        <div className={styles.TransferLayout}>
+          <div className={styles.TransferTitle}>Transfer</div>
+          {currentState === 'loading' && (
+            <div className='d-flex flex-column justify-content-center'>
+              <LoadingTransaction className='mt-3 mb-5' />
+            </div>
+          )}
+          {currentState === 'success' && <SuccessContent data={transferData} />}
+          <div
+            className={clsx(
+              !isFormVisible ? 'd-none' : 'flex-fill d-flex flex-column'
+            )}
+          >
+            <Tabs
+              className='bs-mb-0'
+              centered
+              activeKey={activeTab}
+              onChange={(tab) => setActiveTab(tab as Tabs)}
+            >
+              <Tabs.TabPane
+                key={getTabKey('same-chain')}
+                tab={
+                  <span className='FontMedium'>{t('transfer.sameChain')}</span>
+                }
+              />
+              <Tabs.TabPane
+                key={getTabKey('cross-chain')}
+                tab={
+                  <span className='FontMedium'>{t('transfer.crossChain')}</span>
+                }
+                disabled={disableCrossChainTab}
+              />
+            </Tabs>
+            <MutedSpan className='bs-mb-3'>
+              {activeTab === 'same-chain'
+                ? t('transfer.subtitle.sameChain')
+                : t('transfer.subtitle.crossChain')}
+            </MutedSpan>
+            {formSection}
+          </div>
+          {buttonSection}
+        </div>
+      )}
+    </TransferForm>
+  )
+}
+
+export default TransferPageLayout
diff --git a/src/pages/send/[transferType].tsx b/src/pages/send/[transferType].tsx
new file mode 100644
index 00000000..3c78da0d
--- /dev/null
+++ b/src/pages/send/[transferType].tsx
@@ -0,0 +1,19 @@
+import { getInitialPropsWithRedux } from 'src/rtk/app/nextHelpers'
+import { fetchData } from '../../rtk/app/util'
+import TransferPage from '@/components/main/TransferPage'
+
+getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => {
+  fetchData(dispatch)
+
+  const { transferType, asset } = context.query
+
+  return {
+    head: {
+      title: 'Transfer Page',
+    },
+    transferType: transferType as string || 'same',
+    asset: asset as string,
+  }
+})
+
+export default TransferPage

From 84a94d2a2e22eddf552696158ea5213690a046c9 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 6 Dec 2023 15:58:59 +0200
Subject: [PATCH 02/18] Add state to url

---
 src/components/main/TransferPage.tsx          |  9 +-
 src/components/transfer/TokenSelector.tsx     |  7 +-
 src/components/transfer/TransferForm.tsx      | 97 ++++++++++++++-----
 src/components/transfer/TransferModal.tsx     |  2 +-
 .../transfer/TransferPageLayout.tsx           |  8 +-
 .../transfer/hooks/useGetTokensOptions.tsx    | 59 +++++++++++
 .../{ => transferContent}/SuccessContent.tsx  | 10 +-
 src/components/transfer/utils.ts              | 34 +++++++
 src/pages/send/[transferType].tsx             |  8 +-
 9 files changed, 191 insertions(+), 43 deletions(-)
 create mode 100644 src/components/transfer/hooks/useGetTokensOptions.tsx
 rename src/components/transfer/{ => transferContent}/SuccessContent.tsx (91%)

diff --git a/src/components/main/TransferPage.tsx b/src/components/main/TransferPage.tsx
index 695d1f2a..27dca65a 100644
--- a/src/components/main/TransferPage.tsx
+++ b/src/components/main/TransferPage.tsx
@@ -9,12 +9,12 @@ import styles from './Main.module.sass'
 type TransferPageProps = {
   transferType?: string
   asset?: string
+  from?: string
+  to?: string
 }
 
 const TransferPage: NextPage<TransferPageProps> = (props) => {
-  const { transferType, asset } = props
-
-  console.log(asset)
+  const { transferType, asset, from, to } = props
 
   return (
     <>
@@ -24,7 +24,8 @@ const TransferPage: NextPage<TransferPageProps> = (props) => {
             transferType={
               transferType === 'cross' ? 'cross-chain' : 'same-chain'
             }
-            defaultSelectedToken={{ token: asset || 'DOT' }}
+            defaultSelectedToken={{ token: asset || 'DOT', network: from }}
+            to={to}
           />
         </PageContent>
       </div>
diff --git a/src/components/transfer/TokenSelector.tsx b/src/components/transfer/TokenSelector.tsx
index bb666a07..1ce27939 100644
--- a/src/components/transfer/TokenSelector.tsx
+++ b/src/components/transfer/TokenSelector.tsx
@@ -19,6 +19,7 @@ export type TokenSelectorProps = HTMLProps<HTMLDivElement> & {
   showNetwork?: boolean
   filterCrossChainBridgeable?: boolean
   selectProps?: Omit<SearchableSelectProps, 'options'>
+  changeUrl?: boolean
 }
 
 export type TokenData = {
@@ -94,13 +95,13 @@ export default function TokenSelector ({
   selectProps,
   ...props
 }: TokenSelectorProps) {
-  const chainInfo = useChainInfo()
+  const chainsInfo = useChainInfo()
   const myAddress = useMyAddress()
 
   const options = useMemo(() => {
     const tokenMap: Record<string, SearchableSelectOption> = {}
 
-    Object.values(chainInfo).forEach(
+    Object.values(chainsInfo).forEach(
       ({
         icon,
         nativeToken,
@@ -141,7 +142,7 @@ export default function TokenSelector ({
       }
     )
     return Object.values(tokenMap)
-  }, [ chainInfo, showNetwork, myAddress ])
+  }, [ chainsInfo, showNetwork, myAddress ])
 
   return (
     <div
diff --git a/src/components/transfer/TransferForm.tsx b/src/components/transfer/TransferForm.tsx
index 1ff4421f..a80409cf 100644
--- a/src/components/transfer/TransferForm.tsx
+++ b/src/components/transfer/TransferForm.tsx
@@ -32,11 +32,14 @@ import { CrossChainFee, TransferFee } from './TransferFee'
 import {
   TransferFormData,
   getCrossChainFee,
+  getDefaultSelectorOption,
   getTransferFormData,
   transferFormField,
 } from './utils'
 import { useTransferTxBuilder } from './hooks/useTransferTxBuilder'
 import { useSendEvent } from '../providers/AnalyticContext'
+import useGetTokensOptions from './hooks/useGetTokensOptions'
+import { useRouter } from 'next/router'
 
 export type ExtendedTransferFormData = TransferFormData & {
   sourceChainName: string
@@ -55,6 +58,7 @@ export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
   onTransferClick?: (param: ExtendedTransferFormData) => void
   onTransferSuccess?: (param: ExtendedTransferFormData) => void
   onTransferFailed?: () => void
+  changeUrl?: boolean
   children?: (
     formSection: JSX.Element,
     buttonSection: JSX.Element
@@ -68,13 +72,14 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm ({
+export default function TransferForm({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
   onTransferClick,
   onTransferSuccess,
   onTransferFailed,
+  changeUrl = false,
   children,
   ...props
 }: TransferFormProps) {
@@ -84,12 +89,15 @@ export default function TransferForm ({
   const submittedData = useRef<ExtendedTransferFormData | null>(null)
   const chainsInfo = useChainInfo()
   const sendEvent = useSendEvent()
+  const router = useRouter()
+
+  const tokensOptions = useGetTokensOptions()
 
   const myAddress = useMyAddress()
-  useFetchBalances(myAddress ? [ myAddress ] : [])
+  useFetchBalances(myAddress ? [myAddress] : [])
 
-  const [ form ] = Form.useForm()
-  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
+  const [form] = Form.useForm()
+  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -116,29 +124,34 @@ export default function TransferForm ({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([ transferFormField('recipient') ])
+      form.validateFields([transferFormField('recipient')])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([ transferFormField('recipient') ])
+        form.validateFields([transferFormField('recipient')])
       }
     }
-  }, [ crossChain ])
+  }, [crossChain])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
     form.resetFields()
+
+    const selectedToken = getDefaultSelectorOption(
+      tokensOptions,
+      defaultSelectedToken
+    )
+
     form.setFieldsValue({
-      [transferFormField('token')]:
-        tokenSelectorEncoder.encode(defaultSelectedToken),
+      [transferFormField('token')]: tokenSelectorEncoder.encode(selectedToken),
       [transferFormField('recipient')]: defaultRecipient,
     })
 
-    let crossChainToken = defaultSelectedToken.token
-    let crossChainNetworkSource = defaultSelectedToken.network
-    if (!isTokenBridgeable(defaultSelectedToken.token)) {
+    let crossChainToken = selectedToken.token
+    let crossChainNetworkSource = selectedToken.network
+    if (!isTokenBridgeable(selectedToken.token)) {
       crossChainToken = DEFAULT_TOKEN.token
       crossChainNetworkSource = DEFAULT_TOKEN.network
     }
@@ -161,7 +174,7 @@ export default function TransferForm ({
         network: crossChainNetworkSource,
       })
     } else {
-      setSelectedToken(defaultSelectedToken)
+      setSelectedToken(selectedToken)
     }
   }, [
     defaultSelectedToken?.network,
@@ -171,11 +184,18 @@ export default function TransferForm ({
 
   useEffect(() => {
     resetForm()
-  }, [ resetForm ])
+  }, [resetForm])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
-    setSelectedToken(tokenSelectorEncoder.decode(token))
+    const decodedToken = tokenSelectorEncoder.decode(token)
+
+    setSelectedToken(decodedToken)
+    changeUrl &&
+      router.replace({
+        pathname: router.pathname,
+        query: { ...router.query, asset: decodedToken.token, from: decodedToken.network },
+      })
   }
 
   const onCrossChainTokenChange = (token: string) => {
@@ -185,9 +205,18 @@ export default function TransferForm ({
       [transferFormField('source')]: undefined,
       [transferFormField('dest')]: undefined,
     })
+
+    const decodedToken = tokenSelectorEncoder.decode(token)
+
     setSelectedToken({
-      token: tokenSelectorEncoder.decode(token).token,
+      token: decodedToken.token,
     })
+
+    changeUrl &&
+      router.replace({
+        pathname: router.pathname,
+        query: { ...router.query, asset: decodedToken.token, from: decodedToken.network },
+      })
   }
 
   const getExtendedTransferData = (): ExtendedTransferFormData => {
@@ -222,12 +251,12 @@ export default function TransferForm ({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
+      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
+        fetchBalanceByNetwork(dispatch, [recipient], destChain)
       }, WAIT_TIME)
     }
   }
@@ -243,7 +272,7 @@ export default function TransferForm ({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [ transferFormField('amount') ]
+  const requiredTouchedFields = [transferFormField('amount')]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
@@ -253,6 +282,22 @@ export default function TransferForm ({
     requiredTouchedFields.push(transferFormField('recipient'))
   }
 
+  const onSourceChainChange = (source: string) => {
+    setSelectedToken((prev) => ({ ...prev, network: source }))
+    changeUrl && router.replace({
+      pathname: router.pathname,
+      query: { ...router.query, from: source },
+    })
+  }
+
+  const onDestChainChange = (dest: string) => {
+    setSelectedToken((prev) => ({ ...prev, dest }))
+    changeUrl && router.replace({
+      pathname: router.pathname,
+      query: { ...router.query, to: dest },
+    })
+  }
+
   const formSection = (
     <div className={clsx('ant-form ant-form-vertical')}>
       <div
@@ -274,7 +319,11 @@ export default function TransferForm ({
           </Form.Item>
         ) : (
           <Form.Item name={transferFormField('token')} className='m-0'>
-            <TokenSelector setValue={onTokenChange} showNetwork />
+            <TokenSelector
+              setValue={onTokenChange}
+              showNetwork
+              changeUrl={changeUrl}
+            />
           </Form.Item>
         )}
         <TokenBalanceView
@@ -304,12 +353,8 @@ export default function TransferForm ({
             tokenFieldName={transferFormField('crossChainToken')}
             destChainFieldName={transferFormField('dest')}
             sourceChainFieldName={transferFormField('source')}
-            onSourceChainChange={(source: string) =>
-              setSelectedToken((prev) => ({ ...prev, network: source }))
-            }
-            onDestChainChange={(dest: string) =>
-              setSelectedToken((prev) => ({ ...prev, dest }))
-            }
+            onSourceChainChange={onSourceChainChange}
+            onDestChainChange={onDestChainChange}
           />
         )}
         <Form.Item
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index 6d345a16..e0a69751 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -20,7 +20,7 @@ import { useIsMyConnectedAddress } from '../providers/MyExtensionAccountsContext
 import { useTranslation } from 'react-i18next'
 import styles from './TokenSelector.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
-import SuccessContent from './SuccessContent'
+import SuccessContent from './transferContent/SuccessContent'
 
 type TransferModalProps = CustomModalProps & {
   defaultSelectedToken?: TransferFormDefaultToken
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index 4f052304..5ef6b19f 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -12,12 +12,13 @@ import { useTranslation } from 'react-i18next'
 import styles from './TokenSelector.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
 import { useRouter } from 'next/router'
-import SuccessContent from './SuccessContent'
+import SuccessContent from './transferContent/SuccessContent'
 
 type TransferPageLayoutProps = {
   defaultSelectedToken?: TransferFormDefaultToken
   defaultRecipient?: string
   transferType?: string
+  to?: string
 }
 
 type Tabs = 'same-chain' | 'cross-chain'
@@ -30,7 +31,9 @@ const TransferPageLayout = ({
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
-  const [currentState, setCurrentState] = useState<'form' | 'loading' | 'success'>('form')
+  const [currentState, setCurrentState] = useState<
+    'form' | 'loading' | 'success'
+  >('form')
   const [transferData, setTransferData] = useState<
     ExtendedTransferFormData | undefined
   >()
@@ -73,6 +76,7 @@ const TransferPageLayout = ({
       className='flex-fill h-100'
       defaultSelectedToken={defaultSelectedToken}
       crossChain={activeTab === getTabKey('cross-chain')}
+      changeUrl
     >
       {(formSection, buttonSection) => (
         <div className={styles.TransferLayout}>
diff --git a/src/components/transfer/hooks/useGetTokensOptions.tsx b/src/components/transfer/hooks/useGetTokensOptions.tsx
new file mode 100644
index 00000000..69344d38
--- /dev/null
+++ b/src/components/transfer/hooks/useGetTokensOptions.tsx
@@ -0,0 +1,59 @@
+import { useChainInfo } from '@/rtk/features/multiChainInfo/multiChainInfoHooks'
+import { useMemo } from 'react'
+import { tokenSelectorEncoder } from '../TokenSelector'
+
+const useGetTokensOptions = () => {
+  const chainsInfo = useChainInfo()
+
+  return useMemo(() => {
+    const tokenMap: string[] = []
+
+    Object.values(chainsInfo).forEach(
+      ({
+        nativeToken,
+        tokenSymbols,
+        id: networkId,
+        assetsRegistry,
+        isTransferable,
+        tokenTransferMethod,
+      }) => {
+        const nativeTokenSymbol = nativeToken || tokenSymbols?.[0]
+        if (!nativeTokenSymbol || !isTransferable) return
+
+        tokenSelectorEncoder.encode({
+          token: nativeTokenSymbol,
+          network: networkId,
+        })
+
+        tokenMap.push(
+          tokenSelectorEncoder.encode({
+            token: nativeTokenSymbol,
+            network: networkId,
+          })
+        )
+
+        if (!assetsRegistry || !tokenTransferMethod) return
+
+        Object.values(assetsRegistry).forEach((asset) => {
+          const tokenSymbol = asset.symbol
+          if (tokenSymbol === nativeTokenSymbol) return
+
+          const currency = asset.currency
+          if (!currency) return
+          const tokenId = currency.id || currency
+
+          tokenMap.push(
+            tokenSelectorEncoder.encode({
+              token: tokenSymbol,
+              network: networkId,
+              tokenId: { id: tokenId },
+            })
+          )
+        })
+      }
+    )
+    return tokenMap
+  }, [ chainsInfo ])
+}
+
+export default useGetTokensOptions
\ No newline at end of file
diff --git a/src/components/transfer/SuccessContent.tsx b/src/components/transfer/transferContent/SuccessContent.tsx
similarity index 91%
rename from src/components/transfer/SuccessContent.tsx
rename to src/components/transfer/transferContent/SuccessContent.tsx
index c49de42e..00158957 100644
--- a/src/components/transfer/SuccessContent.tsx
+++ b/src/components/transfer/transferContent/SuccessContent.tsx
@@ -1,14 +1,14 @@
 import { toShortMoney } from '@subsocial/utils'
-import { MutedSpan } from '../utils/MutedText'
-import { DfCardSideBySideContent, DfCardSideBySideContentProps } from '../utils/DfCard'
+import { MutedSpan } from '../../utils/MutedText'
+import { DfCardSideBySideContent, DfCardSideBySideContentProps } from '../../utils/DfCard'
 import { Button } from 'antd'
 import { useTranslation } from 'react-i18next'
-import { ExtendedTransferFormData } from './TransferForm'
-import { useIsMyConnectedAddress } from '../providers/MyExtensionAccountsContext'
+import { ExtendedTransferFormData } from '../TransferForm'
+import { useIsMyConnectedAddress } from '../../providers/MyExtensionAccountsContext'
 import { useTokenAmountInUsd } from '@/rtk/features/prices/pricesHooks'
 import { useRef } from 'react'
 import clsx from 'clsx'
-import { toShortAddress } from '../utils'
+import { toShortAddress } from '../../utils'
 
 function SuccessContent ({
   data,
diff --git a/src/components/transfer/utils.ts b/src/components/transfer/utils.ts
index 86e67cbc..b9851d9d 100644
--- a/src/components/transfer/utils.ts
+++ b/src/components/transfer/utils.ts
@@ -1,6 +1,7 @@
 import { FormInstance } from 'antd'
 import { tokenSelectorEncoder } from './TokenSelector'
 import { getCrossChainAdapter } from './configs/cross-chain'
+import { TransferFormDefaultToken } from './TransferForm'
 
 export type TransferFormData = {
   recipient: string
@@ -60,3 +61,36 @@ export const getCrossChainFee = (form: MinimalFormInstance): CrossChainFee => {
     return { balance: 0, token: '' }
   }
 }
+
+export const getDefaultSelectorOption = (
+  tokensOptions: string[],
+  defaultSelectedToken: TransferFormDefaultToken
+) => {
+  let selectedToken = defaultSelectedToken
+
+  if (!defaultSelectedToken.network || !defaultSelectedToken.tokenId) {
+    const encodedTokenData = tokensOptions.find((item) => {
+      const { token, network } = tokenSelectorEncoder.decode(item)
+
+      if (defaultSelectedToken.network) {
+        return (
+          token === defaultSelectedToken.token &&
+          network === defaultSelectedToken.network
+        )
+      }
+
+      return token === defaultSelectedToken.token
+    })
+
+    const { network, tokenId } =
+      tokenSelectorEncoder.decode(encodedTokenData || '') || {}
+
+    selectedToken = {
+      ...defaultSelectedToken,
+      network: defaultSelectedToken.network || network || 'polkadot',
+      tokenId,
+    }
+  }
+
+  return selectedToken
+}
diff --git a/src/pages/send/[transferType].tsx b/src/pages/send/[transferType].tsx
index 3c78da0d..7c78c72a 100644
--- a/src/pages/send/[transferType].tsx
+++ b/src/pages/send/[transferType].tsx
@@ -5,14 +5,18 @@ import TransferPage from '@/components/main/TransferPage'
 getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => {
   fetchData(dispatch)
 
-  const { transferType, asset } = context.query
+  const { transferType, asset, from, to } = context.query
+
+  const assetValue = asset as string
 
   return {
     head: {
       title: 'Transfer Page',
     },
     transferType: transferType as string || 'same',
-    asset: asset as string,
+    asset: assetValue ? assetValue.toUpperCase() : undefined,
+    from: from as string,
+    to: to as string,
   }
 })
 

From 510b59ea9e13ae4ad7e5c9f20e0d306f1668927b Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 8 Dec 2023 12:09:02 +0200
Subject: [PATCH 03/18] Add success modal for transfer page

---
 src/components/transfer/TransferForm.tsx      |  59 ++++---
 .../transfer/TransferPageLayout.tsx           | 144 +++++++++++-------
 .../cross-chain/CrossChainRouteSelector.tsx   |  24 ++-
 .../TransferChainSelectorFormItem.tsx         |   5 +-
 .../transfer/transferContent/SuccessModal.tsx |  45 ++++++
 src/styles/subsocial-mobile.scss              |   5 +-
 6 files changed, 191 insertions(+), 91 deletions(-)
 create mode 100644 src/components/transfer/transferContent/SuccessModal.tsx

diff --git a/src/components/transfer/TransferForm.tsx b/src/components/transfer/TransferForm.tsx
index a80409cf..796d9056 100644
--- a/src/components/transfer/TransferForm.tsx
+++ b/src/components/transfer/TransferForm.tsx
@@ -135,7 +135,7 @@ export default function TransferForm({
     }
   }, [crossChain])
 
-  const resetForm = useCallback(() => {
+  const resetForm = () => {
     if (!defaultSelectedToken) return
     form.resetFields()
 
@@ -176,26 +176,29 @@ export default function TransferForm({
     } else {
       setSelectedToken(selectedToken)
     }
-  }, [
-    defaultSelectedToken?.network,
-    defaultSelectedToken?.token,
-    defaultRecipient,
-  ])
+
+    console.log('resetForm')
+  }
 
   useEffect(() => {
     resetForm()
-  }, [resetForm])
+  }, [])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
     const decodedToken = tokenSelectorEncoder.decode(token)
 
-    setSelectedToken(decodedToken)
     changeUrl &&
       router.replace({
         pathname: router.pathname,
-        query: { ...router.query, asset: decodedToken.token, from: decodedToken.network },
+        query: {
+          ...router.query,
+          asset: decodedToken.token,
+          from: decodedToken.network,
+        },
       })
+
+    setSelectedToken(decodedToken)
   }
 
   const onCrossChainTokenChange = (token: string) => {
@@ -208,15 +211,21 @@ export default function TransferForm({
 
     const decodedToken = tokenSelectorEncoder.decode(token)
 
-    setSelectedToken({
-      token: decodedToken.token,
-    })
-
     changeUrl &&
       router.replace({
         pathname: router.pathname,
-        query: { ...router.query, asset: decodedToken.token, from: decodedToken.network },
+        query: {
+          ...router.query,
+          asset: decodedToken.token,
+          from: decodedToken.network,
+        },
       })
+
+    setSelectedToken({
+      token: decodedToken.token,
+    })
+
+    console.log('onCrossChainTokenChange')
   }
 
   const getExtendedTransferData = (): ExtendedTransferFormData => {
@@ -283,19 +292,25 @@ export default function TransferForm({
   }
 
   const onSourceChainChange = (source: string) => {
+    changeUrl &&
+      router.replace({
+        pathname: router.pathname,
+        query: { ...router.query, from: source },
+      })
     setSelectedToken((prev) => ({ ...prev, network: source }))
-    changeUrl && router.replace({
-      pathname: router.pathname,
-      query: { ...router.query, from: source },
-    })
+
+    console.log('onSourceChainChange')
   }
 
   const onDestChainChange = (dest: string) => {
+    changeUrl &&
+      router.replace({
+        pathname: router.pathname,
+        query: { ...router.query, to: dest },
+      })
     setSelectedToken((prev) => ({ ...prev, dest }))
-    changeUrl && router.replace({
-      pathname: router.pathname,
-      query: { ...router.query, to: dest },
-    })
+
+    console.log('onDestChainChange')
   }
 
   const formSection = (
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index 5ef6b19f..89622656 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import styles from './TokenSelector.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
 import { useRouter } from 'next/router'
-import SuccessContent from './transferContent/SuccessContent'
+import TransferSuccessModal from './transferContent/SuccessModal'
 
 type TransferPageLayoutProps = {
   defaultSelectedToken?: TransferFormDefaultToken
@@ -31,9 +31,9 @@ const TransferPageLayout = ({
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
-  const [currentState, setCurrentState] = useState<
-    'form' | 'loading' | 'success'
-  >('form')
+  const [showSuccessModal, setShowSuccessModal] = useState(false)
+
+  const [currentState, setCurrentState] = useState<'form' | 'loading'>()
   const [transferData, setTransferData] = useState<
     ExtendedTransferFormData | undefined
   >()
@@ -48,6 +48,10 @@ const TransferPageLayout = ({
     const newTransferType = activeTab === 'same-chain' ? 'same' : 'cross'
     const { pathname, query } = router
 
+    if(activeTab === 'same-chain') {
+      delete query.to
+    }
+
     router.replace({
       pathname,
       query: { ...query, transferType: newTransferType },
@@ -57,6 +61,15 @@ const TransferPageLayout = ({
   useEffect(() => {
     setCurrentState('form')
     setTransferData(undefined)
+
+    if(activeTab === 'same-chain') {
+      delete router.query.to
+    } 
+
+    router.replace({
+      pathname: router.pathname,
+      query: { ...router.query, transferType: activeTab },
+    })
   }, [])
 
   const disableCrossChainTab = !isTokenBridgeable(
@@ -65,64 +78,77 @@ const TransferPageLayout = ({
   const isFormVisible = currentState === 'form'
 
   return (
-    <TransferForm
-      onTransferClick={(param) => {
-        setCurrentState('loading')
-        setTransferData(param)
-      }}
-      defaultRecipient={defaultRecipient}
-      onTransferFailed={() => setCurrentState('form')}
-      onTransferSuccess={() => setCurrentState('success')}
-      className='flex-fill h-100'
-      defaultSelectedToken={defaultSelectedToken}
-      crossChain={activeTab === getTabKey('cross-chain')}
-      changeUrl
-    >
-      {(formSection, buttonSection) => (
-        <div className={styles.TransferLayout}>
-          <div className={styles.TransferTitle}>Transfer</div>
-          {currentState === 'loading' && (
-            <div className='d-flex flex-column justify-content-center'>
-              <LoadingTransaction className='mt-3 mb-5' />
-            </div>
-          )}
-          {currentState === 'success' && <SuccessContent data={transferData} />}
-          <div
-            className={clsx(
-              !isFormVisible ? 'd-none' : 'flex-fill d-flex flex-column'
+    <>
+      <TransferForm
+        onTransferClick={(param) => {
+          setCurrentState('loading')
+          setTransferData(param)
+        }}
+        defaultRecipient={defaultRecipient}
+        onTransferFailed={() => setCurrentState('form')}
+        onTransferSuccess={() => {
+          setShowSuccessModal(true)
+          setCurrentState('form')
+        }}
+        className='flex-fill h-100'
+        defaultSelectedToken={defaultSelectedToken}
+        crossChain={activeTab === getTabKey('cross-chain')}
+        changeUrl
+      >
+        {(formSection, buttonSection) => (
+          <div className={styles.TransferLayout}>
+            <div className={styles.TransferTitle}>Transfer</div>
+            {currentState === 'loading' && (
+              <div className='d-flex h-100 flex-column justify-content-center'>
+                <LoadingTransaction className='mt-3 mb-5' />
+              </div>
             )}
-          >
-            <Tabs
-              className='bs-mb-0'
-              centered
-              activeKey={activeTab}
-              onChange={(tab) => setActiveTab(tab as Tabs)}
+            <div
+              className={clsx(
+                !isFormVisible ? 'd-none' : 'flex-fill d-flex flex-column'
+              )}
             >
-              <Tabs.TabPane
-                key={getTabKey('same-chain')}
-                tab={
-                  <span className='FontMedium'>{t('transfer.sameChain')}</span>
-                }
-              />
-              <Tabs.TabPane
-                key={getTabKey('cross-chain')}
-                tab={
-                  <span className='FontMedium'>{t('transfer.crossChain')}</span>
-                }
-                disabled={disableCrossChainTab}
-              />
-            </Tabs>
-            <MutedSpan className='bs-mb-3'>
-              {activeTab === 'same-chain'
-                ? t('transfer.subtitle.sameChain')
-                : t('transfer.subtitle.crossChain')}
-            </MutedSpan>
-            {formSection}
+              <Tabs
+                className='bs-mb-0'
+                centered
+                activeKey={activeTab}
+                onChange={(tab) => setActiveTab(tab as Tabs)}
+              >
+                <Tabs.TabPane
+                  key={getTabKey('same-chain')}
+                  tab={
+                    <span className='FontMedium'>
+                      {t('transfer.sameChain')}
+                    </span>
+                  }
+                />
+                <Tabs.TabPane
+                  key={getTabKey('cross-chain')}
+                  tab={
+                    <span className='FontMedium'>
+                      {t('transfer.crossChain')}
+                    </span>
+                  }
+                  disabled={disableCrossChainTab}
+                />
+              </Tabs>
+              <MutedSpan className='bs-mb-3'>
+                {activeTab === 'same-chain'
+                  ? t('transfer.subtitle.sameChain')
+                  : t('transfer.subtitle.crossChain')}
+              </MutedSpan>
+              {formSection}
+            </div>
+            {currentState === 'form' && buttonSection}
           </div>
-          {buttonSection}
-        </div>
-      )}
-    </TransferForm>
+        )}
+      </TransferForm>
+      <TransferSuccessModal
+        visible={showSuccessModal}
+        close={() => setShowSuccessModal(false)}
+        transferData={transferData}
+      />
+    </>
   )
 }
 
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index 7887959b..1032eff6 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -10,6 +10,7 @@ import { tokenSelectorEncoder } from '../TokenSelector'
 import { checkSameAttributesValues } from 'src/components/utils'
 import { showWarnMessage } from '../../utils/Message'
 import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/router'
 
 export type CrossChainRouteSelectorProps = Omit<
   HTMLProps<HTMLDivElement>,
@@ -99,13 +100,7 @@ function CrossChainRouteSelectorContent ({
   ...props
 }: CrossChainRouteSelectorContentProps) {
   const { t } = useTranslation()
-
-  useEffect(() => {
-    onSourceChainChange?.(source)
-  }, [ source ])
-  useEffect(() => {
-    onDestChainChange?.(dest)
-  }, [ dest ])
+  const router = useRouter()
 
   const onSwapChain = () => {
     const source = form.getFieldValue(sourceChainFieldName)
@@ -125,14 +120,27 @@ function CrossChainRouteSelectorContent ({
       'dest',
       { token, from: dest }
     ))
+    
     if (!isChanged.every((value) => value)) {
       showWarnMessage({ message: t('transfer.errors.swapRouteNotFound') })
       return
     }
+
     form.setFieldsValue({
       [destChainFieldName]: source,
       [sourceChainFieldName]: dest,
     })
+
+    console.log('Swap routes')
+
+    router.replace({
+      pathname: router.pathname,
+      query: {
+        ...router.query,
+        from: source,
+        to: dest,
+      },
+    })
   }
 
   let destOptions = getRouteOptions('dest', { from: source as any, token })
@@ -149,6 +157,7 @@ function CrossChainRouteSelectorContent ({
         className='bs-mb-0'
         name={sourceChainFieldName}
         label={t('transfer.source')}
+        onChange={onSourceChainChange}
       />
       <MutedDiv>
         <Button
@@ -160,6 +169,7 @@ function CrossChainRouteSelectorContent ({
         </Button>
       </MutedDiv>
       <TransferChainSelectorFormItem
+        onChange={onDestChainChange}
         chainFilters={destOptions}
         style={{ flexBasis: '100%' }}
         selectProps={{ placeholder: 'Select', notFoundContent: 'Route not found' }}
diff --git a/src/components/transfer/form-items/TransferChainSelectorFormItem.tsx b/src/components/transfer/form-items/TransferChainSelectorFormItem.tsx
index cc157d4b..3eb582f7 100644
--- a/src/components/transfer/form-items/TransferChainSelectorFormItem.tsx
+++ b/src/components/transfer/form-items/TransferChainSelectorFormItem.tsx
@@ -8,9 +8,10 @@ import styles from './TransferChainSelectorFormItem.module.sass'
 export type TransferChainSelectorFormItemProps = Omit<FormItemProps, 'options'> & {
   selectProps?: SelectProps<string>
   chainFilters: string[]
+  onChange?: (value: string) => void
 }
 
-export default function TransferChainSelectorFormItem ({ selectProps, chainFilters, ...props }: TransferChainSelectorFormItemProps) {
+export default function TransferChainSelectorFormItem ({ onChange, selectProps, chainFilters, ...props }: TransferChainSelectorFormItemProps) {
   const allChainInfo = useChainInfo()
 
   const options = chainFilters.map((chain) => {
@@ -27,7 +28,7 @@ export default function TransferChainSelectorFormItem ({ selectProps, chainFilte
     <Form.Item
       {...props}
     >
-      <Select size='large' {...selectProps} options={options} />
+      <Select onSelect={onChange} size='large' {...selectProps} options={options} />
     </Form.Item>
   )
 }
diff --git a/src/components/transfer/transferContent/SuccessModal.tsx b/src/components/transfer/transferContent/SuccessModal.tsx
new file mode 100644
index 00000000..d61ed9bb
--- /dev/null
+++ b/src/components/transfer/transferContent/SuccessModal.tsx
@@ -0,0 +1,45 @@
+import clsx from 'clsx'
+import { ExtendedTransferFormData } from '../TransferForm'
+import SuccessContent from './SuccessContent'
+import CustomModal from '@/components/utils/CustomModal'
+import { useTranslation } from 'react-i18next'
+import styles from '../TokenSelector.module.sass'
+
+type TransferSuccessModalProps = {
+  visible: boolean
+  close: () => void
+  transferData?: ExtendedTransferFormData
+}
+
+const TransferSuccessModal = ({
+  visible,
+  close,
+  transferData,
+}: TransferSuccessModalProps) => {
+  const { t } = useTranslation()
+
+  let subtitle: string | JSX.Element | undefined = undefined
+
+  if (transferData?.destChainName) {
+    subtitle = ` ${t('transfer.successSubtitle.crossChain')}`
+  } else {
+    subtitle = t('transfer.successSubtitle.sameChain')
+  }
+
+  return (
+    <CustomModal
+      visible={visible}
+      fullHeight={false}
+      centered={true}
+      closable
+      noScroll={true}
+      title={t('transfer.title')}
+      subtitle={subtitle}
+      className={clsx(styles.CustomSuccessModalContainer)}
+    >
+      <SuccessContent closeModal={close} data={transferData} />
+    </CustomModal>
+  )
+}
+
+export default TransferSuccessModal
diff --git a/src/styles/subsocial-mobile.scss b/src/styles/subsocial-mobile.scss
index eb829084..802112b1 100644
--- a/src/styles/subsocial-mobile.scss
+++ b/src/styles/subsocial-mobile.scss
@@ -133,7 +133,10 @@
 
   .DfSectionOuter {
     width: 100%;
-    padding: 0 0
+    padding: 0 0;
+
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .item.header.disabled {

From af1ff94d7d77faadcea7f2784bd6df61bca02307 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 10 Dec 2023 18:44:52 +0200
Subject: [PATCH 04/18] Fix swith tokens

---
 src/components/transfer/TransferForm.tsx      | 65 ++++++++++++-----
 .../transfer/TransferPageLayout.tsx           | 13 +---
 .../cross-chain/CrossChainRouteSelector.tsx   | 18 ++---
 src/components/transfer/utils.ts              | 72 ++++++++++++-------
 src/layout/SideMenuItems.tsx                  |  6 ++
 5 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/src/components/transfer/TransferForm.tsx b/src/components/transfer/TransferForm.tsx
index 796d9056..8719f86e 100644
--- a/src/components/transfer/TransferForm.tsx
+++ b/src/components/transfer/TransferForm.tsx
@@ -59,6 +59,7 @@ export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
   onTransferSuccess?: (param: ExtendedTransferFormData) => void
   onTransferFailed?: () => void
   changeUrl?: boolean
+  dest?: string
   children?: (
     formSection: JSX.Element,
     buttonSection: JSX.Element
@@ -80,6 +81,7 @@ export default function TransferForm({
   onTransferSuccess,
   onTransferFailed,
   changeUrl = false,
+  dest,
   children,
   ...props
 }: TransferFormProps) {
@@ -135,23 +137,26 @@ export default function TransferForm({
     }
   }, [crossChain])
 
-  const resetForm = () => {
+  const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
     form.resetFields()
 
-    const selectedToken = getDefaultSelectorOption(
+    const selectedTokenFromSelectorOptions = getDefaultSelectorOption(
       tokensOptions,
       defaultSelectedToken
     )
 
     form.setFieldsValue({
-      [transferFormField('token')]: tokenSelectorEncoder.encode(selectedToken),
+      [transferFormField('token')]: tokenSelectorEncoder.encode(
+        selectedTokenFromSelectorOptions
+      ),
       [transferFormField('recipient')]: defaultRecipient,
     })
 
-    let crossChainToken = selectedToken.token
-    let crossChainNetworkSource = selectedToken.network
-    if (!isTokenBridgeable(selectedToken.token)) {
+    let crossChainToken = selectedTokenFromSelectorOptions.token
+    let crossChainNetworkSource = selectedTokenFromSelectorOptions.network
+
+    if (!isTokenBridgeable(selectedTokenFromSelectorOptions.token)) {
       crossChainToken = DEFAULT_TOKEN.token
       crossChainNetworkSource = DEFAULT_TOKEN.network
     }
@@ -167,6 +172,21 @@ export default function TransferForm({
       'source',
       { token: crossChainToken }
     )
+    
+    if(dest) {
+      const routeValueSet = setCrossChainRouteValue(
+        form,
+        transferFormField('dest'),
+        dest ?? '',
+        'dest',
+        { token: crossChainToken }
+      )
+
+      if(!routeValueSet) {
+        delete router.query.to
+      }
+
+    }
 
     if (crossChain) {
       setSelectedToken({
@@ -174,15 +194,34 @@ export default function TransferForm({
         network: crossChainNetworkSource,
       })
     } else {
-      setSelectedToken(selectedToken)
+      setSelectedToken(selectedTokenFromSelectorOptions)
     }
 
-    console.log('resetForm')
-  }
+    if (!crossChain) {
+      delete router.query.to
+    }
+
+    const newQuery = {
+      ...router.query,
+      transferType: !crossChain ? 'same' : 'cross',
+      asset: selectedTokenFromSelectorOptions?.token,
+      from: selectedTokenFromSelectorOptions?.network || undefined,
+    }
+
+    if (!selectedTokenFromSelectorOptions.network) {
+      delete newQuery.from
+    }
+
+    changeUrl &&
+      router.replace({
+        pathname: router.pathname,
+        query: newQuery,
+      })
+  }, [tokensOptions.join(','), crossChain])
 
   useEffect(() => {
     resetForm()
-  }, [])
+  }, [crossChain])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
@@ -224,8 +263,6 @@ export default function TransferForm({
     setSelectedToken({
       token: decodedToken.token,
     })
-
-    console.log('onCrossChainTokenChange')
   }
 
   const getExtendedTransferData = (): ExtendedTransferFormData => {
@@ -298,8 +335,6 @@ export default function TransferForm({
         query: { ...router.query, from: source },
       })
     setSelectedToken((prev) => ({ ...prev, network: source }))
-
-    console.log('onSourceChainChange')
   }
 
   const onDestChainChange = (dest: string) => {
@@ -309,8 +344,6 @@ export default function TransferForm({
         query: { ...router.query, to: dest },
       })
     setSelectedToken((prev) => ({ ...prev, dest }))
-
-    console.log('onDestChainChange')
   }
 
   const formSection = (
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index 89622656..dc148946 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -28,6 +28,7 @@ const TransferPageLayout = ({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   transferType,
+  to
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
@@ -48,7 +49,7 @@ const TransferPageLayout = ({
     const newTransferType = activeTab === 'same-chain' ? 'same' : 'cross'
     const { pathname, query } = router
 
-    if(activeTab === 'same-chain') {
+    if (activeTab === 'same-chain') {
       delete query.to
     }
 
@@ -61,15 +62,6 @@ const TransferPageLayout = ({
   useEffect(() => {
     setCurrentState('form')
     setTransferData(undefined)
-
-    if(activeTab === 'same-chain') {
-      delete router.query.to
-    } 
-
-    router.replace({
-      pathname: router.pathname,
-      query: { ...router.query, transferType: activeTab },
-    })
   }, [])
 
   const disableCrossChainTab = !isTokenBridgeable(
@@ -86,6 +78,7 @@ const TransferPageLayout = ({
         }}
         defaultRecipient={defaultRecipient}
         onTransferFailed={() => setCurrentState('form')}
+        dest={to}
         onTransferSuccess={() => {
           setShowSuccessModal(true)
           setCurrentState('form')
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index 1032eff6..9e192a79 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -126,21 +126,21 @@ function CrossChainRouteSelectorContent ({
       return
     }
 
-    form.setFieldsValue({
-      [destChainFieldName]: source,
-      [sourceChainFieldName]: dest,
-    })
-
-    console.log('Swap routes')
-
     router.replace({
       pathname: router.pathname,
       query: {
         ...router.query,
-        from: source,
-        to: dest,
+        from: dest,
+        to: source,
       },
     })
+
+    form.setFieldsValue({
+      [destChainFieldName]: source,
+      [sourceChainFieldName]: dest,
+    })
+
+    console.log(source, dest)
   }
 
   let destOptions = getRouteOptions('dest', { from: source as any, token })
diff --git a/src/components/transfer/utils.ts b/src/components/transfer/utils.ts
index b9851d9d..3ec8631f 100644
--- a/src/components/transfer/utils.ts
+++ b/src/components/transfer/utils.ts
@@ -1,5 +1,5 @@
 import { FormInstance } from 'antd'
-import { tokenSelectorEncoder } from './TokenSelector'
+import { TokenData, tokenSelectorEncoder } from './TokenSelector'
 import { getCrossChainAdapter } from './configs/cross-chain'
 import { TransferFormDefaultToken } from './TransferForm'
 
@@ -23,23 +23,31 @@ export type FormFields = {
 export const transferFormField = (name: keyof FormFields) => name
 
 type MinimalFormInstance = { getFieldsValue: FormInstance['getFieldsValue'] }
-export function getTransferFormData (form: MinimalFormInstance, crossChain: boolean): TransferFormData {
+export function getTransferFormData(
+  form: MinimalFormInstance,
+  crossChain: boolean
+): TransferFormData {
   const formValues = form.getFieldsValue()
-  const tokenData = formValues[transferFormField(crossChain ? 'crossChainToken' : 'token')]
-  const { token, network = '', tokenId } = tokenSelectorEncoder.decode(tokenData)
+  const tokenData =
+    formValues[transferFormField(crossChain ? 'crossChainToken' : 'token')]
+  const {
+    token,
+    network = '',
+    tokenId,
+  } = tokenSelectorEncoder.decode(tokenData)
 
   const source = formValues[transferFormField('source')]
   const dest = formValues[transferFormField('dest')]
 
   const usedSource = crossChain ? source : network
-  
+
   return {
     recipient: formValues[transferFormField('recipient')],
     amount: formValues[transferFormField('amount')],
     sourceChain: usedSource,
     destChain: crossChain ? dest : undefined,
     token,
-    tokenId: crossChain ? undefined : tokenId
+    tokenId: crossChain ? undefined : tokenId,
   }
 }
 
@@ -54,7 +62,7 @@ export const getCrossChainFee = (form: MinimalFormInstance): CrossChainFee => {
     const fee = adapter.getCrossChainFee(token, (destChain ?? '') as any)
     return {
       balance: fee.balance.toNumber(),
-      token: fee.token
+      token: fee.token,
     }
   } catch (e) {
     console.log(e)
@@ -66,31 +74,41 @@ export const getDefaultSelectorOption = (
   tokensOptions: string[],
   defaultSelectedToken: TransferFormDefaultToken
 ) => {
-  let selectedToken = defaultSelectedToken
+  const encodedTokenData = tokensOptions.find((item) => {
+    const { token, network } = tokenSelectorEncoder.decode(item)
 
-  if (!defaultSelectedToken.network || !defaultSelectedToken.tokenId) {
-    const encodedTokenData = tokensOptions.find((item) => {
-      const { token, network } = tokenSelectorEncoder.decode(item)
+    if (defaultSelectedToken.network) {
+      return (
+        token.toLowerCase() === defaultSelectedToken.token.toLowerCase() &&
+        network === defaultSelectedToken.network
+      )
+    }
 
-      if (defaultSelectedToken.network) {
-        return (
-          token === defaultSelectedToken.token &&
-          network === defaultSelectedToken.network
-        )
-      }
+    return (
+      token.toLowerCase() ===
+      defaultSelectedToken.token.toLowerCase()
+    )
+  })
 
-      return token === defaultSelectedToken.token
-    })
+  const decodedTokenData =
+    tokenSelectorEncoder.decode(encodedTokenData || '') || {}
 
-    const { network, tokenId } =
-      tokenSelectorEncoder.decode(encodedTokenData || '') || {}
 
-    selectedToken = {
-      ...defaultSelectedToken,
-      network: defaultSelectedToken.network || network || 'polkadot',
-      tokenId,
-    }
+  let tokenData: TokenData = decodedTokenData
+
+  if (!decodedTokenData.network) {
+    const firstEncodedTokenDataByToken = tokensOptions.find((item) => {
+      const { token } = tokenSelectorEncoder.decode(item)
+      return token.toLowerCase() === defaultSelectedToken.token.toLowerCase()
+    })
+
+    tokenData =
+      tokenSelectorEncoder.decode(firstEncodedTokenDataByToken || '') || {}
   }
 
-  return selectedToken
+  return {
+    token: tokenData.token || 'DOT',
+    network: tokenData.network || 'polkadot',
+    tokenId: tokenData.tokenId,
+  }
 }
diff --git a/src/layout/SideMenuItems.tsx b/src/layout/SideMenuItems.tsx
index 41bddcff..cd6cdb79 100644
--- a/src/layout/SideMenuItems.tsx
+++ b/src/layout/SideMenuItems.tsx
@@ -27,6 +27,7 @@ import { MultiChainInfo } from 'src/rtk/features/multiChainInfo/types'
 import { validatorStakingNetworks } from '../config/app/network'
 import { SiOpencollective } from 'react-icons/si'
 import clsx from 'clsx'
+import { BiTransferAlt } from 'react-icons/bi'
 
 const issuesUrl = 'https://forms.clickup.com/9008022125/f/8ceq0kd-7261/7PAH62P0XTHM9UIV4Q'
 
@@ -99,6 +100,11 @@ export const DefaultMenu = (t: any, isAllNetworksConnected: boolean) => {
       page: [ '/[address]', `/${addressForUrl}` ],
       icon: <HomeOutlined />,
     },
+    {
+      name: 'Transfer',
+      page: [ '/send/[transferType]', '/send/same' ],
+      icon: <SubIcon Icon={BiTransferAlt} />,
+    },
     {
       name: t('crowdloan.crowdloans'),
       page: [ '/[address]/crowdloans', `/${addressForUrl}/crowdloans` ],

From fe114c4d01b73d4097d3763b3a7380891c13cbb1 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 10 Dec 2023 18:54:53 +0200
Subject: [PATCH 05/18] Add change url props to switch tokens func

---
 .../transfer/cross-chain/CrossChainRouteSelector.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index 9e192a79..bec3baeb 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -84,6 +84,7 @@ type CrossChainRouteSelectorContentProps = CrossChainRouteSelectorProps & {
   source: string
   dest: string
   token: string
+  changeUrl?: boolean
 }
 function CrossChainRouteSelectorContent ({
   form,
@@ -97,6 +98,7 @@ function CrossChainRouteSelectorContent ({
   decodeToken: _decodeToken,
   onSourceChainChange,
   onDestChainChange,
+  changeUrl,
   ...props
 }: CrossChainRouteSelectorContentProps) {
   const { t } = useTranslation()
@@ -126,7 +128,7 @@ function CrossChainRouteSelectorContent ({
       return
     }
 
-    router.replace({
+    changeUrl && router.replace({
       pathname: router.pathname,
       query: {
         ...router.query,
@@ -139,8 +141,6 @@ function CrossChainRouteSelectorContent ({
       [destChainFieldName]: source,
       [sourceChainFieldName]: dest,
     })
-
-    console.log(source, dest)
   }
 
   let destOptions = getRouteOptions('dest', { from: source as any, token })

From b577f847fe1d82bf4e9d152c44b92f8357aa3313 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 10 Dec 2023 19:26:38 +0200
Subject: [PATCH 06/18] Refactor files structure

---
 .../balancesTable/utils/useGetTableData.tsx   |  2 +-
 src/components/transfer/TransferModal.tsx     | 14 +--
 .../transfer/TransferPageLayout.tsx           | 14 +--
 .../cross-chain/CrossChainRouteSelector.tsx   |  4 +-
 .../transfer/hooks/useGetTokensOptions.tsx    |  2 +-
 .../{ => transferContent}/RecipientInput.tsx  |  2 +-
 .../transferContent/SuccessContent.tsx        |  2 +-
 .../transfer/transferContent/SuccessModal.tsx |  4 +-
 .../TokenBalanceView.tsx                      |  4 +-
 .../TokenSelector.module.sass                 |  0
 .../{ => transferContent}/TokenSelector.tsx   | 12 +--
 .../{ => transferContent}/TransferFee.tsx     |  2 +-
 .../{ => transferContent}/TransferForm.tsx    | 87 +++++++++----------
 .../transfer/{utils.ts => utils/index.ts}     |  8 +-
 .../transfer/{ => utils}/tokenImages.ts       |  0
 tsconfig.json                                 |  2 +-
 16 files changed, 72 insertions(+), 87 deletions(-)
 rename src/components/transfer/{ => transferContent}/RecipientInput.tsx (92%)
 rename src/components/transfer/{ => transferContent}/TokenBalanceView.tsx (89%)
 rename src/components/transfer/{ => transferContent}/TokenSelector.module.sass (100%)
 rename src/components/transfer/{ => transferContent}/TokenSelector.tsx (94%)
 rename src/components/transfer/{ => transferContent}/TransferFee.tsx (97%)
 rename src/components/transfer/{ => transferContent}/TransferForm.tsx (87%)
 rename src/components/transfer/{utils.ts => utils/index.ts} (91%)
 rename src/components/transfer/{ => utils}/tokenImages.ts (100%)

diff --git a/src/components/table/balancesTable/utils/useGetTableData.tsx b/src/components/table/balancesTable/utils/useGetTableData.tsx
index b50db46c..003cada5 100644
--- a/src/components/table/balancesTable/utils/useGetTableData.tsx
+++ b/src/components/table/balancesTable/utils/useGetTableData.tsx
@@ -13,7 +13,7 @@ import { useManyBalances } from 'src/rtk/features/balances/balancesHooks'
 import { isDataLoading } from '../../utils'
 import { useChainInfo } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
 import { usePricesData } from 'src/rtk/features/prices/pricesHooks'
-import { TransferFormDefaultToken } from 'src/components/transfer/TransferForm'
+import { TransferFormDefaultToken } from '@/components/transfer/transferContent/TransferForm'
 import { useTranslation } from 'react-i18next'
 import { isEmptyArray } from '@subsocial/utils'
 import { BalancesTableInfo } from '../../types'
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index e0a69751..6481f09f 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -1,24 +1,18 @@
-import { Button, Tabs } from 'antd'
+import { Tabs } from 'antd'
 import clsx from 'clsx'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import CustomModal, { CustomModalProps } from '../utils/CustomModal'
 import TransferForm, {
   TransferFormDefaultToken,
   ExtendedTransferFormData,
   DEFAULT_TOKEN,
-} from './TransferForm'
+} from './transferContent/TransferForm'
 import LoadingTransaction from '../utils/LoadingTransaction'
 import { toShortAddress } from '../utils'
 import { MutedSpan } from '../utils/MutedText'
-import {
-  DfCardSideBySideContent,
-  DfCardSideBySideContentProps,
-} from '../utils/DfCard'
-import { useTokenAmountInUsd } from 'src/rtk/features/prices/pricesHooks'
-import { toShortMoney } from '@subsocial/utils'
 import { useIsMyConnectedAddress } from '../providers/MyExtensionAccountsContext'
 import { useTranslation } from 'react-i18next'
-import styles from './TokenSelector.module.sass'
+import styles from './transferContent/TokenSelector.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
 import SuccessContent from './transferContent/SuccessContent'
 
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index dc148946..dac0d7a3 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -5,11 +5,11 @@ import TransferForm, {
   TransferFormDefaultToken,
   ExtendedTransferFormData,
   DEFAULT_TOKEN,
-} from './TransferForm'
+} from './transferContent/TransferForm'
 import LoadingTransaction from '../utils/LoadingTransaction'
 import { MutedSpan } from '../utils/MutedText'
 import { useTranslation } from 'react-i18next'
-import styles from './TokenSelector.module.sass'
+import styles from './transferContent/TokenSelector.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
 import { useRouter } from 'next/router'
 import TransferSuccessModal from './transferContent/SuccessModal'
@@ -32,13 +32,13 @@ const TransferPageLayout = ({
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
-  const [showSuccessModal, setShowSuccessModal] = useState(false)
+  const [ showSuccessModal, setShowSuccessModal ] = useState(false)
 
-  const [currentState, setCurrentState] = useState<'form' | 'loading'>()
-  const [transferData, setTransferData] = useState<
+  const [ currentState, setCurrentState ] = useState<'form' | 'loading'>()
+  const [ transferData, setTransferData ] = useState<
     ExtendedTransferFormData | undefined
   >()
-  const [activeTab, setActiveTab] = useState(
+  const [ activeTab, setActiveTab ] = useState(
     getTabKey((transferType as any) || 'same-chain')
   )
   const router = useRouter()
@@ -57,7 +57,7 @@ const TransferPageLayout = ({
       pathname,
       query: { ...query, transferType: newTransferType },
     })
-  }, [activeTab])
+  }, [ activeTab ])
 
   useEffect(() => {
     setCurrentState('form')
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index bec3baeb..d6b6d6b9 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -1,12 +1,12 @@
 import { Button, Form, FormInstance } from 'antd'
-import React, { HTMLProps, useEffect } from 'react'
+import React, { HTMLProps } from 'react'
 import TransferChainSelectorFormItem from '../form-items/TransferChainSelectorFormItem'
 import { MutedDiv } from '../../utils/MutedText'
 import { BsArrowLeftRight } from 'react-icons/bs'
 import clsx from 'clsx'
 import { getRouteOptions } from '../configs/cross-chain'
 import { RouterFilter } from '@polkawallet/bridge'
-import { tokenSelectorEncoder } from '../TokenSelector'
+import { tokenSelectorEncoder } from '../transferContent/TokenSelector'
 import { checkSameAttributesValues } from 'src/components/utils'
 import { showWarnMessage } from '../../utils/Message'
 import { useTranslation } from 'react-i18next'
diff --git a/src/components/transfer/hooks/useGetTokensOptions.tsx b/src/components/transfer/hooks/useGetTokensOptions.tsx
index 69344d38..3674e16c 100644
--- a/src/components/transfer/hooks/useGetTokensOptions.tsx
+++ b/src/components/transfer/hooks/useGetTokensOptions.tsx
@@ -1,6 +1,6 @@
 import { useChainInfo } from '@/rtk/features/multiChainInfo/multiChainInfoHooks'
 import { useMemo } from 'react'
-import { tokenSelectorEncoder } from '../TokenSelector'
+import { tokenSelectorEncoder } from '../transferContent/TokenSelector'
 
 const useGetTokensOptions = () => {
   const chainsInfo = useChainInfo()
diff --git a/src/components/transfer/RecipientInput.tsx b/src/components/transfer/transferContent/RecipientInput.tsx
similarity index 92%
rename from src/components/transfer/RecipientInput.tsx
rename to src/components/transfer/transferContent/RecipientInput.tsx
index 8405eab0..5863615b 100644
--- a/src/components/transfer/RecipientInput.tsx
+++ b/src/components/transfer/transferContent/RecipientInput.tsx
@@ -1,5 +1,5 @@
 import { useChainInfoByNetwork } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
-import { AddressFormItem, AddressFormItemProps } from './form-items/AddressFormItem'
+import { AddressFormItem, AddressFormItemProps } from '../form-items/AddressFormItem'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
diff --git a/src/components/transfer/transferContent/SuccessContent.tsx b/src/components/transfer/transferContent/SuccessContent.tsx
index 00158957..841c1bec 100644
--- a/src/components/transfer/transferContent/SuccessContent.tsx
+++ b/src/components/transfer/transferContent/SuccessContent.tsx
@@ -3,7 +3,7 @@ import { MutedSpan } from '../../utils/MutedText'
 import { DfCardSideBySideContent, DfCardSideBySideContentProps } from '../../utils/DfCard'
 import { Button } from 'antd'
 import { useTranslation } from 'react-i18next'
-import { ExtendedTransferFormData } from '../TransferForm'
+import { ExtendedTransferFormData } from './TransferForm'
 import { useIsMyConnectedAddress } from '../../providers/MyExtensionAccountsContext'
 import { useTokenAmountInUsd } from '@/rtk/features/prices/pricesHooks'
 import { useRef } from 'react'
diff --git a/src/components/transfer/transferContent/SuccessModal.tsx b/src/components/transfer/transferContent/SuccessModal.tsx
index d61ed9bb..310ed3d8 100644
--- a/src/components/transfer/transferContent/SuccessModal.tsx
+++ b/src/components/transfer/transferContent/SuccessModal.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx'
-import { ExtendedTransferFormData } from '../TransferForm'
+import { ExtendedTransferFormData } from './TransferForm'
 import SuccessContent from './SuccessContent'
 import CustomModal from '@/components/utils/CustomModal'
 import { useTranslation } from 'react-i18next'
-import styles from '../TokenSelector.module.sass'
+import styles from './TokenSelector.module.sass'
 
 type TransferSuccessModalProps = {
   visible: boolean
diff --git a/src/components/transfer/TokenBalanceView.tsx b/src/components/transfer/transferContent/TokenBalanceView.tsx
similarity index 89%
rename from src/components/transfer/TokenBalanceView.tsx
rename to src/components/transfer/transferContent/TokenBalanceView.tsx
index 9255c632..9754579c 100644
--- a/src/components/transfer/TokenBalanceView.tsx
+++ b/src/components/transfer/transferContent/TokenBalanceView.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import React, { HTMLProps } from 'react'
-import { FormatBalance } from '../common/balances'
-import { MutedSpan } from '../utils/MutedText'
+import { FormatBalance } from '../../common/balances'
+import { MutedSpan } from '../../utils/MutedText'
 import { useTransferableBalance } from 'src/utils/hooks/useTransferableBalance'
 
 export type TokenBalanceViewProps = HTMLProps<HTMLDivElement> & {
diff --git a/src/components/transfer/TokenSelector.module.sass b/src/components/transfer/transferContent/TokenSelector.module.sass
similarity index 100%
rename from src/components/transfer/TokenSelector.module.sass
rename to src/components/transfer/transferContent/TokenSelector.module.sass
diff --git a/src/components/transfer/TokenSelector.tsx b/src/components/transfer/transferContent/TokenSelector.tsx
similarity index 94%
rename from src/components/transfer/TokenSelector.tsx
rename to src/components/transfer/transferContent/TokenSelector.tsx
index 1ce27939..b36964e5 100644
--- a/src/components/transfer/TokenSelector.tsx
+++ b/src/components/transfer/transferContent/TokenSelector.tsx
@@ -3,15 +3,15 @@ import clsx from 'clsx'
 import React, { HTMLProps, useMemo } from 'react'
 import { isEthereumAddress } from '@polkadot/util-crypto'
 import { useChainInfo } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
-import { MutedSpan } from '../utils/MutedText'
+import { MutedSpan } from '../../utils/MutedText'
 import SearchableSelect, {
   SearchableSelectOption, SearchableSelectProps,
-} from '../utils/SearchableSelect'
-import DualAvatar from '../utils/DualAvatar'
-import { isTokenBridgeable } from './configs/cross-chain'
-import tokenImages from './tokenImages'
+} from '../../utils/SearchableSelect'
+import DualAvatar from '../../utils/DualAvatar'
+import { isTokenBridgeable } from '../configs/cross-chain'
+import tokenImages from '../utils/tokenImages'
 import styles from './TokenSelector.module.sass'
-import { useMyAddress } from '../providers/MyExtensionAccountsContext'
+import { useMyAddress } from '../../providers/MyExtensionAccountsContext'
 
 export type TokenSelectorProps = HTMLProps<HTMLDivElement> & {
   value?: string
diff --git a/src/components/transfer/TransferFee.tsx b/src/components/transfer/transferContent/TransferFee.tsx
similarity index 97%
rename from src/components/transfer/TransferFee.tsx
rename to src/components/transfer/transferContent/TransferFee.tsx
index 616a6f8d..c9a40d42 100644
--- a/src/components/transfer/TransferFee.tsx
+++ b/src/components/transfer/transferContent/TransferFee.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTokenAmountInUsd } from 'src/rtk/features/prices/pricesHooks'
-import { MutedSpan } from '../utils/MutedText'
+import { MutedSpan } from '../../utils/MutedText'
 import { useFetchTransferFee } from 'src/rtk/features/fees/feesHooks'
 import { TransferFeeParams } from 'src/rtk/features/fees/utils'
 import { useChainToken } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
diff --git a/src/components/transfer/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
similarity index 87%
rename from src/components/transfer/TransferForm.tsx
rename to src/components/transfer/transferContent/TransferForm.tsx
index 8719f86e..c229538c 100644
--- a/src/components/transfer/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -1,15 +1,15 @@
 import { Form, FormProps } from 'antd'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import FormSubmitButton from '../utils/FormSubmitButton'
+import FormSubmitButton from '../../utils/FormSubmitButton'
 import {
   TokenAmountFormItem,
   TokenAmountFormItemProps,
-} from './form-items/TokenAmountFormItem'
+} from '../form-items/TokenAmountFormItem'
 import TokenBalanceView from './TokenBalanceView'
 import TokenSelector, { TokenData, tokenSelectorEncoder } from './TokenSelector'
 import clsx from 'clsx'
-import LazyTxButton, { TxButtonProps } from '../lazy-connection/LazyTxButton'
-import { useMyAddress } from '../providers/MyExtensionAccountsContext'
+import LazyTxButton, { TxButtonProps } from '../../lazy-connection/LazyTxButton'
+import { useMyAddress } from '../../providers/MyExtensionAccountsContext'
 import { useAppDispatch } from 'src/rtk/app/store'
 import {
   fetchBalanceByNetwork,
@@ -17,15 +17,15 @@ import {
 } from 'src/rtk/features/balances/balancesHooks'
 import CrossChainRouteSelector, {
   setCrossChainRouteValue,
-} from './cross-chain/CrossChainRouteSelector'
+} from '../cross-chain/CrossChainRouteSelector'
 import CrossChainTransferButton, {
   CrossChainTransferButtonProps,
-} from './cross-chain/CrossChainTransferButton'
-import { checkSameAttributesValues } from '../utils'
+} from '../cross-chain/CrossChainTransferButton'
+import { checkSameAttributesValues } from '../../utils'
 import RecipientInput from './RecipientInput'
-import { isTokenBridgeable } from './configs/cross-chain'
+import { isTokenBridgeable } from '../configs/cross-chain'
 import { useChainInfo } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
-import { useIsMobileWidthOrDevice } from '../responsive'
+import { useIsMobileWidthOrDevice } from '../../responsive'
 import { useTranslation } from 'react-i18next'
 import { toGenericAccountId } from 'src/rtk/app/util'
 import { CrossChainFee, TransferFee } from './TransferFee'
@@ -35,10 +35,10 @@ import {
   getDefaultSelectorOption,
   getTransferFormData,
   transferFormField,
-} from './utils'
-import { useTransferTxBuilder } from './hooks/useTransferTxBuilder'
-import { useSendEvent } from '../providers/AnalyticContext'
-import useGetTokensOptions from './hooks/useGetTokensOptions'
+} from '../utils'
+import { useTransferTxBuilder } from '../hooks/useTransferTxBuilder'
+import { useSendEvent } from '../../providers/AnalyticContext'
+import useGetTokensOptions from '../hooks/useGetTokensOptions'
 import { useRouter } from 'next/router'
 
 export type ExtendedTransferFormData = TransferFormData & {
@@ -73,7 +73,7 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm({
+export default function TransferForm ({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
@@ -96,10 +96,10 @@ export default function TransferForm({
   const tokensOptions = useGetTokensOptions()
 
   const myAddress = useMyAddress()
-  useFetchBalances(myAddress ? [myAddress] : [])
+  useFetchBalances(myAddress ? [ myAddress ] : [])
 
-  const [form] = Form.useForm()
-  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
+  const [ form ] = Form.useForm()
+  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -126,16 +126,16 @@ export default function TransferForm({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([transferFormField('recipient')])
+      form.validateFields([ transferFormField('recipient') ])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([transferFormField('recipient')])
+        form.validateFields([ transferFormField('recipient') ])
       }
     }
-  }, [crossChain])
+  }, [ crossChain ])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
@@ -172,8 +172,8 @@ export default function TransferForm({
       'source',
       { token: crossChainToken }
     )
-    
-    if(dest) {
+
+    if (dest) {
       const routeValueSet = setCrossChainRouteValue(
         form,
         transferFormField('dest'),
@@ -182,10 +182,9 @@ export default function TransferForm({
         { token: crossChainToken }
       )
 
-      if(!routeValueSet) {
+      if (!routeValueSet) {
         delete router.query.to
       }
-
     }
 
     if (crossChain) {
@@ -217,11 +216,11 @@ export default function TransferForm({
         pathname: router.pathname,
         query: newQuery,
       })
-  }, [tokensOptions.join(','), crossChain])
+  }, [ tokensOptions.join(','), crossChain ])
 
   useEffect(() => {
     resetForm()
-  }, [crossChain])
+  }, [ crossChain ])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
@@ -297,12 +296,12 @@ export default function TransferForm({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
+      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [recipient], destChain)
+        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
       }, WAIT_TIME)
     }
   }
@@ -318,7 +317,7 @@ export default function TransferForm({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [transferFormField('amount')]
+  const requiredTouchedFields = [ transferFormField('amount') ]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
@@ -355,25 +354,17 @@ export default function TransferForm({
           'bs-mt-2 GapMini'
         )}
       >
-        {crossChain ? (
-          <Form.Item
-            name={transferFormField('crossChainToken')}
-            className='m-0'
-          >
-            <TokenSelector
-              setValue={onCrossChainTokenChange}
-              filterCrossChainBridgeable
-            />
-          </Form.Item>
-        ) : (
-          <Form.Item name={transferFormField('token')} className='m-0'>
-            <TokenSelector
-              setValue={onTokenChange}
-              showNetwork
-              changeUrl={changeUrl}
-            />
-          </Form.Item>
-        )}
+        <Form.Item
+          name={transferFormField(crossChain ? 'crossChainToken' : 'token')}
+          className='m-0'
+        >
+          <TokenSelector
+            setValue={crossChain ? onCrossChainTokenChange : onTokenChange}
+            filterCrossChainBridgeable={crossChain}
+            showNetwork={!crossChain}
+            changeUrl={changeUrl}
+          />
+        </Form.Item>
         <TokenBalanceView
           label={`${t('transfer.transferableBalance')}:`}
           network={selectedToken.network}
diff --git a/src/components/transfer/utils.ts b/src/components/transfer/utils/index.ts
similarity index 91%
rename from src/components/transfer/utils.ts
rename to src/components/transfer/utils/index.ts
index 3ec8631f..8d8b97a5 100644
--- a/src/components/transfer/utils.ts
+++ b/src/components/transfer/utils/index.ts
@@ -1,7 +1,7 @@
 import { FormInstance } from 'antd'
-import { TokenData, tokenSelectorEncoder } from './TokenSelector'
-import { getCrossChainAdapter } from './configs/cross-chain'
-import { TransferFormDefaultToken } from './TransferForm'
+import { TokenData, tokenSelectorEncoder } from '../transferContent/TokenSelector'
+import { getCrossChainAdapter } from '../configs/cross-chain'
+import { TransferFormDefaultToken } from '../transferContent/TransferForm'
 
 export type TransferFormData = {
   recipient: string
@@ -23,7 +23,7 @@ export type FormFields = {
 export const transferFormField = (name: keyof FormFields) => name
 
 type MinimalFormInstance = { getFieldsValue: FormInstance['getFieldsValue'] }
-export function getTransferFormData(
+export function getTransferFormData (
   form: MinimalFormInstance,
   crossChain: boolean
 ): TransferFormData {
diff --git a/src/components/transfer/tokenImages.ts b/src/components/transfer/utils/tokenImages.ts
similarity index 100%
rename from src/components/transfer/tokenImages.ts
rename to src/components/transfer/utils/tokenImages.ts
diff --git a/tsconfig.json b/tsconfig.json
index 2bd86c7d..194c794e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,5 +43,5 @@
     "next-env.d.ts",
     "**/*.tsx",
     "src/pages/_app.js"
-  ]
+, "src/components/transfer/utils"  ]
 }

From e833129c9f3cc471e17cbacfc9b363cf80a49479 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 10 Dec 2023 19:31:37 +0200
Subject: [PATCH 07/18] Split styles file

---
 .../TokenSelector.module.sass => Index.module.sass} | 12 ------------
 src/components/transfer/TransferModal.tsx           |  2 +-
 src/components/transfer/TransferPageLayout.tsx      |  2 +-
 .../cross-chain/CrossChainRouteSelector.tsx         |  2 +-
 .../RecipientInput.tsx                              |  2 +-
 .../transfer/form-items/TokenSelector.module.sass   | 13 +++++++++++++
 .../TokenSelector.tsx                               |  0
 .../transfer/hooks/useGetTokensOptions.tsx          |  2 +-
 .../transfer/transferContent/SuccessModal.tsx       |  2 +-
 .../transfer/transferContent/TransferForm.tsx       |  4 ++--
 src/components/transfer/utils/index.ts              |  2 +-
 11 files changed, 22 insertions(+), 21 deletions(-)
 rename src/components/transfer/{transferContent/TokenSelector.module.sass => Index.module.sass} (68%)
 rename src/components/transfer/{transferContent => form-items}/RecipientInput.tsx (92%)
 create mode 100644 src/components/transfer/form-items/TokenSelector.module.sass
 rename src/components/transfer/{transferContent => form-items}/TokenSelector.tsx (100%)

diff --git a/src/components/transfer/transferContent/TokenSelector.module.sass b/src/components/transfer/Index.module.sass
similarity index 68%
rename from src/components/transfer/transferContent/TokenSelector.module.sass
rename to src/components/transfer/Index.module.sass
index ef8312c6..9a494139 100644
--- a/src/components/transfer/transferContent/TokenSelector.module.sass
+++ b/src/components/transfer/Index.module.sass
@@ -1,17 +1,5 @@
 @import 'src/styles/subsocial-vars.scss'
 
-.TokenSelector
-  input
-    caret-color: transparent
-
-  :global(.ant-select-selection-item)
-    line-height: normal !important
-
-.TokenLogo
-  border: none !important
-  box-shadow: 0 0 0 1px #dee2e6
-  margin: 1px
-
 .CustomSuccessModalContainer
   height: auto !important
 
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index 6481f09f..9ba8eca3 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -12,7 +12,7 @@ import { toShortAddress } from '../utils'
 import { MutedSpan } from '../utils/MutedText'
 import { useIsMyConnectedAddress } from '../providers/MyExtensionAccountsContext'
 import { useTranslation } from 'react-i18next'
-import styles from './transferContent/TokenSelector.module.sass'
+import styles from './Index.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
 import SuccessContent from './transferContent/SuccessContent'
 
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index dac0d7a3..53770f7e 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -9,7 +9,7 @@ import TransferForm, {
 import LoadingTransaction from '../utils/LoadingTransaction'
 import { MutedSpan } from '../utils/MutedText'
 import { useTranslation } from 'react-i18next'
-import styles from './transferContent/TokenSelector.module.sass'
+import styles from './Index.module.sass'
 import { isTokenBridgeable } from './configs/cross-chain'
 import { useRouter } from 'next/router'
 import TransferSuccessModal from './transferContent/SuccessModal'
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index d6b6d6b9..15b99636 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -6,7 +6,7 @@ import { BsArrowLeftRight } from 'react-icons/bs'
 import clsx from 'clsx'
 import { getRouteOptions } from '../configs/cross-chain'
 import { RouterFilter } from '@polkawallet/bridge'
-import { tokenSelectorEncoder } from '../transferContent/TokenSelector'
+import { tokenSelectorEncoder } from '../form-items/TokenSelector'
 import { checkSameAttributesValues } from 'src/components/utils'
 import { showWarnMessage } from '../../utils/Message'
 import { useTranslation } from 'react-i18next'
diff --git a/src/components/transfer/transferContent/RecipientInput.tsx b/src/components/transfer/form-items/RecipientInput.tsx
similarity index 92%
rename from src/components/transfer/transferContent/RecipientInput.tsx
rename to src/components/transfer/form-items/RecipientInput.tsx
index 5863615b..699a236e 100644
--- a/src/components/transfer/transferContent/RecipientInput.tsx
+++ b/src/components/transfer/form-items/RecipientInput.tsx
@@ -1,5 +1,5 @@
 import { useChainInfoByNetwork } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
-import { AddressFormItem, AddressFormItemProps } from '../form-items/AddressFormItem'
+import { AddressFormItem, AddressFormItemProps } from './AddressFormItem'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
diff --git a/src/components/transfer/form-items/TokenSelector.module.sass b/src/components/transfer/form-items/TokenSelector.module.sass
new file mode 100644
index 00000000..9b6df8b9
--- /dev/null
+++ b/src/components/transfer/form-items/TokenSelector.module.sass
@@ -0,0 +1,13 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.TokenSelector
+  input
+    caret-color: transparent
+
+  :global(.ant-select-selection-item)
+    line-height: normal !important
+
+.TokenLogo
+  border: none !important
+  box-shadow: 0 0 0 1px #dee2e6
+  margin: 1px
diff --git a/src/components/transfer/transferContent/TokenSelector.tsx b/src/components/transfer/form-items/TokenSelector.tsx
similarity index 100%
rename from src/components/transfer/transferContent/TokenSelector.tsx
rename to src/components/transfer/form-items/TokenSelector.tsx
diff --git a/src/components/transfer/hooks/useGetTokensOptions.tsx b/src/components/transfer/hooks/useGetTokensOptions.tsx
index 3674e16c..19853129 100644
--- a/src/components/transfer/hooks/useGetTokensOptions.tsx
+++ b/src/components/transfer/hooks/useGetTokensOptions.tsx
@@ -1,6 +1,6 @@
 import { useChainInfo } from '@/rtk/features/multiChainInfo/multiChainInfoHooks'
 import { useMemo } from 'react'
-import { tokenSelectorEncoder } from '../transferContent/TokenSelector'
+import { tokenSelectorEncoder } from '../form-items/TokenSelector'
 
 const useGetTokensOptions = () => {
   const chainsInfo = useChainInfo()
diff --git a/src/components/transfer/transferContent/SuccessModal.tsx b/src/components/transfer/transferContent/SuccessModal.tsx
index 310ed3d8..b7634179 100644
--- a/src/components/transfer/transferContent/SuccessModal.tsx
+++ b/src/components/transfer/transferContent/SuccessModal.tsx
@@ -3,7 +3,7 @@ import { ExtendedTransferFormData } from './TransferForm'
 import SuccessContent from './SuccessContent'
 import CustomModal from '@/components/utils/CustomModal'
 import { useTranslation } from 'react-i18next'
-import styles from './TokenSelector.module.sass'
+import styles from '../Index.module.sass'
 
 type TransferSuccessModalProps = {
   visible: boolean
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index c229538c..bab24f2b 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -6,7 +6,7 @@ import {
   TokenAmountFormItemProps,
 } from '../form-items/TokenAmountFormItem'
 import TokenBalanceView from './TokenBalanceView'
-import TokenSelector, { TokenData, tokenSelectorEncoder } from './TokenSelector'
+import TokenSelector, { TokenData, tokenSelectorEncoder } from '../form-items/TokenSelector'
 import clsx from 'clsx'
 import LazyTxButton, { TxButtonProps } from '../../lazy-connection/LazyTxButton'
 import { useMyAddress } from '../../providers/MyExtensionAccountsContext'
@@ -22,7 +22,7 @@ import CrossChainTransferButton, {
   CrossChainTransferButtonProps,
 } from '../cross-chain/CrossChainTransferButton'
 import { checkSameAttributesValues } from '../../utils'
-import RecipientInput from './RecipientInput'
+import RecipientInput from '../form-items/RecipientInput'
 import { isTokenBridgeable } from '../configs/cross-chain'
 import { useChainInfo } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
 import { useIsMobileWidthOrDevice } from '../../responsive'
diff --git a/src/components/transfer/utils/index.ts b/src/components/transfer/utils/index.ts
index 8d8b97a5..bca33d04 100644
--- a/src/components/transfer/utils/index.ts
+++ b/src/components/transfer/utils/index.ts
@@ -1,5 +1,5 @@
 import { FormInstance } from 'antd'
-import { TokenData, tokenSelectorEncoder } from '../transferContent/TokenSelector'
+import { TokenData, tokenSelectorEncoder } from '../form-items/TokenSelector'
 import { getCrossChainAdapter } from '../configs/cross-chain'
 import { TransferFormDefaultToken } from '../transferContent/TransferForm'
 

From be41c54a0882f9737b68b0578a56972bcbfb1db8 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 11 Dec 2023 12:09:54 +0200
Subject: [PATCH 08/18] Add skeleton for price value

---
 .../Creators/modals/AmountInput.tsx           |  6 ++--
 .../Creators/modals/TxButtons.tsx             | 14 +++++---
 .../staking/collators/StakingDashboard.tsx    |  2 +-
 src/components/staking/validators/utils.tsx   |  3 +-
 .../AccountStakeDashboard.tsx                 |  3 +-
 .../stakeModal/StakeModal.tsx                 |  3 +-
 src/components/tips/AmountInput.tsx           |  2 +-
 src/components/transfer/Index.module.sass     | 10 ++++++
 src/components/transfer/TransferModal.tsx     | 10 +++---
 .../transferContent/TokenBalanceView.tsx      | 31 +++++++++++++++---
 .../transfer/transferContent/TransferForm.tsx | 32 +++++++++++--------
 src/rtk/features/balances/balancesHooks.ts    | 30 ++++++++++-------
 src/utils/hooks/useTransferableBalance.ts     | 28 ++++++++++++----
 13 files changed, 121 insertions(+), 53 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/modals/AmountInput.tsx b/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
index 880ba362..422f0fe3 100644
--- a/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
+++ b/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
@@ -48,7 +48,7 @@ export const StakeOrIncreaseStakeAmountInput = (
 
   const { minimumStakingAmount, minimumRemainingAmount } = stakingConsts || {}
 
-  const balancesByCurrency = useBalancesByNetwork({
+  const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({
     address: myAddress,
     network: 'subsocial',
     currency: tokenSymbol,
@@ -225,9 +225,9 @@ export const AmountInput = ({
   }
 
   useEffect(() => {
-    if(inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.focus()
-    } 
+    }
   }, [])
 
   return (
diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
index ccea82c2..8d3464cf 100644
--- a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
+++ b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -49,6 +49,10 @@ type StakingTxButtonProps = CommonTxButtonProps & {
   tx: string
 }
 
+const StakingTxButton = ({
+  amount,
+  spaceId,
+  decimal,
 function StakingTxButton ({
   amount,
   spaceId,
@@ -67,9 +71,11 @@ function StakingTxButton ({
   const { setShowSuccessModal, setStakedSpaceId } = useModalContext()
 
   const onSuccess = () => {
-    fetchBalanceByNetwork(dispatch, [ myAddress || '' ], 'subsocial')
-    fetchBackerInfo(dispatch, [ spaceId ], myAddress || '')
+    fetchBalanceByNetwork(dispatch, [myAddress || ''], 'subsocial')
+    fetchBackerInfo(dispatch, [spaceId], myAddress || '')
     fetchGeneralEraInfo(dispatch)
+    fetchEraStakes(dispatch, [spaceId], eraInfo?.info?.currentEra || '0')
+
     fetchEraStakes(dispatch, [ spaceId ], eraInfo?.info?.currentEra || '0')
 
     fetchBackerLedger(dispatch, myAddress || '')
@@ -86,7 +92,7 @@ function StakingTxButton ({
   const buildParams = () => {
     const amountWithDecimals = getBalanceWithDecimal(amount || '0', decimal)
 
-    return [ spaceId, amountWithDecimals.toString() ]
+    return [spaceId, amountWithDecimals.toString()]
   }
 
   const Component: React.FunctionComponent<{ onClick?: () => void }> = (
@@ -129,7 +135,7 @@ export function StakeOrIncreaseTxButton (props: CommonTxButtonProps) {
   const sendEvent = useSendEvent()
   const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
 
-  const balancesByCurrency = useBalancesByNetwork({
+  const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({
     address: myAddress,
     network: 'subsocial',
     currency: props.tokenSymbol,
diff --git a/src/components/staking/collators/StakingDashboard.tsx b/src/components/staking/collators/StakingDashboard.tsx
index 5cdc87bd..cec245f2 100644
--- a/src/components/staking/collators/StakingDashboard.tsx
+++ b/src/components/staking/collators/StakingDashboard.tsx
@@ -95,7 +95,7 @@ const StakingDashboard = ({ network }: StakingDashboardProps) => {
   const decimal = getTokenDecimals(network, chainsInfo)
   const nativeSymbol = getTokenSymbol(network, chainsInfo)
 
-  const balancesByCurrency = useBalancesByNetwork({
+  const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({
     address: toGenericAccountId(myAddress),
     network,
     currency: nativeSymbol,
diff --git a/src/components/staking/validators/utils.tsx b/src/components/staking/validators/utils.tsx
index 601716e6..6248097c 100644
--- a/src/components/staking/validators/utils.tsx
+++ b/src/components/staking/validators/utils.tsx
@@ -203,7 +203,8 @@ export const BondInput = ({ form, network, type = 'stake', isModal = false, amou
   const decimals = getTokenDecimals(network, chainsInfo)
   const nativeSymbol = getTokenSymbol(network, chainsInfo)
 
-  const balancesByCurrency = useBalancesByNetwork({ address: toGenericAccountId(myAddress), network, currency: nativeSymbol })
+  const { currencyBalance: balancesByCurrency } = 
+    useBalancesByNetwork({ address: toGenericAccountId(myAddress), network, currency: nativeSymbol })
 
   const availableBalance = balancesByCurrency ? getTransferableBalance(balancesByCurrency) : new BN(0)
 
diff --git a/src/components/staking/validators/validatorStaking/AccountStakeDashboard.tsx b/src/components/staking/validators/validatorStaking/AccountStakeDashboard.tsx
index ad24141f..af5007e9 100644
--- a/src/components/staking/validators/validatorStaking/AccountStakeDashboard.tsx
+++ b/src/components/staking/validators/validatorStaking/AccountStakeDashboard.tsx
@@ -44,7 +44,8 @@ const AccountStakingDashboard = ({ network }: AccountStakingDashboardProps) => {
 
   const activeStakedValue = stakingLedger?.active ? convertToBalanceWithDecimal(stakingLedger.active, decimals) : BIGNUMBER_ZERO
   
-  const balancesByCurrency = useBalancesByNetwork({ address: toGenericAccountId(myAddress), network, currency: symbol })
+  const { currencyBalance: balancesByCurrency } = 
+    useBalancesByNetwork({ address: toGenericAccountId(myAddress), network, currency: symbol })
 
   const activeStakedWithDecimals = new BN(stakingLedger?.active || '0')
   const balanceValue = new BN(balancesByCurrency?.totalBalance || '0')
diff --git a/src/components/table/collatorStakingTable/stakeModal/StakeModal.tsx b/src/components/table/collatorStakingTable/stakeModal/StakeModal.tsx
index 029901a3..0fd7c0a1 100644
--- a/src/components/table/collatorStakingTable/stakeModal/StakeModal.tsx
+++ b/src/components/table/collatorStakingTable/stakeModal/StakeModal.tsx
@@ -49,7 +49,8 @@ const StakingModalBody = ({ address, network, hide, action }: StakingModalBodyPr
   const decimals = tokenDecimals[0]
 
   const currency = nativeToken || tokenSymbols[0]
-  const balancesByCurrency = useBalancesByNetwork({ address: toGenericAccountId(delegator), network, currency })
+  const { currencyBalance: balancesByCurrency } = 
+    useBalancesByNetwork({ address: toGenericAccountId(delegator), network, currency })
 
   const availableBalance = balancesByCurrency ? getTransferableBalance(balancesByCurrency) : BN_ZERO
 
diff --git a/src/components/tips/AmountInput.tsx b/src/components/tips/AmountInput.tsx
index 63f38478..93db8f3e 100644
--- a/src/components/tips/AmountInput.tsx
+++ b/src/components/tips/AmountInput.tsx
@@ -23,7 +23,7 @@ export const TipAmountInput = React.memo(({ form }: ContributionAmountInputProps
   const decimals = infoByNetwork?.tokenDecimals[0]
   const { t } = useTranslation()
 
-  const balancesByCurrency = useBalancesByNetwork({ address: sender, network, currency })
+  const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({ address: sender, network, currency })
   const availableBalance = balancesByCurrency ? getTransferableBalance(balancesByCurrency) : BN_ZERO
 
   const maxAmount = decimals ? convertToBalanceWithDecimal(availableBalance.toString(), decimals) : BIGNUMBER_ZERO
diff --git a/src/components/transfer/Index.module.sass b/src/components/transfer/Index.module.sass
index 9a494139..1bbea2ec 100644
--- a/src/components/transfer/Index.module.sass
+++ b/src/components/transfer/Index.module.sass
@@ -23,3 +23,13 @@
   color: $color_font_normal
   font-size: $font_big
   margin-bottom: $space_mini
+
+.BalanceSkeleton
+  width: 5rem
+
+  \:global .ant-skeleton-title
+    width: 100% !important
+    margin: 0 !important
+
+  \:global .ant-skeleton-paragraph
+    display: none
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index 9ba8eca3..afd32d5d 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -24,7 +24,7 @@ type TransferModalProps = CustomModalProps & {
 type Tabs = 'same-chain' | 'cross-chain'
 const getTabKey = (tab: Tabs) => tab
 
-export default function TransferModal ({
+export default function TransferModal({
   defaultSelectedToken = DEFAULT_TOKEN,
   className,
   defaultRecipient,
@@ -32,13 +32,13 @@ export default function TransferModal ({
 }: TransferModalProps) {
   const { t } = useTranslation()
 
-  const [ currentState, setCurrentState ] = useState<
+  const [currentState, setCurrentState] = useState<
     'form' | 'loading' | 'success'
   >('form')
-  const [ transferData, setTransferData ] = useState<
+  const [transferData, setTransferData] = useState<
     ExtendedTransferFormData | undefined
   >()
-  const [ activeTab, setActiveTab ] = useState(getTabKey('same-chain'))
+  const [activeTab, setActiveTab] = useState(getTabKey('same-chain'))
   const isSendingToSelf = useIsMyConnectedAddress(transferData?.recipient ?? '')
 
   useEffect(() => {
@@ -46,7 +46,7 @@ export default function TransferModal ({
     setActiveTab('same-chain')
     setCurrentState('form')
     setTransferData(undefined)
-  }, [ props.visible ])
+  }, [props.visible])
 
   const txSummary = (
     <span className='d-block'>
diff --git a/src/components/transfer/transferContent/TokenBalanceView.tsx b/src/components/transfer/transferContent/TokenBalanceView.tsx
index 9754579c..2f4bc92f 100644
--- a/src/components/transfer/transferContent/TokenBalanceView.tsx
+++ b/src/components/transfer/transferContent/TokenBalanceView.tsx
@@ -3,6 +3,8 @@ import React, { HTMLProps } from 'react'
 import { FormatBalance } from '../../common/balances'
 import { MutedSpan } from '../../utils/MutedText'
 import { useTransferableBalance } from 'src/utils/hooks/useTransferableBalance'
+import { Skeleton } from 'antd'
+import styles from '../Index.module.sass'
 
 export type TokenBalanceViewProps = HTMLProps<HTMLDivElement> & {
   network?: string
@@ -11,19 +13,38 @@ export type TokenBalanceViewProps = HTMLProps<HTMLDivElement> & {
   address?: string
 }
 
-export default function TokenBalanceView ({ label, network, token, address, className, ...props }: TokenBalanceViewProps) {
-  const { transferableBalance, tokenDecimal } = useTransferableBalance(token, network ?? '', address)
+export default function TokenBalanceView({
+  label,
+  network,
+  token,
+  address,
+  className,
+  ...props
+}: TokenBalanceViewProps) {
+  const { transferableBalance, tokenDecimal, loading } = useTransferableBalance(
+    token,
+    network ?? '',
+    address
+  )
 
   return (
-    <div className={clsx('d-flex align-items-baseline', className)} {...props}>
+    <div className={clsx('d-flex align-items-center', className)} {...props}>
       {label && (
         <div className='mr-1'>
           <MutedSpan>{label}</MutedSpan>
         </div>
       )}
       <div className='font-weight-semibold'>
-        <FormatBalance value={transferableBalance} decimals={tokenDecimal} currency={token} />
+        {loading ? (
+          <Skeleton paragraph={{ rows: 0 }} className={styles.BalanceSkeleton} />
+        ) : (
+          <FormatBalance
+            value={transferableBalance}
+            decimals={tokenDecimal}
+            currency={token}
+          />
+        )}
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index bab24f2b..aabba664 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -6,13 +6,17 @@ import {
   TokenAmountFormItemProps,
 } from '../form-items/TokenAmountFormItem'
 import TokenBalanceView from './TokenBalanceView'
-import TokenSelector, { TokenData, tokenSelectorEncoder } from '../form-items/TokenSelector'
+import TokenSelector, {
+  TokenData,
+  tokenSelectorEncoder,
+} from '../form-items/TokenSelector'
 import clsx from 'clsx'
 import LazyTxButton, { TxButtonProps } from '../../lazy-connection/LazyTxButton'
 import { useMyAddress } from '../../providers/MyExtensionAccountsContext'
 import { useAppDispatch } from 'src/rtk/app/store'
 import {
   fetchBalanceByNetwork,
+  useFetchBalanceByNetwork,
   useFetchBalances,
 } from 'src/rtk/features/balances/balancesHooks'
 import CrossChainRouteSelector, {
@@ -73,7 +77,7 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm ({
+export default function TransferForm({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
@@ -96,14 +100,15 @@ export default function TransferForm ({
   const tokensOptions = useGetTokensOptions()
 
   const myAddress = useMyAddress()
-  useFetchBalances(myAddress ? [ myAddress ] : [])
 
-  const [ form ] = Form.useForm()
-  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
+  const [form] = Form.useForm()
+  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
 
+  useFetchBalanceByNetwork(selectedToken.network || '', myAddress)
+
   const {
     getSameChainTransferExtrinsic,
     crossChainParamBuilder,
@@ -126,16 +131,16 @@ export default function TransferForm ({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([ transferFormField('recipient') ])
+      form.validateFields([transferFormField('recipient')])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([ transferFormField('recipient') ])
+        form.validateFields([transferFormField('recipient')])
       }
     }
-  }, [ crossChain ])
+  }, [crossChain])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
@@ -216,11 +221,11 @@ export default function TransferForm ({
         pathname: router.pathname,
         query: newQuery,
       })
-  }, [ tokensOptions.join(','), crossChain ])
+  }, [tokensOptions.join(','), crossChain])
 
   useEffect(() => {
     resetForm()
-  }, [ crossChain ])
+  }, [crossChain])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
@@ -296,12 +301,12 @@ export default function TransferForm ({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
+      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
+        fetchBalanceByNetwork(dispatch, [recipient], destChain)
       }, WAIT_TIME)
     }
   }
@@ -317,7 +322,7 @@ export default function TransferForm ({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [ transferFormField('amount') ]
+  const requiredTouchedFields = [transferFormField('amount')]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
@@ -333,6 +338,7 @@ export default function TransferForm ({
         pathname: router.pathname,
         query: { ...router.query, from: source },
       })
+
     setSelectedToken((prev) => ({ ...prev, network: source }))
   }
 
diff --git a/src/rtk/features/balances/balancesHooks.ts b/src/rtk/features/balances/balancesHooks.ts
index 13a6c3e5..88bb6f09 100644
--- a/src/rtk/features/balances/balancesHooks.ts
+++ b/src/rtk/features/balances/balancesHooks.ts
@@ -38,14 +38,14 @@ export const useFetchBalanceByNetwork = (network: string, address?: string) => {
   const dispatch = useAppDispatch()
 
   useEffect(() => {
-    if (!address) return
+    if (!address || !network) return
 
     const getBalanceByNetwork = () => {
-      fetchBalanceByNetwork(dispatch, [ address ], network)
+      fetchBalanceByNetwork(dispatch, [address], network)
     }
 
     getBalanceByNetwork()
-  }, [ address ])
+  }, [address, network])
 }
 
 export const useFetchBalances = (addressesToFetch?: string[]) => {
@@ -82,10 +82,10 @@ export const useFetchBalances = (addressesToFetch?: string[]) => {
     }
 
     getBalances()
-  }, [ addresses?.join(','), selectedBalancesValues.length ])
+  }, [addresses?.join(','), selectedBalancesValues.length])
 }
 
-export const useBalances = (address?: string) =>
+export const useBalances = (address?: string): BalancesEntity | undefined =>
   useAppSelector<BalancesEntity | undefined>((state) =>
     selectBalances(state, toGenericAccountId(address))
   )
@@ -100,13 +100,19 @@ export const useBalancesByNetwork = ({
   address,
   network,
   currency,
-}: UseBalancesByNetworkProps): AccountInfoByChain | undefined => {
-  const balancesByNetwork = useBalances(address)?.balances?.find(
-    (x) => x.network === network
-  )
-  if (!currency) return undefined
-
-  return balancesByNetwork?.info[currency]
+}: UseBalancesByNetworkProps): {
+  currencyBalance: AccountInfoByChain | undefined
+  loading: boolean
+} => {
+  const { balances, loading } = useBalances(address) || {}
+  const balancesByNetwork = balances?.find((x) => x.network === network)
+
+  if (!currency) return { currencyBalance: undefined, loading: false }
+
+  return {
+    currencyBalance: balancesByNetwork?.info[currency],
+    loading: loading ?? false,
+  }
 }
 
 export const useManyBalances = (accounts?: string[]) => {
diff --git a/src/utils/hooks/useTransferableBalance.ts b/src/utils/hooks/useTransferableBalance.ts
index df29e128..075344ef 100644
--- a/src/utils/hooks/useTransferableBalance.ts
+++ b/src/utils/hooks/useTransferableBalance.ts
@@ -4,17 +4,33 @@ import { useBalancesByNetwork } from 'src/rtk/features/balances/balancesHooks'
 import { useChainToken } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
 import { getTransferableBalance } from '../balance'
 
-export const useTransferableBalance = (token: string, network: string, address?: string) => {
+export const useTransferableBalance = (
+  token: string,
+  network: string,
+  address?: string
+) => {
   const myAddress = useMyAddress()
   const usedAddress = address || myAddress
-  const balance = useBalancesByNetwork({
+  const { currencyBalance: balance, loading } = useBalancesByNetwork({
     address: usedAddress,
     currency: token,
-    network
+    network,
   })
   const transferableBalance = getTransferableBalance(balance)
-  
+
   const { tokenDecimal, existentialDeposit } = useChainToken(network, token)
-  const formattedBalance = formatBalance(transferableBalance, { forceUnit: '-', decimals: tokenDecimal, withSi: false })
-  return { transferableBalance, formattedTransferableBalance: parseFloat(formattedBalance.replace(/,/g, '')), tokenDecimal, existentialDeposit }
+  const formattedBalance = formatBalance(transferableBalance, {
+    forceUnit: '-',
+    decimals: tokenDecimal,
+    withSi: false,
+  })
+  return {
+    transferableBalance,
+    formattedTransferableBalance: parseFloat(
+      formattedBalance.replace(/,/g, '')
+    ),
+    tokenDecimal,
+    existentialDeposit,
+    loading
+  }
 }

From 72b09dee92a72cc00dd0d11f3fa148c6cdb434a4 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 11 Dec 2023 16:08:36 +0200
Subject: [PATCH 09/18] Use yarn lint

---
 .../Creators/modals/TxButtons.tsx             |  8 +++----
 src/components/transfer/TransferModal.tsx     | 10 ++++----
 .../transferContent/TokenBalanceView.tsx      |  2 +-
 .../transfer/transferContent/TransferForm.tsx | 23 +++++++++----------
 src/rtk/features/balances/balancesHooks.ts    |  6 ++---
 5 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
index 8d3464cf..1724b107 100644
--- a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
+++ b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -71,10 +71,10 @@ function StakingTxButton ({
   const { setShowSuccessModal, setStakedSpaceId } = useModalContext()
 
   const onSuccess = () => {
-    fetchBalanceByNetwork(dispatch, [myAddress || ''], 'subsocial')
-    fetchBackerInfo(dispatch, [spaceId], myAddress || '')
+    fetchBalanceByNetwork(dispatch, [ myAddress || '' ], 'subsocial')
+    fetchBackerInfo(dispatch, [ spaceId ], myAddress || '')
     fetchGeneralEraInfo(dispatch)
-    fetchEraStakes(dispatch, [spaceId], eraInfo?.info?.currentEra || '0')
+    fetchEraStakes(dispatch, [ spaceId ], eraInfo?.info?.currentEra || '0')
 
     fetchEraStakes(dispatch, [ spaceId ], eraInfo?.info?.currentEra || '0')
 
@@ -92,7 +92,7 @@ function StakingTxButton ({
   const buildParams = () => {
     const amountWithDecimals = getBalanceWithDecimal(amount || '0', decimal)
 
-    return [spaceId, amountWithDecimals.toString()]
+    return [ spaceId, amountWithDecimals.toString() ]
   }
 
   const Component: React.FunctionComponent<{ onClick?: () => void }> = (
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index afd32d5d..9ba8eca3 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -24,7 +24,7 @@ type TransferModalProps = CustomModalProps & {
 type Tabs = 'same-chain' | 'cross-chain'
 const getTabKey = (tab: Tabs) => tab
 
-export default function TransferModal({
+export default function TransferModal ({
   defaultSelectedToken = DEFAULT_TOKEN,
   className,
   defaultRecipient,
@@ -32,13 +32,13 @@ export default function TransferModal({
 }: TransferModalProps) {
   const { t } = useTranslation()
 
-  const [currentState, setCurrentState] = useState<
+  const [ currentState, setCurrentState ] = useState<
     'form' | 'loading' | 'success'
   >('form')
-  const [transferData, setTransferData] = useState<
+  const [ transferData, setTransferData ] = useState<
     ExtendedTransferFormData | undefined
   >()
-  const [activeTab, setActiveTab] = useState(getTabKey('same-chain'))
+  const [ activeTab, setActiveTab ] = useState(getTabKey('same-chain'))
   const isSendingToSelf = useIsMyConnectedAddress(transferData?.recipient ?? '')
 
   useEffect(() => {
@@ -46,7 +46,7 @@ export default function TransferModal({
     setActiveTab('same-chain')
     setCurrentState('form')
     setTransferData(undefined)
-  }, [props.visible])
+  }, [ props.visible ])
 
   const txSummary = (
     <span className='d-block'>
diff --git a/src/components/transfer/transferContent/TokenBalanceView.tsx b/src/components/transfer/transferContent/TokenBalanceView.tsx
index 2f4bc92f..dea8f087 100644
--- a/src/components/transfer/transferContent/TokenBalanceView.tsx
+++ b/src/components/transfer/transferContent/TokenBalanceView.tsx
@@ -13,7 +13,7 @@ export type TokenBalanceViewProps = HTMLProps<HTMLDivElement> & {
   address?: string
 }
 
-export default function TokenBalanceView({
+export default function TokenBalanceView ({
   label,
   network,
   token,
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index aabba664..c7197390 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -17,7 +17,6 @@ import { useAppDispatch } from 'src/rtk/app/store'
 import {
   fetchBalanceByNetwork,
   useFetchBalanceByNetwork,
-  useFetchBalances,
 } from 'src/rtk/features/balances/balancesHooks'
 import CrossChainRouteSelector, {
   setCrossChainRouteValue,
@@ -77,7 +76,7 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm({
+export default function TransferForm ({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
@@ -101,8 +100,8 @@ export default function TransferForm({
 
   const myAddress = useMyAddress()
 
-  const [form] = Form.useForm()
-  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
+  const [ form ] = Form.useForm()
+  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -131,16 +130,16 @@ export default function TransferForm({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([transferFormField('recipient')])
+      form.validateFields([ transferFormField('recipient') ])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([transferFormField('recipient')])
+        form.validateFields([ transferFormField('recipient') ])
       }
     }
-  }, [crossChain])
+  }, [ crossChain ])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
@@ -221,11 +220,11 @@ export default function TransferForm({
         pathname: router.pathname,
         query: newQuery,
       })
-  }, [tokensOptions.join(','), crossChain])
+  }, [ tokensOptions.join(','), crossChain ])
 
   useEffect(() => {
     resetForm()
-  }, [crossChain])
+  }, [ crossChain ])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
@@ -301,12 +300,12 @@ export default function TransferForm({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
+      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [recipient], destChain)
+        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
       }, WAIT_TIME)
     }
   }
@@ -322,7 +321,7 @@ export default function TransferForm({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [transferFormField('amount')]
+  const requiredTouchedFields = [ transferFormField('amount') ]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
diff --git a/src/rtk/features/balances/balancesHooks.ts b/src/rtk/features/balances/balancesHooks.ts
index 88bb6f09..d20f9037 100644
--- a/src/rtk/features/balances/balancesHooks.ts
+++ b/src/rtk/features/balances/balancesHooks.ts
@@ -41,11 +41,11 @@ export const useFetchBalanceByNetwork = (network: string, address?: string) => {
     if (!address || !network) return
 
     const getBalanceByNetwork = () => {
-      fetchBalanceByNetwork(dispatch, [address], network)
+      fetchBalanceByNetwork(dispatch, [ address ], network)
     }
 
     getBalanceByNetwork()
-  }, [address, network])
+  }, [ address, network ])
 }
 
 export const useFetchBalances = (addressesToFetch?: string[]) => {
@@ -82,7 +82,7 @@ export const useFetchBalances = (addressesToFetch?: string[]) => {
     }
 
     getBalances()
-  }, [addresses?.join(','), selectedBalancesValues.length])
+  }, [ addresses?.join(','), selectedBalancesValues.length ])
 }
 
 export const useBalances = (address?: string): BalancesEntity | undefined =>

From 7b8c63295b17bacbd5d16513a74b3fb6797dd103 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 11 Dec 2023 19:16:02 +0200
Subject: [PATCH 10/18] Fix source selector

---
 .../parseData/parseBalanceInfo.tsx            |  4 +-
 .../balancesTable/utils/useGetTableData.tsx   | 10 +--
 src/components/transfer/TransferModal.tsx     |  4 +-
 .../transfer/TransferPageLayout.tsx           |  1 -
 .../transfer/configs/cross-chain.ts           |  2 +-
 .../cross-chain/CrossChainRouteSelector.tsx   |  7 +-
 .../transfer/form-items/TokenSelector.tsx     |  2 +-
 .../transfer/transferContent/TransferForm.tsx | 76 ++++++++++---------
 src/components/transfer/utils/index.ts        | 75 ++++++++++--------
 src/rtk/features/balances/balancesHooks.ts    |  2 +-
 10 files changed, 102 insertions(+), 81 deletions(-)

diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index e4839d6e..0a591912 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -76,9 +76,9 @@ const parseBalancesEntities = (
 
   Object.entries(balancesEntities).forEach(([ account, { balances } ]) => {
     balances?.forEach((balance) => {
-      const { network, info: balanceInfo } = balance
+      const { network, info: balanceInfo } = balance || {}
 
-      const chainInfo = chainsInfo[network]
+      const chainInfo = chainsInfo[network] || {}
 
       const { ss58Format } = chainInfo || {}
 
diff --git a/src/components/table/balancesTable/utils/useGetTableData.tsx b/src/components/table/balancesTable/utils/useGetTableData.tsx
index 003cada5..33a4cd8d 100644
--- a/src/components/table/balancesTable/utils/useGetTableData.tsx
+++ b/src/components/table/balancesTable/utils/useGetTableData.tsx
@@ -13,7 +13,6 @@ import { useManyBalances } from 'src/rtk/features/balances/balancesHooks'
 import { isDataLoading } from '../../utils'
 import { useChainInfo } from 'src/rtk/features/multiChainInfo/multiChainInfoHooks'
 import { usePricesData } from 'src/rtk/features/prices/pricesHooks'
-import { TransferFormDefaultToken } from '@/components/transfer/transferContent/TransferForm'
 import { useTranslation } from 'react-i18next'
 import { isEmptyArray } from '@subsocial/utils'
 import { BalancesTableInfo } from '../../types'
@@ -27,6 +26,7 @@ import { useResponsiveSize } from 'src/components/responsive'
 import { calculateDashboardBalances } from '../calculateDashboardBalances'
 import { getBalancesFromStoreByAddresses } from '.'
 import BN from 'bignumber.js'
+import { TransferFormDefaultToken } from '@/components/transfer/transferContent/TransferForm'
 
 type TransferModalState = {
   open: boolean
@@ -130,15 +130,15 @@ export const useGetTableData = (
           if (!balancesEntity.balances) return
 
           balancesEntity.balances?.forEach((balance) => {
-            const { nativeToken, tokenSymbols } = chainsInfo[balance.network]
+            const { nativeToken, tokenSymbols } = chainsInfo[balance?.network] || {}
 
-            const nativeSymbol = nativeToken || tokenSymbols[0]
+            const nativeSymbol = nativeToken || tokenSymbols?.[0]
 
-            const nativeBalance = balance.info[nativeSymbol]?.totalBalance
+            const nativeBalance = balance?.info[nativeSymbol]?.totalBalance
 
             if (!new BN(nativeBalance).isZero()) {
               sendEvent('balances_tokens_found', {
-                network: balance.network,
+                network: balance?.network,
               })
             }
           })
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index 9ba8eca3..d7700f12 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -43,9 +43,10 @@ export default function TransferModal ({
 
   useEffect(() => {
     if (!props.visible) return
+
+    setTransferData(undefined)
     setActiveTab('same-chain')
     setCurrentState('form')
-    setTransferData(undefined)
   }, [ props.visible ])
 
   const txSummary = (
@@ -99,6 +100,7 @@ export default function TransferModal ({
       onTransferFailed={() => setCurrentState('form')}
       onTransferSuccess={() => setCurrentState('success')}
       className='flex-fill'
+      isModal
       defaultSelectedToken={defaultSelectedToken}
       crossChain={activeTab === getTabKey('cross-chain')}
     >
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index 53770f7e..96aff7ba 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -86,7 +86,6 @@ const TransferPageLayout = ({
         className='flex-fill h-100'
         defaultSelectedToken={defaultSelectedToken}
         crossChain={activeTab === getTabKey('cross-chain')}
-        changeUrl
       >
         {(formSection, buttonSection) => (
           <div className={styles.TransferLayout}>
diff --git a/src/components/transfer/configs/cross-chain.ts b/src/components/transfer/configs/cross-chain.ts
index 5eadb6f2..eb3deaa0 100644
--- a/src/components/transfer/configs/cross-chain.ts
+++ b/src/components/transfer/configs/cross-chain.ts
@@ -78,7 +78,7 @@ const availableAdapters: Record<string, { adapter: BaseCrossChainAdapter; chainN
   shadow: {
     adapter: new ShadowAdapter(),
   },
-  'darwinia-crab-parachain': {
+  'darwinia-crab': {
     adapter: new CrabAdapter(),
     chainName: 'crab',
   },
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index 15b99636..b6166972 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -21,6 +21,7 @@ export type CrossChainRouteSelectorProps = Omit<
   destChainFieldName: string
   tokenFieldName: string
   decodeToken?: boolean
+  isModal?: boolean
   onSourceChainChange?: (sourceChain: string) => void
   onDestChainChange?: (destChain: string) => void
 }
@@ -84,7 +85,7 @@ type CrossChainRouteSelectorContentProps = CrossChainRouteSelectorProps & {
   source: string
   dest: string
   token: string
-  changeUrl?: boolean
+  isModal?: boolean
 }
 function CrossChainRouteSelectorContent ({
   form,
@@ -98,7 +99,7 @@ function CrossChainRouteSelectorContent ({
   decodeToken: _decodeToken,
   onSourceChainChange,
   onDestChainChange,
-  changeUrl,
+  isModal,
   ...props
 }: CrossChainRouteSelectorContentProps) {
   const { t } = useTranslation()
@@ -128,7 +129,7 @@ function CrossChainRouteSelectorContent ({
       return
     }
 
-    changeUrl && router.replace({
+    !isModal && router.replace({
       pathname: router.pathname,
       query: {
         ...router.query,
diff --git a/src/components/transfer/form-items/TokenSelector.tsx b/src/components/transfer/form-items/TokenSelector.tsx
index b36964e5..96fbb916 100644
--- a/src/components/transfer/form-items/TokenSelector.tsx
+++ b/src/components/transfer/form-items/TokenSelector.tsx
@@ -19,7 +19,7 @@ export type TokenSelectorProps = HTMLProps<HTMLDivElement> & {
   showNetwork?: boolean
   filterCrossChainBridgeable?: boolean
   selectProps?: Omit<SearchableSelectProps, 'options'>
-  changeUrl?: boolean
+  isModal?: boolean
 }
 
 export type TokenData = {
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index c7197390..59292534 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -61,7 +61,7 @@ export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
   onTransferClick?: (param: ExtendedTransferFormData) => void
   onTransferSuccess?: (param: ExtendedTransferFormData) => void
   onTransferFailed?: () => void
-  changeUrl?: boolean
+  isModal?: boolean
   dest?: string
   children?: (
     formSection: JSX.Element,
@@ -76,14 +76,14 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm ({
+export default function TransferForm({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
   onTransferClick,
   onTransferSuccess,
   onTransferFailed,
-  changeUrl = false,
+  isModal = false,
   dest,
   children,
   ...props
@@ -100,8 +100,8 @@ export default function TransferForm ({
 
   const myAddress = useMyAddress()
 
-  const [ form ] = Form.useForm()
-  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
+  const [form] = Form.useForm()
+  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -130,25 +130,24 @@ export default function TransferForm ({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([ transferFormField('recipient') ])
+      form.validateFields([transferFormField('recipient')])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([ transferFormField('recipient') ])
+        form.validateFields([transferFormField('recipient')])
       }
     }
-  }, [ crossChain ])
+  }, [crossChain])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
     form.resetFields()
 
-    const selectedTokenFromSelectorOptions = getDefaultSelectorOption(
-      tokensOptions,
-      defaultSelectedToken
-    )
+    const selectedTokenFromSelectorOptions = !isModal
+      ? getDefaultSelectorOption(tokensOptions, defaultSelectedToken, crossChain)
+      : defaultSelectedToken
 
     form.setFieldsValue({
       [transferFormField('token')]: tokenSelectorEncoder.encode(
@@ -200,37 +199,43 @@ export default function TransferForm ({
       setSelectedToken(selectedTokenFromSelectorOptions)
     }
 
-    if (!crossChain) {
-      delete router.query.to
-    }
+    if (!isModal) {
+      if (!crossChain) {
+        delete router.query.to
+      }
 
-    const newQuery = {
-      ...router.query,
-      transferType: !crossChain ? 'same' : 'cross',
-      asset: selectedTokenFromSelectorOptions?.token,
-      from: selectedTokenFromSelectorOptions?.network || undefined,
-    }
+      const newQuery = {
+        ...router.query,
+        transferType: !crossChain ? 'same' : 'cross',
+        asset: selectedTokenFromSelectorOptions.token,
+        from: selectedTokenFromSelectorOptions?.network || undefined,
+      }
 
-    if (!selectedTokenFromSelectorOptions.network) {
-      delete newQuery.from
-    }
+      if (!selectedTokenFromSelectorOptions.network) {
+        delete newQuery.from
+      }
 
-    changeUrl &&
       router.replace({
         pathname: router.pathname,
         query: newQuery,
       })
-  }, [ tokensOptions.join(','), crossChain ])
+    }
+  }, [
+    tokensOptions.join(','),
+    crossChain,
+    defaultSelectedToken.network,
+    defaultSelectedToken.token,
+  ])
 
   useEffect(() => {
     resetForm()
-  }, [ crossChain ])
+  }, [resetForm])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
     const decodedToken = tokenSelectorEncoder.decode(token)
 
-    changeUrl &&
+    !isModal &&
       router.replace({
         pathname: router.pathname,
         query: {
@@ -253,7 +258,7 @@ export default function TransferForm ({
 
     const decodedToken = tokenSelectorEncoder.decode(token)
 
-    changeUrl &&
+    !isModal &&
       router.replace({
         pathname: router.pathname,
         query: {
@@ -300,12 +305,12 @@ export default function TransferForm ({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
+      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
+        fetchBalanceByNetwork(dispatch, [recipient], destChain)
       }, WAIT_TIME)
     }
   }
@@ -321,7 +326,7 @@ export default function TransferForm ({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [ transferFormField('amount') ]
+  const requiredTouchedFields = [transferFormField('amount')]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
@@ -332,7 +337,7 @@ export default function TransferForm ({
   }
 
   const onSourceChainChange = (source: string) => {
-    changeUrl &&
+    !isModal &&
       router.replace({
         pathname: router.pathname,
         query: { ...router.query, from: source },
@@ -342,7 +347,7 @@ export default function TransferForm ({
   }
 
   const onDestChainChange = (dest: string) => {
-    changeUrl &&
+    !isModal &&
       router.replace({
         pathname: router.pathname,
         query: { ...router.query, to: dest },
@@ -367,7 +372,7 @@ export default function TransferForm ({
             setValue={crossChain ? onCrossChainTokenChange : onTokenChange}
             filterCrossChainBridgeable={crossChain}
             showNetwork={!crossChain}
-            changeUrl={changeUrl}
+            isModal={isModal}
           />
         </Form.Item>
         <TokenBalanceView
@@ -394,6 +399,7 @@ export default function TransferForm ({
             decodeToken
             className='bs-mb-4'
             form={form}
+            isModal={isModal}
             tokenFieldName={transferFormField('crossChainToken')}
             destChainFieldName={transferFormField('dest')}
             sourceChainFieldName={transferFormField('source')}
diff --git a/src/components/transfer/utils/index.ts b/src/components/transfer/utils/index.ts
index bca33d04..3ea08d70 100644
--- a/src/components/transfer/utils/index.ts
+++ b/src/components/transfer/utils/index.ts
@@ -1,6 +1,6 @@
 import { FormInstance } from 'antd'
 import { TokenData, tokenSelectorEncoder } from '../form-items/TokenSelector'
-import { getCrossChainAdapter } from '../configs/cross-chain'
+import { getCrossChainAdapter, getRouteOptions } from '../configs/cross-chain'
 import { TransferFormDefaultToken } from '../transferContent/TransferForm'
 
 export type TransferFormData = {
@@ -23,7 +23,7 @@ export type FormFields = {
 export const transferFormField = (name: keyof FormFields) => name
 
 type MinimalFormInstance = { getFieldsValue: FormInstance['getFieldsValue'] }
-export function getTransferFormData (
+export function getTransferFormData(
   form: MinimalFormInstance,
   crossChain: boolean
 ): TransferFormData {
@@ -72,43 +72,56 @@ export const getCrossChainFee = (form: MinimalFormInstance): CrossChainFee => {
 
 export const getDefaultSelectorOption = (
   tokensOptions: string[],
-  defaultSelectedToken: TransferFormDefaultToken
+  defaultSelectedToken: TransferFormDefaultToken,
+  crossChain?: boolean
 ) => {
-  const encodedTokenData = tokensOptions.find((item) => {
-    const { token, network } = tokenSelectorEncoder.decode(item)
-
-    if (defaultSelectedToken.network) {
-      return (
-        token.toLowerCase() === defaultSelectedToken.token.toLowerCase() &&
-        network === defaultSelectedToken.network
-      )
-    }
+  if (!crossChain) {
+    const encodedTokenData = tokensOptions.find((item) => {
+      const { token, network } = tokenSelectorEncoder.decode(item)
 
-    return (
-      token.toLowerCase() ===
-      defaultSelectedToken.token.toLowerCase()
-    )
-  })
+      if (defaultSelectedToken.network) {
+        return (
+          token.toLowerCase() === defaultSelectedToken.token.toLowerCase() &&
+          network === defaultSelectedToken.network
+        )
+      }
 
-  const decodedTokenData =
-    tokenSelectorEncoder.decode(encodedTokenData || '') || {}
+      return token.toLowerCase() === defaultSelectedToken.token.toLowerCase()
+    })
 
+    const decodedTokenData =
+      tokenSelectorEncoder.decode(encodedTokenData || '') || {}
 
-  let tokenData: TokenData = decodedTokenData
+    let tokenData: TokenData = decodedTokenData
 
-  if (!decodedTokenData.network) {
-    const firstEncodedTokenDataByToken = tokensOptions.find((item) => {
-      const { token } = tokenSelectorEncoder.decode(item)
-      return token.toLowerCase() === defaultSelectedToken.token.toLowerCase()
+    if (!decodedTokenData.network) {
+      const firstEncodedTokenDataByToken = tokensOptions.find((item) => {
+        const { token } = tokenSelectorEncoder.decode(item)
+        return token.toLowerCase() === defaultSelectedToken.token.toLowerCase()
+      })
+
+      tokenData =
+        tokenSelectorEncoder.decode(firstEncodedTokenDataByToken || '') || {}
+    }
+
+    return {
+      token: tokenData.token || 'DOT',
+      network: tokenData.network || 'polkadot',
+      tokenId: tokenData.tokenId,
+    }
+  } else {
+    let sourceOptions = getRouteOptions('source', {
+      token: defaultSelectedToken.token,
     })
 
-    tokenData =
-      tokenSelectorEncoder.decode(firstEncodedTokenDataByToken || '') || {}
-  }
+    const selectedNetwork = sourceOptions.find(
+      (network) => network === defaultSelectedToken.network
+    ) || sourceOptions[0]
 
-  return {
-    token: tokenData.token || 'DOT',
-    network: tokenData.network || 'polkadot',
-    tokenId: tokenData.tokenId,
+    return {
+      token: defaultSelectedToken.token,
+      network: selectedNetwork,
+      tokenId: undefined,
+    }
   }
 }
diff --git a/src/rtk/features/balances/balancesHooks.ts b/src/rtk/features/balances/balancesHooks.ts
index d20f9037..dc8e36e0 100644
--- a/src/rtk/features/balances/balancesHooks.ts
+++ b/src/rtk/features/balances/balancesHooks.ts
@@ -105,7 +105,7 @@ export const useBalancesByNetwork = ({
   loading: boolean
 } => {
   const { balances, loading } = useBalances(address) || {}
-  const balancesByNetwork = balances?.find((x) => x.network === network)
+  const balancesByNetwork = balances?.find((x) => x?.network === network)
 
   if (!currency) return { currencyBalance: undefined, loading: false }
 

From a61a99f50631a5f7e709194478d8e31c1d471409 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 11 Dec 2023 21:48:58 +0200
Subject: [PATCH 11/18] Fix balance reload

---
 src/components/transfer/TransferModal.tsx     |  1 +
 .../transfer/transferContent/TransferForm.tsx | 15 +++-
 src/rtk/features/balances/balancesHooks.ts    | 22 ++++--
 src/rtk/features/balances/balancesSaga.ts     | 70 +++++++++++--------
 src/rtk/features/balances/balancesSlice.ts    |  5 +-
 5 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
index d7700f12..ce063325 100644
--- a/src/components/transfer/TransferModal.tsx
+++ b/src/components/transfer/TransferModal.tsx
@@ -101,6 +101,7 @@ export default function TransferModal ({
       onTransferSuccess={() => setCurrentState('success')}
       className='flex-fill'
       isModal
+      isModalVisible={props.visible}
       defaultSelectedToken={defaultSelectedToken}
       crossChain={activeTab === getTabKey('cross-chain')}
     >
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index 59292534..7dcf2f79 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -61,6 +61,7 @@ export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
   onTransferClick?: (param: ExtendedTransferFormData) => void
   onTransferSuccess?: (param: ExtendedTransferFormData) => void
   onTransferFailed?: () => void
+  isModalVisible?: boolean
   isModal?: boolean
   dest?: string
   children?: (
@@ -84,6 +85,7 @@ export default function TransferForm({
   onTransferSuccess,
   onTransferFailed,
   isModal = false,
+  isModalVisible,
   dest,
   children,
   ...props
@@ -106,7 +108,12 @@ export default function TransferForm({
     token: '',
   })
 
-  useFetchBalanceByNetwork(selectedToken.network || '', myAddress)
+  useFetchBalanceByNetwork({
+    network: selectedToken.network || '',
+    address: myAddress,
+    reload: false,
+    trigger: !isModal && isModalVisible,
+  })
 
   const {
     getSameChainTransferExtrinsic,
@@ -146,7 +153,11 @@ export default function TransferForm({
     form.resetFields()
 
     const selectedTokenFromSelectorOptions = !isModal
-      ? getDefaultSelectorOption(tokensOptions, defaultSelectedToken, crossChain)
+      ? getDefaultSelectorOption(
+          tokensOptions,
+          defaultSelectedToken,
+          crossChain
+        )
       : defaultSelectedToken
 
     form.setFieldsValue({
diff --git a/src/rtk/features/balances/balancesHooks.ts b/src/rtk/features/balances/balancesHooks.ts
index dc8e36e0..ec82dc17 100644
--- a/src/rtk/features/balances/balancesHooks.ts
+++ b/src/rtk/features/balances/balancesHooks.ts
@@ -14,6 +14,7 @@ import {
 import { AccountInfoByChain } from 'src/components/identity/types'
 import { useCurrentAccount } from 'src/components/providers/MyExtensionAccountsContext'
 import { useEffect } from 'react'
+import { supportedNetworks } from '../multiChainInfo/types'
 
 export const fetchBalances = dispatchWithGenericAccounts(
   balancesActions.fetchBalances
@@ -22,7 +23,8 @@ export const fetchBalances = dispatchWithGenericAccounts(
 export const fetchBalanceByNetwork = (
   dispatch: AppDispatch,
   accounts: string[],
-  network?: string
+  network?: string,
+  reload?: boolean
 ) => {
   const genericAccounts = toGenericAccountIds(accounts)
 
@@ -30,22 +32,30 @@ export const fetchBalanceByNetwork = (
     balancesActions.fetchBalanceByNetwork({
       accounts: genericAccounts,
       network,
+      reload: reload || true
     })
   )
 }
 
-export const useFetchBalanceByNetwork = (network: string, address?: string) => {
+type FetchBalanceByNetworkProps = {
+  address?: string
+  reload?: boolean
+  network?: string
+  trigger?: boolean
+}
+
+export const useFetchBalanceByNetwork = ({ address, reload, network, trigger = true }: FetchBalanceByNetworkProps) => {
   const dispatch = useAppDispatch()
 
   useEffect(() => {
-    if (!address || !network) return
+    if (!address || !network || !trigger) return
 
     const getBalanceByNetwork = () => {
-      fetchBalanceByNetwork(dispatch, [ address ], network)
+      fetchBalanceByNetwork(dispatch, [ address ], network, reload)
     }
 
     getBalanceByNetwork()
-  }, [ address, network ])
+  }, [ address, network, trigger ])
 }
 
 export const useFetchBalances = (addressesToFetch?: string[]) => {
@@ -68,7 +78,7 @@ export const useFetchBalances = (addressesToFetch?: string[]) => {
     const isReload =
       selectedBalances &&
       Object.values(selectedBalances).some(
-        (balance) => balance?.balances && balance.balances.length <= 1
+        (balance) => balance?.balances && balance.balances.length <= supportedNetworks.length
       )
 
     const getBalances = () => {
diff --git a/src/rtk/features/balances/balancesSaga.ts b/src/rtk/features/balances/balancesSaga.ts
index ca88e6a5..61c97c95 100644
--- a/src/rtk/features/balances/balancesSaga.ts
+++ b/src/rtk/features/balances/balancesSaga.ts
@@ -13,7 +13,7 @@ import { FetchProps, log, isEmptyEntity } from '../../app/util'
 import { AccountInfoItem } from 'src/components/identity/types'
 import { setBalancesToStore } from '@/components/table/balancesTable/utils'
 
-function* fetchBalancesWorker (action: PayloadAction<FetchProps>) {
+function* fetchBalancesWorker(action: PayloadAction<FetchProps>) {
   const { accounts, reload = false } = action.payload
 
   try {
@@ -51,41 +51,52 @@ function* fetchBalancesWorker (action: PayloadAction<FetchProps>) {
   }
 }
 
-function* fetchBalancesByNetwork (account: string, network: string) {
+function* fetchBalancesByNetwork(
+  account: string,
+  network: string,
+  reload: boolean
+) {
   if (!account || !network) return
 
   const balancesEntity: BalancesEntity = yield select(selectBalances, account)
 
-  const balancesByNetwork: AccountInfoItem = yield call(
-    getAccountBalancesByNetwork,
-    { account, network }
-  )
-
-  const augmentedBalances = [ ...(balancesEntity.balances ?? []) ]
-  let found = false
-  for (let i = 0; i < augmentedBalances.length; i++) {
-    const balance = augmentedBalances[i]
-    if (balance.network === network) {
-      augmentedBalances[i] = balancesByNetwork
-      found = true
-      break
+  if (isEmptyArray(balancesEntity.balances || []) || reload) {
+    const balancesByNetwork: AccountInfoItem = yield call(
+      getAccountBalancesByNetwork,
+      { account, network }
+    )
+
+    const augmentedBalances = [...(balancesEntity.balances ?? [])]
+    let found = false
+    for (let i = 0; i < augmentedBalances.length; i++) {
+      const balance = augmentedBalances[i]
+      if (balance.network === network) {
+        augmentedBalances[i] = balancesByNetwork
+        found = true
+        break
+      }
+    }
+    if (!found) {
+      augmentedBalances.push(balancesByNetwork)
     }
-  }
-  if (!found) {
-    augmentedBalances.push(balancesByNetwork)
-  }
 
-  return {
-    ...balancesEntity,
-    balances: augmentedBalances,
-    loading: false,
+    return {
+      ...balancesEntity,
+      balances: augmentedBalances,
+      loading: false,
+    }
+  } else {
+    return {
+      ...balancesEntity,
+      loading: false,
+    }
   }
 }
 
-function* fetchBalancesByNetworkWorker (
+function* fetchBalancesByNetworkWorker(
   action: PayloadAction<FetchBalanceByNetworkProps>
 ) {
-  const { accounts, network } = action.payload
+  const { accounts, network, reload } = action.payload
 
   if (!network) return
 
@@ -93,7 +104,8 @@ function* fetchBalancesByNetworkWorker (
     const dataMap = accounts.map(function* (account) {
       const accountBalanceByNetwork: any = yield fetchBalancesByNetwork(
         account,
-        network
+        network,
+        reload || true
       )
 
       return accountBalanceByNetwork
@@ -101,6 +113,8 @@ function* fetchBalancesByNetworkWorker (
 
     const newBalances: BalancesEntity[] = yield all(dataMap)
 
+    console.log(newBalances)
+
     yield put(balancesActions.fetchBalancesSuccess(newBalances))
   } catch (error) {
     log.error('Failed to fetch balances by network', error)
@@ -109,11 +123,11 @@ function* fetchBalancesByNetworkWorker (
   }
 }
 
-export function* watchBalances () {
+export function* watchBalances() {
   yield takeEvery(balancesActions.fetchBalances.type, fetchBalancesWorker)
 }
 
-export function* watchBalancesByNetwork () {
+export function* watchBalancesByNetwork() {
   yield takeEvery(
     balancesActions.fetchBalanceByNetwork.type,
     fetchBalancesByNetworkWorker
diff --git a/src/rtk/features/balances/balancesSlice.ts b/src/rtk/features/balances/balancesSlice.ts
index 6425cce8..f01134a1 100644
--- a/src/rtk/features/balances/balancesSlice.ts
+++ b/src/rtk/features/balances/balancesSlice.ts
@@ -49,6 +49,7 @@ export const selectManyBalances = (state: RootState, accounts?: string[]) => {
 
 export type FetchBalanceByNetworkProps = {
   accounts: string[]
+  reload?: boolean
   network?: string
 }
 
@@ -60,12 +61,12 @@ const slice = createSlice({
       state,
       action: PayloadAction<FetchBalanceByNetworkProps>
     ) => {
-      const { accounts } = action.payload
+      const { accounts, reload = true } = action.payload
 
       upsertManyEntity({
         adapter: balancesAdapter,
         state: state as EntityState<BalancesEntity>,
-        reload: true,
+        reload,
         fieldName: 'balances',
         ids: accounts,
         selector: selectorByAccount

From ab7ebbc546a711a36e50039cabfc93f8b8b6af9e Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 11 Dec 2023 22:20:40 +0200
Subject: [PATCH 12/18] Add default amount and recipient

---
 .../creatorsStaking/Creators/index.tsx        |  2 +-
 src/components/main/TransferPage.tsx          |  6 +-
 .../transfer/TransferPageLayout.tsx           |  5 +-
 .../transfer/form-items/AddressFormItem.tsx   | 55 ++++++++++++++-----
 .../form-items/TokenAmountFormItem.tsx        | 24 +++++---
 .../transfer/transferContent/TransferForm.tsx | 25 +++++----
 src/components/transfer/utils/index.ts        |  2 +-
 .../utils/inputs/SelectAccountInput.tsx       |  6 +-
 src/pages/send/[transferType].tsx             |  4 +-
 src/rtk/features/balances/balancesSaga.ts     | 12 ++--
 10 files changed, 97 insertions(+), 44 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/index.tsx b/src/components/creatorsStaking/Creators/index.tsx
index 1a0bb4e4..24f06347 100644
--- a/src/components/creatorsStaking/Creators/index.tsx
+++ b/src/components/creatorsStaking/Creators/index.tsx
@@ -204,7 +204,7 @@ const CreatorsSection = ({ defaultSpaceId }: CreatorsSectionProps) => {
   useFetchCreatorsSpaces(creatorsSpaceIds)
   useFetchEraStakes(creatorsSpaceIds, currentEra)
   useFetchBackerInfoBySpaces(creatorsSpaceIds, myAddress)
-  useFetchBalanceByNetwork('subsocial', myAddress)
+  useFetchBalanceByNetwork({ network: 'subsocial', address: myAddress })
 
   return (
     <ModalContextWrapper>
diff --git a/src/components/main/TransferPage.tsx b/src/components/main/TransferPage.tsx
index 27dca65a..9e62552f 100644
--- a/src/components/main/TransferPage.tsx
+++ b/src/components/main/TransferPage.tsx
@@ -11,10 +11,12 @@ type TransferPageProps = {
   asset?: string
   from?: string
   to?: string
+  recipient?: string
+  amount?: string
 }
 
 const TransferPage: NextPage<TransferPageProps> = (props) => {
-  const { transferType, asset, from, to } = props
+  const { transferType, asset, from, to, recipient, amount } = props
 
   return (
     <>
@@ -26,6 +28,8 @@ const TransferPage: NextPage<TransferPageProps> = (props) => {
             }
             defaultSelectedToken={{ token: asset || 'DOT', network: from }}
             to={to}
+            defaultRecipient={recipient}
+            amount={amount}
           />
         </PageContent>
       </div>
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index 96aff7ba..a4acb8dd 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -19,6 +19,7 @@ type TransferPageLayoutProps = {
   defaultRecipient?: string
   transferType?: string
   to?: string
+  amount?: string
 }
 
 type Tabs = 'same-chain' | 'cross-chain'
@@ -28,7 +29,8 @@ const TransferPageLayout = ({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   transferType,
-  to
+  to,
+  amount,
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
@@ -78,6 +80,7 @@ const TransferPageLayout = ({
         }}
         defaultRecipient={defaultRecipient}
         onTransferFailed={() => setCurrentState('form')}
+        defaultAmount={amount}
         dest={to}
         onTransferSuccess={() => {
           setShowSuccessModal(true)
diff --git a/src/components/transfer/form-items/AddressFormItem.tsx b/src/components/transfer/form-items/AddressFormItem.tsx
index 5dcad59f..9e05a5ea 100644
--- a/src/components/transfer/form-items/AddressFormItem.tsx
+++ b/src/components/transfer/form-items/AddressFormItem.tsx
@@ -9,6 +9,7 @@ import { toGenericAccountId } from 'src/rtk/app/util'
 import { useTranslation } from 'react-i18next'
 import { useEffect } from 'react'
 import SelectAccountInput from '../../utils/inputs/SelectAccountInput'
+import { useRouter } from 'next/router'
 
 export type AddressFormItemProps = FormItemProps & {
   inputProps?: InputProps
@@ -16,15 +17,21 @@ export type AddressFormItemProps = FormItemProps & {
   isEthAddress?: boolean
   validateIsNotSelfErrMsg?: string
   form: FormInstance<any>
+  isModal?: boolean
 }
 
-export function AddressFormItem ({ name, form, ...props }: AddressFormItemProps) {
+export function AddressFormItem ({
+  name,
+  form,
+  ...props
+}: AddressFormItemProps) {
   return (
     <Form.Item
       noStyle
       shouldUpdate={(prev, curr) =>
         !checkSameAttributesValues(prev, curr, [ name?.toString() ?? '' ])
-      }>  
+      }
+    >
       {({ getFieldValue, validateFields, isFieldTouched }) => {
         const fieldName = name ?? ''
         const value = getFieldValue(fieldName)
@@ -56,12 +63,14 @@ function AddressInput ({
   recipient,
   revalidate,
   form,
+  isModal,
   label: _label,
   ...props
 }: AddressFormItemProps & { recipient: string; revalidate: () => void }) {
   const { t } = useTranslation()
   const myAddress = useMyAddress()
   const isMyAddress = useIsMyConnectedAddress(recipient)
+  const router = useRouter()
 
   useEffect(() => {
     revalidate()
@@ -95,26 +104,46 @@ function AddressInput ({
     }),
   ]
 
+  const onSelectAction = (value: string) => {
+    if (!isModal) {
+      const recipient = value ? { recipient: value } : { }
+
+      if(!value) {
+        delete router.query.recipient
+      }
+
+      router.replace({
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          ...recipient,
+        },
+      })
+    }
+  }
+
   const showYourAddressTag = isMyAddress && !validateIsNotSelfErrMsg
   const label = (
     <span>
       {_label}
-      {showYourAddressTag && <Tag color='green' className='ml-1'>{t('transfer.yourAccount')} </Tag>}
+      {showYourAddressTag && (
+        <Tag color='green' className='ml-1'>
+          {t('transfer.yourAccount')}{' '}
+        </Tag>
+      )}
     </span>
   )
 
   return (
-    <Form.Item
-      {...props}
-      label={label}
-      rules={augmentedRules}>
+    <Form.Item {...props} label={label} rules={augmentedRules}>
       <SelectAccountInput
-          disabled={inputProps?.disabled}
-          value={recipient}
-          form={form}
-          withAvatar={false}
-          revalidate={revalidate}
-        />
+        disabled={inputProps?.disabled}
+        value={recipient}
+        form={form}
+        withAvatar={false}
+        revalidate={revalidate}
+        onSelectAction={onSelectAction}
+      />
     </Form.Item>
   )
 }
diff --git a/src/components/transfer/form-items/TokenAmountFormItem.tsx b/src/components/transfer/form-items/TokenAmountFormItem.tsx
index 9d251bdd..f871c473 100644
--- a/src/components/transfer/form-items/TokenAmountFormItem.tsx
+++ b/src/components/transfer/form-items/TokenAmountFormItem.tsx
@@ -51,12 +51,13 @@ export type TokenAmountFormItemProps = FormItemProps & {
   getCrossChainFee?: () => number
   containerProps?: HTMLProps<HTMLDivElement>
   inputProps?: Omit<TokenAmountInputProps, 'onMaxClick'>
+  defaultAmount?: string
 }
 
 const getTokenData = (
   getToken: TokenAmountFormItemProps['getToken'],
   getSourceChain: TokenAmountFormItemProps['getSourceChain'],
-  getDestChain: TokenAmountFormItemProps['getDestChain'],
+  getDestChain: TokenAmountFormItemProps['getDestChain']
 ) => {
   const token = getToken() || ''
   const sourceChain = getSourceChain() || ''
@@ -74,6 +75,7 @@ export function TokenAmountFormItem ({
   getCrossChainFee,
   getSourceChain,
   getDestChain,
+  defaultAmount,
   ...props
 }: TokenAmountFormItemProps) {
   const { t } = useTranslation()
@@ -81,7 +83,7 @@ export function TokenAmountFormItem ({
   const { token, sourceChain, destChain } = getTokenData(
     getToken,
     getSourceChain,
-    getDestChain,
+    getDestChain
   )
   const { formattedTransferableBalance: currentBalance, tokenDecimal } =
     useTransferableBalance(token, sourceChain)
@@ -112,6 +114,15 @@ export function TokenAmountFormItem ({
     form.validateFields([ props.name ])
   }, [ form, maxTransfer ])
 
+  useEffect(() => {
+    const name = props.name?.toString()
+    if (name) {
+      if (defaultAmount)
+        setFieldsValue({ ['amount']: parseFloat(defaultAmount) })
+      form.validateFields([ name ])
+    }
+  }, [ maxTransfer, defaultAmount ])
+
   const onMaxClick = () => {
     const name = props.name?.toString()
     if (name) setFieldsValue({ [name]: maxTransfer })
@@ -146,6 +157,7 @@ export function TokenAmountFormItem ({
           {...inputProps}
           disableMaxButton={loading || maxTransfer <= 0}
           onMaxClick={onMaxClick}
+          // defaultValue={new BN(defaultAmount || '0').toNumber()}
         />
       </Form.Item>
       <Form.Item noStyle shouldUpdate>
@@ -178,11 +190,7 @@ const existentialDepositLink =
 
 type ExistentialDepositAlertProps = Pick<
   TokenAmountFormItemProps,
-  | 'getDestChain'
-  | 'getSourceChain'
-  | 'getToken'
-  | 'getCrossChainFee'
-  | 'name'
+  'getDestChain' | 'getSourceChain' | 'getToken' | 'getCrossChainFee' | 'name'
 > & {
   getFieldValue: (name: NamePath) => any
 }
@@ -201,7 +209,7 @@ function ExistentialDepositAlert ({
   const { token, sourceChain, destChain } = getTokenData(
     getToken,
     getSourceChain,
-    getDestChain,
+    getDestChain
   )
   const crossChainFee = destChain ? getCrossChainFee?.() || 0 : 0
 
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index 7dcf2f79..a6be7860 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -64,6 +64,7 @@ export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
   isModalVisible?: boolean
   isModal?: boolean
   dest?: string
+  defaultAmount?: string
   children?: (
     formSection: JSX.Element,
     buttonSection: JSX.Element
@@ -77,7 +78,7 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm({
+export default function TransferForm ({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
@@ -88,6 +89,7 @@ export default function TransferForm({
   isModalVisible,
   dest,
   children,
+  defaultAmount,
   ...props
 }: TransferFormProps) {
   const { t } = useTranslation()
@@ -102,8 +104,8 @@ export default function TransferForm({
 
   const myAddress = useMyAddress()
 
-  const [form] = Form.useForm()
-  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
+  const [ form ] = Form.useForm()
+  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -137,16 +139,16 @@ export default function TransferForm({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([transferFormField('recipient')])
+      form.validateFields([ transferFormField('recipient') ])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([transferFormField('recipient')])
+        form.validateFields([ transferFormField('recipient') ])
       }
     }
-  }, [crossChain])
+  }, [ crossChain ])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
@@ -240,7 +242,7 @@ export default function TransferForm({
 
   useEffect(() => {
     resetForm()
-  }, [resetForm])
+  }, [ resetForm ])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
@@ -316,12 +318,12 @@ export default function TransferForm({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
+      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [recipient], destChain)
+        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
       }, WAIT_TIME)
     }
   }
@@ -337,7 +339,7 @@ export default function TransferForm({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [transferFormField('amount')]
+  const requiredTouchedFields = [ transferFormField('amount') ]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
@@ -399,6 +401,7 @@ export default function TransferForm({
           form={form}
           name={transferFormField('amount')}
           label={t('transfer.amount')}
+          defaultAmount={defaultAmount}
           inputProps={{
             size: 'large',
             placeholder: t('transfer.placeholders.amount'),
@@ -434,11 +437,11 @@ export default function TransferForm({
             )
             return (
               <RecipientInput
-                inputProps={{ disabled: !!defaultRecipient }}
                 name={transferFormField('recipient')}
                 disableTransferToSelf={!crossChain}
                 destChain={destChain || sourceChain}
                 form={form}
+                isModal={isModal}
               />
             )
           }}
diff --git a/src/components/transfer/utils/index.ts b/src/components/transfer/utils/index.ts
index 3ea08d70..8ff8964d 100644
--- a/src/components/transfer/utils/index.ts
+++ b/src/components/transfer/utils/index.ts
@@ -23,7 +23,7 @@ export type FormFields = {
 export const transferFormField = (name: keyof FormFields) => name
 
 type MinimalFormInstance = { getFieldsValue: FormInstance['getFieldsValue'] }
-export function getTransferFormData(
+export function getTransferFormData (
   form: MinimalFormInstance,
   crossChain: boolean
 ): TransferFormData {
diff --git a/src/components/utils/inputs/SelectAccountInput.tsx b/src/components/utils/inputs/SelectAccountInput.tsx
index 5b62419d..7687996c 100644
--- a/src/components/utils/inputs/SelectAccountInput.tsx
+++ b/src/components/utils/inputs/SelectAccountInput.tsx
@@ -53,6 +53,7 @@ type SelectAccountInputProps = {
   disabled?: boolean
   withAvatar?: boolean
   revalidate: () => void
+  onSelectAction?: (value: string) => void
 }
 
 const filterSelectOptions = (adresses: string[], value?: string) => {
@@ -77,7 +78,8 @@ export const SelectAccountInput = ({
   withAvatar = true,
   disabled,
   form,
-  revalidate
+  revalidate,
+  onSelectAction
 }: SelectAccountInputProps) => {
   const { extensionStatus } = useMyExtensionAccount()
   const extensionAddress = useMyExtensionAddresses()
@@ -108,6 +110,8 @@ export const SelectAccountInput = ({
 
   const onSelectChange = (value: string) => {
     form.setFieldsValue({ ['recipient']: value })
+
+    onSelectAction && onSelectAction(value)
   }
 
   const onSearchHandler = (searchValue: any) => {
diff --git a/src/pages/send/[transferType].tsx b/src/pages/send/[transferType].tsx
index 7c78c72a..1d8787c4 100644
--- a/src/pages/send/[transferType].tsx
+++ b/src/pages/send/[transferType].tsx
@@ -5,7 +5,7 @@ import TransferPage from '@/components/main/TransferPage'
 getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => {
   fetchData(dispatch)
 
-  const { transferType, asset, from, to } = context.query
+  const { transferType, asset, from, to, recipient, amount } = context.query
 
   const assetValue = asset as string
 
@@ -17,6 +17,8 @@ getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => {
     asset: assetValue ? assetValue.toUpperCase() : undefined,
     from: from as string,
     to: to as string,
+    recipient: recipient as string,
+    amount: amount as string,
   }
 })
 
diff --git a/src/rtk/features/balances/balancesSaga.ts b/src/rtk/features/balances/balancesSaga.ts
index 61c97c95..a7764251 100644
--- a/src/rtk/features/balances/balancesSaga.ts
+++ b/src/rtk/features/balances/balancesSaga.ts
@@ -13,7 +13,7 @@ import { FetchProps, log, isEmptyEntity } from '../../app/util'
 import { AccountInfoItem } from 'src/components/identity/types'
 import { setBalancesToStore } from '@/components/table/balancesTable/utils'
 
-function* fetchBalancesWorker(action: PayloadAction<FetchProps>) {
+function* fetchBalancesWorker (action: PayloadAction<FetchProps>) {
   const { accounts, reload = false } = action.payload
 
   try {
@@ -51,7 +51,7 @@ function* fetchBalancesWorker(action: PayloadAction<FetchProps>) {
   }
 }
 
-function* fetchBalancesByNetwork(
+function* fetchBalancesByNetwork (
   account: string,
   network: string,
   reload: boolean
@@ -66,7 +66,7 @@ function* fetchBalancesByNetwork(
       { account, network }
     )
 
-    const augmentedBalances = [...(balancesEntity.balances ?? [])]
+    const augmentedBalances = [ ...(balancesEntity.balances ?? []) ]
     let found = false
     for (let i = 0; i < augmentedBalances.length; i++) {
       const balance = augmentedBalances[i]
@@ -93,7 +93,7 @@ function* fetchBalancesByNetwork(
   }
 }
 
-function* fetchBalancesByNetworkWorker(
+function* fetchBalancesByNetworkWorker (
   action: PayloadAction<FetchBalanceByNetworkProps>
 ) {
   const { accounts, network, reload } = action.payload
@@ -123,11 +123,11 @@ function* fetchBalancesByNetworkWorker(
   }
 }
 
-export function* watchBalances() {
+export function* watchBalances () {
   yield takeEvery(balancesActions.fetchBalances.type, fetchBalancesWorker)
 }
 
-export function* watchBalancesByNetwork() {
+export function* watchBalancesByNetwork () {
   yield takeEvery(
     balancesActions.fetchBalanceByNetwork.type,
     fetchBalancesByNetworkWorker

From 50b0cdc4e1aac669717c4cfd52fea7e188f23fa6 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 12 Dec 2023 12:23:20 +0200
Subject: [PATCH 13/18] Fix sidebar

- fix amount field validation
---
 .../providers/MyExtensionAccountsContext.tsx  | 126 ++++++++++++------
 .../form-items/TokenAmountFormItem.tsx        |   5 +-
 .../transfer/form-items/TokenSelector.tsx     |   1 -
 .../transfer/transferContent/TransferForm.tsx |   1 -
 src/rtk/features/balances/balancesSaga.ts     |   2 -
 5 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/src/components/providers/MyExtensionAccountsContext.tsx b/src/components/providers/MyExtensionAccountsContext.tsx
index 628453cb..e5fab843 100644
--- a/src/components/providers/MyExtensionAccountsContext.tsx
+++ b/src/components/providers/MyExtensionAccountsContext.tsx
@@ -1,21 +1,47 @@
-import React, { createContext, useContext, useEffect, useReducer, useState } from 'react'
-import { nonEmptyArr } from '@subsocial/utils'
-import { getAddressFromStorage, signOut, checkIsMulti, getCurrentWallet } from '../utils/index'
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useReducer,
+  useState,
+} from 'react'
+import { nonEmptyArr, isEmptyArray } from '@subsocial/utils'
+import {
+  getAddressFromStorage,
+  signOut,
+  checkIsMulti,
+  getCurrentWallet,
+} from '../utils/index'
 import SignInModal from '../onlySearch/SignInModal'
 import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'
 import { useRouter } from 'next/router'
-import { useAppDispatch, useAppSelector, AppDispatch } from '../../rtk/app/store'
+import {
+  useAppDispatch,
+  useAppSelector,
+  AppDispatch,
+} from '../../rtk/app/store'
 import { selectAccounts } from '../../rtk/features/accounts/accountsSlice'
-import { toGenericAccountId, getAddressesByDomain, toGenericAccountIds } from '../../rtk/app/util'
-import { selectCurrentAccount, currentAccountActions } from '../../rtk/features/accounts/currentAccountSlice'
-import { recheckStatuses, mobileWalletConection, desktopWalletConnect } from './utils'
+import {
+  toGenericAccountId,
+  getAddressesByDomain,
+  toGenericAccountIds,
+} from '../../rtk/app/util'
+import {
+  selectCurrentAccount,
+  currentAccountActions,
+} from '../../rtk/features/accounts/currentAccountSlice'
+import {
+  recheckStatuses,
+  mobileWalletConection,
+  desktopWalletConnect,
+} from './utils'
 import { ExtensionAccountContext, Balances, Status } from './types'
 import { useResponsiveSize } from '../responsive/ResponsiveContext'
 import { BIGNUMBER_ZERO } from '../../config/app/consts'
 
 const defaultCrowdloanBalances = {
   kusama: BIGNUMBER_ZERO,
-  polkadot: BIGNUMBER_ZERO
+  polkadot: BIGNUMBER_ZERO,
 }
 
 export const defaultBalances = {
@@ -28,51 +54,60 @@ export const defaultBalances = {
 export enum StepsEnum {
   Disabled = -1,
   SelectWallet,
-  SelectAccount
+  SelectAccount,
 }
 
-export const ExtensionAccountsContext = createContext<ExtensionAccountContext>({} as ExtensionAccountContext)
+export const ExtensionAccountsContext = createContext<ExtensionAccountContext>(
+  {} as ExtensionAccountContext
+)
 
-export function ExtensionAccountProvider (props: React.PropsWithChildren<{}>) {
+export function ExtensionAccountProvider(props: React.PropsWithChildren<{}>) {
   const { isMobile } = useResponsiveSize()
 
   const currentWallet = getCurrentWallet()
 
-  const [ currentStep, setCurrentStep ] = useState(currentWallet || isMobile ? StepsEnum.SelectAccount : StepsEnum.SelectWallet)
+  const [currentStep, setCurrentStep] = useState(
+    currentWallet || isMobile ? StepsEnum.SelectAccount : StepsEnum.SelectWallet
+  )
 
   const currentAddress = useCurrentAccount()
-  const [ showSignInModal, setShowSignInModal ] = useState(false)
-  const [ myAccount, setMyAccount ] = useState<string>()
-  const [ isMulti, setIsMulti ] = useState(currentAddress ? checkIsMulti(currentAddress.join(',')) : false)
-  const [ balances, setBalances ] = useState<Balances>(defaultBalances)
-  const [ refreshBalances, setRefreshBalances ] = useState(false)
+  const [showSignInModal, setShowSignInModal] = useState(false)
+  const [myAccount, setMyAccount] = useState<string>()
+  const [isMulti, setIsMulti] = useState(
+    currentAddress ? checkIsMulti(currentAddress.join(',')) : false
+  )
+  const [balances, setBalances] = useState<Balances>(defaultBalances)
+  const [refreshBalances, setRefreshBalances] = useState(false)
   const dispatch = useAppDispatch()
 
-  const { query: { address: addressOrDomainFromUrl } } = useRouter()
+  const {
+    query: { address: addressOrDomainFromUrl },
+  } = useRouter()
 
   const openModal = () => setShowSignInModal(true)
   const closeModal = () => setShowSignInModal(false)
 
-  const [ recheckId, recheck ] = useReducer(x => (x + 1) % 16384, 0)
+  const [recheckId, recheck] = useReducer((x) => (x + 1) % 16384, 0)
 
-  const [ status, setStatus ] = useState<Status>('LOADING')
+  const [status, setStatus] = useState<Status>('LOADING')
 
   useEffect(() => {
     const props = { dispatch, setStatus }
     isMobile ? mobileWalletConection(props) : desktopWalletConnect(props)
-  }, [ recheckId ])
+  }, [recheckId])
 
   useEffect(() => {
     if (!recheckStatuses.includes(status)) return
 
     const intervalId = setInterval(recheck, 1000)
     return () => clearInterval(intervalId)
-  }, [ status ])
-
+  }, [status])
 
   useEffect(() => {
     const setAddresses = async () => {
-      const addressesFromUrl = await getAddressesByDomain(addressOrDomainFromUrl?.toString().split(','))
+      const addressesFromUrl = await getAddressesByDomain(
+        addressOrDomainFromUrl?.toString().split(',')
+      )
       const addressFromStorage = getAddressFromStorage()
 
       let address = addressesFromUrl?.join(',')
@@ -88,8 +123,7 @@ export function ExtensionAccountProvider (props: React.PropsWithChildren<{}>) {
     }
 
     setAddresses()
-
-  }, [ addressOrDomainFromUrl, status ])
+  }, [addressOrDomainFromUrl, status])
 
   const obj: ExtensionAccountContext = {
     extensionStatus: status,
@@ -99,7 +133,8 @@ export function ExtensionAccountProvider (props: React.PropsWithChildren<{}>) {
     isMulti,
     refreshBalances,
     setRefreshBalances,
-    setBalances: (balances: Partial<Balances>) => setBalances(b => ({ ...b, ...balances })),
+    setBalances: (balances: Partial<Balances>) =>
+      setBalances((b) => ({ ...b, ...balances })),
     setMyAddress: (address: string) => setMyAccount(address),
     setIsMulti: (isMulti: boolean) => setIsMulti(isMulti),
 
@@ -110,7 +145,7 @@ export function ExtensionAccountProvider (props: React.PropsWithChildren<{}>) {
 
     openModal,
     closeModal,
-    setCurrentStep
+    setCurrentStep,
   }
 
   return (
@@ -124,18 +159,21 @@ export function ExtensionAccountProvider (props: React.PropsWithChildren<{}>) {
 export const setCurrentAddress = (dispatch: AppDispatch, accounts: string) => {
   const genericAccounts = toGenericAccountIds(accounts.split(',')).join(',')
 
-  dispatch({ type: currentAccountActions.setAccount.type, payload: genericAccounts })
+  dispatch({
+    type: currentAccountActions.setAccount.type,
+    payload: genericAccounts,
+  })
 }
 
-export function useExtensionAccountsContext () {
+export function useExtensionAccountsContext() {
   return useContext(ExtensionAccountsContext)
 }
 
-export function useMyExtensionAccount () {
+export function useMyExtensionAccount() {
   return useExtensionAccountsContext()
 }
 
-export function useIsMulti () {
+export function useIsMulti() {
   return useExtensionAccountsContext().isMulti
 }
 
@@ -143,24 +181,32 @@ export const useIsMyAddress = (address?: string) => {
   const extensionAccounts = useMyExtensionAddresses()
 
   return extensionAccounts
-    .map(x => x.address)
+    .map((x) => x.address)
     .includes(toGenericAccountId(address))
 }
 
-export function useMyExtensionAddresses () {
+export function useMyExtensionAddresses() {
   return useAppSelector<InjectedAccountWithMeta[]>(selectAccounts)
 }
 
-export function useCurrentAccount () {
-  const addresses = useAppSelector<string>(selectCurrentAccount)?.split(',') || getAddressFromStorage()
-  return addresses.filter(x => x)
+export function useCurrentAccount() {
+  const addressFromRedux =
+    useAppSelector<string>(selectCurrentAccount)
+      ?.split(',')
+      .filter((x) => x) || []
+
+  return isEmptyArray(addressFromRedux)
+    ? getAddressFromStorage()?.split(',')
+    : addressFromRedux
 }
 
 export const useMyAddresses = (): string[] | undefined =>
-  useMyExtensionAccount().myAccount?.split(',').filter(x => x)
+  useMyExtensionAccount()
+    .myAccount?.split(',')
+    .filter((x) => x)
 
 export const useMyAddress = (): string | undefined => {
-  const [ address ] = useMyAddresses() || []
+  const [address] = useMyAddresses() || []
 
   return address ? toGenericAccountId(address) : undefined
 }
@@ -174,7 +220,7 @@ export const useMyBalances = () => {
   return useMyExtensionAccount().balances
 }
 
-export function useIsSignedIn () {
+export function useIsSignedIn() {
   return nonEmptyArr(useMyAddresses()) || !!getAddressFromStorage()
 }
 
diff --git a/src/components/transfer/form-items/TokenAmountFormItem.tsx b/src/components/transfer/form-items/TokenAmountFormItem.tsx
index f871c473..a2ddb4fe 100644
--- a/src/components/transfer/form-items/TokenAmountFormItem.tsx
+++ b/src/components/transfer/form-items/TokenAmountFormItem.tsx
@@ -116,9 +116,8 @@ export function TokenAmountFormItem ({
 
   useEffect(() => {
     const name = props.name?.toString()
-    if (name) {
-      if (defaultAmount)
-        setFieldsValue({ ['amount']: parseFloat(defaultAmount) })
+    if (name && defaultAmount) {
+      setFieldsValue({ ['amount']: parseFloat(defaultAmount) })
       form.validateFields([ name ])
     }
   }, [ maxTransfer, defaultAmount ])
diff --git a/src/components/transfer/form-items/TokenSelector.tsx b/src/components/transfer/form-items/TokenSelector.tsx
index 96fbb916..1f3d1a7c 100644
--- a/src/components/transfer/form-items/TokenSelector.tsx
+++ b/src/components/transfer/form-items/TokenSelector.tsx
@@ -19,7 +19,6 @@ export type TokenSelectorProps = HTMLProps<HTMLDivElement> & {
   showNetwork?: boolean
   filterCrossChainBridgeable?: boolean
   selectProps?: Omit<SearchableSelectProps, 'options'>
-  isModal?: boolean
 }
 
 export type TokenData = {
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index a6be7860..1d8f522e 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -385,7 +385,6 @@ export default function TransferForm ({
             setValue={crossChain ? onCrossChainTokenChange : onTokenChange}
             filterCrossChainBridgeable={crossChain}
             showNetwork={!crossChain}
-            isModal={isModal}
           />
         </Form.Item>
         <TokenBalanceView
diff --git a/src/rtk/features/balances/balancesSaga.ts b/src/rtk/features/balances/balancesSaga.ts
index a7764251..465f7b4d 100644
--- a/src/rtk/features/balances/balancesSaga.ts
+++ b/src/rtk/features/balances/balancesSaga.ts
@@ -113,8 +113,6 @@ function* fetchBalancesByNetworkWorker (
 
     const newBalances: BalancesEntity[] = yield all(dataMap)
 
-    console.log(newBalances)
-
     yield put(balancesActions.fetchBalancesSuccess(newBalances))
   } catch (error) {
     log.error('Failed to fetch balances by network', error)

From 8b076211569a0f0cd4a87e331206760bd09a890e Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 12 Dec 2023 17:16:31 +0200
Subject: [PATCH 14/18] Fix current address

---
 src/components/utils/PageContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utils/PageContainer.tsx b/src/components/utils/PageContainer.tsx
index 80f15840..728ad4d1 100644
--- a/src/components/utils/PageContainer.tsx
+++ b/src/components/utils/PageContainer.tsx
@@ -34,7 +34,7 @@ const PageContainer: FC<PageContainerProps> = ({ children, isHomePage }) => {
   const addressFromUrl = maybeAddress?.toString()
   const parsedAddressFromUrl = parseAddressFromUrl(addressFromUrl)
 
-  const addresses = (useCurrentAccount() || parsedAddressFromUrl).filter(
+  const addresses = (useCurrentAccount() || parsedAddressFromUrl)?.filter(
     (x) => isDef(x) && !!x
   )
   useFetchIdentities(addresses)

From 4519b46354a60c2cf94e696db8cd844958340096 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Dec 2023 11:52:39 +0200
Subject: [PATCH 15/18] Add redirect for send page

---
 src/components/transfer/Index.module.sass     |  2 +-
 .../transfer/TransferPageLayout.tsx           | 20 +++--
 .../cross-chain/CrossChainRouteSelector.tsx   | 20 +++--
 .../transfer/form-items/AddressFormItem.tsx   | 24 +++---
 .../transfer/transferContent/TransferForm.tsx | 83 ++++++++++++-------
 src/components/utils/FormSubmitButton.tsx     |  3 +-
 src/pages/send/index.tsx                      | 25 ++++++
 7 files changed, 116 insertions(+), 61 deletions(-)
 create mode 100644 src/pages/send/index.tsx

diff --git a/src/components/transfer/Index.module.sass b/src/components/transfer/Index.module.sass
index 1bbea2ec..4f4befa7 100644
--- a/src/components/transfer/Index.module.sass
+++ b/src/components/transfer/Index.module.sass
@@ -8,7 +8,7 @@
   flex-direction: column
   padding: 1.5rem 1rem
   overflow: hidden
-  max-height: 700px
+  min-height: 700px
   height: 100%
 
   border-radius: 16px
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index a4acb8dd..b8b68981 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -34,13 +34,13 @@ const TransferPageLayout = ({
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
-  const [ showSuccessModal, setShowSuccessModal ] = useState(false)
+  const [showSuccessModal, setShowSuccessModal] = useState(false)
 
-  const [ currentState, setCurrentState ] = useState<'form' | 'loading'>()
-  const [ transferData, setTransferData ] = useState<
+  const [currentState, setCurrentState] = useState<'form' | 'loading'>()
+  const [transferData, setTransferData] = useState<
     ExtendedTransferFormData | undefined
   >()
-  const [ activeTab, setActiveTab ] = useState(
+  const [activeTab, setActiveTab] = useState(
     getTabKey((transferType as any) || 'same-chain')
   )
   const router = useRouter()
@@ -49,17 +49,19 @@ const TransferPageLayout = ({
     if (activeTab === transferType) return
 
     const newTransferType = activeTab === 'same-chain' ? 'same' : 'cross'
-    const { pathname, query } = router
+    const { query } = router
 
     if (activeTab === 'same-chain') {
       delete query.to
     }
 
-    router.replace({
-      pathname,
+    const url = {
+      pathname: '/send/[transferType]',
       query: { ...query, transferType: newTransferType },
-    })
-  }, [ activeTab ])
+    }
+
+    router.replace(url)
+  }, [activeTab])
 
   useEffect(() => {
     setCurrentState('form')
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index b6166972..a6eb58ae 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -129,14 +129,18 @@ function CrossChainRouteSelectorContent ({
       return
     }
 
-    !isModal && router.replace({
-      pathname: router.pathname,
-      query: {
-        ...router.query,
-        from: dest,
-        to: source,
-      },
-    })
+    if(!isModal) {
+      const url = {
+        pathname: '/send/cross',
+        query: {
+          ...router.query,
+          from: dest,
+          to: source,
+        },
+      }
+
+      router.replace(url)
+    }
 
     form.setFieldsValue({
       [destChainFieldName]: source,
diff --git a/src/components/transfer/form-items/AddressFormItem.tsx b/src/components/transfer/form-items/AddressFormItem.tsx
index 9e05a5ea..cf238892 100644
--- a/src/components/transfer/form-items/AddressFormItem.tsx
+++ b/src/components/transfer/form-items/AddressFormItem.tsx
@@ -20,7 +20,7 @@ export type AddressFormItemProps = FormItemProps & {
   isModal?: boolean
 }
 
-export function AddressFormItem ({
+export function AddressFormItem({
   name,
   form,
   ...props
@@ -29,7 +29,7 @@ export function AddressFormItem ({
     <Form.Item
       noStyle
       shouldUpdate={(prev, curr) =>
-        !checkSameAttributesValues(prev, curr, [ name?.toString() ?? '' ])
+        !checkSameAttributesValues(prev, curr, [name?.toString() ?? ''])
       }
     >
       {({ getFieldValue, validateFields, isFieldTouched }) => {
@@ -44,7 +44,7 @@ export function AddressFormItem ({
             {...props}
             revalidate={async () => {
               if (isFieldTouched(fieldName) || value) {
-                await validateFields([ fieldName ])
+                await validateFields([fieldName])
               }
             }}
           />
@@ -54,7 +54,7 @@ export function AddressFormItem ({
   )
 }
 
-function AddressInput ({
+function AddressInput({
   inputProps,
   rules,
   isRequired,
@@ -74,12 +74,12 @@ function AddressInput ({
 
   useEffect(() => {
     revalidate()
-  }, [ isEthAddress, isRequired, validateIsNotSelfErrMsg ])
+  }, [isEthAddress, isRequired, validateIsNotSelfErrMsg])
 
   const augmentedRules: Rule[] = [
     ...(rules || []),
     ({ getFieldValue }) => ({
-      async validator () {
+      async validator() {
         const address = getFieldValue(props.name ?? '')
 
         if (isRequired && !address) {
@@ -106,19 +106,21 @@ function AddressInput ({
 
   const onSelectAction = (value: string) => {
     if (!isModal) {
-      const recipient = value ? { recipient: value } : { }
+      const recipient = value ? { recipient: value } : {}
 
-      if(!value) {
+      if (!value) {
         delete router.query.recipient
       }
 
-      router.replace({
-        pathname: router.pathname,
+      const url = {
+        pathname: '/send/[transferType]',
         query: {
           ...router.query,
           ...recipient,
         },
-      })
+      }
+
+      router.replace(url)
     }
   }
 
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index 1d8f522e..23326c84 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -78,7 +78,7 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm ({
+export default function TransferForm({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
@@ -104,8 +104,8 @@ export default function TransferForm ({
 
   const myAddress = useMyAddress()
 
-  const [ form ] = Form.useForm()
-  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
+  const [form] = Form.useForm()
+  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -139,16 +139,16 @@ export default function TransferForm ({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([ transferFormField('recipient') ])
+      form.validateFields([transferFormField('recipient')])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([ transferFormField('recipient') ])
+        form.validateFields([transferFormField('recipient')])
       }
     }
-  }, [ crossChain ])
+  }, [crossChain])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
@@ -228,10 +228,12 @@ export default function TransferForm ({
         delete newQuery.from
       }
 
-      router.replace({
-        pathname: router.pathname,
+      const url = {
+        pathname: '/send/[transferType]',
         query: newQuery,
-      })
+      }
+
+      router.replace(url)
     }
   }, [
     tokensOptions.join(','),
@@ -242,21 +244,24 @@ export default function TransferForm ({
 
   useEffect(() => {
     resetForm()
-  }, [ resetForm ])
+  }, [resetForm])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
     const decodedToken = tokenSelectorEncoder.decode(token)
 
-    !isModal &&
-      router.replace({
-        pathname: router.pathname,
+    if (!isModal) {
+      const url = {
+        pathname: '/send/[transferType]',
         query: {
           ...router.query,
           asset: decodedToken.token,
           from: decodedToken.network,
         },
-      })
+      }
+
+      router.replace(url)
+    }
 
     setSelectedToken(decodedToken)
   }
@@ -271,15 +276,18 @@ export default function TransferForm ({
 
     const decodedToken = tokenSelectorEncoder.decode(token)
 
-    !isModal &&
-      router.replace({
-        pathname: router.pathname,
+    if(!isModal) {
+      const url = {
+        pathname: '/send/[transferType]',
         query: {
           ...router.query,
           asset: decodedToken.token,
           from: decodedToken.network,
         },
-      })
+      }
+
+      router.replace(url)
+    }
 
     setSelectedToken({
       token: decodedToken.token,
@@ -318,12 +326,12 @@ export default function TransferForm ({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
+      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
+        fetchBalanceByNetwork(dispatch, [recipient], destChain)
       }, WAIT_TIME)
     }
   }
@@ -339,7 +347,7 @@ export default function TransferForm ({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [ transferFormField('amount') ]
+  const requiredTouchedFields = [transferFormField('amount')]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
@@ -350,21 +358,34 @@ export default function TransferForm ({
   }
 
   const onSourceChainChange = (source: string) => {
-    !isModal &&
-      router.replace({
-        pathname: router.pathname,
-        query: { ...router.query, from: source },
-      })
+    if(!isModal) {
+      const url = {
+        pathname: '/send/[transferType]',
+        query: {
+          ...router.query,
+          from: source,
+        },
+      }
+
+      router.replace(url)
+    }
 
     setSelectedToken((prev) => ({ ...prev, network: source }))
   }
 
   const onDestChainChange = (dest: string) => {
-    !isModal &&
-      router.replace({
-        pathname: router.pathname,
-        query: { ...router.query, to: dest },
-      })
+    if(!isModal) {
+      const url = {
+        pathname: '/send/[transferType]',
+        query: {
+          ...router.query,
+          to: dest,
+        },
+      }
+
+      router.replace(url)
+    }
+
     setSelectedToken((prev) => ({ ...prev, dest }))
   }
 
diff --git a/src/components/utils/FormSubmitButton.tsx b/src/components/utils/FormSubmitButton.tsx
index 6fbd7479..fd2ee684 100644
--- a/src/components/utils/FormSubmitButton.tsx
+++ b/src/components/utils/FormSubmitButton.tsx
@@ -21,6 +21,7 @@ export default function FormSubmitButton ({ form, requiredTouchedFields, childre
         if (requiredTouchedFields) {
           for (let i = 0; i < requiredTouchedFields.length; i++) {
             const fieldName = requiredTouchedFields[i]
+            console.log(values[fieldName], fieldName)
             const isEmptyAndUntouched = !usedForm.isFieldTouched(fieldName) && !values[fieldName]
             hasAnyEmptyAndUntouchedFields = hasAnyEmptyAndUntouchedFields || isEmptyAndUntouched
             if (isEmptyAndUntouched) break
@@ -28,7 +29,7 @@ export default function FormSubmitButton ({ form, requiredTouchedFields, childre
         }
 
         const errorFields = usedForm.getFieldsError().filter(({ errors }) => errors.length > 0)
-        const isDisabled = hasAnyEmptyAndUntouchedFields || errorFields.length > 0
+        const isDisabled = hasAnyEmptyAndUntouchedFields || errorFields.length > 0 || !values['recipient']
           
         return children(isDisabled, usedForm)
       }}
diff --git a/src/pages/send/index.tsx b/src/pages/send/index.tsx
new file mode 100644
index 00000000..b6bbe3ce
--- /dev/null
+++ b/src/pages/send/index.tsx
@@ -0,0 +1,25 @@
+import { getInitialPropsWithRedux } from 'src/rtk/app/nextHelpers'
+import { fetchData } from '../../rtk/app/util'
+import TransferPage from '@/components/main/TransferPage'
+
+getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => {
+  fetchData(dispatch)
+
+  const { transferType, asset, from, to, recipient, amount } = context.query
+
+  const assetValue = asset as string
+
+  return {
+    head: {
+      title: 'Transfer Page',
+    },
+    transferType: transferType as string || 'same',
+    asset: assetValue ? assetValue.toUpperCase() : undefined,
+    from: from as string,
+    to: to as string,
+    recipient: recipient as string,
+    amount: amount as string,
+  }
+})
+
+export default TransferPage
\ No newline at end of file

From 9efd4e73514c62d654d078be71d9cd5c4a0bda0a Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Dec 2023 15:08:00 +0200
Subject: [PATCH 16/18] Change mobile cross chain selector layout

---
 public/tailwind.css                           | 50 +++++++++----------
 .../cross-chain/CrossChainRouteSelector.tsx   |  7 +--
 .../TransferChainSelectorFormItem.module.sass | 10 ++++
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/public/tailwind.css b/public/tailwind.css
index 200981fd..5d340de5 100644
--- a/public/tailwind.css
+++ b/public/tailwind.css
@@ -934,24 +934,24 @@ video {
   width: 100%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
-.w-\[260px\] {
-  width: 260px;
-}
-
 .w-max {
   width: -moz-max-content;
   width: max-content;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
 
+.max-w-\[260px\] {
+  max-width: 260px;
+}
+
 .max-w-\[min\(24rem\2c _95vw\)\] {
   max-width: min(24rem, 95vw);
 }
@@ -980,10 +980,6 @@ video {
   max-width: 24rem;
 }
 
-.max-w-\[260px\] {
-  max-width: 260px;
-}
-
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1522,6 +1518,11 @@ video {
   padding: 4px;
 }
 
+.\!px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
 .\!py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
@@ -1602,11 +1603,6 @@ video {
   padding-bottom: 1.25rem;
 }
 
-.\!px-4 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-}
-
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -1848,6 +1844,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
 .text-current {
   color: currentColor;
 }
@@ -1913,11 +1914,6 @@ video {
   color: rgb(255 255 255 / 0.8);
 }
 
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -2451,6 +2447,11 @@ video {
     padding: 1.5rem;
   }
 
+  .md\:\!px-6 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -2461,11 +2462,6 @@ video {
     padding-bottom: 1.5rem;
   }
 
-  .md\:\!px-6 {
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
-  }
-
   .md\:text-left {
     text-align: left;
   }
diff --git a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
index a6eb58ae..9bcbbc12 100644
--- a/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
+++ b/src/components/transfer/cross-chain/CrossChainRouteSelector.tsx
@@ -11,6 +11,7 @@ import { checkSameAttributesValues } from 'src/components/utils'
 import { showWarnMessage } from '../../utils/Message'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/router'
+import styles from '../form-items/TransferChainSelectorFormItem.module.sass'
 
 export type CrossChainRouteSelectorProps = Omit<
   HTMLProps<HTMLDivElement>,
@@ -153,11 +154,11 @@ function CrossChainRouteSelectorContent ({
 
   return (
     <div
-      className={clsx('d-flex align-items-end GapNormal', className)}
+      className={clsx('d-flex align-items-end GapNormal', styles.CrossChainSelectors, className)}
       {...props}>
       <TransferChainSelectorFormItem
         chainFilters={sourceOptions}
-        style={{ flexBasis: '100%' }}
+        style={{ flexBasis: '100%', width: '100%' }}
         selectProps={{ placeholder: 'Select', notFoundContent: 'Route not found' }}
         className='bs-mb-0'
         name={sourceChainFieldName}
@@ -176,7 +177,7 @@ function CrossChainRouteSelectorContent ({
       <TransferChainSelectorFormItem
         onChange={onDestChainChange}
         chainFilters={destOptions}
-        style={{ flexBasis: '100%' }}
+        style={{ flexBasis: '100%', width: '100%' }}
         selectProps={{ placeholder: 'Select', notFoundContent: 'Route not found' }}
         className='bs-mb-0'
         name={destChainFieldName}
diff --git a/src/components/transfer/form-items/TransferChainSelectorFormItem.module.sass b/src/components/transfer/form-items/TransferChainSelectorFormItem.module.sass
index 4bb38446..0a028c63 100644
--- a/src/components/transfer/form-items/TransferChainSelectorFormItem.module.sass
+++ b/src/components/transfer/form-items/TransferChainSelectorFormItem.module.sass
@@ -1,3 +1,5 @@
+@import 'src/styles/subsocial-vars.scss'
+
 .NetworkOption
   .Avatar
     width: 2em
@@ -6,3 +8,11 @@
     border: none !important
     box-shadow: 0 0 0 1px #dee2e6
     margin: 1px
+
+@media (max-width: $max_mobile_width)
+  .CrossChainSelectors
+    flex-direction: column
+    align-items: center !important
+
+    svg
+      transform: rotate(90deg)

From 4ff9cb7e7406f9792f3783b13266ef6bc439c536 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Dec 2023 15:10:13 +0200
Subject: [PATCH 17/18] Fix after rebase

---
 .../Creators/modals/TxButtons.tsx             |  4 --
 .../providers/MyExtensionAccountsContext.tsx  | 38 +++++++++----------
 .../transfer/TransferPageLayout.tsx           | 10 ++---
 .../transfer/form-items/AddressFormItem.tsx   | 12 +++---
 .../transfer/transferContent/TransferForm.tsx | 20 +++++-----
 src/components/utils/FormSubmitButton.tsx     |  2 +-
 6 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
index 1724b107..7318d8f6 100644
--- a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
+++ b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -49,10 +49,6 @@ type StakingTxButtonProps = CommonTxButtonProps & {
   tx: string
 }
 
-const StakingTxButton = ({
-  amount,
-  spaceId,
-  decimal,
 function StakingTxButton ({
   amount,
   spaceId,
diff --git a/src/components/providers/MyExtensionAccountsContext.tsx b/src/components/providers/MyExtensionAccountsContext.tsx
index e5fab843..f8682568 100644
--- a/src/components/providers/MyExtensionAccountsContext.tsx
+++ b/src/components/providers/MyExtensionAccountsContext.tsx
@@ -61,23 +61,23 @@ export const ExtensionAccountsContext = createContext<ExtensionAccountContext>(
   {} as ExtensionAccountContext
 )
 
-export function ExtensionAccountProvider(props: React.PropsWithChildren<{}>) {
+export function ExtensionAccountProvider (props: React.PropsWithChildren<{}>) {
   const { isMobile } = useResponsiveSize()
 
   const currentWallet = getCurrentWallet()
 
-  const [currentStep, setCurrentStep] = useState(
+  const [ currentStep, setCurrentStep ] = useState(
     currentWallet || isMobile ? StepsEnum.SelectAccount : StepsEnum.SelectWallet
   )
 
   const currentAddress = useCurrentAccount()
-  const [showSignInModal, setShowSignInModal] = useState(false)
-  const [myAccount, setMyAccount] = useState<string>()
-  const [isMulti, setIsMulti] = useState(
+  const [ showSignInModal, setShowSignInModal ] = useState(false)
+  const [ myAccount, setMyAccount ] = useState<string>()
+  const [ isMulti, setIsMulti ] = useState(
     currentAddress ? checkIsMulti(currentAddress.join(',')) : false
   )
-  const [balances, setBalances] = useState<Balances>(defaultBalances)
-  const [refreshBalances, setRefreshBalances] = useState(false)
+  const [ balances, setBalances ] = useState<Balances>(defaultBalances)
+  const [ refreshBalances, setRefreshBalances ] = useState(false)
   const dispatch = useAppDispatch()
 
   const {
@@ -87,21 +87,21 @@ export function ExtensionAccountProvider(props: React.PropsWithChildren<{}>) {
   const openModal = () => setShowSignInModal(true)
   const closeModal = () => setShowSignInModal(false)
 
-  const [recheckId, recheck] = useReducer((x) => (x + 1) % 16384, 0)
+  const [ recheckId, recheck ] = useReducer((x) => (x + 1) % 16384, 0)
 
-  const [status, setStatus] = useState<Status>('LOADING')
+  const [ status, setStatus ] = useState<Status>('LOADING')
 
   useEffect(() => {
     const props = { dispatch, setStatus }
     isMobile ? mobileWalletConection(props) : desktopWalletConnect(props)
-  }, [recheckId])
+  }, [ recheckId ])
 
   useEffect(() => {
     if (!recheckStatuses.includes(status)) return
 
     const intervalId = setInterval(recheck, 1000)
     return () => clearInterval(intervalId)
-  }, [status])
+  }, [ status ])
 
   useEffect(() => {
     const setAddresses = async () => {
@@ -123,7 +123,7 @@ export function ExtensionAccountProvider(props: React.PropsWithChildren<{}>) {
     }
 
     setAddresses()
-  }, [addressOrDomainFromUrl, status])
+  }, [ addressOrDomainFromUrl, status ])
 
   const obj: ExtensionAccountContext = {
     extensionStatus: status,
@@ -165,15 +165,15 @@ export const setCurrentAddress = (dispatch: AppDispatch, accounts: string) => {
   })
 }
 
-export function useExtensionAccountsContext() {
+export function useExtensionAccountsContext () {
   return useContext(ExtensionAccountsContext)
 }
 
-export function useMyExtensionAccount() {
+export function useMyExtensionAccount () {
   return useExtensionAccountsContext()
 }
 
-export function useIsMulti() {
+export function useIsMulti () {
   return useExtensionAccountsContext().isMulti
 }
 
@@ -185,11 +185,11 @@ export const useIsMyAddress = (address?: string) => {
     .includes(toGenericAccountId(address))
 }
 
-export function useMyExtensionAddresses() {
+export function useMyExtensionAddresses () {
   return useAppSelector<InjectedAccountWithMeta[]>(selectAccounts)
 }
 
-export function useCurrentAccount() {
+export function useCurrentAccount () {
   const addressFromRedux =
     useAppSelector<string>(selectCurrentAccount)
       ?.split(',')
@@ -206,7 +206,7 @@ export const useMyAddresses = (): string[] | undefined =>
     .filter((x) => x)
 
 export const useMyAddress = (): string | undefined => {
-  const [address] = useMyAddresses() || []
+  const [ address ] = useMyAddresses() || []
 
   return address ? toGenericAccountId(address) : undefined
 }
@@ -220,7 +220,7 @@ export const useMyBalances = () => {
   return useMyExtensionAccount().balances
 }
 
-export function useIsSignedIn() {
+export function useIsSignedIn () {
   return nonEmptyArr(useMyAddresses()) || !!getAddressFromStorage()
 }
 
diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx
index b8b68981..bdc3db1e 100644
--- a/src/components/transfer/TransferPageLayout.tsx
+++ b/src/components/transfer/TransferPageLayout.tsx
@@ -34,13 +34,13 @@ const TransferPageLayout = ({
 }: TransferPageLayoutProps) => {
   const { t } = useTranslation()
 
-  const [showSuccessModal, setShowSuccessModal] = useState(false)
+  const [ showSuccessModal, setShowSuccessModal ] = useState(false)
 
-  const [currentState, setCurrentState] = useState<'form' | 'loading'>()
-  const [transferData, setTransferData] = useState<
+  const [ currentState, setCurrentState ] = useState<'form' | 'loading'>()
+  const [ transferData, setTransferData ] = useState<
     ExtendedTransferFormData | undefined
   >()
-  const [activeTab, setActiveTab] = useState(
+  const [ activeTab, setActiveTab ] = useState(
     getTabKey((transferType as any) || 'same-chain')
   )
   const router = useRouter()
@@ -61,7 +61,7 @@ const TransferPageLayout = ({
     }
 
     router.replace(url)
-  }, [activeTab])
+  }, [ activeTab ])
 
   useEffect(() => {
     setCurrentState('form')
diff --git a/src/components/transfer/form-items/AddressFormItem.tsx b/src/components/transfer/form-items/AddressFormItem.tsx
index cf238892..a463eb66 100644
--- a/src/components/transfer/form-items/AddressFormItem.tsx
+++ b/src/components/transfer/form-items/AddressFormItem.tsx
@@ -20,7 +20,7 @@ export type AddressFormItemProps = FormItemProps & {
   isModal?: boolean
 }
 
-export function AddressFormItem({
+export function AddressFormItem ({
   name,
   form,
   ...props
@@ -29,7 +29,7 @@ export function AddressFormItem({
     <Form.Item
       noStyle
       shouldUpdate={(prev, curr) =>
-        !checkSameAttributesValues(prev, curr, [name?.toString() ?? ''])
+        !checkSameAttributesValues(prev, curr, [ name?.toString() ?? '' ])
       }
     >
       {({ getFieldValue, validateFields, isFieldTouched }) => {
@@ -44,7 +44,7 @@ export function AddressFormItem({
             {...props}
             revalidate={async () => {
               if (isFieldTouched(fieldName) || value) {
-                await validateFields([fieldName])
+                await validateFields([ fieldName ])
               }
             }}
           />
@@ -54,7 +54,7 @@ export function AddressFormItem({
   )
 }
 
-function AddressInput({
+function AddressInput ({
   inputProps,
   rules,
   isRequired,
@@ -74,12 +74,12 @@ function AddressInput({
 
   useEffect(() => {
     revalidate()
-  }, [isEthAddress, isRequired, validateIsNotSelfErrMsg])
+  }, [ isEthAddress, isRequired, validateIsNotSelfErrMsg ])
 
   const augmentedRules: Rule[] = [
     ...(rules || []),
     ({ getFieldValue }) => ({
-      async validator() {
+      async validator () {
         const address = getFieldValue(props.name ?? '')
 
         if (isRequired && !address) {
diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx
index 23326c84..23603bd1 100644
--- a/src/components/transfer/transferContent/TransferForm.tsx
+++ b/src/components/transfer/transferContent/TransferForm.tsx
@@ -78,7 +78,7 @@ export const DEFAULT_TOKEN = {
 type SelectedTokenChainData = TokenData & {
   dest?: string
 }
-export default function TransferForm({
+export default function TransferForm ({
   defaultSelectedToken = DEFAULT_TOKEN,
   defaultRecipient,
   crossChain,
@@ -104,8 +104,8 @@ export default function TransferForm({
 
   const myAddress = useMyAddress()
 
-  const [form] = Form.useForm()
-  const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
+  const [ form ] = Form.useForm()
+  const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
     network: '',
     token: '',
   })
@@ -139,16 +139,16 @@ export default function TransferForm({
 
     if (crossChain && !recipient) {
       form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
-      form.validateFields([transferFormField('recipient')])
+      form.validateFields([ transferFormField('recipient') ])
     } else if (!crossChain) {
       const isMyAddress =
         toGenericAccountId(myAddress) === toGenericAccountId(recipient)
       if (isMyAddress) {
         form.setFieldsValue({ [transferFormField('recipient')]: '' })
-        form.validateFields([transferFormField('recipient')])
+        form.validateFields([ transferFormField('recipient') ])
       }
     }
-  }, [crossChain])
+  }, [ crossChain ])
 
   const resetForm = useCallback(() => {
     if (!defaultSelectedToken) return
@@ -244,7 +244,7 @@ export default function TransferForm({
 
   useEffect(() => {
     resetForm()
-  }, [resetForm])
+  }, [ resetForm ])
 
   const onTokenChange = (token: string) => {
     form.setFieldsValue({ token })
@@ -326,12 +326,12 @@ export default function TransferForm({
     if (!myAddress || !submittedData.current) return
     const { sourceChain, destChain, recipient, sender } = submittedData.current
     if (sourceChain) {
-      fetchBalanceByNetwork(dispatch, [sender], sourceChain)
+      fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
     }
     if (destChain) {
       const WAIT_TIME = 30 * 1000 // 30 seconds
       setTimeout(() => {
-        fetchBalanceByNetwork(dispatch, [recipient], destChain)
+        fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
       }, WAIT_TIME)
     }
   }
@@ -347,7 +347,7 @@ export default function TransferForm({
     getCrossChainFee: () => getCrossChainFee(form).balance,
   }
 
-  const requiredTouchedFields = [transferFormField('amount')]
+  const requiredTouchedFields = [ transferFormField('amount') ]
   if (crossChain) {
     requiredTouchedFields.push(
       transferFormField('source'),
diff --git a/src/components/utils/FormSubmitButton.tsx b/src/components/utils/FormSubmitButton.tsx
index fd2ee684..1cde6857 100644
--- a/src/components/utils/FormSubmitButton.tsx
+++ b/src/components/utils/FormSubmitButton.tsx
@@ -21,7 +21,7 @@ export default function FormSubmitButton ({ form, requiredTouchedFields, childre
         if (requiredTouchedFields) {
           for (let i = 0; i < requiredTouchedFields.length; i++) {
             const fieldName = requiredTouchedFields[i]
-            console.log(values[fieldName], fieldName)
+
             const isEmptyAndUntouched = !usedForm.isFieldTouched(fieldName) && !values[fieldName]
             hasAnyEmptyAndUntouchedFields = hasAnyEmptyAndUntouchedFields || isEmptyAndUntouched
             if (isEmptyAndUntouched) break

From 26d1dba788625e237fa2282eafdc01097e2f8734 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Dec 2023 15:11:11 +0200
Subject: [PATCH 18/18] Add space in success content file

---
 src/components/transfer/transferContent/SuccessContent.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/transfer/transferContent/SuccessContent.tsx b/src/components/transfer/transferContent/SuccessContent.tsx
index 841c1bec..c490f68c 100644
--- a/src/components/transfer/transferContent/SuccessContent.tsx
+++ b/src/components/transfer/transferContent/SuccessContent.tsx
@@ -38,6 +38,7 @@ function SuccessContent ({
         : toShortAddress(recipient) ?? '',
     },
   ]
+  
   if (!destChainName) {
     firstCardContent.push({
       label: t('transfer.source'),