From eb4dc30e6b37f22bc5772f7da727562e88cf9643 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 22 Mar 2023 10:51:23 +0200
Subject: [PATCH 01/54] Add dot seller functional

---
 .../common/inputs/SelectAccountInput.tsx      |  57 ++++--
 .../domains/EligibleDomainsSection.tsx        |  40 ++--
 .../domains/dot-seller/BuyByDotButton.tsx     | 176 ++++++++++++++++++
 .../domains/dot-seller/Index.module.sass      |  57 ++++++
 src/components/domains/dot-seller/config.ts   |  10 +
 .../domains/dot-seller/remark/config.ts       |  46 +++++
 .../domains/dot-seller/remark/core.ts         | 135 ++++++++++++++
 .../domains/dot-seller/remark/decorators.ts   |  46 +++++
 .../domains/dot-seller/remark/index.ts        |   1 +
 .../domains/dot-seller/remark/types.ts        | 140 ++++++++++++++
 .../domains/dot-seller/remark/utils.ts        |   6 +
 src/components/domains/dot-seller/utils.tsx   |  12 ++
 .../domains/manage/ManageDomainProvider.tsx   |  26 ++-
 src/components/domains/utils.tsx              |   7 +-
 src/components/donate/LazyTxButton.tsx        |  36 ++--
 src/config/connections/staging.ts             |   2 +-
 yarn.lock                                     |  72 +++----
 17 files changed, 785 insertions(+), 84 deletions(-)
 create mode 100644 src/components/domains/dot-seller/BuyByDotButton.tsx
 create mode 100644 src/components/domains/dot-seller/Index.module.sass
 create mode 100644 src/components/domains/dot-seller/config.ts
 create mode 100644 src/components/domains/dot-seller/remark/config.ts
 create mode 100644 src/components/domains/dot-seller/remark/core.ts
 create mode 100644 src/components/domains/dot-seller/remark/decorators.ts
 create mode 100644 src/components/domains/dot-seller/remark/index.ts
 create mode 100644 src/components/domains/dot-seller/remark/types.ts
 create mode 100644 src/components/domains/dot-seller/remark/utils.ts
 create mode 100644 src/components/domains/dot-seller/utils.tsx

diff --git a/src/components/common/inputs/SelectAccountInput.tsx b/src/components/common/inputs/SelectAccountInput.tsx
index 0fec0d289..2fa1193eb 100644
--- a/src/components/common/inputs/SelectAccountInput.tsx
+++ b/src/components/common/inputs/SelectAccountInput.tsx
@@ -1,20 +1,32 @@
-import { GenericAccountId } from '@polkadot/types'
-import { isAddress } from '@polkadot/util-crypto'
-import registry from '@subsocial/api/utils/registry'
-import { isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
 import { Select } from 'antd'
 import { useEffect, useState } from 'react'
-import { useMyAccounts } from 'src/components/auth/MyAccountsContext'
-import { equalAddresses } from 'src/components/substrate'
-import { useSelectProfile } from 'src/rtk/app/hooks'
 import { SelectAddressPreview } from '../../profile-selector/MyAccountMenu'
+import { isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
+import registry from '@subsocial/api/utils/registry'
+import { GenericAccountId } from '@polkadot/types'
 import Avatar from '../../profiles/address-views/Avatar'
 import styles from './inputs.module.sass'
+import { useSelectProfile } from 'src/rtk/app/hooks'
+import { useMyAccounts } from 'src/components/auth/MyAccountsContext'
+import { equalAddresses } from 'src/components/substrate'
+
+export const isValidAccount = (address?: string) => {
+  try {
+    if (address) {
+      return !!new GenericAccountId(registry, address)
+    }
+
+    return false
+  } catch {}
+
+  return false
+}
 
 type SelectAccountInputProps = {
   className?: string
   setValue: (value: string) => void
   value?: string
+  withAvatar?: boolean
 }
 
 const filterSelectOptions = (adresses: string[], value?: string) => {
@@ -31,12 +43,17 @@ const filterSelectOptions = (adresses: string[], value?: string) => {
     })
 }
 
-export const SelectAccountInput = ({ setValue, value, className }: SelectAccountInputProps) => {
+export const SelectAccountInput = ({
+  setValue,
+  value,
+  className,
+  withAvatar = true,
+}: SelectAccountInputProps) => {
   const { accounts, status } = useMyAccounts()
   const allExtensionAccounts = accounts.map(x => toSubsocialAddress(x.address) as string)
 
-  const [defaultOptions, setDefaultOptions] = useState<any[]>([])
-  const [selectOptions, setSelectOptions] = useState<any[]>(defaultOptions)
+  const [ defaultOptions, setDefaultOptions ] = useState<any[]>([])
+  const [ selectOptions, setSelectOptions ] = useState<any[]>(defaultOptions)
   const profile = useSelectProfile(value)
 
   useEffect(() => {
@@ -45,7 +62,7 @@ export const SelectAccountInput = ({ setValue, value, className }: SelectAccount
     const options = status === 'OK' ? filterSelectOptions(allExtensionAccounts, value) : []
     setDefaultOptions(options)
     setSelectOptions(options)
-  }, [value, status])
+  }, [ value, status ])
 
   const onSelectChange = (value: string) => {
     setValue(value)
@@ -54,7 +71,7 @@ export const SelectAccountInput = ({ setValue, value, className }: SelectAccount
   const onSearchHandler = (searchValue: any) => {
     const options = []
 
-    if (isAddress(searchValue)) {
+    if (isValidAccount(searchValue)) {
       options.push({
         key: 'key-' + searchValue,
         label: (
@@ -84,19 +101,23 @@ export const SelectAccountInput = ({ setValue, value, className }: SelectAccount
     }
   }
 
+  const avatar = (
+    <div className='mr-2'>
+      {value 
+        ? <Avatar address={value} avatar={profile?.content?.image} size={50} /> 
+        : <div className={`${styles.Circle} mr-2`}></div>}
+    </div>
+  )
+
   return (
     <div className='d-flex align-items-center'>
-      {value ? (
-        <Avatar address={value} avatar={profile?.content?.image} size={50} />
-      ) : (
-        <div className={`${styles.Circle} mr-2`}></div>
-      )}
+      {withAvatar && avatar}
       <Select
         showSearch
         allowClear
         value={value}
         size='large'
-        className={`${className} ml-2`}
+        className={className}
         options={selectOptions}
         onSearch={onSearchHandler}
         onSelect={onSelectHandler}
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 6896589c3..1b0f2f671 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,6 +1,6 @@
 import { isFunction } from '@polkadot/util'
 import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
-import { Button, Card, Result, Row, Tag } from 'antd'
+import { Button, Card, Radio, Result, Row, Tag, RadioChangeEvent } from 'antd';
 import BN from 'bn.js'
 import clsx from 'clsx'
 import React, { useState } from 'react'
@@ -24,6 +24,7 @@ import ClaimFreeDomainModal from './ClaimFreeDomainModal'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { DomainDetails, ResultContainer } from './utils'
+import BuyByDotButton from './dot-seller/BuyByDotButton';
 
 const log = newLogger('DD')
 
@@ -141,17 +142,16 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 
 const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
-  const { promoCode } = useManageDomainContext()
+  const { promoCode, variant } = useManageDomainContext()
+
+  let DefaultDomainAction = promoCode && domain.id.endsWith('.sub') ? ClaimFreeDomainSection : BuyDomainSection
+  
+  const action = variant === 'SUB' 
+    ? <DefaultDomainAction domain={domain} /> 
+    : <BuyByDotButton domain={domain} className={styles.BuyBtn}/>
 
-  let Action = BuyDomainSection
-  if (promoCode && domain.id.endsWith('.sub')) {
-    Action = ClaimFreeDomainSection
-  }
-  if (owner) {
-    Action = UnavailableBtn
-  }
 
-  return <Action domain={domain} />
+  return owner ? <UnavailableBtn domain={domain} /> : action
 }
 
 // type FoundDomainsProps = {
@@ -266,11 +266,17 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 //   )
 // }
 
+const variantOpt = [
+  { value: 'SUB', label: 'SUB' },
+  { value: 'DOT', label: 'DOT' }
+]
+
 const ChooseDomain = ({ domain }: DomainProps) => {
   const { domain: domainName, tld = config.resolvedDomain } = parseDomain(domain.id)
   const { isSupported } = useIsSupportedTld(tld)
   const id = `${domainName}.${tld}`
   const { domainStruct } = useFetchDomain(id)
+  const { setVariant } = useManageDomainContext()
 
   let content = null
 
@@ -281,8 +287,20 @@ const ChooseDomain = ({ domain }: DomainProps) => {
     content = <DomainItem key={id} domain={id} action={<DomainAction domain={domainStruct} />} />
   }
 
+  const onVariantChange = (e: RadioChangeEvent) => {
+    setVariant(e.target.value)
+  }
+
+  const title = <div className='d-flex align-items-center justify-content-between w-100'>
+    <div>Result: </div>
+    <Radio.Group onChange={onVariantChange} defaultValue={'SUB'}>
+      {variantOpt.map(({ value, label }, i) => 
+        <Radio.Button key={i} value={value}>{label}</Radio.Button>)}
+    </Radio.Group>
+  </div>
+
   return (
-    <ResultContainer title='Result' icon={<LocalIcon path={'/icons/reward.svg'} />}>
+    <ResultContainer title={title} icon={<LocalIcon path={'/icons/reward.svg'} />}>
       {content}
     </ResultContainer>
   )
diff --git a/src/components/domains/dot-seller/BuyByDotButton.tsx b/src/components/domains/dot-seller/BuyByDotButton.tsx
new file mode 100644
index 000000000..7393f8999
--- /dev/null
+++ b/src/components/domains/dot-seller/BuyByDotButton.tsx
@@ -0,0 +1,176 @@
+import { useMyAddress } from '../../auth/MyAccountsContext'
+import { useLazyConnectionsContext } from '../../lazy-connection/LazyConnectionContext'
+import { randomAsNumber } from '@polkadot/util-crypto'
+import { SocialRemark } from './remark/core'
+import { DomainEntity } from '../../../rtk/features/domains/domainsSlice'
+import { useState } from 'react'
+import { Button, Modal } from 'antd'
+import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
+import { useManageDomainContext } from '../manage/ManageDomainProvider'
+import styles from './Index.module.sass'
+import { MutedDiv } from '../../utils/MutedText'
+import clsx from 'clsx'
+import { validDomainPrice, testRemarkTitle, treasuryAccount, domainsNetwork } from './config'
+import { SubSclSource } from './remark/types'
+import { useGetDecimalAndSymbol } from './utils'
+import { FormatBalance } from '../../common/balances/Balance'
+import LazyTxButton from 'src/components/donate/LazyTxButton'
+import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
+
+type BuyByDotButtonProps = {
+  domain: DomainEntity
+  className?: string
+}
+
+type BuyByDotTxButtonProps = BuyByDotButtonProps & {
+  close: () => void
+}
+
+const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) => {
+  const { recipient } = useManageDomainContext()
+
+  const myAddress = useMyAddress()
+  const { getApiByNetwork } = useLazyConnectionsContext()
+
+  const getParams = async () => {
+    if (!myAddress) return []
+
+    const api = await getApiByNetwork(domainsNetwork)
+
+    if (!api) return []
+
+    const transferTx = api.tx.balances.transfer(
+      treasuryAccount,
+      validDomainPrice,
+    )
+
+    const regRmrkMsg: SubSclSource<'DMN_REG'> = {
+      protName: testRemarkTitle,
+      action: 'DMN_REG',
+      version: '0.1',
+      content: {
+        opId: `${transferTx.hash.toHex()}-${randomAsNumber()}`,
+        domainName: domain.id,
+        target: recipient,
+        token: 'ROC',
+      },
+    }
+
+    const remarkTx = api.tx.system.remark(new SocialRemark().fromSource(regRmrkMsg).toMessage())
+
+    return [ [ transferTx, remarkTx ] ]
+  }
+
+  const onSuccess = () => {
+    console.log('Extrinsic Success')
+    close()
+  }
+
+  const onFailed = () => {
+    console.log('Extrinsic failed')
+  }
+
+  return (
+    <LazyTxButton
+      block
+      type='primary'
+      size='middle'
+      network={domainsNetwork}
+      accountId={myAddress}
+      disabled={!recipient}
+      tx={'utility.batchAll'}
+      params={getParams}
+      onSuccess={onSuccess}
+      onFailed={onFailed}
+      label={'Register'}
+      className={className}
+    />
+  )
+}
+
+type BuyDomainModalProps = BuyByDotButtonProps & {
+  open: boolean
+  close: () => void
+}
+
+const BuyDomainModal = ({ domain, open, close }: BuyDomainModalProps) => {
+  const { id: domainId } = domain
+  const myAddress = useMyAddress()
+  const { recipient, setRecipient } = useManageDomainContext()
+  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
+
+  const balance = useBalancesByNetwork({ account: myAddress, network: domainsNetwork, currency: symbol })
+
+  const { freeBalance } = balance || {}
+
+  const title = (
+    <div className={styles.ModalTitle}>
+      <h2>Register {domainId}</h2>
+      <MutedDiv>
+        Now you need to choose the recipient to whom the domain will be registered
+      </MutedDiv>
+    </div>
+  )
+
+  const modalFooter = (
+    <div className={styles.FooterButtons}>
+      <Button type='primary' ghost block onClick={close}>
+        Close
+      </Button>
+      <BuyByDotTxButton domain={domain} className={'ml-0'} close={close} />
+    </div>
+  )
+
+  return (
+    <Modal
+      visible={open}
+      onCancel={close}
+      title={title}
+      footer={modalFooter}
+      width={550}
+      destroyOnClose
+      className={'DfSignInModal'}
+    >
+      <div className={styles.ModalBody}>
+        <div
+          className={clsx('d-flex align-items-center justify-content-between', styles.Recipient)}
+        >
+          <div>Recipient: </div>
+          <div className='d-flex align-items-center'>
+            <MutedDiv>Balance:</MutedDiv>
+            <div className='ml-1'>
+              <FormatBalance value={freeBalance} decimals={decimal} currency={symbol} />
+            </div>
+          </div>
+        </div>
+        <SelectAccountInput
+          className={`${styles.Select} w-100`}
+          setValue={setRecipient}
+          value={recipient}
+          withAvatar={false}
+        />
+      </div>
+    </Modal>
+  )
+}
+
+const BuyByDotButton = ({ domain }: BuyByDotButtonProps) => {
+  const [ open, setOpen ] = useState(false)
+  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
+
+  const close = () => setOpen(false)
+
+  const price = <FormatBalance value={validDomainPrice.toString()} decimals={decimal} currency={symbol}/>
+
+  return (
+    <span className={styles.RegisterButton}>
+      <div>{price}</div>
+      <Button type={'primary'} block onClick={() => setOpen(true)}>
+        Register
+      </Button>
+      <BuyDomainModal domain={domain} open={open} close={close} />
+    </span>
+  )
+}
+
+export default BuyByDotButton
diff --git a/src/components/domains/dot-seller/Index.module.sass b/src/components/domains/dot-seller/Index.module.sass
new file mode 100644
index 000000000..47dad35a6
--- /dev/null
+++ b/src/components/domains/dot-seller/Index.module.sass
@@ -0,0 +1,57 @@
+@import 'src/styles/subsocial-vars.scss'
+
+$element_height: 40px
+
+.ModalBody
+  padding: 1.5rem
+
+.Recipient
+  font-size: $font_small
+  margin-bottom: 4px
+
+.FooterButtons
+  display: flex
+  gap: 1rem
+
+  button
+    height: $element_height
+
+.ModalTitle
+  h2 
+    color: #222
+    line-height: 1.5
+    font-weight: bold
+
+  div
+    font-size: $font_normal
+
+  
+.Select
+  height: $element_height
+  overflow: hidden
+
+  \:global .ant-select-selector
+    height: $element_height !important
+
+    input
+      height: $element_height !important
+
+    .ant-select-selection-search
+      overflow: hidden
+
+    .ant-select-selection-item
+      align-self: center
+      font-size: $font_normal
+
+    .ant-select-selection-placeholder
+      align-self: center
+      font-size: $font_normal
+
+.RegisterButton
+  display: flex
+  align-items: center
+  gap: $space_tiny
+
+  button
+    font-size: $font_normal
+    padding: 0 $space_normal
\ No newline at end of file
diff --git a/src/components/domains/dot-seller/config.ts b/src/components/domains/dot-seller/config.ts
new file mode 100644
index 000000000..a9cfb8310
--- /dev/null
+++ b/src/components/domains/dot-seller/config.ts
@@ -0,0 +1,10 @@
+import BN from 'bn.js'
+import { SocialRemarkMessageProtocolName } from './remark/types'
+
+export const validDomainPrice = new BN('100000000') // 0.01
+
+export const testRemarkTitle: SocialRemarkMessageProtocolName = 'social_t_0'
+
+export const domainsNetwork = 'rococo'
+
+export const treasuryAccount = '3qjCbqfT6CyiYVVrwvr3VeYTCX1X5VY2v3WJ2K9YW5znP27B'
\ No newline at end of file
diff --git a/src/components/domains/dot-seller/remark/config.ts b/src/components/domains/dot-seller/remark/config.ts
new file mode 100644
index 000000000..ccd057403
--- /dev/null
+++ b/src/components/domains/dot-seller/remark/config.ts
@@ -0,0 +1,46 @@
+import {
+  SocialRemarkMessageAction,
+  SocialRemarkMessageProtocolName,
+  SocialRemarkMessageVersion
+} from './types';
+
+export type SocialRemarkConfigData = {
+  protNames?: SocialRemarkMessageProtocolName[];
+  actions?: SocialRemarkMessageAction[];
+  versions?: SocialRemarkMessageVersion[];
+};
+
+export class SocialRemarkConfig {
+  private static instance: SocialRemarkConfig;
+
+  private conf: Required<SocialRemarkConfigData> = {
+    protNames: ['social_t_0', 'social_t_1', 'social_t_2', 'social'],
+    actions: [
+      'DMN_REG',
+      'DMN_REG_OK',
+      'DMN_REG_REFUND',
+      'NRG_GEN',
+      'NRG_GEN_OK',
+      'NRG_GEN_REFUND'
+    ],
+    versions: ['0.1']
+  };
+
+  static getInstance(): SocialRemarkConfig {
+    if (!SocialRemarkConfig.instance) {
+      SocialRemarkConfig.instance = new SocialRemarkConfig();
+    }
+    return SocialRemarkConfig.instance;
+  }
+
+  public get config() {
+    return this.conf;
+  }
+
+  public setConfig(data: SocialRemarkConfigData) {
+    this.conf = {
+      ...this.conf,
+      ...data
+    };
+  }
+}
diff --git a/src/components/domains/dot-seller/remark/core.ts b/src/components/domains/dot-seller/remark/core.ts
new file mode 100644
index 000000000..66690850a
--- /dev/null
+++ b/src/components/domains/dot-seller/remark/core.ts
@@ -0,0 +1,135 @@
+import {
+  REMARK_CONTENT_VERSION_ACTION_MAP,
+  RemarkContentProps,
+  SocialRemarkMessage,
+  SocialRemarkMessageAction,
+  SocialRemarkMessageProtocolName,
+  SocialRemarkMessageVersion,
+  SubSclSource,
+} from './types'
+import { SocialRemarkConfig, SocialRemarkConfigData } from './config'
+import { decorateRemarkContentValue } from './decorators'
+
+export class SocialRemark {
+
+  static setConfig(data: SocialRemarkConfigData) {
+    SocialRemarkConfig.getInstance().setConfig(data)
+  }
+
+  private msgParsed: SocialRemarkMessage<SocialRemarkMessageAction, boolean> | null = null
+
+  private protNames: Set<SocialRemarkMessageProtocolName> = new Set(
+    SocialRemarkConfig.getInstance().config.protNames,
+  )
+
+  private versions: Set<SocialRemarkMessageVersion> = new Set(
+    SocialRemarkConfig.getInstance().config.versions,
+  )
+
+  private actions: Set<SocialRemarkMessageAction> = new Set(
+    SocialRemarkConfig.getInstance().config.actions,
+  )
+
+  private msgDelimiter = '::'
+
+  public get message(): SocialRemarkMessage<SocialRemarkMessageAction, boolean> | never {
+    if (!this.msgParsed) throw new Error('Message is not available.')
+    return this.msgParsed!
+  }
+
+  public get content() {
+    return this.msgParsed && this.msgParsed.valid ? this.msgParsed.content : null
+  }
+
+  public get version() {
+    return this.msgParsed ? this.msgParsed.version : null
+  }
+
+  public get isValidMessage(): boolean {
+    return !!this.msgParsed && this.msgParsed.valid
+  }
+
+  static bytesToString(src: unknown): string {
+    if (!src || !Buffer.isBuffer(src)) return ''
+    return Buffer.from(src).toString('utf-8')
+  }
+
+  public fromMessage(_maybeRemarkMsg: unknown): SocialRemark {
+    return this
+  }
+
+  public fromSource(rmrkSrc: SubSclSource<SocialRemarkMessageAction>): SocialRemark {
+    let isSrcValid = true
+
+    if (
+      !rmrkSrc ||
+      !this.isValidProtName(rmrkSrc.protName) ||
+      !this.isValidVersion(rmrkSrc.version) ||
+      !this.isValidAction(rmrkSrc.action)
+    )
+      isSrcValid = false
+
+    // TODO add content validation
+
+    if (!isSrcValid) throw new Error('Remark source is invalid')
+
+    try {
+      this.msgParsed = {
+        ...rmrkSrc,
+        valid: true,
+      }
+      const contentPropsMap = REMARK_CONTENT_VERSION_ACTION_MAP[rmrkSrc.version as any][rmrkSrc.action]
+      for (const contentPropName in contentPropsMap) {
+        (this.msgParsed.content as any)[contentPropName] = decorateRemarkContentValue(
+          this.msgParsed.action,
+          contentPropName as RemarkContentProps,
+          (rmrkSrc.content as any)[contentPropName],
+        )
+      }
+    } catch (e) {
+      console.log(e)
+      throw new Error('Error has been occurred during remark message creation.')
+    }
+    return this
+  }
+
+  public toMessage(): string {
+    if (!this.isValidMessage) throw new Error('Remark is not valid for build message.')
+
+    const msg: string[] = []
+    msg.push(this.message.protName)
+    msg.push(this.message.version)
+    msg.push(this.message.action)
+
+    try {
+      const contentPropsMap =
+        REMARK_CONTENT_VERSION_ACTION_MAP[this.message.version][this.message.action]
+      for (const contentPropName in contentPropsMap) {
+        msg[contentPropsMap[contentPropName]] = decorateRemarkContentValue(
+          this.message.action,
+          contentPropName as RemarkContentProps,
+          (this.message.content as any)[contentPropName],
+        )
+      }
+    } catch (e) {
+      console.log(e)
+      throw new Error('Error has been occurred during remark message creation.')
+    }
+
+    //TODO add validations
+    return msg.join(this.msgDelimiter)
+  }
+
+  private isValidProtName(src: string): boolean {
+    // TODO remove type casting
+    return !!(src && this.protNames.has(src as SocialRemarkMessageProtocolName))
+  }
+  private isValidVersion(src: string): boolean {
+    // TODO remove type casting
+    return !!(src && this.versions.has(src as SocialRemarkMessageVersion))
+  }
+  private isValidAction(src: string): boolean {
+    // TODO remove type casting
+    return !!(src && this.actions.has(src as SocialRemarkMessageAction))
+  }
+}
diff --git a/src/components/domains/dot-seller/remark/decorators.ts b/src/components/domains/dot-seller/remark/decorators.ts
new file mode 100644
index 000000000..f60b75664
--- /dev/null
+++ b/src/components/domains/dot-seller/remark/decorators.ts
@@ -0,0 +1,46 @@
+import { RemarkContentProps, SocialRemarkMessageAction } from './types'
+import { addressFromAnyToFormatted } from './utils'
+
+export function decorateRemarkContentValue(
+  action: SocialRemarkMessageAction,
+  propName: RemarkContentProps,
+  value: string,
+) {
+  switch (action) {
+    case 'DMN_REG': {
+      switch (propName) {
+        case 'target': {
+          return addressFromAnyToFormatted(value, 28)
+          break
+        }
+        default:
+          return value
+      }
+      break
+    }
+    case 'DMN_REG_OK': {
+      switch (propName) {
+        case 'target': {
+          return addressFromAnyToFormatted(value, 28)
+          break
+        }
+        default:
+          return value
+      }
+      break
+    }
+    case 'DMN_REG_REFUND': {
+      switch (propName) {
+        case 'target': {
+          return addressFromAnyToFormatted(value, 28)
+          break
+        }
+        default:
+          return value
+      }
+      break
+    }
+    default:
+      return value
+  }
+}
diff --git a/src/components/domains/dot-seller/remark/index.ts b/src/components/domains/dot-seller/remark/index.ts
new file mode 100644
index 000000000..d4b10bf8c
--- /dev/null
+++ b/src/components/domains/dot-seller/remark/index.ts
@@ -0,0 +1 @@
+export { SocialRemark } from './core'
diff --git a/src/components/domains/dot-seller/remark/types.ts b/src/components/domains/dot-seller/remark/types.ts
new file mode 100644
index 000000000..b6d476056
--- /dev/null
+++ b/src/components/domains/dot-seller/remark/types.ts
@@ -0,0 +1,140 @@
+export type DomainRegisterPayContent = {
+  domainName: string
+  target: string
+  token: string
+  opId: string
+}
+export type DomainRegisterCompletedContent = {
+  domainName: string
+  target: string
+  token: string
+  opId: string
+}
+
+export type DomainRegisterRefundContent = {
+  domainName: string
+  target: string
+  token: string
+  opId: string
+}
+
+export type EnergyGeneratePayContent = {
+  energyAmount: string
+  target: string
+  token: string
+  opId: string
+}
+export type EnergyGenerateCompletedContent = {
+  energyAmount: string
+  target: string
+  token: string
+  opId: string
+}
+
+export type EnergyGenerateRefundContent = {
+  energyAmount: string
+  target: string
+  token: string
+  opId: string
+}
+
+export type RemarkContentProps =
+  | keyof DomainRegisterPayContent
+  | keyof DomainRegisterCompletedContent
+  | keyof DomainRegisterRefundContent
+  | keyof EnergyGeneratePayContent
+  | keyof EnergyGenerateCompletedContent
+  | keyof EnergyGenerateRefundContent
+
+export type SocialRemarkMessageVersion = '0.1'
+export type SocialRemarkMessageAction =
+  | 'DMN_REG'
+  | 'DMN_REG_OK'
+  | 'DMN_REG_REFUND'
+  | 'NRG_GEN'
+  | 'NRG_GEN_OK'
+  | 'NRG_GEN_REFUND'
+
+export type SocialRemarkMessageProtocolName = 'social_t_0' | 'social_t_1' | 'social_t_2' | 'social'
+
+export type SocialRemarkMessageContent<A extends SocialRemarkMessageAction | string> =
+  A extends 'DMN_REG'
+    ? DomainRegisterPayContent
+    : A extends 'DMN_REG_OK'
+    ? DomainRegisterCompletedContent
+    : A extends 'DMN_REG_REFUND'
+    ? DomainRegisterRefundContent
+    : A extends 'NRG_GEN'
+    ? EnergyGeneratePayContent
+    : A extends 'NRG_GEN_OK'
+    ? EnergyGenerateCompletedContent
+    : A extends 'NRG_GEN_REFUND'
+    ? EnergyGenerateRefundContent
+    : never
+
+export type SocialRemarkMessage<
+  A extends SocialRemarkMessageAction | string = '',
+  V extends true | false = false,
+> = {
+  protName: SocialRemarkMessageProtocolName
+  version: SocialRemarkMessageVersion
+  action: A
+  valid: V // TODO make this prop optional
+  content: V extends true ? SocialRemarkMessageContent<A> : null
+}
+
+export type SubSclSource<A extends SocialRemarkMessageAction | string = ''> = Omit<
+  SocialRemarkMessage<A, true>,
+  'valid'
+>
+
+// type VersionActionPropsMap = Record<
+//   SocialRemarkMessageVersion,
+//   | Record<'DMN_REG', Record<keyof DomainRegisterPayContent, number>>
+//   | Record<'DMN_REG_OK', Record<keyof DomainRegisterCompletedContent, number>>
+//   | Record<'DMN_REG_REFUND', Record<keyof DomainRegisterRefundContent, number>>
+//   | Record<'NRG_GEN', Record<keyof EnergyGeneratePayContent, number>>
+//   | Record<'NRG_GEN_OK', Record<keyof EnergyGenerateCompletedContent, number>>
+//   | Record<'NRG_GEN_REFUND', Record<keyof EnergyGenerateRefundContent, number>>
+// >
+
+export const REMARK_CONTENT_VERSION_ACTION_MAP: any = {
+  '0.1': {
+    DMN_REG: {
+      opId: 3,
+      target: 4,
+      domainName: 5,
+      token: 6,
+    },
+    DMN_REG_OK: {
+      opId: 3,
+      target: 4,
+      domainName: 5,
+      token: 6,
+    },
+    DMN_REG_REFUND: {
+      opId: 3,
+      target: 4,
+      domainName: 5,
+      token: 6,
+    },
+    NRG_GEN: {
+      opId: 3,
+      target: 4,
+      energyAmount: 5,
+      token: 6,
+    },
+    NRG_GEN_OK: {
+      opId: 3,
+      target: 4,
+      energyAmount: 5,
+      token: 6,
+    },
+    NRG_GEN_REFUND: {
+      opId: 3,
+      target: 4,
+      energyAmount: 5,
+      token: 6,
+    },
+  },
+}
diff --git a/src/components/domains/dot-seller/remark/utils.ts b/src/components/domains/dot-seller/remark/utils.ts
new file mode 100644
index 000000000..226205624
--- /dev/null
+++ b/src/components/domains/dot-seller/remark/utils.ts
@@ -0,0 +1,6 @@
+import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
+
+export function addressFromAnyToFormatted(addressAny: string, prefix: number) {
+  const publicKey = decodeAddress(addressAny)
+  return encodeAddress(publicKey, prefix)
+}
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
new file mode 100644
index 000000000..7ef0237c5
--- /dev/null
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -0,0 +1,12 @@
+import { useChainInfo } from '../../../rtk/features/chainsInfo/chainsInfoHooks'
+
+export const useGetDecimalAndSymbol = (network: string) => {
+  const chainsInfo = useChainInfo()
+
+  const { tokenDecimals, tokenSymbols, nativeToken } = chainsInfo[network] || {}
+
+  const decimal = tokenDecimals?.[0] || 0
+  const symbol = tokenSymbols?.[0] || nativeToken
+
+  return { decimal, symbol }
+}
\ No newline at end of file
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index 8723cf999..0296a040f 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router'
 import React, { createContext, useContext, useState } from 'react'
 import { ManageDomainModal } from './DomainManageModal'
+import { useMyAddress } from '../../auth/MyAccountsContext';
 
 export type MenuSteps = 'subid' | 'inner' | 'outer' | 'menu' | 'success'
 type OpenManageModalFn = (step: MenuSteps, domain?: string) => void
@@ -10,14 +11,24 @@ type ManageDomainProviderState = {
   openManageModal: OpenManageModalFn
   promoCode?: string
   clearPromoCode: () => void
+  variant: Variant
+  setVariant: (variant: Variant) => void
+  recipient: string
+  setRecipient: (recipient: string) => void
 }
 
+type Variant = 'SUB' | 'DOT'
+
 const ManageDomainContext = createContext<ManageDomainProviderState>({} as any)
 
 export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ children, promoCode }) => {
+  const myAddress = useMyAddress()
   const [currentStep, setStep] = useState<MenuSteps>()
   const [domain, setDomain] = useState<string>()
   const [visible, setVisible] = useState(true)
+  const [ variant, setVariant ] = useState<Variant>('SUB')
+  const [ recipient, setRecipient ] = useState<string>(myAddress || '')
+
 
   const router = useRouter()
   const [activePromoCode, setActivePromoCode] = useState(promoCode)
@@ -40,10 +51,19 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
     setDomain(undefined)
   }
 
+  const value = {
+    currentStep, 
+    openManageModal, 
+    variant, 
+    setVariant,
+    recipient,
+    setRecipient,
+    promoCode: activePromoCode, 
+    clearPromoCode
+  }
+
   return (
-    <ManageDomainContext.Provider
-      value={{ currentStep, openManageModal, promoCode: activePromoCode, clearPromoCode }}
-    >
+    <ManageDomainContext.Provider value={value}>
       {children}
       {domain && <ManageDomainModal domain={domain} close={close} visible={visible} />}
     </ManageDomainContext.Provider>
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 2c6d087b3..b096fb6a9 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -13,13 +13,18 @@ import styles from './index.module.sass'
 
 const { resolvedDomain } = config
 
+type ResultContainerProps = Omit<HTMLProps<HTMLDivElement>, 'title'> & {
+  title: React.ReactNode
+  icon: JSX.Element
+}
+
 export const ResultContainer = ({
   title,
   className,
   icon,
   children,
   ...props
-}: { title: string; icon: JSX.Element } & HTMLProps<HTMLDivElement>) => {
+}: ResultContainerProps) => {
   return (
     <div className={clsx('d-flex flex-column', className)}>
       <h2 {...props} className={clsx('d-flex align-items-center ColorCurrentColor')}>
diff --git a/src/components/donate/LazyTxButton.tsx b/src/components/donate/LazyTxButton.tsx
index fdfbbdc79..6c7d1e150 100644
--- a/src/components/donate/LazyTxButton.tsx
+++ b/src/components/donate/LazyTxButton.tsx
@@ -58,6 +58,27 @@ export type TxButtonProps = BaseTxButtonProps & {
   customNodeApi?: ApiPromise
 }
 
+export const getExtrinsicByApi = async (
+  api: ApiPromise, 
+  tx?: string, 
+  params?: any[] | GetTxParamsFn | GetTxParamsAsyncFn
+): Promise<SubmittableExtrinsic> => {
+  const [ pallet, method ] = (tx || '').split('.')
+
+  if (!api.tx[pallet]) {
+    throw new Error(`Unable to find api.tx.${pallet}`)
+  } else if (!api.tx[pallet][method]) {
+    throw new Error(`Unable to find api.tx.${pallet}.${method}`)
+  }
+
+  let resultParams = (params || []) as any[]
+  if (isFunction(params)) {
+    resultParams = await params()
+  }
+
+  return api.tx[pallet][method](...(resultParams))
+}
+
 function LazyTxButton({
   accountId,
   network,
@@ -100,20 +121,7 @@ function LazyTxButton({
       throw `Connection for ${network} not found`
     }
 
-    const [pallet, method] = (tx || '').split('.')
-
-    if (!api.tx[pallet]) {
-      throw new Error(`Unable to find api.tx.${pallet}`)
-    } else if (!api.tx[pallet][method]) {
-      throw new Error(`Unable to find api.tx.${pallet}.${method}`)
-    }
-
-    let resultParams = (params || []) as any[]
-    if (isFunction(params)) {
-      resultParams = await params()
-    }
-
-    return api.tx[pallet][method](...resultParams)
+    return getExtrinsicByApi(api, tx, params)
   }
 
   const doOnSuccess: TxCallback = result => {
diff --git a/src/config/connections/staging.ts b/src/config/connections/staging.ts
index 62f2afd27..c1a82c087 100644
--- a/src/config/connections/staging.ts
+++ b/src/config/connections/staging.ts
@@ -11,7 +11,7 @@ const stagingConfig: SubsocialConfig = {
   dagHttpMethod: 'get',
   useOffchainForIpfs: false,
 
-  subIdApiUrl: 'https://sub.id/api/v1',
+  subIdApiUrl: 'https://rococo-subid.subsocial.network/api/v1',
   subsocialParaId: 2100,
 
   offchainSignerUrl: 'https://staging-signer.subsocial.network',
diff --git a/yarn.lock b/yarn.lock
index cb23d96a8..e2b9dd974 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1913,11 +1913,11 @@
     "@polkadot/util" "^10.3.1"
 
 "@polkadot/types-support@latest":
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/types-support/-/types-support-10.2.2.tgz#01cde329010690841ba5f163dc753a7c67d2a2cc"
-  integrity sha512-T0CxVmA/IWJ35CaFMMGJyvgDyDt6kF3a7r0IVGJD/ChkTiPvNKlZTrg2LHBH/m04I87yq26ILAq03sSiRbftWA==
+  version "10.1.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/types-support/-/types-support-10.1.4.tgz#ede3423751fa733f413272b326b2d62ec26c0bc3"
+  integrity sha512-03YoJ6TY9WCtQ1Ki3OsdR1O18ckDz+fux1uqXfC+yDv6A4h3bnNpohSBmRxlDVSkcINZMFQ3s4oSBy4zL9L1Ag==
   dependencies:
-    "@polkadot/util" "^11.1.3"
+    "@polkadot/util" "^11.1.1"
     tslib "^2.5.0"
 
 "@polkadot/types@9.13.5":
@@ -2060,15 +2060,15 @@
     "@types/bn.js" "^5.1.1"
     bn.js "^5.2.1"
 
-"@polkadot/util@^11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-11.1.3.tgz#dcdc4504f7c31e6104e7970903d8c1998f3858ef"
-  integrity sha512-Gsqzv1/fSoypS5tnJkM+NJQeT7O4iYlSniubUJnaZVOKsIbueTS1bMQ1y3/h8ISxbKBtICW5cZ6zCej6Q/jC3w==
+"@polkadot/util@^11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-11.1.1.tgz#88db2df312e57bd6a0291d8e1e271a44e113fdd5"
+  integrity sha512-8vlSfJhMAck2OVdk8aep3sZP17txR+p8X3bFNP0qNJ7frfF741v/eViEC7bbVIgdT0/vYNmgS6+0Dwe06dnKuA==
   dependencies:
-    "@polkadot/x-bigint" "11.1.3"
-    "@polkadot/x-global" "11.1.3"
-    "@polkadot/x-textdecoder" "11.1.3"
-    "@polkadot/x-textencoder" "11.1.3"
+    "@polkadot/x-bigint" "11.1.1"
+    "@polkadot/x-global" "11.1.1"
+    "@polkadot/x-textdecoder" "11.1.1"
+    "@polkadot/x-textencoder" "11.1.1"
     "@types/bn.js" "^5.1.1"
     bn.js "^5.2.1"
     tslib "^2.5.0"
@@ -2148,12 +2148,12 @@
     "@babel/runtime" "^7.20.13"
     "@polkadot/x-global" "10.4.2"
 
-"@polkadot/x-bigint@11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-11.1.3.tgz#37b09a12a9ed6df704e047e261f1b8b2ac978497"
-  integrity sha512-fRUUHfW9VFsXT7sLUUY7gSu8v+PvzNLRwvjnp+Ly8vFx9LTLuVGFCi+mpysuRTaPpqZZJlzBJ3fST7xTGh67Pg==
+"@polkadot/x-bigint@11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-11.1.1.tgz#f23fb17b6d1267cb7f4fbad11a04b67ec26a14c6"
+  integrity sha512-iLaaPSCnVuZ7LoOWZTHgs+Ebws0MdoNHmXoTriU60YLoojDJbcOInlO+1h3fNy6oPnYN3qA3Ml1mKDnP837nxg==
   dependencies:
-    "@polkadot/x-global" "11.1.3"
+    "@polkadot/x-global" "11.1.1"
     tslib "^2.5.0"
 
 "@polkadot/x-fetch@^10.3.1":
@@ -2187,10 +2187,10 @@
   dependencies:
     "@babel/runtime" "^7.20.13"
 
-"@polkadot/x-global@11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-11.1.3.tgz#4086694f52373fea63910b62da999bf0981d7d86"
-  integrity sha512-R3aqtIjgzFHJ3TyX6wavhp+59oLbZiqczIHkaas/nJe21+SVARqFmIII6BwS7ty7+8Uu4fHliA9re+ZSUp+rwg==
+"@polkadot/x-global@11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-11.1.1.tgz#6862c6c679e94b0fc39dff3b6954bb508ff3d7a4"
+  integrity sha512-++LFUT98bi2m15w8LrgOcpE5mi9bmH65YB02xbKzU0ZHe1g5l0LwFt+QFB9tZlNqfWTgwpsFshGtvdPQqrFnKw==
   dependencies:
     tslib "^2.5.0"
 
@@ -2234,12 +2234,12 @@
     "@babel/runtime" "^7.20.13"
     "@polkadot/x-global" "10.4.2"
 
-"@polkadot/x-textdecoder@11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-11.1.3.tgz#1d1e2aa86e47587393a6acb74a086ab97d62058d"
-  integrity sha512-NhOjuXVfYRMw9l0VhCtZOtcWefZth58p5KpVOrFyJZd12fTsoMO5/746K7QoAjWRrLQTJ/LHCEKCtWww0LwVPw==
+"@polkadot/x-textdecoder@11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-11.1.1.tgz#9596fe10981fa05f7629eaa198b11c8b191b1501"
+  integrity sha512-YoB82pr6kYkK5yg2BQgm5wVTf6Hq+01i+A6PgV1uXr7Rm3bxmQpGR2DKZq0QNjwWP0s6e91BxXvGoPjf7S9tBA==
   dependencies:
-    "@polkadot/x-global" "11.1.3"
+    "@polkadot/x-global" "11.1.1"
     tslib "^2.5.0"
 
 "@polkadot/x-textencoder@10.1.7":
@@ -2266,12 +2266,12 @@
     "@babel/runtime" "^7.20.13"
     "@polkadot/x-global" "10.4.2"
 
-"@polkadot/x-textencoder@11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-11.1.3.tgz#ba7621b636dcfa6ca4ab6176a6a52eef15904a72"
-  integrity sha512-7DmqjlPN8aQexLUKwoHeadihpUnW8hjpXEru+aEDxjgq9XIxPvb++NeBK+Mra9RzzZRuiT/K5z16HlwKN//ewg==
+"@polkadot/x-textencoder@11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-11.1.1.tgz#1c91e9aa568384595cbd7bd6ad50d71e4f92f2d0"
+  integrity sha512-I4IygnZeSyGUPyTmu7W2IsCHakax7QTVR9kMkCywaKEjiLzZU5B/LuDB0Gxn/3Jw2X2YfoB1TQ4mZ1bte4LX0g==
   dependencies:
-    "@polkadot/x-global" "11.1.3"
+    "@polkadot/x-global" "11.1.1"
     tslib "^2.5.0"
 
 "@polkadot/x-ws@^10.3.1":
@@ -13667,16 +13667,16 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.2, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.1, tslib@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
-  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
-
 tslib@^2.0.0, tslib@^2.0.3:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.1.0, tslib@^2.3.0, tslib@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"

From 8d153318b63021d156cad7b6bd3af6ab396ea4b3 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 22 Mar 2023 11:46:21 +0200
Subject: [PATCH 02/54] Change connection kind

---
 src/config/connections/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/config/connections/index.ts b/src/config/connections/index.ts
index 3e4fe5d6b..7aea02dcc 100644
--- a/src/config/connections/index.ts
+++ b/src/config/connections/index.ts
@@ -1,4 +1,4 @@
-import { connectionKind, connectionsOverrides } from '../env'
+import { /* connectionKind, */ connectionsOverrides } from '../env'
 import { SubsocialConfig } from '../types'
 import dev from './dev'
 import local from './local'
@@ -12,7 +12,8 @@ const connectionPresets = {
   dev,
 }
 
-const currentConfig: SubsocialConfig = connectionPresets[connectionKind]
+// const currentConfig: SubsocialConfig = connectionPresets[connectionKind]
+const currentConfig: SubsocialConfig = connectionPresets['staging']
 
 Object.entries(connectionsOverrides).forEach(([key, value]) => {
   if (value) {

From e1b3b4d9393eee6357e99bf440c6c36cfffefb76 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 22 Mar 2023 12:05:24 +0200
Subject: [PATCH 03/54] Change main config

---
 src/config/connections/index.ts |  5 ++---
 src/config/connections/main.ts  | 27 +++++++++------------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/config/connections/index.ts b/src/config/connections/index.ts
index 7aea02dcc..3e4fe5d6b 100644
--- a/src/config/connections/index.ts
+++ b/src/config/connections/index.ts
@@ -1,4 +1,4 @@
-import { /* connectionKind, */ connectionsOverrides } from '../env'
+import { connectionKind, connectionsOverrides } from '../env'
 import { SubsocialConfig } from '../types'
 import dev from './dev'
 import local from './local'
@@ -12,8 +12,7 @@ const connectionPresets = {
   dev,
 }
 
-// const currentConfig: SubsocialConfig = connectionPresets[connectionKind]
-const currentConfig: SubsocialConfig = connectionPresets['staging']
+const currentConfig: SubsocialConfig = connectionPresets[connectionKind]
 
 Object.entries(connectionsOverrides).forEach(([key, value]) => {
   if (value) {
diff --git a/src/config/connections/main.ts b/src/config/connections/main.ts
index d433e18e2..93bf432f3 100644
--- a/src/config/connections/main.ts
+++ b/src/config/connections/main.ts
@@ -1,30 +1,21 @@
-import { gaId } from '../env'
+// import { gaId } from '../env'
 import { SubsocialConfig } from '../types'
 
 const mainConfig: SubsocialConfig = {
-  sudoOne: '3osmnRNnrcScHsgkTJH1xyBF5kGjpbWHsGrqM31BJpy4vwn8',
+  sudoOne: '3si9SFRhEPKvpk2xW9dUkcud1AanQxJwok2QFqppqE5ZeShp',
 
-  substrateUrl: 'wss://para.subsocial.network',
-  kusamaUrl: 'wss://kusama-rpc.polkadot.io',
+  substrateUrl: 'wss://rco-para.subsocial.network',
+  offchainUrl: 'https://staging-api.subsocial.network',
+  graphqlUrl: 'https://squid.subsquid.io/soonsocial/graphql',
 
-  offchainUrl: 'https://api.subsocial.network',
-  graphqlUrl: 'https://squid.subsquid.io/subsocial/graphql',
-
-  ipfsNodeUrl: 'https://ipfs.subsocial.network',
-
-  dagHttpMethod: 'post',
+  ipfsNodeUrl: 'https://staging-ipfs.subsocial.network',
+  dagHttpMethod: 'get',
   useOffchainForIpfs: false,
 
-  subIdApiUrl: 'https://sub.id/api/v1',
+  subIdApiUrl: 'https://rococo-subid.subsocial.network/api/v1',
   subsocialParaId: 2100,
 
-  nodes: {
-    kusama: 'wss://kusama-rpc.polkadot.io',
-  },
-
-  ga: {
-    id: gaId,
-  },
+  offchainSignerUrl: 'https://staging-signer.subsocial.network',
 }
 
 export default mainConfig

From d39fbd9e799ba49294ea5c67e5073b2f19f9f5c4 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 22 Mar 2023 12:42:04 +0200
Subject: [PATCH 04/54] Change connection kind in deployment script

---
 src/config/connections/main.ts | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/config/connections/main.ts b/src/config/connections/main.ts
index 93bf432f3..d433e18e2 100644
--- a/src/config/connections/main.ts
+++ b/src/config/connections/main.ts
@@ -1,21 +1,30 @@
-// import { gaId } from '../env'
+import { gaId } from '../env'
 import { SubsocialConfig } from '../types'
 
 const mainConfig: SubsocialConfig = {
-  sudoOne: '3si9SFRhEPKvpk2xW9dUkcud1AanQxJwok2QFqppqE5ZeShp',
+  sudoOne: '3osmnRNnrcScHsgkTJH1xyBF5kGjpbWHsGrqM31BJpy4vwn8',
 
-  substrateUrl: 'wss://rco-para.subsocial.network',
-  offchainUrl: 'https://staging-api.subsocial.network',
-  graphqlUrl: 'https://squid.subsquid.io/soonsocial/graphql',
+  substrateUrl: 'wss://para.subsocial.network',
+  kusamaUrl: 'wss://kusama-rpc.polkadot.io',
 
-  ipfsNodeUrl: 'https://staging-ipfs.subsocial.network',
-  dagHttpMethod: 'get',
+  offchainUrl: 'https://api.subsocial.network',
+  graphqlUrl: 'https://squid.subsquid.io/subsocial/graphql',
+
+  ipfsNodeUrl: 'https://ipfs.subsocial.network',
+
+  dagHttpMethod: 'post',
   useOffchainForIpfs: false,
 
-  subIdApiUrl: 'https://rococo-subid.subsocial.network/api/v1',
+  subIdApiUrl: 'https://sub.id/api/v1',
   subsocialParaId: 2100,
 
-  offchainSignerUrl: 'https://staging-signer.subsocial.network',
+  nodes: {
+    kusama: 'wss://kusama-rpc.polkadot.io',
+  },
+
+  ga: {
+    id: gaId,
+  },
 }
 
 export default mainConfig

From 79a7b7ea38e08d2743402118f7a42b86219ecaee Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 22 Mar 2023 12:56:52 +0200
Subject: [PATCH 05/54] add staging connection kind in all files

---
 .github/workflows/build-deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
index 28a53cb95..d37eeacc8 100644
--- a/.github/workflows/build-deploy.yml
+++ b/.github/workflows/build-deploy.yml
@@ -68,7 +68,7 @@ jobs:
           build-args: |
             GH_GA_ID=UA-204866512-2
             GH_APP_KIND=polkaverse
-            GH_CONNECTION_KIND=main
+            GH_CONNECTION_KIND=staging
 
           tags: |
             ${{ env.image }}

From 8ffd67fe23a1f2c3eb9593b0b1efdef489c35a49 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 12 Apr 2023 15:35:03 +0300
Subject: [PATCH 06/54] Add pending orders redusers

---
 .env.local                                    |  39 +++++
 next.config.js                                |  14 +-
 package.json                                  |   5 +-
 .../domains/dot-seller/BuyByDotButton.tsx     |   5 +-
 src/components/domains/dot-seller/config.ts   |   9 +-
 .../domains/dot-seller/remark/config.ts       |  46 ------
 .../domains/dot-seller/remark/core.ts         | 135 -----------------
 .../domains/dot-seller/remark/decorators.ts   |  46 ------
 .../domains/dot-seller/remark/index.ts        |   1 -
 .../domains/dot-seller/remark/types.ts        | 140 ------------------
 .../domains/dot-seller/remark/utils.ts        |   6 -
 .../domains/dot-seller/seller-queries.ts      |  27 ++++
 src/config/env.ts                             |  80 ++++------
 src/rtk/app/rootReducer.ts                    |   2 +
 .../pendingOrdersByIdSlice.ts                 | 118 +++++++++++++++
 yarn.lock                                     |  47 +++++-
 16 files changed, 277 insertions(+), 443 deletions(-)
 create mode 100644 .env.local
 delete mode 100644 src/components/domains/dot-seller/remark/config.ts
 delete mode 100644 src/components/domains/dot-seller/remark/core.ts
 delete mode 100644 src/components/domains/dot-seller/remark/decorators.ts
 delete mode 100644 src/components/domains/dot-seller/remark/index.ts
 delete mode 100644 src/components/domains/dot-seller/remark/types.ts
 delete mode 100644 src/components/domains/dot-seller/remark/utils.ts
 create mode 100644 src/components/domains/dot-seller/seller-queries.ts
 create mode 100644 src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts

diff --git a/.env.local b/.env.local
new file mode 100644
index 000000000..51e65a701
--- /dev/null
+++ b/.env.local
@@ -0,0 +1,39 @@
+# Logger level
+NEXT_PUBLIC_LOG_LEVEL=debug
+
+# App kind: 'polkaverse' | 'staging'
+NEXT_PUBLIC_APP_KIND=polkaverse
+
+# Connection kind:
+# 'local'   - For development in localhost infrastructure (local Substrate, IPFS, etc.)
+# 'dev'     - For development in betanet/mainnet infrastructure.
+# 'staging' - For development in staging infrastructure.
+# 'main'    - If running this web app on a production server.
+NEXT_PUBLIC_CONNECTION_KIND=staging
+
+# Id for Google Analytics
+# NEXT_PUBLIC_GA_ID=
+
+# NEXT_PUBLIC_ENABLE_MAINTENANCE_PAGE=true
+# NEXT_PUBLIC_MAINTENANCE_TEXT=''
+
+# NEXT_PUBLIC_SUBSTRATE_URL=
+# NEXT_PUBLIC_SUBSTRATE_RPC_URL=
+# NEXT_PUBLIC_OFFCHAIN_URL=
+# NEXT_PUBLIC_OFFCHAIN_WS=
+# NEXT_PUBLIC_GRAPHQL_URL=
+# NEXT_PUBLIC_IPFS_NODE_URL=
+
+# UI settings overwrite
+# NEXT_PUBLIC_ENABLE_SEARCH=true
+# NEXT_PUBLIC_ENABLE_FEED=true
+# NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true
+# NEXT_PUBLIC_ENABLE_ACTIVITY=true
+# NEXT_PUBLIC_ENABLE_SESSION_KEY=true
+# NEXT_PUBLIC_ENABLE_EMAIL_SETTINGS=true
+# NEXT_PUBLIC_ENABLE_FAUCET=true
+# NEXT_PUBLIC_ENABLE_DOWNVOTES=true
+# NEXT_PUBLIC_ENABLE_GRAPHQL=true
+# NEXT_PUBLIC_ENABLE_CONTRIBUTION_PAGE=true
+# NEXT_PUBLIC_ENABLE_ONCHAIN_ACTIVITIES=true
+# NEXT_PUBLIC_ENABLE_SQUID_DATA_SOURCE=true
diff --git a/next.config.js b/next.config.js
index 11e096106..36e7bd556 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,8 +2,8 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
-const path = require('path')
-const Dotenv = require('dotenv-webpack')
+// const path = require('path')
+// const Dotenv = require('dotenv-webpack')
 
 // Required by Docker
 require('dotenv').config()
@@ -31,11 +31,11 @@ const nextConfig = {
     config.plugins = [
       ...config.plugins,
 
-      // Read the .env file
-      new Dotenv({
-        path: path.join(__dirname, '.env'),
-        systemvars: true, // Required by Docker
-      }),
+      // // Read the .env file
+      // new Dotenv({
+      //   path: path.join(__dirname, '.env'),
+      //   systemvars: true, // Required by Docker
+      // }),
     ]
 
     config.module.rules.push(
diff --git a/package.json b/package.json
index b87cfb89e..e17fdbd42 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "cy:test:video": "npm-run-all --parallel start cy:run:video",
     "cy:run": "export CYPRESS_VIDEO=false && cypress run",
     "cy:run:video": "cypress run",
-    "dev": "yarn patch && NODE_OPTIONS=--max_old_space_size=4096 next -p 3003",
+    "dev": "NODE_OPTIONS=--max_old_space_size=4096 next -p 3003",
     "analyze": "yarn patch && ANALYZE=true next build",
     "build": "yarn patch && next build",
     "export": "next export",
@@ -92,7 +92,7 @@
     "@subsocial/api": "0.7.13",
     "@subsocial/definitions": "0.7.13",
     "@subsocial/elasticsearch": "0.7.13",
-    "@subsocial/utils": "0.7.13",
+    "@subsocial/utils": "0.8.7",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
     "@tiptap/extension-image": "^2.0.0-beta.27",
     "@tiptap/extension-link": "^2.0.0-beta.37",
@@ -116,6 +116,7 @@
     "dotenv-webpack": "^1.0.2",
     "easymde": "^2.15.0",
     "graphql": "^15.5.0",
+    "graphql-request": "^5.2.0",
     "graphql-tag": "^2.11.0",
     "isbot": "^3.0.14",
     "jdenticon": "^3.2.0",
diff --git a/src/components/domains/dot-seller/BuyByDotButton.tsx b/src/components/domains/dot-seller/BuyByDotButton.tsx
index 7393f8999..0be250565 100644
--- a/src/components/domains/dot-seller/BuyByDotButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotButton.tsx
@@ -1,7 +1,6 @@
 import { useMyAddress } from '../../auth/MyAccountsContext'
 import { useLazyConnectionsContext } from '../../lazy-connection/LazyConnectionContext'
 import { randomAsNumber } from '@polkadot/util-crypto'
-import { SocialRemark } from './remark/core'
 import { DomainEntity } from '../../../rtk/features/domains/domainsSlice'
 import { useState } from 'react'
 import { Button, Modal } from 'antd'
@@ -11,7 +10,7 @@ import styles from './Index.module.sass'
 import { MutedDiv } from '../../utils/MutedText'
 import clsx from 'clsx'
 import { validDomainPrice, testRemarkTitle, treasuryAccount, domainsNetwork } from './config'
-import { SubSclSource } from './remark/types'
+import { SubSclSource, SocialRemark } from '@subsocial/utils'
 import { useGetDecimalAndSymbol } from './utils'
 import { FormatBalance } from '../../common/balances/Balance'
 import LazyTxButton from 'src/components/donate/LazyTxButton'
@@ -44,6 +43,8 @@ const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) =
       validDomainPrice,
     )
 
+    SocialRemark.setConfig({ protNames: [ testRemarkTitle ] })
+
     const regRmrkMsg: SubSclSource<'DMN_REG'> = {
       protName: testRemarkTitle,
       action: 'DMN_REG',
diff --git a/src/components/domains/dot-seller/config.ts b/src/components/domains/dot-seller/config.ts
index a9cfb8310..cbf6d040f 100644
--- a/src/components/domains/dot-seller/config.ts
+++ b/src/components/domains/dot-seller/config.ts
@@ -1,5 +1,6 @@
 import BN from 'bn.js'
-import { SocialRemarkMessageProtocolName } from './remark/types'
+import { SocialRemarkMessageProtocolName } from '@subsocial/utils'
+import { GraphQLClient } from 'graphql-request'
 
 export const validDomainPrice = new BN('100000000') // 0.01
 
@@ -7,4 +8,8 @@ export const testRemarkTitle: SocialRemarkMessageProtocolName = 'social_t_0'
 
 export const domainsNetwork = 'rococo'
 
-export const treasuryAccount = '3qjCbqfT6CyiYVVrwvr3VeYTCX1X5VY2v3WJ2K9YW5znP27B'
\ No newline at end of file
+export const treasuryAccount = '3qjCbqfT6CyiYVVrwvr3VeYTCX1X5VY2v3WJ2K9YW5znP27B'
+
+export const xSellerSquid = 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql'
+
+export const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid)
\ No newline at end of file
diff --git a/src/components/domains/dot-seller/remark/config.ts b/src/components/domains/dot-seller/remark/config.ts
deleted file mode 100644
index ccd057403..000000000
--- a/src/components/domains/dot-seller/remark/config.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  SocialRemarkMessageAction,
-  SocialRemarkMessageProtocolName,
-  SocialRemarkMessageVersion
-} from './types';
-
-export type SocialRemarkConfigData = {
-  protNames?: SocialRemarkMessageProtocolName[];
-  actions?: SocialRemarkMessageAction[];
-  versions?: SocialRemarkMessageVersion[];
-};
-
-export class SocialRemarkConfig {
-  private static instance: SocialRemarkConfig;
-
-  private conf: Required<SocialRemarkConfigData> = {
-    protNames: ['social_t_0', 'social_t_1', 'social_t_2', 'social'],
-    actions: [
-      'DMN_REG',
-      'DMN_REG_OK',
-      'DMN_REG_REFUND',
-      'NRG_GEN',
-      'NRG_GEN_OK',
-      'NRG_GEN_REFUND'
-    ],
-    versions: ['0.1']
-  };
-
-  static getInstance(): SocialRemarkConfig {
-    if (!SocialRemarkConfig.instance) {
-      SocialRemarkConfig.instance = new SocialRemarkConfig();
-    }
-    return SocialRemarkConfig.instance;
-  }
-
-  public get config() {
-    return this.conf;
-  }
-
-  public setConfig(data: SocialRemarkConfigData) {
-    this.conf = {
-      ...this.conf,
-      ...data
-    };
-  }
-}
diff --git a/src/components/domains/dot-seller/remark/core.ts b/src/components/domains/dot-seller/remark/core.ts
deleted file mode 100644
index 66690850a..000000000
--- a/src/components/domains/dot-seller/remark/core.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import {
-  REMARK_CONTENT_VERSION_ACTION_MAP,
-  RemarkContentProps,
-  SocialRemarkMessage,
-  SocialRemarkMessageAction,
-  SocialRemarkMessageProtocolName,
-  SocialRemarkMessageVersion,
-  SubSclSource,
-} from './types'
-import { SocialRemarkConfig, SocialRemarkConfigData } from './config'
-import { decorateRemarkContentValue } from './decorators'
-
-export class SocialRemark {
-
-  static setConfig(data: SocialRemarkConfigData) {
-    SocialRemarkConfig.getInstance().setConfig(data)
-  }
-
-  private msgParsed: SocialRemarkMessage<SocialRemarkMessageAction, boolean> | null = null
-
-  private protNames: Set<SocialRemarkMessageProtocolName> = new Set(
-    SocialRemarkConfig.getInstance().config.protNames,
-  )
-
-  private versions: Set<SocialRemarkMessageVersion> = new Set(
-    SocialRemarkConfig.getInstance().config.versions,
-  )
-
-  private actions: Set<SocialRemarkMessageAction> = new Set(
-    SocialRemarkConfig.getInstance().config.actions,
-  )
-
-  private msgDelimiter = '::'
-
-  public get message(): SocialRemarkMessage<SocialRemarkMessageAction, boolean> | never {
-    if (!this.msgParsed) throw new Error('Message is not available.')
-    return this.msgParsed!
-  }
-
-  public get content() {
-    return this.msgParsed && this.msgParsed.valid ? this.msgParsed.content : null
-  }
-
-  public get version() {
-    return this.msgParsed ? this.msgParsed.version : null
-  }
-
-  public get isValidMessage(): boolean {
-    return !!this.msgParsed && this.msgParsed.valid
-  }
-
-  static bytesToString(src: unknown): string {
-    if (!src || !Buffer.isBuffer(src)) return ''
-    return Buffer.from(src).toString('utf-8')
-  }
-
-  public fromMessage(_maybeRemarkMsg: unknown): SocialRemark {
-    return this
-  }
-
-  public fromSource(rmrkSrc: SubSclSource<SocialRemarkMessageAction>): SocialRemark {
-    let isSrcValid = true
-
-    if (
-      !rmrkSrc ||
-      !this.isValidProtName(rmrkSrc.protName) ||
-      !this.isValidVersion(rmrkSrc.version) ||
-      !this.isValidAction(rmrkSrc.action)
-    )
-      isSrcValid = false
-
-    // TODO add content validation
-
-    if (!isSrcValid) throw new Error('Remark source is invalid')
-
-    try {
-      this.msgParsed = {
-        ...rmrkSrc,
-        valid: true,
-      }
-      const contentPropsMap = REMARK_CONTENT_VERSION_ACTION_MAP[rmrkSrc.version as any][rmrkSrc.action]
-      for (const contentPropName in contentPropsMap) {
-        (this.msgParsed.content as any)[contentPropName] = decorateRemarkContentValue(
-          this.msgParsed.action,
-          contentPropName as RemarkContentProps,
-          (rmrkSrc.content as any)[contentPropName],
-        )
-      }
-    } catch (e) {
-      console.log(e)
-      throw new Error('Error has been occurred during remark message creation.')
-    }
-    return this
-  }
-
-  public toMessage(): string {
-    if (!this.isValidMessage) throw new Error('Remark is not valid for build message.')
-
-    const msg: string[] = []
-    msg.push(this.message.protName)
-    msg.push(this.message.version)
-    msg.push(this.message.action)
-
-    try {
-      const contentPropsMap =
-        REMARK_CONTENT_VERSION_ACTION_MAP[this.message.version][this.message.action]
-      for (const contentPropName in contentPropsMap) {
-        msg[contentPropsMap[contentPropName]] = decorateRemarkContentValue(
-          this.message.action,
-          contentPropName as RemarkContentProps,
-          (this.message.content as any)[contentPropName],
-        )
-      }
-    } catch (e) {
-      console.log(e)
-      throw new Error('Error has been occurred during remark message creation.')
-    }
-
-    //TODO add validations
-    return msg.join(this.msgDelimiter)
-  }
-
-  private isValidProtName(src: string): boolean {
-    // TODO remove type casting
-    return !!(src && this.protNames.has(src as SocialRemarkMessageProtocolName))
-  }
-  private isValidVersion(src: string): boolean {
-    // TODO remove type casting
-    return !!(src && this.versions.has(src as SocialRemarkMessageVersion))
-  }
-  private isValidAction(src: string): boolean {
-    // TODO remove type casting
-    return !!(src && this.actions.has(src as SocialRemarkMessageAction))
-  }
-}
diff --git a/src/components/domains/dot-seller/remark/decorators.ts b/src/components/domains/dot-seller/remark/decorators.ts
deleted file mode 100644
index f60b75664..000000000
--- a/src/components/domains/dot-seller/remark/decorators.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { RemarkContentProps, SocialRemarkMessageAction } from './types'
-import { addressFromAnyToFormatted } from './utils'
-
-export function decorateRemarkContentValue(
-  action: SocialRemarkMessageAction,
-  propName: RemarkContentProps,
-  value: string,
-) {
-  switch (action) {
-    case 'DMN_REG': {
-      switch (propName) {
-        case 'target': {
-          return addressFromAnyToFormatted(value, 28)
-          break
-        }
-        default:
-          return value
-      }
-      break
-    }
-    case 'DMN_REG_OK': {
-      switch (propName) {
-        case 'target': {
-          return addressFromAnyToFormatted(value, 28)
-          break
-        }
-        default:
-          return value
-      }
-      break
-    }
-    case 'DMN_REG_REFUND': {
-      switch (propName) {
-        case 'target': {
-          return addressFromAnyToFormatted(value, 28)
-          break
-        }
-        default:
-          return value
-      }
-      break
-    }
-    default:
-      return value
-  }
-}
diff --git a/src/components/domains/dot-seller/remark/index.ts b/src/components/domains/dot-seller/remark/index.ts
deleted file mode 100644
index d4b10bf8c..000000000
--- a/src/components/domains/dot-seller/remark/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SocialRemark } from './core'
diff --git a/src/components/domains/dot-seller/remark/types.ts b/src/components/domains/dot-seller/remark/types.ts
deleted file mode 100644
index b6d476056..000000000
--- a/src/components/domains/dot-seller/remark/types.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-export type DomainRegisterPayContent = {
-  domainName: string
-  target: string
-  token: string
-  opId: string
-}
-export type DomainRegisterCompletedContent = {
-  domainName: string
-  target: string
-  token: string
-  opId: string
-}
-
-export type DomainRegisterRefundContent = {
-  domainName: string
-  target: string
-  token: string
-  opId: string
-}
-
-export type EnergyGeneratePayContent = {
-  energyAmount: string
-  target: string
-  token: string
-  opId: string
-}
-export type EnergyGenerateCompletedContent = {
-  energyAmount: string
-  target: string
-  token: string
-  opId: string
-}
-
-export type EnergyGenerateRefundContent = {
-  energyAmount: string
-  target: string
-  token: string
-  opId: string
-}
-
-export type RemarkContentProps =
-  | keyof DomainRegisterPayContent
-  | keyof DomainRegisterCompletedContent
-  | keyof DomainRegisterRefundContent
-  | keyof EnergyGeneratePayContent
-  | keyof EnergyGenerateCompletedContent
-  | keyof EnergyGenerateRefundContent
-
-export type SocialRemarkMessageVersion = '0.1'
-export type SocialRemarkMessageAction =
-  | 'DMN_REG'
-  | 'DMN_REG_OK'
-  | 'DMN_REG_REFUND'
-  | 'NRG_GEN'
-  | 'NRG_GEN_OK'
-  | 'NRG_GEN_REFUND'
-
-export type SocialRemarkMessageProtocolName = 'social_t_0' | 'social_t_1' | 'social_t_2' | 'social'
-
-export type SocialRemarkMessageContent<A extends SocialRemarkMessageAction | string> =
-  A extends 'DMN_REG'
-    ? DomainRegisterPayContent
-    : A extends 'DMN_REG_OK'
-    ? DomainRegisterCompletedContent
-    : A extends 'DMN_REG_REFUND'
-    ? DomainRegisterRefundContent
-    : A extends 'NRG_GEN'
-    ? EnergyGeneratePayContent
-    : A extends 'NRG_GEN_OK'
-    ? EnergyGenerateCompletedContent
-    : A extends 'NRG_GEN_REFUND'
-    ? EnergyGenerateRefundContent
-    : never
-
-export type SocialRemarkMessage<
-  A extends SocialRemarkMessageAction | string = '',
-  V extends true | false = false,
-> = {
-  protName: SocialRemarkMessageProtocolName
-  version: SocialRemarkMessageVersion
-  action: A
-  valid: V // TODO make this prop optional
-  content: V extends true ? SocialRemarkMessageContent<A> : null
-}
-
-export type SubSclSource<A extends SocialRemarkMessageAction | string = ''> = Omit<
-  SocialRemarkMessage<A, true>,
-  'valid'
->
-
-// type VersionActionPropsMap = Record<
-//   SocialRemarkMessageVersion,
-//   | Record<'DMN_REG', Record<keyof DomainRegisterPayContent, number>>
-//   | Record<'DMN_REG_OK', Record<keyof DomainRegisterCompletedContent, number>>
-//   | Record<'DMN_REG_REFUND', Record<keyof DomainRegisterRefundContent, number>>
-//   | Record<'NRG_GEN', Record<keyof EnergyGeneratePayContent, number>>
-//   | Record<'NRG_GEN_OK', Record<keyof EnergyGenerateCompletedContent, number>>
-//   | Record<'NRG_GEN_REFUND', Record<keyof EnergyGenerateRefundContent, number>>
-// >
-
-export const REMARK_CONTENT_VERSION_ACTION_MAP: any = {
-  '0.1': {
-    DMN_REG: {
-      opId: 3,
-      target: 4,
-      domainName: 5,
-      token: 6,
-    },
-    DMN_REG_OK: {
-      opId: 3,
-      target: 4,
-      domainName: 5,
-      token: 6,
-    },
-    DMN_REG_REFUND: {
-      opId: 3,
-      target: 4,
-      domainName: 5,
-      token: 6,
-    },
-    NRG_GEN: {
-      opId: 3,
-      target: 4,
-      energyAmount: 5,
-      token: 6,
-    },
-    NRG_GEN_OK: {
-      opId: 3,
-      target: 4,
-      energyAmount: 5,
-      token: 6,
-    },
-    NRG_GEN_REFUND: {
-      opId: 3,
-      target: 4,
-      energyAmount: 5,
-      token: 6,
-    },
-  },
-}
diff --git a/src/components/domains/dot-seller/remark/utils.ts b/src/components/domains/dot-seller/remark/utils.ts
deleted file mode 100644
index 226205624..000000000
--- a/src/components/domains/dot-seller/remark/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
-
-export function addressFromAnyToFormatted(addressAny: string, prefix: number) {
-  const publicKey = decodeAddress(addressAny)
-  return encodeAddress(publicKey, prefix)
-}
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
new file mode 100644
index 000000000..804a7d8aa
--- /dev/null
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -0,0 +1,27 @@
+import gql from 'graphql-tag'
+
+export const PENDING_ORDERS_BY_IDS = gql`
+  query GetPendingOrdersByIds($ids: [String!]!) {
+    getPendingOrdersByIds(ids: $ids) {
+      orders {
+        id
+        account
+        clientId
+        timestamp
+      }
+    }
+  }
+`
+
+export const PENDING_ORDERS_BY_ACCOUNT = gql`
+  query GetPendingOrdersByAccount($account: String!) {
+    getPendingOrdersByAccount(account: $account) {
+      orders {
+        id
+        account
+        clientId
+        timestamp
+      }
+    }
+  }
+`
diff --git a/src/config/env.ts b/src/config/env.ts
index e59798f69..d2f2dc00c 100644
--- a/src/config/env.ts
+++ b/src/config/env.ts
@@ -1,78 +1,48 @@
 import { newLogger } from '@subsocial/utils'
 import { AppConfig, AppKind, ConnectionKind, ConnectionsSettings, SubsocialFeatures } from './types'
-export const nodeEnv = getEnv('NODE_ENV')
+export const nodeEnv = process.env['NEXT_PUBLIC_NODE_ENV']
 
-newLogger.setDefaultLevel(getEnv('LOG_INFO') as any)
+newLogger.setDefaultLevel(process.env['NEXT_PUBLIC_LOG_INFO'] as any)
 
 export const isProdMode = nodeEnv === 'production'
 export const isDevMode = !isProdMode
 
-export const appKind = (getEnv('APP_KIND') || 'polkaverse') as unknown as AppKind
+export const appKind = (process.env['NEXT_PUBLIC_APP_KIND'] || 'polkaverse') as unknown as AppKind
 
-export const connectionKind = (getEnv('CONNECTION_KIND') || 'main') as unknown as ConnectionKind
+export const connectionKind = (process.env['NEXT_PUBLIC_CONNECTION_KIND'] || 'main') as unknown as ConnectionKind
 
-export const enableMaintenancePage = getEnvAsBool('ENABLE_MAINTENANCE_PAGE')
-export const maintenanceMsg = getEnv('MAINTENANCE_TEXT')
+export const enableMaintenancePage = process.env['NEXT_PUBLIC_ENABLE_MAINTENANCE_PAGE'] as boolean | undefined
+export const maintenanceMsg = process.env['NEXT_PUBLIC_MAINTENANCE_TEXT']
 
-export const gaId = getEnv('GA_ID') || ''
+export const gaId = process.env['NEXT_PUBLIC_GA_ID'] || ''
 
-export const hCaptchaSiteKey = getEnv('HCAPTCHA_SITE_KEY') || ''
+export const hCaptchaSiteKey = process.env['NEXT_PUBLIC_HCAPTCHA_SITE_KEY'] || ''
 
 export const appOverrides: Partial<AppConfig> = {
-  appBaseUrl: getEnv('APP_BASE_URL'),
+  appBaseUrl: process.env['NEXT_PUBLIC_APP_BASE_URL'],
 }
 
 /**
  * Enable or disable the available features of this web app by overriding them in the .env file.
  */
 export const featureOverrides: SubsocialFeatures = {
-  enableSearch: getEnvAsBool('ENABLE_SEARCH'),
-  enableFeed: getEnvAsBool('ENABLE_FEED'),
-  enableNotifications: getEnvAsBool('ENABLE_NOTIFICATIONS'),
-  enableActivity: getEnvAsBool('ENABLE_ACTIVITY'),
-  enableSessionKey: getEnvAsBool('ENABLE_SESSION_KEY'),
-  enableEmailSettings: getEnvAsBool('ENABLE_EMAIL_SETTINGS'),
-  enableFaucet: getEnvAsBool('ENABLE_FAUCET'),
-  enableGraphQl: getEnvAsBool('ENABLE_GRAPHQL'),
-  enableContributionPage: getEnvAsBool('ENABLE_CONTRIBUTION_PAGE'),
-  enableOnchainActivities: getEnvAsBool('ENABLE_ONCHAIN_ACTIVITIES'),
-  enableSquidDataSource: getEnvAsBool('ENABLE_SQUID_DATA_SOURCE'),
+  enableSearch: process.env['NEXT_PUBLIC_ENABLE_SEARCH'] as boolean | undefined,
+  enableFeed: process.env['NEXT_PUBLIC_ENABLE_FEED'] as boolean | undefined,
+  enableNotifications: process.env['NEXT_PUBLIC_ENABLE_NOTIFICATIONS'] as boolean | undefined,
+  enableActivity: process.env['NEXT_PUBLIC_ENABLE_ACTIVITY'] as boolean | undefined,
+  enableSessionKey: process.env['NEXT_PUBLIC_ENABLE_SESSION_KEY'] as boolean | undefined,
+  enableEmailSettings: process.env['NEXT_PUBLIC_ENABLE_EMAIL_SETTINGS'] as boolean | undefined,
+  enableFaucet: process.env['NEXT_PUBLIC_ENABLE_FAUCET'] as boolean | undefined,
+  enableGraphQl: process.env['NEXT_PUBLIC_ENABLE_GRAPHQL'] as boolean | undefined,
+  enableContributionPage: process.env['NEXT_PUBLIC_ENABLE_CONTRIBUTION_PAGE'] as boolean | undefined,
+  enableOnchainActivities: process.env['NEXT_PUBLIC_ENABLE_ONCHAIN_ACTIVITIES'] as boolean | undefined,
+  enableSquidDataSource: process.env['NEXT_PUBLIC_ENABLE_SQUID_DATA_SOURCE'] as boolean | undefined,
 }
 
 export const connectionsOverrides: Partial<ConnectionsSettings> = {
-  substrateUrl: getEnv('SUBSTRATE_URL'),
-  offchainUrl: getEnv('OFFCHAIN_URL'),
-  graphqlUrl: getEnv('GRAPHQL_URL'),
-  ipfsNodeUrl: getEnv('IPFS_NODE_URL'),
-  offchainSignerUrl: getEnv('OFFCHAIN_SIGNER_URL'),
+  substrateUrl: process.env['NEXT_PUBLIC_SUBSTRATE_URL'],
+  offchainUrl: process.env['NEXT_PUBLIC_OFFCHAIN_URL'],
+  graphqlUrl: process.env['NEXT_PUBLIC_GRAPHQL_URL'],
+  ipfsNodeUrl: process.env['NEXT_PUBLIC_IPFS_NODE_URL'],
+  offchainSignerUrl: process.env['NEXT_PUBLIC_OFFCHAIN_SIGNER_URL'],
 }
-
-function getEnv(varName: string): string | undefined {
-  const { env } = process
-  return env[varName]
-}
-
-function getEnvAsBool(varName: string): boolean | undefined {
-  const val = getEnv(varName)?.toString()?.toLowerCase()
-  if (val === 'true') return true
-  if (val === 'false') return false
-  return undefined
-}
-
-// function getEnvAsArray (varName: string): string[] {
-//   return getEnv(varName)?.split(',').map(id => id.trim()) || []
-// }
-
-// function getEnvAsNumber (varName: string) {
-//   const value = getEnv(varName)
-//   return value ? parseInt(value) : undefined
-// }
-
-// function getEnvAsDate (varName: string) {
-//   const dateStr = getEnv(varName)
-//   try {
-//     return dateStr ? dayjs(dateStr) : undefined
-//   } catch (err) {
-//     return undefined
-//   }
-// }
diff --git a/src/rtk/app/rootReducer.ts b/src/rtk/app/rootReducer.ts
index 4cab0370f..9c00b7731 100644
--- a/src/rtk/app/rootReducer.ts
+++ b/src/rtk/app/rootReducer.ts
@@ -19,6 +19,7 @@ import followedSpaceIds from '../features/spaceIds/followedSpaceIdsSlice'
 import ownSpaceIds from '../features/spaceIds/ownSpaceIdsSlice'
 import spaceIdsWithRolesByAccount from '../features/spaceIds/spaceIdsWithRolesByAccountSlice'
 import spaces from '../features/spaces/spacesSlice'
+import ordersById from '../features/domainPendingOrders/pendingOrdersByIdSlice'
 
 const rootReducer = combineReducers({
   contents,
@@ -41,6 +42,7 @@ const rootReducer = combineReducers({
   topLevelDomains,
   chainsInfo,
   onBoarding,
+  ordersById
 })
 
 export type RootState = ReturnType<typeof rootReducer>
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts
new file mode 100644
index 000000000..e1633dc34
--- /dev/null
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts
@@ -0,0 +1,118 @@
+import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { isDef } from '@subsocial/utils'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import { PENDING_ORDERS_BY_ACCOUNT, PENDING_ORDERS_BY_IDS } from 'src/components/domains/dot-seller/seller-queries'
+import { FetchManyArgs, FetchOneArgs, ThunkApiConfig } from 'src/rtk/app/helpers'
+import { RootState } from 'src/rtk/app/rootReducer'
+
+export type OrderMeta = {
+  id: string
+  account: string
+  clientId: string
+  timestamp: string
+}
+
+export type Domain = string
+
+type Entity = {
+  id: string
+  account: string
+  clientId: string
+  timestamp: string
+}
+
+const sliceName = 'domainsByOwner'
+
+type MaybeEntity = Entity | undefined
+
+const adapter = createEntityAdapter<Entity>()
+
+const selectors = adapter.getSelectors<RootState>(state => state.ordersById)
+
+type Args = {}
+
+const selectEntitiesByIds = (state: RootState, ids: string[]) => {
+  return ids.map(id => selectors.selectById(state, id)).filter(isDef)
+}
+
+export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
+  const keys = selectors.selectIds(state)
+
+  const entityIds = keys.filter(key => ids.find(x => key.toString().includes(x)))
+
+  return selectEntitiesByIds(state, entityIds as string[])
+}
+
+export const selectPendingOrdersByAccount = (state: RootState, address: string) => {
+  const keys = selectors.selectIds(state)
+
+  const entityIds = keys.filter(key => key.toString().includes(address))
+
+  return selectEntitiesByIds(state, entityIds as string[])
+}
+
+export const fetchPendingOrdersByIds = createAsyncThunk<
+  MaybeEntity[],
+  FetchManyArgs<Args>,
+  ThunkApiConfig
+>(`${sliceName}/fetchOne`, async ({ ids }): Promise<MaybeEntity[]> => {
+  const result: MaybeEntity[] = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_IDS, { ids })
+
+  return result
+
+  // const myAddress = id as AccountId
+  // const knownDomains = selectDomainsByOwner(getState(), myAddress)
+  // const isKnownOwner = typeof knownDomains !== 'undefined'
+  // if (!reload && isKnownOwner) {
+  //   return undefined
+  // }
+
+  // const domains: Domain[] = await api.blockchain.domainsByOwner(myAddress)
+
+  // return {
+  //   id: myAddress,
+  //   domains,
+  // }
+})
+
+export const fetchPendingOrdersByAccount = createAsyncThunk<
+  MaybeEntity[],
+  FetchOneArgs<Args>,
+  ThunkApiConfig
+>(`${sliceName}/fetchOne`, async ({ id: account }): Promise<MaybeEntity[]> => {
+  const result: MaybeEntity[] = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_ACCOUNT, { account })
+
+  return result
+
+  // const myAddress = id as AccountId
+  // const knownDomains = selectDomainsByOwner(getState(), myAddress)
+  // const isKnownOwner = typeof knownDomains !== 'undefined'
+  // if (!reload && isKnownOwner) {
+  //   return undefined
+  // }
+
+  // const domains: Domain[] = await api.blockchain.domainsByOwner(myAddress)
+
+  // return {
+  //   id: myAddress,
+  //   domains,
+  // }
+})
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: adapter.getInitialState(),
+  reducers: {
+    // upsertOwnDomains: adapter.upsertOne,
+  },
+  extraReducers: builder => {
+    builder.addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) => {
+      if (payload) adapter.upsertMany(state, payload.filter(isDef))
+    })
+    builder.addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
+      if (payload) adapter.upsertMany(state, payload.filter(isDef))
+    })
+  },
+})
+
+export default slice.reducer
diff --git a/yarn.lock b/yarn.lock
index e2b9dd974..dcb3bcfdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2429,7 +2429,29 @@
     "@elastic/elasticsearch" "7.4.0"
     "@subsocial/utils" latest
 
-"@subsocial/utils@0.7.13", "@subsocial/utils@latest":
+"@subsocial/utils@0.8.7":
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.8.7.tgz#0a1aed2e29bf603138a167d0c222c2d25d45bfa8"
+  integrity sha512-kX/BRXvrF8ChLbosCM4QtdlLCxLdaLvJtDS/XGBdJTiXQgbi+Svk+qMITHLmMX2f6vbSQM5w/vcYLvGpRXR7LA==
+  dependencies:
+    "@polkadot/util-crypto" latest
+    "@sindresorhus/slugify" "^1.1.0"
+    autolinker "^4.0.0"
+    bignumber.js "^9.0.1"
+    bn.js "^5.1.1"
+    chalk "^3.0.0"
+    dayjs "^1.10.7"
+    lodash.isempty "^4.4.0"
+    lodash.memoize "^4.1.2"
+    lodash.truncate "^4.4.2"
+    loglevel "^1.7.0"
+    loglevel-plugin-prefix "^0.8.4"
+    remark "^13.0.0"
+    remark-gfm "^1.0.0"
+    remark-html "^13.0.1"
+    strip-markdown "^4.0.0"
+
+"@subsocial/utils@latest":
   version "0.7.13"
   resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.7.13.tgz#546abef2c4fa5e1f3d8e3de3ee69fb107f977309"
   integrity sha512-HNHV+ZG/1yHgi4JcOLAWW0p4oaa6JCrv5///DzUuJbhpLjR7k6gKnF+ReXqEp9hFJggH4WCWPtNUCODD1FxlSA==
@@ -5232,6 +5254,13 @@ create-react-class@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+cross-fetch@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
@@ -6690,6 +6719,11 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extract-files@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
+  integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
+
 extract-stack@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/extract-stack/-/extract-stack-2.0.0.tgz#11367bc865bfcd9bc0db3123e5edb57786f11f9b"
@@ -7356,6 +7390,17 @@ graphlib@^2.1.8:
   dependencies:
     lodash "^4.17.15"
 
+graphql-request@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-5.2.0.tgz#a05fb54a517d91bb2d7aefa17ade4523dc5ebdca"
+  integrity sha512-pLhKIvnMyBERL0dtFI3medKqWOz/RhHdcgbZ+hMMIb32mEPa5MJSzS4AuXxfI4sRAu6JVVk5tvXuGfCWl9JYWQ==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.1"
+    cross-fetch "^3.1.5"
+    extract-files "^9.0.0"
+    form-data "^3.0.0"
+
+graphql-tag@^2.11.0, graphql-tag@^2.12.6:
 graphql-tag@2.12.6, graphql-tag@^2.10.1, graphql-tag@^2.11.0, graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"

From 77557826c82a20b5bf256ba9ec462afab50bcd3e Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 13 Apr 2023 14:29:10 +0300
Subject: [PATCH 07/54] Fix styles

---
 package.json                                  |   2 +-
 src/components/domains/DomainInput.tsx        |   2 +-
 .../domains/EligibleDomainsSection.tsx        |  43 +++--
 .../domains/dot-seller/BuyByDotButton.tsx     | 177 ------------------
 .../domains/dot-seller/BuyByDotModal.tsx      | 138 ++++++++++++++
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  81 ++++++++
 .../domains/dot-seller/Index.module.sass      |  36 +++-
 src/components/domains/index.module.sass      |  19 +-
 src/components/domains/index.tsx              |   7 +
 .../domains/manage/ManageDomainProvider.tsx   |   8 +-
 .../domains/pendingOrders/Index.module.sass   |   3 +
 .../domains/pendingOrders/index.tsx           |  51 +++++
 .../utils/cards/CardWithContent.module.sass   |   3 -
 .../utils/cards/CardWithContent.tsx           |   5 +-
 src/rtk/app/rootReducer.ts                    |   2 +-
 .../pendingOrdersByIdSlice.ts                 | 118 ------------
 .../domainPendingOrders/pendingOrdersHooks.ts |  26 +++
 .../domainPendingOrders/pendingOrdersSlice.ts | 127 +++++++++++++
 yarn.lock                                     |  29 ++-
 19 files changed, 536 insertions(+), 341 deletions(-)
 delete mode 100644 src/components/domains/dot-seller/BuyByDotButton.tsx
 create mode 100644 src/components/domains/dot-seller/BuyByDotModal.tsx
 create mode 100644 src/components/domains/dot-seller/BuyByDotTxButton.tsx
 create mode 100644 src/components/domains/pendingOrders/Index.module.sass
 create mode 100644 src/components/domains/pendingOrders/index.tsx
 delete mode 100644 src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts
 create mode 100644 src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
 create mode 100644 src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts

diff --git a/package.json b/package.json
index e17fdbd42..af7235202 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@subsocial/api": "0.7.13",
     "@subsocial/definitions": "0.7.13",
     "@subsocial/elasticsearch": "0.7.13",
-    "@subsocial/utils": "0.8.7",
+    "@subsocial/utils": "0.8.8",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
     "@tiptap/extension-image": "^2.0.0-beta.27",
     "@tiptap/extension-link": "^2.0.0-beta.37",
diff --git a/src/components/domains/DomainInput.tsx b/src/components/domains/DomainInput.tsx
index 6b3a5ace2..0c2c37f1a 100644
--- a/src/components/domains/DomainInput.tsx
+++ b/src/components/domains/DomainInput.tsx
@@ -46,7 +46,7 @@ export const InputDomain = ({ onChange }: DomainInputProps) => {
           onPressEnter={onSearchHandler}
           size='large'
         />
-        <Button type='primary' style={{ flexBasis: '15%' }} size='large' onClick={onSearchHandler}>
+        <Button type='primary' ghost={!!domain} style={{ flexBasis: '15%' }} size='large' onClick={onSearchHandler}>
           {isMobile ? <SearchOutlined /> : 'Search'}
         </Button>
       </Input.Group>
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 1b0f2f671..e7a1634e7 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,6 +1,6 @@
 import { isFunction } from '@polkadot/util'
 import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
-import { Button, Card, Radio, Result, Row, Tag, RadioChangeEvent } from 'antd';
+import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag } from 'antd'
 import BN from 'bn.js'
 import clsx from 'clsx'
 import React, { useState } from 'react'
@@ -21,10 +21,11 @@ import useSubstrate from '../substrate/useSubstrate'
 import { Loading, LocalIcon } from '../utils'
 import TxButton from '../utils/TxButton'
 import ClaimFreeDomainModal from './ClaimFreeDomainModal'
+import BuyByDotButton from './dot-seller/BuyByDotModal'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { DomainDetails, ResultContainer } from './utils'
-import BuyByDotButton from './dot-seller/BuyByDotButton';
+import { MutedDiv } from '../utils/MutedText';
 
 const log = newLogger('DD')
 
@@ -144,12 +145,15 @@ const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
   const { promoCode, variant } = useManageDomainContext()
 
-  let DefaultDomainAction = promoCode && domain.id.endsWith('.sub') ? ClaimFreeDomainSection : BuyDomainSection
-  
-  const action = variant === 'SUB' 
-    ? <DefaultDomainAction domain={domain} /> 
-    : <BuyByDotButton domain={domain} className={styles.BuyBtn}/>
+  let DefaultDomainAction =
+    promoCode && domain.id.endsWith('.sub') ? ClaimFreeDomainSection : BuyDomainSection
 
+  const action =
+    variant === 'SUB' ? (
+      <DefaultDomainAction domain={domain} />
+    ) : (
+      <BuyByDotButton domain={domain} className={styles.BuyBtn} />
+    )
 
   return owner ? <UnavailableBtn domain={domain} /> : action
 }
@@ -268,7 +272,7 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 
 const variantOpt = [
   { value: 'SUB', label: 'SUB' },
-  { value: 'DOT', label: 'DOT' }
+  { value: 'DOT', label: 'DOT' },
 ]
 
 const ChooseDomain = ({ domain }: DomainProps) => {
@@ -291,16 +295,25 @@ const ChooseDomain = ({ domain }: DomainProps) => {
     setVariant(e.target.value)
   }
 
-  const title = <div className='d-flex align-items-center justify-content-between w-100'>
-    <div>Result: </div>
-    <Radio.Group onChange={onVariantChange} defaultValue={'SUB'}>
-      {variantOpt.map(({ value, label }, i) => 
-        <Radio.Button key={i} value={value}>{label}</Radio.Button>)}
-    </Radio.Group>
-  </div>
+  const title = (
+    <div className='d-flex align-items-center justify-content-between w-100'>
+      <div>Result: </div>
+      <div className='d-flex aling-items-center'>
+        <MutedDiv className='mr-2 FontNormal lh-lg font-weight-normal'>Buy with</MutedDiv>
+        <Radio.Group onChange={onVariantChange} defaultValue={'SUB'} className={styles.BuyWithRadio}>
+          {variantOpt.map(({ value, label }, i) => (
+            <Radio.Button key={i} value={value}>
+              {label}
+            </Radio.Button>
+          ))}
+        </Radio.Group>
+      </div>
+    </div>
+  )
 
   return (
     <ResultContainer title={title} icon={<LocalIcon path={'/icons/reward.svg'} />}>
+      <Divider className='w-100 m-0 mt-1' />
       {content}
     </ResultContainer>
   )
diff --git a/src/components/domains/dot-seller/BuyByDotButton.tsx b/src/components/domains/dot-seller/BuyByDotButton.tsx
deleted file mode 100644
index 0be250565..000000000
--- a/src/components/domains/dot-seller/BuyByDotButton.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useMyAddress } from '../../auth/MyAccountsContext'
-import { useLazyConnectionsContext } from '../../lazy-connection/LazyConnectionContext'
-import { randomAsNumber } from '@polkadot/util-crypto'
-import { DomainEntity } from '../../../rtk/features/domains/domainsSlice'
-import { useState } from 'react'
-import { Button, Modal } from 'antd'
-import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
-import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import styles from './Index.module.sass'
-import { MutedDiv } from '../../utils/MutedText'
-import clsx from 'clsx'
-import { validDomainPrice, testRemarkTitle, treasuryAccount, domainsNetwork } from './config'
-import { SubSclSource, SocialRemark } from '@subsocial/utils'
-import { useGetDecimalAndSymbol } from './utils'
-import { FormatBalance } from '../../common/balances/Balance'
-import LazyTxButton from 'src/components/donate/LazyTxButton'
-import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
-
-type BuyByDotButtonProps = {
-  domain: DomainEntity
-  className?: string
-}
-
-type BuyByDotTxButtonProps = BuyByDotButtonProps & {
-  close: () => void
-}
-
-const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) => {
-  const { recipient } = useManageDomainContext()
-
-  const myAddress = useMyAddress()
-  const { getApiByNetwork } = useLazyConnectionsContext()
-
-  const getParams = async () => {
-    if (!myAddress) return []
-
-    const api = await getApiByNetwork(domainsNetwork)
-
-    if (!api) return []
-
-    const transferTx = api.tx.balances.transfer(
-      treasuryAccount,
-      validDomainPrice,
-    )
-
-    SocialRemark.setConfig({ protNames: [ testRemarkTitle ] })
-
-    const regRmrkMsg: SubSclSource<'DMN_REG'> = {
-      protName: testRemarkTitle,
-      action: 'DMN_REG',
-      version: '0.1',
-      content: {
-        opId: `${transferTx.hash.toHex()}-${randomAsNumber()}`,
-        domainName: domain.id,
-        target: recipient,
-        token: 'ROC',
-      },
-    }
-
-    const remarkTx = api.tx.system.remark(new SocialRemark().fromSource(regRmrkMsg).toMessage())
-
-    return [ [ transferTx, remarkTx ] ]
-  }
-
-  const onSuccess = () => {
-    console.log('Extrinsic Success')
-    close()
-  }
-
-  const onFailed = () => {
-    console.log('Extrinsic failed')
-  }
-
-  return (
-    <LazyTxButton
-      block
-      type='primary'
-      size='middle'
-      network={domainsNetwork}
-      accountId={myAddress}
-      disabled={!recipient}
-      tx={'utility.batchAll'}
-      params={getParams}
-      onSuccess={onSuccess}
-      onFailed={onFailed}
-      label={'Register'}
-      className={className}
-    />
-  )
-}
-
-type BuyDomainModalProps = BuyByDotButtonProps & {
-  open: boolean
-  close: () => void
-}
-
-const BuyDomainModal = ({ domain, open, close }: BuyDomainModalProps) => {
-  const { id: domainId } = domain
-  const myAddress = useMyAddress()
-  const { recipient, setRecipient } = useManageDomainContext()
-  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
-
-  const balance = useBalancesByNetwork({ account: myAddress, network: domainsNetwork, currency: symbol })
-
-  const { freeBalance } = balance || {}
-
-  const title = (
-    <div className={styles.ModalTitle}>
-      <h2>Register {domainId}</h2>
-      <MutedDiv>
-        Now you need to choose the recipient to whom the domain will be registered
-      </MutedDiv>
-    </div>
-  )
-
-  const modalFooter = (
-    <div className={styles.FooterButtons}>
-      <Button type='primary' ghost block onClick={close}>
-        Close
-      </Button>
-      <BuyByDotTxButton domain={domain} className={'ml-0'} close={close} />
-    </div>
-  )
-
-  return (
-    <Modal
-      visible={open}
-      onCancel={close}
-      title={title}
-      footer={modalFooter}
-      width={550}
-      destroyOnClose
-      className={'DfSignInModal'}
-    >
-      <div className={styles.ModalBody}>
-        <div
-          className={clsx('d-flex align-items-center justify-content-between', styles.Recipient)}
-        >
-          <div>Recipient: </div>
-          <div className='d-flex align-items-center'>
-            <MutedDiv>Balance:</MutedDiv>
-            <div className='ml-1'>
-              <FormatBalance value={freeBalance} decimals={decimal} currency={symbol} />
-            </div>
-          </div>
-        </div>
-        <SelectAccountInput
-          className={`${styles.Select} w-100`}
-          setValue={setRecipient}
-          value={recipient}
-          withAvatar={false}
-        />
-      </div>
-    </Modal>
-  )
-}
-
-const BuyByDotButton = ({ domain }: BuyByDotButtonProps) => {
-  const [ open, setOpen ] = useState(false)
-  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
-
-  const close = () => setOpen(false)
-
-  const price = <FormatBalance value={validDomainPrice.toString()} decimals={decimal} currency={symbol}/>
-
-  return (
-    <span className={styles.RegisterButton}>
-      <div>{price}</div>
-      <Button type={'primary'} block onClick={() => setOpen(true)}>
-        Register
-      </Button>
-      <BuyDomainModal domain={domain} open={open} close={close} />
-    </span>
-  )
-}
-
-export default BuyByDotButton
diff --git a/src/components/domains/dot-seller/BuyByDotModal.tsx b/src/components/domains/dot-seller/BuyByDotModal.tsx
new file mode 100644
index 000000000..bde060c68
--- /dev/null
+++ b/src/components/domains/dot-seller/BuyByDotModal.tsx
@@ -0,0 +1,138 @@
+import { Button, Modal, Space } from 'antd'
+import clsx from 'clsx'
+import { useState } from 'react'
+import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
+import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
+import { useMyAddress } from '../../auth/MyAccountsContext'
+import { FormatBalance } from '../../common/balances/Balance'
+import { MutedDiv } from '../../utils/MutedText'
+import { useManageDomainContext } from '../manage/ManageDomainProvider'
+import BuyByDotTxButton, { BuyByDotButtonProps } from './BuyByDotTxButton'
+import { domainsNetwork, validDomainPrice } from './config'
+import styles from './Index.module.sass'
+import { useGetDecimalAndSymbol } from './utils'
+
+type ModalBodyProps = {
+  domainName: string
+}
+
+const ModalBody = ({ domainName }: ModalBodyProps) => {
+  const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
+  const myAddress = useMyAddress()
+
+  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
+
+  const balance = useBalancesByNetwork({
+    account: myAddress,
+    network: domainsNetwork,
+    currency: symbol,
+  })
+
+  const { freeBalance } = balance || {}
+
+  return (
+    <Space direction='vertical' size={24} className={clsx(styles.ModalBody, 'w-100')}>
+      <Space direction='vertical' size={8} className={'w-100'}>
+        <div
+          className={clsx('d-flex align-items-center justify-content-between', styles.Recipient)}
+        >
+          <div>Purchaser </div>
+          <div className='d-flex align-items-center'>
+            <MutedDiv>Balance:</MutedDiv>
+            <div className='ml-1'>
+              <FormatBalance value={freeBalance} decimals={decimal} currency={symbol} />
+            </div>
+          </div>
+        </div>
+        <SelectAccountInput
+          className={`${styles.Select} w-100`}
+          setValue={setPurchaser}
+          value={purchaser}
+          withAvatar={false}
+        />
+      </Space>
+      <Space direction='vertical' size={8} className={'w-100'}>
+        <div className={clsx(styles.Recipient)}>
+          <div>Recipient </div>
+        </div>
+        <SelectAccountInput
+          className={`${styles.Select} w-100`}
+          setValue={setRecipient}
+          value={recipient}
+          withAvatar={false}
+        />
+        <MutedDiv className={styles.RecipientFieldDesc}>
+          Choose the recipient to whom the domain will be registered
+        </MutedDiv>
+      </Space>
+      <Space direction='vertical' size={16} className={clsx(styles.DomainInfo, 'w-100')}>
+        <div className='d-flex align-items-center justify-content-between'>
+          <MutedDiv>Domain name:</MutedDiv>
+          <div className={styles.Domain}>{domainName}</div>
+        </div>
+        <div className='d-flex align-items-center justify-content-between'>
+          <MutedDiv>Price:</MutedDiv>
+          <div className='font-weight-bold'>0.56 DOT</div>
+        </div>
+      </Space>
+    </Space>
+  )
+}
+
+type BuyDomainModalProps = BuyByDotButtonProps & {
+  open: boolean
+  close: () => void
+}
+
+const BuyDomainModal = ({ domain, open, close }: BuyDomainModalProps) => {
+  const { id: domainName } = domain
+
+  const title = (
+    <div className={styles.ModalTitle}>
+      <h2>Register new domain</h2>
+    </div>
+  )
+
+  const modalFooter = (
+    <div className={styles.FooterButtons}>
+      <BuyByDotTxButton domain={domain} className={'ml-0'} close={close} />
+    </div>
+  )
+
+  return (
+    <Modal
+      visible={open}
+      onCancel={close}
+      title={title}
+      footer={modalFooter}
+      width={520}
+      destroyOnClose
+      className={clsx('DfSignInModal', styles.DomainModal)}
+    >
+      <ModalBody domainName={domainName} />
+    </Modal>
+  )
+}
+
+const BuyByDotButton = ({ domain }: BuyByDotButtonProps) => {
+  const [open, setOpen] = useState(false)
+  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
+
+  const close = () => setOpen(false)
+
+  const price = (
+    <FormatBalance value={validDomainPrice.toString()} decimals={decimal} currency={symbol} />
+  )
+
+  return (
+    <span className={styles.RegisterButton}>
+      <div>{price}</div>
+      <Button type={'primary'} block onClick={() => setOpen(true)}>
+        Register
+      </Button>
+      <BuyDomainModal domain={domain} open={open} close={close} />
+    </span>
+  )
+}
+
+export default BuyByDotButton
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
new file mode 100644
index 000000000..de378efb5
--- /dev/null
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -0,0 +1,81 @@
+import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
+import { useManageDomainContext } from '../manage/ManageDomainProvider'
+import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
+import { SocialRemark, SubSclSource } from '@subsocial/utils'
+import { domainsNetwork, testRemarkTitle, treasuryAccount, validDomainPrice } from './config'
+import LazyTxButton from 'src/components/donate/LazyTxButton'
+import { randomAsNumber } from '@polkadot/util-crypto'
+
+export type BuyByDotButtonProps = {
+  domain: DomainEntity
+  className?: string
+}
+
+type BuyByDotTxButtonProps = BuyByDotButtonProps & {
+  close: () => void
+}
+
+const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) => {
+  const { recipient, purchaser } = useManageDomainContext()
+
+  const { getApiByNetwork } = useLazyConnectionsContext()
+
+  const getParams = async () => {
+    if (!purchaser) return []
+
+    const api = await getApiByNetwork(domainsNetwork)
+
+    if (!api) return []
+
+    const transferTx = api.tx.balances.transfer(
+      treasuryAccount,
+      validDomainPrice,
+    )
+
+    SocialRemark.setConfig({ protNames: [ testRemarkTitle ] })
+
+    const regRmrkMsg: SubSclSource<'DMN_REG'> = {
+      protName: testRemarkTitle,
+      action: 'DMN_REG',
+      version: '0.1',
+      content: {
+        opId: `${transferTx.hash.toHex()}-${randomAsNumber()}`,
+        domainName: domain.id,
+        target: recipient,
+        token: 'ROC',
+      },
+    }
+
+    const remarkTx = api.tx.system.remark(new SocialRemark().fromSource(regRmrkMsg).toMessage())
+
+    return [ [ transferTx, remarkTx ] ]
+  }
+
+  const onSuccess = () => {
+    console.log('Extrinsic Success')
+    close()
+  }
+
+  const onFailed = () => {
+    console.log('Extrinsic failed')
+  }
+
+  return (
+    <LazyTxButton
+      block
+      type='primary'
+      size='middle'
+      network={domainsNetwork}
+      accountId={purchaser}
+      disabled={!recipient}
+      tx={'utility.batchAll'}
+      params={getParams}
+      onSuccess={onSuccess}
+      onFailed={onFailed}
+      label={'Register'}
+      className={className}
+    />
+  )
+}
+
+export default BuyByDotTxButton
\ No newline at end of file
diff --git a/src/components/domains/dot-seller/Index.module.sass b/src/components/domains/dot-seller/Index.module.sass
index 47dad35a6..f3f04544b 100644
--- a/src/components/domains/dot-seller/Index.module.sass
+++ b/src/components/domains/dot-seller/Index.module.sass
@@ -5,9 +5,20 @@ $element_height: 40px
 .ModalBody
   padding: 1.5rem
 
+  \:global .ant-select-selector
+    border-radius: $border_radius_large !important
+
+
+.DomainModal
+  \:global .ant-modal-footer
+    padding-top: 0 !important
+
+  \:global .ant-modal-header
+    padding-bottom: 0 !important
+
 .Recipient
   font-size: $font_small
-  margin-bottom: 4px
+  line-height: $font_small
 
 .FooterButtons
   display: flex
@@ -17,15 +28,15 @@ $element_height: 40px
     height: $element_height
 
 .ModalTitle
-  h2 
+  h2
     color: #222
     line-height: 1.5
     font-weight: bold
+    margin-bottom: 0 !important
 
   div
     font-size: $font_normal
 
-  
 .Select
   height: $element_height
   overflow: hidden
@@ -54,4 +65,21 @@ $element_height: 40px
 
   button
     font-size: $font_normal
-    padding: 0 $space_normal
\ No newline at end of file
+    padding: 0 $space_normal
+
+.DomainInfo
+  background: #F5F5F5
+  border-radius: 10px
+  padding: $space_normal
+
+.Domain
+  font-weight: 600
+  font-size: $font-normal
+  line-height: 22px
+  background: linear-gradient(89.76deg, #F10286 55.71%, #C10AEC 101.74%)
+  background-clip: text
+  color: transparent
+
+.RecipientFieldDesc
+  font-size: $font_small
+  line-height: $font_small
\ No newline at end of file
diff --git a/src/components/domains/index.module.sass b/src/components/domains/index.module.sass
index 17cb060dd..44e9e0386 100644
--- a/src/components/domains/index.module.sass
+++ b/src/components/domains/index.module.sass
@@ -72,6 +72,15 @@ $font_size: 1.1rem
     \:global .ant-card-body
       padding: $space_normal
 
+.BuyWithRadio
+  \:global .ant-radio-button-wrapper
+    &:last-child
+      border-radius: 0px 5px 5px 0px !important
+    &:first-child
+      border-radius: 5px 0px 0px 5px !important
+      
+
+
 .DomainName
   font-size: 4rem
   text-align: center
@@ -140,8 +149,16 @@ $font_size: 1.1rem
 
   \:global .ant-collapse-content-box
     padding-top: 0 !important
-    padding-left: 0 !important
+    padding-left: $space_big !important
     padding-right: 0 !important
 
   \:global .ant-collapse-arrow
     left: 0 !important
+    top: $space_big !important
+    
+    svg
+      path
+        color: $color_muted
+
+  p
+    color: $color_muted
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index 9fb681ed8..7839e1836 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -20,6 +20,8 @@ import styles from './index.module.sass'
 import { ManageDomainProvider } from './manage/ManageDomainProvider'
 import { MyDomainsCard } from './MyDomains'
 import { DomainDetails, UnamesLearnMoreLink } from './utils'
+import { useFetchDomainPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import PendingOrdersSection from './pendingOrders'
 
 const tabs = ['register', 'manage'] as const
 type TabKey = typeof tabs[number]
@@ -46,6 +48,7 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
     const hash = window.location.hash.substring(1)
     if ((tabs as unknown as string[]).includes(hash)) setActiveTab(hash as TabKey)
   }, [])
+  
   useEffect(() => {
     if (!myAddress) setActiveTab('register')
   }, [myAddress])
@@ -143,15 +146,19 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
 }
 
 export const DomainRegisterPage = ({ promoCode }: DomainServerProps) => {
+  useFetchDomainPendingOrdersByAccount()
   const isMobile = useIsMobileWidthOrDevice()
+
   const rightPanelContent = (
     <>
+      <PendingOrdersSection />
       <FaqSection />
       {/*<CardWithContent title='Tutorial' className='mt-4'>*/}
       {/*  <Embed link='https://www.youtube.com/watch?v=v3MTo_tt5Z0' />*/}
       {/*</CardWithContent>*/}
     </>
   )
+
   return (
     <PageContent
       meta={{
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index 0296a040f..bfadb5f74 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -15,6 +15,8 @@ type ManageDomainProviderState = {
   setVariant: (variant: Variant) => void
   recipient: string
   setRecipient: (recipient: string) => void
+  purchaser: string
+  setPurchaser: (recipient: string) => void
 }
 
 type Variant = 'SUB' | 'DOT'
@@ -28,7 +30,7 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [visible, setVisible] = useState(true)
   const [ variant, setVariant ] = useState<Variant>('SUB')
   const [ recipient, setRecipient ] = useState<string>(myAddress || '')
-
+  const [ purchaser, setPurchaser ] = useState<string>(myAddress || '')
 
   const router = useRouter()
   const [activePromoCode, setActivePromoCode] = useState(promoCode)
@@ -59,7 +61,9 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
     recipient,
     setRecipient,
     promoCode: activePromoCode, 
-    clearPromoCode
+    clearPromoCode,
+    purchaser,
+    setPurchaser
   }
 
   return (
diff --git a/src/components/domains/pendingOrders/Index.module.sass b/src/components/domains/pendingOrders/Index.module.sass
new file mode 100644
index 000000000..b6b900948
--- /dev/null
+++ b/src/components/domains/pendingOrders/Index.module.sass
@@ -0,0 +1,3 @@
+@import 'src/styles/subsocial-vars.scss'
+
+
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
new file mode 100644
index 000000000..d6ea1cf8b
--- /dev/null
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -0,0 +1,51 @@
+import { InfoCircleOutlined } from '@ant-design/icons'
+import { isEmptyArray } from '@subsocial/utils'
+import { Button, Tooltip } from 'antd'
+import { useMemo } from 'react'
+import CardWithContent from 'src/components/utils/cards/CardWithContent'
+import { useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import { MutedDiv } from '../../utils/MutedText'
+
+type PendingDomainProps = {
+  pendingDomain: PendingDomainEntity
+}
+
+const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
+  const { domain, timestamp } = pendingDomain
+  return (
+    <div className='d-flex align-items-center justify-content-between'>
+      <div className='d-flex align-items-center'>
+        <div className='mlr-2'>{domain}</div>
+        <Tooltip title={'Your domain reservation expires in 7 minutes'}>
+          <InfoCircleOutlined />
+        </Tooltip>
+      </div>
+      <Button type='primary'>Continue</Button>
+    </div>
+  )
+}
+
+const PendingOrdersSection = () => {
+  const pendingOrders = useSelectPendingOrdersByAccount()
+
+  const pendingDomains = useMemo(() => {
+    return pendingOrders.map((pendingDomain, i) => (
+      <PendingDomain key={i} pendingDomain={pendingDomain} />
+    ))
+  }, [pendingOrders.length])
+
+  if (!pendingOrders || isEmptyArray(pendingOrders)) return null
+
+  return (
+    <CardWithContent title={'Pending'}>
+      <MutedDiv>
+        You have a pending order to buy a domain. It will be canceled automatically after 10
+        minutes.
+      </MutedDiv>
+      {pendingDomains}
+    </CardWithContent>
+  )
+}
+
+export default PendingOrdersSection
diff --git a/src/components/utils/cards/CardWithContent.module.sass b/src/components/utils/cards/CardWithContent.module.sass
index ab8d7f892..e968614fd 100644
--- a/src/components/utils/cards/CardWithContent.module.sass
+++ b/src/components/utils/cards/CardWithContent.module.sass
@@ -14,9 +14,6 @@
       margin-right: 0
       margin-top: 0 !important
 
-    .TitleContainer
-      justify-content: center !important
-
     .Title
       align-items: center
       text-align: center
diff --git a/src/components/utils/cards/CardWithContent.tsx b/src/components/utils/cards/CardWithContent.tsx
index 0cc436260..725b3c2fa 100644
--- a/src/components/utils/cards/CardWithContent.tsx
+++ b/src/components/utils/cards/CardWithContent.tsx
@@ -33,7 +33,7 @@ export default function CardWithContent({
   return (
     <DfCard {...props}>
       <div className={clsx(styles.CardWithContent, 'd-flex w-100')}>
-        <div className={clsx('mt-2', isMobile && 'mb-2', styles.Avatar)}>{avatar}</div>
+        {avatar && <div className={clsx('mt-2', isMobile && 'mb-2', styles.Avatar)}>{avatar}</div>}
         <div className={clsx('d-flex flex-column w-100', avatar && 'ml-1')}>
           <div
             className={clsx(
@@ -41,12 +41,11 @@ export default function CardWithContent({
               'align-items-center',
               'w-100',
               'mb-2 GapSmall',
-              styles.TitleContainer,
             )}
           >
             <div
               className={clsx(
-                'd-flex align-items-center w-100',
+                'd-flex align-items-center',
                 'FontBig font-weight-semibold',
                 styles.Title,
               )}
diff --git a/src/rtk/app/rootReducer.ts b/src/rtk/app/rootReducer.ts
index 9c00b7731..bda6c86b1 100644
--- a/src/rtk/app/rootReducer.ts
+++ b/src/rtk/app/rootReducer.ts
@@ -19,7 +19,7 @@ import followedSpaceIds from '../features/spaceIds/followedSpaceIdsSlice'
 import ownSpaceIds from '../features/spaceIds/ownSpaceIdsSlice'
 import spaceIdsWithRolesByAccount from '../features/spaceIds/spaceIdsWithRolesByAccountSlice'
 import spaces from '../features/spaces/spacesSlice'
-import ordersById from '../features/domainPendingOrders/pendingOrdersByIdSlice'
+import ordersById from '../features/domainPendingOrders/pendingOrdersSlice'
 
 const rootReducer = combineReducers({
   contents,
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts
deleted file mode 100644
index e1633dc34..000000000
--- a/src/rtk/features/domainPendingOrders/pendingOrdersByIdSlice.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
-import { isDef } from '@subsocial/utils'
-import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
-import { PENDING_ORDERS_BY_ACCOUNT, PENDING_ORDERS_BY_IDS } from 'src/components/domains/dot-seller/seller-queries'
-import { FetchManyArgs, FetchOneArgs, ThunkApiConfig } from 'src/rtk/app/helpers'
-import { RootState } from 'src/rtk/app/rootReducer'
-
-export type OrderMeta = {
-  id: string
-  account: string
-  clientId: string
-  timestamp: string
-}
-
-export type Domain = string
-
-type Entity = {
-  id: string
-  account: string
-  clientId: string
-  timestamp: string
-}
-
-const sliceName = 'domainsByOwner'
-
-type MaybeEntity = Entity | undefined
-
-const adapter = createEntityAdapter<Entity>()
-
-const selectors = adapter.getSelectors<RootState>(state => state.ordersById)
-
-type Args = {}
-
-const selectEntitiesByIds = (state: RootState, ids: string[]) => {
-  return ids.map(id => selectors.selectById(state, id)).filter(isDef)
-}
-
-export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
-  const keys = selectors.selectIds(state)
-
-  const entityIds = keys.filter(key => ids.find(x => key.toString().includes(x)))
-
-  return selectEntitiesByIds(state, entityIds as string[])
-}
-
-export const selectPendingOrdersByAccount = (state: RootState, address: string) => {
-  const keys = selectors.selectIds(state)
-
-  const entityIds = keys.filter(key => key.toString().includes(address))
-
-  return selectEntitiesByIds(state, entityIds as string[])
-}
-
-export const fetchPendingOrdersByIds = createAsyncThunk<
-  MaybeEntity[],
-  FetchManyArgs<Args>,
-  ThunkApiConfig
->(`${sliceName}/fetchOne`, async ({ ids }): Promise<MaybeEntity[]> => {
-  const result: MaybeEntity[] = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_IDS, { ids })
-
-  return result
-
-  // const myAddress = id as AccountId
-  // const knownDomains = selectDomainsByOwner(getState(), myAddress)
-  // const isKnownOwner = typeof knownDomains !== 'undefined'
-  // if (!reload && isKnownOwner) {
-  //   return undefined
-  // }
-
-  // const domains: Domain[] = await api.blockchain.domainsByOwner(myAddress)
-
-  // return {
-  //   id: myAddress,
-  //   domains,
-  // }
-})
-
-export const fetchPendingOrdersByAccount = createAsyncThunk<
-  MaybeEntity[],
-  FetchOneArgs<Args>,
-  ThunkApiConfig
->(`${sliceName}/fetchOne`, async ({ id: account }): Promise<MaybeEntity[]> => {
-  const result: MaybeEntity[] = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_ACCOUNT, { account })
-
-  return result
-
-  // const myAddress = id as AccountId
-  // const knownDomains = selectDomainsByOwner(getState(), myAddress)
-  // const isKnownOwner = typeof knownDomains !== 'undefined'
-  // if (!reload && isKnownOwner) {
-  //   return undefined
-  // }
-
-  // const domains: Domain[] = await api.blockchain.domainsByOwner(myAddress)
-
-  // return {
-  //   id: myAddress,
-  //   domains,
-  // }
-})
-
-const slice = createSlice({
-  name: sliceName,
-  initialState: adapter.getInitialState(),
-  reducers: {
-    // upsertOwnDomains: adapter.upsertOne,
-  },
-  extraReducers: builder => {
-    builder.addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) => {
-      if (payload) adapter.upsertMany(state, payload.filter(isDef))
-    })
-    builder.addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
-      if (payload) adapter.upsertMany(state, payload.filter(isDef))
-    })
-  },
-})
-
-export default slice.reducer
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
new file mode 100644
index 000000000..d88a67125
--- /dev/null
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -0,0 +1,26 @@
+import { useFetch } from 'src/rtk/app/hooksCommon'
+import { fetchPendingOrdersByAccount, fetchPendingOrdersByIds, selectPendingOrdersByAccount, selectPendingOrdersByIds } from './pendingOrdersSlice'
+import { EntityId } from '@reduxjs/toolkit'
+import { useAppSelector } from 'src/rtk/app/store'
+import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+
+export const useFetchDomainPendingOrdersByIds = (domains: string[]) => {
+  const ids = domains as EntityId[]
+
+  useFetch(fetchPendingOrdersByIds, { ids })
+}
+
+export const useFetchDomainPendingOrdersByAccount = () => {
+  const myAddress = useMyAddress()
+
+  useFetch(fetchPendingOrdersByAccount, { id: myAddress || '' })
+}
+
+export const useSelectPendingOrdersByIds = (ids: string[]) => {
+  return useAppSelector((state) => selectPendingOrdersByIds(state, ids))
+}
+
+export const useSelectPendingOrdersByAccount = () => {
+  const myAddress = useMyAddress()
+  return useAppSelector((state) => selectPendingOrdersByAccount(state, myAddress))
+}
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
new file mode 100644
index 000000000..fff2fb302
--- /dev/null
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -0,0 +1,127 @@
+import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { isDef } from '@subsocial/utils'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import {
+  PENDING_ORDERS_BY_ACCOUNT,
+  PENDING_ORDERS_BY_IDS,
+} from 'src/components/domains/dot-seller/seller-queries'
+import { FetchManyArgs, FetchOneArgs, ThunkApiConfig } from 'src/rtk/app/helpers'
+import { RootState } from 'src/rtk/app/rootReducer'
+
+export type PendingDomainEntity = {
+  id: string
+  domain: string
+  account: string
+  clientId: string
+  timestamp: string
+}
+
+const sliceName = 'domainPndingOrders'
+
+type MaybeEntity = PendingDomainEntity | undefined
+
+const adapter = createEntityAdapter<PendingDomainEntity>()
+
+const selectors = adapter.getSelectors<RootState>(state => state.ordersById)
+
+type Args = {}
+
+const selectEntitiesByIds = (state: RootState, ids: string[]) => {
+  return ids.map(id => selectors.selectById(state, id)).filter(isDef)
+}
+
+export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
+  const keys = selectors.selectIds(state)
+
+  const entityIds = keys.filter(key => ids.find(x => key.toString().includes(x)))
+
+  return selectEntitiesByIds(state, entityIds as string[])
+}
+
+export const selectPendingOrdersByAccount = (state: RootState, address?: string) => {
+  if (!address) return []
+  const keys = selectors.selectIds(state)
+
+  const entityIds = keys.filter(key => key.toString().includes(address))
+
+  return selectEntitiesByIds(state, entityIds as string[])
+}
+
+export const fetchPendingOrdersByIds = createAsyncThunk<
+  MaybeEntity[],
+  FetchManyArgs<Args>,
+  ThunkApiConfig
+>(`${sliceName}/fetchManyByIds`, async ({ ids, reload }, { getState }): Promise<MaybeEntity[]> => {
+  const entityIds = ids as string[]
+  const knownDomainsPendingOrders = selectPendingOrdersByIds(getState(), entityIds)
+
+  if (!reload && knownDomainsPendingOrders) {
+    return []
+  }
+
+  const result: Omit<PendingDomainEntity, 'domain'>[] = await sellerSquidGraphQlClient.request(
+    PENDING_ORDERS_BY_IDS,
+    { ids },
+  )
+
+  return result.map(item => {
+    const { id, account } = item
+
+    return {
+      ...item,
+      id: `${id}-${account}`,
+      domain: id,
+      account,
+    }
+  })
+})
+
+export const fetchPendingOrdersByAccount = createAsyncThunk<
+  MaybeEntity[],
+  FetchOneArgs<Args>,
+  ThunkApiConfig
+>(
+  `${sliceName}/fetchManyByAccount`,
+  async ({ id: account, reload }, { getState }): Promise<MaybeEntity[]> => {
+    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), account.toString())
+
+    if (!reload && knownDomainsPendingOrders) {
+      return []
+    }
+
+    const result: Omit<PendingDomainEntity, 'domain'>[] = await sellerSquidGraphQlClient.request(
+      PENDING_ORDERS_BY_ACCOUNT,
+      { account },
+    )
+
+    return result.map(item => {
+      const { id, account } = item
+
+      return {
+        ...item,
+        id: `${id}-${account}`,
+        domain: id,
+        account,
+      }
+    })
+  },
+)
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: adapter.getInitialState(),
+  reducers: {
+    // upsertOwnDomains: adapter.upsertOne,
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) => {
+        if (payload) adapter.upsertMany(state, payload.filter(isDef))
+      })
+      .addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
+        if (payload) adapter.upsertMany(state, payload.filter(isDef))
+      })
+  },
+})
+
+export default slice.reducer
diff --git a/yarn.lock b/yarn.lock
index dcb3bcfdb..e96dc9bc6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2429,10 +2429,10 @@
     "@elastic/elasticsearch" "7.4.0"
     "@subsocial/utils" latest
 
-"@subsocial/utils@0.8.7":
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.8.7.tgz#0a1aed2e29bf603138a167d0c222c2d25d45bfa8"
-  integrity sha512-kX/BRXvrF8ChLbosCM4QtdlLCxLdaLvJtDS/XGBdJTiXQgbi+Svk+qMITHLmMX2f6vbSQM5w/vcYLvGpRXR7LA==
+"@subsocial/utils@0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.8.8.tgz#ff5c627be715d3b261961cf8813d03c06315616c"
+  integrity sha512-9FeqYNcyHyJVWWep4r6UWSY0It3hP8Tv0Gxlk2auDxzkPh0yGttvmB61pe8TIhRGaTSvOYXBmVVT4NJM9roryg==
   dependencies:
     "@polkadot/util-crypto" latest
     "@sindresorhus/slugify" "^1.1.0"
@@ -5254,6 +5254,11 @@ create-react-class@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
 cross-fetch@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -5261,11 +5266,6 @@ cross-fetch@^3.1.5:
   dependencies:
     node-fetch "2.6.7"
 
-create-require@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
-  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
-
 cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -7400,7 +7400,6 @@ graphql-request@^5.2.0:
     extract-files "^9.0.0"
     form-data "^3.0.0"
 
-graphql-tag@^2.11.0, graphql-tag@^2.12.6:
 graphql-tag@2.12.6, graphql-tag@^2.10.1, graphql-tag@^2.11.0, graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
@@ -13712,16 +13711,16 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.2, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.1, tslib@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tslib@^2.0.0, tslib@^2.0.3:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
-tslib@^2.1.0, tslib@^2.3.0, tslib@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
-  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
-
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"

From 55283510bb93313420f68548d3c46667ceda4ef9 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 14 Apr 2023 13:56:37 +0300
Subject: [PATCH 08/54] Fix bug w/ auth

---
 .env.local                                    |   3 +
 .../domains/EligibleDomainsSection.tsx        |  58 +++++-
 .../domains/dot-seller/BuyByDotModal.tsx      |  25 ++-
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  80 +++++---
 src/components/domains/dot-seller/config.ts   |   5 -
 .../domains/dot-seller/seller-queries.ts      |  27 +++
 src/components/domains/index.module.sass      |   3 +
 src/components/domains/index.tsx              | 192 +++++++++---------
 .../domains/pendingOrders/Index.module.sass   |   7 +
 .../domains/pendingOrders/index.tsx           |  35 +++-
 src/components/utils/OffchainUtils.ts         |   7 +
 src/pages/api/pending-order/create.ts         |  61 ++++++
 src/rtk/app/rootReducer.ts                    |   4 +-
 .../domainPendingOrders/pendingOrdersHooks.ts |  20 +-
 .../domainPendingOrders/pendingOrdersSlice.ts |  65 ++++--
 .../sellerConfig/sellerConfigHooks.ts         |  11 +
 .../sellerConfig/sellerConfigSlice.ts         |  76 +++++++
 17 files changed, 507 insertions(+), 172 deletions(-)
 create mode 100644 src/pages/api/pending-order/create.ts
 create mode 100644 src/rtk/features/sellerConfig/sellerConfigHooks.ts
 create mode 100644 src/rtk/features/sellerConfig/sellerConfigSlice.ts

diff --git a/.env.local b/.env.local
index 51e65a701..bc02000ef 100644
--- a/.env.local
+++ b/.env.local
@@ -11,6 +11,9 @@ NEXT_PUBLIC_APP_KIND=polkaverse
 # 'main'    - If running this web app on a production server.
 NEXT_PUBLIC_CONNECTION_KIND=staging
 
+CLIENT_ID='5DYm3Wk4aa1BbfhH1ajmY6MNEELXoicmKRnP4tzHYjSKnD9K'
+SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER='retire strong pole intact cool music high path salt praise stadium spatial'
+
 # Id for Google Analytics
 # NEXT_PUBLIC_GA_ID=
 
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index e7a1634e7..47068bebc 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,11 +1,13 @@
 import { isFunction } from '@polkadot/util'
 import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
-import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag } from 'antd'
+import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import BN from 'bn.js'
 import clsx from 'clsx'
 import React, { useState } from 'react'
 import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
+import { useFetchDomainPendingOrdersByIds } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import {
   useBuildDomainsWithTldByDomain,
   useCreateReloadMyDomains,
@@ -14,18 +16,18 @@ import {
   useIsSupportedTld,
 } from '../../rtk/features/domains/domainHooks'
 import { DomainEntity } from '../../rtk/features/domains/domainsSlice'
-import { useIsMyAddress } from '../auth/MyAccountsContext'
+import { useIsMyAddress, useMyAddress } from '../auth/MyAccountsContext'
 import { FormatBalance } from '../common/balances'
 import { TxCallback } from '../substrate/SubstrateTxButton'
 import useSubstrate from '../substrate/useSubstrate'
 import { Loading, LocalIcon } from '../utils'
+import { MutedDiv } from '../utils/MutedText'
 import TxButton from '../utils/TxButton'
 import ClaimFreeDomainModal from './ClaimFreeDomainModal'
 import BuyByDotButton from './dot-seller/BuyByDotModal'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { DomainDetails, ResultContainer } from './utils'
-import { MutedDiv } from '../utils/MutedText';
 
 const log = newLogger('DD')
 
@@ -36,13 +38,14 @@ type DomainItemProps = {
 
 type DomainProps = {
   domain: DomainEntity
+  label?: string
 }
 
 const BLOCK_TIME = 12
 const SECS_IN_DAY = 60 * 60 * 24
 const BLOCKS_IN_YEAR = new BN((SECS_IN_DAY * 365) / BLOCK_TIME)
 
-const BuyDomainSection = ({ domain: { id: domain } }: DomainProps) => {
+const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: DomainProps) => {
   const reloadMyDomains = useCreateReloadMyDomains()
   const { openManageModal } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
@@ -74,7 +77,7 @@ const BuyDomainSection = ({ domain: { id: domain } }: DomainProps) => {
         customNodeApi={api}
         block
         size='middle'
-        label={'Register'}
+        label={label}
         tx={'domains.registerDomain'}
         onSuccess={onSuccess}
         onFailed={onFailed}
@@ -116,10 +119,21 @@ const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
 
 export const DomainItem = ({ domain, action }: DomainItemProps) => {
   const actionComponent = isFunction(action) ? action() : action
+  const myAddress = useMyAddress()
+  const pendingOrders = useSelectPendingOrderById(domain)
+
+  const { account } = pendingOrders || {}
 
   return (
     <Row justify='space-between' align='middle' className={styles.DomainResultItem}>
-      <span>{domain}</span>
+      <div className='d-flex align-items-center justify-content-between'>
+        <span>{domain}</span>
+        {account && myAddress === account && (
+          <Tag color='gold' className={clsx('ml-2', styles.PendingTag)}>
+            Pending
+          </Tag>
+        )}
+      </div>
       {actionComponent}
     </Row>
   )
@@ -144,15 +158,36 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
   const { promoCode, variant } = useManageDomainContext()
+  const myAddress = useMyAddress()
+  const pendingOrder = useSelectPendingOrderById(domain.id)
+
+  const { account } = pendingOrder || {}
+
+  if (account && account !== myAddress) {
+    return (
+      <Tooltip
+        title='Someone else currently has this domain reserved.
+    If they do not buy it within 10 minutes, it will
+    become available again.'
+      >
+        <Button disabled={true}>Reserved</Button>
+      </Tooltip>
+    )
+  }
+
+  const label = account === myAddress ? 'Continue' : undefined
 
   let DefaultDomainAction =
     promoCode && domain.id.endsWith('.sub') ? ClaimFreeDomainSection : BuyDomainSection
 
   const action =
     variant === 'SUB' ? (
-      <DefaultDomainAction domain={domain} />
+      <DefaultDomainAction domain={domain} label={label} />
     ) : (
-      <BuyByDotButton domain={domain} className={styles.BuyBtn} />
+      <BuyByDotButton
+        domainName={domain.id}
+        label={label}
+      />
     )
 
   return owner ? <UnavailableBtn domain={domain} /> : action
@@ -300,7 +335,11 @@ const ChooseDomain = ({ domain }: DomainProps) => {
       <div>Result: </div>
       <div className='d-flex aling-items-center'>
         <MutedDiv className='mr-2 FontNormal lh-lg font-weight-normal'>Buy with</MutedDiv>
-        <Radio.Group onChange={onVariantChange} defaultValue={'SUB'} className={styles.BuyWithRadio}>
+        <Radio.Group
+          onChange={onVariantChange}
+          defaultValue={'SUB'}
+          className={styles.BuyWithRadio}
+        >
           {variantOpt.map(({ value, label }, i) => (
             <Radio.Button key={i} value={value}>
               {label}
@@ -321,6 +360,7 @@ const ChooseDomain = ({ domain }: DomainProps) => {
 
 export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
   const domains = useBuildDomainsWithTldByDomain(domain)
+  useFetchDomainPendingOrdersByIds(domains)
   const { isReserved, loading: checkingWord } = useIsReservedWord(domain.id)
 
   if (isEmptyArray(domains)) return null
diff --git a/src/components/domains/dot-seller/BuyByDotModal.tsx b/src/components/domains/dot-seller/BuyByDotModal.tsx
index bde060c68..b792bda4b 100644
--- a/src/components/domains/dot-seller/BuyByDotModal.tsx
+++ b/src/components/domains/dot-seller/BuyByDotModal.tsx
@@ -7,7 +7,7 @@ import { useMyAddress } from '../../auth/MyAccountsContext'
 import { FormatBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import BuyByDotTxButton, { BuyByDotButtonProps } from './BuyByDotTxButton'
+import BuyByDotTxButton from './BuyByDotTxButton'
 import { domainsNetwork, validDomainPrice } from './config'
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from './utils'
@@ -79,14 +79,13 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
   )
 }
 
-type BuyDomainModalProps = BuyByDotButtonProps & {
+type BuyDomainModalProps = {
+  domainName: string
   open: boolean
   close: () => void
 }
 
-const BuyDomainModal = ({ domain, open, close }: BuyDomainModalProps) => {
-  const { id: domainName } = domain
-
+const BuyDomainModal = ({ domainName, open, close }: BuyDomainModalProps) => {
   const title = (
     <div className={styles.ModalTitle}>
       <h2>Register new domain</h2>
@@ -95,7 +94,7 @@ const BuyDomainModal = ({ domain, open, close }: BuyDomainModalProps) => {
 
   const modalFooter = (
     <div className={styles.FooterButtons}>
-      <BuyByDotTxButton domain={domain} className={'ml-0'} close={close} />
+      <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} />
     </div>
   )
 
@@ -114,7 +113,13 @@ const BuyDomainModal = ({ domain, open, close }: BuyDomainModalProps) => {
   )
 }
 
-const BuyByDotButton = ({ domain }: BuyByDotButtonProps) => {
+type BuyByDotButtonProps = {
+  domainName: string
+  label?: string
+  withPrice?: boolean
+}
+
+const BuyByDotButton = ({ domainName, label = 'Register', withPrice = true }: BuyByDotButtonProps) => {
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
 
@@ -126,11 +131,11 @@ const BuyByDotButton = ({ domain }: BuyByDotButtonProps) => {
 
   return (
     <span className={styles.RegisterButton}>
-      <div>{price}</div>
+      {withPrice && <div>{price}</div>}
       <Button type={'primary'} block onClick={() => setOpen(true)}>
-        Register
+        {label}
       </Button>
-      <BuyDomainModal domain={domain} open={open} close={close} />
+      <BuyDomainModal domainName={domainName} open={open} close={close} />
     </span>
   )
 }
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index de378efb5..b3101246c 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -1,54 +1,77 @@
-import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
-import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
-import { SocialRemark, SubSclSource } from '@subsocial/utils'
-import { domainsNetwork, testRemarkTitle, treasuryAccount, validDomainPrice } from './config'
-import LazyTxButton from 'src/components/donate/LazyTxButton'
 import { randomAsNumber } from '@polkadot/util-crypto'
+import {
+  SocialRemark,
+  SocialRemarkDestChainsNameId,
+  SocialRemarkMessageVersion,
+  SubSclSource,
+} from '@subsocial/utils'
+import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+import LazyTxButton from 'src/components/donate/LazyTxButton'
+import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
+import { createPendingOrder } from 'src/components/utils/OffchainUtils'
+import { useAppDispatch } from 'src/rtk/app/store'
+import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import { useManageDomainContext } from '../manage/ManageDomainProvider'
+import { domainsNetwork, validDomainPrice } from './config'
 
-export type BuyByDotButtonProps = {
-  domain: DomainEntity
+type BuyByDotTxButtonProps = {
+  domainName: string
   className?: string
+  close: () => void
 }
 
-type BuyByDotTxButtonProps = BuyByDotButtonProps & {
-  close: () => void
+function getKeyName(value: string) {
+  return Object.entries(SocialRemarkDestChainsNameId).find(([key]) => key === value)?.[1]
 }
 
-const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) => {
+const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
   const { recipient, purchaser } = useManageDomainContext()
+  const sellerConfig = useSelectSellerConfig()
+  const dispatch = useAppDispatch()
+  const myAddress = useMyAddress()
 
   const { getApiByNetwork } = useLazyConnectionsContext()
 
   const getParams = async () => {
-    if (!purchaser) return []
+    if (!purchaser || !sellerConfig) return []
+
+    const {
+      remarkProtName,
+      sellerTreasuryAccount,
+      remarkProtVersion,
+      domainHostChain,
+      sellerToken: { name: tokenName },
+    } = sellerConfig
 
     const api = await getApiByNetwork(domainsNetwork)
 
     if (!api) return []
 
-    const transferTx = api.tx.balances.transfer(
-      treasuryAccount,
-      validDomainPrice,
-    )
+    const transferTx = api.tx.balances.transfer(sellerTreasuryAccount, validDomainPrice)
+
+    SocialRemark.setConfig({ protNames: [remarkProtName] })
 
-    SocialRemark.setConfig({ protNames: [ testRemarkTitle ] })
+    const destination = getKeyName(domainHostChain)
+
+    if (!destination) return []
 
     const regRmrkMsg: SubSclSource<'DMN_REG'> = {
-      protName: testRemarkTitle,
+      protName: remarkProtName,
       action: 'DMN_REG',
-      version: '0.1',
+      version: remarkProtVersion as SocialRemarkMessageVersion,
+      destination,
       content: {
         opId: `${transferTx.hash.toHex()}-${randomAsNumber()}`,
-        domainName: domain.id,
+        domainName,
         target: recipient,
-        token: 'ROC',
+        token: tokenName,
       },
     }
 
     const remarkTx = api.tx.system.remark(new SocialRemark().fromSource(regRmrkMsg).toMessage())
 
-    return [ [ transferTx, remarkTx ] ]
+    return [[transferTx, remarkTx]]
   }
 
   const onSuccess = () => {
@@ -60,6 +83,16 @@ const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) =
     console.log('Extrinsic failed')
   }
 
+  const onClick = async () => {
+    if(!sellerConfig) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    const result = await createPendingOrder(purchaser, domainName, sellerApiAuthTokenManager)
+    console.log(result)
+    dispatch(fetchPendingOrdersByAccount({ id: myAddress || '', reload: true }))
+  }
+
   return (
     <LazyTxButton
       block
@@ -72,10 +105,11 @@ const BuyByDotTxButton = ({ domain, className, close }: BuyByDotTxButtonProps) =
       params={getParams}
       onSuccess={onSuccess}
       onFailed={onFailed}
+      onClick={() => onClick()}
       label={'Register'}
       className={className}
     />
   )
 }
 
-export default BuyByDotTxButton
\ No newline at end of file
+export default BuyByDotTxButton
diff --git a/src/components/domains/dot-seller/config.ts b/src/components/domains/dot-seller/config.ts
index cbf6d040f..54c61da36 100644
--- a/src/components/domains/dot-seller/config.ts
+++ b/src/components/domains/dot-seller/config.ts
@@ -1,15 +1,10 @@
 import BN from 'bn.js'
-import { SocialRemarkMessageProtocolName } from '@subsocial/utils'
 import { GraphQLClient } from 'graphql-request'
 
 export const validDomainPrice = new BN('100000000') // 0.01
 
-export const testRemarkTitle: SocialRemarkMessageProtocolName = 'social_t_0'
-
 export const domainsNetwork = 'rococo'
 
-export const treasuryAccount = '3qjCbqfT6CyiYVVrwvr3VeYTCX1X5VY2v3WJ2K9YW5znP27B'
-
 export const xSellerSquid = 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql'
 
 export const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid)
\ No newline at end of file
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index 804a7d8aa..66436fef6 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -25,3 +25,30 @@ export const PENDING_ORDERS_BY_ACCOUNT = gql`
     }
   }
 `
+
+export const SELLER_CONFIG = gql`
+ query getSellerConfig {
+  sellerConfigInfo {
+    dmnRegPendingOrderExpTime
+    domainHostChain
+    domainHostChainPrefix
+    domainRegistrationPriceFixed
+    remarkProtName
+    remarkProtVersion
+    sellerApiAuthTokenManager
+    sellerChain
+    sellerChainPrefix
+    sellerTreasuryAccount
+    sellerToken {
+      decimal
+      name
+    }
+  }
+}
+`
+
+export const CREATE_PENDING_ORDER = gql`
+  mutation CreatePendingOrder($domain: String!, $account: String!) {
+    createPendingOrder(account: $account, domain: $domain)
+  }
+`
diff --git a/src/components/domains/index.module.sass b/src/components/domains/index.module.sass
index 44e9e0386..8a5e7058b 100644
--- a/src/components/domains/index.module.sass
+++ b/src/components/domains/index.module.sass
@@ -162,3 +162,6 @@ $font_size: 1.1rem
 
   p
     color: $color_muted
+
+.PendingTag
+  background-color: transparent !important
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index 7839e1836..12efc56e3 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -8,6 +8,8 @@ import { useMyDomains } from 'src/rtk/features/domains/domainHooks'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import { PageContent } from '../main/PageWrapper'
 // import Embed from '../posts/embed/Embed'
+import { useFetchDomainPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useFetchSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import useSubstrate from '../substrate/useSubstrate'
 import { Loading } from '../utils'
@@ -19,9 +21,8 @@ import { FaqSection } from './Faq'
 import styles from './index.module.sass'
 import { ManageDomainProvider } from './manage/ManageDomainProvider'
 import { MyDomainsCard } from './MyDomains'
-import { DomainDetails, UnamesLearnMoreLink } from './utils'
-import { useFetchDomainPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import PendingOrdersSection from './pendingOrders'
+import { DomainDetails, UnamesLearnMoreLink } from './utils'
 
 const tabs = ['register', 'manage'] as const
 type TabKey = typeof tabs[number]
@@ -36,7 +37,7 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
   const onSearchDomain = async (domain?: string) => {
     if (!domain) return
     const data = await subsocial.findDomain(domain)
-
+    
     setDomain({
       id: domain,
       ...data,
@@ -48,7 +49,7 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
     const hash = window.location.hash.substring(1)
     if ((tabs as unknown as string[]).includes(hash)) setActiveTab(hash as TabKey)
   }, [])
-  
+
   useEffect(() => {
     if (!myAddress) setActiveTab('register')
   }, [myAddress])
@@ -73,80 +74,79 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
   }
 
   return (
-    <ManageDomainProvider promoCode={promoCode}>
-      <Tabs className={'mt-3'} onChange={changeTab} activeKey={activeTab}>
-        <Tabs.TabPane className='fontSizeNormal' tab='Register' key={getTabKey('register')}>
-          <div className='mt-3'>
-            {canRegisterAccount ? (
-              <div>
-                {promoCode &&
-                  (promoCode !== 'invalid' ? (
-                    <DfAlert
-                      title='Free domain'
-                      desc='Congratulations, you can get a free domain! Just enter the desired domain name and click "Search".'
-                      icon={<div style={{ lineHeight: '1rem' }}>🎁</div>}
-                      alertType='info'
-                    />
-                  ) : (
-                    <DfAlert
-                      title='Promo code has been used already'
-                      desc='Someone has used this promo code, please destroy it and ask the Subsocial team for a new one.'
-                      icon={<div style={{ lineHeight: '1rem' }}>🥺</div>}
-                      alertType='warning'
-                    />
-                  ))}
-                <DomainForm onChange={onSearchDomain} />
-                {domain && <EligibleDomainsSection domain={domain} />}
-              </div>
-            ) : (
-              <DfAlert
-                showDefaultIcon
-                alertType='warning'
-                title={`Accounts are limited to ${maxPromoDomainsPerAccount} domains per account for now.`}
-                desc={
-                  <span>
-                    We will enable buying more domains in the future.{' '}
-                    <a
-                      href='#manage'
-                      onClick={() => setActiveTab('manage')}
-                      className='font-weight-bold'
-                    >
-                      Open my domains
-                    </a>
-                  </span>
-                }
-              />
-            )}
+    <Tabs className={'mt-3'} onChange={changeTab} activeKey={activeTab}>
+      <Tabs.TabPane className='fontSizeNormal' tab='Register' key={getTabKey('register')}>
+        <div className='mt-3'>
+          {canRegisterAccount ? (
+            <div>
+              {promoCode &&
+                (promoCode !== 'invalid' ? (
+                  <DfAlert
+                    title='Free domain'
+                    desc='Congratulations, you can get a free domain! Just enter the desired domain name and click "Search".'
+                    icon={<div style={{ lineHeight: '1rem' }}>🎁</div>}
+                    alertType='info'
+                  />
+                ) : (
+                  <DfAlert
+                    title='Promo code has been used already'
+                    desc='Someone has used this promo code, please destroy it and ask the Subsocial team for a new one.'
+                    icon={<div style={{ lineHeight: '1rem' }}>🥺</div>}
+                    alertType='warning'
+                  />
+                ))}
+              <DomainForm onChange={onSearchDomain} />
+              {domain && <EligibleDomainsSection domain={domain} />}
+            </div>
+          ) : (
+            <DfAlert
+              showDefaultIcon
+              alertType='warning'
+              title={`Accounts are limited to ${maxPromoDomainsPerAccount} domains per account for now.`}
+              desc={
+                <span>
+                  We will enable buying more domains in the future.{' '}
+                  <a
+                    href='#manage'
+                    onClick={() => setActiveTab('manage')}
+                    className='font-weight-bold'
+                  >
+                    Open my domains
+                  </a>
+                </span>
+              }
+            />
+          )}
+        </div>
+      </Tabs.TabPane>
+      {myAddress && myDomainsCount !== 0 && (
+        <Tabs.TabPane
+          disabled={!myAddress || myDomainsCount === 0}
+          className='fontSizeNormal'
+          tab={getTabTitle('Manage', myDomainsCount)}
+          key={getTabKey('manage')}
+        >
+          <div className={clsx(styles.MyDomainsContainer)}>
+            <MyDomainsCard />
+          </div>
+          <div className='d-flex justify-content-center mt-4'>
+            <Button
+              onClick={() => changeTab('register')}
+              icon={<ShoppingCartOutlined />}
+              type='primary'
+            >
+              Buy New Username
+            </Button>
           </div>
         </Tabs.TabPane>
-        {myAddress && myDomainsCount !== 0 && (
-          <Tabs.TabPane
-            disabled={!myAddress || myDomainsCount === 0}
-            className='fontSizeNormal'
-            tab={getTabTitle('Manage', myDomainsCount)}
-            key={getTabKey('manage')}
-          >
-            <div className={clsx(styles.MyDomainsContainer)}>
-              <MyDomainsCard />
-            </div>
-            <div className='d-flex justify-content-center mt-4'>
-              <Button
-                onClick={() => changeTab('register')}
-                icon={<ShoppingCartOutlined />}
-                type='primary'
-              >
-                Buy New Username
-              </Button>
-            </div>
-          </Tabs.TabPane>
-        )}
-      </Tabs>
-    </ManageDomainProvider>
+      )}
+    </Tabs>
   )
 }
 
 export const DomainRegisterPage = ({ promoCode }: DomainServerProps) => {
   useFetchDomainPendingOrdersByAccount()
+  useFetchSellerConfig()
   const isMobile = useIsMobileWidthOrDevice()
 
   const rightPanelContent = (
@@ -160,32 +160,34 @@ export const DomainRegisterPage = ({ promoCode }: DomainServerProps) => {
   )
 
   return (
-    <PageContent
-      meta={{
-        title: 'Register Your Subsocial Username',
-        desc: 'Subsocial usernames is a decentralized naming system for Polkadot and Kusama ecosystems. Register your .sub username, etc.',
-        image: '/images/dotsama-domains-preview.jpg',
-      }}
-      rightPanel={
-        <div style={{ width: '380px' }} className='d-flex flex-column align-items-stretch'>
-          {rightPanelContent}
-        </div>
-      }
-    >
-      <CardWithContent
-        title='Subsocial Usernames'
-        subtitle={
-          <span>
-            Here you can register a .sub username. Your username will be function as a
-            human-readable name for your account.{' '}
-            <UnamesLearnMoreLink className='font-weight-bold' />
-          </span>
+    <ManageDomainProvider promoCode={promoCode}>
+      <PageContent
+        meta={{
+          title: 'Register Your Subsocial Username',
+          desc: 'Subsocial usernames is a decentralized naming system for Polkadot and Kusama ecosystems. Register your .sub username, etc.',
+          image: '/images/dotsama-domains-preview.jpg',
+        }}
+        rightPanel={
+          <div style={{ width: '380px' }} className='d-flex flex-column align-items-stretch'>
+            {rightPanelContent}
+          </div>
         }
       >
-        <DomainMarketSection promoCode={promoCode} />
-      </CardWithContent>
-      <div className='mt-4'>{isMobile ? rightPanelContent : null}</div>
-    </PageContent>
+        <CardWithContent
+          title='Subsocial Usernames'
+          subtitle={
+            <span>
+              Here you can register a .sub username. Your username will be function as a
+              human-readable name for your account.{' '}
+              <UnamesLearnMoreLink className='font-weight-bold' />
+            </span>
+          }
+        >
+          <DomainMarketSection promoCode={promoCode} />
+        </CardWithContent>
+        <div className='mt-4'>{isMobile ? rightPanelContent : null}</div>
+      </PageContent>
+    </ManageDomainProvider>
   )
 }
 
diff --git a/src/components/domains/pendingOrders/Index.module.sass b/src/components/domains/pendingOrders/Index.module.sass
index b6b900948..d6805f5ae 100644
--- a/src/components/domains/pendingOrders/Index.module.sass
+++ b/src/components/domains/pendingOrders/Index.module.sass
@@ -1,3 +1,10 @@
 @import 'src/styles/subsocial-vars.scss'
 
+.TimeTooltip
 
+  svg
+    margin-left: $space_tiny
+    font-size: 14px
+
+    path
+      color: $color_muted
\ No newline at end of file
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index d6ea1cf8b..c82ece59e 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -1,27 +1,40 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
-import { isEmptyArray } from '@subsocial/utils'
-import { Button, Tooltip } from 'antd'
+import { SubDate, isEmptyArray } from '@subsocial/utils'
+import { Space, Tooltip } from 'antd'
 import { useMemo } from 'react'
 import CardWithContent from 'src/components/utils/cards/CardWithContent'
 import { useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { MutedDiv } from '../../utils/MutedText'
+import styles from './Index.module.sass'
+import dayjs from 'dayjs'
+import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import BuyByDotButton from '../dot-seller/BuyByDotModal'
 
 type PendingDomainProps = {
   pendingDomain: PendingDomainEntity
 }
 
 const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
+  const sellerConfig = useSelectSellerConfig()
+
   const { domain, timestamp } = pendingDomain
+  const { dmnRegPendingOrderExpTime } = sellerConfig || {}
+
+  const expiresAt = SubDate.formatDate((dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0)))
+
   return (
     <div className='d-flex align-items-center justify-content-between'>
-      <div className='d-flex align-items-center'>
+      <div className='d-flex align-items-center mr-2'>
         <div className='mlr-2'>{domain}</div>
-        <Tooltip title={'Your domain reservation expires in 7 minutes'}>
+        <Tooltip
+          title={`Your domain reservation expires ${expiresAt}`}
+          className={styles.TimeTooltip}
+        >
           <InfoCircleOutlined />
         </Tooltip>
       </div>
-      <Button type='primary'>Continue</Button>
+      <BuyByDotButton domainName={domain} label={'Continue'} withPrice={false} />
     </div>
   )
 }
@@ -30,16 +43,22 @@ const PendingOrdersSection = () => {
   const pendingOrders = useSelectPendingOrdersByAccount()
 
   const pendingDomains = useMemo(() => {
-    return pendingOrders.map((pendingDomain, i) => (
+    const orders = pendingOrders.map((pendingDomain, i) => (
       <PendingDomain key={i} pendingDomain={pendingDomain} />
     ))
+
+    return (
+      <Space direction='vertical' size={16}>
+        {orders}
+      </Space>
+    )
   }, [pendingOrders.length])
 
   if (!pendingOrders || isEmptyArray(pendingOrders)) return null
 
   return (
-    <CardWithContent title={'Pending'}>
-      <MutedDiv>
+    <CardWithContent title={'Pending'} className='mb-4'>
+      <MutedDiv className='mb-3'>
         You have a pending order to buy a domain. It will be canceled automatically after 10
         minutes.
       </MutedDiv>
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index 5bedab387..fb474e265 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -95,3 +95,10 @@ export const registerDomainWithPromoCode = async ({
   })
   return res?.data
 }
+
+export const createPendingOrder = async (purchaser: string, domain: string, sellerApiAuthTokenManager: string) => {
+  const res = await axios.post('/api/pending-order/create', { purchaser, domain, sellerApiAuthTokenManager })
+  const data = res.data 
+  if (!data.success) throw new Error(data.errors)
+  return data
+}
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
new file mode 100644
index 000000000..3b9e59b4c
--- /dev/null
+++ b/src/pages/api/pending-order/create.ts
@@ -0,0 +1,61 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import { GraphQLClient } from 'graphql-request'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { xSellerSquid } from 'src/components/domains/dot-seller/config'
+import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+
+dayjs.extend(utc)
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { purchaser, domain, sellerApiAuthTokenManager } = req.body
+  const nonce = new Uint8Array(24)
+  nonce[0] = 111
+
+  if (req.method !== 'POST') return res.status(404).end()
+
+  try {
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed) + 'asdasd',
+      'Client-Id': clientId,
+    }
+
+    const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid, {
+      headers: requestHeaders
+    })
+
+    await sellerSquidGraphQlClient.request(
+      CREATE_PENDING_ORDER,
+      { domain, account: purchaser },
+    )
+
+    res.status(200).send({ success: true })
+  } catch (e: any) {
+    res.status(e.response.status).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+  }
+}
diff --git a/src/rtk/app/rootReducer.ts b/src/rtk/app/rootReducer.ts
index bda6c86b1..b8d6b5f34 100644
--- a/src/rtk/app/rootReducer.ts
+++ b/src/rtk/app/rootReducer.ts
@@ -20,6 +20,7 @@ import ownSpaceIds from '../features/spaceIds/ownSpaceIdsSlice'
 import spaceIdsWithRolesByAccount from '../features/spaceIds/spaceIdsWithRolesByAccountSlice'
 import spaces from '../features/spaces/spacesSlice'
 import ordersById from '../features/domainPendingOrders/pendingOrdersSlice'
+import sellerConfig from '../features/sellerConfig/sellerConfigSlice'
 
 const rootReducer = combineReducers({
   contents,
@@ -42,7 +43,8 @@ const rootReducer = combineReducers({
   topLevelDomains,
   chainsInfo,
   onBoarding,
-  ordersById
+  ordersById,
+  sellerConfig
 })
 
 export type RootState = ReturnType<typeof rootReducer>
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index d88a67125..987b74057 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -1,8 +1,14 @@
-import { useFetch } from 'src/rtk/app/hooksCommon'
-import { fetchPendingOrdersByAccount, fetchPendingOrdersByIds, selectPendingOrdersByAccount, selectPendingOrdersByIds } from './pendingOrdersSlice'
 import { EntityId } from '@reduxjs/toolkit'
-import { useAppSelector } from 'src/rtk/app/store'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+import { useFetch } from 'src/rtk/app/hooksCommon'
+import { useAppSelector } from 'src/rtk/app/store'
+import {
+  fetchPendingOrdersByAccount,
+  fetchPendingOrdersByIds,
+  selectPendingOrdersByAccount,
+  selectPendingOrdersById,
+  selectPendingOrdersByIds,
+} from './pendingOrdersSlice'
 
 export const useFetchDomainPendingOrdersByIds = (domains: string[]) => {
   const ids = domains as EntityId[]
@@ -16,11 +22,15 @@ export const useFetchDomainPendingOrdersByAccount = () => {
   useFetch(fetchPendingOrdersByAccount, { id: myAddress || '' })
 }
 
+export const useSelectPendingOrderById = (id: string) => {
+  return useAppSelector(state => selectPendingOrdersById(state, id))
+}
+
 export const useSelectPendingOrdersByIds = (ids: string[]) => {
-  return useAppSelector((state) => selectPendingOrdersByIds(state, ids))
+  return useAppSelector(state => selectPendingOrdersByIds(state, ids))
 }
 
 export const useSelectPendingOrdersByAccount = () => {
   const myAddress = useMyAddress()
-  return useAppSelector((state) => selectPendingOrdersByAccount(state, myAddress))
+  return useAppSelector(state => selectPendingOrdersByAccount(state, myAddress))
 }
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index fff2fb302..05a36671e 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -1,12 +1,15 @@
-import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
-import { isDef } from '@subsocial/utils'
+import { EntityId, createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { isDef, isEmptyArray } from '@subsocial/utils'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import {
   PENDING_ORDERS_BY_ACCOUNT,
   PENDING_ORDERS_BY_IDS,
 } from 'src/components/domains/dot-seller/seller-queries'
-import { FetchManyArgs, FetchOneArgs, ThunkApiConfig } from 'src/rtk/app/helpers'
+import { ThunkApiConfig } from 'src/rtk/app/helpers'
 import { RootState } from 'src/rtk/app/rootReducer'
+import { encodeAddress } from '@polkadot/util-crypto' 
+import { GenericAccountId } from '@polkadot/types'
+import registry from '@subsocial/api/utils/registry'
 
 export type PendingDomainEntity = {
   id: string
@@ -24,12 +27,32 @@ const adapter = createEntityAdapter<PendingDomainEntity>()
 
 const selectors = adapter.getSelectors<RootState>(state => state.ordersById)
 
-type Args = {}
+type CommonFetchProps = {
+  reload?: boolean
+}
+
+type FetchOneWithoutApi = CommonFetchProps & {
+  id: EntityId
+}
+
+type FetchManyWithoutApi = CommonFetchProps & {
+  ids: EntityId[]
+}
 
 const selectEntitiesByIds = (state: RootState, ids: string[]) => {
   return ids.map(id => selectors.selectById(state, id)).filter(isDef)
 }
 
+export const selectPendingOrdersById = (state: RootState, id: string) => {
+  const keys = selectors.selectIds(state)
+
+  const entityId = keys.find(key => key.toString().includes(id))
+
+  if(!entityId) return undefined
+
+  return selectors.selectById(state, entityId)
+}
+
 export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
   const keys = selectors.selectIds(state)
 
@@ -41,15 +64,16 @@ export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
 export const selectPendingOrdersByAccount = (state: RootState, address?: string) => {
   if (!address) return []
   const keys = selectors.selectIds(state)
+  const genericAddress = new GenericAccountId(registry, address).toString()
 
-  const entityIds = keys.filter(key => key.toString().includes(address))
+  const entityIds = keys.filter(key => key.toString().includes(genericAddress))
 
   return selectEntitiesByIds(state, entityIds as string[])
 }
 
 export const fetchPendingOrdersByIds = createAsyncThunk<
   MaybeEntity[],
-  FetchManyArgs<Args>,
+  FetchManyWithoutApi,
   ThunkApiConfig
 >(`${sliceName}/fetchManyByIds`, async ({ ids, reload }, { getState }): Promise<MaybeEntity[]> => {
   const entityIds = ids as string[]
@@ -59,49 +83,58 @@ export const fetchPendingOrdersByIds = createAsyncThunk<
     return []
   }
 
-  const result: Omit<PendingDomainEntity, 'domain'>[] = await sellerSquidGraphQlClient.request(
+  const result: any = await sellerSquidGraphQlClient.request(
     PENDING_ORDERS_BY_IDS,
     { ids },
   )
 
-  return result.map(item => {
+  const orders = result.getPendingOrdersByIds.orders as Omit<PendingDomainEntity, 'domain'>[]
+
+  return orders.map(item => {
     const { id, account } = item
 
+    const subsocialAddress: string = new GenericAccountId(registry, encodeAddress(account)).toString()
+    
     return {
       ...item,
-      id: `${id}-${account}`,
+      id: `${id}-${subsocialAddress}`,
       domain: id,
-      account,
+      account: subsocialAddress,
     }
   })
 })
 
 export const fetchPendingOrdersByAccount = createAsyncThunk<
   MaybeEntity[],
-  FetchOneArgs<Args>,
+  FetchOneWithoutApi,
   ThunkApiConfig
 >(
   `${sliceName}/fetchManyByAccount`,
   async ({ id: account, reload }, { getState }): Promise<MaybeEntity[]> => {
     const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), account.toString())
 
-    if (!reload && knownDomainsPendingOrders) {
+    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
       return []
     }
 
-    const result: Omit<PendingDomainEntity, 'domain'>[] = await sellerSquidGraphQlClient.request(
+    const result: any = await sellerSquidGraphQlClient.request(
       PENDING_ORDERS_BY_ACCOUNT,
       { account },
     )
 
-    return result.map(item => {
+    const orders = result.getPendingOrdersByAccount.orders as Omit<PendingDomainEntity, 'domain'>[]
+
+
+    return orders.map(item => {
       const { id, account } = item
 
+      const subsocialAddress: string = new GenericAccountId(registry, encodeAddress(account)).toString()
+      
       return {
         ...item,
-        id: `${id}-${account}`,
+        id: `${id}-${subsocialAddress}`,
         domain: id,
-        account,
+        account: subsocialAddress,
       }
     })
   },
diff --git a/src/rtk/features/sellerConfig/sellerConfigHooks.ts b/src/rtk/features/sellerConfig/sellerConfigHooks.ts
new file mode 100644
index 000000000..e1137df02
--- /dev/null
+++ b/src/rtk/features/sellerConfig/sellerConfigHooks.ts
@@ -0,0 +1,11 @@
+import { useFetch } from 'src/rtk/app/hooksCommon'
+import { fetchSellerConfig, selectSellerConfig } from './sellerConfigSlice'
+import { useAppSelector } from 'src/rtk/app/store'
+
+export const useFetchSellerConfig = () => {
+  useFetch(fetchSellerConfig, { reload: false })
+}
+
+export const useSelectSellerConfig = () => {
+  return useAppSelector((state) => selectSellerConfig(state))
+}
diff --git a/src/rtk/features/sellerConfig/sellerConfigSlice.ts b/src/rtk/features/sellerConfig/sellerConfigSlice.ts
new file mode 100644
index 000000000..8d0d3e33d
--- /dev/null
+++ b/src/rtk/features/sellerConfig/sellerConfigSlice.ts
@@ -0,0 +1,76 @@
+import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { isEmptyArray } from '@subsocial/utils'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import { SELLER_CONFIG } from 'src/components/domains/dot-seller/seller-queries'
+import { CommonFetchProps, ThunkApiConfig } from 'src/rtk/app/helpers'
+import { RootState } from 'src/rtk/app/rootReducer'
+
+export type SellerConfigEntity = {
+  id: string
+  dmnRegPendingOrderExpTime: number
+  domainHostChain: string
+  domainHostChainPrefix: string
+  domainRegistrationPriceFixed: string
+  remarkProtName: string
+  remarkProtVersion: string
+  sellerApiAuthTokenManager: string
+  sellerChain: string
+  sellerChainPrefix: 42
+  sellerTreasuryAccount: string
+  sellerToken: {
+    decimal: number
+    name: string
+  }
+}
+
+const sliceName = 'sellerConfig'
+
+export const sellerConfigId = 'config'
+
+type MaybeEntity = SellerConfigEntity | undefined
+
+const adapter = createEntityAdapter<SellerConfigEntity>()
+
+const selectors = adapter.getSelectors<RootState>(state => state.sellerConfig)
+
+export const selectSellerConfig = (state: RootState): SellerConfigEntity | undefined => {
+  return selectors.selectById(state, sellerConfigId)
+}
+
+export const fetchSellerConfig = createAsyncThunk<
+  MaybeEntity,
+  CommonFetchProps,
+  ThunkApiConfig
+>(
+  `${sliceName}/fetchOne`,
+  async ({ reload }, { getState }): Promise<MaybeEntity> => {
+    const knownDomainsPendingOrders = selectSellerConfig(getState())
+
+    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
+      return undefined
+    }
+
+    const result: any = await sellerSquidGraphQlClient.request(SELLER_CONFIG)
+
+    return {
+      id: sellerConfigId,
+      ...result.sellerConfigInfo
+    }
+  },
+)
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: adapter.getInitialState(),
+  reducers: {
+    // upsertOwnDomains: adapter.upsertOne,
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(fetchSellerConfig.fulfilled, (state, { payload }) => {
+        if (payload) adapter.upsertOne(state, payload)
+      })
+  },
+})
+
+export default slice.reducer

From 9d0b4a5764b23d28d5876363072bc33b741a6f9a Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 14 Apr 2023 14:32:24 +0300
Subject: [PATCH 09/54] Add notification when token is not valid

---
 .../domains/dot-seller/BuyByDotTxButton.tsx     | 12 ++++++++++--
 src/components/donate/LazyTxButton.tsx          |  6 ++++--
 src/components/utils/OffchainUtils.ts           | 17 ++++++++++++-----
 src/pages/api/pending-order/create.ts           |  2 +-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index b3101246c..2c015a4a7 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -14,6 +14,7 @@ import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrder
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import { domainsNetwork, validDomainPrice } from './config'
+import { showErrorMessage } from 'src/components/utils/Message'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -89,8 +90,15 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
     const { sellerApiAuthTokenManager } = sellerConfig
 
     const result = await createPendingOrder(purchaser, domainName, sellerApiAuthTokenManager)
-    console.log(result)
-    dispatch(fetchPendingOrdersByAccount({ id: myAddress || '', reload: true }))
+
+    if(result?.success) {
+      dispatch(fetchPendingOrdersByAccount({ id: myAddress || '', reload: true }))
+      return false
+    } else {
+      showErrorMessage(result?.errors)
+
+      return true
+    }
   }
 
   return (
diff --git a/src/components/donate/LazyTxButton.tsx b/src/components/donate/LazyTxButton.tsx
index 6c7d1e150..2d5490552 100644
--- a/src/components/donate/LazyTxButton.tsx
+++ b/src/components/donate/LazyTxButton.tsx
@@ -48,7 +48,7 @@ export type TxButtonProps = BaseTxButtonProps & {
   title?: string
   unsigned?: boolean
   onValidate?: () => boolean | Promise<boolean>
-  onClick?: () => void
+  onClick?: () => Promise<boolean | undefined>
   onSuccess?: TxCallback
   onFailed?: TxFailedCallback
   successMessage?: SuccessMessage
@@ -238,7 +238,9 @@ function LazyTxButton({
       return
     }
 
-    isFunction(onClick) && onClick()
+    const preventTransaction = await onClick?.()
+
+    if(preventTransaction === true) return
 
     const txType = unsigned ? 'unsigned' : 'signed'
     log.debug(`Sending ${txType} tx...`)
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index fb474e265..0cd092da9 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -96,9 +96,16 @@ export const registerDomainWithPromoCode = async ({
   return res?.data
 }
 
-export const createPendingOrder = async (purchaser: string, domain: string, sellerApiAuthTokenManager: string) => {
-  const res = await axios.post('/api/pending-order/create', { purchaser, domain, sellerApiAuthTokenManager })
-  const data = res.data 
-  if (!data.success) throw new Error(data.errors)
-  return data
+export const createPendingOrder = async (
+  purchaser: string,
+  domain: string,
+  sellerApiAuthTokenManager: string,
+) => {
+  const res = await axios.post('/api/pending-order/create', {
+    purchaser,
+    domain,
+    sellerApiAuthTokenManager,
+  })
+
+  return res.data
 }
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 3b9e59b4c..f7987b0ea 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -53,7 +53,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     res.status(200).send({ success: true })
   } catch (e: any) {
-    res.status(e.response.status).send({
+    res.status(200).send({
       success: false,
       errors: e.response.errors?.[0].message,
     })

From 0e813022776c0e372f0f4e2f3277f655488fe6d7 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 14 Apr 2023 14:32:43 +0300
Subject: [PATCH 10/54] Fix auth token

---
 src/pages/api/pending-order/create.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index f7987b0ea..44b9f7cf6 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -38,7 +38,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     )
 
     const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed) + 'asdasd',
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
       'Client-Id': clientId,
     }
 

From 6d371bf9d3a906009abd4ab8c71c4797e706fac2 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 16 Apr 2023 16:52:45 +0300
Subject: [PATCH 11/54] Fetch new domains when transaction finalized

---
 .../domains/EligibleDomainsSection.tsx        |   6 +-
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  16 +--
 .../domains/dot-seller/seller-queries.ts      |  52 ++++++---
 .../domains/manage/ManageDomainProvider.tsx   |   7 +-
 src/components/domains/utils.tsx              |  52 +++++++++
 src/pages/api/pending-order/create.ts         |   5 +-
 src/rtk/app/rootReducer.ts                    |   4 +-
 .../features/domains/domainsByOwnerSlice.ts   |   3 +
 .../processingRegistratoinOrdersSlice.ts      | 106 ++++++++++++++++++
 9 files changed, 223 insertions(+), 28 deletions(-)
 create mode 100644 src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 47068bebc..8ff491a20 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,4 +1,4 @@
-import { isFunction } from '@polkadot/util'
+import { isFunction } from '@polkadot/util';
 import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
 import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import BN from 'bn.js'
@@ -27,7 +27,7 @@ import ClaimFreeDomainModal from './ClaimFreeDomainModal'
 import BuyByDotButton from './dot-seller/BuyByDotModal'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
-import { DomainDetails, ResultContainer } from './utils'
+import { DomainDetails, ResultContainer, useFetchNewDomains } from './utils'
 
 const log = newLogger('DD')
 
@@ -362,6 +362,7 @@ export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
   const domains = useBuildDomainsWithTldByDomain(domain)
   useFetchDomainPendingOrdersByIds(domains)
   const { isReserved, loading: checkingWord } = useIsReservedWord(domain.id)
+  useFetchNewDomains(domain.id)
 
   if (isEmptyArray(domains)) return null
 
@@ -369,6 +370,7 @@ export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
 
   if (isReserved) return <ReservedDomainCard domain={domain.id} />
 
+
   return (
     <div className='GapBig d-flex flex-column mt-4'>
       <ChooseDomain domain={domain} />
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index 2c015a4a7..93cc08d1f 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -8,13 +8,13 @@ import {
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import LazyTxButton from 'src/components/donate/LazyTxButton'
 import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
+import { showErrorMessage } from 'src/components/utils/Message'
 import { createPendingOrder } from 'src/components/utils/OffchainUtils'
 import { useAppDispatch } from 'src/rtk/app/store'
 import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import { domainsNetwork, validDomainPrice } from './config'
-import { showErrorMessage } from 'src/components/utils/Message'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -27,11 +27,10 @@ function getKeyName(value: string) {
 }
 
 const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
-  const { recipient, purchaser } = useManageDomainContext()
+  const { recipient, purchaser, setIsFetchNewDomains } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
-
   const { getApiByNetwork } = useLazyConnectionsContext()
 
   const getParams = async () => {
@@ -75,8 +74,11 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
     return [[transferTx, remarkTx]]
   }
 
-  const onSuccess = () => {
-    console.log('Extrinsic Success')
+  const onSuccess = async () => {
+    if (!myAddress) return
+
+    setIsFetchNewDomains(true)
+
     close()
   }
 
@@ -85,13 +87,13 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
   }
 
   const onClick = async () => {
-    if(!sellerConfig) return
+    if (!sellerConfig) return
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
     const result = await createPendingOrder(purchaser, domainName, sellerApiAuthTokenManager)
 
-    if(result?.success) {
+    if (result?.success) {
       dispatch(fetchPendingOrdersByAccount({ id: myAddress || '', reload: true }))
       return false
     } else {
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index 66436fef6..90c744f4d 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -27,24 +27,44 @@ export const PENDING_ORDERS_BY_ACCOUNT = gql`
 `
 
 export const SELLER_CONFIG = gql`
- query getSellerConfig {
-  sellerConfigInfo {
-    dmnRegPendingOrderExpTime
-    domainHostChain
-    domainHostChainPrefix
-    domainRegistrationPriceFixed
-    remarkProtName
-    remarkProtVersion
-    sellerApiAuthTokenManager
-    sellerChain
-    sellerChainPrefix
-    sellerTreasuryAccount
-    sellerToken {
-      decimal
-      name
+  query getSellerConfig {
+    sellerConfigInfo {
+      dmnRegPendingOrderExpTime
+      domainHostChain
+      domainHostChainPrefix
+      domainRegistrationPriceFixed
+      remarkProtName
+      remarkProtVersion
+      sellerApiAuthTokenManager
+      sellerChain
+      sellerChainPrefix
+      sellerTreasuryAccount
+      sellerToken {
+        decimal
+        name
+      }
+    }
+  }
+`
+
+export const PROCESSING_REGISTRATION_ORDERS = gql`
+  query getRegistationOrdersByDomain($domain: String, $recipient: Stirng) {
+    domainRegistrationOrders(
+      limit: 10
+      where: {
+        domain: { id_eq: $domain }
+        status_eq: Processing
+        target: { id_eq: $recipient }
+      }
+    ) {
+      id
+      status
+      refundStatus
+      target {
+        id
+      }
     }
   }
-}
 `
 
 export const CREATE_PENDING_ORDER = gql`
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index bfadb5f74..b172a26b3 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -17,6 +17,8 @@ type ManageDomainProviderState = {
   setRecipient: (recipient: string) => void
   purchaser: string
   setPurchaser: (recipient: string) => void
+  isFetchNewDomains: boolean
+  setIsFetchNewDomains: (isFetchNewDomains: boolean) => void
 }
 
 type Variant = 'SUB' | 'DOT'
@@ -31,6 +33,7 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [ variant, setVariant ] = useState<Variant>('SUB')
   const [ recipient, setRecipient ] = useState<string>(myAddress || '')
   const [ purchaser, setPurchaser ] = useState<string>(myAddress || '')
+  const [ isFetchNewDomains, setIsFetchNewDomains ] = useState(false)
 
   const router = useRouter()
   const [activePromoCode, setActivePromoCode] = useState(promoCode)
@@ -63,7 +66,9 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
     promoCode: activePromoCode, 
     clearPromoCode,
     purchaser,
-    setPurchaser
+    setPurchaser,
+    isFetchNewDomains,
+    setIsFetchNewDomains
   }
 
   return (
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index b096fb6a9..67cba003e 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -10,6 +10,13 @@ import { AnyAccountId } from 'src/types'
 import { slugifyHandle } from '../urls/helpers'
 import { useAddClassNameToRootElement } from '../utils'
 import styles from './index.module.sass'
+import useSubsocialEffect from '../api/useSubsocialEffect'
+import { useMyAddress } from '../auth/MyAccountsContext'
+import { useManageDomainContext } from './manage/ManageDomainProvider'
+import { LoadingOutlined } from '@ant-design/icons'
+import { controlledMessage } from '../utils/Message'
+import { u8aToString } from '@polkadot/util';
+import { useCreateReloadDomain, useCreateReloadMyDomains } from 'src/rtk/features/domains/domainHooks'
 
 const { resolvedDomain } = config
 
@@ -91,3 +98,48 @@ export const UnamesLearnMoreLink = ({ className, ...props }: HTMLProps<HTMLAncho
     </a>
   )
 }
+
+const waitMessage = controlledMessage({
+  message: 'Waiting for domain registration',
+  type: 'info',
+  duration: 0,
+  icon: <LoadingOutlined />,
+})
+
+export const useFetchNewDomains = (domainName: string) => {
+  const myAddress = useMyAddress()
+  const { setIsFetchNewDomains, isFetchNewDomains, openManageModal } = useManageDomainContext()
+  const reloadMyDomains = useCreateReloadMyDomains()
+  const reloadDomain = useCreateReloadDomain()
+
+  useSubsocialEffect(
+    ({ substrate }) => {
+      setIsFetchNewDomains(false)
+      if (!myAddress || !isFetchNewDomains) return
+
+      let unsub: any
+
+
+      const subscription = async () => {
+        const api = await (await substrate.api).isReady
+        waitMessage.open()
+
+        unsub = await api.query.domains.domainsByOwner(myAddress, (data: any[]) => {
+          const dataHuman = data.map((x) => u8aToString(x))
+          
+          if (dataHuman.includes(domainName)) {
+            reloadMyDomains()
+            reloadDomain(domainName)
+            waitMessage.close()
+            openManageModal('success', domainName)
+          }
+        })
+      }
+
+      subscription().catch(err => console.error(err))
+
+      return () => unsub && unsub()
+    },
+    [isFetchNewDomains, myAddress],
+  )
+}
\ No newline at end of file
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 44b9f7cf6..d5cd6079e 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -46,16 +46,19 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       headers: requestHeaders
     })
 
-    await sellerSquidGraphQlClient.request(
+    const result = await sellerSquidGraphQlClient.request(
       CREATE_PENDING_ORDER,
       { domain, account: purchaser },
     )
 
     res.status(200).send({ success: true })
+    return result
+
   } catch (e: any) {
     res.status(200).send({
       success: false,
       errors: e.response.errors?.[0].message,
     })
+    return undefined
   }
 }
diff --git a/src/rtk/app/rootReducer.ts b/src/rtk/app/rootReducer.ts
index b8d6b5f34..e77fd07f1 100644
--- a/src/rtk/app/rootReducer.ts
+++ b/src/rtk/app/rootReducer.ts
@@ -21,6 +21,7 @@ import spaceIdsWithRolesByAccount from '../features/spaceIds/spaceIdsWithRolesBy
 import spaces from '../features/spaces/spacesSlice'
 import ordersById from '../features/domainPendingOrders/pendingOrdersSlice'
 import sellerConfig from '../features/sellerConfig/sellerConfigSlice'
+import registrationOrders from '../features/processingRegistrationOrders/processingRegistratoinOrdersSlice'
 
 const rootReducer = combineReducers({
   contents,
@@ -44,7 +45,8 @@ const rootReducer = combineReducers({
   chainsInfo,
   onBoarding,
   ordersById,
-  sellerConfig
+  sellerConfig,
+  registrationOrders
 })
 
 export type RootState = ReturnType<typeof rootReducer>
diff --git a/src/rtk/features/domains/domainsByOwnerSlice.ts b/src/rtk/features/domains/domainsByOwnerSlice.ts
index 54bb15586..78571cf0d 100644
--- a/src/rtk/features/domains/domainsByOwnerSlice.ts
+++ b/src/rtk/features/domains/domainsByOwnerSlice.ts
@@ -49,12 +49,15 @@ export const fetchDomainsByOwner = createAsyncThunk<
   const myAddress = id as AccountId
   const knownDomains = selectDomainsByOwner(getState(), myAddress)
   const isKnownOwner = typeof knownDomains !== 'undefined'
+  
   if (!reload && isKnownOwner) {
     return undefined
   }
 
   const domains: Domain[] = await api.blockchain.domainsByOwner(myAddress)
 
+  console.log('New domains', domains)
+
   return {
     id: myAddress,
     domains,
diff --git a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
new file mode 100644
index 000000000..2bdbb51fd
--- /dev/null
+++ b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
@@ -0,0 +1,106 @@
+import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { isDef, isEmptyArray } from '@subsocial/utils'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import { PROCESSING_REGISTRATION_ORDERS } from 'src/components/domains/dot-seller/seller-queries'
+import { ThunkApiConfig } from 'src/rtk/app/helpers'
+import { RootState } from 'src/rtk/app/rootReducer'
+
+export type ProcessingOrdersEntity = {
+  id: string
+  status: string
+  refundStatus: string
+  target: {
+    id: string
+  }
+}
+
+const sliceName = 'registrationOrders'
+
+type MaybeEntity = ProcessingOrdersEntity | undefined
+
+const adapter = createEntityAdapter<ProcessingOrdersEntity>()
+
+const selectors = adapter.getSelectors<RootState>(state => state.registrationOrders)
+
+type CommonFetchProps = {
+  reload?: boolean
+}
+
+type FetchOneWithoutApi = CommonFetchProps & {
+  domain: string
+  recipient: string
+}
+
+const selectEntitiesByIds = (state: RootState, ids: string[]) => {
+  return ids.map(id => selectors.selectById(state, id)).filter(isDef)
+}
+
+export const selectProcessingOrdersById = (state: RootState, id: string) => {
+  const keys = selectors.selectIds(state)
+
+  const entityId = keys.find(key => key.toString().includes(id))
+
+  if (!entityId) return undefined
+
+  return selectors.selectById(state, entityId)
+}
+
+export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
+  const keys = selectors.selectIds(state)
+
+  const entityIds = keys.filter(key => ids.find(x => key.toString().includes(x)))
+
+  return selectEntitiesByIds(state, entityIds as string[])
+}
+
+export const selectPendingOrdersByAccount = (
+  state: RootState,
+  domain: string,
+  recipient: string,
+) => {
+  selectors.selectById(state, `${domain}-${recipient}`)
+}
+
+export const fetchPendingOrdersByAccount = createAsyncThunk<
+  MaybeEntity,
+  FetchOneWithoutApi,
+  ThunkApiConfig
+>(
+  `${sliceName}/fetchManyByAccount`,
+  async ({ domain, recipient, reload }, { getState }): Promise<MaybeEntity> => {
+    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), domain, recipient)
+
+    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
+      return
+    }
+
+    const result: any = await sellerSquidGraphQlClient.request(PROCESSING_REGISTRATION_ORDERS, {
+      domain,
+      recipient,
+    })
+
+    const order = result.getPendingOrdersByAccount.orders?.[0] as ProcessingOrdersEntity | undefined
+
+    if(!order) return 
+    
+    return {
+      ...order,
+      id: `${recipient}-${domain}`,
+    }
+  },
+)
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: adapter.getInitialState(),
+  reducers: {
+    // upsertOwnDomains: adapter.upsertOne,
+  },
+  extraReducers: builder => {
+    builder.addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
+      if (payload) adapter.upsertOne(state, payload)
+    })
+  },
+})
+
+export default slice.reducer

From 3995932821b52eef67c88bab6535bc3f5fa6e2e1 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 16 Apr 2023 18:04:57 +0300
Subject: [PATCH 12/54] Fix reload new domain

---
 .../domains/EligibleDomainsSection.tsx        |  8 +---
 src/components/domains/index.tsx              |  4 +-
 src/components/domains/utils.tsx              | 43 ++++++++++---------
 .../domainPendingOrders/pendingOrdersHooks.ts | 17 ++++++++
 .../domainPendingOrders/pendingOrdersSlice.ts | 20 ++++++++-
 src/rtk/features/domains/domainHooks.ts       | 20 ++++++++-
 .../features/domains/domainsByOwnerSlice.ts   | 23 ++++++++--
 src/rtk/features/domains/domainsSlice.ts      | 10 +++--
 8 files changed, 108 insertions(+), 37 deletions(-)

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 8ff491a20..b15a3d95a 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,4 +1,4 @@
-import { isFunction } from '@polkadot/util';
+import { isFunction } from '@polkadot/util'
 import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
 import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import BN from 'bn.js'
@@ -6,7 +6,6 @@ import clsx from 'clsx'
 import React, { useState } from 'react'
 import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
-import { useFetchDomainPendingOrdersByIds } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import {
   useBuildDomainsWithTldByDomain,
@@ -27,7 +26,7 @@ import ClaimFreeDomainModal from './ClaimFreeDomainModal'
 import BuyByDotButton from './dot-seller/BuyByDotModal'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
-import { DomainDetails, ResultContainer, useFetchNewDomains } from './utils'
+import { DomainDetails, ResultContainer } from './utils'
 
 const log = newLogger('DD')
 
@@ -360,9 +359,7 @@ const ChooseDomain = ({ domain }: DomainProps) => {
 
 export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
   const domains = useBuildDomainsWithTldByDomain(domain)
-  useFetchDomainPendingOrdersByIds(domains)
   const { isReserved, loading: checkingWord } = useIsReservedWord(domain.id)
-  useFetchNewDomains(domain.id)
 
   if (isEmptyArray(domains)) return null
 
@@ -370,7 +367,6 @@ export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
 
   if (isReserved) return <ReservedDomainCard domain={domain.id} />
 
-
   return (
     <div className='GapBig d-flex flex-column mt-4'>
       <ChooseDomain domain={domain} />
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index 12efc56e3..1af26efe3 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -22,7 +22,7 @@ import styles from './index.module.sass'
 import { ManageDomainProvider } from './manage/ManageDomainProvider'
 import { MyDomainsCard } from './MyDomains'
 import PendingOrdersSection from './pendingOrders'
-import { DomainDetails, UnamesLearnMoreLink } from './utils'
+import { DomainDetails, UnamesLearnMoreLink, useFetchNewDomains } from './utils'
 
 const tabs = ['register', 'manage'] as const
 type TabKey = typeof tabs[number]
@@ -33,6 +33,8 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
   const myAddress = useMyAddress()
   const { domains } = useMyDomains()
   const { api, isApiReady, subsocial } = useSubstrate()
+  useFetchNewDomains(domain?.id)
+
 
   const onSearchDomain = async (domain?: string) => {
     if (!domain) return
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 67cba003e..9797812a7 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -1,3 +1,4 @@
+import { LoadingOutlined } from '@ant-design/icons'
 import { parseDomain } from '@subsocial/utils'
 import clsx from 'clsx'
 import { FC, HTMLProps } from 'react'
@@ -6,17 +7,15 @@ import {
   CardWithTitleProps,
 } from 'src/components/utils/cards/WithTitle'
 import config from 'src/config'
-import { AnyAccountId } from 'src/types'
+import useSubsocialEffect from '../api/useSubsocialEffect'
+import { useMyAddress } from '../auth/MyAccountsContext'
 import { slugifyHandle } from '../urls/helpers'
 import { useAddClassNameToRootElement } from '../utils'
+import { controlledMessage } from '../utils/Message'
 import styles from './index.module.sass'
-import useSubsocialEffect from '../api/useSubsocialEffect'
-import { useMyAddress } from '../auth/MyAccountsContext'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
-import { LoadingOutlined } from '@ant-design/icons'
-import { controlledMessage } from '../utils/Message'
-import { u8aToString } from '@polkadot/util';
-import { useCreateReloadDomain, useCreateReloadMyDomains } from 'src/rtk/features/domains/domainHooks'
+import { useCreateRemovePendingOrders } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useCreateUpsertDomains } from 'src/rtk/features/domains/domainHooks'
 
 const { resolvedDomain } = config
 
@@ -50,7 +49,7 @@ export const CardWithTitle: FC<CardWithTitleProps> = props => (
 export const useAddAstronautBg = () => useAddClassNameToRootElement('astronaut-bg')
 
 export type DomainStruct = {
-  owner: AnyAccountId
+  owner: string
   outerValue?: string
   expiresAt: string
   soldFor: string
@@ -106,30 +105,34 @@ const waitMessage = controlledMessage({
   icon: <LoadingOutlined />,
 })
 
-export const useFetchNewDomains = (domainName: string) => {
+export const useFetchNewDomains = (domainName?: string) => {
   const myAddress = useMyAddress()
   const { setIsFetchNewDomains, isFetchNewDomains, openManageModal } = useManageDomainContext()
-  const reloadMyDomains = useCreateReloadMyDomains()
-  const reloadDomain = useCreateReloadDomain()
+  const upsertDomains = useCreateUpsertDomains()
+  const removePendingOrder = useCreateRemovePendingOrders()
 
   useSubsocialEffect(
     ({ substrate }) => {
       setIsFetchNewDomains(false)
-      if (!myAddress || !isFetchNewDomains) return
+      if (!myAddress || !isFetchNewDomains || !domainName) return
 
       let unsub: any
 
-
       const subscription = async () => {
         const api = await (await substrate.api).isReady
         waitMessage.open()
 
-        unsub = await api.query.domains.domainsByOwner(myAddress, (data: any[]) => {
-          const dataHuman = data.map((x) => u8aToString(x))
-          
-          if (dataHuman.includes(domainName)) {
-            reloadMyDomains()
-            reloadDomain(domainName)
+        unsub = await api.query.domains.registeredDomains(domainName, data => {
+          const domain = data.unwrapOr(undefined)
+
+          if (domain) {
+            const domainEntity = {
+              id: domainName,
+              ...(domain as unknown as DomainStruct),
+            }
+
+            upsertDomains({ domain: domainEntity, address: myAddress, domainName })
+            removePendingOrder({ address: myAddress, domainName })
             waitMessage.close()
             openManageModal('success', domainName)
           }
@@ -142,4 +145,4 @@ export const useFetchNewDomains = (domainName: string) => {
     },
     [isFetchNewDomains, myAddress],
   )
-}
\ No newline at end of file
+}
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index 987b74057..23e05ef1e 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -1,10 +1,13 @@
 import { EntityId } from '@reduxjs/toolkit'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+import { useActions } from 'src/rtk/app/helpers'
 import { useFetch } from 'src/rtk/app/hooksCommon'
 import { useAppSelector } from 'src/rtk/app/store'
 import {
+  RemovePendingOrderProps,
   fetchPendingOrdersByAccount,
   fetchPendingOrdersByIds,
+  removePendingOrder,
   selectPendingOrdersByAccount,
   selectPendingOrdersById,
   selectPendingOrdersByIds,
@@ -34,3 +37,17 @@ export const useSelectPendingOrdersByAccount = () => {
   const myAddress = useMyAddress()
   return useAppSelector(state => selectPendingOrdersByAccount(state, myAddress))
 }
+
+export const useCreateReloadPendingOrdersByAccount = () => {
+  const myAddress = useMyAddress()
+
+  return useActions<void>(({ dispatch }) => {
+    myAddress && dispatch(fetchPendingOrdersByAccount({ id: myAddress }))
+  })
+}
+
+export const useCreateRemovePendingOrders = () => {
+  return useActions<RemovePendingOrderProps>(({ dispatch, args }) => {
+    dispatch(removePendingOrder(args))
+  })
+}
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index 05a36671e..dcf9676c7 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -1,4 +1,4 @@
-import { EntityId, createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { EntityId, PayloadAction, createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
 import { isDef, isEmptyArray } from '@subsocial/utils'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import {
@@ -11,6 +11,11 @@ import { encodeAddress } from '@polkadot/util-crypto'
 import { GenericAccountId } from '@polkadot/types'
 import registry from '@subsocial/api/utils/registry'
 
+export type RemovePendingOrderProps = {
+  address: string
+  domainName: string
+}
+
 export type PendingDomainEntity = {
   id: string
   domain: string
@@ -144,7 +149,16 @@ const slice = createSlice({
   name: sliceName,
   initialState: adapter.getInitialState(),
   reducers: {
-    // upsertOwnDomains: adapter.upsertOne,
+    removePendingOrder: (
+      state,
+      action: PayloadAction<RemovePendingOrderProps>
+    ) => {
+      const { address, domainName } = action.payload
+
+      const id = `${domainName}-${address}`
+
+      adapter.removeOne(state, id)
+    }
   },
   extraReducers: builder => {
     builder
@@ -157,4 +171,6 @@ const slice = createSlice({
   },
 })
 
+export const { removePendingOrder } = slice.actions 
+
 export default slice.reducer
diff --git a/src/rtk/features/domains/domainHooks.ts b/src/rtk/features/domains/domainHooks.ts
index bc1f44170..8e4160e5a 100644
--- a/src/rtk/features/domains/domainHooks.ts
+++ b/src/rtk/features/domains/domainHooks.ts
@@ -4,12 +4,13 @@ import { shallowEqual } from 'react-redux'
 import useSubsocialEffect from 'src/components/api/useSubsocialEffect'
 import { DomainDetails } from 'src/components/domains/utils'
 import { useMyAddress } from '../../../components/auth/MyAccountsContext'
+import { DomainStruct } from '../../../components/domains/utils'
 import useSubstrate from '../../../components/substrate/useSubstrate'
 import { useActions } from '../../app/helpers'
 import { useFetch } from '../../app/hooksCommon'
 import { useAppDispatch, useAppSelector } from '../../app/store'
-import { fetchDomainsByOwner, selectDomainsByOwner } from './domainsByOwnerSlice'
-import { fetchDomains, selectDomains } from './domainsSlice'
+import { fetchDomainsByOwner, selectDomainsByOwner, upsertOwnDomains } from './domainsByOwnerSlice'
+import { fetchDomains, selectDomains, upsertDomain } from './domainsSlice'
 import { setTopLevelDomains } from './topLevelDomains'
 
 export const useIsMyDomain = (domainName: string) => {
@@ -68,6 +69,21 @@ export const useCreateReloadMyDomains = () => {
   })
 }
 
+type UpsertDomainsProps = {
+  address: string
+  domain: DomainStruct
+  domainName: string
+}
+
+export const useCreateUpsertDomains = () => {
+  return useActions<UpsertDomainsProps>(({ dispatch, args }) => {
+    const { address, domain, domainName } = args
+
+    dispatch(upsertDomain({ ...domain, id: domainName }))
+    dispatch(upsertOwnDomains({ address, newDomain: domainName }))
+  })
+}
+
 const skippedDomains = ['gov']
 
 export const useFetchTopLevelDomains = () => {
diff --git a/src/rtk/features/domains/domainsByOwnerSlice.ts b/src/rtk/features/domains/domainsByOwnerSlice.ts
index 78571cf0d..50ae07a7f 100644
--- a/src/rtk/features/domains/domainsByOwnerSlice.ts
+++ b/src/rtk/features/domains/domainsByOwnerSlice.ts
@@ -1,4 +1,4 @@
-import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { PayloadAction, createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
 import { FetchOneArgs, ThunkApiConfig } from 'src/rtk/app/helpers'
 import { SelectOneFn } from 'src/rtk/app/hooksCommon'
 import { RootState } from 'src/rtk/app/rootReducer'
@@ -64,11 +64,28 @@ export const fetchDomainsByOwner = createAsyncThunk<
   }
 })
 
+type UpsertOwnDomainsProps = {
+  newDomain: string
+  address: string
+}
+
 const slice = createSlice({
   name: sliceName,
   initialState: adapter.getInitialState(),
   reducers: {
-    // upsertOwnDomains: adapter.upsertOne,
+    upsertOwnDomains: (
+      state,
+      action: PayloadAction<UpsertOwnDomainsProps>
+    ) => {
+      const { newDomain, address } = action.payload
+      const domainsByAccount = state.entities[address]?.domains || []
+
+      adapter.upsertOne(state, {
+        id: address,
+        domains: [ ...domainsByAccount, newDomain ]
+      })
+
+    },
   },
   extraReducers: builder => {
     builder.addCase(fetchDomainsByOwner.fulfilled, (state, { payload }) => {
@@ -78,7 +95,7 @@ const slice = createSlice({
 })
 
 export const {
-  // upsertOwnDomains,
+  upsertOwnDomains,
 } = slice.actions
 
 export default slice.reducer
diff --git a/src/rtk/features/domains/domainsSlice.ts b/src/rtk/features/domains/domainsSlice.ts
index a33f37779..95aa39841 100644
--- a/src/rtk/features/domains/domainsSlice.ts
+++ b/src/rtk/features/domains/domainsSlice.ts
@@ -1,4 +1,8 @@
-import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import {
+  createAsyncThunk,
+  createEntityAdapter,
+  createSlice,
+} from '@reduxjs/toolkit'
 import { isDef } from '@subsocial/utils'
 import { createSelectUnknownIds, FetchManyArgs, ThunkApiConfig } from 'src/rtk/app/helpers'
 import { SelectOneFn } from 'src/rtk/app/hooksCommon'
@@ -70,7 +74,7 @@ const slice = createSlice({
   name: sliceName,
   initialState: adapter.getInitialState(),
   reducers: {
-    // upsertOwnDomains: adapter.upsertOne,
+    upsertDomain: adapter.upsertOne
   },
   extraReducers: builder => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -80,7 +84,7 @@ const slice = createSlice({
 })
 
 export const {
-  // upsertOwnDomains,
+  upsertDomain,
 } = slice.actions
 
 export default slice.reducer

From 58200531e36bdd60c5f3a3c479b9459d8bb9a4ab Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 16 Apr 2023 19:17:20 +0300
Subject: [PATCH 13/54] Fix success modal styles

---
 src/components/domains/index.module.sass      | 20 +++++++++++++++----
 .../domains/manage/DomainManageModal.tsx      | 14 ++++++-------
 src/styles/subsocial.scss                     |  2 +-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/domains/index.module.sass b/src/components/domains/index.module.sass
index 8a5e7058b..11deb3788 100644
--- a/src/components/domains/index.module.sass
+++ b/src/components/domains/index.module.sass
@@ -80,7 +80,6 @@ $font_size: 1.1rem
       border-radius: 5px 0px 0px 5px !important
       
 
-
 .DomainName
   font-size: 4rem
   text-align: center
@@ -119,15 +118,28 @@ $font_size: 1.1rem
     padding: 2*$space_normal
   
   \:global .ant-btn
-    width: 190px
+    width: 200px
+    border-radius: 8px !important
   
 .ModalTitle
-  font-size: 2rem
+  font-size: $font_big
+  font-weight: bold
+  margin-bottom: $space_mini
+
+.ModalSubtitle
+  margin-bottom: $space_huge
 
 .ModalDomainTitle
-  font-size: 2rem
+  margin-bottom: $space_huge
+  font-size: $font_big
+  line-height: 28.64px
   font-weight: 600
 
+.MenuModalDomainTitle
+  @extend .ModalDomainTitle
+
+  font-size: $font_huge !important
+
 .ModalLink
   font-size: $font_large
   margin: $space_normal 0
diff --git a/src/components/domains/manage/DomainManageModal.tsx b/src/components/domains/manage/DomainManageModal.tsx
index 24f546575..b12db6cd6 100644
--- a/src/components/domains/manage/DomainManageModal.tsx
+++ b/src/components/domains/manage/DomainManageModal.tsx
@@ -17,7 +17,7 @@ import { useMyAddress } from '../../auth/MyAccountsContext'
 import useSubstrate from '../../substrate/useSubstrate'
 import { Loading } from '../../utils'
 import { ButtonLink } from '../../utils/CustomLinks'
-import { MutedDiv } from '../../utils/MutedText'
+import { MutedDiv } from '../../utils/MutedText';
 import SelectSpacePreview from '../../utils/SelectSpacePreview'
 import TxButton from '../../utils/TxButton'
 import styles from '../index.module.sass'
@@ -74,7 +74,7 @@ const ManageDomainMenu: FC<ManageDomainStepProps> = ({ domainStruct }) => {
   return (
     <>
       <Row justify='center'>
-        <div className={clsx('SubsocialGradient', styles.ModalDomainTitle)}>{domainStruct.id}</div>
+        <div className={clsx('SubsocialGradient', styles.MenuModalDomainTitle)}>{domainStruct.id}</div>
       </Row>
       {/*<DomainExpireAt domainStruct={domainStruct} />*/}
       <div className='mt-3 mb-2'>You can use your domain as:</div>
@@ -101,7 +101,7 @@ const ChooseStep = ({ title, action }: ChooseStepProps) => {
 
 const ActionButton = ({ children, ...props }: ButtonProps) => {
   return (
-    <Button size='large' type='primary' className='mr-2' {...props}>
+    <Button size='large' type='primary' className='mr-3' {...props}>
       {children}
     </Button>
   )
@@ -326,12 +326,12 @@ const Success: FC<ManageDomainStepProps> = ({ domainStruct }) => {
           text='Your domain is registered!'
           className={clsx(styles.ModalTitle)}
         />
+        <MutedDiv className={styles.ModalSubtitle}>Your profile is ready to use, and you can edit it at any time.</MutedDiv>
       </Row>
       <Row justify='center'>
         <div className={clsx('SubsocialGradient', styles.ModalDomainTitle)}>{domain}</div>
       </Row>
-      {/*<DomainExpireAt domainStruct={domainStruct} />*/}
-      <Row justify='center' className='mt-3'>
+      <Row justify='center' className={styles.ActionButtons}>
         <ActionButton type='default' onClick={() => openManageModal('menu')}>
           What is next?
         </ActionButton>
@@ -378,10 +378,10 @@ export const ManageDomainModal = ({ domain, close, visible }: ManageDomainModalP
 
   return (
     <Modal
-      className={styles.Modal}
+      className={clsx(styles.Modal, 'DfSignInModal')}
       closable={false}
       title={null}
-      width={640}
+      width={currentStep === 'success' ? 520: 620}
       onCancel={close}
       visible={visible}
       footer={null}
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
index c902fee48..3a132f4b4 100644
--- a/src/styles/subsocial.scss
+++ b/src/styles/subsocial.scss
@@ -95,7 +95,7 @@ a {
 }
 
 .SubsocialGradient {
-  background: linear-gradient(#f50183, #750497);
+  background: linear-gradient(#F10286, #C10AEC);
   background-size: 100%;
   background-clip: text;
   -webkit-background-clip: text;

From 30618f86da53cea198371df000756cfa320d2830 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 16 Apr 2023 20:32:03 +0300
Subject: [PATCH 14/54] Fix select input

---
 src/components/common/balances/Balance.tsx    | 23 ++++++-
 .../common/inputs/SelectAccountInput.tsx      | 60 ++++++++++++++++---
 .../common/inputs/inputs.module.sass          | 15 ++++-
 .../domains/dot-seller/BuyByDotModal.tsx      | 38 +++++++++---
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  5 +-
 .../domains/dot-seller/Index.module.sass      |  2 +-
 src/components/domains/dot-seller/config.ts   |  3 -
 src/components/domains/dot-seller/utils.tsx   |  4 +-
 .../profile-selector/MyAccountMenu.tsx        |  4 +-
 .../profiles/address-views/AuthorPreview.tsx  |  5 +-
 .../address-views/utils/NameDetails.tsx       |  1 +
 11 files changed, 128 insertions(+), 32 deletions(-)

diff --git a/src/components/common/balances/Balance.tsx b/src/components/common/balances/Balance.tsx
index 355d79d1e..ea118b678 100644
--- a/src/components/common/balances/Balance.tsx
+++ b/src/components/common/balances/Balance.tsx
@@ -10,6 +10,8 @@ import { NodeNames } from 'src/config/types'
 import { AnyAccountId } from 'src/types'
 import { useKusamaContext } from '../../kusama/KusamaContext'
 import useSubstrate from '../../substrate/useSubstrate'
+import { useGetDecimalAndSymbol } from 'src/components/domains/dot-seller/utils'
+import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 
 const log = newLogger('useCreateBallance')
 
@@ -165,17 +167,34 @@ export const FormatKsmBalance = ({ value, decimals, currency, ...props }: Format
 type BalanceProps = {
   address: AnyAccountId
   label?: React.ReactNode
+  network?: string
 }
 
-export const Balance = ({ address, label }: BalanceProps) => {
+export const Balance = ({ address, label, network }: BalanceProps) => {
   const balance = useCreateBalance(address)
 
+  const { decimal, symbol } = useGetDecimalAndSymbol(network)
+
+  const otherNetworkBalance = useBalancesByNetwork({
+    account: address.toString(),
+    network: network,
+    currency: symbol,
+  })
+
   if (!balance) return null
 
+  let balanceView = <FormatBalance value={balance} />
+
+  if(network) {
+    if(!otherNetworkBalance) return null
+
+    balanceView = <FormatBalance value={otherNetworkBalance.freeBalance} decimals={decimal} currency={symbol} />
+  }
+
   return (
     <span>
       {label}
-      <FormatBalance value={balance} />
+      {balanceView}
     </span>
   )
 }
diff --git a/src/components/common/inputs/SelectAccountInput.tsx b/src/components/common/inputs/SelectAccountInput.tsx
index 2fa1193eb..4dc576398 100644
--- a/src/components/common/inputs/SelectAccountInput.tsx
+++ b/src/components/common/inputs/SelectAccountInput.tsx
@@ -9,6 +9,7 @@ import styles from './inputs.module.sass'
 import { useSelectProfile } from 'src/rtk/app/hooks'
 import { useMyAccounts } from 'src/components/auth/MyAccountsContext'
 import { equalAddresses } from 'src/components/substrate'
+import clsx from 'clsx'
 
 export const isValidAccount = (address?: string) => {
   try {
@@ -27,9 +28,26 @@ type SelectAccountInputProps = {
   setValue: (value: string) => void
   value?: string
   withAvatar?: boolean
+  network?: string
+  disabled?: boolean
 }
 
-const filterSelectOptions = (adresses: string[], value?: string) => {
+type SelectInputPreviewProps = {
+  address: string
+}
+
+export const SelectInputPreview = ({ address }: SelectInputPreviewProps) => {
+  const profile = useSelectProfile(address)
+
+  profile?.content?.image
+
+  return <div className='d-flex align-items-center'>
+      <Avatar size={32} address={address} avatar={profile?.content?.image} asLink={false} />
+      <div className={styles.AddressPreview}>{address}</div>
+    </div>
+}
+
+const filterSelectOptions = (adresses: string[], value?: string, network?: string) => {
   return adresses
     .filter(x => {
       return !equalAddresses(x, value)
@@ -37,8 +55,9 @@ const filterSelectOptions = (adresses: string[], value?: string) => {
     .map((address, index) => {
       return {
         key: address + index,
-        label: <SelectAddressPreview address={address} withShortAddress={true} />,
+        label: <SelectAddressPreview address={address} withShortAddress={true} network={network} />,
         value: address,
+        preview: <SelectInputPreview address={address} />
       }
     })
 }
@@ -48,6 +67,8 @@ export const SelectAccountInput = ({
   value,
   className,
   withAvatar = true,
+  network,
+  disabled
 }: SelectAccountInputProps) => {
   const { accounts, status } = useMyAccounts()
   const allExtensionAccounts = accounts.map(x => toSubsocialAddress(x.address) as string)
@@ -57,10 +78,15 @@ export const SelectAccountInput = ({
   const profile = useSelectProfile(value)
 
   useEffect(() => {
-    if (!value) return
+    const options =
+    status === 'OK'
+        ? filterSelectOptions(allExtensionAccounts, value, network)
+        : []
+
+    if (!defaultOptions || isEmptyArray(defaultOptions)) {
+      setDefaultOptions(options)
+    }
 
-    const options = status === 'OK' ? filterSelectOptions(allExtensionAccounts, value) : []
-    setDefaultOptions(options)
     setSelectOptions(options)
   }, [ value, status ])
 
@@ -79,8 +105,10 @@ export const SelectAccountInput = ({
             address={new GenericAccountId(registry, searchValue)}
             withoutBalances
             withShortAddress={true}
+            network={network}
           />
         ),
+        preview: <SelectInputPreview address={searchValue} />,
         value: searchValue,
       })
     } else {
@@ -95,12 +123,19 @@ export const SelectAccountInput = ({
   }
 
   const onSelectHandler = (searchValue: any) => {
-    const filterOptions = selectOptions.filter((x: any) => !x.value.includes(searchValue))
+    const filterOptions = defaultOptions.filter(
+      (x: any) => !x.value.includes(searchValue)
+    )
+
     if (filterOptions) {
       setSelectOptions(filterOptions as any[])
     }
   }
 
+  const onClear = () => {
+    setSelectOptions(defaultOptions)
+  }
+
   const avatar = (
     <div className='mr-2'>
       {value 
@@ -109,20 +144,27 @@ export const SelectAccountInput = ({
     </div>
   )
 
+  console.log(selectOptions)
+
   return (
     <div className='d-flex align-items-center'>
       {withAvatar && avatar}
+
       <Select
+        disabled={disabled}
         showSearch
         allowClear
-        value={value}
         size='large'
-        className={className}
+        optionLabelProp='value'
+        defaultActiveFirstOption
+        className={clsx(className, styles.Select)}
+        value={value}
         options={selectOptions}
         onSearch={onSearchHandler}
         onSelect={onSelectHandler}
         onChange={onSelectChange}
-        placeholder='Substate-based address'
+        onClear={onClear}
+        placeholder={'Substate-based address'}
       />
     </div>
   )
diff --git a/src/components/common/inputs/inputs.module.sass b/src/components/common/inputs/inputs.module.sass
index a2e4d5ba1..da59c259d 100644
--- a/src/components/common/inputs/inputs.module.sass
+++ b/src/components/common/inputs/inputs.module.sass
@@ -10,16 +10,25 @@
 .Select
   overflow: hidden
 
-  \:global .ant-select-selector
+  .ant-select-selection-item
+    align-self: center
+    font-weight: bold
+    font-size: $font_normal
+    height: 100% !important
 
+  \:global .ant-select-selector
     .ant-select-selection-search
       overflow: hidden
 
     .ant-select-selection-item
+      height: 100% !important
       align-self: center
-      font-weight: bold
       font-size: $font_normal
 
     .ant-select-selection-placeholder
       align-self: center
-      font-size: $font_normal
\ No newline at end of file
+      font-size: $font_normal
+
+.AddressPreview
+  text-overflow: ellipsis
+  overflow: hidden
diff --git a/src/components/domains/dot-seller/BuyByDotModal.tsx b/src/components/domains/dot-seller/BuyByDotModal.tsx
index b792bda4b..2a733d1dc 100644
--- a/src/components/domains/dot-seller/BuyByDotModal.tsx
+++ b/src/components/domains/dot-seller/BuyByDotModal.tsx
@@ -3,12 +3,12 @@ import clsx from 'clsx'
 import { useState } from 'react'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
-import { useMyAddress } from '../../auth/MyAccountsContext'
+import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import BuyByDotTxButton from './BuyByDotTxButton'
-import { domainsNetwork, validDomainPrice } from './config'
+import { domainsNetwork } from './config'
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from './utils'
 
@@ -18,17 +18,18 @@ type ModalBodyProps = {
 
 const ModalBody = ({ domainName }: ModalBodyProps) => {
   const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
-  const myAddress = useMyAddress()
+  const sellerConfig = useSelectSellerConfig()
 
   const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
 
   const balance = useBalancesByNetwork({
-    account: myAddress,
+    account: purchaser,
     network: domainsNetwork,
     currency: symbol,
   })
 
   const { freeBalance } = balance || {}
+  const { domainRegistrationPriceFixed } = sellerConfig || {}
 
   return (
     <Space direction='vertical' size={24} className={clsx(styles.ModalBody, 'w-100')}>
@@ -49,6 +50,7 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           setValue={setPurchaser}
           value={purchaser}
           withAvatar={false}
+          network={domainsNetwork}
         />
       </Space>
       <Space direction='vertical' size={8} className={'w-100'}>
@@ -60,6 +62,7 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           setValue={setRecipient}
           value={recipient}
           withAvatar={false}
+          network={domainsNetwork}
         />
         <MutedDiv className={styles.RecipientFieldDesc}>
           Choose the recipient to whom the domain will be registered
@@ -72,7 +75,13 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
         </div>
         <div className='d-flex align-items-center justify-content-between'>
           <MutedDiv>Price:</MutedDiv>
-          <div className='font-weight-bold'>0.56 DOT</div>
+          <div className='font-weight-bold'>
+            <FormatBalance
+              value={domainRegistrationPriceFixed}
+              decimals={decimal}
+              currency={symbol}
+            />
+          </div>
         </div>
       </Space>
     </Space>
@@ -119,14 +128,27 @@ type BuyByDotButtonProps = {
   withPrice?: boolean
 }
 
-const BuyByDotButton = ({ domainName, label = 'Register', withPrice = true }: BuyByDotButtonProps) => {
+const BuyByDotButton = ({
+  domainName,
+  label = 'Register',
+  withPrice = true,
+}: BuyByDotButtonProps) => {
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
+  const sellerConfig = useSelectSellerConfig()
+
+  const { domainRegistrationPriceFixed } = sellerConfig || {}
 
   const close = () => setOpen(false)
 
-  const price = (
-    <FormatBalance value={validDomainPrice.toString()} decimals={decimal} currency={symbol} />
+  const price = domainRegistrationPriceFixed ? (
+    <FormatBalance
+      value={domainRegistrationPriceFixed.toString()}
+      decimals={decimal}
+      currency={symbol}
+    />
+  ) : (
+    <div>-</div>
   )
 
   return (
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index 93cc08d1f..a3aef7566 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -14,7 +14,7 @@ import { useAppDispatch } from 'src/rtk/app/store'
 import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import { domainsNetwork, validDomainPrice } from './config'
+import { domainsNetwork } from './config'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -41,6 +41,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
       sellerTreasuryAccount,
       remarkProtVersion,
       domainHostChain,
+      domainRegistrationPriceFixed,
       sellerToken: { name: tokenName },
     } = sellerConfig
 
@@ -48,7 +49,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
 
     if (!api) return []
 
-    const transferTx = api.tx.balances.transfer(sellerTreasuryAccount, validDomainPrice)
+    const transferTx = api.tx.balances.transfer(sellerTreasuryAccount, domainRegistrationPriceFixed)
 
     SocialRemark.setConfig({ protNames: [remarkProtName] })
 
diff --git a/src/components/domains/dot-seller/Index.module.sass b/src/components/domains/dot-seller/Index.module.sass
index f3f04544b..45019aec2 100644
--- a/src/components/domains/dot-seller/Index.module.sass
+++ b/src/components/domains/dot-seller/Index.module.sass
@@ -61,7 +61,7 @@ $element_height: 40px
 .RegisterButton
   display: flex
   align-items: center
-  gap: $space_tiny
+  gap: $space_normal
 
   button
     font-size: $font_normal
diff --git a/src/components/domains/dot-seller/config.ts b/src/components/domains/dot-seller/config.ts
index 54c61da36..93d8df295 100644
--- a/src/components/domains/dot-seller/config.ts
+++ b/src/components/domains/dot-seller/config.ts
@@ -1,8 +1,5 @@
-import BN from 'bn.js'
 import { GraphQLClient } from 'graphql-request'
 
-export const validDomainPrice = new BN('100000000') // 0.01
-
 export const domainsNetwork = 'rococo'
 
 export const xSellerSquid = 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql'
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
index 7ef0237c5..431a34ab0 100644
--- a/src/components/domains/dot-seller/utils.tsx
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -1,8 +1,10 @@
 import { useChainInfo } from '../../../rtk/features/chainsInfo/chainsInfoHooks'
 
-export const useGetDecimalAndSymbol = (network: string) => {
+export const useGetDecimalAndSymbol = (network?: string) => {
   const chainsInfo = useChainInfo()
 
+  if(!network) return {}
+
   const { tokenDecimals, tokenSymbols, nativeToken } = chainsInfo[network] || {}
 
   const decimal = tokenDecimals?.[0] || 0
diff --git a/src/components/profile-selector/MyAccountMenu.tsx b/src/components/profile-selector/MyAccountMenu.tsx
index 58fb8877f..69dccdaa3 100644
--- a/src/components/profile-selector/MyAccountMenu.tsx
+++ b/src/components/profile-selector/MyAccountMenu.tsx
@@ -16,6 +16,7 @@ type SelectAddressType = AddressProps & {
   onClick?: () => void
   withShortAddress?: boolean
   withoutBalances?: boolean
+  network?: string
 }
 
 export const SelectAddressPreview: FC<SelectAddressType> = ({
@@ -24,6 +25,7 @@ export const SelectAddressPreview: FC<SelectAddressType> = ({
   onClick,
   owner,
   withoutBalances = false,
+  network
 }) => {
   return (
     <div className='DfChooseAccount' onClick={onClick}>
@@ -38,7 +40,7 @@ export const SelectAddressPreview: FC<SelectAddressType> = ({
           address={address}
           withShortAddress={withShortAddress}
         />
-        {!withoutBalances && <InfoDetails address={address} />}
+        {!withoutBalances && <InfoDetails address={address} network={network} />}
       </div>
     </div>
   )
diff --git a/src/components/profiles/address-views/AuthorPreview.tsx b/src/components/profiles/address-views/AuthorPreview.tsx
index 17de6505b..ffa615af4 100644
--- a/src/components/profiles/address-views/AuthorPreview.tsx
+++ b/src/components/profiles/address-views/AuthorPreview.tsx
@@ -14,13 +14,14 @@ export type InfoProps = {
   address?: string | AccountId
   balance?: string | BN | number
   details?: JSX.Element
+  network?: string
 }
 
-export const InfoDetails: React.FC<InfoProps> = ({ details, balance, address }) => {
+export const InfoDetails: React.FC<InfoProps> = ({ details, balance, address, network }) => {
   return (
     <>
       <div className='Df--AddressComponents-details'>
-        {balance || (address && <Balance address={address.toString()} />)}
+        {balance || (address && <Balance address={address.toString()} network={network} />)}
         {details && <div>{details}</div>}
       </div>
     </>
diff --git a/src/components/profiles/address-views/utils/NameDetails.tsx b/src/components/profiles/address-views/utils/NameDetails.tsx
index 8678f735a..e1cded86b 100644
--- a/src/components/profiles/address-views/utils/NameDetails.tsx
+++ b/src/components/profiles/address-views/utils/NameDetails.tsx
@@ -12,6 +12,7 @@ type Props = AddressProps & {
   withFollowButton?: boolean
   withLabel?: boolean
   withDetails?: boolean
+  network?: string
 }
 
 export const NameDetails = ({

From 56db7cde78f57a86575ba4ff356bd2bd2be48cbd Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 17 Apr 2023 13:13:42 +0300
Subject: [PATCH 15/54] Refactor code

---
 .../common/inputs/SelectAccountInput.tsx      | 19 ---------
 .../domains/EligibleDomainsSection.tsx        | 24 ++++++++----
 .../domains/dot-seller/BuyByDotModal.tsx      | 18 ++++-----
 .../domains/dot-seller/BuyByDotTxButton.tsx   | 39 ++++++++++++-------
 src/components/domains/dot-seller/config.ts   |  2 -
 .../domains/pendingOrders/index.tsx           | 20 ++++++----
 src/components/domains/utils.tsx              |  6 +++
 .../domainPendingOrders/pendingOrdersHooks.ts |  6 +--
 .../features/domains/domainsByOwnerSlice.ts   |  2 -
 9 files changed, 73 insertions(+), 63 deletions(-)

diff --git a/src/components/common/inputs/SelectAccountInput.tsx b/src/components/common/inputs/SelectAccountInput.tsx
index 4dc576398..4ccceced2 100644
--- a/src/components/common/inputs/SelectAccountInput.tsx
+++ b/src/components/common/inputs/SelectAccountInput.tsx
@@ -32,21 +32,6 @@ type SelectAccountInputProps = {
   disabled?: boolean
 }
 
-type SelectInputPreviewProps = {
-  address: string
-}
-
-export const SelectInputPreview = ({ address }: SelectInputPreviewProps) => {
-  const profile = useSelectProfile(address)
-
-  profile?.content?.image
-
-  return <div className='d-flex align-items-center'>
-      <Avatar size={32} address={address} avatar={profile?.content?.image} asLink={false} />
-      <div className={styles.AddressPreview}>{address}</div>
-    </div>
-}
-
 const filterSelectOptions = (adresses: string[], value?: string, network?: string) => {
   return adresses
     .filter(x => {
@@ -57,7 +42,6 @@ const filterSelectOptions = (adresses: string[], value?: string, network?: strin
         key: address + index,
         label: <SelectAddressPreview address={address} withShortAddress={true} network={network} />,
         value: address,
-        preview: <SelectInputPreview address={address} />
       }
     })
 }
@@ -108,7 +92,6 @@ export const SelectAccountInput = ({
             network={network}
           />
         ),
-        preview: <SelectInputPreview address={searchValue} />,
         value: searchValue,
       })
     } else {
@@ -144,8 +127,6 @@ export const SelectAccountInput = ({
     </div>
   )
 
-  console.log(selectOptions)
-
   return (
     <div className='d-flex align-items-center'>
       {withAvatar && avatar}
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index b15a3d95a..e4a7fba76 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -3,10 +3,10 @@ import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
 import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import BN from 'bn.js'
 import clsx from 'clsx'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
-import { useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useCreateReloadPendingOrdersByAccount, useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import {
   useBuildDomainsWithTldByDomain,
   useCreateReloadMyDomains,
@@ -26,7 +26,8 @@ import ClaimFreeDomainModal from './ClaimFreeDomainModal'
 import BuyByDotButton from './dot-seller/BuyByDotModal'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
-import { DomainDetails, ResultContainer } from './utils'
+import { DomainDetails, ResultContainer, getTime } from './utils'
+import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 
 const log = newLogger('DD')
 
@@ -48,6 +49,8 @@ const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: Domain
   const reloadMyDomains = useCreateReloadMyDomains()
   const { openManageModal } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
+  const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
+  const myAddress = useMyAddress()
 
   if (!isApiReady) return null
 
@@ -59,6 +62,7 @@ const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: Domain
 
   const onSuccess: TxCallback = async () => {
     await reloadMyDomains()
+    reloadPendingOrders(myAddress)
     openManageModal('success', domain)
   }
 
@@ -80,7 +84,6 @@ const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: Domain
         tx={'domains.registerDomain'}
         onSuccess={onSuccess}
         onFailed={onFailed}
-        // onClick={onSuccess} // ! for debug
         isFreeTx
         params={getTxParams}
         className={styles.DomainPrimaryButton}
@@ -157,17 +160,20 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
   const { promoCode, variant } = useManageDomainContext()
+  const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const pendingOrder = useSelectPendingOrderById(domain.id)
 
+  const { dmnRegPendingOrderExpTime } = sellerConfig || {}
+
   const { account } = pendingOrder || {}
 
   if (account && account !== myAddress) {
     return (
       <Tooltip
-        title='Someone else currently has this domain reserved.
-    If they do not buy it within 10 minutes, it will
-    become available again.'
+        title={`Someone else currently has this domain reserved.
+    If they do not buy it within ${getTime(dmnRegPendingOrderExpTime)} minutes, it will
+    become available again.`}
       >
         <Button disabled={true}>Reserved</Button>
       </Tooltip>
@@ -325,6 +331,10 @@ const ChooseDomain = ({ domain }: DomainProps) => {
     content = <DomainItem key={id} domain={id} action={<DomainAction domain={domainStruct} />} />
   }
 
+  useEffect(() => {
+    setVariant('SUB')
+  }, [domain.id])
+
   const onVariantChange = (e: RadioChangeEvent) => {
     setVariant(e.target.value)
   }
diff --git a/src/components/domains/dot-seller/BuyByDotModal.tsx b/src/components/domains/dot-seller/BuyByDotModal.tsx
index 2a733d1dc..cab9ee8eb 100644
--- a/src/components/domains/dot-seller/BuyByDotModal.tsx
+++ b/src/components/domains/dot-seller/BuyByDotModal.tsx
@@ -8,7 +8,6 @@ import { FormatBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import BuyByDotTxButton from './BuyByDotTxButton'
-import { domainsNetwork } from './config'
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from './utils'
 
@@ -20,16 +19,17 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
   const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
 
-  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
+  const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
+
+  const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
   const balance = useBalancesByNetwork({
     account: purchaser,
-    network: domainsNetwork,
+    network: sellerChain,
     currency: symbol,
   })
 
   const { freeBalance } = balance || {}
-  const { domainRegistrationPriceFixed } = sellerConfig || {}
 
   return (
     <Space direction='vertical' size={24} className={clsx(styles.ModalBody, 'w-100')}>
@@ -50,7 +50,7 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           setValue={setPurchaser}
           value={purchaser}
           withAvatar={false}
-          network={domainsNetwork}
+          network={sellerChain}
         />
       </Space>
       <Space direction='vertical' size={8} className={'w-100'}>
@@ -62,7 +62,7 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           setValue={setRecipient}
           value={recipient}
           withAvatar={false}
-          network={domainsNetwork}
+          network={sellerChain}
         />
         <MutedDiv className={styles.RecipientFieldDesc}>
           Choose the recipient to whom the domain will be registered
@@ -133,11 +133,11 @@ const BuyByDotButton = ({
   label = 'Register',
   withPrice = true,
 }: BuyByDotButtonProps) => {
-  const [open, setOpen] = useState(false)
-  const { decimal, symbol } = useGetDecimalAndSymbol(domainsNetwork)
   const sellerConfig = useSelectSellerConfig()
+  const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
 
-  const { domainRegistrationPriceFixed } = sellerConfig || {}
+  const [open, setOpen] = useState(false)
+  const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
   const close = () => setOpen(false)
 
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index a3aef7566..52a7ee6d4 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -5,7 +5,9 @@ import {
   SocialRemarkMessageVersion,
   SubSclSource,
 } from '@subsocial/utils'
+import BN from 'bignumber.js'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import LazyTxButton from 'src/components/donate/LazyTxButton'
 import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
 import { showErrorMessage } from 'src/components/utils/Message'
@@ -14,7 +16,7 @@ import { useAppDispatch } from 'src/rtk/app/store'
 import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import { domainsNetwork } from './config'
+import { useGetDecimalAndSymbol } from './utils'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -33,6 +35,18 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
   const myAddress = useMyAddress()
   const { getApiByNetwork } = useLazyConnectionsContext()
 
+  const { sellerChain, domainRegistrationPriceFixed } = sellerConfig || {}
+
+  const { symbol } = useGetDecimalAndSymbol(sellerChain)
+
+  const balance = useBalancesByNetwork({
+    account: purchaser,
+    network: sellerChain,
+    currency: symbol,
+  })
+
+  const { freeBalance } = balance || {}
+
   const getParams = async () => {
     if (!purchaser || !sellerConfig) return []
 
@@ -43,9 +57,10 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
       domainHostChain,
       domainRegistrationPriceFixed,
       sellerToken: { name: tokenName },
+      sellerChain,
     } = sellerConfig
 
-    const api = await getApiByNetwork(domainsNetwork)
+    const api = await getApiByNetwork(sellerChain)
 
     if (!api) return []
 
@@ -76,26 +91,20 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
   }
 
   const onSuccess = async () => {
-    if (!myAddress) return
-
     setIsFetchNewDomains(true)
 
     close()
   }
 
-  const onFailed = () => {
-    console.log('Extrinsic failed')
-  }
-
   const onClick = async () => {
-    if (!sellerConfig) return
+    if (!sellerConfig || !myAddress) return
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
     const result = await createPendingOrder(purchaser, domainName, sellerApiAuthTokenManager)
 
     if (result?.success) {
-      dispatch(fetchPendingOrdersByAccount({ id: myAddress || '', reload: true }))
+      dispatch(fetchPendingOrdersByAccount({ id: recipient, reload: true }))
       return false
     } else {
       showErrorMessage(result?.errors)
@@ -109,13 +118,17 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
       block
       type='primary'
       size='middle'
-      network={domainsNetwork}
+      network={sellerChain || ''}
       accountId={purchaser}
-      disabled={!recipient}
+      disabled={
+        !recipient ||
+        !freeBalance ||
+        !domainRegistrationPriceFixed ||
+        new BN(freeBalance).lt(domainRegistrationPriceFixed)
+      }
       tx={'utility.batchAll'}
       params={getParams}
       onSuccess={onSuccess}
-      onFailed={onFailed}
       onClick={() => onClick()}
       label={'Register'}
       className={className}
diff --git a/src/components/domains/dot-seller/config.ts b/src/components/domains/dot-seller/config.ts
index 93d8df295..c09d6201e 100644
--- a/src/components/domains/dot-seller/config.ts
+++ b/src/components/domains/dot-seller/config.ts
@@ -1,7 +1,5 @@
 import { GraphQLClient } from 'graphql-request'
 
-export const domainsNetwork = 'rococo'
-
 export const xSellerSquid = 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql'
 
 export const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid)
\ No newline at end of file
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index c82ece59e..3a7be7fc3 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -1,15 +1,16 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
-import { SubDate, isEmptyArray } from '@subsocial/utils'
+import { isEmptyArray, SubDate } from '@subsocial/utils'
 import { Space, Tooltip } from 'antd'
+import dayjs from 'dayjs'
 import { useMemo } from 'react'
 import CardWithContent from 'src/components/utils/cards/CardWithContent'
 import { useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
-import { MutedDiv } from '../../utils/MutedText'
-import styles from './Index.module.sass'
-import dayjs from 'dayjs'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import { MutedDiv } from '../../utils/MutedText'
 import BuyByDotButton from '../dot-seller/BuyByDotModal'
+import { getTime } from '../utils'
+import styles from './Index.module.sass'
 
 type PendingDomainProps = {
   pendingDomain: PendingDomainEntity
@@ -21,7 +22,9 @@ const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
   const { domain, timestamp } = pendingDomain
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
-  const expiresAt = SubDate.formatDate((dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0)))
+  const expiresAt = SubDate.formatDate(
+    dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0),
+  )
 
   return (
     <div className='d-flex align-items-center justify-content-between'>
@@ -41,6 +44,9 @@ const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
 
 const PendingOrdersSection = () => {
   const pendingOrders = useSelectPendingOrdersByAccount()
+  const sellerConfig = useSelectSellerConfig()
+
+  const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
   const pendingDomains = useMemo(() => {
     const orders = pendingOrders.map((pendingDomain, i) => (
@@ -59,8 +65,8 @@ const PendingOrdersSection = () => {
   return (
     <CardWithContent title={'Pending'} className='mb-4'>
       <MutedDiv className='mb-3'>
-        You have a pending order to buy a domain. It will be canceled automatically after 10
-        minutes.
+        You have a pending order to buy a domain. It will be canceled automatically after{' '}
+        {getTime(dmnRegPendingOrderExpTime)} minutes.
       </MutedDiv>
       {pendingDomains}
     </CardWithContent>
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 9797812a7..8a003022e 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -46,6 +46,12 @@ export const CardWithTitle: FC<CardWithTitleProps> = props => (
   <InnerCardWithTitle {...props} cardClassName={styles.DomainResults} />
 )
 
+export const getTime = (miliseconds?: number) => {
+  if(!miliseconds) return '-'
+
+  return miliseconds / 60 / 1000
+}
+
 export const useAddAstronautBg = () => useAddClassNameToRootElement('astronaut-bg')
 
 export type DomainStruct = {
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index 23e05ef1e..dabc2e2c7 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -39,10 +39,8 @@ export const useSelectPendingOrdersByAccount = () => {
 }
 
 export const useCreateReloadPendingOrdersByAccount = () => {
-  const myAddress = useMyAddress()
-
-  return useActions<void>(({ dispatch }) => {
-    myAddress && dispatch(fetchPendingOrdersByAccount({ id: myAddress }))
+  return useActions<string | undefined>(({ dispatch, args }) => {
+    args && dispatch(fetchPendingOrdersByAccount({ id: args }))
   })
 }
 
diff --git a/src/rtk/features/domains/domainsByOwnerSlice.ts b/src/rtk/features/domains/domainsByOwnerSlice.ts
index 50ae07a7f..1b4a6c5da 100644
--- a/src/rtk/features/domains/domainsByOwnerSlice.ts
+++ b/src/rtk/features/domains/domainsByOwnerSlice.ts
@@ -56,8 +56,6 @@ export const fetchDomainsByOwner = createAsyncThunk<
 
   const domains: Domain[] = await api.blockchain.domainsByOwner(myAddress)
 
-  console.log('New domains', domains)
-
   return {
     id: myAddress,
     domains,

From 43898e69cbd728028d548430c1fb65c13a3a5cfc Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 17 Apr 2023 13:40:12 +0300
Subject: [PATCH 16/54] Remove .env file

---
 .env.local                            | 42 ----------------------
 .gitignore                            |  1 +
 dev.env                               | 51 ++++++++++++++-------------
 package.json                          |  8 ++---
 src/pages/_app.js                     |  2 +-
 src/pages/api/pending-order/create.ts |  2 +-
 6 files changed, 33 insertions(+), 73 deletions(-)
 delete mode 100644 .env.local

diff --git a/.env.local b/.env.local
deleted file mode 100644
index bc02000ef..000000000
--- a/.env.local
+++ /dev/null
@@ -1,42 +0,0 @@
-# Logger level
-NEXT_PUBLIC_LOG_LEVEL=debug
-
-# App kind: 'polkaverse' | 'staging'
-NEXT_PUBLIC_APP_KIND=polkaverse
-
-# Connection kind:
-# 'local'   - For development in localhost infrastructure (local Substrate, IPFS, etc.)
-# 'dev'     - For development in betanet/mainnet infrastructure.
-# 'staging' - For development in staging infrastructure.
-# 'main'    - If running this web app on a production server.
-NEXT_PUBLIC_CONNECTION_KIND=staging
-
-CLIENT_ID='5DYm3Wk4aa1BbfhH1ajmY6MNEELXoicmKRnP4tzHYjSKnD9K'
-SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER='retire strong pole intact cool music high path salt praise stadium spatial'
-
-# Id for Google Analytics
-# NEXT_PUBLIC_GA_ID=
-
-# NEXT_PUBLIC_ENABLE_MAINTENANCE_PAGE=true
-# NEXT_PUBLIC_MAINTENANCE_TEXT=''
-
-# NEXT_PUBLIC_SUBSTRATE_URL=
-# NEXT_PUBLIC_SUBSTRATE_RPC_URL=
-# NEXT_PUBLIC_OFFCHAIN_URL=
-# NEXT_PUBLIC_OFFCHAIN_WS=
-# NEXT_PUBLIC_GRAPHQL_URL=
-# NEXT_PUBLIC_IPFS_NODE_URL=
-
-# UI settings overwrite
-# NEXT_PUBLIC_ENABLE_SEARCH=true
-# NEXT_PUBLIC_ENABLE_FEED=true
-# NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true
-# NEXT_PUBLIC_ENABLE_ACTIVITY=true
-# NEXT_PUBLIC_ENABLE_SESSION_KEY=true
-# NEXT_PUBLIC_ENABLE_EMAIL_SETTINGS=true
-# NEXT_PUBLIC_ENABLE_FAUCET=true
-# NEXT_PUBLIC_ENABLE_DOWNVOTES=true
-# NEXT_PUBLIC_ENABLE_GRAPHQL=true
-# NEXT_PUBLIC_ENABLE_CONTRIBUTION_PAGE=true
-# NEXT_PUBLIC_ENABLE_ONCHAIN_ACTIVITIES=true
-# NEXT_PUBLIC_ENABLE_SQUID_DATA_SOURCE=true
diff --git a/.gitignore b/.gitignore
index 2bb7e1c0a..028c3dfcf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -60,6 +60,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
+.env*.local
 .env
 public/env.js
 
diff --git a/dev.env b/dev.env
index 2d6c99493..f6c6918a6 100644
--- a/dev.env
+++ b/dev.env
@@ -1,39 +1,42 @@
 # Logger level
-LOG_LEVEL=debug
+NEXT_PUBLIC_LOG_LEVEL=debug
 
 # App kind: 'polkaverse' | 'staging'
-APP_KIND=polkaverse
+NEXT_PUBLIC_APP_KIND=polkaverse
 
 # Connection kind:
 # 'local'   - For development in localhost infrastructure (local Substrate, IPFS, etc.)
 # 'dev'     - For development in betanet/mainnet infrastructure.
 # 'staging' - For development in staging infrastructure.
 # 'main'    - If running this web app on a production server.
-CONNECTION_KIND=dev
+NEXT_PUBLIC_CONNECTION_KIND=staging
+
+SELLER_CLIENT_ID=''
+SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=''
 
 # Id for Google Analytics
-# GA_ID=
+# NEXT_PUBLIC_GA_ID=
 
-# ENABLE_MAINTENANCE_PAGE=true
-# MAINTENANCE_TEXT=''
+# NEXT_PUBLIC_ENABLE_MAINTENANCE_PAGE=true
+# NEXT_PUBLIC_MAINTENANCE_TEXT=''
 
-# SUBSTRATE_URL=
-# SUBSTRATE_RPC_URL=
-# OFFCHAIN_URL=
-# OFFCHAIN_WS=
-# GRAPHQL_URL=
-# IPFS_NODE_URL=
+# NEXT_PUBLIC_SUBSTRATE_URL=
+# NEXT_PUBLIC_SUBSTRATE_RPC_URL=
+# NEXT_PUBLIC_OFFCHAIN_URL=
+# NEXT_PUBLIC_OFFCHAIN_WS=
+# NEXT_PUBLIC_GRAPHQL_URL=
+# NEXT_PUBLIC_IPFS_NODE_URL=
 
 # UI settings overwrite
-# ENABLE_SEARCH=true
-# ENABLE_FEED=true
-# ENABLE_NOTIFICATIONS=true
-# ENABLE_ACTIVITY=true
-# ENABLE_SESSION_KEY=true
-# ENABLE_EMAIL_SETTINGS=true
-# ENABLE_FAUCET=true
-# ENABLE_DOWNVOTES=true
-# ENABLE_GRAPHQL=true
-# ENABLE_CONTRIBUTION_PAGE=true
-# ENABLE_ONCHAIN_ACTIVITIES=true
-# ENABLE_SQUID_DATA_SOURCE=true
+# NEXT_PUBLIC_ENABLE_SEARCH=true
+# NEXT_PUBLIC_ENABLE_FEED=true
+# NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true
+# NEXT_PUBLIC_ENABLE_ACTIVITY=true
+# NEXT_PUBLIC_ENABLE_SESSION_KEY=true
+# NEXT_PUBLIC_ENABLE_EMAIL_SETTINGS=true
+# NEXT_PUBLIC_ENABLE_FAUCET=true
+# NEXT_PUBLIC_ENABLE_DOWNVOTES=true
+# NEXT_PUBLIC_ENABLE_GRAPHQL=true
+# NEXT_PUBLIC_ENABLE_CONTRIBUTION_PAGE=true
+# NEXT_PUBLIC_ENABLE_ONCHAIN_ACTIVITIES=true
+# NEXT_PUBLIC_ENABLE_SQUID_DATA_SOURCE=true
diff --git a/package.json b/package.json
index af7235202..516785115 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "check": "yarn lint",
     "lint": "tsc && eslint --cache 'src/**/*.{ts,tsx,js}'",
     "pre-commit": "pretty-quick --staged && yarn run lint",
-    "test": "yarn patch && echo \"skipping tests\"",
+    "test": "echo \"skipping tests\"",
     "test:e2e": "yarn build && yarn cy:test",
     "test:e2e:video": "yarn build && yarn cy:test:video",
     "cy:open": "cypress open",
@@ -22,11 +22,9 @@
     "cy:run": "export CYPRESS_VIDEO=false && cypress run",
     "cy:run:video": "cypress run",
     "dev": "NODE_OPTIONS=--max_old_space_size=4096 next -p 3003",
-    "analyze": "yarn patch && ANALYZE=true next build",
-    "build": "yarn patch && next build",
+    "analyze": "ANALYZE=true next build",
+    "build": "next build",
     "export": "next export",
-    "export-env": "node export-env.js",
-    "patch": "yarn export-env",
     "start": "NODE_ENV=production yarn patch && next start -p 3003",
     "graphql:types": "./scripts/graphql-generate-types.sh",
     "prepare": "husky install",
diff --git a/src/pages/_app.js b/src/pages/_app.js
index b617e214e..476894108 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -47,7 +47,7 @@ function MyApp(props) {
   return (
     <>
       <Head>
-        <script src='/env.js' />
+        {/* <script src='/env.js' /> */}
         {/*
           See how to work with custom fonts in Next.js:
           https://codeconqueror.com/blog/using-google-fonts-with-next-js
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index d5cd6079e..13a1662f5 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -28,7 +28,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
     )
 
-    const clientId = process.env.CLIENT_ID as string
+    const clientId = process.env.SELLER_CLIENT_ID as string
 
     const signedToken = naclSeal(
       stringToU8a(tokenMessage),

From 71084ce10f18c317d5f027c0a737870835f1513b Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 17 Apr 2023 13:41:15 +0300
Subject: [PATCH 17/54] Change readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 82adb49de..a0b756371 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ cd polkaverse
 Create an `.env` file with settings that allow the app to connect to Subsocial's infrastructure:
 
 ```sh
-cp dev.env .env
+cp dev.env .env.local
 ```
 
 Install project dependencies:

From 362c577961dcf3ee5714e7a29dbffcbb8e9bb5dc Mon Sep 17 00:00:00 2001
From: oap75 <oap.py@yahoo.com>
Date: Mon, 17 Apr 2023 13:58:40 +0300
Subject: [PATCH 18/54] feat: add new secret ENVs

---
 .github/workflows/feature-based.yaml | 2 ++
 ci.env                               | 2 ++
 docker/Dockerfile                    | 8 ++++++++
 3 files changed, 12 insertions(+)

diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
index 418bb826d..a50d3d8ff 100644
--- a/.github/workflows/feature-based.yaml
+++ b/.github/workflows/feature-based.yaml
@@ -50,6 +50,8 @@ jobs:
             GH_GA_ID=fake
             GH_APP_KIND=staging
             GH_CONNECTION_KIND=staging
+            GH_SELLER_CLIENT_ID=${{ secrets.STAGING_GH_SELLER_CLIENT_ID }}
+            GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${{ secrets.STAGING_GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER }}
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache
diff --git a/ci.env b/ci.env
index 4036e2386..e4dd3bdf2 100644
--- a/ci.env
+++ b/ci.env
@@ -9,3 +9,5 @@ IPFS_NODE_URL='$GH_IPFS_NODE_URL'
 GA_ID='$GH_GA_ID'
 APP_KIND='$GH_APP_KIND'
 APP_BASE_URL='$GH_APP_BASE_URL'
+SELLER_CLIENT_ID='$GH_SELLER_CLIENT_ID'
+SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER='$GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER'
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 1d09966db..7980bd864 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -9,6 +9,8 @@ ARG GH_GA_ID
 ARG GH_CONNECTION_KIND
 ARG GH_APP_KIND
 ARG GH_APP_BASE_URL
+ARG GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER
+ARG GH_SELLER_CLIENT_ID
 
 ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
@@ -18,6 +20,8 @@ ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     GA_ID=${GH_GA_ID} \
     APP_KIND=${GH_APP_KIND} \
     APP_BASE_URL=${GH_APP_BASE_URL} \
+    SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
+    SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
     CONNECTION_KIND=${GH_CONNECTION_KIND}
 
 
@@ -53,6 +57,8 @@ ARG GH_GA_ID
 ARG GH_CONNECTION_KIND
 ARG GH_APP_KIND
 ARG GH_APP_BASE_URL
+ARG GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER
+ARG GH_SELLER_CLIENT_ID
 
 ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
@@ -62,6 +68,8 @@ ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     GA_ID=${GH_GA_ID}  \
     APP_KIND=${GH_APP_KIND} \
     APP_BASE_URL=${GH_APP_BASE_URL} \
+    SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
+    SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
     CONNECTION_KIND=${GH_CONNECTION_KIND}
 
 WORKDIR /app

From 339dd9d3a4a65e6646d6ca834cebcf6140422e55 Mon Sep 17 00:00:00 2001
From: oap75 <oap.py@yahoo.com>
Date: Mon, 17 Apr 2023 14:06:32 +0300
Subject: [PATCH 19/54] feat: add new secret ENVs

---
 .github/workflows/feature-based.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
index a50d3d8ff..4a803b3fb 100644
--- a/.github/workflows/feature-based.yaml
+++ b/.github/workflows/feature-based.yaml
@@ -51,7 +51,7 @@ jobs:
             GH_APP_KIND=staging
             GH_CONNECTION_KIND=staging
             GH_SELLER_CLIENT_ID=${{ secrets.STAGING_GH_SELLER_CLIENT_ID }}
-            GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${{ secrets.STAGING_GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER }}
+            GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${{ secrets.STAGING_GH_SELLER_TOKEN_SIGNER }}
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache

From 5abca62916b22d04c0818895f3d6d3739e39fb1f Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 17 Apr 2023 14:19:58 +0300
Subject: [PATCH 20/54] Remove export-env command

---
 docker/Dockerfile | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docker/Dockerfile b/docker/Dockerfile
index 7980bd864..a2cdfd6b2 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -42,9 +42,7 @@ COPY . .
 RUN yarn
 
 COPY ci.env .env
-RUN yarn export-env \
-    && NODE_ENV=production yarn build  \
-    && yarn export-env
+RUN NODE_ENV=production yarn build
 
 FROM node:16-alpine3.15
 

From ba212b842967942f4391ba1f6498ca348e2a395c Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 17 Apr 2023 14:33:06 +0300
Subject: [PATCH 21/54] Remove patch command

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 516785115..cf0bb3cc6 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "analyze": "ANALYZE=true next build",
     "build": "next build",
     "export": "next export",
-    "start": "NODE_ENV=production yarn patch && next start -p 3003",
+    "start": "NODE_ENV=production next start -p 3003",
     "graphql:types": "./scripts/graphql-generate-types.sh",
     "prepare": "husky install",
     "format": "prettier --write src"

From 70982b16e97a5f023cf2c98f0c55fb696b83a99c Mon Sep 17 00:00:00 2001
From: oap75 <oap.py@yahoo.com>
Date: Mon, 17 Apr 2023 15:14:25 +0300
Subject: [PATCH 22/54] feat: add  NEXT_PUBLIC to all ENVs

---
 ci.env            | 20 ++++++++++----------
 docker/Dockerfile | 44 ++++++++++++++++++++++----------------------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/ci.env b/ci.env
index e4dd3bdf2..cec38052b 100644
--- a/ci.env
+++ b/ci.env
@@ -1,13 +1,13 @@
 LOG_LEVEL=info
-APP_KIND=subsocial
-CONNECTION_KIND='$GH_CONNECTION_KIND'
-SUBSTRATE_URL='$GH_SUBSTRATE_URL' 
-SUBSTRATE_RPC_URL='$GH_SUBSTRATE_RPC_URL' 
-OFFCHAIN_URL='$GH_OFFCHAIN_URL' 
-OFFCHAIN_WS='$GH_OFFCHAIN_WS' 
-IPFS_NODE_URL='$GH_IPFS_NODE_URL'
-GA_ID='$GH_GA_ID'
-APP_KIND='$GH_APP_KIND'
-APP_BASE_URL='$GH_APP_BASE_URL'
+NEXT_PUBLIC_APP_KIND=subsocial
+NEXT_PUBLIC_CONNECTION_KIND='$GH_CONNECTION_KIND'
+NEXT_PUBLIC_SUBSTRATE_URL='$GH_SUBSTRATE_URL' 
+NEXT_PUBLIC_SUBSTRATE_RPC_URL='$GH_SUBSTRATE_RPC_URL' 
+NEXT_PUBLIC_OFFCHAIN_URL='$GH_OFFCHAIN_URL' 
+NEXT_PUBLIC_OFFCHAIN_WS='$GH_OFFCHAIN_WS' 
+NEXT_PUBLIC_IPFS_NODE_URL='$GH_IPFS_NODE_URL'
+NEXT_PUBLIC_GA_ID='$GH_GA_ID'
+NEXT_PUBLIC_APP_KIND='$GH_APP_KIND'
+NEXT_PUBLIC_APP_BASE_URL='$GH_APP_BASE_URL'
 SELLER_CLIENT_ID='$GH_SELLER_CLIENT_ID'
 SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER='$GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER'
diff --git a/docker/Dockerfile b/docker/Dockerfile
index a2cdfd6b2..0703c70bd 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -12,17 +12,17 @@ ARG GH_APP_BASE_URL
 ARG GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER
 ARG GH_SELLER_CLIENT_ID
 
-ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
-    SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
-    OFFCHAIN_URL=${GH_OFFCHAIN_URL} \
-    OFFCHAIN_WS=${GH_OFFCHAIN_WS} \
-    IPFS_NODE_URL=${GH_IPFS_NODE_URL} \
-    GA_ID=${GH_GA_ID} \
-    APP_KIND=${GH_APP_KIND} \
-    APP_BASE_URL=${GH_APP_BASE_URL} \
-    SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
-    SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
-    CONNECTION_KIND=${GH_CONNECTION_KIND}
+ENV  NEXT_PUBLIC_SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
+     NEXT_PUBLIC_SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
+     NEXT_PUBLIC_OFFCHAIN_URL=${GH_OFFCHAIN_URL} \
+     NEXT_PUBLIC_OFFCHAIN_WS=${GH_OFFCHAIN_WS} \
+     NEXT_PUBLIC_IPFS_NODE_URL=${GH_IPFS_NODE_URL} \
+     NEXT_PUBLIC_GA_ID=${GH_GA_ID} \
+     NEXT_PUBLIC_APP_KIND=${GH_APP_KIND} \
+     NEXT_PUBLIC_APP_BASE_URL=${GH_APP_BASE_URL} \
+     SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
+     SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
+     NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND}
 
 
 RUN apt-get update \
@@ -58,17 +58,17 @@ ARG GH_APP_BASE_URL
 ARG GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER
 ARG GH_SELLER_CLIENT_ID
 
-ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
-    SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
-    OFFCHAIN_URL=${GH_OFFCHAIN_URL} \
-    OFFCHAIN_WS=${GH_OFFCHAIN_WS} \
-    IPFS_NODE_URL=${GH_IPFS_NODE_URL} \
-    GA_ID=${GH_GA_ID}  \
-    APP_KIND=${GH_APP_KIND} \
-    APP_BASE_URL=${GH_APP_BASE_URL} \
-    SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
-    SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
-    CONNECTION_KIND=${GH_CONNECTION_KIND}
+ENV  NEXT_PUBLIC_SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
+     NEXT_PUBLIC_SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
+     NEXT_PUBLIC_OFFCHAIN_URL=${GH_OFFCHAIN_URL} \
+     NEXT_PUBLIC_OFFCHAIN_WS=${GH_OFFCHAIN_WS} \
+     NEXT_PUBLIC_IPFS_NODE_URL=${GH_IPFS_NODE_URL} \
+     NEXT_PUBLIC_GA_ID=${GH_GA_ID}  \
+     NEXT_PUBLIC_APP_KIND=${GH_APP_KIND} \
+     NEXT_PUBLIC_APP_BASE_URL=${GH_APP_BASE_URL} \
+     SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
+     SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
+     NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND}
 
 WORKDIR /app
 

From 58c7f4f37b9a4a9133147b98a7f487b4b1a3a6a1 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 18 Apr 2023 23:14:11 +0300
Subject: [PATCH 23/54] Add destination field

---
 .../domains/EligibleDomainsSection.tsx        | 155 +++++++++++-------
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  31 ++--
 ...ByDotModal.tsx => RegisterDomainModal.tsx} |  82 +++++----
 .../domains/dot-seller/seller-queries.ts      |  11 +-
 src/components/domains/dot-seller/utils.tsx   |  27 ++-
 src/components/domains/index.tsx              |   2 -
 .../domains/pendingOrders/index.tsx           |   4 +-
 src/components/donate/LazyTxButton.tsx        |  14 +-
 .../substrate/SubstrateTxButton.tsx           |   7 +-
 src/components/utils/OffchainUtils.ts         |  14 ++
 src/components/utils/TxButton.tsx             |   2 +-
 src/pages/api/pending-order/create.ts         |   4 +-
 src/pages/api/pending-order/delete.ts         |  64 ++++++++
 .../domainPendingOrders/pendingOrdersSlice.ts |   1 +
 14 files changed, 297 insertions(+), 121 deletions(-)
 rename src/components/domains/dot-seller/{BuyByDotModal.tsx => RegisterDomainModal.tsx} (62%)
 create mode 100644 src/pages/api/pending-order/delete.ts

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index e4a7fba76..17579fcb2 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -3,10 +3,15 @@ import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
 import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import BN from 'bn.js'
 import clsx from 'clsx'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
-import { useCreateReloadPendingOrdersByAccount, useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useAppDispatch } from 'src/rtk/app/store'
+import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import {
+  useCreateReloadPendingOrdersByAccount,
+  useSelectPendingOrderById,
+} from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import {
   useBuildDomainsWithTldByDomain,
   useCreateReloadMyDomains,
@@ -14,20 +19,19 @@ import {
   useIsReservedWord,
   useIsSupportedTld,
 } from '../../rtk/features/domains/domainHooks'
-import { DomainEntity } from '../../rtk/features/domains/domainsSlice'
 import { useIsMyAddress, useMyAddress } from '../auth/MyAccountsContext'
-import { FormatBalance } from '../common/balances'
 import { TxCallback } from '../substrate/SubstrateTxButton'
 import useSubstrate from '../substrate/useSubstrate'
 import { Loading, LocalIcon } from '../utils'
 import { MutedDiv } from '../utils/MutedText'
+import { createPendingOrder, deletePendingOrder } from '../utils/OffchainUtils'
 import TxButton from '../utils/TxButton'
-import ClaimFreeDomainModal from './ClaimFreeDomainModal'
-import BuyByDotButton from './dot-seller/BuyByDotModal'
+import RegisterDomainButton from './dot-seller/RegisterDomainModal'
+import { pendingOrderAction } from './dot-seller/utils'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
-import { DomainDetails, ResultContainer, getTime } from './utils'
-import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import { DomainDetails, getTime, ResultContainer } from './utils'
+import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
 
 const log = newLogger('DD')
 
@@ -45,25 +49,44 @@ const BLOCK_TIME = 12
 const SECS_IN_DAY = 60 * 60 * 24
 const BLOCKS_IN_YEAR = new BN((SECS_IN_DAY * 365) / BLOCK_TIME)
 
-const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: DomainProps) => {
+type BuyDomainSectionProps = {
+  domainName: string
+  label?: string
+}
+
+export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSectionProps) => {
   const reloadMyDomains = useCreateReloadMyDomains()
   const { openManageModal } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
   const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
+  const { purchaser } = useManageDomainContext()
+  const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
+  const pendingOrder = useSelectPendingOrderById(domainName)
+  const dispatch = useAppDispatch()
 
   if (!isApiReady) return null
 
-  const price = api?.consts.domains.baseDomainDeposit.toString()
-
   const getTxParams = () => {
-    return [domain, null, BLOCKS_IN_YEAR]
+    return [domainName, null, BLOCKS_IN_YEAR]
   }
 
   const onSuccess: TxCallback = async () => {
-    await reloadMyDomains()
-    reloadPendingOrders(myAddress)
-    openManageModal('success', domain)
+    if (!sellerConfig) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    reloadMyDomains()
+
+    await pendingOrderAction({
+      action: deletePendingOrder,
+      args: [domainName, sellerApiAuthTokenManager],
+      account: purchaser,
+      dispatch,
+    })
+
+    reloadPendingOrders(purchaser)
+    openManageModal('success', domainName)
   }
 
   const onFailed = async (errorInfo: any) => {
@@ -72,12 +95,34 @@ const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: Domain
     showErrorMessage(jsonErr)
   }
 
+  const onClick = async () => {
+    if (!sellerConfig || !myAddress) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    if (pendingOrder) {
+      await pendingOrderAction({
+        action: deletePendingOrder,
+        args: [domainName, sellerApiAuthTokenManager],
+        account: purchaser,
+        dispatch,
+      })
+    }
+
+    return await pendingOrderAction({
+      action: createPendingOrder,
+      args: [purchaser, domainName, sellerApiAuthTokenManager, 'polkadot'],
+      account: purchaser,
+      dispatch,
+    })
+  }
+
   return (
-    <span className='d-flex align-items-center'>
-      {price && <FormatBalance className='mr-2' value={price} isShort />}
+    <span className='d-flex align-items-center w-100'>
       <TxButton
         type='primary'
         customNodeApi={api}
+        accountId={purchaser}
         block
         size='middle'
         label={label}
@@ -85,6 +130,7 @@ const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: Domain
         onSuccess={onSuccess}
         onFailed={onFailed}
         isFreeTx
+        onClick={() => onClick()}
         params={getTxParams}
         className={styles.DomainPrimaryButton}
       />
@@ -92,32 +138,32 @@ const BuyDomainSection = ({ domain: { id: domain }, label = 'Register' }: Domain
   )
 }
 
-const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
-  const [openConfirmation, setOpenConfirmation] = useState(false)
-  const { promoCode } = useManageDomainContext()
-  return (
-    <div className='d-flex align-items-center'>
-      <ClaimFreeDomainModal
-        onCancel={() => setOpenConfirmation(false)}
-        visible={openConfirmation}
-        domain={domain}
-        promoCode={promoCode}
-      />
-      <span className='font-weight-bold mr-2'>Free</span>
-      <Button
-        type='primary'
-        size='middle'
-        className={clsx(styles.DomainPrimaryButton)}
-        onClick={() => setOpenConfirmation(true)}
-      >
-        <span style={{ position: 'relative', top: '-1px' }} className='mr-1'>
-          🎁
-        </span>
-        Claim
-      </Button>
-    </div>
-  )
-}
+// const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
+//   const [openConfirmation, setOpenConfirmation] = useState(false)
+//   const { promoCode } = useManageDomainContext()
+//   return (
+//     <div className='d-flex align-items-center'>
+//       <ClaimFreeDomainModal
+//         onCancel={() => setOpenConfirmation(false)}
+//         visible={openConfirmation}
+//         domain={domain}
+//         promoCode={promoCode}
+//       />
+//       <span className='font-weight-bold mr-2'>Free</span>
+//       <Button
+//         type='primary'
+//         size='middle'
+//         className={clsx(styles.DomainPrimaryButton)}
+//         onClick={() => setOpenConfirmation(true)}
+//       >
+//         <span style={{ position: 'relative', top: '-1px' }} className='mr-1'>
+//           🎁
+//         </span>
+//         Claim
+//       </Button>
+//     </div>
+//   )
+// }
 
 export const DomainItem = ({ domain, action }: DomainItemProps) => {
   const actionComponent = isFunction(action) ? action() : action
@@ -159,11 +205,10 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 
 const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
-  const { promoCode, variant } = useManageDomainContext()
+  // const { variant } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const pendingOrder = useSelectPendingOrderById(domain.id)
-
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
   const { account } = pendingOrder || {}
@@ -182,20 +227,11 @@ const DomainAction = ({ domain }: DomainProps) => {
 
   const label = account === myAddress ? 'Continue' : undefined
 
-  let DefaultDomainAction =
-    promoCode && domain.id.endsWith('.sub') ? ClaimFreeDomainSection : BuyDomainSection
-
-  const action =
-    variant === 'SUB' ? (
-      <DefaultDomainAction domain={domain} label={label} />
-    ) : (
-      <BuyByDotButton
-        domainName={domain.id}
-        label={label}
-      />
-    )
-
-  return owner ? <UnavailableBtn domain={domain} /> : action
+  return owner ? (
+    <UnavailableBtn domain={domain} />
+  ) : (
+    <RegisterDomainButton domainName={domain.id} label={label} />
+  )
 }
 
 // type FoundDomainsProps = {
@@ -215,6 +251,7 @@ const DomainAction = ({ domain }: DomainProps) => {
 //   )
 // }
 //
+
 type FoundDomainCardProps = {
   domain: DomainDetails
   err?: string
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index 52a7ee6d4..cf5d9a984 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -10,13 +10,12 @@ import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import LazyTxButton from 'src/components/donate/LazyTxButton'
 import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
-import { showErrorMessage } from 'src/components/utils/Message'
-import { createPendingOrder } from 'src/components/utils/OffchainUtils'
+import { createPendingOrder, deletePendingOrder } from 'src/components/utils/OffchainUtils'
 import { useAppDispatch } from 'src/rtk/app/store'
-import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import { useGetDecimalAndSymbol } from './utils'
+import { pendingOrderAction, useGetDecimalAndSymbol } from './utils'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -34,6 +33,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
   const { getApiByNetwork } = useLazyConnectionsContext()
+  const pendingOrder = useSelectPendingOrderById(domainName)
 
   const { sellerChain, domainRegistrationPriceFixed } = sellerConfig || {}
 
@@ -101,16 +101,21 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
-    const result = await createPendingOrder(purchaser, domainName, sellerApiAuthTokenManager)
-
-    if (result?.success) {
-      dispatch(fetchPendingOrdersByAccount({ id: recipient, reload: true }))
-      return false
-    } else {
-      showErrorMessage(result?.errors)
-
-      return true
+    if (pendingOrder) {
+      await pendingOrderAction({
+        action: deletePendingOrder,
+        args: [domainName, sellerApiAuthTokenManager],
+        account: purchaser,
+        dispatch
+      })
     }
+
+    return await pendingOrderAction({
+      action: createPendingOrder,
+      args: [purchaser, domainName, sellerApiAuthTokenManager, 'polkadot'],
+      account: purchaser,
+      dispatch
+    })
   }
 
   return (
diff --git a/src/components/domains/dot-seller/BuyByDotModal.tsx b/src/components/domains/dot-seller/RegisterDomainModal.tsx
similarity index 62%
rename from src/components/domains/dot-seller/BuyByDotModal.tsx
rename to src/components/domains/dot-seller/RegisterDomainModal.tsx
index cab9ee8eb..bc521563d 100644
--- a/src/components/domains/dot-seller/BuyByDotModal.tsx
+++ b/src/components/domains/dot-seller/RegisterDomainModal.tsx
@@ -1,28 +1,40 @@
-import { Button, Modal, Space } from 'antd'
+import { Button, Modal, Space, Tag } from 'antd'
 import clsx from 'clsx'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
+import { useSubstrate } from 'src/components/substrate'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
+import { BuyDomainSection } from '../EligibleDomainsSection'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import BuyByDotTxButton from './BuyByDotTxButton'
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from './utils'
+import { useCreateBalance } from '../../common/balances/Balance'
+import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 
 type ModalBodyProps = {
   domainName: string
+  price?: string
 }
 
-const ModalBody = ({ domainName }: ModalBodyProps) => {
+const ModalBody = ({ domainName, price }: ModalBodyProps) => {
   const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
+  const { variant } = useManageDomainContext()
+  const nativeBalance = useCreateBalance(purchaser)
+  const isMyAddress = useIsMyAddress(recipient)
 
-  const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
+  const { sellerChain } = sellerConfig || {}
+
+  const isSub = variant === 'SUB'
 
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
+  const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
+
   const balance = useBalancesByNetwork({
     account: purchaser,
     network: sellerChain,
@@ -31,6 +43,8 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
 
   const { freeBalance } = balance || {}
 
+  const balanceValue = isSub ? nativeBalance : freeBalance
+
   return (
     <Space direction='vertical' size={24} className={clsx(styles.ModalBody, 'w-100')}>
       <Space direction='vertical' size={8} className={'w-100'}>
@@ -41,7 +55,7 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           <div className='d-flex align-items-center'>
             <MutedDiv>Balance:</MutedDiv>
             <div className='ml-1'>
-              <FormatBalance value={freeBalance} decimals={decimal} currency={symbol} />
+              <FormatBalance value={balanceValue} {...chainProps} />
             </div>
           </div>
         </div>
@@ -50,24 +64,25 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           setValue={setPurchaser}
           value={purchaser}
           withAvatar={false}
-          network={sellerChain}
+          network={isSub ? undefined : sellerChain}
         />
       </Space>
-      <Space direction='vertical' size={8} className={'w-100'}>
-        <div className={clsx(styles.Recipient)}>
+      {variant !== 'SUB' && <Space direction='vertical' size={8} className={'w-100'}>
+        <div className={clsx(styles.Recipient, 'd-flex align-items-center')}>
           <div>Recipient </div>
+          {isMyAddress && <Tag color='green' className='ml-2'>Your account</Tag>}
         </div>
         <SelectAccountInput
           className={`${styles.Select} w-100`}
           setValue={setRecipient}
           value={recipient}
           withAvatar={false}
-          network={sellerChain}
+          network={isSub ? undefined : sellerChain}
         />
         <MutedDiv className={styles.RecipientFieldDesc}>
           Choose the recipient to whom the domain will be registered
         </MutedDiv>
-      </Space>
+      </Space>}
       <Space direction='vertical' size={16} className={clsx(styles.DomainInfo, 'w-100')}>
         <div className='d-flex align-items-center justify-content-between'>
           <MutedDiv>Domain name:</MutedDiv>
@@ -77,9 +92,8 @@ const ModalBody = ({ domainName }: ModalBodyProps) => {
           <MutedDiv>Price:</MutedDiv>
           <div className='font-weight-bold'>
             <FormatBalance
-              value={domainRegistrationPriceFixed}
-              decimals={decimal}
-              currency={symbol}
+              value={price}
+              {...chainProps}
             />
           </div>
         </div>
@@ -92,9 +106,13 @@ type BuyDomainModalProps = {
   domainName: string
   open: boolean
   close: () => void
+  variant: RegisterDomainVairant
+  price?: string
 }
 
-const BuyDomainModal = ({ domainName, open, close }: BuyDomainModalProps) => {
+const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps) => {
+  const { variant } = useManageDomainContext()
+
   const title = (
     <div className={styles.ModalTitle}>
       <h2>Register new domain</h2>
@@ -103,7 +121,11 @@ const BuyDomainModal = ({ domainName, open, close }: BuyDomainModalProps) => {
 
   const modalFooter = (
     <div className={styles.FooterButtons}>
-      <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} />
+      {variant === 'DOT' ? (
+        <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} />
+      ) : (
+        <BuyDomainSection domainName={domainName} />
+      )}
     </div>
   )
 
@@ -117,49 +139,51 @@ const BuyDomainModal = ({ domainName, open, close }: BuyDomainModalProps) => {
       destroyOnClose
       className={clsx('DfSignInModal', styles.DomainModal)}
     >
-      <ModalBody domainName={domainName} />
+      <ModalBody domainName={domainName} price={price} />
     </Modal>
   )
 }
 
+type RegisterDomainVairant = 'DOT' | 'SUB'
+
 type BuyByDotButtonProps = {
   domainName: string
   label?: string
   withPrice?: boolean
 }
 
-const BuyByDotButton = ({
+const RegisterDomainButton = ({
   domainName,
   label = 'Register',
   withPrice = true,
 }: BuyByDotButtonProps) => {
   const sellerConfig = useSelectSellerConfig()
   const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
+  const { variant } = useManageDomainContext()
+  const { api } = useSubstrate()
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
   const close = () => setOpen(false)
 
-  const price = domainRegistrationPriceFixed ? (
-    <FormatBalance
-      value={domainRegistrationPriceFixed.toString()}
-      decimals={decimal}
-      currency={symbol}
-    />
-  ) : (
-    <div>-</div>
-  )
+  const price = useMemo(() => {
+    return variant === 'SUB'
+      ? api?.consts.domains.baseDomainDeposit.toString()
+      : domainRegistrationPriceFixed
+  }, [variant])
+
+  const chainProps = variant === 'SUB' ? {} : { decimals: decimal, currency: symbol }
 
   return (
     <span className={styles.RegisterButton}>
-      {withPrice && <div>{price}</div>}
+      {withPrice && <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>}
       <Button type={'primary'} block onClick={() => setOpen(true)}>
         {label}
       </Button>
-      <BuyDomainModal domainName={domainName} open={open} close={close} />
+      <BuyDomainModal domainName={domainName} open={open} close={close} variant={variant} price={price} />
     </span>
   )
 }
 
-export default BuyByDotButton
+export default RegisterDomainButton
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index 90c744f4d..d0c0d0de1 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -68,7 +68,14 @@ export const PROCESSING_REGISTRATION_ORDERS = gql`
 `
 
 export const CREATE_PENDING_ORDER = gql`
-  mutation CreatePendingOrder($domain: String!, $account: String!) {
-    createPendingOrder(account: $account, domain: $domain)
+  mutation CreatePendingOrder($domain: String!, $destination: String!, $account: String!) {
+    createPendingOrder(account: $account, destination: $destination, domain: $domain)
   }
 `
+
+export const DELETE_PENDING_ORDER = gql`
+mutation DeletePendingOrderById($id: String!) {
+  deletePendingOrderById(id: $id)
+}
+
+`
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
index 431a34ab0..f0e159fae 100644
--- a/src/components/domains/dot-seller/utils.tsx
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -1,9 +1,12 @@
+import { AppDispatch } from 'src/rtk/app/store'
 import { useChainInfo } from '../../../rtk/features/chainsInfo/chainsInfoHooks'
+import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import { showErrorMessage } from 'src/components/utils/Message'
 
 export const useGetDecimalAndSymbol = (network?: string) => {
   const chainsInfo = useChainInfo()
 
-  if(!network) return {}
+  if (!network) return {}
 
   const { tokenDecimals, tokenSymbols, nativeToken } = chainsInfo[network] || {}
 
@@ -11,4 +14,24 @@ export const useGetDecimalAndSymbol = (network?: string) => {
   const symbol = tokenSymbols?.[0] || nativeToken
 
   return { decimal, symbol }
-}
\ No newline at end of file
+}
+
+type PendingActionProps<T> = {
+  action: (...args: T[]) => Promise<any>
+  args: T[]
+  dispatch: AppDispatch
+  account: string
+}
+
+export const pendingOrderAction = async <T extends any>({ action, args, dispatch, account }: PendingActionProps<T>) => {
+  const result = await action(...args)
+
+  if (result?.success) {
+    dispatch(fetchPendingOrdersByAccount({ id: account, reload: true }))
+    return false
+  } else {
+    showErrorMessage(result?.errors)
+
+    return true
+  }
+}
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index 1af26efe3..2996c9ba6 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -7,7 +7,6 @@ import { DomainServerProps } from 'src/pages/dd'
 import { useMyDomains } from 'src/rtk/features/domains/domainHooks'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import { PageContent } from '../main/PageWrapper'
-// import Embed from '../posts/embed/Embed'
 import { useFetchDomainPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useFetchSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useIsMobileWidthOrDevice } from '../responsive'
@@ -35,7 +34,6 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
   const { api, isApiReady, subsocial } = useSubstrate()
   useFetchNewDomains(domain?.id)
 
-
   const onSearchDomain = async (domain?: string) => {
     if (!domain) return
     const data = await subsocial.findDomain(domain)
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 3a7be7fc3..d355ec98b 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -8,7 +8,7 @@ import { useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingO
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
-import BuyByDotButton from '../dot-seller/BuyByDotModal'
+import RegisterDomainButton from '../dot-seller/RegisterDomainModal'
 import { getTime } from '../utils'
 import styles from './Index.module.sass'
 
@@ -37,7 +37,7 @@ const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
           <InfoCircleOutlined />
         </Tooltip>
       </div>
-      <BuyByDotButton domainName={domain} label={'Continue'} withPrice={false} />
+      <RegisterDomainButton domainName={domain} label={'Continue'} withPrice={false} />
     </div>
   )
 }
diff --git a/src/components/donate/LazyTxButton.tsx b/src/components/donate/LazyTxButton.tsx
index 2d5490552..0a6659787 100644
--- a/src/components/donate/LazyTxButton.tsx
+++ b/src/components/donate/LazyTxButton.tsx
@@ -48,7 +48,7 @@ export type TxButtonProps = BaseTxButtonProps & {
   title?: string
   unsigned?: boolean
   onValidate?: () => boolean | Promise<boolean>
-  onClick?: () => Promise<boolean | undefined>
+  onClick?: () => Promise<boolean | undefined> | void
   onSuccess?: TxCallback
   onFailed?: TxFailedCallback
   successMessage?: SuccessMessage
@@ -59,11 +59,11 @@ export type TxButtonProps = BaseTxButtonProps & {
 }
 
 export const getExtrinsicByApi = async (
-  api: ApiPromise, 
-  tx?: string, 
-  params?: any[] | GetTxParamsFn | GetTxParamsAsyncFn
+  api: ApiPromise,
+  tx?: string,
+  params?: any[] | GetTxParamsFn | GetTxParamsAsyncFn,
 ): Promise<SubmittableExtrinsic> => {
-  const [ pallet, method ] = (tx || '').split('.')
+  const [pallet, method] = (tx || '').split('.')
 
   if (!api.tx[pallet]) {
     throw new Error(`Unable to find api.tx.${pallet}`)
@@ -76,7 +76,7 @@ export const getExtrinsicByApi = async (
     resultParams = await params()
   }
 
-  return api.tx[pallet][method](...(resultParams))
+  return api.tx[pallet][method](...resultParams)
 }
 
 function LazyTxButton({
@@ -240,7 +240,7 @@ function LazyTxButton({
 
     const preventTransaction = await onClick?.()
 
-    if(preventTransaction === true) return
+    if (preventTransaction === true && preventTransaction !== undefined) return
 
     const txType = unsigned ? 'unsigned' : 'signed'
     log.debug(`Sending ${txType} tx...`)
diff --git a/src/components/substrate/SubstrateTxButton.tsx b/src/components/substrate/SubstrateTxButton.tsx
index c501b9af7..e0ee4a328 100644
--- a/src/components/substrate/SubstrateTxButton.tsx
+++ b/src/components/substrate/SubstrateTxButton.tsx
@@ -51,7 +51,7 @@ export type TxButtonProps = BaseTxButtonProps & {
   title?: string
   unsigned?: boolean
   onValidate?: () => boolean | Promise<boolean>
-  onClick?: () => void
+  onClick?: () => Promise<any | undefined> | void
   onSuccess?: TxCallback
   isFreeTx?: boolean
   onFailed?: TxFailedCallback
@@ -86,6 +86,7 @@ function TxButton({
   const { api: subsocialApi } = useSubstrate()
   const openOnBoardingModal = useOpenCloseOnBoardingModal()
   const [isSending, , setIsSending] = useToggle(false)
+  console.log(accountId)
   const { isMobile } = useResponsiveSize()
   const {
     openSignInModal,
@@ -279,7 +280,9 @@ function TxButton({
       return
     }
 
-    isFunction(onClick) && onClick()
+    const preventTransaction = await onClick?.()
+
+    if (preventTransaction === true && preventTransaction !== undefined) return
 
     const txType = unsigned ? 'unsigned' : 'signed'
     log.debug(`Sending ${txType} tx...`)
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index 0cd092da9..972cd8e09 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -100,11 +100,25 @@ export const createPendingOrder = async (
   purchaser: string,
   domain: string,
   sellerApiAuthTokenManager: string,
+  destination: string,
 ) => {
   const res = await axios.post('/api/pending-order/create', {
     purchaser,
     domain,
     sellerApiAuthTokenManager,
+    destination
+  })
+
+  return res.data
+}
+
+export const deletePendingOrder = async (
+  domain: string,
+  sellerApiAuthTokenManager: string,
+) => {
+  const res = await axios.post('/api/pending-order/delete', {
+    domain,
+    sellerApiAuthTokenManager,
   })
 
   return res.data
diff --git a/src/components/utils/TxButton.tsx b/src/components/utils/TxButton.tsx
index 3c96432f6..4f4730830 100644
--- a/src/components/utils/TxButton.tsx
+++ b/src/components/utils/TxButton.tsx
@@ -24,7 +24,7 @@ function ResolvedTxButton(props: TxButtonProps) {
   return isStorybook ? (
     <AntdButton {...props} onClick={mockSendTx} />
   ) : (
-    <SubstrateTxButton {...props} accountId={myAddress} />
+    <SubstrateTxButton {...props} accountId={props.accountId || myAddress} />
   )
 }
 
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 13a1662f5..45cc5bd2f 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -15,7 +15,7 @@ import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-q
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { purchaser, domain, sellerApiAuthTokenManager } = req.body
+  const { purchaser, domain, sellerApiAuthTokenManager, destination } = req.body
   const nonce = new Uint8Array(24)
   nonce[0] = 111
 
@@ -48,7 +48,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const result = await sellerSquidGraphQlClient.request(
       CREATE_PENDING_ORDER,
-      { domain, account: purchaser },
+      { domain, account: purchaser, destination },
     )
 
     res.status(200).send({ success: true })
diff --git a/src/pages/api/pending-order/delete.ts b/src/pages/api/pending-order/delete.ts
new file mode 100644
index 000000000..16261a8a2
--- /dev/null
+++ b/src/pages/api/pending-order/delete.ts
@@ -0,0 +1,64 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import { GraphQLClient } from 'graphql-request'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { xSellerSquid } from 'src/components/domains/dot-seller/config'
+import { DELETE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+
+dayjs.extend(utc)
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { domain, sellerApiAuthTokenManager } = req.body
+  const nonce = new Uint8Array(24)
+  nonce[0] = 111
+
+  if (req.method !== 'POST') return res.status(404).end()
+
+  try {
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.SELLER_CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': clientId,
+    }
+
+    const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid, {
+      headers: requestHeaders
+    })
+
+    const result = await sellerSquidGraphQlClient.request(
+      DELETE_PENDING_ORDER,
+      { id: domain },
+    )
+
+    res.status(200).send({ success: true })
+    return result
+
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
+}
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index dcf9676c7..fda48adeb 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -20,6 +20,7 @@ export type PendingDomainEntity = {
   id: string
   domain: string
   account: string
+  destination: string
   clientId: string
   timestamp: string
 }

From 4cd60408548a5422e325a5fbecfd5f8ec9d44b7b Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 19 Apr 2023 10:09:09 +0300
Subject: [PATCH 24/54] Add timer for pending transaction

---
 .../domains/EligibleDomainsSection.tsx        | 22 ++++--
 .../domains/dot-seller/BuyByDotTxButton.tsx   | 10 ++-
 .../dot-seller/RegisterDomainModal.tsx        | 77 +++++++++++--------
 .../domains/dot-seller/seller-queries.ts      |  4 +-
 .../domains/manage/ManageDomainProvider.tsx   | 28 ++++---
 .../domains/pendingOrders/Index.module.sass   |  5 +-
 .../domains/pendingOrders/index.tsx           | 70 ++++++++++++++---
 src/components/domains/utils.tsx              |  3 +-
 .../domainPendingOrders/pendingOrdersHooks.ts |  2 +-
 .../domainPendingOrders/pendingOrdersSlice.ts |  7 +-
 .../processingRegistratoinOrdersHooks.ts      | 36 +++++++++
 .../processingRegistratoinOrdersSlice.ts      | 56 ++++++++------
 12 files changed, 227 insertions(+), 93 deletions(-)
 create mode 100644 src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 17579fcb2..13725a496 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -32,6 +32,7 @@ import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { DomainDetails, getTime, ResultContainer } from './utils'
 import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
+import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 
 const log = newLogger('DD')
 
@@ -56,7 +57,7 @@ type BuyDomainSectionProps = {
 
 export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSectionProps) => {
   const reloadMyDomains = useCreateReloadMyDomains()
-  const { openManageModal } = useManageDomainContext()
+  const { openManageModal, setProcessingDomains } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
   const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
   const { purchaser } = useManageDomainContext()
@@ -78,6 +79,8 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
 
     reloadMyDomains()
 
+    setProcessingDomains({ [domainName]: false })
+
     await pendingOrderAction({
       action: deletePendingOrder,
       args: [domainName, sellerApiAuthTokenManager],
@@ -93,6 +96,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
     const jsonErr = JSON.stringify(errorInfo)
     log.error('Failed:', jsonErr)
     showErrorMessage(jsonErr)
+    setProcessingDomains({ [domainName]: false })
   }
 
   const onClick = async () => {
@@ -100,6 +104,8 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
+    setProcessingDomains({ [domainName]: true })
+
     if (pendingOrder) {
       await pendingOrderAction({
         action: deletePendingOrder,
@@ -111,10 +117,12 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
 
     return await pendingOrderAction({
       action: createPendingOrder,
-      args: [purchaser, domainName, sellerApiAuthTokenManager, 'polkadot'],
+      args: [purchaser, domainName, sellerApiAuthTokenManager, 'SUB'],
       account: purchaser,
       dispatch,
     })
+
+
   }
 
   return (
@@ -169,16 +177,20 @@ export const DomainItem = ({ domain, action }: DomainItemProps) => {
   const actionComponent = isFunction(action) ? action() : action
   const myAddress = useMyAddress()
   const pendingOrders = useSelectPendingOrderById(domain)
+  const processingOrder = useSelectProcessingOrderById(domain)
+  const { processingDomains } = useManageDomainContext()
 
   const { account } = pendingOrders || {}
 
+  const isDomainProcessing = processingDomains[domain]
+
   return (
     <Row justify='space-between' align='middle' className={styles.DomainResultItem}>
       <div className='d-flex align-items-center justify-content-between'>
         <span>{domain}</span>
         {account && myAddress === account && (
           <Tag color='gold' className={clsx('ml-2', styles.PendingTag)}>
-            Pending
+            {processingOrder || isDomainProcessing ? 'Processing' : 'Pending'}
           </Tag>
         )}
       </div>
@@ -205,7 +217,7 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 
 const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
-  // const { variant } = useManageDomainContext()
+  const { variant } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const pendingOrder = useSelectPendingOrderById(domain.id)
@@ -230,7 +242,7 @@ const DomainAction = ({ domain }: DomainProps) => {
   return owner ? (
     <UnavailableBtn domain={domain} />
   ) : (
-    <RegisterDomainButton domainName={domain.id} label={label} />
+    <RegisterDomainButton domainName={domain.id} label={label} variant={variant} />
   )
 }
 
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index cf5d9a984..b778cbe3d 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -16,6 +16,7 @@ import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import { pendingOrderAction, useGetDecimalAndSymbol } from './utils'
+import { useCreateReloadProcessingOrdersByAccount } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -28,12 +29,13 @@ function getKeyName(value: string) {
 }
 
 const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
-  const { recipient, purchaser, setIsFetchNewDomains } = useManageDomainContext()
+  const { recipient, purchaser, setIsFetchNewDomains, setProcessingDomains } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
   const { getApiByNetwork } = useLazyConnectionsContext()
   const pendingOrder = useSelectPendingOrderById(domainName)
+  const reloadProcessingOrders = useCreateReloadProcessingOrdersByAccount()
 
   const { sellerChain, domainRegistrationPriceFixed } = sellerConfig || {}
 
@@ -92,7 +94,9 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
 
   const onSuccess = async () => {
     setIsFetchNewDomains(true)
-
+    reloadProcessingOrders({ domains: [domainName], recipient })
+    setProcessingDomains({ [domainName]: true })
+    
     close()
   }
 
@@ -112,7 +116,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
 
     return await pendingOrderAction({
       action: createPendingOrder,
-      args: [purchaser, domainName, sellerApiAuthTokenManager, 'polkadot'],
+      args: [purchaser, domainName, sellerApiAuthTokenManager, 'DOT'],
       account: purchaser,
       dispatch
     })
diff --git a/src/components/domains/dot-seller/RegisterDomainModal.tsx b/src/components/domains/dot-seller/RegisterDomainModal.tsx
index bc521563d..cca8cdc4e 100644
--- a/src/components/domains/dot-seller/RegisterDomainModal.tsx
+++ b/src/components/domains/dot-seller/RegisterDomainModal.tsx
@@ -1,19 +1,19 @@
 import { Button, Modal, Space, Tag } from 'antd'
 import clsx from 'clsx'
 import { useMemo, useState } from 'react'
+import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import { useSubstrate } from 'src/components/substrate'
+import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
-import { FormatBalance } from '../../common/balances/Balance'
+import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { BuyDomainSection } from '../EligibleDomainsSection'
-import { useManageDomainContext } from '../manage/ManageDomainProvider'
+import { useManageDomainContext, Variant } from '../manage/ManageDomainProvider'
 import BuyByDotTxButton from './BuyByDotTxButton'
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from './utils'
-import { useCreateBalance } from '../../common/balances/Balance'
-import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 
 type ModalBodyProps = {
   domainName: string
@@ -67,22 +67,28 @@ const ModalBody = ({ domainName, price }: ModalBodyProps) => {
           network={isSub ? undefined : sellerChain}
         />
       </Space>
-      {variant !== 'SUB' && <Space direction='vertical' size={8} className={'w-100'}>
-        <div className={clsx(styles.Recipient, 'd-flex align-items-center')}>
-          <div>Recipient </div>
-          {isMyAddress && <Tag color='green' className='ml-2'>Your account</Tag>}
-        </div>
-        <SelectAccountInput
-          className={`${styles.Select} w-100`}
-          setValue={setRecipient}
-          value={recipient}
-          withAvatar={false}
-          network={isSub ? undefined : sellerChain}
-        />
-        <MutedDiv className={styles.RecipientFieldDesc}>
-          Choose the recipient to whom the domain will be registered
-        </MutedDiv>
-      </Space>}
+      {variant !== 'SUB' && (
+        <Space direction='vertical' size={8} className={'w-100'}>
+          <div className={clsx(styles.Recipient, 'd-flex align-items-center')}>
+            <div>Recipient </div>
+            {isMyAddress && (
+              <Tag color='green' className='ml-2'>
+                Your account
+              </Tag>
+            )}
+          </div>
+          <SelectAccountInput
+            className={`${styles.Select} w-100`}
+            setValue={setRecipient}
+            value={recipient}
+            withAvatar={false}
+            network={isSub ? undefined : sellerChain}
+          />
+          <MutedDiv className={styles.RecipientFieldDesc}>
+            Choose the recipient to whom the domain will be registered
+          </MutedDiv>
+        </Space>
+      )}
       <Space direction='vertical' size={16} className={clsx(styles.DomainInfo, 'w-100')}>
         <div className='d-flex align-items-center justify-content-between'>
           <MutedDiv>Domain name:</MutedDiv>
@@ -91,10 +97,7 @@ const ModalBody = ({ domainName, price }: ModalBodyProps) => {
         <div className='d-flex align-items-center justify-content-between'>
           <MutedDiv>Price:</MutedDiv>
           <div className='font-weight-bold'>
-            <FormatBalance
-              value={price}
-              {...chainProps}
-            />
+            <FormatBalance value={price} {...chainProps} />
           </div>
         </div>
       </Space>
@@ -106,7 +109,7 @@ type BuyDomainModalProps = {
   domainName: string
   open: boolean
   close: () => void
-  variant: RegisterDomainVairant
+  variant: Variant
   price?: string
 }
 
@@ -144,23 +147,24 @@ const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps)
   )
 }
 
-type RegisterDomainVairant = 'DOT' | 'SUB'
-
 type BuyByDotButtonProps = {
   domainName: string
   label?: string
   withPrice?: boolean
+  variant?: Variant
 }
 
 const RegisterDomainButton = ({
   domainName,
   label = 'Register',
   withPrice = true,
+  variant,
 }: BuyByDotButtonProps) => {
   const sellerConfig = useSelectSellerConfig()
   const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
-  const { variant } = useManageDomainContext()
   const { api } = useSubstrate()
+  const processingOrder = useSelectProcessingOrderById(domainName)
+  const { processingDomains } = useManageDomainContext()
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
@@ -175,13 +179,26 @@ const RegisterDomainButton = ({
 
   const chainProps = variant === 'SUB' ? {} : { decimals: decimal, currency: symbol }
 
+  const isProcessingDomain = processingDomains[domainName]
+
   return (
     <span className={styles.RegisterButton}>
       {withPrice && <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>}
-      <Button type={'primary'} block onClick={() => setOpen(true)}>
+      <Button
+        type={'primary'}
+        block
+        disabled={isProcessingDomain || !!processingOrder}
+        onClick={() => setOpen(true)}
+      >
         {label}
       </Button>
-      <BuyDomainModal domainName={domainName} open={open} close={close} variant={variant} price={price} />
+      <BuyDomainModal
+        domainName={domainName}
+        open={open}
+        close={close}
+        variant={variant || 'SUB'}
+        price={price}
+      />
     </span>
   )
 }
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index d0c0d0de1..8619709c2 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -48,11 +48,11 @@ export const SELLER_CONFIG = gql`
 `
 
 export const PROCESSING_REGISTRATION_ORDERS = gql`
-  query getRegistationOrdersByDomain($domain: String, $recipient: Stirng) {
+  query getRegistationOrdersByDomain($domains: [String!]!, $recipient: String!) {
     domainRegistrationOrders(
       limit: 10
       where: {
-        domain: { id_eq: $domain }
+        domain: { id_in: $domains }
         status_eq: Processing
         target: { id_eq: $recipient }
       }
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index b172a26b3..595f3a1e5 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import React, { createContext, useContext, useState } from 'react'
+import { useMyAddress } from '../../auth/MyAccountsContext'
 import { ManageDomainModal } from './DomainManageModal'
-import { useMyAddress } from '../../auth/MyAccountsContext';
 
 export type MenuSteps = 'subid' | 'inner' | 'outer' | 'menu' | 'success'
 type OpenManageModalFn = (step: MenuSteps, domain?: string) => void
@@ -19,9 +19,11 @@ type ManageDomainProviderState = {
   setPurchaser: (recipient: string) => void
   isFetchNewDomains: boolean
   setIsFetchNewDomains: (isFetchNewDomains: boolean) => void
+  processingDomains: Record<string, boolean>
+  setProcessingDomains: (processingDomains: Record<string, boolean>) => void
 }
 
-type Variant = 'SUB' | 'DOT'
+export type Variant = 'SUB' | 'DOT'
 
 const ManageDomainContext = createContext<ManageDomainProviderState>({} as any)
 
@@ -30,10 +32,11 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [currentStep, setStep] = useState<MenuSteps>()
   const [domain, setDomain] = useState<string>()
   const [visible, setVisible] = useState(true)
-  const [ variant, setVariant ] = useState<Variant>('SUB')
-  const [ recipient, setRecipient ] = useState<string>(myAddress || '')
-  const [ purchaser, setPurchaser ] = useState<string>(myAddress || '')
-  const [ isFetchNewDomains, setIsFetchNewDomains ] = useState(false)
+  const [variant, setVariant] = useState<Variant>('SUB')
+  const [recipient, setRecipient] = useState<string>(myAddress || '')
+  const [purchaser, setPurchaser] = useState<string>(myAddress || '')
+  const [isFetchNewDomains, setIsFetchNewDomains] = useState(false)
+  const [processingDomains, setProcessingDomains] = useState<Record<string, boolean>>({})
 
   const router = useRouter()
   const [activePromoCode, setActivePromoCode] = useState(promoCode)
@@ -57,18 +60,21 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   }
 
   const value = {
-    currentStep, 
-    openManageModal, 
-    variant, 
+    currentStep,
+    openManageModal,
+    variant,
     setVariant,
     recipient,
     setRecipient,
-    promoCode: activePromoCode, 
+    promoCode: activePromoCode,
     clearPromoCode,
     purchaser,
     setPurchaser,
     isFetchNewDomains,
-    setIsFetchNewDomains
+    setIsFetchNewDomains,
+    processingDomains,
+    setProcessingDomains: (newData: Record<string, boolean>) =>
+      setProcessingDomains({ ...processingDomains, ...newData }),
   }
 
   return (
diff --git a/src/components/domains/pendingOrders/Index.module.sass b/src/components/domains/pendingOrders/Index.module.sass
index d6805f5ae..8f2b7590d 100644
--- a/src/components/domains/pendingOrders/Index.module.sass
+++ b/src/components/domains/pendingOrders/Index.module.sass
@@ -7,4 +7,7 @@
     font-size: 14px
 
     path
-      color: $color_muted
\ No newline at end of file
+      color: $color_muted
+
+.PendingTag
+  background-color: transparent !important
\ No newline at end of file
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index d355ec98b..ae212fb00 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -1,30 +1,53 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { isEmptyArray, SubDate } from '@subsocial/utils'
-import { Space, Tooltip } from 'antd'
+import { Space, Tag, Tooltip } from 'antd'
+import clsx from 'clsx'
 import dayjs from 'dayjs'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import CardWithContent from 'src/components/utils/cards/CardWithContent'
-import { useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useCreateReloadPendingOrdersByAccount, useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import {
+  useFetchProcessingOrdersByIds,
+  useSelectProcessingOrderById,
+} from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
 import RegisterDomainButton from '../dot-seller/RegisterDomainModal'
+import { useManageDomainContext, Variant } from '../manage/ManageDomainProvider'
 import { getTime } from '../utils'
 import styles from './Index.module.sass'
 
 type PendingDomainProps = {
   pendingDomain: PendingDomainEntity
+  time: number
 }
 
-const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
+const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
+  const processingOrder = useSelectProcessingOrderById(pendingDomain.domain)
+  const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
+  const myAddress = useMyAddress()
 
-  const { domain, timestamp } = pendingDomain
+  const { processingDomains } = useManageDomainContext()
+
+  const { domain, timestamp, destination } = pendingDomain
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
-  const expiresAt = SubDate.formatDate(
-    dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0),
-  )
+  const expiresAt = useMemo(() => {
+    const expiresAtValue = dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0) 
+
+    if(time >= expiresAtValue + 12000) {
+      reloadPendingOrders(myAddress)
+
+      return
+    }
+
+    return SubDate.formatDate(expiresAtValue)
+  }, [time])
+
+  const isDomainProcessing = processingDomains[pendingDomain.domain]
 
   return (
     <div className='d-flex align-items-center justify-content-between'>
@@ -37,7 +60,18 @@ const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
           <InfoCircleOutlined />
         </Tooltip>
       </div>
-      <RegisterDomainButton domainName={domain} label={'Continue'} withPrice={false} />
+      {processingOrder || isDomainProcessing ? (
+        <Tag color='gold' className={clsx(styles.PendingTag)}>
+          Processing
+        </Tag>
+      ) : (
+        <RegisterDomainButton
+          domainName={domain}
+          label={'Continue'}
+          withPrice={false}
+          variant={destination as Variant}
+        />
+      )}
     </div>
   )
 }
@@ -45,12 +79,26 @@ const PendingDomain = ({ pendingDomain }: PendingDomainProps) => {
 const PendingOrdersSection = () => {
   const pendingOrders = useSelectPendingOrdersByAccount()
   const sellerConfig = useSelectSellerConfig()
+  const myAddress = useMyAddress()
+  const [time, setTime] = useState<number>(dayjs().valueOf())
+
+  const pendingDomainsNames = pendingOrders?.map(order => order.domain)
+
+  useFetchProcessingOrdersByIds(pendingDomainsNames, myAddress)
 
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(dayjs().valueOf())
+    }, 10000)
+
+    return () => clearInterval(interval)
+  }, [])
+
   const pendingDomains = useMemo(() => {
     const orders = pendingOrders.map((pendingDomain, i) => (
-      <PendingDomain key={i} pendingDomain={pendingDomain} />
+      <PendingDomain key={i} pendingDomain={pendingDomain} time={time} />
     ))
 
     return (
@@ -58,7 +106,7 @@ const PendingOrdersSection = () => {
         {orders}
       </Space>
     )
-  }, [pendingOrders.length])
+  }, [pendingOrders.length, time])
 
   if (!pendingOrders || isEmptyArray(pendingOrders)) return null
 
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 8a003022e..b19f3828a 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -113,7 +113,7 @@ const waitMessage = controlledMessage({
 
 export const useFetchNewDomains = (domainName?: string) => {
   const myAddress = useMyAddress()
-  const { setIsFetchNewDomains, isFetchNewDomains, openManageModal } = useManageDomainContext()
+  const { setIsFetchNewDomains, isFetchNewDomains, openManageModal, setProcessingDomains } = useManageDomainContext()
   const upsertDomains = useCreateUpsertDomains()
   const removePendingOrder = useCreateRemovePendingOrders()
 
@@ -139,6 +139,7 @@ export const useFetchNewDomains = (domainName?: string) => {
 
             upsertDomains({ domain: domainEntity, address: myAddress, domainName })
             removePendingOrder({ address: myAddress, domainName })
+            setProcessingDomains({ [domainName]: false })
             waitMessage.close()
             openManageModal('success', domainName)
           }
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index dabc2e2c7..f986deb7a 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -40,7 +40,7 @@ export const useSelectPendingOrdersByAccount = () => {
 
 export const useCreateReloadPendingOrdersByAccount = () => {
   return useActions<string | undefined>(({ dispatch, args }) => {
-    args && dispatch(fetchPendingOrdersByAccount({ id: args }))
+    args && dispatch(fetchPendingOrdersByAccount({ id: args, reload: true }))
   })
 }
 
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index fda48adeb..ea14f3ee8 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -130,7 +130,6 @@ export const fetchPendingOrdersByAccount = createAsyncThunk<
 
     const orders = result.getPendingOrdersByAccount.orders as Omit<PendingDomainEntity, 'domain'>[]
 
-
     return orders.map(item => {
       const { id, account } = item
 
@@ -164,10 +163,12 @@ const slice = createSlice({
   extraReducers: builder => {
     builder
       .addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) => {
-        if (payload) adapter.upsertMany(state, payload.filter(isDef))
+        adapter.removeAll(state)
+        adapter.upsertMany(state, payload.filter(isDef))
       })
       .addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
-        if (payload) adapter.upsertMany(state, payload.filter(isDef))
+        adapter.removeAll(state)
+        adapter.addMany(state, payload.filter(isDef))
       })
   },
 })
diff --git a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts
new file mode 100644
index 000000000..27e4fb65b
--- /dev/null
+++ b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts
@@ -0,0 +1,36 @@
+import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+import { useActions } from 'src/rtk/app/helpers'
+import { useAppDispatch, useAppSelector } from 'src/rtk/app/store'
+import { fetchProcessingOrdersByAccount, selectProcessingOrdersByAccount, selectProcessingOrdersById } from './processingRegistratoinOrdersSlice'
+import { useEffect } from 'react'
+
+
+export const useFetchProcessingOrdersByIds = (domains?: string[], recipient?: string) => {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if(!domains || !recipient) return
+
+    dispatch(fetchProcessingOrdersByAccount({ domains, recipient }))
+  }, [ !!domains, recipient ])
+}
+
+export const useSelectProcessingOrderById = (id: string) => {
+  return useAppSelector(state => selectProcessingOrdersById(state, id))
+}
+
+export const useSelectProcessingOrdersByAccount = () => {
+  const myAddress = useMyAddress()
+  return useAppSelector(state => selectProcessingOrdersByAccount(state, myAddress))
+}
+
+type ReloadProcessingOrders = {
+  domains: string[]
+  recipient: string
+}
+
+export const useCreateReloadProcessingOrdersByAccount = () => {
+  return useActions<ReloadProcessingOrders | undefined>(({ dispatch, args }) => {
+    args && dispatch(fetchProcessingOrdersByAccount({ ...args, reload: true }))
+  })
+}
\ No newline at end of file
diff --git a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
index 2bdbb51fd..68dcd8764 100644
--- a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
+++ b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
@@ -27,7 +27,7 @@ type CommonFetchProps = {
 }
 
 type FetchOneWithoutApi = CommonFetchProps & {
-  domain: string
+  domains: string[]
   recipient: string
 }
 
@@ -45,7 +45,7 @@ export const selectProcessingOrdersById = (state: RootState, id: string) => {
   return selectors.selectById(state, entityId)
 }
 
-export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
+export const selectProcessingOrdersByIds = (state: RootState, ids: string[]) => {
   const keys = selectors.selectIds(state)
 
   const entityIds = keys.filter(key => ids.find(x => key.toString().includes(x)))
@@ -53,40 +53,46 @@ export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
   return selectEntitiesByIds(state, entityIds as string[])
 }
 
-export const selectPendingOrdersByAccount = (
-  state: RootState,
-  domain: string,
-  recipient: string,
-) => {
-  selectors.selectById(state, `${domain}-${recipient}`)
+export const selectProcessingOrdersByAccount = (state: RootState, address?: string) => {
+  if (!address) return []
+  const keys = selectors.selectIds(state)
+
+  const entityIds = keys.filter(key => key.toString().includes(address))
+
+  return selectEntitiesByIds(state, entityIds as string[])
 }
 
-export const fetchPendingOrdersByAccount = createAsyncThunk<
-  MaybeEntity,
+export const fetchProcessingOrdersByAccount = createAsyncThunk<
+  MaybeEntity[],
   FetchOneWithoutApi,
   ThunkApiConfig
 >(
-  `${sliceName}/fetchManyByAccount`,
-  async ({ domain, recipient, reload }, { getState }): Promise<MaybeEntity> => {
-    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), domain, recipient)
+  `${sliceName}/fetchMany`,
+  async ({ domains, recipient, reload }, { getState }): Promise<MaybeEntity[]> => {
+    const knownDomainsPendingOrders = selectProcessingOrdersByAccount(getState(), recipient)
 
     if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
-      return
+      return []
     }
 
     const result: any = await sellerSquidGraphQlClient.request(PROCESSING_REGISTRATION_ORDERS, {
-      domain,
+      domains,
       recipient,
     })
 
-    const order = result.getPendingOrdersByAccount.orders?.[0] as ProcessingOrdersEntity | undefined
-
-    if(!order) return 
-    
-    return {
-      ...order,
-      id: `${recipient}-${domain}`,
-    }
+    const orders = result.domainRegistrationOrders as
+      | ProcessingOrdersEntity[]
+      | undefined
+
+    return (
+      orders
+        ?.map(item => {
+          return {
+            ...item,
+          }
+        })
+        .filter(isDef) || []
+    )
   },
 )
 
@@ -97,8 +103,8 @@ const slice = createSlice({
     // upsertOwnDomains: adapter.upsertOne,
   },
   extraReducers: builder => {
-    builder.addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
-      if (payload) adapter.upsertOne(state, payload)
+    builder.addCase(fetchProcessingOrdersByAccount.fulfilled, (state, { payload }) => {
+      if (payload) adapter.upsertMany(state, payload.filter(isDef))
     })
   },
 })

From 8cff7e5b02a9e60959549196e24a18cd668bf0bb Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 19 Apr 2023 12:26:13 +0300
Subject: [PATCH 25/54] Add target field to create pending order

---
 src/components/domains/EligibleDomainsSection.tsx      | 2 +-
 src/components/domains/dot-seller/BuyByDotTxButton.tsx | 2 +-
 src/components/utils/OffchainUtils.ts                  | 4 +++-
 src/pages/api/pending-order/create.ts                  | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 13725a496..91ab73274 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -117,7 +117,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
 
     return await pendingOrderAction({
       action: createPendingOrder,
-      args: [purchaser, domainName, sellerApiAuthTokenManager, 'SUB'],
+      args: [purchaser, domainName, sellerApiAuthTokenManager, 'SUB', purchaser],
       account: purchaser,
       dispatch,
     })
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index b778cbe3d..8364ae193 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -116,7 +116,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
 
     return await pendingOrderAction({
       action: createPendingOrder,
-      args: [purchaser, domainName, sellerApiAuthTokenManager, 'DOT'],
+      args: [purchaser, domainName, sellerApiAuthTokenManager, 'DOT', recipient],
       account: purchaser,
       dispatch
     })
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index 972cd8e09..3a4ec2794 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -101,12 +101,14 @@ export const createPendingOrder = async (
   domain: string,
   sellerApiAuthTokenManager: string,
   destination: string,
+  target: string
 ) => {
   const res = await axios.post('/api/pending-order/create', {
     purchaser,
     domain,
     sellerApiAuthTokenManager,
-    destination
+    destination,
+    target
   })
 
   return res.data
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 45cc5bd2f..cb6e0ea08 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -15,7 +15,7 @@ import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-q
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { purchaser, domain, sellerApiAuthTokenManager, destination } = req.body
+  const { purchaser, domain, sellerApiAuthTokenManager, destination, target } = req.body
   const nonce = new Uint8Array(24)
   nonce[0] = 111
 
@@ -48,7 +48,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const result = await sellerSquidGraphQlClient.request(
       CREATE_PENDING_ORDER,
-      { domain, account: purchaser, destination },
+      { domain, account: purchaser, destination, target },
     )
 
     res.status(200).send({ success: true })

From 018c41a8eaf1c22a456f94952f0f5cd14cab9c08 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 19 Apr 2023 14:29:14 +0300
Subject: [PATCH 26/54] Fix: add target field

---
 src/components/domains/dot-seller/seller-queries.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index 8619709c2..ad04ad3da 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -68,8 +68,8 @@ export const PROCESSING_REGISTRATION_ORDERS = gql`
 `
 
 export const CREATE_PENDING_ORDER = gql`
-  mutation CreatePendingOrder($domain: String!, $destination: String!, $account: String!) {
-    createPendingOrder(account: $account, destination: $destination, domain: $domain)
+  mutation CreatePendingOrder($domain: String!, $destination: String!, $account: String!, $target: String!) {
+    createPendingOrder(account: $account, destination: $destination, domain: $domain, target: $target)
   }
 `
 

From 4de3950d811faf0c7591be5936217e833d21f637 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Sun, 30 Apr 2023 18:53:53 +0300
Subject: [PATCH 27/54] Fix pending orders slice

---
 .../domains/EligibleDomainsSection.tsx        |  21 ++-
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  22 +++-
 .../domains/dot-seller/seller-queries.ts      |  63 ++++++---
 .../domains/pendingOrders/index.tsx           |  12 +-
 src/components/domains/utils.tsx              |   2 +-
 src/components/utils/OffchainUtils.ts         |  28 ++--
 src/pages/api/pending-order/create.ts         |  18 ++-
 .../domainPendingOrders/pendingOrdersHooks.ts |  13 +-
 .../domainPendingOrders/pendingOrdersSlice.ts | 122 +++++++++---------
 9 files changed, 185 insertions(+), 116 deletions(-)

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 91ab73274..5e47925f2 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -7,6 +7,8 @@ import React, { useEffect } from 'react'
 import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
 import { useAppDispatch } from 'src/rtk/app/store'
+import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
+import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import {
   useCreateReloadPendingOrdersByAccount,
@@ -31,8 +33,6 @@ import { pendingOrderAction } from './dot-seller/utils'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { DomainDetails, getTime, ResultContainer } from './utils'
-import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
-import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 
 const log = newLogger('DD')
 
@@ -117,12 +117,19 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
 
     return await pendingOrderAction({
       action: createPendingOrder,
-      args: [purchaser, domainName, sellerApiAuthTokenManager, 'SUB', purchaser],
+      args: [
+        {
+          sellerApiAuthTokenManager,
+          createdByAccount: myAddress,
+          destination: 'SUB',
+          domain: domainName,
+          signer: purchaser,
+          target: '',
+        },
+      ],
       account: purchaser,
       dispatch,
     })
-
-
   }
 
   return (
@@ -180,7 +187,7 @@ export const DomainItem = ({ domain, action }: DomainItemProps) => {
   const processingOrder = useSelectProcessingOrderById(domain)
   const { processingDomains } = useManageDomainContext()
 
-  const { account } = pendingOrders || {}
+  const { createdByAccount: account } = pendingOrders || {}
 
   const isDomainProcessing = processingDomains[domain]
 
@@ -223,7 +230,7 @@ const DomainAction = ({ domain }: DomainProps) => {
   const pendingOrder = useSelectPendingOrderById(domain.id)
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
-  const { account } = pendingOrder || {}
+  const { createdByAccount: account } = pendingOrder || {}
 
   if (account && account !== myAddress) {
     return (
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index 8364ae193..3d64f10df 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -13,10 +13,10 @@ import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyCo
 import { createPendingOrder, deletePendingOrder } from 'src/components/utils/OffchainUtils'
 import { useAppDispatch } from 'src/rtk/app/store'
 import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useCreateReloadProcessingOrdersByAccount } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import { pendingOrderAction, useGetDecimalAndSymbol } from './utils'
-import { useCreateReloadProcessingOrdersByAccount } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -29,7 +29,8 @@ function getKeyName(value: string) {
 }
 
 const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
-  const { recipient, purchaser, setIsFetchNewDomains, setProcessingDomains } = useManageDomainContext()
+  const { recipient, purchaser, setIsFetchNewDomains, setProcessingDomains } =
+    useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
@@ -96,7 +97,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
     setIsFetchNewDomains(true)
     reloadProcessingOrders({ domains: [domainName], recipient })
     setProcessingDomains({ [domainName]: true })
-    
+
     close()
   }
 
@@ -110,15 +111,24 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
         action: deletePendingOrder,
         args: [domainName, sellerApiAuthTokenManager],
         account: purchaser,
-        dispatch
+        dispatch,
       })
     }
 
     return await pendingOrderAction({
       action: createPendingOrder,
-      args: [purchaser, domainName, sellerApiAuthTokenManager, 'DOT', recipient],
+      args: [
+        {
+          sellerApiAuthTokenManager,
+          createdByAccount: myAddress,
+          destination: 'DOT',
+          domain: domainName,
+          signer: purchaser,
+          target: recipient,
+        },
+      ],
       account: purchaser,
-      dispatch
+      dispatch,
     })
   }
 
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index ad04ad3da..093cbdaf4 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -5,22 +5,44 @@ export const PENDING_ORDERS_BY_IDS = gql`
     getPendingOrdersByIds(ids: $ids) {
       orders {
         id
-        account
-        clientId
+        createdByAccount
+        purchaseInterrupted
+        signer
+        target
         timestamp
+        destination
+      }
+    }
+  }
+`
+
+export const PENDING_ORDERS_BY_SIGNER = gql`
+  query GetPendingOrdersBySigner($signer: String!) {
+    getPendingOrdersByAccount(signer: $signer) {
+      orders {
+        id
+        createdByAccount
+        purchaseInterrupted
+        signer
+        target
+        timestamp
+        destination
       }
     }
   }
 `
 
 export const PENDING_ORDERS_BY_ACCOUNT = gql`
-  query GetPendingOrdersByAccount($account: String!) {
-    getPendingOrdersByAccount(account: $account) {
+  query GetPendingOrdersByAccount($createdByAccount: String!) {
+    getPendingOrdersByCreatedByAccount(createdByAccount: $createdByAccount) {
       orders {
         id
-        account
-        clientId
+        createdByAccount
+        purchaseInterrupted
+        signer
+        target
         timestamp
+        destination
       }
     }
   }
@@ -51,11 +73,7 @@ export const PROCESSING_REGISTRATION_ORDERS = gql`
   query getRegistationOrdersByDomain($domains: [String!]!, $recipient: String!) {
     domainRegistrationOrders(
       limit: 10
-      where: {
-        domain: { id_in: $domains }
-        status_eq: Processing
-        target: { id_eq: $recipient }
-      }
+      where: { domain: { id_in: $domains }, status_eq: Processing, target: { id_eq: $recipient } }
     ) {
       id
       status
@@ -68,14 +86,25 @@ export const PROCESSING_REGISTRATION_ORDERS = gql`
 `
 
 export const CREATE_PENDING_ORDER = gql`
-  mutation CreatePendingOrder($domain: String!, $destination: String!, $account: String!, $target: String!) {
-    createPendingOrder(account: $account, destination: $destination, domain: $domain, target: $target)
+  mutation CreatePendingOrder(
+    $destination: String!
+    $domain: String!
+    $signer: String!
+    $target: String!
+    $createdByAccount: String!
+  ) {
+    createPendingOrder(
+      destination: $destination
+      domain: $domain
+      signer: $signer
+      target: $target
+      createdByAccount: $createdByAccount
+    )
   }
 `
 
 export const DELETE_PENDING_ORDER = gql`
-mutation DeletePendingOrderById($id: String!) {
-  deletePendingOrderById(id: $id)
-}
-
+  mutation DeletePendingOrderById($id: String!) {
+    deletePendingOrderById(id: $id)
+  }
 `
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index ae212fb00..9d223aaa0 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -26,13 +26,13 @@ type PendingDomainProps = {
 
 const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
-  const processingOrder = useSelectProcessingOrderById(pendingDomain.domain)
+  const processingOrder = useSelectProcessingOrderById(pendingDomain.id)
   const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
   const myAddress = useMyAddress()
 
   const { processingDomains } = useManageDomainContext()
 
-  const { domain, timestamp, destination } = pendingDomain
+  const { id, timestamp, destination } = pendingDomain
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
   const expiresAt = useMemo(() => {
@@ -47,12 +47,12 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
     return SubDate.formatDate(expiresAtValue)
   }, [time])
 
-  const isDomainProcessing = processingDomains[pendingDomain.domain]
+  const isDomainProcessing = processingDomains[pendingDomain.id]
 
   return (
     <div className='d-flex align-items-center justify-content-between'>
       <div className='d-flex align-items-center mr-2'>
-        <div className='mlr-2'>{domain}</div>
+        <div className='mlr-2'>{id}</div>
         <Tooltip
           title={`Your domain reservation expires ${expiresAt}`}
           className={styles.TimeTooltip}
@@ -66,7 +66,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
         </Tag>
       ) : (
         <RegisterDomainButton
-          domainName={domain}
+          domainName={id}
           label={'Continue'}
           withPrice={false}
           variant={destination as Variant}
@@ -82,7 +82,7 @@ const PendingOrdersSection = () => {
   const myAddress = useMyAddress()
   const [time, setTime] = useState<number>(dayjs().valueOf())
 
-  const pendingDomainsNames = pendingOrders?.map(order => order.domain)
+  const pendingDomainsNames = pendingOrders?.map(order => order.id)
 
   useFetchProcessingOrdersByIds(pendingDomainsNames, myAddress)
 
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index b19f3828a..b5a0bb553 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -138,7 +138,7 @@ export const useFetchNewDomains = (domainName?: string) => {
             }
 
             upsertDomains({ domain: domainEntity, address: myAddress, domainName })
-            removePendingOrder({ address: myAddress, domainName })
+            removePendingOrder({ domainName })
             setProcessingDomains({ [domainName]: false })
             waitMessage.close()
             openManageModal('success', domainName)
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index 3a4ec2794..a3bccff53 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -96,28 +96,22 @@ export const registerDomainWithPromoCode = async ({
   return res?.data
 }
 
-export const createPendingOrder = async (
-  purchaser: string,
-  domain: string,
-  sellerApiAuthTokenManager: string,
-  destination: string,
+type CreatePendingProps = {
+  signer: string
+  domain: string
+  sellerApiAuthTokenManager: string
+  createdByAccount: string
+  destination: string
   target: string
-) => {
-  const res = await axios.post('/api/pending-order/create', {
-    purchaser,
-    domain,
-    sellerApiAuthTokenManager,
-    destination,
-    target
-  })
+}
+
+export const createPendingOrder = async (props: CreatePendingProps) => {
+  const res = await axios.post('/api/pending-order/create', props)
 
   return res.data
 }
 
-export const deletePendingOrder = async (
-  domain: string,
-  sellerApiAuthTokenManager: string,
-) => {
+export const deletePendingOrder = async (domain: string, sellerApiAuthTokenManager: string) => {
   const res = await axios.post('/api/pending-order/delete', {
     domain,
     sellerApiAuthTokenManager,
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index cb6e0ea08..2668bf207 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -15,7 +15,15 @@ import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-q
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { purchaser, domain, sellerApiAuthTokenManager, destination, target } = req.body
+  const { 
+    sellerApiAuthTokenManager, 
+    createdByAccount, 
+    destination, 
+    domain, 
+    signer, 
+    target 
+  } = req.body
+
   const nonce = new Uint8Array(24)
   nonce[0] = 111
 
@@ -48,7 +56,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const result = await sellerSquidGraphQlClient.request(
       CREATE_PENDING_ORDER,
-      { domain, account: purchaser, destination, target },
+      { 
+        createdByAccount, 
+        destination, 
+        domain, 
+        signer, 
+        target,
+      },
     )
 
     res.status(200).send({ success: true })
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index f986deb7a..9c1fce24d 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -7,6 +7,7 @@ import {
   RemovePendingOrderProps,
   fetchPendingOrdersByAccount,
   fetchPendingOrdersByIds,
+  fetchPendingOrdersBySigner,
   removePendingOrder,
   selectPendingOrdersByAccount,
   selectPendingOrdersById,
@@ -25,6 +26,11 @@ export const useFetchDomainPendingOrdersByAccount = () => {
   useFetch(fetchPendingOrdersByAccount, { id: myAddress || '' })
 }
 
+export const useFetchDomainPendingOrdersBySigner = (address?: string) => {
+
+  useFetch(fetchPendingOrdersBySigner, { id: address || '' })
+}
+
 export const useSelectPendingOrderById = (id: string) => {
   return useAppSelector(state => selectPendingOrdersById(state, id))
 }
@@ -35,7 +41,12 @@ export const useSelectPendingOrdersByIds = (ids: string[]) => {
 
 export const useSelectPendingOrdersByAccount = () => {
   const myAddress = useMyAddress()
-  return useAppSelector(state => selectPendingOrdersByAccount(state, myAddress))
+
+  return useAppSelector(state => selectPendingOrdersByAccount(state, 'createdByAccount', myAddress))
+}
+
+export const useSelectPendingOrdersBySigner = (address?: string) => {
+  return useAppSelector(state => selectPendingOrdersByAccount(state, 'signer', address))
 }
 
 export const useCreateReloadPendingOrdersByAccount = () => {
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index ea14f3ee8..dfc7f6188 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -1,27 +1,36 @@
-import { EntityId, PayloadAction, createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { GenericAccountId } from '@polkadot/types'
+import {
+  createAsyncThunk,
+  createEntityAdapter,
+  createSlice,
+  EntityId,
+  PayloadAction,
+} from '@reduxjs/toolkit'
+import registry from '@subsocial/api/utils/registry'
 import { isDef, isEmptyArray } from '@subsocial/utils'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import {
   PENDING_ORDERS_BY_ACCOUNT,
   PENDING_ORDERS_BY_IDS,
+  PENDING_ORDERS_BY_SIGNER,
 } from 'src/components/domains/dot-seller/seller-queries'
 import { ThunkApiConfig } from 'src/rtk/app/helpers'
 import { RootState } from 'src/rtk/app/rootReducer'
-import { encodeAddress } from '@polkadot/util-crypto' 
-import { GenericAccountId } from '@polkadot/types'
-import registry from '@subsocial/api/utils/registry'
+import { encodeAddress } from '@polkadot/util-crypto'
+import { decodeAddress } from '@polkadot/keyring'
+import { u8aToHex } from '@polkadot/util'
 
 export type RemovePendingOrderProps = {
-  address: string
   domainName: string
 }
 
 export type PendingDomainEntity = {
   id: string
-  domain: string
-  account: string
+  createdByAccount: string
   destination: string
-  clientId: string
+  purchaseInterrupted: boolean
+  signer: string
+  target: string
   timestamp: string
 }
 
@@ -54,7 +63,7 @@ export const selectPendingOrdersById = (state: RootState, id: string) => {
 
   const entityId = keys.find(key => key.toString().includes(id))
 
-  if(!entityId) return undefined
+  if (!entityId) return undefined
 
   return selectors.selectById(state, entityId)
 }
@@ -67,14 +76,16 @@ export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
   return selectEntitiesByIds(state, entityIds as string[])
 }
 
-export const selectPendingOrdersByAccount = (state: RootState, address?: string) => {
-  if (!address) return []
-  const keys = selectors.selectIds(state)
-  const genericAddress = new GenericAccountId(registry, address).toString()
+export const selectPendingOrdersByAccount = (state: RootState, field: 'signer' | 'createdByAccount', address?: string) => {
+  const pendingOrdersStore = selectors.selectAll(state)
 
-  const entityIds = keys.filter(key => key.toString().includes(genericAddress))
+  return pendingOrdersStore.filter((item) => {
+    const account = item[field]
 
-  return selectEntitiesByIds(state, entityIds as string[])
+    const subsocialAddress: string = new GenericAccountId(registry, encodeAddress(account)).toString()
+
+    return subsocialAddress === address
+  })
 }
 
 export const fetchPendingOrdersByIds = createAsyncThunk<
@@ -89,26 +100,31 @@ export const fetchPendingOrdersByIds = createAsyncThunk<
     return []
   }
 
-  const result: any = await sellerSquidGraphQlClient.request(
-    PENDING_ORDERS_BY_IDS,
-    { ids },
-  )
+  const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_IDS, { ids })
 
-  const orders = result.getPendingOrdersByIds.orders as Omit<PendingDomainEntity, 'domain'>[]
+  return result.getPendingOrdersByIds.orders as PendingDomainEntity[]
+})
 
-  return orders.map(item => {
-    const { id, account } = item
+export const fetchPendingOrdersBySigner = createAsyncThunk<
+  MaybeEntity[],
+  FetchOneWithoutApi,
+  ThunkApiConfig
+>(
+  `${sliceName}/fetchManyBySigner`,
+  async ({ id: account, reload }, { getState }): Promise<MaybeEntity[]> => {
+    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), 'signer', account.toString())
 
-    const subsocialAddress: string = new GenericAccountId(registry, encodeAddress(account)).toString()
-    
-    return {
-      ...item,
-      id: `${id}-${subsocialAddress}`,
-      domain: id,
-      account: subsocialAddress,
+    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
+      return []
     }
-  })
-})
+
+    const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_SIGNER, {
+      signer: account,
+    })
+
+    return result.getPendingOrdersBySigner.orders as PendingDomainEntity[]
+  },
+)
 
 export const fetchPendingOrdersByAccount = createAsyncThunk<
   MaybeEntity[],
@@ -117,31 +133,20 @@ export const fetchPendingOrdersByAccount = createAsyncThunk<
 >(
   `${sliceName}/fetchManyByAccount`,
   async ({ id: account, reload }, { getState }): Promise<MaybeEntity[]> => {
-    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), account.toString())
+    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), 'createdByAccount', account.toString())
 
     if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
       return []
     }
 
-    const result: any = await sellerSquidGraphQlClient.request(
-      PENDING_ORDERS_BY_ACCOUNT,
-      { account },
-    )
+    const decodedAddress = u8aToHex(decodeAddress(account.toString()))
+    console.log(decodedAddress)
 
-    const orders = result.getPendingOrdersByAccount.orders as Omit<PendingDomainEntity, 'domain'>[]
-
-    return orders.map(item => {
-      const { id, account } = item
-
-      const subsocialAddress: string = new GenericAccountId(registry, encodeAddress(account)).toString()
-      
-      return {
-        ...item,
-        id: `${id}-${subsocialAddress}`,
-        domain: id,
-        account: subsocialAddress,
-      }
+    const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_ACCOUNT, {
+      createdByAccount: decodedAddress,
     })
+
+    return result.getPendingOrdersByCreatedByAccount.orders as PendingDomainEntity[]
   },
 )
 
@@ -149,16 +154,11 @@ const slice = createSlice({
   name: sliceName,
   initialState: adapter.getInitialState(),
   reducers: {
-    removePendingOrder: (
-      state,
-      action: PayloadAction<RemovePendingOrderProps>
-    ) => {
-      const { address, domainName } = action.payload
-
-      const id = `${domainName}-${address}`
+    removePendingOrder: (state, action: PayloadAction<RemovePendingOrderProps>) => {
+      const { domainName } = action.payload
 
-      adapter.removeOne(state, id)
-    }
+      adapter.removeOne(state, domainName)
+    },
   },
   extraReducers: builder => {
     builder
@@ -166,6 +166,10 @@ const slice = createSlice({
         adapter.removeAll(state)
         adapter.upsertMany(state, payload.filter(isDef))
       })
+      .addCase(fetchPendingOrdersBySigner.fulfilled, (state, { payload }) => {
+        adapter.removeAll(state)
+        adapter.addMany(state, payload.filter(isDef))
+      })
       .addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
         adapter.removeAll(state)
         adapter.addMany(state, payload.filter(isDef))
@@ -173,6 +177,6 @@ const slice = createSlice({
   },
 })
 
-export const { removePendingOrder } = slice.actions 
+export const { removePendingOrder } = slice.actions
 
 export default slice.reducer

From 9f84828614b6ac41d1ebd633700ef164d3e170ec Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 1 May 2023 02:50:34 +0300
Subject: [PATCH 28/54] Fix fetch new pending orders

---
 .../domains/EligibleDomainsSection.tsx        |  68 +++++---
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  14 +-
 .../dot-seller/RegisterDomainModal.tsx        |  27 ++-
 .../domains/dot-seller/seller-queries.ts      |   8 +-
 src/components/domains/dot-seller/utils.tsx   |   3 +-
 src/components/domains/index.tsx              |   5 +-
 .../domains/manage/ManageDomainProvider.tsx   |  10 +-
 .../domains/pendingOrders/index.tsx           |  46 ++---
 src/components/donate/LazyTxButton.tsx        |   7 +
 .../substrate/SubstrateTxButton.tsx           |   9 +-
 src/components/utils/OffchainUtils.ts         |  10 ++
 src/pages/api/pending-order/update.ts         |  64 +++++++
 .../domainPendingOrders/pendingOrdersHooks.ts |  29 ++-
 .../domainPendingOrders/pendingOrdersSlice.ts | 165 +++++++++++++++---
 14 files changed, 371 insertions(+), 94 deletions(-)
 create mode 100644 src/pages/api/pending-order/update.ts

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 5e47925f2..50d6f81f4 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,17 +1,17 @@
+import { InfoCircleOutlined } from '@ant-design/icons'
 import { isFunction } from '@polkadot/util'
 import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
 import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import BN from 'bn.js'
-import clsx from 'clsx'
 import React, { useEffect } from 'react'
 import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
 import { useAppDispatch } from 'src/rtk/app/store'
+import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
-import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import {
-  useCreateReloadPendingOrdersByAccount,
+  useCreateReloadPendingOrders,
   useSelectPendingOrderById,
 } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import {
@@ -21,12 +21,12 @@ import {
   useIsReservedWord,
   useIsSupportedTld,
 } from '../../rtk/features/domains/domainHooks'
-import { useIsMyAddress, useMyAddress } from '../auth/MyAccountsContext'
+import { useIsMyAddress, useMyAccountsContext, useMyAddress } from '../auth/MyAccountsContext'
 import { TxCallback } from '../substrate/SubstrateTxButton'
 import useSubstrate from '../substrate/useSubstrate'
 import { Loading, LocalIcon } from '../utils'
-import { MutedDiv } from '../utils/MutedText'
-import { createPendingOrder, deletePendingOrder } from '../utils/OffchainUtils'
+import { MutedDiv, MutedSpan } from '../utils/MutedText'
+import { createPendingOrder, deletePendingOrder, updatePendingOrder } from '../utils/OffchainUtils'
 import TxButton from '../utils/TxButton'
 import RegisterDomainButton from './dot-seller/RegisterDomainModal'
 import { pendingOrderAction } from './dot-seller/utils'
@@ -59,7 +59,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
   const reloadMyDomains = useCreateReloadMyDomains()
   const { openManageModal, setProcessingDomains } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
-  const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
+  const reloadPendingOrders = useCreateReloadPendingOrders()
   const { purchaser } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
@@ -132,6 +132,16 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
     })
   }
 
+  const onCancel = async () => {
+    if (!sellerConfig || !myAddress) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    await updatePendingOrder(domainName, true, sellerApiAuthTokenManager)
+
+    dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
+  }
+
   return (
     <span className='d-flex align-items-center w-100'>
       <TxButton
@@ -144,6 +154,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
         tx={'domains.registerDomain'}
         onSuccess={onSuccess}
         onFailed={onFailed}
+        onCancel={onCancel}
         isFreeTx
         onClick={() => onClick()}
         params={getTxParams}
@@ -182,25 +193,10 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
 
 export const DomainItem = ({ domain, action }: DomainItemProps) => {
   const actionComponent = isFunction(action) ? action() : action
-  const myAddress = useMyAddress()
-  const pendingOrders = useSelectPendingOrderById(domain)
-  const processingOrder = useSelectProcessingOrderById(domain)
-  const { processingDomains } = useManageDomainContext()
-
-  const { createdByAccount: account } = pendingOrders || {}
-
-  const isDomainProcessing = processingDomains[domain]
 
   return (
     <Row justify='space-between' align='middle' className={styles.DomainResultItem}>
-      <div className='d-flex align-items-center justify-content-between'>
-        <span>{domain}</span>
-        {account && myAddress === account && (
-          <Tag color='gold' className={clsx('ml-2', styles.PendingTag)}>
-            {processingOrder || isDomainProcessing ? 'Processing' : 'Pending'}
-          </Tag>
-        )}
-      </div>
+      <span>{domain}</span>
       {actionComponent}
     </Row>
   )
@@ -228,11 +224,12 @@ const DomainAction = ({ domain }: DomainProps) => {
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const pendingOrder = useSelectPendingOrderById(domain.id)
+  const { setAddress } = useMyAccountsContext()
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
-  const { createdByAccount: account } = pendingOrder || {}
+  const { createdByAccount: account, signer } = pendingOrder || {}
 
-  if (account && account !== myAddress) {
+  if (account && signer && account !== myAddress && signer !== myAddress) {
     return (
       <Tooltip
         title={`Someone else currently has this domain reserved.
@@ -244,7 +241,26 @@ const DomainAction = ({ domain }: DomainProps) => {
     )
   }
 
-  const label = account === myAddress ? 'Continue' : undefined
+  if (account && signer && account === myAddress && signer !== myAddress) {
+    const onClick = () => {
+      setAddress(signer)
+    }
+
+    return (
+      <div>
+        <Tooltip title={'You are not a purchaser. Switch to the purchaser account'}>
+          <MutedSpan>
+            <InfoCircleOutlined />
+          </MutedSpan>
+        </Tooltip>
+        <Button type='primary' onClick={onClick} className='ml-2'>
+          Switch account
+        </Button>
+      </div>
+    )
+  }
+
+  const label = signer === myAddress ? 'Continue' : undefined
 
   return owner ? (
     <UnavailableBtn domain={domain} />
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index 3d64f10df..973508b43 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -10,13 +10,14 @@ import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import LazyTxButton from 'src/components/donate/LazyTxButton'
 import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
-import { createPendingOrder, deletePendingOrder } from 'src/components/utils/OffchainUtils'
+import { createPendingOrder, deletePendingOrder, updatePendingOrder } from 'src/components/utils/OffchainUtils'
 import { useAppDispatch } from 'src/rtk/app/store'
 import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useCreateReloadProcessingOrdersByAccount } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import { pendingOrderAction, useGetDecimalAndSymbol } from './utils'
+import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -132,6 +133,16 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
     })
   }
 
+  const onCancel = async () => {
+    if (!sellerConfig || !myAddress) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    await updatePendingOrder(domainName, true, sellerApiAuthTokenManager)
+
+    dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
+  }
+
   return (
     <LazyTxButton
       block
@@ -148,6 +159,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
       tx={'utility.batchAll'}
       params={getParams}
       onSuccess={onSuccess}
+      onCancel={onCancel}
       onClick={() => onClick()}
       label={'Register'}
       className={className}
diff --git a/src/components/domains/dot-seller/RegisterDomainModal.tsx b/src/components/domains/dot-seller/RegisterDomainModal.tsx
index cca8cdc4e..7f4cd7b90 100644
--- a/src/components/domains/dot-seller/RegisterDomainModal.tsx
+++ b/src/components/domains/dot-seller/RegisterDomainModal.tsx
@@ -7,6 +7,7 @@ import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import { useSubstrate } from 'src/components/substrate'
 import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import { useSelectPendingOrderById } from '../../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { BuyDomainSection } from '../EligibleDomainsSection'
@@ -24,12 +25,14 @@ const ModalBody = ({ domainName, price }: ModalBodyProps) => {
   const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const { variant } = useManageDomainContext()
+  const pendingOrder = useSelectPendingOrderById(domainName)
   const nativeBalance = useCreateBalance(purchaser)
   const isMyAddress = useIsMyAddress(recipient)
 
+  const { destination } = pendingOrder || {}
   const { sellerChain } = sellerConfig || {}
 
-  const isSub = variant === 'SUB'
+  const isSub = destination ? destination === 'SUB' : variant === 'SUB'
 
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
@@ -67,7 +70,7 @@ const ModalBody = ({ domainName, price }: ModalBodyProps) => {
           network={isSub ? undefined : sellerChain}
         />
       </Space>
-      {variant !== 'SUB' && (
+      {!isSub && (
         <Space direction='vertical' size={8} className={'w-100'}>
           <div className={clsx(styles.Recipient, 'd-flex align-items-center')}>
             <div>Recipient </div>
@@ -115,6 +118,9 @@ type BuyDomainModalProps = {
 
 const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps) => {
   const { variant } = useManageDomainContext()
+  const pendingOrder = useSelectPendingOrderById(domainName)
+
+  const { destination } = pendingOrder || {}
 
   const title = (
     <div className={styles.ModalTitle}>
@@ -122,9 +128,11 @@ const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps)
     </div>
   )
 
+  const isByDot = destination ? destination === 'DOT' : variant === 'DOT'
+
   const modalFooter = (
     <div className={styles.FooterButtons}>
-      {variant === 'DOT' ? (
+      {isByDot ? (
         <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} />
       ) : (
         <BuyDomainSection domainName={domainName} />
@@ -165,19 +173,22 @@ const RegisterDomainButton = ({
   const { api } = useSubstrate()
   const processingOrder = useSelectProcessingOrderById(domainName)
   const { processingDomains } = useManageDomainContext()
+  const pendingOrder = useSelectPendingOrderById(domainName)
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
   const close = () => setOpen(false)
 
+  const { destination } = pendingOrder || {}
+
+  const isSub = destination ? destination === 'SUB' : variant === 'SUB'
+
   const price = useMemo(() => {
-    return variant === 'SUB'
-      ? api?.consts.domains.baseDomainDeposit.toString()
-      : domainRegistrationPriceFixed
-  }, [variant])
+    return isSub ? api?.consts.domains.baseDomainDeposit.toString() : domainRegistrationPriceFixed
+  }, [isSub])
 
-  const chainProps = variant === 'SUB' ? {} : { decimals: decimal, currency: symbol }
+  const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
   const isProcessingDomain = processingDomains[domainName]
 
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index 093cbdaf4..b2f43cce6 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -18,7 +18,7 @@ export const PENDING_ORDERS_BY_IDS = gql`
 
 export const PENDING_ORDERS_BY_SIGNER = gql`
   query GetPendingOrdersBySigner($signer: String!) {
-    getPendingOrdersByAccount(signer: $signer) {
+    getPendingOrdersBySigner(signer: $signer) {
       orders {
         id
         createdByAccount
@@ -108,3 +108,9 @@ export const DELETE_PENDING_ORDER = gql`
     deletePendingOrderById(id: $id)
   }
 `
+
+export const UPDATE_PENDING_ORDER = gql`
+  mutation updatePendingOrderPurchaseStatusById($id: String!, $interrupted: Boolean!) {
+    updatePendingOrderPurchaseStatusById(id: $id, interrupted: $interrupted)
+  }
+`
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
index f0e159fae..7bd71d56e 100644
--- a/src/components/domains/dot-seller/utils.tsx
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -1,6 +1,6 @@
 import { AppDispatch } from 'src/rtk/app/store'
 import { useChainInfo } from '../../../rtk/features/chainsInfo/chainsInfoHooks'
-import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import { fetchPendingOrdersByAccount, fetchPendingOrdersBySigner } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { showErrorMessage } from 'src/components/utils/Message'
 
 export const useGetDecimalAndSymbol = (network?: string) => {
@@ -28,6 +28,7 @@ export const pendingOrderAction = async <T extends any>({ action, args, dispatch
 
   if (result?.success) {
     dispatch(fetchPendingOrdersByAccount({ id: account, reload: true }))
+    dispatch(fetchPendingOrdersBySigner({ id: account, reload: true }))
     return false
   } else {
     showErrorMessage(result?.errors)
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index 2996c9ba6..19f243e30 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -145,8 +145,11 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
 }
 
 export const DomainRegisterPage = ({ promoCode }: DomainServerProps) => {
-  useFetchDomainPendingOrdersByAccount()
+  const myAddress = useMyAddress()
+
+  useFetchDomainPendingOrdersByAccount(myAddress)
   useFetchSellerConfig()
+  
   const isMobile = useIsMobileWidthOrDevice()
 
   const rightPanelContent = (
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index 595f3a1e5..a243e3d38 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, useContext, useEffect, useState } from 'react'
 import { useMyAddress } from '../../auth/MyAccountsContext'
 import { ManageDomainModal } from './DomainManageModal'
 
@@ -29,6 +29,7 @@ const ManageDomainContext = createContext<ManageDomainProviderState>({} as any)
 
 export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ children, promoCode }) => {
   const myAddress = useMyAddress()
+
   const [currentStep, setStep] = useState<MenuSteps>()
   const [domain, setDomain] = useState<string>()
   const [visible, setVisible] = useState(true)
@@ -38,6 +39,13 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [isFetchNewDomains, setIsFetchNewDomains] = useState(false)
   const [processingDomains, setProcessingDomains] = useState<Record<string, boolean>>({})
 
+  useEffect(() => {
+    if(!myAddress) return
+
+    setRecipient(myAddress)
+    setPurchaser(myAddress)
+  }, [ myAddress])
+
   const router = useRouter()
   const [activePromoCode, setActivePromoCode] = useState(promoCode)
   const clearPromoCode = () => {
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 9d223aaa0..8e321c578 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -6,7 +6,10 @@ import dayjs from 'dayjs'
 import { useEffect, useMemo, useState } from 'react'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import CardWithContent from 'src/components/utils/cards/CardWithContent'
-import { useCreateReloadPendingOrdersByAccount, useSelectPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import {
+  useCreateReloadPendingOrders,
+  useSelectPendingOrders,
+} from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import {
   useFetchProcessingOrdersByIds,
@@ -27,21 +30,19 @@ type PendingDomainProps = {
 const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
   const processingOrder = useSelectProcessingOrderById(pendingDomain.id)
-  const reloadPendingOrders = useCreateReloadPendingOrdersByAccount()
+  const reloadPendingOrders = useCreateReloadPendingOrders()
   const myAddress = useMyAddress()
 
   const { processingDomains } = useManageDomainContext()
 
-  const { id, timestamp, destination } = pendingDomain
+  const { id, timestamp, destination, purchaseInterrupted, signer } = pendingDomain
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
   const expiresAt = useMemo(() => {
-    const expiresAtValue = dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0) 
+    const expiresAtValue = dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0)
 
-    if(time >= expiresAtValue + 12000) {
+    if (time >= expiresAtValue + 12000) {
       reloadPendingOrders(myAddress)
-
-      return
     }
 
     return SubDate.formatDate(expiresAtValue)
@@ -49,6 +50,20 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
 
   const isDomainProcessing = processingDomains[pendingDomain.id]
 
+  const registerButton =
+    processingOrder || isDomainProcessing ? (
+      <Tag color='gold' className={clsx(styles.PendingTag)}>
+        Processing
+      </Tag>
+    ) : (
+      <RegisterDomainButton
+        domainName={id}
+        label={'Continue'}
+        withPrice={false}
+        variant={destination as Variant}
+      />
+    )
+
   return (
     <div className='d-flex align-items-center justify-content-between'>
       <div className='d-flex align-items-center mr-2'>
@@ -60,24 +75,13 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
           <InfoCircleOutlined />
         </Tooltip>
       </div>
-      {processingOrder || isDomainProcessing ? (
-        <Tag color='gold' className={clsx(styles.PendingTag)}>
-          Processing
-        </Tag>
-      ) : (
-        <RegisterDomainButton
-          domainName={id}
-          label={'Continue'}
-          withPrice={false}
-          variant={destination as Variant}
-        />
-      )}
+      {signer === myAddress && purchaseInterrupted && registerButton}
     </div>
   )
 }
 
 const PendingOrdersSection = () => {
-  const pendingOrders = useSelectPendingOrdersByAccount()
+  const pendingOrders = useSelectPendingOrders()
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const [time, setTime] = useState<number>(dayjs().valueOf())
@@ -106,7 +110,7 @@ const PendingOrdersSection = () => {
         {orders}
       </Space>
     )
-  }, [pendingOrders.length, time])
+  }, [pendingOrders.length, time, myAddress])
 
   if (!pendingOrders || isEmptyArray(pendingOrders)) return null
 
diff --git a/src/components/donate/LazyTxButton.tsx b/src/components/donate/LazyTxButton.tsx
index 0a6659787..c9b2f459e 100644
--- a/src/components/donate/LazyTxButton.tsx
+++ b/src/components/donate/LazyTxButton.tsx
@@ -49,6 +49,7 @@ export type TxButtonProps = BaseTxButtonProps & {
   unsigned?: boolean
   onValidate?: () => boolean | Promise<boolean>
   onClick?: () => Promise<boolean | undefined> | void
+  onCancel?: () => void
   onSuccess?: TxCallback
   onFailed?: TxFailedCallback
   successMessage?: SuccessMessage
@@ -90,6 +91,7 @@ function LazyTxButton({
   onValidate,
   onClick,
   onSuccess,
+  onCancel,
   onFailed,
   successMessage,
   failedMessage,
@@ -176,6 +178,11 @@ function LazyTxButton({
     if (err) {
       const errMsg = `Tx failed: ${err.toString()}`
       log.debug(`❌ ${errMsg}`)
+
+      if(errMsg.includes('Cancelled')) {
+        onCancel?.()
+      }
+      
       showErrorMessage(errMsg)
     }
 
diff --git a/src/components/substrate/SubstrateTxButton.tsx b/src/components/substrate/SubstrateTxButton.tsx
index e0ee4a328..c636f7123 100644
--- a/src/components/substrate/SubstrateTxButton.tsx
+++ b/src/components/substrate/SubstrateTxButton.tsx
@@ -53,6 +53,7 @@ export type TxButtonProps = BaseTxButtonProps & {
   onValidate?: () => boolean | Promise<boolean>
   onClick?: () => Promise<any | undefined> | void
   onSuccess?: TxCallback
+  onCancel?: () => void
   isFreeTx?: boolean
   onFailed?: TxFailedCallback
   successMessage?: SuccessMessage
@@ -74,6 +75,7 @@ function TxButton({
   onClick,
   onSuccess,
   onFailed,
+  onCancel,
   isFreeTx = false,
   successMessage,
   failedMessage,
@@ -86,7 +88,7 @@ function TxButton({
   const { api: subsocialApi } = useSubstrate()
   const openOnBoardingModal = useOpenCloseOnBoardingModal()
   const [isSending, , setIsSending] = useToggle(false)
-  console.log(accountId)
+
   const { isMobile } = useResponsiveSize()
   const {
     openSignInModal,
@@ -203,6 +205,11 @@ function TxButton({
     if (err) {
       const errMsg = `Tx failed: ${err.toString()}`
       log.debug(`❌ ${errMsg}`)
+
+      if(errMsg.includes('Cancelled')) {
+        onCancel?.()
+      }
+
       showErrorMessage(errMsg)
     }
 
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index a3bccff53..27ed481f1 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -119,3 +119,13 @@ export const deletePendingOrder = async (domain: string, sellerApiAuthTokenManag
 
   return res.data
 }
+
+export const updatePendingOrder = async (domain: string, interrupted: boolean, sellerApiAuthTokenManager: string) => {
+  const res = await axios.post('/api/pending-order/update', {
+    domain,
+    sellerApiAuthTokenManager,
+    interrupted
+  })
+
+  return res.data
+}
diff --git a/src/pages/api/pending-order/update.ts b/src/pages/api/pending-order/update.ts
new file mode 100644
index 000000000..318986489
--- /dev/null
+++ b/src/pages/api/pending-order/update.ts
@@ -0,0 +1,64 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import { GraphQLClient } from 'graphql-request'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { xSellerSquid } from 'src/components/domains/dot-seller/config'
+import { UPDATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+
+dayjs.extend(utc)
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { sellerApiAuthTokenManager, domain, interrupted } = req.body
+
+  const nonce = new Uint8Array(24)
+  nonce[0] = 111
+
+  if (req.method !== 'POST') return res.status(404).end()
+
+  try {
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.SELLER_CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': clientId,
+    }
+
+    const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid, {
+      headers: requestHeaders,
+    })
+
+    const result = await sellerSquidGraphQlClient.request(UPDATE_PENDING_ORDER, {
+      id: domain,
+      interrupted,
+    })
+
+    res.status(200).send({ success: true })
+    return result
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
+}
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index 9c1fce24d..82904cf80 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -20,15 +20,19 @@ export const useFetchDomainPendingOrdersByIds = (domains: string[]) => {
   useFetch(fetchPendingOrdersByIds, { ids })
 }
 
-export const useFetchDomainPendingOrdersByAccount = () => {
+export const useFetchDomainPendingOrdersByCreatedByAccount = () => {
   const myAddress = useMyAddress()
 
   useFetch(fetchPendingOrdersByAccount, { id: myAddress || '' })
 }
 
-export const useFetchDomainPendingOrdersBySigner = (address?: string) => {
-
+export const useFetchDomainPendingOrdersBySigner = (address?: string) => (
   useFetch(fetchPendingOrdersBySigner, { id: address || '' })
+)
+
+export const useFetchDomainPendingOrdersByAccount = (address?: string) => {
+  useFetchDomainPendingOrdersByCreatedByAccount()
+  useFetchDomainPendingOrdersBySigner(address)
 }
 
 export const useSelectPendingOrderById = (id: string) => {
@@ -49,9 +53,24 @@ export const useSelectPendingOrdersBySigner = (address?: string) => {
   return useAppSelector(state => selectPendingOrdersByAccount(state, 'signer', address))
 }
 
-export const useCreateReloadPendingOrdersByAccount = () => {
+export const useSelectPendingOrders = () => {
+  const myAddress = useMyAddress()
+  
+  const ordersByAccount = useSelectPendingOrdersByAccount()
+  const ordersBySigner = useSelectPendingOrdersBySigner(myAddress)
+
+  const ordersSet = new Set([...ordersByAccount, ...ordersBySigner])
+
+  return Array.from(ordersSet)
+}
+
+
+export const useCreateReloadPendingOrders = () => {
   return useActions<string | undefined>(({ dispatch, args }) => {
-    args && dispatch(fetchPendingOrdersByAccount({ id: args, reload: true }))
+    if(args) {
+      dispatch(fetchPendingOrdersByAccount({ id: args, reload: true }))
+      dispatch(fetchPendingOrdersBySigner({ id: args, reload: true }))
+    }
   })
 }
 
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index dfc7f6188..beb935d7a 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -1,4 +1,7 @@
+import { decodeAddress } from '@polkadot/keyring'
 import { GenericAccountId } from '@polkadot/types'
+import { u8aToHex } from '@polkadot/util'
+import { encodeAddress } from '@polkadot/util-crypto'
 import {
   createAsyncThunk,
   createEntityAdapter,
@@ -7,7 +10,7 @@ import {
   PayloadAction,
 } from '@reduxjs/toolkit'
 import registry from '@subsocial/api/utils/registry'
-import { isDef, isEmptyArray } from '@subsocial/utils'
+import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import {
   PENDING_ORDERS_BY_ACCOUNT,
@@ -16,9 +19,6 @@ import {
 } from 'src/components/domains/dot-seller/seller-queries'
 import { ThunkApiConfig } from 'src/rtk/app/helpers'
 import { RootState } from 'src/rtk/app/rootReducer'
-import { encodeAddress } from '@polkadot/util-crypto'
-import { decodeAddress } from '@polkadot/keyring'
-import { u8aToHex } from '@polkadot/util'
 
 export type RemovePendingOrderProps = {
   domainName: string
@@ -38,6 +38,11 @@ const sliceName = 'domainPndingOrders'
 
 type MaybeEntity = PendingDomainEntity | undefined
 
+type FetchResult = {
+  idsToRemove: string[]
+  orders: MaybeEntity[]
+}
+
 const adapter = createEntityAdapter<PendingDomainEntity>()
 
 const selectors = adapter.getSelectors<RootState>(state => state.ordersById)
@@ -76,77 +81,160 @@ export const selectPendingOrdersByIds = (state: RootState, ids: string[]) => {
   return selectEntitiesByIds(state, entityIds as string[])
 }
 
-export const selectPendingOrdersByAccount = (state: RootState, field: 'signer' | 'createdByAccount', address?: string) => {
+export const selectPendingOrdersByAccount = (
+  state: RootState,
+  field: 'signer' | 'createdByAccount',
+  address?: string,
+) => {
   const pendingOrdersStore = selectors.selectAll(state)
 
-  return pendingOrdersStore.filter((item) => {
+  return pendingOrdersStore.filter(item => {
     const account = item[field]
 
-    const subsocialAddress: string = new GenericAccountId(registry, encodeAddress(account)).toString()
+    const subsocialAddress: string = new GenericAccountId(
+      registry,
+      encodeAddress(account),
+    ).toString()
 
     return subsocialAddress === address
   })
 }
 
 export const fetchPendingOrdersByIds = createAsyncThunk<
-  MaybeEntity[],
+  FetchResult,
   FetchManyWithoutApi,
   ThunkApiConfig
->(`${sliceName}/fetchManyByIds`, async ({ ids, reload }, { getState }): Promise<MaybeEntity[]> => {
+>(`${sliceName}/fetchManyByIds`, async ({ ids, reload }, { getState }): Promise<FetchResult> => {
   const entityIds = ids as string[]
   const knownDomainsPendingOrders = selectPendingOrdersByIds(getState(), entityIds)
 
   if (!reload && knownDomainsPendingOrders) {
-    return []
+    return {
+      idsToRemove: [],
+      orders: []
+    }
   }
 
   const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_IDS, { ids })
 
-  return result.getPendingOrdersByIds.orders as PendingDomainEntity[]
+  const orders = result.getPendingOrdersByIds.orders as PendingDomainEntity[]
+
+  const parsedOrders = orders.map(order => {
+    const { signer, createdByAccount } = order
+
+    return {
+      ...order,
+      signer: toSubsocialAddress(signer) || '',
+      createdByAccount: toSubsocialAddress(createdByAccount) || '',
+    }
+  })
+
+  const parsedOrdersIds = parsedOrders.map((order) => order.id)
+  const knownOrdersIds = knownDomainsPendingOrders.map((order) => order.id)
+
+  const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
+
+  return {
+    idsToRemove,
+    orders: parsedOrders
+  }
 })
 
 export const fetchPendingOrdersBySigner = createAsyncThunk<
-  MaybeEntity[],
+  FetchResult,
   FetchOneWithoutApi,
   ThunkApiConfig
 >(
   `${sliceName}/fetchManyBySigner`,
-  async ({ id: account, reload }, { getState }): Promise<MaybeEntity[]> => {
-    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), 'signer', account.toString())
+  async ({ id: account, reload }, { getState }): Promise<FetchResult> => {
+    const knownDomainsPendingOrders = selectPendingOrdersByAccount(
+      getState(),
+      'signer',
+      account.toString(),
+    )
 
     if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
-      return []
+      return {
+        idsToRemove: [],
+        orders: []
+      }
     }
 
     const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_SIGNER, {
       signer: account,
     })
 
-    return result.getPendingOrdersBySigner.orders as PendingDomainEntity[]
+    const orders = result.getPendingOrdersBySigner.orders as PendingDomainEntity[]
+
+    const parsedOrders = orders.map(order => {
+      const { signer, createdByAccount } = order
+
+      return {
+        ...order,
+        signer: toSubsocialAddress(signer) || '',
+        createdByAccount: toSubsocialAddress(createdByAccount) || '',
+      }
+    })
+
+    const parsedOrdersIds = parsedOrders.map((order) => order.id)
+    const knownOrdersIds = knownDomainsPendingOrders.map((order) => order.id)
+
+    const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
+
+    return {
+      idsToRemove,
+      orders: parsedOrders
+    }
   },
 )
 
 export const fetchPendingOrdersByAccount = createAsyncThunk<
-  MaybeEntity[],
+  FetchResult,
   FetchOneWithoutApi,
   ThunkApiConfig
 >(
   `${sliceName}/fetchManyByAccount`,
-  async ({ id: account, reload }, { getState }): Promise<MaybeEntity[]> => {
-    const knownDomainsPendingOrders = selectPendingOrdersByAccount(getState(), 'createdByAccount', account.toString())
+  async ({ id: account, reload }, { getState }): Promise<FetchResult> => {
+    const knownDomainsPendingOrders = selectPendingOrdersByAccount(
+      getState(),
+      'createdByAccount',
+      account.toString(),
+    )
 
     if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
-      return []
+      return {
+        idsToRemove: [],
+        orders: []
+      }
     }
 
     const decodedAddress = u8aToHex(decodeAddress(account.toString()))
-    console.log(decodedAddress)
 
     const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_ACCOUNT, {
       createdByAccount: decodedAddress,
     })
 
-    return result.getPendingOrdersByCreatedByAccount.orders as PendingDomainEntity[]
+    const orders = result.getPendingOrdersByCreatedByAccount.orders as PendingDomainEntity[]
+
+    const parsedOrders = orders.map(order => {
+      const { signer, createdByAccount } = order
+
+      return {
+        ...order,
+        signer: toSubsocialAddress(signer) || '',
+        createdByAccount: toSubsocialAddress(createdByAccount) || '',
+      }
+    })
+
+    const parsedOrdersIds = parsedOrders.map((order) => order.id)
+    const knownOrdersIds = knownDomainsPendingOrders.map((order) => order.id)
+
+    const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
+
+    return {
+      idsToRemove,
+      orders: parsedOrders
+    }
   },
 )
 
@@ -163,16 +251,37 @@ const slice = createSlice({
   extraReducers: builder => {
     builder
       .addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) => {
-        adapter.removeAll(state)
-        adapter.upsertMany(state, payload.filter(isDef))
+        const { idsToRemove, orders } = payload
+
+        if(!orders) return 
+
+        if(!isEmptyArray(idsToRemove)) {
+          adapter.removeMany(state, idsToRemove)
+        }
+
+        adapter.upsertMany(state, orders.filter(isDef))
       })
       .addCase(fetchPendingOrdersBySigner.fulfilled, (state, { payload }) => {
-        adapter.removeAll(state)
-        adapter.addMany(state, payload.filter(isDef))
+        const { idsToRemove, orders } = payload
+
+        if(!orders) return 
+
+        if(!isEmptyArray(idsToRemove)) {
+          adapter.removeMany(state, idsToRemove)
+        }
+
+        adapter.upsertMany(state, orders.filter(isDef))
       })
       .addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
-        adapter.removeAll(state)
-        adapter.addMany(state, payload.filter(isDef))
+        const { idsToRemove, orders } = payload
+
+        if(!orders) return 
+
+        if(!isEmptyArray(idsToRemove)) {
+          adapter.removeMany(state, idsToRemove)
+        }
+
+        adapter.upsertMany(state, orders.filter(isDef))
       })
   },
 })

From 2bc007b32eff6cdc8eb6479996d0d31f9a64e328 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 1 May 2023 03:08:44 +0300
Subject: [PATCH 29/54] Fix delete pending order action

---
 src/components/domains/EligibleDomainsSection.tsx      | 1 +
 src/components/domains/dot-seller/BuyByDotTxButton.tsx | 1 +
 src/components/domains/dot-seller/utils.tsx            | 7 ++++---
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 50d6f81f4..bf2769fa3 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -86,6 +86,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
       args: [domainName, sellerApiAuthTokenManager],
       account: purchaser,
       dispatch,
+      reload: false
     })
 
     reloadPendingOrders(purchaser)
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index 973508b43..dd6ec3f22 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -113,6 +113,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
         args: [domainName, sellerApiAuthTokenManager],
         account: purchaser,
         dispatch,
+        reload: false
       })
     }
 
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
index 7bd71d56e..ef4c12a13 100644
--- a/src/components/domains/dot-seller/utils.tsx
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -21,17 +21,18 @@ type PendingActionProps<T> = {
   args: T[]
   dispatch: AppDispatch
   account: string
+  reload?: boolean
 }
 
-export const pendingOrderAction = async <T extends any>({ action, args, dispatch, account }: PendingActionProps<T>) => {
+export const pendingOrderAction = async <T extends any>({ action, args, dispatch, account, reload = true }: PendingActionProps<T>) => {
   const result = await action(...args)
 
-  if (result?.success) {
+  if (result?.success && reload) {
     dispatch(fetchPendingOrdersByAccount({ id: account, reload: true }))
     dispatch(fetchPendingOrdersBySigner({ id: account, reload: true }))
     return false
   } else {
-    showErrorMessage(result?.errors)
+    reload && showErrorMessage(result?.errors)
 
     return true
   }

From 1de2bb273e1e2264ea327160873e7c01773547c6 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 3 May 2023 03:32:44 +0300
Subject: [PATCH 30/54] Refactor code

---
 .../common/inputs/SelectAccountInput.tsx      |   4 +-
 .../domains/EligibleDomainsSection.tsx        |  13 +-
 .../domains/dot-seller/BuyByDotTxButton.tsx   |  11 +-
 .../dot-seller/RegisterDomainModal.tsx        |  32 +--
 .../domains/dot-seller/seller-queries.ts      |   2 +-
 .../domains/pendingOrders/index.tsx           |  11 +-
 src/rtk/app/rootReducer.ts                    |   2 -
 .../domainPendingOrders/pendingOrdersHooks.ts |  29 +--
 .../domainPendingOrders/pendingOrdersSlice.ts | 190 ++++--------------
 src/rtk/features/domainPendingOrders/utils.ts |  93 +++++++++
 .../processingRegistratoinOrdersHooks.ts      |  36 ----
 .../processingRegistratoinOrdersSlice.ts      | 112 -----------
 12 files changed, 172 insertions(+), 363 deletions(-)
 create mode 100644 src/rtk/features/domainPendingOrders/utils.ts
 delete mode 100644 src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts
 delete mode 100644 src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts

diff --git a/src/components/common/inputs/SelectAccountInput.tsx b/src/components/common/inputs/SelectAccountInput.tsx
index 4ccceced2..d9c94b232 100644
--- a/src/components/common/inputs/SelectAccountInput.tsx
+++ b/src/components/common/inputs/SelectAccountInput.tsx
@@ -1,7 +1,7 @@
 import { Select } from 'antd'
 import { useEffect, useState } from 'react'
 import { SelectAddressPreview } from '../../profile-selector/MyAccountMenu'
-import { isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
+import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
 import registry from '@subsocial/api/utils/registry'
 import { GenericAccountId } from '@polkadot/types'
 import Avatar from '../../profiles/address-views/Avatar'
@@ -55,7 +55,7 @@ export const SelectAccountInput = ({
   disabled
 }: SelectAccountInputProps) => {
   const { accounts, status } = useMyAccounts()
-  const allExtensionAccounts = accounts.map(x => toSubsocialAddress(x.address) as string)
+  const allExtensionAccounts = accounts.map(x => x.address && toSubsocialAddress(x.address) as string).filter(isDef)
 
   const [ defaultOptions, setDefaultOptions ] = useState<any[]>([])
   const [ selectOptions, setSelectOptions ] = useState<any[]>(defaultOptions)
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index bf2769fa3..1630e8832 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -96,6 +96,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
   const onFailed = async (errorInfo: any) => {
     const jsonErr = JSON.stringify(errorInfo)
     log.error('Failed:', jsonErr)
+    
     showErrorMessage(jsonErr)
     setProcessingDomains({ [domainName]: false })
   }
@@ -116,7 +117,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
       })
     }
 
-    return await pendingOrderAction({
+    const preventTx = await pendingOrderAction({
       action: createPendingOrder,
       args: [
         {
@@ -131,6 +132,12 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
       account: purchaser,
       dispatch,
     })
+
+    if(preventTx) {
+      setProcessingDomains({ [domainName]: false })
+    }
+
+    return preventTx
   }
 
   const onCancel = async () => {
@@ -261,12 +268,10 @@ const DomainAction = ({ domain }: DomainProps) => {
     )
   }
 
-  const label = signer === myAddress ? 'Continue' : undefined
-
   return owner ? (
     <UnavailableBtn domain={domain} />
   ) : (
-    <RegisterDomainButton domainName={domain.id} label={label} variant={variant} />
+    <RegisterDomainButton domainName={domain.id} variant={variant} />
   )
 }
 
diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
index dd6ec3f22..7f46faa0d 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/dot-seller/BuyByDotTxButton.tsx
@@ -13,7 +13,6 @@ import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyCo
 import { createPendingOrder, deletePendingOrder, updatePendingOrder } from 'src/components/utils/OffchainUtils'
 import { useAppDispatch } from 'src/rtk/app/store'
 import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
-import { useCreateReloadProcessingOrdersByAccount } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useManageDomainContext } from '../manage/ManageDomainProvider'
 import { pendingOrderAction, useGetDecimalAndSymbol } from './utils'
@@ -37,7 +36,6 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
   const myAddress = useMyAddress()
   const { getApiByNetwork } = useLazyConnectionsContext()
   const pendingOrder = useSelectPendingOrderById(domainName)
-  const reloadProcessingOrders = useCreateReloadProcessingOrdersByAccount()
 
   const { sellerChain, domainRegistrationPriceFixed } = sellerConfig || {}
 
@@ -96,7 +94,6 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
 
   const onSuccess = async () => {
     setIsFetchNewDomains(true)
-    reloadProcessingOrders({ domains: [domainName], recipient })
     setProcessingDomains({ [domainName]: true })
 
     close()
@@ -117,7 +114,7 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
       })
     }
 
-    return await pendingOrderAction({
+    const preventTx = await pendingOrderAction({
       action: createPendingOrder,
       args: [
         {
@@ -132,6 +129,12 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
       account: purchaser,
       dispatch,
     })
+
+    if(preventTx) {
+      setProcessingDomains({ [domainName]: false })
+    }
+
+    return preventTx
   }
 
   const onCancel = async () => {
diff --git a/src/components/domains/dot-seller/RegisterDomainModal.tsx b/src/components/domains/dot-seller/RegisterDomainModal.tsx
index 7f4cd7b90..7d1a4727f 100644
--- a/src/components/domains/dot-seller/RegisterDomainModal.tsx
+++ b/src/components/domains/dot-seller/RegisterDomainModal.tsx
@@ -5,9 +5,7 @@ import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import { useSubstrate } from 'src/components/substrate'
-import { useSelectProcessingOrderById } from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
-import { useSelectPendingOrderById } from '../../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { BuyDomainSection } from '../EligibleDomainsSection'
@@ -19,20 +17,18 @@ import { useGetDecimalAndSymbol } from './utils'
 type ModalBodyProps = {
   domainName: string
   price?: string
+  variant: Variant
 }
 
-const ModalBody = ({ domainName, price }: ModalBodyProps) => {
+const ModalBody = ({ domainName, price, variant }: ModalBodyProps) => {
   const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
-  const { variant } = useManageDomainContext()
-  const pendingOrder = useSelectPendingOrderById(domainName)
   const nativeBalance = useCreateBalance(purchaser)
   const isMyAddress = useIsMyAddress(recipient)
 
-  const { destination } = pendingOrder || {}
   const { sellerChain } = sellerConfig || {}
 
-  const isSub = destination ? destination === 'SUB' : variant === 'SUB'
+  const isSub = variant === 'SUB'
 
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
@@ -116,11 +112,7 @@ type BuyDomainModalProps = {
   price?: string
 }
 
-const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps) => {
-  const { variant } = useManageDomainContext()
-  const pendingOrder = useSelectPendingOrderById(domainName)
-
-  const { destination } = pendingOrder || {}
+const BuyDomainModal = ({ domainName, open, close, price, variant }: BuyDomainModalProps) => {
 
   const title = (
     <div className={styles.ModalTitle}>
@@ -128,7 +120,7 @@ const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps)
     </div>
   )
 
-  const isByDot = destination ? destination === 'DOT' : variant === 'DOT'
+  const isByDot = variant === 'DOT'
 
   const modalFooter = (
     <div className={styles.FooterButtons}>
@@ -150,7 +142,7 @@ const BuyDomainModal = ({ domainName, open, close, price }: BuyDomainModalProps)
       destroyOnClose
       className={clsx('DfSignInModal', styles.DomainModal)}
     >
-      <ModalBody domainName={domainName} price={price} />
+      <ModalBody domainName={domainName} price={price} variant={variant} />
     </Modal>
   )
 }
@@ -159,7 +151,7 @@ type BuyByDotButtonProps = {
   domainName: string
   label?: string
   withPrice?: boolean
-  variant?: Variant
+  variant: Variant
 }
 
 const RegisterDomainButton = ({
@@ -171,22 +163,18 @@ const RegisterDomainButton = ({
   const sellerConfig = useSelectSellerConfig()
   const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
   const { api } = useSubstrate()
-  const processingOrder = useSelectProcessingOrderById(domainName)
   const { processingDomains } = useManageDomainContext()
-  const pendingOrder = useSelectPendingOrderById(domainName)
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
   const close = () => setOpen(false)
 
-  const { destination } = pendingOrder || {}
-
-  const isSub = destination ? destination === 'SUB' : variant === 'SUB'
+  const isSub = variant === 'SUB'
 
   const price = useMemo(() => {
     return isSub ? api?.consts.domains.baseDomainDeposit.toString() : domainRegistrationPriceFixed
-  }, [isSub])
+  }, [variant])
 
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
@@ -198,7 +186,7 @@ const RegisterDomainButton = ({
       <Button
         type={'primary'}
         block
-        disabled={isProcessingDomain || !!processingOrder}
+        disabled={isProcessingDomain}
         onClick={() => setOpen(true)}
       >
         {label}
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index b2f43cce6..cec0faf65 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -90,7 +90,7 @@ export const CREATE_PENDING_ORDER = gql`
     $destination: String!
     $domain: String!
     $signer: String!
-    $target: String!
+    $target: String
     $createdByAccount: String!
   ) {
     createPendingOrder(
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 8e321c578..02fff6e55 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -11,10 +11,6 @@ import {
   useSelectPendingOrders,
 } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
-import {
-  useFetchProcessingOrdersByIds,
-  useSelectProcessingOrderById,
-} from 'src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
 import RegisterDomainButton from '../dot-seller/RegisterDomainModal'
@@ -29,7 +25,6 @@ type PendingDomainProps = {
 
 const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
-  const processingOrder = useSelectProcessingOrderById(pendingDomain.id)
   const reloadPendingOrders = useCreateReloadPendingOrders()
   const myAddress = useMyAddress()
 
@@ -51,7 +46,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const isDomainProcessing = processingDomains[pendingDomain.id]
 
   const registerButton =
-    processingOrder || isDomainProcessing ? (
+    isDomainProcessing ? (
       <Tag color='gold' className={clsx(styles.PendingTag)}>
         Processing
       </Tag>
@@ -86,10 +81,6 @@ const PendingOrdersSection = () => {
   const myAddress = useMyAddress()
   const [time, setTime] = useState<number>(dayjs().valueOf())
 
-  const pendingDomainsNames = pendingOrders?.map(order => order.id)
-
-  useFetchProcessingOrdersByIds(pendingDomainsNames, myAddress)
-
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
   useEffect(() => {
diff --git a/src/rtk/app/rootReducer.ts b/src/rtk/app/rootReducer.ts
index e77fd07f1..f516b6376 100644
--- a/src/rtk/app/rootReducer.ts
+++ b/src/rtk/app/rootReducer.ts
@@ -21,7 +21,6 @@ import spaceIdsWithRolesByAccount from '../features/spaceIds/spaceIdsWithRolesBy
 import spaces from '../features/spaces/spacesSlice'
 import ordersById from '../features/domainPendingOrders/pendingOrdersSlice'
 import sellerConfig from '../features/sellerConfig/sellerConfigSlice'
-import registrationOrders from '../features/processingRegistrationOrders/processingRegistratoinOrdersSlice'
 
 const rootReducer = combineReducers({
   contents,
@@ -46,7 +45,6 @@ const rootReducer = combineReducers({
   onBoarding,
   ordersById,
   sellerConfig,
-  registrationOrders
 })
 
 export type RootState = ReturnType<typeof rootReducer>
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index 82904cf80..cc104b1df 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -14,25 +14,18 @@ import {
   selectPendingOrdersByIds,
 } from './pendingOrdersSlice'
 
+// TODO: check this case
 export const useFetchDomainPendingOrdersByIds = (domains: string[]) => {
   const ids = domains as EntityId[]
 
   useFetch(fetchPendingOrdersByIds, { ids })
 }
 
-export const useFetchDomainPendingOrdersByCreatedByAccount = () => {
+export const useFetchDomainPendingOrdersByAccount = (address?: string) => {
   const myAddress = useMyAddress()
 
-  useFetch(fetchPendingOrdersByAccount, { id: myAddress || '' })
-}
-
-export const useFetchDomainPendingOrdersBySigner = (address?: string) => (
-  useFetch(fetchPendingOrdersBySigner, { id: address || '' })
-)
-
-export const useFetchDomainPendingOrdersByAccount = (address?: string) => {
-  useFetchDomainPendingOrdersByCreatedByAccount()
-  useFetchDomainPendingOrdersBySigner(address)
+  useFetch(fetchPendingOrdersByAccount, { id: myAddress })
+  useFetch(fetchPendingOrdersBySigner, { id: address })
 }
 
 export const useSelectPendingOrderById = (id: string) => {
@@ -43,21 +36,11 @@ export const useSelectPendingOrdersByIds = (ids: string[]) => {
   return useAppSelector(state => selectPendingOrdersByIds(state, ids))
 }
 
-export const useSelectPendingOrdersByAccount = () => {
-  const myAddress = useMyAddress()
-
-  return useAppSelector(state => selectPendingOrdersByAccount(state, 'createdByAccount', myAddress))
-}
-
-export const useSelectPendingOrdersBySigner = (address?: string) => {
-  return useAppSelector(state => selectPendingOrdersByAccount(state, 'signer', address))
-}
-
 export const useSelectPendingOrders = () => {
   const myAddress = useMyAddress()
   
-  const ordersByAccount = useSelectPendingOrdersByAccount()
-  const ordersBySigner = useSelectPendingOrdersBySigner(myAddress)
+  const ordersByAccount = useAppSelector(state => selectPendingOrdersByAccount(state, 'createdByAccount', myAddress))
+  const ordersBySigner = useAppSelector(state => selectPendingOrdersByAccount(state, 'signer', myAddress))
 
   const ordersSet = new Set([...ordersByAccount, ...ordersBySigner])
 
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index beb935d7a..96c78ac9d 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -1,6 +1,4 @@
-import { decodeAddress } from '@polkadot/keyring'
 import { GenericAccountId } from '@polkadot/types'
-import { u8aToHex } from '@polkadot/util'
 import { encodeAddress } from '@polkadot/util-crypto'
 import {
   createAsyncThunk,
@@ -10,15 +8,18 @@ import {
   PayloadAction,
 } from '@reduxjs/toolkit'
 import registry from '@subsocial/api/utils/registry'
-import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
+import { isDef, toSubsocialAddress } from '@subsocial/utils'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
-import {
-  PENDING_ORDERS_BY_ACCOUNT,
-  PENDING_ORDERS_BY_IDS,
-  PENDING_ORDERS_BY_SIGNER,
-} from 'src/components/domains/dot-seller/seller-queries'
+import { PENDING_ORDERS_BY_ACCOUNT, PENDING_ORDERS_BY_IDS, PENDING_ORDERS_BY_SIGNER } from 'src/components/domains/dot-seller/seller-queries'
 import { ThunkApiConfig } from 'src/rtk/app/helpers'
 import { RootState } from 'src/rtk/app/rootReducer'
+import {
+  FetchOneWithoutApi,
+  fetchPendingOrderByAccount,
+  FetchResult,
+  OrdersCommonFetchProps,
+  upsertAndRemoveEntities,
+} from './utils'
 
 export type RemovePendingOrderProps = {
   domainName: string
@@ -36,26 +37,11 @@ export type PendingDomainEntity = {
 
 const sliceName = 'domainPndingOrders'
 
-type MaybeEntity = PendingDomainEntity | undefined
-
-type FetchResult = {
-  idsToRemove: string[]
-  orders: MaybeEntity[]
-}
+export const ordersAdapter = createEntityAdapter<PendingDomainEntity>()
 
-const adapter = createEntityAdapter<PendingDomainEntity>()
-
-const selectors = adapter.getSelectors<RootState>(state => state.ordersById)
-
-type CommonFetchProps = {
-  reload?: boolean
-}
-
-type FetchOneWithoutApi = CommonFetchProps & {
-  id: EntityId
-}
+const selectors = ordersAdapter.getSelectors<RootState>(state => state.ordersById)
 
-type FetchManyWithoutApi = CommonFetchProps & {
+type FetchManyWithoutApi = OrdersCommonFetchProps & {
   ids: EntityId[]
 }
 
@@ -111,7 +97,7 @@ export const fetchPendingOrdersByIds = createAsyncThunk<
   if (!reload && knownDomainsPendingOrders) {
     return {
       idsToRemove: [],
-      orders: []
+      orders: [],
     }
   }
 
@@ -129,14 +115,14 @@ export const fetchPendingOrdersByIds = createAsyncThunk<
     }
   })
 
-  const parsedOrdersIds = parsedOrders.map((order) => order.id)
-  const knownOrdersIds = knownDomainsPendingOrders.map((order) => order.id)
+  const parsedOrdersIds = parsedOrders.map(order => order.id)
+  const knownOrdersIds = knownDomainsPendingOrders.map(order => order.id)
 
   const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
 
   return {
     idsToRemove,
-    orders: parsedOrders
+    orders: parsedOrders,
   }
 })
 
@@ -146,46 +132,14 @@ export const fetchPendingOrdersBySigner = createAsyncThunk<
   ThunkApiConfig
 >(
   `${sliceName}/fetchManyBySigner`,
-  async ({ id: account, reload }, { getState }): Promise<FetchResult> => {
-    const knownDomainsPendingOrders = selectPendingOrdersByAccount(
-      getState(),
-      'signer',
-      account.toString(),
-    )
-
-    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
-      return {
-        idsToRemove: [],
-        orders: []
-      }
-    }
-
-    const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_SIGNER, {
-      signer: account,
-    })
-
-    const orders = result.getPendingOrdersBySigner.orders as PendingDomainEntity[]
-
-    const parsedOrders = orders.map(order => {
-      const { signer, createdByAccount } = order
-
-      return {
-        ...order,
-        signer: toSubsocialAddress(signer) || '',
-        createdByAccount: toSubsocialAddress(createdByAccount) || '',
-      }
-    })
-
-    const parsedOrdersIds = parsedOrders.map((order) => order.id)
-    const knownOrdersIds = knownDomainsPendingOrders.map((order) => order.id)
-
-    const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
-
-    return {
-      idsToRemove,
-      orders: parsedOrders
-    }
-  },
+  async (fetchOneProps, { getState }): Promise<FetchResult> =>
+    fetchPendingOrderByAccount({
+      ...fetchOneProps,
+      state: getState(),
+      query: PENDING_ORDERS_BY_SIGNER,
+      resultField: 'getPendingOrdersBySigner',
+      selectField: 'signer',
+    }),
 )
 
 export const fetchPendingOrdersByAccount = createAsyncThunk<
@@ -194,95 +148,37 @@ export const fetchPendingOrdersByAccount = createAsyncThunk<
   ThunkApiConfig
 >(
   `${sliceName}/fetchManyByAccount`,
-  async ({ id: account, reload }, { getState }): Promise<FetchResult> => {
-    const knownDomainsPendingOrders = selectPendingOrdersByAccount(
-      getState(),
-      'createdByAccount',
-      account.toString(),
-    )
-
-    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
-      return {
-        idsToRemove: [],
-        orders: []
-      }
-    }
-
-    const decodedAddress = u8aToHex(decodeAddress(account.toString()))
-
-    const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_ACCOUNT, {
-      createdByAccount: decodedAddress,
-    })
-
-    const orders = result.getPendingOrdersByCreatedByAccount.orders as PendingDomainEntity[]
-
-    const parsedOrders = orders.map(order => {
-      const { signer, createdByAccount } = order
-
-      return {
-        ...order,
-        signer: toSubsocialAddress(signer) || '',
-        createdByAccount: toSubsocialAddress(createdByAccount) || '',
-      }
-    })
-
-    const parsedOrdersIds = parsedOrders.map((order) => order.id)
-    const knownOrdersIds = knownDomainsPendingOrders.map((order) => order.id)
-
-    const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
-
-    return {
-      idsToRemove,
-      orders: parsedOrders
-    }
-  },
+  async (fetchOneProps, { getState }): Promise<FetchResult> =>
+    fetchPendingOrderByAccount({
+      ...fetchOneProps,
+      state: getState(),
+      query: PENDING_ORDERS_BY_ACCOUNT,
+      resultField: 'getPendingOrdersByCreatedByAccount',
+      selectField: 'createdByAccount',
+    }),
 )
 
 const slice = createSlice({
   name: sliceName,
-  initialState: adapter.getInitialState(),
+  initialState: ordersAdapter.getInitialState(),
   reducers: {
     removePendingOrder: (state, action: PayloadAction<RemovePendingOrderProps>) => {
       const { domainName } = action.payload
 
-      adapter.removeOne(state, domainName)
+      ordersAdapter.removeOne(state, domainName)
     },
   },
   extraReducers: builder => {
     builder
-      .addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) => {
-        const { idsToRemove, orders } = payload
-
-        if(!orders) return 
-
-        if(!isEmptyArray(idsToRemove)) {
-          adapter.removeMany(state, idsToRemove)
-        }
-
-        adapter.upsertMany(state, orders.filter(isDef))
-      })
-      .addCase(fetchPendingOrdersBySigner.fulfilled, (state, { payload }) => {
-        const { idsToRemove, orders } = payload
-
-        if(!orders) return 
-
-        if(!isEmptyArray(idsToRemove)) {
-          adapter.removeMany(state, idsToRemove)
-        }
-
-        adapter.upsertMany(state, orders.filter(isDef))
-      })
-      .addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) => {
-        const { idsToRemove, orders } = payload
-
-        if(!orders) return 
-
-        if(!isEmptyArray(idsToRemove)) {
-          adapter.removeMany(state, idsToRemove)
-        }
-
-        adapter.upsertMany(state, orders.filter(isDef))
-      })
+      .addCase(fetchPendingOrdersByIds.fulfilled, (state, { payload }) =>
+        upsertAndRemoveEntities({ payload, state }),
+      )
+      .addCase(fetchPendingOrdersBySigner.fulfilled, (state, { payload }) =>
+        upsertAndRemoveEntities({ payload, state }),
+      )
+      .addCase(fetchPendingOrdersByAccount.fulfilled, (state, { payload }) =>
+        upsertAndRemoveEntities({ payload, state }),
+      )
   },
 })
 
diff --git a/src/rtk/features/domainPendingOrders/utils.ts b/src/rtk/features/domainPendingOrders/utils.ts
new file mode 100644
index 000000000..19053b25e
--- /dev/null
+++ b/src/rtk/features/domainPendingOrders/utils.ts
@@ -0,0 +1,93 @@
+import { RootState } from 'src/rtk/app/rootReducer'
+import { PendingDomainEntity, ordersAdapter, selectPendingOrdersByAccount } from './pendingOrdersSlice'
+import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import { EntityId } from '@reduxjs/toolkit'
+import { DocumentNode } from 'graphql'
+
+export type MaybeEntity = PendingDomainEntity | undefined
+
+export type FetchResult = {
+  idsToRemove: string[]
+  orders: MaybeEntity[]
+}
+
+export type OrdersCommonFetchProps = {
+  reload?: boolean
+}
+
+export type FetchOneWithoutApi = OrdersCommonFetchProps & {
+  id?: EntityId
+}
+
+type FetchOrdersByAccountProps = FetchOneWithoutApi & {
+  state: RootState
+  query: DocumentNode
+  resultField: 'getPendingOrdersBySigner' | 'getPendingOrdersByCreatedByAccount'
+  selectField: 'signer' | 'createdByAccount'
+}
+
+export const fetchPendingOrderByAccount = async ({
+  id: account,
+  reload,
+  state,
+  query,
+  resultField,
+  selectField,
+}: FetchOrdersByAccountProps) => {
+  const knownDomainsPendingOrders = selectPendingOrdersByAccount(
+    state,
+    selectField,
+    account?.toString(),
+  )
+
+  if ((!reload && !isEmptyArray(knownDomainsPendingOrders)) || !account) {
+    return {
+      idsToRemove: [],
+      orders: [],
+    }
+  }
+
+  const result: any = await sellerSquidGraphQlClient.request(query, {
+    [`${selectField}`]: account,
+  })
+
+  const orders = result[resultField].orders as PendingDomainEntity[]
+
+  const parsedOrders = orders.map(order => {
+    const { signer, createdByAccount } = order
+
+    return {
+      ...order,
+      signer: toSubsocialAddress(signer) || '',
+      createdByAccount: toSubsocialAddress(createdByAccount) || '',
+    }
+  })
+
+  const parsedOrdersIds = parsedOrders.map(order => order.id)
+  const knownOrdersIds = knownDomainsPendingOrders.map(order => order.id)
+
+  const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
+
+  return {
+    idsToRemove,
+    orders: parsedOrders,
+  }
+}
+
+type UpsertAndRemoveEntitiesProps = {
+  payload: FetchResult
+  state: any
+}
+
+export const upsertAndRemoveEntities = ({ payload, state }: UpsertAndRemoveEntitiesProps) => {
+  const { idsToRemove, orders } = payload
+
+  if (!orders) return
+
+  if (!isEmptyArray(idsToRemove)) {
+    ordersAdapter.removeMany(state, idsToRemove)
+  }
+
+  ordersAdapter.upsertMany(state, orders.filter(isDef))
+}
\ No newline at end of file
diff --git a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts
deleted file mode 100644
index 27e4fb65b..000000000
--- a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersHooks.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useMyAddress } from 'src/components/auth/MyAccountsContext'
-import { useActions } from 'src/rtk/app/helpers'
-import { useAppDispatch, useAppSelector } from 'src/rtk/app/store'
-import { fetchProcessingOrdersByAccount, selectProcessingOrdersByAccount, selectProcessingOrdersById } from './processingRegistratoinOrdersSlice'
-import { useEffect } from 'react'
-
-
-export const useFetchProcessingOrdersByIds = (domains?: string[], recipient?: string) => {
-  const dispatch = useAppDispatch()
-
-  useEffect(() => {
-    if(!domains || !recipient) return
-
-    dispatch(fetchProcessingOrdersByAccount({ domains, recipient }))
-  }, [ !!domains, recipient ])
-}
-
-export const useSelectProcessingOrderById = (id: string) => {
-  return useAppSelector(state => selectProcessingOrdersById(state, id))
-}
-
-export const useSelectProcessingOrdersByAccount = () => {
-  const myAddress = useMyAddress()
-  return useAppSelector(state => selectProcessingOrdersByAccount(state, myAddress))
-}
-
-type ReloadProcessingOrders = {
-  domains: string[]
-  recipient: string
-}
-
-export const useCreateReloadProcessingOrdersByAccount = () => {
-  return useActions<ReloadProcessingOrders | undefined>(({ dispatch, args }) => {
-    args && dispatch(fetchProcessingOrdersByAccount({ ...args, reload: true }))
-  })
-}
\ No newline at end of file
diff --git a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts b/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
deleted file mode 100644
index 68dcd8764..000000000
--- a/src/rtk/features/processingRegistrationOrders/processingRegistratoinOrdersSlice.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
-import { isDef, isEmptyArray } from '@subsocial/utils'
-import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
-import { PROCESSING_REGISTRATION_ORDERS } from 'src/components/domains/dot-seller/seller-queries'
-import { ThunkApiConfig } from 'src/rtk/app/helpers'
-import { RootState } from 'src/rtk/app/rootReducer'
-
-export type ProcessingOrdersEntity = {
-  id: string
-  status: string
-  refundStatus: string
-  target: {
-    id: string
-  }
-}
-
-const sliceName = 'registrationOrders'
-
-type MaybeEntity = ProcessingOrdersEntity | undefined
-
-const adapter = createEntityAdapter<ProcessingOrdersEntity>()
-
-const selectors = adapter.getSelectors<RootState>(state => state.registrationOrders)
-
-type CommonFetchProps = {
-  reload?: boolean
-}
-
-type FetchOneWithoutApi = CommonFetchProps & {
-  domains: string[]
-  recipient: string
-}
-
-const selectEntitiesByIds = (state: RootState, ids: string[]) => {
-  return ids.map(id => selectors.selectById(state, id)).filter(isDef)
-}
-
-export const selectProcessingOrdersById = (state: RootState, id: string) => {
-  const keys = selectors.selectIds(state)
-
-  const entityId = keys.find(key => key.toString().includes(id))
-
-  if (!entityId) return undefined
-
-  return selectors.selectById(state, entityId)
-}
-
-export const selectProcessingOrdersByIds = (state: RootState, ids: string[]) => {
-  const keys = selectors.selectIds(state)
-
-  const entityIds = keys.filter(key => ids.find(x => key.toString().includes(x)))
-
-  return selectEntitiesByIds(state, entityIds as string[])
-}
-
-export const selectProcessingOrdersByAccount = (state: RootState, address?: string) => {
-  if (!address) return []
-  const keys = selectors.selectIds(state)
-
-  const entityIds = keys.filter(key => key.toString().includes(address))
-
-  return selectEntitiesByIds(state, entityIds as string[])
-}
-
-export const fetchProcessingOrdersByAccount = createAsyncThunk<
-  MaybeEntity[],
-  FetchOneWithoutApi,
-  ThunkApiConfig
->(
-  `${sliceName}/fetchMany`,
-  async ({ domains, recipient, reload }, { getState }): Promise<MaybeEntity[]> => {
-    const knownDomainsPendingOrders = selectProcessingOrdersByAccount(getState(), recipient)
-
-    if (!reload && !isEmptyArray(knownDomainsPendingOrders)) {
-      return []
-    }
-
-    const result: any = await sellerSquidGraphQlClient.request(PROCESSING_REGISTRATION_ORDERS, {
-      domains,
-      recipient,
-    })
-
-    const orders = result.domainRegistrationOrders as
-      | ProcessingOrdersEntity[]
-      | undefined
-
-    return (
-      orders
-        ?.map(item => {
-          return {
-            ...item,
-          }
-        })
-        .filter(isDef) || []
-    )
-  },
-)
-
-const slice = createSlice({
-  name: sliceName,
-  initialState: adapter.getInitialState(),
-  reducers: {
-    // upsertOwnDomains: adapter.upsertOne,
-  },
-  extraReducers: builder => {
-    builder.addCase(fetchProcessingOrdersByAccount.fulfilled, (state, { payload }) => {
-      if (payload) adapter.upsertMany(state, payload.filter(isDef))
-    })
-  },
-})
-
-export default slice.reducer

From 985d8583473dd5d45736f4a41b313d5b44706e98 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 3 May 2023 11:33:24 +0300
Subject: [PATCH 31/54] Refactor mutation requests

---
 src/components/domains/utils.tsx      | 70 ++++++++++++++++++++++
 src/pages/api/pending-order/create.ts | 83 ++++++---------------------
 src/pages/api/pending-order/delete.ts | 60 +++----------------
 src/pages/api/pending-order/update.ts | 59 ++++---------------
 4 files changed, 106 insertions(+), 166 deletions(-)

diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index b5a0bb553..8cf016a76 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -16,6 +16,20 @@ import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { useCreateRemovePendingOrders } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useCreateUpsertDomains } from 'src/rtk/features/domains/domainHooks'
+import dayjs from 'dayjs'
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
+import utc from 'dayjs/plugin/utc'
+import { NextApiResponse } from 'next'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import { DocumentNode } from 'graphql'
+
+dayjs.extend(utc)
 
 const { resolvedDomain } = config
 
@@ -153,3 +167,59 @@ export const useFetchNewDomains = (domainName?: string) => {
     [isFetchNewDomains, myAddress],
   )
 }
+
+type MutationRequest = {
+  sellerApiAuthTokenManager: string
+  args: any
+  res: NextApiResponse
+  sellerClientId: string
+  sellerClientTokenSigner: string
+  query: DocumentNode
+}
+
+export const SendMutationRequest = async ({ 
+  sellerApiAuthTokenManager, 
+  args, 
+  res, 
+  sellerClientId, 
+  sellerClientTokenSigner,
+  query
+}: MutationRequest) => {
+  try {
+    const nonce = new Uint8Array(24)
+    nonce[0] = 111
+    
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(sellerClientTokenSigner),
+    )
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': sellerClientId,
+    }
+
+    const result = await sellerSquidGraphQlClient.request(
+      query,
+      args,
+      requestHeaders
+    )
+
+    res.status(200).send({ success: true })
+    return result
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
+}
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 2668bf207..81155e220 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -1,78 +1,29 @@
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { GraphQLClient } from 'graphql-request'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { xSellerSquid } from 'src/components/domains/dot-seller/config'
 import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+import { SendMutationRequest } from 'src/components/domains/utils'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { 
-    sellerApiAuthTokenManager, 
-    createdByAccount, 
-    destination, 
-    domain, 
-    signer, 
-    target 
-  } = req.body
-
-  const nonce = new Uint8Array(24)
-  nonce[0] = 111
+  const { sellerApiAuthTokenManager, createdByAccount, destination, domain, signer, target } =
+    req.body
 
   if (req.method !== 'POST') return res.status(404).end()
 
-  try {
-    const tokenMessage = dayjs.utc().valueOf().toString()
-
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
-    )
-
-    const clientId = process.env.SELLER_CLIENT_ID as string
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': clientId,
-    }
-
-    const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid, {
-      headers: requestHeaders
-    })
-
-    const result = await sellerSquidGraphQlClient.request(
-      CREATE_PENDING_ORDER,
-      { 
-        createdByAccount, 
-        destination, 
-        domain, 
-        signer, 
-        target,
-      },
-    )
-
-    res.status(200).send({ success: true })
-    return result
-
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
+  return SendMutationRequest({
+    sellerApiAuthTokenManager,
+    args: {
+      createdByAccount,
+      destination,
+      domain,
+      signer,
+      target,
+    },
+    sellerClientId: process.env.SELLER_CLIENT_ID as string,
+    sellerClientTokenSigner: process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || '',
+    query: CREATE_PENDING_ORDER,
+    res,
+  })
 }
diff --git a/src/pages/api/pending-order/delete.ts b/src/pages/api/pending-order/delete.ts
index 16261a8a2..6cc6a65d2 100644
--- a/src/pages/api/pending-order/delete.ts
+++ b/src/pages/api/pending-order/delete.ts
@@ -1,64 +1,22 @@
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { GraphQLClient } from 'graphql-request'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { xSellerSquid } from 'src/components/domains/dot-seller/config'
 import { DELETE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+import { SendMutationRequest } from 'src/components/domains/utils'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { domain, sellerApiAuthTokenManager } = req.body
-  const nonce = new Uint8Array(24)
-  nonce[0] = 111
 
   if (req.method !== 'POST') return res.status(404).end()
 
-  try {
-    const tokenMessage = dayjs.utc().valueOf().toString()
-
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
-    )
-
-    const clientId = process.env.SELLER_CLIENT_ID as string
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': clientId,
-    }
-
-    const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid, {
-      headers: requestHeaders
-    })
-
-    const result = await sellerSquidGraphQlClient.request(
-      DELETE_PENDING_ORDER,
-      { id: domain },
-    )
-
-    res.status(200).send({ success: true })
-    return result
-
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
+  return SendMutationRequest({
+    sellerApiAuthTokenManager,
+    args:  { id: domain },
+    sellerClientId: process.env.SELLER_CLIENT_ID as string,
+    sellerClientTokenSigner: process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || '',
+    query: DELETE_PENDING_ORDER,
+    res,
+  })
 }
diff --git a/src/pages/api/pending-order/update.ts b/src/pages/api/pending-order/update.ts
index 318986489..8282e5d30 100644
--- a/src/pages/api/pending-order/update.ts
+++ b/src/pages/api/pending-order/update.ts
@@ -1,64 +1,25 @@
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { GraphQLClient } from 'graphql-request'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { xSellerSquid } from 'src/components/domains/dot-seller/config'
 import { UPDATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+import { SendMutationRequest } from 'src/components/domains/utils'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { sellerApiAuthTokenManager, domain, interrupted } = req.body
 
-  const nonce = new Uint8Array(24)
-  nonce[0] = 111
-
   if (req.method !== 'POST') return res.status(404).end()
 
-  try {
-    const tokenMessage = dayjs.utc().valueOf().toString()
-
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
-    )
-
-    const clientId = process.env.SELLER_CLIENT_ID as string
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': clientId,
-    }
-
-    const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid, {
-      headers: requestHeaders,
-    })
-
-    const result = await sellerSquidGraphQlClient.request(UPDATE_PENDING_ORDER, {
+  return SendMutationRequest({
+    sellerApiAuthTokenManager,
+    args:   {
       id: domain,
       interrupted,
-    })
-
-    res.status(200).send({ success: true })
-    return result
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
+    },
+    sellerClientId: process.env.SELLER_CLIENT_ID as string,
+    sellerClientTokenSigner: process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || '',
+    query: UPDATE_PENDING_ORDER,
+    res,
+  })
 }

From 9acecbaaf02f8ddbc3053b9732889e09f1ecfe8d Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 3 May 2023 12:29:36 +0300
Subject: [PATCH 32/54] Refactor file structure

---
 ...ByDotTxButton.tsx => BuyDomainButtons.tsx} | 143 +++++++++++++++++-
 .../domains/EligibleDomainsSection.tsx        | 143 +-----------------
 src/components/domains/dot-seller/utils.tsx   |  15 +-
 .../domains/pendingOrders/index.tsx           |   2 +-
 .../Index.module.sass                         |   0
 .../RegisterDomainModal.tsx                   |   5 +-
 src/components/domains/utils.tsx              |  66 --------
 src/pages/api/pending-order/create.ts         |  79 +++++++---
 src/pages/api/pending-order/delete.ts         |  59 ++++++--
 src/pages/api/pending-order/update.ts         |  62 ++++++--
 10 files changed, 316 insertions(+), 258 deletions(-)
 rename src/components/domains/{dot-seller/BuyByDotTxButton.tsx => BuyDomainButtons.tsx} (53%)
 rename src/components/domains/{dot-seller => registerDomainModal}/Index.module.sass (100%)
 rename src/components/domains/{dot-seller => registerDomainModal}/RegisterDomainModal.tsx (97%)

diff --git a/src/components/domains/dot-seller/BuyByDotTxButton.tsx b/src/components/domains/BuyDomainButtons.tsx
similarity index 53%
rename from src/components/domains/dot-seller/BuyByDotTxButton.tsx
rename to src/components/domains/BuyDomainButtons.tsx
index 7f46faa0d..da4737dcc 100644
--- a/src/components/domains/dot-seller/BuyByDotTxButton.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -4,6 +4,7 @@ import {
   SocialRemarkDestChainsNameId,
   SocialRemarkMessageVersion,
   SubSclSource,
+  newLogger,
 } from '@subsocial/utils'
 import BN from 'bignumber.js'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
@@ -12,11 +13,19 @@ import LazyTxButton from 'src/components/donate/LazyTxButton'
 import { useLazyConnectionsContext } from 'src/components/lazy-connection/LazyConnectionContext'
 import { createPendingOrder, deletePendingOrder, updatePendingOrder } from 'src/components/utils/OffchainUtils'
 import { useAppDispatch } from 'src/rtk/app/store'
-import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useCreateReloadPendingOrders, useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
-import { useManageDomainContext } from '../manage/ManageDomainProvider'
-import { pendingOrderAction, useGetDecimalAndSymbol } from './utils'
 import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
+import { pendingOrderAction, useGetDecimalAndSymbol } from './dot-seller/utils'
+import { useManageDomainContext } from './manage/ManageDomainProvider'
+import TxButton from 'src/components/utils/TxButton'
+import { useCreateReloadMyDomains } from 'src/rtk/features/domains/domainHooks'
+import { useSubstrate } from '../substrate'
+import { TxCallback } from '../substrate/SubstrateTxButton'
+import { showErrorMessage } from '../utils/Message'
+import styles from './index.module.sass'
+
+const log = newLogger('DD')
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -28,7 +37,7 @@ function getKeyName(value: string) {
   return Object.entries(SocialRemarkDestChainsNameId).find(([key]) => key === value)?.[1]
 }
 
-const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
+export const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
   const { recipient, purchaser, setIsFetchNewDomains, setProcessingDomains } =
     useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
@@ -171,4 +180,128 @@ const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProp
   )
 }
 
-export default BuyByDotTxButton
+const BLOCK_TIME = 12
+const SECS_IN_DAY = 60 * 60 * 24
+const BLOCKS_IN_YEAR = new BN((SECS_IN_DAY * 365) / BLOCK_TIME)
+
+type BuyDomainSectionProps = {
+  domainName: string
+  label?: string
+}
+
+export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSectionProps) => {
+  const reloadMyDomains = useCreateReloadMyDomains()
+  const { openManageModal, setProcessingDomains } = useManageDomainContext()
+  const { api, isApiReady } = useSubstrate()
+  const reloadPendingOrders = useCreateReloadPendingOrders()
+  const { purchaser } = useManageDomainContext()
+  const sellerConfig = useSelectSellerConfig()
+  const myAddress = useMyAddress()
+  const pendingOrder = useSelectPendingOrderById(domainName)
+  const dispatch = useAppDispatch()
+
+  if (!isApiReady) return null
+
+  const getTxParams = () => {
+    return [domainName, null, BLOCKS_IN_YEAR.toString()]
+  }
+
+  const onSuccess: TxCallback = async () => {
+    if (!sellerConfig) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    reloadMyDomains()
+
+    setProcessingDomains({ [domainName]: false })
+
+    await pendingOrderAction({
+      action: deletePendingOrder,
+      args: [domainName, sellerApiAuthTokenManager],
+      account: purchaser,
+      dispatch,
+      reload: false
+    })
+
+    reloadPendingOrders(purchaser)
+    openManageModal('success', domainName)
+  }
+
+  const onFailed = async (errorInfo: any) => {
+    const jsonErr = JSON.stringify(errorInfo)
+    log.error('Failed:', jsonErr)
+    
+    showErrorMessage(jsonErr)
+    setProcessingDomains({ [domainName]: false })
+  }
+
+  const onClick = async () => {
+    if (!sellerConfig || !myAddress) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    setProcessingDomains({ [domainName]: true })
+
+    if (pendingOrder) {
+      await pendingOrderAction({
+        action: deletePendingOrder,
+        args: [domainName, sellerApiAuthTokenManager],
+        account: purchaser,
+        dispatch,
+      })
+    }
+
+    const preventTx = await pendingOrderAction({
+      action: createPendingOrder,
+      args: [
+        {
+          sellerApiAuthTokenManager,
+          createdByAccount: myAddress,
+          destination: 'SUB',
+          domain: domainName,
+          signer: purchaser,
+          target: '',
+        },
+      ],
+      account: purchaser,
+      dispatch,
+    })
+
+    if(preventTx) {
+      setProcessingDomains({ [domainName]: false })
+    }
+
+    return preventTx
+  }
+
+  const onCancel = async () => {
+    if (!sellerConfig || !myAddress) return
+
+    const { sellerApiAuthTokenManager } = sellerConfig
+
+    await updatePendingOrder(domainName, true, sellerApiAuthTokenManager)
+
+    dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
+  }
+
+  return (
+    <span className='d-flex align-items-center w-100'>
+      <TxButton
+        type='primary'
+        customNodeApi={api}
+        accountId={purchaser}
+        block
+        size='middle'
+        label={label}
+        tx={'domains.registerDomain'}
+        onSuccess={onSuccess}
+        onFailed={onFailed}
+        onCancel={onCancel}
+        isFreeTx
+        onClick={() => onClick()}
+        params={getTxParams}
+        className={styles.DomainPrimaryButton}
+      />
+    </span>
+  )
+}
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 1630e8832..9ed1c7590 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,40 +1,27 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { isFunction } from '@polkadot/util'
-import { isEmptyArray, newLogger, parseDomain } from '@subsocial/utils'
+import { isEmptyArray, parseDomain } from '@subsocial/utils'
 import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
-import BN from 'bn.js'
 import React, { useEffect } from 'react'
-import { showErrorMessage } from 'src/components/utils/Message'
 import config from 'src/config'
-import { useAppDispatch } from 'src/rtk/app/store'
-import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import {
-  useCreateReloadPendingOrders,
   useSelectPendingOrderById,
 } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
 import {
   useBuildDomainsWithTldByDomain,
-  useCreateReloadMyDomains,
   useFetchDomain,
   useIsReservedWord,
   useIsSupportedTld,
 } from '../../rtk/features/domains/domainHooks'
 import { useIsMyAddress, useMyAccountsContext, useMyAddress } from '../auth/MyAccountsContext'
-import { TxCallback } from '../substrate/SubstrateTxButton'
-import useSubstrate from '../substrate/useSubstrate'
 import { Loading, LocalIcon } from '../utils'
 import { MutedDiv, MutedSpan } from '../utils/MutedText'
-import { createPendingOrder, deletePendingOrder, updatePendingOrder } from '../utils/OffchainUtils'
-import TxButton from '../utils/TxButton'
-import RegisterDomainButton from './dot-seller/RegisterDomainModal'
-import { pendingOrderAction } from './dot-seller/utils'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { DomainDetails, getTime, ResultContainer } from './utils'
-
-const log = newLogger('DD')
+import RegisterDomainButton from './registerDomainModal/RegisterDomainModal'
 
 type DomainItemProps = {
   domain: string
@@ -46,132 +33,6 @@ type DomainProps = {
   label?: string
 }
 
-const BLOCK_TIME = 12
-const SECS_IN_DAY = 60 * 60 * 24
-const BLOCKS_IN_YEAR = new BN((SECS_IN_DAY * 365) / BLOCK_TIME)
-
-type BuyDomainSectionProps = {
-  domainName: string
-  label?: string
-}
-
-export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSectionProps) => {
-  const reloadMyDomains = useCreateReloadMyDomains()
-  const { openManageModal, setProcessingDomains } = useManageDomainContext()
-  const { api, isApiReady } = useSubstrate()
-  const reloadPendingOrders = useCreateReloadPendingOrders()
-  const { purchaser } = useManageDomainContext()
-  const sellerConfig = useSelectSellerConfig()
-  const myAddress = useMyAddress()
-  const pendingOrder = useSelectPendingOrderById(domainName)
-  const dispatch = useAppDispatch()
-
-  if (!isApiReady) return null
-
-  const getTxParams = () => {
-    return [domainName, null, BLOCKS_IN_YEAR]
-  }
-
-  const onSuccess: TxCallback = async () => {
-    if (!sellerConfig) return
-
-    const { sellerApiAuthTokenManager } = sellerConfig
-
-    reloadMyDomains()
-
-    setProcessingDomains({ [domainName]: false })
-
-    await pendingOrderAction({
-      action: deletePendingOrder,
-      args: [domainName, sellerApiAuthTokenManager],
-      account: purchaser,
-      dispatch,
-      reload: false
-    })
-
-    reloadPendingOrders(purchaser)
-    openManageModal('success', domainName)
-  }
-
-  const onFailed = async (errorInfo: any) => {
-    const jsonErr = JSON.stringify(errorInfo)
-    log.error('Failed:', jsonErr)
-    
-    showErrorMessage(jsonErr)
-    setProcessingDomains({ [domainName]: false })
-  }
-
-  const onClick = async () => {
-    if (!sellerConfig || !myAddress) return
-
-    const { sellerApiAuthTokenManager } = sellerConfig
-
-    setProcessingDomains({ [domainName]: true })
-
-    if (pendingOrder) {
-      await pendingOrderAction({
-        action: deletePendingOrder,
-        args: [domainName, sellerApiAuthTokenManager],
-        account: purchaser,
-        dispatch,
-      })
-    }
-
-    const preventTx = await pendingOrderAction({
-      action: createPendingOrder,
-      args: [
-        {
-          sellerApiAuthTokenManager,
-          createdByAccount: myAddress,
-          destination: 'SUB',
-          domain: domainName,
-          signer: purchaser,
-          target: '',
-        },
-      ],
-      account: purchaser,
-      dispatch,
-    })
-
-    if(preventTx) {
-      setProcessingDomains({ [domainName]: false })
-    }
-
-    return preventTx
-  }
-
-  const onCancel = async () => {
-    if (!sellerConfig || !myAddress) return
-
-    const { sellerApiAuthTokenManager } = sellerConfig
-
-    await updatePendingOrder(domainName, true, sellerApiAuthTokenManager)
-
-    dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
-  }
-
-  return (
-    <span className='d-flex align-items-center w-100'>
-      <TxButton
-        type='primary'
-        customNodeApi={api}
-        accountId={purchaser}
-        block
-        size='middle'
-        label={label}
-        tx={'domains.registerDomain'}
-        onSuccess={onSuccess}
-        onFailed={onFailed}
-        onCancel={onCancel}
-        isFreeTx
-        onClick={() => onClick()}
-        params={getTxParams}
-        className={styles.DomainPrimaryButton}
-      />
-    </span>
-  )
-}
-
 // const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
 //   const [openConfirmation, setOpenConfirmation] = useState(false)
 //   const { promoCode } = useManageDomainContext()
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
index ef4c12a13..c2d43744b 100644
--- a/src/components/domains/dot-seller/utils.tsx
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -1,7 +1,10 @@
+import { showErrorMessage } from 'src/components/utils/Message'
 import { AppDispatch } from 'src/rtk/app/store'
+import {
+  fetchPendingOrdersByAccount,
+  fetchPendingOrdersBySigner,
+} from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useChainInfo } from '../../../rtk/features/chainsInfo/chainsInfoHooks'
-import { fetchPendingOrdersByAccount, fetchPendingOrdersBySigner } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
-import { showErrorMessage } from 'src/components/utils/Message'
 
 export const useGetDecimalAndSymbol = (network?: string) => {
   const chainsInfo = useChainInfo()
@@ -24,7 +27,13 @@ type PendingActionProps<T> = {
   reload?: boolean
 }
 
-export const pendingOrderAction = async <T extends any>({ action, args, dispatch, account, reload = true }: PendingActionProps<T>) => {
+export const pendingOrderAction = async <T extends any>({
+  action,
+  args,
+  dispatch,
+  account,
+  reload = true,
+}: PendingActionProps<T>) => {
   const result = await action(...args)
 
   if (result?.success && reload) {
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 02fff6e55..41b496b08 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -13,10 +13,10 @@ import {
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
-import RegisterDomainButton from '../dot-seller/RegisterDomainModal'
 import { useManageDomainContext, Variant } from '../manage/ManageDomainProvider'
 import { getTime } from '../utils'
 import styles from './Index.module.sass'
+import RegisterDomainButton from '../registerDomainModal/RegisterDomainModal'
 
 type PendingDomainProps = {
   pendingDomain: PendingDomainEntity
diff --git a/src/components/domains/dot-seller/Index.module.sass b/src/components/domains/registerDomainModal/Index.module.sass
similarity index 100%
rename from src/components/domains/dot-seller/Index.module.sass
rename to src/components/domains/registerDomainModal/Index.module.sass
diff --git a/src/components/domains/dot-seller/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
similarity index 97%
rename from src/components/domains/dot-seller/RegisterDomainModal.tsx
rename to src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 7d1a4727f..05c4d1d88 100644
--- a/src/components/domains/dot-seller/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -8,11 +8,10 @@ import { useSubstrate } from 'src/components/substrate'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
-import { BuyDomainSection } from '../EligibleDomainsSection'
 import { useManageDomainContext, Variant } from '../manage/ManageDomainProvider'
-import BuyByDotTxButton from './BuyByDotTxButton'
 import styles from './Index.module.sass'
-import { useGetDecimalAndSymbol } from './utils'
+import { useGetDecimalAndSymbol } from '../dot-seller/utils'
+import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
 
 type ModalBodyProps = {
   domainName: string
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 8cf016a76..815095d4e 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -17,17 +17,7 @@ import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { useCreateRemovePendingOrders } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useCreateUpsertDomains } from 'src/rtk/features/domains/domainHooks'
 import dayjs from 'dayjs'
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import utc from 'dayjs/plugin/utc'
-import { NextApiResponse } from 'next'
-import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
-import { DocumentNode } from 'graphql'
 
 dayjs.extend(utc)
 
@@ -167,59 +157,3 @@ export const useFetchNewDomains = (domainName?: string) => {
     [isFetchNewDomains, myAddress],
   )
 }
-
-type MutationRequest = {
-  sellerApiAuthTokenManager: string
-  args: any
-  res: NextApiResponse
-  sellerClientId: string
-  sellerClientTokenSigner: string
-  query: DocumentNode
-}
-
-export const SendMutationRequest = async ({ 
-  sellerApiAuthTokenManager, 
-  args, 
-  res, 
-  sellerClientId, 
-  sellerClientTokenSigner,
-  query
-}: MutationRequest) => {
-  try {
-    const nonce = new Uint8Array(24)
-    nonce[0] = 111
-    
-    const tokenMessage = dayjs.utc().valueOf().toString()
-
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(sellerClientTokenSigner),
-    )
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': sellerClientId,
-    }
-
-    const result = await sellerSquidGraphQlClient.request(
-      query,
-      args,
-      requestHeaders
-    )
-
-    res.status(200).send({ success: true })
-    return result
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
-}
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 81155e220..c6f050ab3 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -1,29 +1,74 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { NextApiRequest, NextApiResponse } from 'next'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
-import { SendMutationRequest } from 'src/components/domains/utils'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { sellerApiAuthTokenManager, createdByAccount, destination, domain, signer, target } =
-    req.body
+  const { 
+    sellerApiAuthTokenManager, 
+    createdByAccount, 
+    destination, 
+    domain, 
+    signer, 
+    target 
+  } = req.body
 
   if (req.method !== 'POST') return res.status(404).end()
+  
+  try {
+    const nonce = new Uint8Array(24)
+    nonce[0] = 111
 
-  return SendMutationRequest({
-    sellerApiAuthTokenManager,
-    args: {
-      createdByAccount,
-      destination,
-      domain,
-      signer,
-      target,
-    },
-    sellerClientId: process.env.SELLER_CLIENT_ID as string,
-    sellerClientTokenSigner: process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || '',
-    query: CREATE_PENDING_ORDER,
-    res,
-  })
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.SELLER_CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': clientId,
+    }
+
+    const result = await sellerSquidGraphQlClient.request(
+      CREATE_PENDING_ORDER,
+      { 
+        createdByAccount, 
+        destination, 
+        domain, 
+        signer, 
+        target,
+      },
+      requestHeaders
+    )
+
+    res.status(200).send({ success: true })
+    return result
+
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
 }
diff --git a/src/pages/api/pending-order/delete.ts b/src/pages/api/pending-order/delete.ts
index 6cc6a65d2..45f972fe2 100644
--- a/src/pages/api/pending-order/delete.ts
+++ b/src/pages/api/pending-order/delete.ts
@@ -1,22 +1,61 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { NextApiRequest, NextApiResponse } from 'next'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { DELETE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
-import { SendMutationRequest } from 'src/components/domains/utils'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { domain, sellerApiAuthTokenManager } = req.body
-
+  
   if (req.method !== 'POST') return res.status(404).end()
+  
+  try {
+    const nonce = new Uint8Array(24)
+    nonce[0] = 111
+    
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.SELLER_CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': clientId,
+    }
+
+    const result = await sellerSquidGraphQlClient.request(
+      DELETE_PENDING_ORDER,
+      { id: domain },
+      requestHeaders
+    )
+
+    res.status(200).send({ success: true })
+    return result
 
-  return SendMutationRequest({
-    sellerApiAuthTokenManager,
-    args:  { id: domain },
-    sellerClientId: process.env.SELLER_CLIENT_ID as string,
-    sellerClientTokenSigner: process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || '',
-    query: DELETE_PENDING_ORDER,
-    res,
-  })
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
 }
diff --git a/src/pages/api/pending-order/update.ts b/src/pages/api/pending-order/update.ts
index 8282e5d30..1931c0de0 100644
--- a/src/pages/api/pending-order/update.ts
+++ b/src/pages/api/pending-order/update.ts
@@ -1,25 +1,63 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { NextApiRequest, NextApiResponse } from 'next'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { UPDATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
-import { SendMutationRequest } from 'src/components/domains/utils'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { sellerApiAuthTokenManager, domain, interrupted } = req.body
 
+  const nonce = new Uint8Array(24)
+  nonce[0] = 111
+
   if (req.method !== 'POST') return res.status(404).end()
 
-  return SendMutationRequest({
-    sellerApiAuthTokenManager,
-    args:   {
-      id: domain,
-      interrupted,
-    },
-    sellerClientId: process.env.SELLER_CLIENT_ID as string,
-    sellerClientTokenSigner: process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || '',
-    query: UPDATE_PENDING_ORDER,
-    res,
-  })
+  try {
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.SELLER_CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': clientId,
+    }
+
+    const result = await sellerSquidGraphQlClient.request(
+      UPDATE_PENDING_ORDER,
+      {
+        id: domain,
+        interrupted,
+      },
+      requestHeaders,
+    )
+
+    res.status(200).send({ success: true })
+    return result
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
 }

From 34ede236c9ea1ccc3ba03b65099b7ee0b9add3b3 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 3 May 2023 12:32:36 +0300
Subject: [PATCH 33/54] Rename property

---
 .../domains/EligibleDomainsSection.tsx        |  4 +--
 .../domains/manage/ManageDomainProvider.tsx   | 10 +++----
 .../domains/pendingOrders/index.tsx           |  4 +--
 .../RegisterDomainModal.tsx                   | 26 +++++++++----------
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 9ed1c7590..58d9f45e0 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -89,7 +89,7 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 
 const DomainAction = ({ domain }: DomainProps) => {
   const { owner } = domain
-  const { variant } = useManageDomainContext()
+  const { domainSellerKind } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const pendingOrder = useSelectPendingOrderById(domain.id)
@@ -132,7 +132,7 @@ const DomainAction = ({ domain }: DomainProps) => {
   return owner ? (
     <UnavailableBtn domain={domain} />
   ) : (
-    <RegisterDomainButton domainName={domain.id} variant={variant} />
+    <RegisterDomainButton domainName={domain.id} domainSellerKind={domainSellerKind} />
   )
 }
 
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index a243e3d38..b8520f71c 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -11,8 +11,8 @@ type ManageDomainProviderState = {
   openManageModal: OpenManageModalFn
   promoCode?: string
   clearPromoCode: () => void
-  variant: Variant
-  setVariant: (variant: Variant) => void
+  domainSellerKind: DomainSellerKind
+  setVariant: (domainSellerKind: DomainSellerKind) => void
   recipient: string
   setRecipient: (recipient: string) => void
   purchaser: string
@@ -23,7 +23,7 @@ type ManageDomainProviderState = {
   setProcessingDomains: (processingDomains: Record<string, boolean>) => void
 }
 
-export type Variant = 'SUB' | 'DOT'
+export type DomainSellerKind = 'SUB' | 'DOT'
 
 const ManageDomainContext = createContext<ManageDomainProviderState>({} as any)
 
@@ -33,7 +33,7 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [currentStep, setStep] = useState<MenuSteps>()
   const [domain, setDomain] = useState<string>()
   const [visible, setVisible] = useState(true)
-  const [variant, setVariant] = useState<Variant>('SUB')
+  const [domainSellerKind, setVariant] = useState<DomainSellerKind>('SUB')
   const [recipient, setRecipient] = useState<string>(myAddress || '')
   const [purchaser, setPurchaser] = useState<string>(myAddress || '')
   const [isFetchNewDomains, setIsFetchNewDomains] = useState(false)
@@ -70,7 +70,7 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const value = {
     currentStep,
     openManageModal,
-    variant,
+    domainSellerKind,
     setVariant,
     recipient,
     setRecipient,
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 41b496b08..46db98e07 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -13,7 +13,7 @@ import {
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
-import { useManageDomainContext, Variant } from '../manage/ManageDomainProvider'
+import { useManageDomainContext, DomainSellerKind } from '../manage/ManageDomainProvider'
 import { getTime } from '../utils'
 import styles from './Index.module.sass'
 import RegisterDomainButton from '../registerDomainModal/RegisterDomainModal'
@@ -55,7 +55,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
         domainName={id}
         label={'Continue'}
         withPrice={false}
-        variant={destination as Variant}
+        domainSellerKind={destination as DomainSellerKind}
       />
     )
 
diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 05c4d1d88..4138b94b7 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -8,7 +8,7 @@ import { useSubstrate } from 'src/components/substrate'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
-import { useManageDomainContext, Variant } from '../manage/ManageDomainProvider'
+import { useManageDomainContext, DomainSellerKind } from '../manage/ManageDomainProvider'
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from '../dot-seller/utils'
 import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
@@ -16,10 +16,10 @@ import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
 type ModalBodyProps = {
   domainName: string
   price?: string
-  variant: Variant
+  domainSellerKind: DomainSellerKind
 }
 
-const ModalBody = ({ domainName, price, variant }: ModalBodyProps) => {
+const ModalBody = ({ domainName, price, domainSellerKind }: ModalBodyProps) => {
   const { recipient, purchaser, setRecipient, setPurchaser } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const nativeBalance = useCreateBalance(purchaser)
@@ -27,7 +27,7 @@ const ModalBody = ({ domainName, price, variant }: ModalBodyProps) => {
 
   const { sellerChain } = sellerConfig || {}
 
-  const isSub = variant === 'SUB'
+  const isSub = domainSellerKind === 'SUB'
 
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
 
@@ -107,11 +107,11 @@ type BuyDomainModalProps = {
   domainName: string
   open: boolean
   close: () => void
-  variant: Variant
+  domainSellerKind: DomainSellerKind
   price?: string
 }
 
-const BuyDomainModal = ({ domainName, open, close, price, variant }: BuyDomainModalProps) => {
+const BuyDomainModal = ({ domainName, open, close, price, domainSellerKind }: BuyDomainModalProps) => {
 
   const title = (
     <div className={styles.ModalTitle}>
@@ -119,7 +119,7 @@ const BuyDomainModal = ({ domainName, open, close, price, variant }: BuyDomainMo
     </div>
   )
 
-  const isByDot = variant === 'DOT'
+  const isByDot = domainSellerKind === 'DOT'
 
   const modalFooter = (
     <div className={styles.FooterButtons}>
@@ -141,7 +141,7 @@ const BuyDomainModal = ({ domainName, open, close, price, variant }: BuyDomainMo
       destroyOnClose
       className={clsx('DfSignInModal', styles.DomainModal)}
     >
-      <ModalBody domainName={domainName} price={price} variant={variant} />
+      <ModalBody domainName={domainName} price={price} domainSellerKind={domainSellerKind} />
     </Modal>
   )
 }
@@ -150,14 +150,14 @@ type BuyByDotButtonProps = {
   domainName: string
   label?: string
   withPrice?: boolean
-  variant: Variant
+  domainSellerKind: DomainSellerKind
 }
 
 const RegisterDomainButton = ({
   domainName,
   label = 'Register',
   withPrice = true,
-  variant,
+  domainSellerKind,
 }: BuyByDotButtonProps) => {
   const sellerConfig = useSelectSellerConfig()
   const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
@@ -169,11 +169,11 @@ const RegisterDomainButton = ({
 
   const close = () => setOpen(false)
 
-  const isSub = variant === 'SUB'
+  const isSub = domainSellerKind === 'SUB'
 
   const price = useMemo(() => {
     return isSub ? api?.consts.domains.baseDomainDeposit.toString() : domainRegistrationPriceFixed
-  }, [variant])
+  }, [domainSellerKind])
 
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
@@ -194,7 +194,7 @@ const RegisterDomainButton = ({
         domainName={domainName}
         open={open}
         close={close}
-        variant={variant || 'SUB'}
+        domainSellerKind={domainSellerKind || 'SUB'}
         price={price}
       />
     </span>

From be3f8332b1d5f354b3ea9c1ad31a8894084ef391 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 5 May 2023 09:57:27 +0300
Subject: [PATCH 34/54] Rename env for seller

---
 .github/workflows/feature-based.yaml  | 2 +-
 ci.env                                | 2 +-
 dev.env                               | 2 +-
 docker/Dockerfile                     | 8 ++++----
 src/pages/api/pending-order/create.ts | 2 +-
 src/pages/api/pending-order/delete.ts | 2 +-
 src/pages/api/pending-order/update.ts | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
index 4a803b3fb..8ef8fab0e 100644
--- a/.github/workflows/feature-based.yaml
+++ b/.github/workflows/feature-based.yaml
@@ -51,7 +51,7 @@ jobs:
             GH_APP_KIND=staging
             GH_CONNECTION_KIND=staging
             GH_SELLER_CLIENT_ID=${{ secrets.STAGING_GH_SELLER_CLIENT_ID }}
-            GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${{ secrets.STAGING_GH_SELLER_TOKEN_SIGNER }}
+            GH_SELLER_TOKEN_SIGNER=${{ secrets.STAGING_GH_SELLER_TOKEN_SIGNER }}
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache
diff --git a/ci.env b/ci.env
index cec38052b..4222f3e29 100644
--- a/ci.env
+++ b/ci.env
@@ -10,4 +10,4 @@ NEXT_PUBLIC_GA_ID='$GH_GA_ID'
 NEXT_PUBLIC_APP_KIND='$GH_APP_KIND'
 NEXT_PUBLIC_APP_BASE_URL='$GH_APP_BASE_URL'
 SELLER_CLIENT_ID='$GH_SELLER_CLIENT_ID'
-SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER='$GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER'
+SELLER_CLIENT_TOKEN_SIGNER='$GH_SELLER_TOKEN_SIGNER'
diff --git a/dev.env b/dev.env
index f6c6918a6..7ef697a12 100644
--- a/dev.env
+++ b/dev.env
@@ -12,7 +12,7 @@ NEXT_PUBLIC_APP_KIND=polkaverse
 NEXT_PUBLIC_CONNECTION_KIND=staging
 
 SELLER_CLIENT_ID=''
-SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=''
+SELLER_CLIENT_TOKEN_SIGNER=''
 
 # Id for Google Analytics
 # NEXT_PUBLIC_GA_ID=
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 0703c70bd..176d591fd 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -9,7 +9,7 @@ ARG GH_GA_ID
 ARG GH_CONNECTION_KIND
 ARG GH_APP_KIND
 ARG GH_APP_BASE_URL
-ARG GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER
+ARG GH_SELLER_TOKEN_SIGNER
 ARG GH_SELLER_CLIENT_ID
 
 ENV  NEXT_PUBLIC_SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
@@ -21,7 +21,7 @@ ENV  NEXT_PUBLIC_SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
      NEXT_PUBLIC_APP_KIND=${GH_APP_KIND} \
      NEXT_PUBLIC_APP_BASE_URL=${GH_APP_BASE_URL} \
      SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
-     SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
+     SELLER_CLIENT_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER} \
      NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND}
 
 
@@ -55,7 +55,7 @@ ARG GH_GA_ID
 ARG GH_CONNECTION_KIND
 ARG GH_APP_KIND
 ARG GH_APP_BASE_URL
-ARG GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER
+ARG GH_SELLER_TOKEN_SIGNER
 ARG GH_SELLER_CLIENT_ID
 
 ENV  NEXT_PUBLIC_SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
@@ -67,7 +67,7 @@ ENV  NEXT_PUBLIC_SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
      NEXT_PUBLIC_APP_KIND=${GH_APP_KIND} \
      NEXT_PUBLIC_APP_BASE_URL=${GH_APP_BASE_URL} \
      SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
-     SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER=${GH_SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER} \
+     SELLER_CLIENT_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER} \
      NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND}
 
 WORKDIR /app
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index c6f050ab3..98a7addb2 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -32,7 +32,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const tokenMessage = dayjs.utc().valueOf().toString()
 
     const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
     )
 
     const clientId = process.env.SELLER_CLIENT_ID as string
diff --git a/src/pages/api/pending-order/delete.ts b/src/pages/api/pending-order/delete.ts
index 45f972fe2..a16d5a68c 100644
--- a/src/pages/api/pending-order/delete.ts
+++ b/src/pages/api/pending-order/delete.ts
@@ -25,7 +25,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const tokenMessage = dayjs.utc().valueOf().toString()
 
     const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
     )
 
     const clientId = process.env.SELLER_CLIENT_ID as string
diff --git a/src/pages/api/pending-order/update.ts b/src/pages/api/pending-order/update.ts
index 1931c0de0..3e5625e38 100644
--- a/src/pages/api/pending-order/update.ts
+++ b/src/pages/api/pending-order/update.ts
@@ -25,7 +25,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const tokenMessage = dayjs.utc().valueOf().toString()
 
     const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_SOONSOCIAL_FE_CLIENT_TOKEN_SIGNER || ''),
+      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
     )
 
     const clientId = process.env.SELLER_CLIENT_ID as string

From ced4adce7b2ee1262f59ae78d65145323b31c94c Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 17 May 2023 10:12:43 +0300
Subject: [PATCH 35/54] Add recipient from squid in register domain modal

---
 .../registerDomainModal/RegisterDomainModal.tsx      | 12 +++++++++++-
 .../domainPendingOrders/pendingOrdersSlice.ts        |  3 ++-
 src/rtk/features/domainPendingOrders/utils.ts        |  3 ++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 4138b94b7..72459a84c 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -1,6 +1,6 @@
 import { Button, Modal, Space, Tag } from 'antd'
 import clsx from 'clsx'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
@@ -12,6 +12,7 @@ import { useManageDomainContext, DomainSellerKind } from '../manage/ManageDomain
 import styles from './Index.module.sass'
 import { useGetDecimalAndSymbol } from '../dot-seller/utils'
 import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
+import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 
 type ModalBodyProps = {
   domainName: string
@@ -24,6 +25,9 @@ const ModalBody = ({ domainName, price, domainSellerKind }: ModalBodyProps) => {
   const sellerConfig = useSelectSellerConfig()
   const nativeBalance = useCreateBalance(purchaser)
   const isMyAddress = useIsMyAddress(recipient)
+  const pendingOrder = useSelectPendingOrderById(domainName)
+
+  const { target } = pendingOrder || {}
 
   const { sellerChain } = sellerConfig || {}
 
@@ -39,6 +43,12 @@ const ModalBody = ({ domainName, price, domainSellerKind }: ModalBodyProps) => {
     currency: symbol,
   })
 
+  useEffect(() => {
+    if(target) {
+      setRecipient(target)
+    }
+  }, [target])
+
   const { freeBalance } = balance || {}
 
   const balanceValue = isSub ? nativeBalance : freeBalance
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index 96c78ac9d..6a9b6d19e 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -106,10 +106,11 @@ export const fetchPendingOrdersByIds = createAsyncThunk<
   const orders = result.getPendingOrdersByIds.orders as PendingDomainEntity[]
 
   const parsedOrders = orders.map(order => {
-    const { signer, createdByAccount } = order
+    const { signer, target, createdByAccount } = order
 
     return {
       ...order,
+      target: toSubsocialAddress(target) || '',
       signer: toSubsocialAddress(signer) || '',
       createdByAccount: toSubsocialAddress(createdByAccount) || '',
     }
diff --git a/src/rtk/features/domainPendingOrders/utils.ts b/src/rtk/features/domainPendingOrders/utils.ts
index 19053b25e..f7850424e 100644
--- a/src/rtk/features/domainPendingOrders/utils.ts
+++ b/src/rtk/features/domainPendingOrders/utils.ts
@@ -55,10 +55,11 @@ export const fetchPendingOrderByAccount = async ({
   const orders = result[resultField].orders as PendingDomainEntity[]
 
   const parsedOrders = orders.map(order => {
-    const { signer, createdByAccount } = order
+    const { signer, target, createdByAccount } = order
 
     return {
       ...order,
+      target: toSubsocialAddress(target) || '',
       signer: toSubsocialAddress(signer) || '',
       createdByAccount: toSubsocialAddress(createdByAccount) || '',
     }

From 3f734872c176e5b985639ed7012a81e2fc74a028 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Sep 2023 10:19:18 +0300
Subject: [PATCH 36/54] Fix price calculation

---
 src/components/domains/BuyDomainButtons.tsx   |  31 +--
 .../domains/EligibleDomainsSection.tsx        | 185 ++++++++++--------
 .../domains/dot-seller/seller-queries.ts      |   1 +
 .../RegisterDomainModal.tsx                   |  87 ++++----
 src/components/domains/utils.tsx              |  41 +++-
 src/config/connections/staging.ts             |   2 +-
 .../sellerConfig/sellerConfigSlice.ts         |  16 +-
 7 files changed, 212 insertions(+), 151 deletions(-)

diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
index ad6f84cf4..69850fe59 100644
--- a/src/components/domains/BuyDomainButtons.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -40,6 +40,7 @@ const log = newLogger('DD')
 type BuyByDotTxButtonProps = {
   domainName: string
   className?: string
+  price?: string
   close: () => void
 }
 
@@ -66,7 +67,12 @@ function getKeyName(value: string) {
   return Object.entries(SocialRemarkDestChainsNameId).find(([key]) => key === value)?.[1]
 }
 
-export const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxButtonProps) => {
+export const BuyByDotTxButton = ({
+  domainName,
+  className,
+  close,
+  price,
+}: BuyByDotTxButtonProps) => {
   const { recipient, purchaser, setIsFetchNewDomains, setProcessingDomains } =
     useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
@@ -88,14 +94,13 @@ export const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxBut
   const { freeBalance } = balance || {}
 
   const getParams = async () => {
-    if (!purchaser || !sellerConfig) return []
+    if (!purchaser || !sellerConfig || !price) return []
 
     const {
       remarkProtName,
       sellerTreasuryAccount,
       remarkProtVersion,
       domainHostChain,
-      domainRegistrationPriceFixed,
       sellerToken: { name: tokenName },
       sellerChain,
     } = sellerConfig
@@ -104,7 +109,7 @@ export const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxBut
 
     if (!api) return []
 
-    const transferTx = api.tx.balances.transfer(sellerTreasuryAccount, domainRegistrationPriceFixed)
+    const transferTx = api.tx.balances.transfer(sellerTreasuryAccount, price)
 
     SocialRemark.setConfig({ protNames: [remarkProtName] })
 
@@ -185,6 +190,13 @@ export const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxBut
     dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
   }
 
+  const disableButton =
+    !recipient ||
+    !freeBalance ||
+    !domainRegistrationPriceFixed ||
+    new BN(freeBalance).lt(domainRegistrationPriceFixed) ||
+    !price
+
   return (
     <LazyTxButton
       block
@@ -192,12 +204,7 @@ export const BuyByDotTxButton = ({ domainName, className, close }: BuyByDotTxBut
       size='middle'
       network={sellerChain || ''}
       accountId={purchaser}
-      disabled={
-        !recipient ||
-        !freeBalance ||
-        !domainRegistrationPriceFixed ||
-        new BN(freeBalance).lt(domainRegistrationPriceFixed)
-      }
+      disabled={disableButton}
       tx={'utility.batchAll'}
       params={getParams}
       onSuccess={onSuccess}
@@ -220,7 +227,7 @@ type BuyDomainSectionProps = {
 
 export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSectionProps) => {
   const reloadMyDomains = useCreateReloadMyDomains()
-  const { openManageModal, setProcessingDomains } = useManageDomainContext()
+  const { openManageModal, setProcessingDomains, recipient } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
   const reloadPendingOrders = useCreateReloadPendingOrders()
   const { purchaser } = useManageDomainContext()
@@ -232,7 +239,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
   if (!isApiReady) return null
 
   const getTxParams = () => {
-    return [domainName, null, BLOCKS_IN_YEAR.toString()]
+    return [recipient, domainName, null, BLOCKS_IN_YEAR.toString()]
   }
 
   const onSuccess: TxCallback = async () => {
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 84936481a..4b5b2e79d 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -1,20 +1,17 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { isFunction } from '@polkadot/util'
 import { parseDomain } from '@subsocial/utils'
-import { Button, Card, Divider, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
-import React, { useEffect } from 'react'
+import { Button, Card, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
+import React, { FC, useEffect } from 'react'
 import config from 'src/config'
 import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
-import {
-  useFetchDomain,
-  useIsReservedWord,
-  useIsSupportedTld,
-} from '../../rtk/features/domains/domainHooks'
+import { useFetchDomains, useIsReservedWord } from '../../rtk/features/domains/domainHooks'
 import { useIsMyAddress, useMyAccountsContext, useMyAddress } from '../auth/MyAccountsContext'
 import { Loading, LocalIcon } from '../utils'
 import { MutedDiv, MutedSpan } from '../utils/MutedText'
+import { useGetDomainPrice } from './BuyDomainButtons'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import RegisterDomainButton from './registerDomainModal/RegisterDomainModal'
@@ -28,6 +25,8 @@ type DomainItemProps = {
 type DomainProps = {
   domain: DomainEntity
   label?: string
+  withDivider?: boolean
+  rightElement?: React.ReactNode
 }
 
 // const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
@@ -84,7 +83,11 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
   )
 }
 
-const DomainAction = ({ domain }: DomainProps) => {
+type DomainActionProps = DomainProps & {
+  domainPrice?: string
+}
+
+const DomainAction = ({ domain, domainPrice }: DomainActionProps) => {
   const { owner } = domain
   const { domainSellerKind } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
@@ -129,26 +132,31 @@ const DomainAction = ({ domain }: DomainProps) => {
   return owner ? (
     <UnavailableBtn domain={domain} />
   ) : (
-    <RegisterDomainButton domainName={domain.id} domainSellerKind={domainSellerKind} />
+    <RegisterDomainButton
+      domainName={domain.id}
+      domainSellerKind={domainSellerKind}
+      domainPrice={domainPrice}
+    />
   )
 }
 
-// type FoundDomainsProps = {
-//   structs?: DomainEntity[]
-//   Action?: FC<DomainProps>
-// }
+type FoundDomainsProps = {
+  structs?: DomainEntity[]
+  Action?: FC<DomainActionProps>
+  domainPrice?: string
+}
 
-// const FoundDomains = ({ structs = [], Action }: FoundDomainsProps) => {
-//   return (
-//     <>
-//       {structs.map(d => {
-//         const action = Action ? <Action domain={d} /> : null
+const FoundDomains = ({ structs = [], Action, domainPrice }: FoundDomainsProps) => {
+  return (
+    <>
+      {structs.map(d => {
+        const action = Action ? <Action domain={d} domainPrice={domainPrice} /> : null
 
-//         return <DomainItem key={d.id} domain={d.id} action={action} />
-//       })}
-//     </>
-//   )
-// }
+        return <DomainItem key={d.id} domain={d.id} action={action} />
+      })}
+    </>
+  )
+}
 
 type FoundDomainCardProps = {
   domain: DomainDetails
@@ -172,21 +180,27 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
   )
 }
 
-// const SuggestedDomains = ({ domain: { id } }: DomainProps) => {
-//   const { domain } = parseDomain(id)
-//   const domains = config.suggestedTlds?.map(tld => `${domain}.${tld}`)
+const SuggestedDomains = ({ domain: { id }, rightElement, withDivider }: DomainProps) => {
+  const { domain } = parseDomain(id)
+  const domains = config.suggestedTlds?.map(tld => `${domain}.${tld}`)
+  const domainPrice = useGetDomainPrice(id)
 
-//   const { loading, domainsStruct = [] } = useFetchDomains(domains || [])
+  const { loading, domainsStruct = [] } = useFetchDomains(domains || [])
 
-//   if (loading) return null
+  if (loading) return null
 
-//   return (
-//     // <ResultContainer title='Suggested Domains' icon={<LocalIcon path={'/icons/lamp.svg'} />}>
-//     <ResultContainer title='Result' icon={<LocalIcon path={'/icons/reward.svg'} />}>
-//       <FoundDomains structs={domainsStruct} Action={DomainAction} />
-//     </ResultContainer>
-//   )
-// }
+  return (
+    // <ResultContainer title='Suggested Domains' icon={<LocalIcon path={'/icons/lamp.svg'} />}>
+    <ResultContainer
+      title='Result'
+      rightElement={rightElement}
+      withDivider={withDivider}
+      icon={<LocalIcon path={'/icons/reward.svg'} />}
+    >
+      <FoundDomains structs={domainsStruct} Action={DomainAction} domainPrice={domainPrice} />
+    </ResultContainer>
+  )
+}
 
 // type LoadMoreDomainsProps = {
 //   api?: SubsocialApi
@@ -198,13 +212,13 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 
 // const loadMoreDomains = async (props: LoadMoreDomainsProps) => {
 //   const { api, dispatch, page, size, ids = [] } = props
-//
+
 //   if (!api) return []
-//
+
 //   const domains = await getPageOfIds(ids, { page, size })
-//
+
 //   await dispatch(fetchDomains({ api, ids: domains }))
-//
+
 //   return domains
 // }
 
@@ -214,16 +228,16 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 
 // const DomainCardByDomain = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 //   const domainStruct = useAppSelector(state => selectDomain(state, domain))
-//
+
 //   if (!domainStruct) return null
-//
+
 //   return <DomainItem key={domain} domain={domain} action={<DomainAction domain={domainStruct} />} />
 // }
 
 // const DomainsList = ({ domains }: DomainsListProps) => {
 //   const dispatch = useDispatch()
 //   const { isApiReady, subsocial } = useSubstrate()
-//
+
 //   const List = useCallback(
 //     () => (
 //       <InfiniteListByData
@@ -238,7 +252,7 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 //     ),
 //     [isApiReady],
 //   )
-//
+
 //   return (
 //     <ResultContainer title='Available Domains' icon={<LocalIcon path={'/icons/success.svg'} />}>
 //       <List />
@@ -251,33 +265,60 @@ const variantOpt = [
   { value: 'DOT', label: 'DOT' },
 ]
 
-const ChooseDomain = ({ domain }: DomainProps) => {
-  const { domain: domainName, tld = config.resolvedDomain } = parseDomain(domain.id)
-  const { isSupported } = useIsSupportedTld(tld)
-  const id = `${domainName}.${tld}`
-  const { domainStruct } = useFetchDomain(id)
-  const { setVariant } = useManageDomainContext()
+// const ChooseDomain = ({ domain, rightElement }: DomainProps) => {
+//   const { domain: domainName, tld = config.resolvedDomain } = parseDomain(domain.id)
+//   const { isSupported } = useIsSupportedTld(tld)
+//   const id = `${domainName}.${tld}`
+//   const { domainStruct } = useFetchDomain(id)
 
-  let content = null
+//   let content = null
 
-  if (!isSupported || !domainStruct) {
-    const text = '❌ Invalid Tld'
-    content = <DomainItem key={text} domain={text} action={null} />
-  } else {
-    content = <DomainItem key={id} domain={id} action={<DomainAction domain={domainStruct} />} />
-  }
+//   if (!isSupported || !domainStruct) {
+//     const text = '❌ Invalid Tld'
+//     content = <DomainItem key={text} domain={text} action={null} />
+//   } else {
+//     content = <DomainItem key={id} domain={id} action={<DomainAction domain={domainStruct} />} />
+//   }
+
+//   const title = (
+//     <div className='d-flex align-items-center justify-content-between w-100'>
+//       <div>Result: </div>
+//     </div>
+//   )
+
+//   return (
+//     <ResultContainer
+//       title={title}
+//       rightElement={rightElement}
+//       icon={<LocalIcon path={'/icons/reward.svg'} />}
+//     >
+//       <Divider className='w-100 m-0 mt-1' />
+//       {content}
+//     </ResultContainer>
+//   )
+// }
+
+export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
+  // const domains = useBuildDomainsWithTldByDomain(domain)
+  const { isReserved, loading: checkingWord } = useIsReservedWord(domain.id)
+  const { setVariant } = useManageDomainContext()
+
+  // if (isEmptyArray(domains)) return null
 
   useEffect(() => {
     setVariant('SUB')
   }, [domain.id])
 
+  if (checkingWord) return <Loading label='Check domain...' />
+
+  if (isReserved) return <ReservedDomainCard domain={domain.id} />
+
   const onVariantChange = (e: RadioChangeEvent) => {
     setVariant(e.target.value)
   }
 
-  const title = (
-    <div className='d-flex align-items-center justify-content-between w-100'>
-      <div>Result: </div>
+  const rightElement = (
+    <>
       <div className='d-flex aling-items-center'>
         <MutedDiv className='mr-2 FontNormal lh-lg font-weight-normal'>Buy with</MutedDiv>
         <Radio.Group
@@ -292,32 +333,14 @@ const ChooseDomain = ({ domain }: DomainProps) => {
           ))}
         </Radio.Group>
       </div>
-    </div>
+    </>
   )
 
-  return (
-    <ResultContainer title={title} icon={<LocalIcon path={'/icons/reward.svg'} />}>
-      <Divider className='w-100 m-0 mt-1' />
-      {content}
-    </ResultContainer>
-  )
-}
-
-export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
-  // const domains = useBuildDomainsWithTldByDomain(domain)
-  const { isReserved, loading: checkingWord } = useIsReservedWord(domain.id)
-
-  // if (isEmptyArray(domains)) return null
-
-  if (checkingWord) return <Loading label='Check domain...' />
-
-  if (isReserved) return <ReservedDomainCard domain={domain.id} />
-
   return (
     <div className='GapBig d-flex flex-column mt-4'>
-      <ChooseDomain domain={domain} />
-      {/* <SuggestedDomains domain={domain} /> */}
-      {/*<DomainsList domains={domains} />*/}
+      {/* <ChooseDomain domain={domain} /> */}
+      <SuggestedDomains domain={domain} rightElement={rightElement} withDivider />
+      {/* <DomainsList domains={domains} /> */}
     </div>
   )
 }
diff --git a/src/components/domains/dot-seller/seller-queries.ts b/src/components/domains/dot-seller/seller-queries.ts
index cec0faf65..5d7dd6cce 100644
--- a/src/components/domains/dot-seller/seller-queries.ts
+++ b/src/components/domains/dot-seller/seller-queries.ts
@@ -55,6 +55,7 @@ export const SELLER_CONFIG = gql`
       domainHostChain
       domainHostChainPrefix
       domainRegistrationPriceFixed
+      domainRegistrationPriceFactor
       remarkProtName
       remarkProtVersion
       sellerApiAuthTokenManager
diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 72459a84c..177897896 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -1,18 +1,18 @@
 import { Button, Modal, Space, Tag } from 'antd'
+import BN from 'bignumber.js'
 import clsx from 'clsx'
 import { useEffect, useMemo, useState } from 'react'
 import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
-import { useSubstrate } from 'src/components/substrate'
+import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
-import { useManageDomainContext, DomainSellerKind } from '../manage/ManageDomainProvider'
-import styles from './Index.module.sass'
-import { useGetDecimalAndSymbol } from '../dot-seller/utils'
 import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
-import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import { useGetDecimalAndSymbol } from '../dot-seller/utils'
+import { DomainSellerKind, useManageDomainContext } from '../manage/ManageDomainProvider'
+import styles from './Index.module.sass'
 
 type ModalBodyProps = {
   domainName: string
@@ -44,7 +44,7 @@ const ModalBody = ({ domainName, price, domainSellerKind }: ModalBodyProps) => {
   })
 
   useEffect(() => {
-    if(target) {
+    if (target) {
       setRecipient(target)
     }
   }, [target])
@@ -75,28 +75,26 @@ const ModalBody = ({ domainName, price, domainSellerKind }: ModalBodyProps) => {
           network={isSub ? undefined : sellerChain}
         />
       </Space>
-      {!isSub && (
-        <Space direction='vertical' size={8} className={'w-100'}>
-          <div className={clsx(styles.Recipient, 'd-flex align-items-center')}>
-            <div>Recipient </div>
-            {isMyAddress && (
-              <Tag color='green' className='ml-2'>
-                Your account
-              </Tag>
-            )}
-          </div>
-          <SelectAccountInput
-            className={`${styles.Select} w-100`}
-            setValue={setRecipient}
-            value={recipient}
-            withAvatar={false}
-            network={isSub ? undefined : sellerChain}
-          />
-          <MutedDiv className={styles.RecipientFieldDesc}>
-            Choose the recipient to whom the domain will be registered
-          </MutedDiv>
-        </Space>
-      )}
+      <Space direction='vertical' size={8} className={'w-100'}>
+        <div className={clsx(styles.Recipient, 'd-flex align-items-center')}>
+          <div>Recipient </div>
+          {isMyAddress && (
+            <Tag color='green' className='ml-2'>
+              Your account
+            </Tag>
+          )}
+        </div>
+        <SelectAccountInput
+          className={`${styles.Select} w-100`}
+          setValue={setRecipient}
+          value={recipient}
+          withAvatar={false}
+          network={isSub ? undefined : sellerChain}
+        />
+        <MutedDiv className={styles.RecipientFieldDesc}>
+          Choose the recipient to whom the domain will be registered
+        </MutedDiv>
+      </Space>
       <Space direction='vertical' size={16} className={clsx(styles.DomainInfo, 'w-100')}>
         <div className='d-flex align-items-center justify-content-between'>
           <MutedDiv>Domain name:</MutedDiv>
@@ -121,8 +119,13 @@ type BuyDomainModalProps = {
   price?: string
 }
 
-const BuyDomainModal = ({ domainName, open, close, price, domainSellerKind }: BuyDomainModalProps) => {
-
+const BuyDomainModal = ({
+  domainName,
+  open,
+  close,
+  price,
+  domainSellerKind,
+}: BuyDomainModalProps) => {
   const title = (
     <div className={styles.ModalTitle}>
       <h2>Register new domain</h2>
@@ -134,7 +137,7 @@ const BuyDomainModal = ({ domainName, open, close, price, domainSellerKind }: Bu
   const modalFooter = (
     <div className={styles.FooterButtons}>
       {isByDot ? (
-        <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} />
+        <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} price={price} />
       ) : (
         <BuyDomainSection domainName={domainName} />
       )}
@@ -161,6 +164,7 @@ type BuyByDotButtonProps = {
   label?: string
   withPrice?: boolean
   domainSellerKind: DomainSellerKind
+  domainPrice?: string
 }
 
 const RegisterDomainButton = ({
@@ -168,10 +172,10 @@ const RegisterDomainButton = ({
   label = 'Register',
   withPrice = true,
   domainSellerKind,
+  domainPrice,
 }: BuyByDotButtonProps) => {
   const sellerConfig = useSelectSellerConfig()
-  const { domainRegistrationPriceFixed, sellerChain } = sellerConfig || {}
-  const { api } = useSubstrate()
+  const { domainRegistrationPriceFactor, sellerChain } = sellerConfig || {}
   const { processingDomains } = useManageDomainContext()
 
   const [open, setOpen] = useState(false)
@@ -182,8 +186,14 @@ const RegisterDomainButton = ({
   const isSub = domainSellerKind === 'SUB'
 
   const price = useMemo(() => {
-    return isSub ? api?.consts.domains.baseDomainDeposit.toString() : domainRegistrationPriceFixed
-  }, [domainSellerKind])
+    if (isSub) {
+      return domainPrice
+    } else {
+      if (!domainRegistrationPriceFactor || !domainPrice) return '0'
+
+      return new BN(domainPrice).multipliedBy(new BN(domainRegistrationPriceFactor)).toString()
+    }
+  }, [isSub, domainPrice, domainRegistrationPriceFactor])
 
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
@@ -192,12 +202,7 @@ const RegisterDomainButton = ({
   return (
     <span className={styles.RegisterButton}>
       {withPrice && <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>}
-      <Button
-        type={'primary'}
-        block
-        disabled={isProcessingDomain}
-        onClick={() => setOpen(true)}
-      >
+      <Button type={'primary'} block disabled={isProcessingDomain} onClick={() => setOpen(true)}>
         {label}
       </Button>
       <BuyDomainModal
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index bb4ec9a80..51f912d48 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -1,9 +1,11 @@
 import { LoadingOutlined } from '@ant-design/icons'
 import { parseDomain } from '@subsocial/utils'
+import { Divider } from 'antd'
+import BN from 'bignumber.js'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { FC, HTMLProps } from 'react'
+import { FC, HTMLProps, useMemo } from 'react'
 import {
   CardWithTitle as InnerCardWithTitle,
   CardWithTitleProps,
@@ -11,13 +13,14 @@ import {
 import config from 'src/config'
 import { useCreateRemovePendingOrders } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useCreateUpsertDomains } from 'src/rtk/features/domains/domainHooks'
+import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import useSubsocialEffect from '../api/useSubsocialEffect'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import { slugifyHandle } from '../urls/helpers'
 import { useAddClassNameToRootElement } from '../utils'
 import { controlledMessage } from '../utils/Message'
 import styles from './index.module.sass'
-import { useManageDomainContext } from './manage/ManageDomainProvider'
+import { DomainSellerKind, useManageDomainContext } from './manage/ManageDomainProvider'
 
 dayjs.extend(utc)
 
@@ -26,6 +29,8 @@ const { resolvedDomain } = config
 type ResultContainerProps = Omit<HTMLProps<HTMLDivElement>, 'title'> & {
   title: React.ReactNode
   icon: JSX.Element
+  rightElement?: React.ReactNode
+  withDivider?: boolean
 }
 
 export const ResultContainer = ({
@@ -33,14 +38,20 @@ export const ResultContainer = ({
   className,
   icon,
   children,
+  rightElement,
+  withDivider,
   ...props
 }: ResultContainerProps) => {
   return (
     <div className={clsx('d-flex flex-column', className)}>
-      <h2 {...props} className={clsx('d-flex align-items-center ColorCurrentColor')}>
-        {icon && <div className='mr-2 d-flex'>{icon}</div>}
-        {title}
-      </h2>
+      <div className='d-flex align-items-center justify-content-between w-100'>
+        <h2 {...props} className={clsx('d-flex align-items-center mb-0 ColorCurrentColor')}>
+          {icon && <div className='mr-2 d-flex'>{icon}</div>}
+          {title}
+        </h2>
+        {rightElement}
+      </div>
+      {withDivider && <Divider className='w-100 m-0 mt-3 mb-3' />}
       <div className='d-flex flex-column GapNormal'>{children}</div>
     </div>
   )
@@ -158,3 +169,21 @@ export const useFetchNewDomains = (domainName?: string) => {
     [isFetchNewDomains, myAddress],
   )
 }
+
+export const useGetPrice = (domainPrice: string, domainSellerKind: DomainSellerKind) => {
+  const sellerConfig = useSelectSellerConfig()
+  const { domainRegistrationPriceFactor } = sellerConfig || {}
+
+  const isSub = domainSellerKind === 'SUB'
+
+  const price = useMemo(() => {
+    if (isSub) {
+      return domainPrice
+    } else {
+      if (!domainRegistrationPriceFactor || !domainPrice) return '0'
+      return new BN(domainPrice).multipliedBy(new BN(domainRegistrationPriceFactor)).toString()
+    }
+  }, [isSub, domainPrice, domainRegistrationPriceFactor])
+
+  return price
+}
diff --git a/src/config/connections/staging.ts b/src/config/connections/staging.ts
index 5d86fd3fe..53c4bd13d 100644
--- a/src/config/connections/staging.ts
+++ b/src/config/connections/staging.ts
@@ -13,7 +13,7 @@ const stagingConfig: SubsocialConfig = {
   dagHttpMethod: 'get',
   useOffchainForIpfs: false,
 
-  subIdApiUrl: 'https://rococo-subid.subsocial.network/api/v1',
+  subIdApiUrl: 'http://localhost:3001/api/v1',
   subsocialParaId: 2100,
 }
 
diff --git a/src/rtk/features/sellerConfig/sellerConfigSlice.ts b/src/rtk/features/sellerConfig/sellerConfigSlice.ts
index 8d0d3e33d..d7be29b64 100644
--- a/src/rtk/features/sellerConfig/sellerConfigSlice.ts
+++ b/src/rtk/features/sellerConfig/sellerConfigSlice.ts
@@ -11,6 +11,7 @@ export type SellerConfigEntity = {
   domainHostChain: string
   domainHostChainPrefix: string
   domainRegistrationPriceFixed: string
+  domainRegistrationPriceFactor: string
   remarkProtName: string
   remarkProtVersion: string
   sellerApiAuthTokenManager: string
@@ -37,11 +38,7 @@ export const selectSellerConfig = (state: RootState): SellerConfigEntity | undef
   return selectors.selectById(state, sellerConfigId)
 }
 
-export const fetchSellerConfig = createAsyncThunk<
-  MaybeEntity,
-  CommonFetchProps,
-  ThunkApiConfig
->(
+export const fetchSellerConfig = createAsyncThunk<MaybeEntity, CommonFetchProps, ThunkApiConfig>(
   `${sliceName}/fetchOne`,
   async ({ reload }, { getState }): Promise<MaybeEntity> => {
     const knownDomainsPendingOrders = selectSellerConfig(getState())
@@ -54,7 +51,7 @@ export const fetchSellerConfig = createAsyncThunk<
 
     return {
       id: sellerConfigId,
-      ...result.sellerConfigInfo
+      ...result.sellerConfigInfo,
     }
   },
 )
@@ -66,10 +63,9 @@ const slice = createSlice({
     // upsertOwnDomains: adapter.upsertOne,
   },
   extraReducers: builder => {
-    builder
-      .addCase(fetchSellerConfig.fulfilled, (state, { payload }) => {
-        if (payload) adapter.upsertOne(state, payload)
-      })
+    builder.addCase(fetchSellerConfig.fulfilled, (state, { payload }) => {
+      if (payload) adapter.upsertOne(state, payload)
+    })
   },
 })
 

From 1ac9b9056a2a81320b6e52a54b97ec5a0287e27c Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Sep 2023 14:12:28 +0300
Subject: [PATCH 37/54] Fix after review

---
 .github/workflows/build-deploy.yml            |  2 +
 src/components/common/balances/Balance.tsx    | 40 ++++++---
 src/components/domains/BuyDomainButtons.tsx   | 15 ++--
 .../domains/ClaimFreeDomainSection.tsx        | 35 ++++++++
 .../domains/EligibleDomainsSection.tsx        | 29 +------
 src/components/domains/dot-seller/config.ts   |  7 +-
 src/components/domains/dot-seller/utils.tsx   | 14 ---
 .../domains/pendingOrders/index.tsx           | 33 +++----
 .../RegisterDomainModal.tsx                   |  2 +-
 src/components/domains/utils.tsx              |  4 +
 src/components/profiles/ViewProfile.tsx       |  4 +-
 .../profiles/address-views/AuthorPreview.tsx  |  5 +-
 .../address-views/utils/NameDetails.tsx       |  4 +-
 .../utils/useGetDecimalsAndSymbol.tsx         | 14 +++
 src/config/connections/local.ts               |  1 +
 src/config/connections/main.ts                |  1 +
 src/config/connections/staging.ts             |  1 +
 src/config/types.ts                           |  2 +
 src/pages/api/pending-order/create.ts         | 85 +++++--------------
 src/pages/api/pending-order/delete.ts         | 57 ++-----------
 src/pages/api/pending-order/update.ts         | 66 ++++----------
 .../domainPendingOrders/pendingOrdersHooks.ts | 24 ++----
 .../domainPendingOrders/pendingOrdersSlice.ts | 38 +++------
 src/rtk/features/domainPendingOrders/utils.ts | 85 ++++++++++++-------
 src/server/pendingOrders.ts                   | 67 +++++++++++++++
 25 files changed, 310 insertions(+), 325 deletions(-)
 create mode 100644 src/components/domains/ClaimFreeDomainSection.tsx
 create mode 100644 src/components/utils/useGetDecimalsAndSymbol.tsx
 create mode 100644 src/server/pendingOrders.ts

diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
index e2abe0dee..3519c7081 100644
--- a/.github/workflows/build-deploy.yml
+++ b/.github/workflows/build-deploy.yml
@@ -75,6 +75,8 @@ jobs:
             GH_AMP_ID=2eeca0e8a0163c89e3f023c971e426a6
             GH_OFFCHAIN_SIGNER_URL=https://signer.subsocial.network
             GH_CONNECTION_KIND=main
+            GH_SELLER_CLIENT_ID=${{ secrets.SELLER_CLIENT_ID }}
+            GH_SELLER_TOKEN_SIGNER=${{ secrets.SELLER_TOKEN_SIGNER }}
 
           tags: |
             ${{ env.image }}
diff --git a/src/components/common/balances/Balance.tsx b/src/components/common/balances/Balance.tsx
index ea118b678..9c6f9fcc4 100644
--- a/src/components/common/balances/Balance.tsx
+++ b/src/components/common/balances/Balance.tsx
@@ -4,14 +4,14 @@ import { newLogger } from '@subsocial/utils'
 import BN from 'bn.js'
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
+import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import { useLazyConnection } from 'src/components/lazy-connection/LazyConnectionContext'
 import { BareProps } from 'src/components/utils/types'
+import { useGetDecimalAndSymbol } from 'src/components/utils/useGetDecimalsAndSymbol'
 import { NodeNames } from 'src/config/types'
 import { AnyAccountId } from 'src/types'
 import { useKusamaContext } from '../../kusama/KusamaContext'
 import useSubstrate from '../../substrate/useSubstrate'
-import { useGetDecimalAndSymbol } from 'src/components/domains/dot-seller/utils'
-import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 
 const log = newLogger('useCreateBallance')
 
@@ -164,18 +164,36 @@ export const FormatKsmBalance = ({ value, decimals, currency, ...props }: Format
   )
 }
 
-type BalanceProps = {
+type CommonBalanceProps = {
   address: AnyAccountId
   label?: React.ReactNode
-  network?: string
 }
 
-export const Balance = ({ address, label, network }: BalanceProps) => {
+type NativeBalanceProps = CommonBalanceProps
+
+export const NativeBalance = ({ address, label }: NativeBalanceProps) => {
   const balance = useCreateBalance(address)
 
+  if (!balance) return null
+
+  const balanceView = <FormatBalance value={balance} />
+
+  return (
+    <span>
+      {label}
+      {balanceView}
+    </span>
+  )
+}
+
+type BalanceByNetworkProps = CommonBalanceProps & {
+  network?: string
+}
+
+export const BalanceByNetwork = ({ address, label, network }: BalanceByNetworkProps) => {
   const { decimal, symbol } = useGetDecimalAndSymbol(network)
 
-  const otherNetworkBalance = useBalancesByNetwork({
+  const balance = useBalancesByNetwork({
     account: address.toString(),
     network: network,
     currency: symbol,
@@ -183,13 +201,9 @@ export const Balance = ({ address, label, network }: BalanceProps) => {
 
   if (!balance) return null
 
-  let balanceView = <FormatBalance value={balance} />
-
-  if(network) {
-    if(!otherNetworkBalance) return null
-
-    balanceView = <FormatBalance value={otherNetworkBalance.freeBalance} decimals={decimal} currency={symbol} />
-  }
+  const balanceView = (
+    <FormatBalance value={balance.freeBalance} decimals={decimal} currency={symbol} />
+  )
 
   return (
     <span>
diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
index 69850fe59..8da301030 100644
--- a/src/components/domains/BuyDomainButtons.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -31,9 +31,11 @@ import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfi
 import { useSubstrate } from '../substrate'
 import { TxCallback } from '../substrate/SubstrateTxButton'
 import { showErrorMessage } from '../utils/Message'
-import { pendingOrderAction, useGetDecimalAndSymbol } from './dot-seller/utils'
+import { useGetDecimalAndSymbol } from '../utils/useGetDecimalsAndSymbol'
+import { pendingOrderAction } from './dot-seller/utils'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
+import { BLOCKS_IN_YEAR } from './utils'
 
 const log = newLogger('DD')
 
@@ -63,10 +65,6 @@ export const useGetDomainPrice = (domain: string) => {
   return price
 }
 
-function getKeyName(value: string) {
-  return Object.entries(SocialRemarkDestChainsNameId).find(([key]) => key === value)?.[1]
-}
-
 export const BuyByDotTxButton = ({
   domainName,
   className,
@@ -113,7 +111,8 @@ export const BuyByDotTxButton = ({
 
     SocialRemark.setConfig({ protNames: [remarkProtName] })
 
-    const destination = getKeyName(domainHostChain)
+    const destination =
+      SocialRemarkDestChainsNameId[domainHostChain as keyof typeof SocialRemarkDestChainsNameId]
 
     if (!destination) return []
 
@@ -216,10 +215,6 @@ export const BuyByDotTxButton = ({
   )
 }
 
-const BLOCK_TIME = 12
-const SECS_IN_DAY = 60 * 60 * 24
-const BLOCKS_IN_YEAR = new BN((SECS_IN_DAY * 365) / BLOCK_TIME)
-
 type BuyDomainSectionProps = {
   domainName: string
   label?: string
diff --git a/src/components/domains/ClaimFreeDomainSection.tsx b/src/components/domains/ClaimFreeDomainSection.tsx
new file mode 100644
index 000000000..98182f6dd
--- /dev/null
+++ b/src/components/domains/ClaimFreeDomainSection.tsx
@@ -0,0 +1,35 @@
+import { Button } from 'antd'
+import clsx from 'clsx'
+import { useState } from 'react'
+import ClaimFreeDomainModal from './ClaimFreeDomainModal'
+import { DomainProps } from './EligibleDomainsSection'
+import styles from './index.module.sass'
+import { useManageDomainContext } from './manage/ManageDomainProvider'
+
+export const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
+  const [openConfirmation, setOpenConfirmation] = useState(false)
+  const { promoCode } = useManageDomainContext()
+
+  return (
+    <div className='d-flex align-items-center'>
+      <ClaimFreeDomainModal
+        onCancel={() => setOpenConfirmation(false)}
+        visible={openConfirmation}
+        domain={domain}
+        promoCode={promoCode}
+      />
+      <span className='font-weight-bold mr-2'>Free</span>
+      <Button
+        type='primary'
+        size='middle'
+        className={clsx(styles.DomainPrimaryButton)}
+        onClick={() => setOpenConfirmation(true)}
+      >
+        <span style={{ position: 'relative', top: '-1px' }} className='mr-1'>
+          🎁
+        </span>
+        Claim
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 4b5b2e79d..71e7dbcbe 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -22,40 +22,13 @@ type DomainItemProps = {
   action: React.ReactNode
 }
 
-type DomainProps = {
+export type DomainProps = {
   domain: DomainEntity
   label?: string
   withDivider?: boolean
   rightElement?: React.ReactNode
 }
 
-// const ClaimFreeDomainSection = ({ domain: { id: domain } }: DomainProps) => {
-//   const [openConfirmation, setOpenConfirmation] = useState(false)
-//   const { promoCode } = useManageDomainContext()
-//   return (
-//     <div className='d-flex align-items-center'>
-//       <ClaimFreeDomainModal
-//         onCancel={() => setOpenConfirmation(false)}
-//         visible={openConfirmation}
-//         domain={domain}
-//         promoCode={promoCode}
-//       />
-//       <span className='font-weight-bold mr-2'>Free</span>
-//       <Button
-//         type='primary'
-//         size='middle'
-//         className={clsx(styles.DomainPrimaryButton)}
-//         onClick={() => setOpenConfirmation(true)}
-//       >
-//         <span style={{ position: 'relative', top: '-1px' }} className='mr-1'>
-//           🎁
-//         </span>
-//         Claim
-//       </Button>
-//     </div>
-//   )
-// }
-
 export const DomainItem = ({ domain, action }: DomainItemProps) => {
   const actionComponent = isFunction(action) ? action() : action
 
diff --git a/src/components/domains/dot-seller/config.ts b/src/components/domains/dot-seller/config.ts
index c09d6201e..680bb0cb2 100644
--- a/src/components/domains/dot-seller/config.ts
+++ b/src/components/domains/dot-seller/config.ts
@@ -1,5 +1,8 @@
 import { GraphQLClient } from 'graphql-request'
+import config from 'src/config'
 
-export const xSellerSquid = 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql'
+const { sellerSquid } = config
 
-export const sellerSquidGraphQlClient = new GraphQLClient(xSellerSquid)
\ No newline at end of file
+export const sellerSquidGraphQlClient = new GraphQLClient(sellerSquid)
+
+export const NONCE = 111
diff --git a/src/components/domains/dot-seller/utils.tsx b/src/components/domains/dot-seller/utils.tsx
index c2d43744b..88416f60e 100644
--- a/src/components/domains/dot-seller/utils.tsx
+++ b/src/components/domains/dot-seller/utils.tsx
@@ -4,20 +4,6 @@ import {
   fetchPendingOrdersByAccount,
   fetchPendingOrdersBySigner,
 } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
-import { useChainInfo } from '../../../rtk/features/chainsInfo/chainsInfoHooks'
-
-export const useGetDecimalAndSymbol = (network?: string) => {
-  const chainsInfo = useChainInfo()
-
-  if (!network) return {}
-
-  const { tokenDecimals, tokenSymbols, nativeToken } = chainsInfo[network] || {}
-
-  const decimal = tokenDecimals?.[0] || 0
-  const symbol = tokenSymbols?.[0] || nativeToken
-
-  return { decimal, symbol }
-}
 
 type PendingActionProps<T> = {
   action: (...args: T[]) => Promise<any>
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 46db98e07..8e6894111 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -13,16 +13,18 @@ import {
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
-import { useManageDomainContext, DomainSellerKind } from '../manage/ManageDomainProvider'
+import { DomainSellerKind, useManageDomainContext } from '../manage/ManageDomainProvider'
+import RegisterDomainButton from '../registerDomainModal/RegisterDomainModal'
 import { getTime } from '../utils'
 import styles from './Index.module.sass'
-import RegisterDomainButton from '../registerDomainModal/RegisterDomainModal'
 
 type PendingDomainProps = {
   pendingDomain: PendingDomainEntity
   time: number
 }
 
+const RELOAD_ORDERS_DELAY = 12000
+
 const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
   const reloadPendingOrders = useCreateReloadPendingOrders()
@@ -36,7 +38,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const expiresAt = useMemo(() => {
     const expiresAtValue = dayjs(timestamp).valueOf() + (dmnRegPendingOrderExpTime || 0)
 
-    if (time >= expiresAtValue + 12000) {
+    if (time >= expiresAtValue + RELOAD_ORDERS_DELAY) {
       reloadPendingOrders(myAddress)
     }
 
@@ -45,19 +47,18 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
 
   const isDomainProcessing = processingDomains[pendingDomain.id]
 
-  const registerButton =
-    isDomainProcessing ? (
-      <Tag color='gold' className={clsx(styles.PendingTag)}>
-        Processing
-      </Tag>
-    ) : (
-      <RegisterDomainButton
-        domainName={id}
-        label={'Continue'}
-        withPrice={false}
-        domainSellerKind={destination as DomainSellerKind}
-      />
-    )
+  const registerButton = isDomainProcessing ? (
+    <Tag color='gold' className={clsx(styles.PendingTag)}>
+      Processing
+    </Tag>
+  ) : (
+    <RegisterDomainButton
+      domainName={id}
+      label={'Continue'}
+      withPrice={false}
+      domainSellerKind={destination as DomainSellerKind}
+    />
+  )
 
   return (
     <div className='d-flex align-items-center justify-content-between'>
diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 177897896..d332d8362 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -5,12 +5,12 @@ import { useEffect, useMemo, useState } from 'react'
 import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
+import { useGetDecimalAndSymbol } from 'src/components/utils/useGetDecimalsAndSymbol'
 import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
-import { useGetDecimalAndSymbol } from '../dot-seller/utils'
 import { DomainSellerKind, useManageDomainContext } from '../manage/ManageDomainProvider'
 import styles from './Index.module.sass'
 
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 51f912d48..bd38a97a4 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -24,6 +24,10 @@ import { DomainSellerKind, useManageDomainContext } from './manage/ManageDomainP
 
 dayjs.extend(utc)
 
+const BLOCK_TIME = 12
+const SECS_IN_DAY = 60 * 60 * 24
+export const BLOCKS_IN_YEAR = new BN((SECS_IN_DAY * 365) / BLOCK_TIME)
+
 const { resolvedDomain } = config
 
 type ResultContainerProps = Omit<HTMLProps<HTMLDivElement>, 'title'> & {
diff --git a/src/components/profiles/ViewProfile.tsx b/src/components/profiles/ViewProfile.tsx
index 62b353aa6..ad1bed08f 100644
--- a/src/components/profiles/ViewProfile.tsx
+++ b/src/components/profiles/ViewProfile.tsx
@@ -15,7 +15,7 @@ import {
 import { AnyAccountId, DataSourceTypes, ProfileContent, ProfileData, SpaceData } from 'src/types'
 import { AccountActivity } from '../activity/AccountActivity'
 import { useIsMyAddress, useMyAccountsContext } from '../auth/MyAccountsContext'
-import { Balance } from '../common/balances'
+import { NativeBalance } from '../common/balances'
 import { PageContent } from '../main/PageWrapper'
 import { accountUrl, newSpaceUrl } from '../urls'
 import { DfMd } from '../utils/DfMd'
@@ -127,7 +127,7 @@ const Component = (props: Props) => {
               </CopyAddress>
             </MutedDiv>
             <MutedDiv>
-              <Balance address={address} label='Balance: ' />
+              <NativeBalance address={address} label='Balance: ' />
             </MutedDiv>
             {/* <MutedDiv>{`Reputation: ${reputation}`}</MutedDiv> */}
             <div className='about'>{about && <DfMd className='mt-3' source={about} />}</div>
diff --git a/src/components/profiles/address-views/AuthorPreview.tsx b/src/components/profiles/address-views/AuthorPreview.tsx
index ffa615af4..8b60e58c1 100644
--- a/src/components/profiles/address-views/AuthorPreview.tsx
+++ b/src/components/profiles/address-views/AuthorPreview.tsx
@@ -3,7 +3,7 @@ import { Popover } from 'antd'
 import BN from 'bn.js'
 import React from 'react'
 import { ProfileData } from 'src/types'
-import { Balance } from '../../common/balances/Balance'
+import { BalanceByNetwork } from '../../common/balances/Balance'
 import AuthorSpaceAvatar from './AuthorSpaceAvatar'
 import Name from './Name'
 import { ProfilePreviewPopup } from './ProfilePreview'
@@ -21,7 +21,8 @@ export const InfoDetails: React.FC<InfoProps> = ({ details, balance, address, ne
   return (
     <>
       <div className='Df--AddressComponents-details'>
-        {balance || (address && <Balance address={address.toString()} network={network} />)}
+        {balance ||
+          (address && <BalanceByNetwork address={address.toString()} network={network} />)}
         {details && <div>{details}</div>}
       </div>
     </>
diff --git a/src/components/profiles/address-views/utils/NameDetails.tsx b/src/components/profiles/address-views/utils/NameDetails.tsx
index d8aa6d4b7..9baf718a4 100644
--- a/src/components/profiles/address-views/utils/NameDetails.tsx
+++ b/src/components/profiles/address-views/utils/NameDetails.tsx
@@ -3,7 +3,7 @@ import { toShortAddress } from 'src/components/utils'
 import MyEntityLabel from 'src/components/utils/MyEntityLabel'
 import { ProfileData } from 'src/types'
 import { CopyAddress } from '.'
-import { Balance } from '../../../common/balances/Balance'
+import { NativeBalance } from '../../../common/balances/Balance'
 import { InfoPanel } from '../InfoSection'
 import Name from '../Name'
 import { AddressProps } from './types'
@@ -30,7 +30,7 @@ export const NameDetails = ({
       ? [
           {
             label: 'Balance',
-            value: <Balance address={address} />,
+            value: <NativeBalance address={address} />,
           },
           // {
           //   label: 'Reputation',
diff --git a/src/components/utils/useGetDecimalsAndSymbol.tsx b/src/components/utils/useGetDecimalsAndSymbol.tsx
new file mode 100644
index 000000000..d5f10a8a7
--- /dev/null
+++ b/src/components/utils/useGetDecimalsAndSymbol.tsx
@@ -0,0 +1,14 @@
+import { useChainInfo } from 'src/rtk/features/chainsInfo/chainsInfoHooks'
+
+export const useGetDecimalAndSymbol = (network?: string) => {
+  const chainsInfo = useChainInfo()
+
+  if (!network) return {}
+
+  const { tokenDecimals, tokenSymbols, nativeToken } = chainsInfo[network] || {}
+
+  const decimal = tokenDecimals?.[0] || 0
+  const symbol = tokenSymbols?.[0] || nativeToken
+
+  return { decimal, symbol }
+}
diff --git a/src/config/connections/local.ts b/src/config/connections/local.ts
index c547cdbf7..ad904862e 100644
--- a/src/config/connections/local.ts
+++ b/src/config/connections/local.ts
@@ -8,6 +8,7 @@ const localConfig: SubsocialConfig = {
 
   offchainUrl: 'http://localhost:3001',
   graphqlUrl: 'https://staging.subsocial.network/hydra/graphql',
+  sellerSquid: 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql',
 
   ipfsNodeUrl: 'http://127.0.0.1:8080',
   dagHttpMethod: 'post',
diff --git a/src/config/connections/main.ts b/src/config/connections/main.ts
index 7b3f622f7..9a45db958 100644
--- a/src/config/connections/main.ts
+++ b/src/config/connections/main.ts
@@ -11,6 +11,7 @@ const mainConfig: SubsocialConfig = {
   offchainUrl: 'https://api.subsocial.network',
   offchainSignerUrl: 'https://signer.subsocial.network',
   graphqlUrl: 'https://squid.subsquid.io/subsocial/graphql',
+  sellerSquid: 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql',
 
   ipfsNodeUrl: 'https://ipfs.subsocial.network',
 
diff --git a/src/config/connections/staging.ts b/src/config/connections/staging.ts
index 53c4bd13d..4296e285e 100644
--- a/src/config/connections/staging.ts
+++ b/src/config/connections/staging.ts
@@ -8,6 +8,7 @@ const stagingConfig: SubsocialConfig = {
   offchainUrl: 'https://staging-api.subsocial.network',
   offchainSignerUrl: 'https://staging-signer.subsocial.network',
   graphqlUrl: 'https://squid.subsquid.io/soonsocial/graphql',
+  sellerSquid: 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql',
 
   ipfsNodeUrl: 'https://staging-ipfs.subsocial.network',
   dagHttpMethod: 'get',
diff --git a/src/config/types.ts b/src/config/types.ts
index 706ece5c1..5718932a1 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -76,6 +76,8 @@ export type ConnectionsSettings = {
 
   /** A URL of Subsocial Offchain signer backend. Example: http://localhost:3002. **/
   offchainSignerUrl?: string
+
+  sellerSquid: string
 }
 
 export type AppConfig = {
diff --git a/src/pages/api/pending-order/create.ts b/src/pages/api/pending-order/create.ts
index 98a7addb2..45958a021 100644
--- a/src/pages/api/pending-order/create.ts
+++ b/src/pages/api/pending-order/create.ts
@@ -1,74 +1,31 @@
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { CREATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+import { pendingOrdersWrapper } from 'src/server/pendingOrders'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { 
-    sellerApiAuthTokenManager, 
-    createdByAccount, 
-    destination, 
-    domain, 
-    signer, 
-    target 
-  } = req.body
-
-  if (req.method !== 'POST') return res.status(404).end()
-  
-  try {
-    const nonce = new Uint8Array(24)
-    nonce[0] = 111
-
-    const tokenMessage = dayjs.utc().valueOf().toString()
-
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
-    )
-
-    const clientId = process.env.SELLER_CLIENT_ID as string
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': clientId,
-    }
-
-    const result = await sellerSquidGraphQlClient.request(
-      CREATE_PENDING_ORDER,
-      { 
-        createdByAccount, 
-        destination, 
-        domain, 
-        signer, 
-        target,
-      },
-      requestHeaders
-    )
-
-    res.status(200).send({ success: true })
-    return result
-
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
+  const { sellerApiAuthTokenManager, createdByAccount, destination, domain, signer, target } =
+    req.body
+
+  await pendingOrdersWrapper({
+    req,
+    res,
+    sellerApiAuthTokenManager,
+    request: (requestHeaders: any) =>
+      sellerSquidGraphQlClient.request(
+        CREATE_PENDING_ORDER,
+        {
+          createdByAccount,
+          destination,
+          domain,
+          signer,
+          target,
+        },
+        requestHeaders,
+      ),
+  })
 }
diff --git a/src/pages/api/pending-order/delete.ts b/src/pages/api/pending-order/delete.ts
index a16d5a68c..34bf3e5c4 100644
--- a/src/pages/api/pending-order/delete.ts
+++ b/src/pages/api/pending-order/delete.ts
@@ -1,61 +1,20 @@
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { DELETE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+import { pendingOrdersWrapper } from 'src/server/pendingOrders'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { domain, sellerApiAuthTokenManager } = req.body
-  
-  if (req.method !== 'POST') return res.status(404).end()
-  
-  try {
-    const nonce = new Uint8Array(24)
-    nonce[0] = 111
-    
-    const tokenMessage = dayjs.utc().valueOf().toString()
 
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
-    )
-
-    const clientId = process.env.SELLER_CLIENT_ID as string
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': clientId,
-    }
-
-    const result = await sellerSquidGraphQlClient.request(
-      DELETE_PENDING_ORDER,
-      { id: domain },
-      requestHeaders
-    )
-
-    res.status(200).send({ success: true })
-    return result
-
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
+  await pendingOrdersWrapper({
+    req,
+    res,
+    sellerApiAuthTokenManager,
+    request: (requestHeaders: any) =>
+      sellerSquidGraphQlClient.request(DELETE_PENDING_ORDER, { id: domain }, requestHeaders),
+  })
 }
diff --git a/src/pages/api/pending-order/update.ts b/src/pages/api/pending-order/update.ts
index 3e5625e38..ef3d5c70b 100644
--- a/src/pages/api/pending-order/update.ts
+++ b/src/pages/api/pending-order/update.ts
@@ -1,63 +1,27 @@
-import { stringToU8a, u8aToHex } from '@polkadot/util'
-import {
-  decodeAddress,
-  mnemonicToMiniSecret,
-  naclBoxPairFromSecret,
-  naclSeal,
-} from '@polkadot/util-crypto'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { UPDATE_PENDING_ORDER } from 'src/components/domains/dot-seller/seller-queries'
+import { pendingOrdersWrapper } from 'src/server/pendingOrders'
 
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { sellerApiAuthTokenManager, domain, interrupted } = req.body
 
-  const nonce = new Uint8Array(24)
-  nonce[0] = 111
-
-  if (req.method !== 'POST') return res.status(404).end()
-
-  try {
-    const tokenMessage = dayjs.utc().valueOf().toString()
-
-    const requesterKeypair = naclBoxPairFromSecret(
-      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
-    )
-
-    const clientId = process.env.SELLER_CLIENT_ID as string
-
-    const signedToken = naclSeal(
-      stringToU8a(tokenMessage),
-      requesterKeypair.secretKey,
-      decodeAddress(sellerApiAuthTokenManager),
-      nonce,
-    )
-
-    const requestHeaders = {
-      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
-      'Client-Id': clientId,
-    }
-
-    const result = await sellerSquidGraphQlClient.request(
-      UPDATE_PENDING_ORDER,
-      {
-        id: domain,
-        interrupted,
-      },
-      requestHeaders,
-    )
-
-    res.status(200).send({ success: true })
-    return result
-  } catch (e: any) {
-    res.status(200).send({
-      success: false,
-      errors: e.response.errors?.[0].message,
-    })
-    return undefined
-  }
+  await pendingOrdersWrapper({
+    req,
+    res,
+    sellerApiAuthTokenManager,
+    request: (requestHeaders: any) =>
+      sellerSquidGraphQlClient.request(
+        UPDATE_PENDING_ORDER,
+        {
+          id: domain,
+          interrupted,
+        },
+        requestHeaders,
+      ),
+  })
 }
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
index cc104b1df..591507e01 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersHooks.ts
@@ -1,26 +1,17 @@
-import { EntityId } from '@reduxjs/toolkit'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { useActions } from 'src/rtk/app/helpers'
 import { useFetch } from 'src/rtk/app/hooksCommon'
 import { useAppSelector } from 'src/rtk/app/store'
 import {
-  RemovePendingOrderProps,
   fetchPendingOrdersByAccount,
-  fetchPendingOrdersByIds,
   fetchPendingOrdersBySigner,
   removePendingOrder,
+  RemovePendingOrderProps,
   selectPendingOrdersByAccount,
   selectPendingOrdersById,
   selectPendingOrdersByIds,
 } from './pendingOrdersSlice'
 
-// TODO: check this case
-export const useFetchDomainPendingOrdersByIds = (domains: string[]) => {
-  const ids = domains as EntityId[]
-
-  useFetch(fetchPendingOrdersByIds, { ids })
-}
-
 export const useFetchDomainPendingOrdersByAccount = (address?: string) => {
   const myAddress = useMyAddress()
 
@@ -38,19 +29,22 @@ export const useSelectPendingOrdersByIds = (ids: string[]) => {
 
 export const useSelectPendingOrders = () => {
   const myAddress = useMyAddress()
-  
-  const ordersByAccount = useAppSelector(state => selectPendingOrdersByAccount(state, 'createdByAccount', myAddress))
-  const ordersBySigner = useAppSelector(state => selectPendingOrdersByAccount(state, 'signer', myAddress))
+
+  const ordersByAccount = useAppSelector(state =>
+    selectPendingOrdersByAccount(state, 'createdByAccount', myAddress),
+  )
+  const ordersBySigner = useAppSelector(state =>
+    selectPendingOrdersByAccount(state, 'signer', myAddress),
+  )
 
   const ordersSet = new Set([...ordersByAccount, ...ordersBySigner])
 
   return Array.from(ordersSet)
 }
 
-
 export const useCreateReloadPendingOrders = () => {
   return useActions<string | undefined>(({ dispatch, args }) => {
-    if(args) {
+    if (args) {
       dispatch(fetchPendingOrdersByAccount({ id: args, reload: true }))
       dispatch(fetchPendingOrdersBySigner({ id: args, reload: true }))
     }
diff --git a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
index 6a9b6d19e..496468915 100644
--- a/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
+++ b/src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts
@@ -8,15 +8,19 @@ import {
   PayloadAction,
 } from '@reduxjs/toolkit'
 import registry from '@subsocial/api/utils/registry'
-import { isDef, toSubsocialAddress } from '@subsocial/utils'
-import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
-import { PENDING_ORDERS_BY_ACCOUNT, PENDING_ORDERS_BY_IDS, PENDING_ORDERS_BY_SIGNER } from 'src/components/domains/dot-seller/seller-queries'
+import { isDef } from '@subsocial/utils'
+import {
+  PENDING_ORDERS_BY_ACCOUNT,
+  PENDING_ORDERS_BY_IDS,
+  PENDING_ORDERS_BY_SIGNER,
+} from 'src/components/domains/dot-seller/seller-queries'
 import { ThunkApiConfig } from 'src/rtk/app/helpers'
 import { RootState } from 'src/rtk/app/rootReducer'
 import {
   FetchOneWithoutApi,
   fetchPendingOrderByAccount,
   FetchResult,
+  getOrders,
   OrdersCommonFetchProps,
   upsertAndRemoveEntities,
 } from './utils'
@@ -101,30 +105,12 @@ export const fetchPendingOrdersByIds = createAsyncThunk<
     }
   }
 
-  const result: any = await sellerSquidGraphQlClient.request(PENDING_ORDERS_BY_IDS, { ids })
-
-  const orders = result.getPendingOrdersByIds.orders as PendingDomainEntity[]
-
-  const parsedOrders = orders.map(order => {
-    const { signer, target, createdByAccount } = order
-
-    return {
-      ...order,
-      target: toSubsocialAddress(target) || '',
-      signer: toSubsocialAddress(signer) || '',
-      createdByAccount: toSubsocialAddress(createdByAccount) || '',
-    }
+  return getOrders({
+    query: PENDING_ORDERS_BY_IDS,
+    params: { ids },
+    knownDomainsPendingOrders,
+    resultField: 'getPendingOrdersByIds',
   })
-
-  const parsedOrdersIds = parsedOrders.map(order => order.id)
-  const knownOrdersIds = knownDomainsPendingOrders.map(order => order.id)
-
-  const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
-
-  return {
-    idsToRemove,
-    orders: parsedOrders,
-  }
 })
 
 export const fetchPendingOrdersBySigner = createAsyncThunk<
diff --git a/src/rtk/features/domainPendingOrders/utils.ts b/src/rtk/features/domainPendingOrders/utils.ts
index f7850424e..d894bcc98 100644
--- a/src/rtk/features/domainPendingOrders/utils.ts
+++ b/src/rtk/features/domainPendingOrders/utils.ts
@@ -1,9 +1,13 @@
-import { RootState } from 'src/rtk/app/rootReducer'
-import { PendingDomainEntity, ordersAdapter, selectPendingOrdersByAccount } from './pendingOrdersSlice'
-import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
-import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
 import { EntityId } from '@reduxjs/toolkit'
+import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
 import { DocumentNode } from 'graphql'
+import { sellerSquidGraphQlClient } from 'src/components/domains/dot-seller/config'
+import { RootState } from 'src/rtk/app/rootReducer'
+import {
+  ordersAdapter,
+  PendingDomainEntity,
+  selectPendingOrdersByAccount,
+} from './pendingOrdersSlice'
 
 export type MaybeEntity = PendingDomainEntity | undefined
 
@@ -20,6 +24,45 @@ export type FetchOneWithoutApi = OrdersCommonFetchProps & {
   id?: EntityId
 }
 
+type GetOrdersProps = {
+  query: DocumentNode
+  params: any
+  resultField: string
+  knownDomainsPendingOrders: PendingDomainEntity[]
+}
+
+export const getOrders = async ({
+  query,
+  params,
+  knownDomainsPendingOrders,
+  resultField,
+}: GetOrdersProps) => {
+  const result: any = await sellerSquidGraphQlClient.request(query, params)
+
+  const orders = result[resultField].orders as PendingDomainEntity[]
+
+  const parsedOrders = orders.map(order => {
+    const { signer, target, createdByAccount } = order
+
+    return {
+      ...order,
+      target: toSubsocialAddress(target) || '',
+      signer: toSubsocialAddress(signer) || '',
+      createdByAccount: toSubsocialAddress(createdByAccount) || '',
+    }
+  })
+
+  const parsedOrdersIds = parsedOrders.map(order => order.id)
+  const knownOrdersIds = knownDomainsPendingOrders.map(order => order.id)
+
+  const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
+
+  return {
+    idsToRemove,
+    orders: parsedOrders,
+  }
+}
+
 type FetchOrdersByAccountProps = FetchOneWithoutApi & {
   state: RootState
   query: DocumentNode
@@ -48,32 +91,14 @@ export const fetchPendingOrderByAccount = async ({
     }
   }
 
-  const result: any = await sellerSquidGraphQlClient.request(query, {
-    [`${selectField}`]: account,
-  })
-
-  const orders = result[resultField].orders as PendingDomainEntity[]
-
-  const parsedOrders = orders.map(order => {
-    const { signer, target, createdByAccount } = order
-
-    return {
-      ...order,
-      target: toSubsocialAddress(target) || '',
-      signer: toSubsocialAddress(signer) || '',
-      createdByAccount: toSubsocialAddress(createdByAccount) || '',
-    }
+  return getOrders({
+    query,
+    params: {
+      [`${selectField}`]: account,
+    },
+    knownDomainsPendingOrders,
+    resultField,
   })
-
-  const parsedOrdersIds = parsedOrders.map(order => order.id)
-  const knownOrdersIds = knownDomainsPendingOrders.map(order => order.id)
-
-  const idsToRemove: string[] = knownOrdersIds.filter(knownId => !parsedOrdersIds.includes(knownId))
-
-  return {
-    idsToRemove,
-    orders: parsedOrders,
-  }
 }
 
 type UpsertAndRemoveEntitiesProps = {
@@ -91,4 +116,4 @@ export const upsertAndRemoveEntities = ({ payload, state }: UpsertAndRemoveEntit
   }
 
   ordersAdapter.upsertMany(state, orders.filter(isDef))
-}
\ No newline at end of file
+}
diff --git a/src/server/pendingOrders.ts b/src/server/pendingOrders.ts
new file mode 100644
index 000000000..f56460089
--- /dev/null
+++ b/src/server/pendingOrders.ts
@@ -0,0 +1,67 @@
+import { stringToU8a, u8aToHex } from '@polkadot/util'
+import {
+  decodeAddress,
+  mnemonicToMiniSecret,
+  naclBoxPairFromSecret,
+  naclSeal,
+} from '@polkadot/util-crypto'
+import dayjs from 'dayjs'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { NONCE } from 'src/components/domains/dot-seller/config'
+
+type RequestHeaders = {
+  Authorization: string
+  'Client-Id': string
+}
+
+type PendingOrdersWrapper = {
+  req: NextApiRequest
+  res: NextApiResponse
+  sellerApiAuthTokenManager: string
+  request: (requestHeaders: RequestHeaders) => Promise<any>
+}
+
+export const pendingOrdersWrapper = async ({
+  req,
+  res,
+  sellerApiAuthTokenManager,
+  request,
+}: PendingOrdersWrapper) => {
+  if (req.method !== 'POST') return res.status(404).end()
+
+  try {
+    const nonce = new Uint8Array(24)
+    nonce[0] = NONCE
+
+    const tokenMessage = dayjs.utc().valueOf().toString()
+
+    const requesterKeypair = naclBoxPairFromSecret(
+      mnemonicToMiniSecret(process.env.SELLER_CLIENT_TOKEN_SIGNER || ''),
+    )
+
+    const clientId = process.env.SELLER_CLIENT_ID as string
+
+    const signedToken = naclSeal(
+      stringToU8a(tokenMessage),
+      requesterKeypair.secretKey,
+      decodeAddress(sellerApiAuthTokenManager),
+      nonce,
+    )
+
+    const requestHeaders = {
+      Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
+      'Client-Id': clientId,
+    }
+
+    const result = await request(requestHeaders)
+
+    res.status(200).send({ success: true })
+    return result
+  } catch (e: any) {
+    res.status(200).send({
+      success: false,
+      errors: e.response.errors?.[0].message,
+    })
+    return undefined
+  }
+}

From 09a489cf480436a46c2d251711ed9c7b0b974bdb Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Sep 2023 17:36:26 +0300
Subject: [PATCH 38/54] Fix prices in pending orders

---
 .github/workflows/feature-based.yaml          |  4 ++-
 docker/Dockerfile                             | 12 ++++++--
 src/components/domains/BuyDomainButtons.tsx   | 24 +--------------
 .../domains/EligibleDomainsSection.tsx        |  3 +-
 .../domains/pendingOrders/index.tsx           |  4 ++-
 .../RegisterDomainModal.tsx                   | 17 +++--------
 src/components/domains/utils.tsx              | 29 +++++++++++++++++--
 7 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
index ddf9570f4..ea8c2511f 100644
--- a/.github/workflows/feature-based.yaml
+++ b/.github/workflows/feature-based.yaml
@@ -64,7 +64,9 @@ jobs:
             GH_HCAPTCHA_SITE_KEY=3beeddac-2dce-41cc-8e18-338118426c38
             GH_AMP_ID=71bf5a46800fedba5e9a01243b988164
             GH_OFFCHAIN_SIGNER_URL=https://signer.subsocial.network
-            GH_CONNECTION_KIND=dev
+            GH_CONNECTION_KIND=staging
+            GH_SELLER_CLIENT_ID=${{ secrets.SELLER_CLIENT_ID }}
+            GH_SELLER_TOKEN_SIGNER=${{ secrets.SELLER_TOKEN_SIGNER }}
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 4e3e6a0e8..f4a2f83a1 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -12,6 +12,8 @@ ARG GH_APP_BASE_URL
 ARG GH_HCAPTCHA_SITE_KEY
 ARG GH_AMP_ID
 ARG GH_OFFCHAIN_SIGNER_URL
+ARG GH_SELLER_CLIENT_ID
+ARG GH_SELLER_TOKEN_SIGNER
 
 ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
@@ -24,7 +26,9 @@ ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     HCAPTCHA_SITE_KEY=${GH_HCAPTCHA_SITE_KEY} \
     AMP_ID=${GH_AMP_ID} \
     OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
-    CONNECTION_KIND=${GH_CONNECTION_KIND}
+    CONNECTION_KIND=${GH_CONNECTION_KIND} \
+    SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
+    SELLER_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
 
 COPY package.json yarn.lock* ./
 RUN yarn install --no-optional
@@ -54,6 +58,8 @@ ARG GH_APP_BASE_URL
 ARG GH_HCAPTCHA_SITE_KEY
 ARG GH_AMP_ID
 ARG GH_OFFCHAIN_SIGNER_URL
+ARG GH_SELLER_CLIENT_ID
+ARG GH_SELLER_TOKEN_SIGNER
 
 ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
@@ -65,7 +71,9 @@ ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
     APP_BASE_URL=${GH_APP_BASE_URL} \
     AMP_ID=${GH_AMP_ID} \
     OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
-    CONNECTION_KIND=${GH_CONNECTION_KIND}
+    CONNECTION_KIND=${GH_CONNECTION_KIND} \
+    SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
+    SELLER_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
 
 WORKDIR /opt/subsocial/app
 
diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
index 8da301030..726bba279 100644
--- a/src/components/domains/BuyDomainButtons.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -1,14 +1,12 @@
 import { randomAsNumber } from '@polkadot/util-crypto'
 import {
   newLogger,
-  parseDomain,
   SocialRemark,
   SocialRemarkDestChainsNameId,
   SocialRemarkMessageVersion,
   SubSclSource,
 } from '@subsocial/utils'
 import BN from 'bignumber.js'
-import { useEffect, useState } from 'react'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import LazyTxButton from 'src/components/donate/LazyTxButton'
@@ -19,7 +17,6 @@ import {
   updatePendingOrder,
 } from 'src/components/utils/OffchainUtils'
 import TxButton from 'src/components/utils/TxButton'
-import { getOrInitSubsocialRpc } from 'src/rpc/initSubsocialRpc'
 import { useAppDispatch } from 'src/rtk/app/store'
 import {
   useCreateReloadPendingOrders,
@@ -37,7 +34,7 @@ import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import { BLOCKS_IN_YEAR } from './utils'
 
-const log = newLogger('DD')
+export const log = newLogger('DD')
 
 type BuyByDotTxButtonProps = {
   domainName: string
@@ -46,25 +43,6 @@ type BuyByDotTxButtonProps = {
   close: () => void
 }
 
-export const useGetDomainPrice = (domain: string) => {
-  const [price, setPrice] = useState()
-
-  useEffect(() => {
-    const getPrice = async () => {
-      const subsocialRpc = getOrInitSubsocialRpc()
-
-      const { domain: domainPart } = parseDomain(domain)
-      const price = await subsocialRpc.calculatePrice(domainPart)
-
-      setPrice(price)
-    }
-
-    getPrice().catch(err => log.error('Failed to get domain price', err))
-  }, [domain])
-
-  return price
-}
-
 export const BuyByDotTxButton = ({
   domainName,
   className,
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 71e7dbcbe..58370df60 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -11,11 +11,10 @@ import { useFetchDomains, useIsReservedWord } from '../../rtk/features/domains/d
 import { useIsMyAddress, useMyAccountsContext, useMyAddress } from '../auth/MyAccountsContext'
 import { Loading, LocalIcon } from '../utils'
 import { MutedDiv, MutedSpan } from '../utils/MutedText'
-import { useGetDomainPrice } from './BuyDomainButtons'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
 import RegisterDomainButton from './registerDomainModal/RegisterDomainModal'
-import { DomainDetails, getTime, ResultContainer } from './utils'
+import { DomainDetails, getTime, ResultContainer, useGetDomainPrice } from './utils'
 
 type DomainItemProps = {
   domain: string
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 8e6894111..37c418604 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -15,7 +15,7 @@ import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfi
 import { MutedDiv } from '../../utils/MutedText'
 import { DomainSellerKind, useManageDomainContext } from '../manage/ManageDomainProvider'
 import RegisterDomainButton from '../registerDomainModal/RegisterDomainModal'
-import { getTime } from '../utils'
+import { getTime, useGetDomainPrice } from '../utils'
 import styles from './Index.module.sass'
 
 type PendingDomainProps = {
@@ -29,6 +29,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
   const reloadPendingOrders = useCreateReloadPendingOrders()
   const myAddress = useMyAddress()
+  const domainPrice = useGetDomainPrice(pendingDomain.id)
 
   const { processingDomains } = useManageDomainContext()
 
@@ -57,6 +58,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
       label={'Continue'}
       withPrice={false}
       domainSellerKind={destination as DomainSellerKind}
+      domainPrice={domainPrice}
     />
   )
 
diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index d332d8362..6deb1be66 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -1,7 +1,6 @@
 import { Button, Modal, Space, Tag } from 'antd'
-import BN from 'bignumber.js'
 import clsx from 'clsx'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
@@ -12,6 +11,7 @@ import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
 import { BuyByDotTxButton, BuyDomainSection } from '../BuyDomainButtons'
 import { DomainSellerKind, useManageDomainContext } from '../manage/ManageDomainProvider'
+import { useGetPrice } from '../utils'
 import styles from './Index.module.sass'
 
 type ModalBodyProps = {
@@ -175,8 +175,9 @@ const RegisterDomainButton = ({
   domainPrice,
 }: BuyByDotButtonProps) => {
   const sellerConfig = useSelectSellerConfig()
-  const { domainRegistrationPriceFactor, sellerChain } = sellerConfig || {}
+  const { sellerChain } = sellerConfig || {}
   const { processingDomains } = useManageDomainContext()
+  const price = useGetPrice(domainSellerKind, domainPrice)
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
@@ -185,16 +186,6 @@ const RegisterDomainButton = ({
 
   const isSub = domainSellerKind === 'SUB'
 
-  const price = useMemo(() => {
-    if (isSub) {
-      return domainPrice
-    } else {
-      if (!domainRegistrationPriceFactor || !domainPrice) return '0'
-
-      return new BN(domainPrice).multipliedBy(new BN(domainRegistrationPriceFactor)).toString()
-    }
-  }, [isSub, domainPrice, domainRegistrationPriceFactor])
-
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
   const isProcessingDomain = processingDomains[domainName]
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index bd38a97a4..e6bd1cc7d 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -5,12 +5,13 @@ import BN from 'bignumber.js'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { FC, HTMLProps, useMemo } from 'react'
+import { FC, HTMLProps, useEffect, useMemo, useState } from 'react'
 import {
   CardWithTitle as InnerCardWithTitle,
   CardWithTitleProps,
 } from 'src/components/utils/cards/WithTitle'
 import config from 'src/config'
+import { getOrInitSubsocialRpc } from 'src/rpc/initSubsocialRpc'
 import { useCreateRemovePendingOrders } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useCreateUpsertDomains } from 'src/rtk/features/domains/domainHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
@@ -19,6 +20,7 @@ import { useMyAddress } from '../auth/MyAccountsContext'
 import { slugifyHandle } from '../urls/helpers'
 import { useAddClassNameToRootElement } from '../utils'
 import { controlledMessage } from '../utils/Message'
+import { log } from './BuyDomainButtons'
 import styles from './index.module.sass'
 import { DomainSellerKind, useManageDomainContext } from './manage/ManageDomainProvider'
 
@@ -174,17 +176,38 @@ export const useFetchNewDomains = (domainName?: string) => {
   )
 }
 
-export const useGetPrice = (domainPrice: string, domainSellerKind: DomainSellerKind) => {
+export const useGetDomainPrice = (domain: string) => {
+  const [price, setPrice] = useState()
+
+  useEffect(() => {
+    const getPrice = async () => {
+      const subsocialRpc = getOrInitSubsocialRpc()
+
+      const { domain: domainPart } = parseDomain(domain)
+      const price = await subsocialRpc.calculatePrice(domainPart)
+
+      setPrice(price)
+    }
+
+    getPrice().catch(err => log.error('Failed to get domain price', err))
+  }, [domain])
+
+  return price
+}
+
+export const useGetPrice = (domainSellerKind: DomainSellerKind, domainPrice?: string) => {
   const sellerConfig = useSelectSellerConfig()
   const { domainRegistrationPriceFactor } = sellerConfig || {}
 
   const isSub = domainSellerKind === 'SUB'
 
   const price = useMemo(() => {
+    if (!domainPrice) return '0'
+
     if (isSub) {
       return domainPrice
     } else {
-      if (!domainRegistrationPriceFactor || !domainPrice) return '0'
+      if (!domainRegistrationPriceFactor) return '0'
       return new BN(domainPrice).multipliedBy(new BN(domainRegistrationPriceFactor)).toString()
     }
   }, [isSub, domainPrice, domainRegistrationPriceFactor])

From 99b44f8252e0d27d809f119cef99f06565f03c7a Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Sep 2023 17:42:00 +0300
Subject: [PATCH 39/54] Remove export env command

---
 docker/Dockerfile | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docker/Dockerfile b/docker/Dockerfile
index f4a2f83a1..928892958 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -39,9 +39,7 @@ COPY . .
 RUN yarn
 
 COPY ci.env .env
-RUN yarn export-env \
-    && NODE_ENV=production yarn build  \
-    && yarn export-env \
+RUN NODE_ENV=production yarn build  \
     && yarn patch
 
 FROM gcr.io/distroless/nodejs:16 AS runner

From c2f685e201657010f85b1a8f3d6620f8437fd06c Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Sep 2023 17:53:26 +0300
Subject: [PATCH 40/54] Fix docker file

---
 .github/workflows/feature-based.yaml | 4 ++--
 docker/Dockerfile                    | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
index ea8c2511f..4dd76304c 100644
--- a/.github/workflows/feature-based.yaml
+++ b/.github/workflows/feature-based.yaml
@@ -65,8 +65,8 @@ jobs:
             GH_AMP_ID=71bf5a46800fedba5e9a01243b988164
             GH_OFFCHAIN_SIGNER_URL=https://signer.subsocial.network
             GH_CONNECTION_KIND=staging
-            GH_SELLER_CLIENT_ID=${{ secrets.SELLER_CLIENT_ID }}
-            GH_SELLER_TOKEN_SIGNER=${{ secrets.SELLER_TOKEN_SIGNER }}
+            GH_SELLER_CLIENT_ID=5DYm3Wk4aa1BbfhH1ajmY6MNEELXoicmKRnP4tzHYjSKnD9K
+            GH_SELLER_TOKEN_SIGNER=retire strong pole intact cool music high path salt praise stadium spatial
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 928892958..434890499 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -39,8 +39,7 @@ COPY . .
 RUN yarn
 
 COPY ci.env .env
-RUN NODE_ENV=production yarn build  \
-    && yarn patch
+RUN NODE_ENV=production yarn build
 
 FROM gcr.io/distroless/nodejs:16 AS runner
 

From 8061613ff9e2036f59d9eea1128d8f076a6cf7d7 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 15 Sep 2023 12:09:11 +0300
Subject: [PATCH 41/54] Change envs in docker file

---
 docker/Dockerfile | 46 +++++++++++++---------------------------------
 1 file changed, 13 insertions(+), 33 deletions(-)

diff --git a/docker/Dockerfile b/docker/Dockerfile
index 434890499..230b241cc 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,10 +1,5 @@
 FROM dappforce/subsocial-base-polkaverse as builder
 
-ARG GH_SUBSTRATE_URL
-ARG GH_SUBSTRATE_RPC_URL
-ARG GH_OFFCHAIN_URL
-ARG GH_OFFCHAIN_WS
-ARG GH_IPFS_NODE_URL
 ARG GH_GA_ID
 ARG GH_CONNECTION_KIND
 ARG GH_APP_KIND
@@ -15,18 +10,13 @@ ARG GH_OFFCHAIN_SIGNER_URL
 ARG GH_SELLER_CLIENT_ID
 ARG GH_SELLER_TOKEN_SIGNER
 
-ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
-    SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
-    OFFCHAIN_URL=${GH_OFFCHAIN_URL} \
-    OFFCHAIN_WS=${GH_OFFCHAIN_WS} \
-    IPFS_NODE_URL=${GH_IPFS_NODE_URL} \
-    GA_ID=${GH_GA_ID} \
-    APP_KIND=${GH_APP_KIND} \
-    APP_BASE_URL=${GH_APP_BASE_URL} \
-    HCAPTCHA_SITE_KEY=${GH_HCAPTCHA_SITE_KEY} \
-    AMP_ID=${GH_AMP_ID} \
-    OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
-    CONNECTION_KIND=${GH_CONNECTION_KIND} \
+ENV NEXT_PUBLIC_GA_ID=${GH_GA_ID} \
+    NEXT_PUBLIC_APP_KIND=${GH_APP_KIND} \
+    NEXT_PUBLIC_APP_BASE_URL=${GH_APP_BASE_URL} \
+    NEXT_PUBLIC_HCAPTCHA_SITE_KEY=${GH_HCAPTCHA_SITE_KEY} \
+    NEXT_PUBLIC_AMP_ID=${GH_AMP_ID} \
+    NEXT_PUBLIC_OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
+    NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND} \
     SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
     SELLER_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
 
@@ -43,11 +33,6 @@ RUN NODE_ENV=production yarn build
 
 FROM gcr.io/distroless/nodejs:16 AS runner
 
-ARG GH_SUBSTRATE_URL
-ARG GH_SUBSTRATE_RPC_URL
-ARG GH_OFFCHAIN_URL
-ARG GH_OFFCHAIN_WS
-ARG GH_IPFS_NODE_URL
 ARG GH_GA_ID
 ARG GH_CONNECTION_KIND
 ARG GH_APP_KIND
@@ -58,17 +43,12 @@ ARG GH_OFFCHAIN_SIGNER_URL
 ARG GH_SELLER_CLIENT_ID
 ARG GH_SELLER_TOKEN_SIGNER
 
-ENV SUBSTRATE_URL=${GH_SUBSTRATE_URL} \
-    SUBSTRATE_RPC_URL=${GH_SUBSTRATE_RPC_URL} \
-    OFFCHAIN_URL=${GH_OFFCHAIN_URL} \
-    OFFCHAIN_WS=${GH_OFFCHAIN_WS} \
-    IPFS_NODE_URL=${GH_IPFS_NODE_URL} \
-    GA_ID=${GH_GA_ID}  \
-    APP_KIND=${GH_APP_KIND} \
-    APP_BASE_URL=${GH_APP_BASE_URL} \
-    AMP_ID=${GH_AMP_ID} \
-    OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
-    CONNECTION_KIND=${GH_CONNECTION_KIND} \
+ENV NEXT_PUBLIC_GA_ID=${GH_GA_ID}  \
+    NEXT_PUBLIC_APP_KIND=${GH_APP_KIND} \
+    NEXT_PUBLIC_APP_BASE_URL=${GH_APP_BASE_URL} \
+    NEXT_PUBLIC_AMP_ID=${GH_AMP_ID} \
+    NEXT_PUBLIC_OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
+    NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND} \
     SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
     SELLER_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
 

From 5f22ce2b00b185f9f114694163634502c9d961f2 Mon Sep 17 00:00:00 2001
From: Mell <oleh.melnechyk@gmail.com>
Date: Fri, 15 Sep 2023 13:49:28 +0300
Subject: [PATCH 42/54] Change ci.env file

---
 ci.env | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/ci.env b/ci.env
index 39c4ecdfd..49f8fa9d0 100644
--- a/ci.env
+++ b/ci.env
@@ -1,14 +1,11 @@
-LOG_LEVEL=info
-APP_KIND=subsocial
-CONNECTION_KIND='$GH_CONNECTION_KIND'
-SUBSTRATE_URL='$GH_SUBSTRATE_URL' 
-SUBSTRATE_RPC_URL='$GH_SUBSTRATE_RPC_URL' 
-OFFCHAIN_URL='$GH_OFFCHAIN_URL' 
-OFFCHAIN_WS='$GH_OFFCHAIN_WS' 
-IPFS_NODE_URL='$GH_IPFS_NODE_URL'
-GA_ID='$GH_GA_ID'
-APP_KIND='$GH_APP_KIND'
-APP_BASE_URL='$GH_APP_BASE_URL'
-HCAPTCHA_SITE_KEY='$GH_HCAPTCHA_SITE_KEY'
-OFFCHAIN_SIGNER_URL='$GH_OFFCHAIN_SIGNER_URL'
-AMP_ID='$GH_AMP_ID'
+NEXT_PUBLIC_LOG_LEVEL=info
+NEXT_PUBLIC_APP_KIND=subsocial
+NEXT_PUBLIC_CONNECTION_KIND='$GH_CONNECTION_KIND'
+NEXT_PUBLIC_GA_ID='$GH_GA_ID'
+NEXT_PUBLIC_APP_KIND='$GH_APP_KIND'
+NEXT_PUBLIC_APP_BASE_URL='$GH_APP_BASE_URL'
+NEXT_PUBLIC_HCAPTCHA_SITE_KEY='$GH_HCAPTCHA_SITE_KEY'
+NEXT_PUBLIC_OFFCHAIN_SIGNER_URL='$GH_OFFCHAIN_SIGNER_URL'
+NEXT_PUBLIC_AMP_ID='$GH_AMP_ID'
+SELLER_CLIENT_ID='$GH_SELLER_CLIENT_ID'
+SELLER_TOKEN_SIGNER='$GH_SELLER_TOKEN_SIGNER'

From e1f4c72586490a48ff3a0f109ac7ec4bca2921c7 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 15 Sep 2023 17:16:00 +0300
Subject: [PATCH 43/54] Change subId api url

---
 src/config/connections/staging.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/connections/staging.ts b/src/config/connections/staging.ts
index 4296e285e..a7be19604 100644
--- a/src/config/connections/staging.ts
+++ b/src/config/connections/staging.ts
@@ -14,7 +14,7 @@ const stagingConfig: SubsocialConfig = {
   dagHttpMethod: 'get',
   useOffchainForIpfs: false,
 
-  subIdApiUrl: 'http://localhost:3001/api/v1',
+  subIdApiUrl: 'https://rococo-subid.subsocial.network/api/v1',
   subsocialParaId: 2100,
 }
 

From 1780d5762977e95124ff60143b3471b8db608954 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Sep 2023 12:06:19 +0300
Subject: [PATCH 44/54] Change sub.id api url for staging config

---
 src/config/connections/staging.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/connections/staging.ts b/src/config/connections/staging.ts
index a7be19604..04661296d 100644
--- a/src/config/connections/staging.ts
+++ b/src/config/connections/staging.ts
@@ -14,7 +14,7 @@ const stagingConfig: SubsocialConfig = {
   dagHttpMethod: 'get',
   useOffchainForIpfs: false,
 
-  subIdApiUrl: 'https://rococo-subid.subsocial.network/api/v1',
+  subIdApiUrl: 'https://rococo-chain-subid.subsocial.network/api/v1',
   subsocialParaId: 2100,
 }
 

From 1c892f3ce45eb91b9742250d2da65ad2efd1619e Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Sep 2023 12:23:44 +0300
Subject: [PATCH 45/54] add console.log

---
 src/server/pendingOrders.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/server/pendingOrders.ts b/src/server/pendingOrders.ts
index f56460089..5961c24b4 100644
--- a/src/server/pendingOrders.ts
+++ b/src/server/pendingOrders.ts
@@ -48,6 +48,8 @@ export const pendingOrdersWrapper = async ({
       nonce,
     )
 
+    console.log(clientId, process.env.SELLER_CLIENT_TOKEN_SIGNER)
+
     const requestHeaders = {
       Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
       'Client-Id': clientId,
@@ -60,7 +62,7 @@ export const pendingOrdersWrapper = async ({
   } catch (e: any) {
     res.status(200).send({
       success: false,
-      errors: e.response.errors?.[0].message,
+      errors: e.response?.errors?.[0].message,
     })
     return undefined
   }

From 5a61934fec65d37e8e67af4c6422119d9fbcb7d4 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Sep 2023 12:39:12 +0300
Subject: [PATCH 46/54] Change data in console.log

---
 src/server/pendingOrders.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/server/pendingOrders.ts b/src/server/pendingOrders.ts
index 5961c24b4..a46b38de4 100644
--- a/src/server/pendingOrders.ts
+++ b/src/server/pendingOrders.ts
@@ -30,6 +30,8 @@ export const pendingOrdersWrapper = async ({
   if (req.method !== 'POST') return res.status(404).end()
 
   try {
+    console.log(process.env.SELLER_CLIENT_ID as string, process.env.SELLER_CLIENT_TOKEN_SIGNER)
+
     const nonce = new Uint8Array(24)
     nonce[0] = NONCE
 
@@ -48,8 +50,6 @@ export const pendingOrdersWrapper = async ({
       nonce,
     )
 
-    console.log(clientId, process.env.SELLER_CLIENT_TOKEN_SIGNER)
-
     const requestHeaders = {
       Authorization: 'Bearer ' + u8aToHex(signedToken.sealed),
       'Client-Id': clientId,

From bb149bae4e9f87cb4530d0edd0a62aabee0e888f Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Sep 2023 12:53:09 +0300
Subject: [PATCH 47/54] Update SELLER_CLIENT_TOKEN_SIGNER env

---
 ci.env                      | 2 +-
 docker/Dockerfile           | 4 ++--
 src/server/pendingOrders.ts | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/ci.env b/ci.env
index 49f8fa9d0..63260b409 100644
--- a/ci.env
+++ b/ci.env
@@ -8,4 +8,4 @@ NEXT_PUBLIC_HCAPTCHA_SITE_KEY='$GH_HCAPTCHA_SITE_KEY'
 NEXT_PUBLIC_OFFCHAIN_SIGNER_URL='$GH_OFFCHAIN_SIGNER_URL'
 NEXT_PUBLIC_AMP_ID='$GH_AMP_ID'
 SELLER_CLIENT_ID='$GH_SELLER_CLIENT_ID'
-SELLER_TOKEN_SIGNER='$GH_SELLER_TOKEN_SIGNER'
+SELLER_CLIENT_TOKEN_SIGNER='$GH_SELLER_TOKEN_SIGNER'
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 230b241cc..d3bfe17ab 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -18,7 +18,7 @@ ENV NEXT_PUBLIC_GA_ID=${GH_GA_ID} \
     NEXT_PUBLIC_OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
     NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND} \
     SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
-    SELLER_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
+    SELLER_CLIENT_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
 
 COPY package.json yarn.lock* ./
 RUN yarn install --no-optional
@@ -50,7 +50,7 @@ ENV NEXT_PUBLIC_GA_ID=${GH_GA_ID}  \
     NEXT_PUBLIC_OFFCHAIN_SIGNER_URL=${GH_OFFCHAIN_SIGNER_URL} \
     NEXT_PUBLIC_CONNECTION_KIND=${GH_CONNECTION_KIND} \
     SELLER_CLIENT_ID=${GH_SELLER_CLIENT_ID} \
-    SELLER_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
+    SELLER_CLIENT_TOKEN_SIGNER=${GH_SELLER_TOKEN_SIGNER}
 
 WORKDIR /opt/subsocial/app
 
diff --git a/src/server/pendingOrders.ts b/src/server/pendingOrders.ts
index a46b38de4..dd7bf2c7f 100644
--- a/src/server/pendingOrders.ts
+++ b/src/server/pendingOrders.ts
@@ -30,8 +30,6 @@ export const pendingOrdersWrapper = async ({
   if (req.method !== 'POST') return res.status(404).end()
 
   try {
-    console.log(process.env.SELLER_CLIENT_ID as string, process.env.SELLER_CLIENT_TOKEN_SIGNER)
-
     const nonce = new Uint8Array(24)
     nonce[0] = NONCE
 

From bf7ae6aec21412c296e7a5aed733d59cda3d9c6b Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 19 Sep 2023 08:52:22 +0300
Subject: [PATCH 48/54] Remove error message with null

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

diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
index 726bba279..49819981d 100644
--- a/src/components/domains/BuyDomainButtons.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -240,7 +240,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
     const jsonErr = JSON.stringify(errorInfo)
     log.error('Failed:', jsonErr)
 
-    showErrorMessage(jsonErr)
+    errorInfo && showErrorMessage(jsonErr)
     setProcessingDomains({ [domainName]: false })
   }
 

From 5dda5c705ac8ae14fbff5b70255e91178f042aef Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 19 Sep 2023 09:02:56 +0300
Subject: [PATCH 49/54] Fix balance in select address preview

---
 .../profiles/address-views/AuthorPreview.tsx       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/profiles/address-views/AuthorPreview.tsx b/src/components/profiles/address-views/AuthorPreview.tsx
index 8b60e58c1..2fe9110cd 100644
--- a/src/components/profiles/address-views/AuthorPreview.tsx
+++ b/src/components/profiles/address-views/AuthorPreview.tsx
@@ -3,7 +3,7 @@ import { Popover } from 'antd'
 import BN from 'bn.js'
 import React from 'react'
 import { ProfileData } from 'src/types'
-import { BalanceByNetwork } from '../../common/balances/Balance'
+import { BalanceByNetwork, NativeBalance } from '../../common/balances/Balance'
 import AuthorSpaceAvatar from './AuthorSpaceAvatar'
 import Name from './Name'
 import { ProfilePreviewPopup } from './ProfilePreview'
@@ -18,11 +18,19 @@ export type InfoProps = {
 }
 
 export const InfoDetails: React.FC<InfoProps> = ({ details, balance, address, network }) => {
+  const accountBalance =
+    (address &&
+      (network ? (
+        <BalanceByNetwork address={address} network={network} />
+      ) : (
+        <NativeBalance address={address.toString()} />
+      ))) ||
+    null
+
   return (
     <>
       <div className='Df--AddressComponents-details'>
-        {balance ||
-          (address && <BalanceByNetwork address={address.toString()} network={network} />)}
+        {balance || accountBalance}
         {details && <div>{details}</div>}
       </div>
     </>

From d244d9c839b9e3077acb1ac2b85e2eb7858acdac Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Sep 2023 14:53:17 +0300
Subject: [PATCH 50/54] Disable register button when not enough tokens

---
 src/components/domains/BuyDomainButtons.tsx   | 65 ++++++++++++-------
 src/components/domains/index.module.sass      | 10 ++-
 .../RegisterDomainModal.tsx                   |  2 +-
 yarn.lock                                     | 35 +++-------
 4 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
index 49819981d..b21327264 100644
--- a/src/components/domains/BuyDomainButtons.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -25,10 +25,12 @@ import {
 import { fetchPendingOrdersByAccount } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useCreateReloadMyDomains } from 'src/rtk/features/domains/domainHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
+import { useCreateBalance } from '../common/balances'
 import { useSubstrate } from '../substrate'
 import { TxCallback } from '../substrate/SubstrateTxButton'
 import { showErrorMessage } from '../utils/Message'
 import { useGetDecimalAndSymbol } from '../utils/useGetDecimalsAndSymbol'
+import WarningPanel from '../utils/WarningPanel'
 import { pendingOrderAction } from './dot-seller/utils'
 import styles from './index.module.sass'
 import { useManageDomainContext } from './manage/ManageDomainProvider'
@@ -57,7 +59,7 @@ export const BuyByDotTxButton = ({
   const { getApiByNetwork } = useLazyConnectionsContext()
   const pendingOrder = useSelectPendingOrderById(domainName)
 
-  const { sellerChain, domainRegistrationPriceFixed } = sellerConfig || {}
+  const { sellerChain } = sellerConfig || {}
 
   const { symbol } = useGetDecimalAndSymbol(sellerChain)
 
@@ -167,38 +169,43 @@ export const BuyByDotTxButton = ({
     dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
   }
 
-  const disableButton =
-    !recipient ||
-    !freeBalance ||
-    !domainRegistrationPriceFixed ||
-    new BN(freeBalance).lt(domainRegistrationPriceFixed) ||
-    !price
+  const notEnoughTokens = freeBalance && price ? new BN(freeBalance).lt(price) : false
+
+  const disableButton = !recipient || !freeBalance || !price || notEnoughTokens
 
   return (
-    <LazyTxButton
-      block
-      type='primary'
-      size='middle'
-      network={sellerChain || ''}
-      accountId={purchaser}
-      disabled={disableButton}
-      tx={'utility.batchAll'}
-      params={getParams}
-      onSuccess={onSuccess}
-      onCancel={onCancel}
-      onClick={() => onClick()}
-      label={'Register'}
-      className={className}
-    />
+    <div className={styles.TxButtonSection}>
+      {notEnoughTokens && <WarningPanel desc={'You do not have enough tokens to buy a domain'} />}
+      <LazyTxButton
+        block
+        type='primary'
+        size='middle'
+        network={sellerChain || ''}
+        accountId={purchaser}
+        disabled={disableButton}
+        tx={'utility.batchAll'}
+        params={getParams}
+        onSuccess={onSuccess}
+        onCancel={onCancel}
+        onClick={() => onClick()}
+        label={'Register'}
+        className={className}
+      />
+    </div>
   )
 }
 
 type BuyDomainSectionProps = {
   domainName: string
   label?: string
+  price?: string
 }
 
-export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSectionProps) => {
+export const BuyDomainSection = ({
+  domainName,
+  label = 'Register',
+  price,
+}: BuyDomainSectionProps) => {
   const reloadMyDomains = useCreateReloadMyDomains()
   const { openManageModal, setProcessingDomains, recipient } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
@@ -208,6 +215,7 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
   const myAddress = useMyAddress()
   const pendingOrder = useSelectPendingOrderById(domainName)
   const dispatch = useAppDispatch()
+  const nativeBalance = useCreateBalance(purchaser)
 
   if (!isApiReady) return null
 
@@ -293,14 +301,21 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
     dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
   }
 
+  const notEnoughTokens =
+    nativeBalance && price ? new BN(nativeBalance.toString()).lt(price) : false
+
+  const disableButton = !recipient || !nativeBalance || !price || notEnoughTokens
+
   return (
-    <span className='d-flex align-items-center w-100'>
+    <div className={styles.TxButtonSection}>
+      {notEnoughTokens && <WarningPanel desc={'You do not have enough tokens to buy a domain'} />}
       <TxButton
         type='primary'
         customNodeApi={api}
         accountId={purchaser}
         block
         size='middle'
+        disabled={disableButton}
         label={label}
         tx={'domains.registerDomain'}
         onSuccess={onSuccess}
@@ -311,6 +326,6 @@ export const BuyDomainSection = ({ domainName, label = 'Register' }: BuyDomainSe
         params={getTxParams}
         className={styles.DomainPrimaryButton}
       />
-    </span>
+    </div>
   )
 }
diff --git a/src/components/domains/index.module.sass b/src/components/domains/index.module.sass
index e651de28f..b7c69f218 100644
--- a/src/components/domains/index.module.sass
+++ b/src/components/domains/index.module.sass
@@ -43,7 +43,6 @@ $font_size: 1.1rem
 .DomainPrimaryButton
   padding: 0 $space_normal
   font-size: $font_normal
-  margin-left: $space_tiny
 
 .DomainResults
   border-radius: $border_size
@@ -177,3 +176,12 @@ $font_size: 1.1rem
 
 .PendingTag
   background-color: transparent !important
+
+.TxButtonSection
+  width: 100%
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+  \:global .ant-alert-warning
+    border-radius: 10px !important
diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 6deb1be66..3fc6c64fd 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -139,7 +139,7 @@ const BuyDomainModal = ({
       {isByDot ? (
         <BuyByDotTxButton domainName={domainName} className={'ml-0'} close={close} price={price} />
       ) : (
-        <BuyDomainSection domainName={domainName} />
+        <BuyDomainSection domainName={domainName} price={price} />
       )}
     </div>
   )
diff --git a/yarn.lock b/yarn.lock
index 9599dab6c..486771efc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2106,14 +2106,6 @@
     "@babel/runtime" "^7.20.13"
     "@polkadot/x-global" "10.4.2"
 
-"@polkadot/x-bigint@11.1.1":
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-11.1.1.tgz#f23fb17b6d1267cb7f4fbad11a04b67ec26a14c6"
-  integrity sha512-iLaaPSCnVuZ7LoOWZTHgs+Ebws0MdoNHmXoTriU60YLoojDJbcOInlO+1h3fNy6oPnYN3qA3Ml1mKDnP837nxg==
-  dependencies:
-    "@polkadot/x-global" "11.1.1"
-    tslib "^2.5.0"
-
 "@polkadot/x-bigint@11.1.3", "@polkadot/x-bigint@^11.1.3":
   version "11.1.3"
   resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-11.1.3.tgz#37b09a12a9ed6df704e047e261f1b8b2ac978497"
@@ -2148,13 +2140,6 @@
   dependencies:
     "@babel/runtime" "^7.20.13"
 
-"@polkadot/x-global@11.1.1":
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-11.1.1.tgz#6862c6c679e94b0fc39dff3b6954bb508ff3d7a4"
-  integrity sha512-++LFUT98bi2m15w8LrgOcpE5mi9bmH65YB02xbKzU0ZHe1g5l0LwFt+QFB9tZlNqfWTgwpsFshGtvdPQqrFnKw==
-  dependencies:
-    tslib "^2.5.0"
-
 "@polkadot/x-global@11.1.3", "@polkadot/x-global@^11.1.3":
   version "11.1.3"
   resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-11.1.3.tgz#4086694f52373fea63910b62da999bf0981d7d86"
@@ -2186,12 +2171,12 @@
     "@babel/runtime" "^7.20.13"
     "@polkadot/x-global" "10.4.2"
 
-"@polkadot/x-textdecoder@11.1.1":
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-11.1.1.tgz#9596fe10981fa05f7629eaa198b11c8b191b1501"
-  integrity sha512-YoB82pr6kYkK5yg2BQgm5wVTf6Hq+01i+A6PgV1uXr7Rm3bxmQpGR2DKZq0QNjwWP0s6e91BxXvGoPjf7S9tBA==
+"@polkadot/x-textdecoder@11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-11.1.3.tgz#1d1e2aa86e47587393a6acb74a086ab97d62058d"
+  integrity sha512-NhOjuXVfYRMw9l0VhCtZOtcWefZth58p5KpVOrFyJZd12fTsoMO5/746K7QoAjWRrLQTJ/LHCEKCtWww0LwVPw==
   dependencies:
-    "@polkadot/x-global" "11.1.1"
+    "@polkadot/x-global" "11.1.3"
     tslib "^2.5.0"
 
 "@polkadot/x-textencoder@10.4.2":
@@ -2202,12 +2187,12 @@
     "@babel/runtime" "^7.20.13"
     "@polkadot/x-global" "10.4.2"
 
-"@polkadot/x-textencoder@11.1.1":
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-11.1.1.tgz#1c91e9aa568384595cbd7bd6ad50d71e4f92f2d0"
-  integrity sha512-I4IygnZeSyGUPyTmu7W2IsCHakax7QTVR9kMkCywaKEjiLzZU5B/LuDB0Gxn/3Jw2X2YfoB1TQ4mZ1bte4LX0g==
+"@polkadot/x-textencoder@11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-11.1.3.tgz#ba7621b636dcfa6ca4ab6176a6a52eef15904a72"
+  integrity sha512-7DmqjlPN8aQexLUKwoHeadihpUnW8hjpXEru+aEDxjgq9XIxPvb++NeBK+Mra9RzzZRuiT/K5z16HlwKN//ewg==
   dependencies:
-    "@polkadot/x-global" "11.1.1"
+    "@polkadot/x-global" "11.1.3"
     tslib "^2.5.0"
 
 "@polkadot/x-ws@^10.4.2":

From da9a0b501ba97e42f182759af2837fc52be0c703 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Sep 2023 15:19:38 +0300
Subject: [PATCH 51/54] Fix modal domain title line height

---
 src/components/domains/index.module.sass | 2 +-
 src/components/domains/index.tsx         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/domains/index.module.sass b/src/components/domains/index.module.sass
index b7c69f218..30e882e91 100644
--- a/src/components/domains/index.module.sass
+++ b/src/components/domains/index.module.sass
@@ -131,7 +131,7 @@ $font_size: 1.1rem
 .ModalDomainTitle
   margin-bottom: $space_huge
   font-size: $font_big
-  line-height: 28.64px
+  line-height: 34.64px
   font-weight: 600
 
 .MenuModalDomainTitle
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index 760ad1e9b..a09000279 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -45,6 +45,7 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
   }
 
   const [activeTab, setActiveTab] = useState(getTabKey('register'))
+
   useEffect(() => {
     const hash = window.location.hash.substring(1)
     if ((tabs as unknown as string[]).includes(hash)) setActiveTab(hash as TabKey)

From ab8ff6849fd1fd7387c2e10e4540a9b80acccb4c Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 20 Sep 2023 18:22:37 +0300
Subject: [PATCH 52/54] Fix fetch new domain after successful buy by dot

---
 src/components/domains/BuyDomainButtons.tsx   |  5 ++---
 src/components/domains/index.tsx              |  2 +-
 .../domains/manage/ManageDomainProvider.tsx   | 14 ++++++------
 src/components/domains/utils.tsx              | 22 +++++++++----------
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
index b21327264..51d570ff9 100644
--- a/src/components/domains/BuyDomainButtons.tsx
+++ b/src/components/domains/BuyDomainButtons.tsx
@@ -51,8 +51,7 @@ export const BuyByDotTxButton = ({
   close,
   price,
 }: BuyByDotTxButtonProps) => {
-  const { recipient, purchaser, setIsFetchNewDomains, setProcessingDomains } =
-    useManageDomainContext()
+  const { recipient, purchaser, setDomainToFetch, setProcessingDomains } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
@@ -115,7 +114,7 @@ export const BuyByDotTxButton = ({
   }
 
   const onSuccess = async () => {
-    setIsFetchNewDomains(true)
+    setDomainToFetch(domainName)
     setProcessingDomains({ [domainName]: true })
 
     close()
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
index a09000279..1473394ee 100644
--- a/src/components/domains/index.tsx
+++ b/src/components/domains/index.tsx
@@ -32,7 +32,7 @@ const DomainMarketSection = ({ promoCode }: DomainServerProps) => {
   const myAddress = useMyAddress()
   const { domains } = useMyDomains()
   const { api, isApiReady, subsocial } = useSubstrate()
-  useFetchNewDomains(domain?.id)
+  useFetchNewDomains()
 
   const onSearchDomain = async (domain?: string) => {
     if (!domain) return
diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
index b8520f71c..b37f9b4fb 100644
--- a/src/components/domains/manage/ManageDomainProvider.tsx
+++ b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -17,8 +17,8 @@ type ManageDomainProviderState = {
   setRecipient: (recipient: string) => void
   purchaser: string
   setPurchaser: (recipient: string) => void
-  isFetchNewDomains: boolean
-  setIsFetchNewDomains: (isFetchNewDomains: boolean) => void
+  domainToFetch?: string
+  setDomainToFetch: (domainToFetch?: string) => void
   processingDomains: Record<string, boolean>
   setProcessingDomains: (processingDomains: Record<string, boolean>) => void
 }
@@ -36,15 +36,15 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [domainSellerKind, setVariant] = useState<DomainSellerKind>('SUB')
   const [recipient, setRecipient] = useState<string>(myAddress || '')
   const [purchaser, setPurchaser] = useState<string>(myAddress || '')
-  const [isFetchNewDomains, setIsFetchNewDomains] = useState(false)
+  const [domainToFetch, setDomainToFetch] = useState<string>()
   const [processingDomains, setProcessingDomains] = useState<Record<string, boolean>>({})
 
   useEffect(() => {
-    if(!myAddress) return
+    if (!myAddress) return
 
     setRecipient(myAddress)
     setPurchaser(myAddress)
-  }, [ myAddress])
+  }, [myAddress])
 
   const router = useRouter()
   const [activePromoCode, setActivePromoCode] = useState(promoCode)
@@ -78,8 +78,8 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
     clearPromoCode,
     purchaser,
     setPurchaser,
-    isFetchNewDomains,
-    setIsFetchNewDomains,
+    domainToFetch,
+    setDomainToFetch,
     processingDomains,
     setProcessingDomains: (newData: Record<string, boolean>) =>
       setProcessingDomains({ ...processingDomains, ...newData }),
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index e6bd1cc7d..42155ba36 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -132,17 +132,16 @@ const waitMessage = controlledMessage({
   icon: <LoadingOutlined />,
 })
 
-export const useFetchNewDomains = (domainName?: string) => {
+export const useFetchNewDomains = () => {
   const myAddress = useMyAddress()
-  const { setIsFetchNewDomains, isFetchNewDomains, openManageModal, setProcessingDomains } =
+  const { setDomainToFetch, domainToFetch, openManageModal, setProcessingDomains } =
     useManageDomainContext()
   const upsertDomains = useCreateUpsertDomains()
   const removePendingOrder = useCreateRemovePendingOrders()
 
   useSubsocialEffect(
     ({ substrate }) => {
-      setIsFetchNewDomains(false)
-      if (!myAddress || !isFetchNewDomains || !domainName) return
+      if (!myAddress || !domainToFetch || !domainToFetch) return
 
       let unsub: any
 
@@ -150,20 +149,21 @@ export const useFetchNewDomains = (domainName?: string) => {
         const api = await (await substrate.api).isReady
         waitMessage.open()
 
-        unsub = await api.query.domains.registeredDomains(domainName, data => {
+        unsub = await api.query.domains.registeredDomains(domainToFetch, data => {
           const domain = data.unwrapOr(undefined)
 
           if (domain) {
             const domainEntity = {
-              id: domainName,
+              id: domainToFetch,
               ...(domain as unknown as DomainStruct),
             }
 
-            upsertDomains({ domain: domainEntity, address: myAddress, domainName })
-            removePendingOrder({ domainName })
-            setProcessingDomains({ [domainName]: false })
+            setDomainToFetch(undefined)
+            upsertDomains({ domain: domainEntity, address: myAddress, domainName: domainToFetch })
+            removePendingOrder({ domainName: domainToFetch })
+            setProcessingDomains({ [domainToFetch]: false })
             waitMessage.close()
-            openManageModal('success', domainName)
+            openManageModal('success', domainToFetch)
           }
         })
       }
@@ -172,7 +172,7 @@ export const useFetchNewDomains = (domainName?: string) => {
 
       return () => unsub && unsub()
     },
-    [isFetchNewDomains, myAddress],
+    [domainToFetch, myAddress],
   )
 }
 

From 3718a10b31b331c19690e04b8eeae2c2fd3be488 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 2 Oct 2023 15:54:11 +0300
Subject: [PATCH 53/54] Add skeleton for price field

---
 .../common/inputs/SelectAccountInput.tsx      | 43 +++++++++----------
 src/components/domains/DomainInput.tsx        | 13 +++++-
 .../domains/EligibleDomainsSection.tsx        | 40 +++++++++++------
 .../domains/pendingOrders/index.tsx           |  3 +-
 .../registerDomainModal/Index.module.sass     | 13 +++++-
 .../RegisterDomainModal.tsx                   | 26 +++++++++--
 src/components/domains/utils.tsx              | 25 ++++++++---
 .../lazy-connection/LazyConnectionContext.tsx |  3 +-
 .../features/chainsInfo/chainsInfoSlice.ts    |  1 +
 9 files changed, 116 insertions(+), 51 deletions(-)

diff --git a/src/components/common/inputs/SelectAccountInput.tsx b/src/components/common/inputs/SelectAccountInput.tsx
index d9c94b232..a1fae4508 100644
--- a/src/components/common/inputs/SelectAccountInput.tsx
+++ b/src/components/common/inputs/SelectAccountInput.tsx
@@ -1,15 +1,15 @@
+import { GenericAccountId } from '@polkadot/types'
+import registry from '@subsocial/api/utils/registry'
+import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
 import { Select } from 'antd'
+import clsx from 'clsx'
 import { useEffect, useState } from 'react'
+import { useMyAccounts } from 'src/components/auth/MyAccountsContext'
+import { equalAddresses } from 'src/components/substrate'
+import { useSelectProfile } from 'src/rtk/app/hooks'
 import { SelectAddressPreview } from '../../profile-selector/MyAccountMenu'
-import { isDef, isEmptyArray, toSubsocialAddress } from '@subsocial/utils'
-import registry from '@subsocial/api/utils/registry'
-import { GenericAccountId } from '@polkadot/types'
 import Avatar from '../../profiles/address-views/Avatar'
 import styles from './inputs.module.sass'
-import { useSelectProfile } from 'src/rtk/app/hooks'
-import { useMyAccounts } from 'src/components/auth/MyAccountsContext'
-import { equalAddresses } from 'src/components/substrate'
-import clsx from 'clsx'
 
 export const isValidAccount = (address?: string) => {
   try {
@@ -52,27 +52,26 @@ export const SelectAccountInput = ({
   className,
   withAvatar = true,
   network,
-  disabled
+  disabled,
 }: SelectAccountInputProps) => {
   const { accounts, status } = useMyAccounts()
-  const allExtensionAccounts = accounts.map(x => x.address && toSubsocialAddress(x.address) as string).filter(isDef)
+  const allExtensionAccounts = accounts
+    .map(x => x.address && (toSubsocialAddress(x.address) as string))
+    .filter(isDef)
 
-  const [ defaultOptions, setDefaultOptions ] = useState<any[]>([])
-  const [ selectOptions, setSelectOptions ] = useState<any[]>(defaultOptions)
+  const [defaultOptions, setDefaultOptions] = useState<any[]>([])
+  const [selectOptions, setSelectOptions] = useState<any[]>(defaultOptions)
   const profile = useSelectProfile(value)
 
   useEffect(() => {
-    const options =
-    status === 'OK'
-        ? filterSelectOptions(allExtensionAccounts, value, network)
-        : []
+    const options = status === 'OK' ? filterSelectOptions(allExtensionAccounts, value, network) : []
 
     if (!defaultOptions || isEmptyArray(defaultOptions)) {
       setDefaultOptions(options)
     }
 
     setSelectOptions(options)
-  }, [ value, status ])
+  }, [value, status])
 
   const onSelectChange = (value: string) => {
     setValue(value)
@@ -106,9 +105,7 @@ export const SelectAccountInput = ({
   }
 
   const onSelectHandler = (searchValue: any) => {
-    const filterOptions = defaultOptions.filter(
-      (x: any) => !x.value.includes(searchValue)
-    )
+    const filterOptions = defaultOptions.filter((x: any) => !x.value.includes(searchValue))
 
     if (filterOptions) {
       setSelectOptions(filterOptions as any[])
@@ -121,9 +118,11 @@ export const SelectAccountInput = ({
 
   const avatar = (
     <div className='mr-2'>
-      {value 
-        ? <Avatar address={value} avatar={profile?.content?.image} size={50} /> 
-        : <div className={`${styles.Circle} mr-2`}></div>}
+      {value ? (
+        <Avatar address={value} avatar={profile?.content?.image} size={50} />
+      ) : (
+        <div className={`${styles.Circle} mr-2`}></div>
+      )}
     </div>
   )
 
diff --git a/src/components/domains/DomainInput.tsx b/src/components/domains/DomainInput.tsx
index 0c2c37f1a..57409bc13 100644
--- a/src/components/domains/DomainInput.tsx
+++ b/src/components/domains/DomainInput.tsx
@@ -1,5 +1,5 @@
 import { SearchOutlined } from '@ant-design/icons'
-import { isEmptyStr, nonEmptyStr } from '@subsocial/utils'
+import { isEmptyStr, nonEmptyStr, parseDomain } from '@subsocial/utils'
 import { Button, Form, Input } from 'antd'
 import { useRouter } from 'next/router'
 import { useEffect, useRef } from 'react'
@@ -37,6 +37,8 @@ export const InputDomain = ({ onChange }: DomainInputProps) => {
     onChange && onChange(domain)
   }
 
+  const inputDefaultValue = domain ? parseDomain(domain as string).domain : ''
+
   return (
     <section>
       <Input.Group compact size='large' className={styles.DomainInput}>
@@ -45,8 +47,15 @@ export const InputDomain = ({ onChange }: DomainInputProps) => {
           ref={refInput}
           onPressEnter={onSearchHandler}
           size='large'
+          defaultValue={inputDefaultValue}
         />
-        <Button type='primary' ghost={!!domain} style={{ flexBasis: '15%' }} size='large' onClick={onSearchHandler}>
+        <Button
+          type='primary'
+          ghost={!!domain}
+          style={{ flexBasis: '15%' }}
+          size='large'
+          onClick={onSearchHandler}
+        >
           {isMobile ? <SearchOutlined /> : 'Search'}
         </Button>
       </Input.Group>
diff --git a/src/components/domains/EligibleDomainsSection.tsx b/src/components/domains/EligibleDomainsSection.tsx
index 58370df60..faec7936d 100644
--- a/src/components/domains/EligibleDomainsSection.tsx
+++ b/src/components/domains/EligibleDomainsSection.tsx
@@ -4,6 +4,7 @@ import { parseDomain } from '@subsocial/utils'
 import { Button, Card, Radio, RadioChangeEvent, Result, Row, Tag, Tooltip } from 'antd'
 import React, { FC, useEffect } from 'react'
 import config from 'src/config'
+import { useChainInfo } from 'src/rtk/features/chainsInfo/chainsInfoHooks'
 import { DomainEntity } from 'src/rtk/features/domains/domainsSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useSelectPendingOrderById } from '../../rtk/features/domainPendingOrders/pendingOrdersHooks'
@@ -57,9 +58,10 @@ const UnavailableBtn = ({ domain: { owner, id } }: DomainProps) => {
 
 type DomainActionProps = DomainProps & {
   domainPrice?: string
+  loadingPrice: boolean
 }
 
-const DomainAction = ({ domain, domainPrice }: DomainActionProps) => {
+const DomainAction = ({ domain, domainPrice, loadingPrice }: DomainActionProps) => {
   const { owner } = domain
   const { domainSellerKind } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
@@ -108,6 +110,7 @@ const DomainAction = ({ domain, domainPrice }: DomainActionProps) => {
       domainName={domain.id}
       domainSellerKind={domainSellerKind}
       domainPrice={domainPrice}
+      loadingPrice={loadingPrice}
     />
   )
 }
@@ -116,13 +119,16 @@ type FoundDomainsProps = {
   structs?: DomainEntity[]
   Action?: FC<DomainActionProps>
   domainPrice?: string
+  loadingPrice: boolean
 }
 
-const FoundDomains = ({ structs = [], Action, domainPrice }: FoundDomainsProps) => {
+const FoundDomains = ({ structs = [], Action, domainPrice, loadingPrice }: FoundDomainsProps) => {
   return (
     <>
       {structs.map(d => {
-        const action = Action ? <Action domain={d} domainPrice={domainPrice} /> : null
+        const action = Action ? (
+          <Action domain={d} domainPrice={domainPrice} loadingPrice={loadingPrice} />
+        ) : null
 
         return <DomainItem key={d.id} domain={d.id} action={action} />
       })}
@@ -155,7 +161,7 @@ const ReservedDomainCard = ({ domain }: Omit<DomainItemProps, 'action'>) => {
 const SuggestedDomains = ({ domain: { id }, rightElement, withDivider }: DomainProps) => {
   const { domain } = parseDomain(id)
   const domains = config.suggestedTlds?.map(tld => `${domain}.${tld}`)
-  const domainPrice = useGetDomainPrice(id)
+  const { price: domainPrice, loading: loadingPrice } = useGetDomainPrice(id)
 
   const { loading, domainsStruct = [] } = useFetchDomains(domains || [])
 
@@ -169,7 +175,12 @@ const SuggestedDomains = ({ domain: { id }, rightElement, withDivider }: DomainP
       withDivider={withDivider}
       icon={<LocalIcon path={'/icons/reward.svg'} />}
     >
-      <FoundDomains structs={domainsStruct} Action={DomainAction} domainPrice={domainPrice} />
+      <FoundDomains
+        structs={domainsStruct}
+        Action={DomainAction}
+        domainPrice={domainPrice}
+        loadingPrice={loadingPrice}
+      />
     </ResultContainer>
   )
 }
@@ -233,8 +244,8 @@ const SuggestedDomains = ({ domain: { id }, rightElement, withDivider }: DomainP
 // }
 
 const variantOpt = [
-  { value: 'SUB', label: 'SUB' },
-  { value: 'DOT', label: 'DOT' },
+  { value: 'SUB', label: 'SUB', chain: 'subsocial' },
+  { value: 'DOT', label: 'DOT', chain: 'polkadot' },
 ]
 
 // const ChooseDomain = ({ domain, rightElement }: DomainProps) => {
@@ -274,6 +285,7 @@ export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
   // const domains = useBuildDomainsWithTldByDomain(domain)
   const { isReserved, loading: checkingWord } = useIsReservedWord(domain.id)
   const { setVariant } = useManageDomainContext()
+  const chainsInfo = useChainInfo()
 
   // if (isEmptyArray(domains)) return null
 
@@ -298,11 +310,15 @@ export const EligibleDomainsSection = ({ domain }: FoundDomainCardProps) => {
           defaultValue={'SUB'}
           className={styles.BuyWithRadio}
         >
-          {variantOpt.map(({ value, label }, i) => (
-            <Radio.Button key={i} value={value}>
-              {label}
-            </Radio.Button>
-          ))}
+          {variantOpt.map(({ value, label, chain }, i) => {
+            const disable = chain !== 'subsocial' && !chainsInfo[chain]?.tokenSymbols
+
+            return (
+              <Radio.Button key={i} value={value} disabled={disable}>
+                {label}
+              </Radio.Button>
+            )
+          })}
         </Radio.Group>
       </div>
     </>
diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
index 37c418604..e6bf0b09e 100644
--- a/src/components/domains/pendingOrders/index.tsx
+++ b/src/components/domains/pendingOrders/index.tsx
@@ -29,7 +29,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const sellerConfig = useSelectSellerConfig()
   const reloadPendingOrders = useCreateReloadPendingOrders()
   const myAddress = useMyAddress()
-  const domainPrice = useGetDomainPrice(pendingDomain.id)
+  const { price: domainPrice, loading: loadingPrice } = useGetDomainPrice(pendingDomain.id)
 
   const { processingDomains } = useManageDomainContext()
 
@@ -59,6 +59,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
       withPrice={false}
       domainSellerKind={destination as DomainSellerKind}
       domainPrice={domainPrice}
+      loadingPrice={loadingPrice}
     />
   )
 
diff --git a/src/components/domains/registerDomainModal/Index.module.sass b/src/components/domains/registerDomainModal/Index.module.sass
index 45019aec2..53c2501f3 100644
--- a/src/components/domains/registerDomainModal/Index.module.sass
+++ b/src/components/domains/registerDomainModal/Index.module.sass
@@ -8,7 +8,6 @@ $element_height: 40px
   \:global .ant-select-selector
     border-radius: $border_radius_large !important
 
-
 .DomainModal
   \:global .ant-modal-footer
     padding-top: 0 !important
@@ -27,6 +26,16 @@ $element_height: 40px
   button
     height: $element_height
 
+.PriceSkeleton
+  width: 60px !important
+
+  \:global .ant-skeleton-content
+    ul
+      margin-bottom: 0
+
+    li
+      width: 100% !important
+
 .ModalTitle
   h2
     color: #222
@@ -82,4 +91,4 @@ $element_height: 40px
 
 .RecipientFieldDesc
   font-size: $font_small
-  line-height: $font_small
\ No newline at end of file
+  line-height: $font_small
diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
index 3fc6c64fd..36f70d52f 100644
--- a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
+++ b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, Space, Tag } from 'antd'
+import { Button, Modal, Skeleton, Space, Tag } from 'antd'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
@@ -165,6 +165,7 @@ type BuyByDotButtonProps = {
   withPrice?: boolean
   domainSellerKind: DomainSellerKind
   domainPrice?: string
+  loadingPrice: boolean
 }
 
 const RegisterDomainButton = ({
@@ -173,6 +174,7 @@ const RegisterDomainButton = ({
   withPrice = true,
   domainSellerKind,
   domainPrice,
+  loadingPrice,
 }: BuyByDotButtonProps) => {
   const sellerConfig = useSelectSellerConfig()
   const { sellerChain } = sellerConfig || {}
@@ -188,12 +190,28 @@ const RegisterDomainButton = ({
 
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
-  const isProcessingDomain = processingDomains[domainName]
+  const disableRegisterButton = processingDomains[domainName] || loadingPrice || price === '0'
+
+  const priceValue = withPrice && (
+    <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>
+  )
 
   return (
     <span className={styles.RegisterButton}>
-      {withPrice && <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>}
-      <Button type={'primary'} block disabled={isProcessingDomain} onClick={() => setOpen(true)}>
+      <div>
+        {loadingPrice ? (
+          <Skeleton
+            className={styles.PriceSkeleton}
+            round
+            title={false}
+            paragraph={{ rows: 1 }}
+            active
+          />
+        ) : (
+          priceValue
+        )}
+      </div>
+      <Button type={'primary'} block disabled={disableRegisterButton} onClick={() => setOpen(true)}>
         {label}
       </Button>
       <BuyDomainModal
diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
index 42155ba36..fc3e7af3a 100644
--- a/src/components/domains/utils.tsx
+++ b/src/components/domains/utils.tsx
@@ -178,21 +178,32 @@ export const useFetchNewDomains = () => {
 
 export const useGetDomainPrice = (domain: string) => {
   const [price, setPrice] = useState()
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     const getPrice = async () => {
-      const subsocialRpc = getOrInitSubsocialRpc()
-
-      const { domain: domainPart } = parseDomain(domain)
-      const price = await subsocialRpc.calculatePrice(domainPart)
-
-      setPrice(price)
+      setLoading(true)
+      try {
+        const subsocialRpc = getOrInitSubsocialRpc()
+
+        const { domain: domainPart } = parseDomain(domain)
+        const price = await subsocialRpc.calculatePrice(domainPart)
+
+        if (price) {
+          setPrice(price)
+        }
+        setLoading(false)
+      } catch (err) {
+        log.error('Failed to get domain price', err)
+        setLoading(false)
+        setPrice(undefined)
+      }
     }
 
     getPrice().catch(err => log.error('Failed to get domain price', err))
   }, [domain])
 
-  return price
+  return { loading, price }
 }
 
 export const useGetPrice = (domainSellerKind: DomainSellerKind, domainPrice?: string) => {
diff --git a/src/components/lazy-connection/LazyConnectionContext.tsx b/src/components/lazy-connection/LazyConnectionContext.tsx
index b67fa8096..ad3705f87 100644
--- a/src/components/lazy-connection/LazyConnectionContext.tsx
+++ b/src/components/lazy-connection/LazyConnectionContext.tsx
@@ -40,7 +40,8 @@ export const LazyConnectionsProvider = React.memo((props: React.PropsWithChildre
       if (api) return api
 
       waitMessage.open(`Connecting to ${network || 'the network'}...`)
-      const node = nodeByNetwork[network] || chainsInfo[network]?.node
+      const node =
+        nodeByNetwork[network] || chainsInfo[network]?.wsNode || chainsInfo[network]?.node
 
       const provider = new WsProvider(node)
       api = new ApiPromise({ provider } as any)
diff --git a/src/rtk/features/chainsInfo/chainsInfoSlice.ts b/src/rtk/features/chainsInfo/chainsInfoSlice.ts
index b4bcbf233..e818705e4 100644
--- a/src/rtk/features/chainsInfo/chainsInfoSlice.ts
+++ b/src/rtk/features/chainsInfo/chainsInfoSlice.ts
@@ -15,6 +15,7 @@ export type ChainInfo = {
   icon: string
   name: string
   node: string
+  wsNode?: string
   paraId: string
   relayChain?: RelayChain
   connected?: boolean

From 27f6dc8303ded714c51be3b1464efda9ff238fb9 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 4 Oct 2023 14:54:10 +0300
Subject: [PATCH 54/54] Change feature based env

---
 .github/workflows/feature-based.yaml | 6 +++---
 src/config/connections/main.ts       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
index 4dd76304c..ae0b54823 100644
--- a/.github/workflows/feature-based.yaml
+++ b/.github/workflows/feature-based.yaml
@@ -64,9 +64,9 @@ jobs:
             GH_HCAPTCHA_SITE_KEY=3beeddac-2dce-41cc-8e18-338118426c38
             GH_AMP_ID=71bf5a46800fedba5e9a01243b988164
             GH_OFFCHAIN_SIGNER_URL=https://signer.subsocial.network
-            GH_CONNECTION_KIND=staging
-            GH_SELLER_CLIENT_ID=5DYm3Wk4aa1BbfhH1ajmY6MNEELXoicmKRnP4tzHYjSKnD9K
-            GH_SELLER_TOKEN_SIGNER=retire strong pole intact cool music high path salt praise stadium spatial
+            GH_CONNECTION_KIND=main
+            GH_SELLER_CLIENT_ID=${{ secrets.SELLER_CLIENT_ID }}
+            GH_SELLER_TOKEN_SIGNER=${{ secrets.SELLER_TOKEN_SIGNER }}
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache
diff --git a/src/config/connections/main.ts b/src/config/connections/main.ts
index 9a45db958..4cf21d9d7 100644
--- a/src/config/connections/main.ts
+++ b/src/config/connections/main.ts
@@ -11,7 +11,7 @@ const mainConfig: SubsocialConfig = {
   offchainUrl: 'https://api.subsocial.network',
   offchainSignerUrl: 'https://signer.subsocial.network',
   graphqlUrl: 'https://squid.subsquid.io/subsocial/graphql',
-  sellerSquid: 'https://squid.subsquid.io/x-seller-squid-rococo-soon/graphql',
+  sellerSquid: 'https://squid.subsquid.io/x-seller-dot-sub/graphql',
 
   ipfsNodeUrl: 'https://ipfs.subsocial.network',