Merge pull request #107 from dappforce/sub-improvements

Sub improvements

.github/workflows/manual.yml

@@ -27,8 +27,8 @@ jobs:
       - name: Update deploy file
         run: TAG=${{ env.name }}-$(echo $GITHUB_SHA | head -c7) && sed -i 's|<IMAGE>|dappforce/subid-frontend:'${TAG}'|' $GITHUB_WORKSPACE/deployment/production/deploy.yaml
 
-#      - name: Remove hpa
-#        run: kubectl -n sub-id delete hpa subid-front
+      - name: Remove hpa
+        run: kubectl -n sub-id delete hpa subid-front
 
       - name: Deploy to DigitalOcean Kubernetes
         run: kubectl apply -f $GITHUB_WORKSPACE/deployment/production/deploy.yaml

.gitignore

@@ -51,6 +51,7 @@ typings/
 # Optional npm cache directory
 .npm
 .yarn
+
 # Optional eslint cache
 .eslintcache
 

.prettierrc

@@ -0,0 +1,21 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "jsxSingleQuote": true,
+  "trailingComma": "es5",
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "singleAttributePerLine": false,
+
+  "cursorOffset": -1,
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "insertPragma": false,
+  "htmlWhitespaceSensitivity": "css",
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "tabWidth": 2
+}

next.config.js

@@ -14,6 +14,8 @@ const nextConfig = {
       use: ['@svgr/webpack'],
     })
 
+    config.resolve.fallback = { fs: false };
+
     return config
   },
   images: {

src/api/balances.ts

@@ -1,8 +1,5 @@
 import { isEthereumAddress } from '@polkadot/util-crypto'
-import {
-  supportedNetworks,
-  evmLikeNetworks,
-} from '../rtk/features/multiChainInfo/types'
+import { evmLikeNetworks, supportedNetworks, } from '../rtk/features/multiChainInfo/types'
 import { sendGetRequest } from './utils'
 import { AnyAddress } from '../components/utils/index'
 import { isDef } from '@subsocial/utils'
@@ -20,42 +17,54 @@ export const getAccountBalancesByNetwork = async ({
     params: { url: `${account}/balances/${network}` },
     onFailReturnedValue: undefined,
     onFailedText: `Failed to get balances by account: ${account}`,
+    timeout: 2000,
   })
 
   return res ? { network, info: res } : undefined
 }
 
-const getAccountBalancesRequest = async (account: string, networks: string[]) => {
-  return sendGetRequest({
-    params: {
-      url: 'balances',
-      config: {
-        params: {
-          networks,
-          account,
-        },
-      },
-    },
-    onFailReturnedValue: undefined,
-    onFailedText: 'Failed to get balances',
-  })
-}
+// const getAccountBalancesRequest = async (account: string, networks: string[]) => {
+//   return sendGetRequest({
+//     params: {
+//       url: 'balances',
+//       config: {
+//         params: {
+//           networks,
+//           account,
+//         },
+//       },
+//     },
+//     onFailReturnedValue: undefined,
+//     onFailedText: 'Failed to get balances',
+//   })
+// }
 
 export const getAccountBalances = async (account: string) => {
   const networks = isEthereumAddress(account)
     ? [ ...evmLikeNetworks ]
     : [ ...supportedNetworks ]
 
-  const middleIndex = Math.ceil(networks.length / 2)
-
-  const firstHalf = networks.splice(0, middleIndex)
-  const secondHalf = networks.splice(-middleIndex)
+  const promises = networks.map(async (network) => getAccountBalancesByNetwork({
+      account,
+      network,
+    }))
 
-  const promise = [ firstHalf, secondHalf ].map(async (networksChunk) =>
-    getAccountBalancesRequest(account, networksChunk)
-  )
+  const balancesRes = await Promise.allSettled(promises)
 
-  const res = await Promise.all(promise)
+  return balancesRes
+      .map(balance =>
+          balance.status === 'fulfilled' ? balance.value : undefined)
+      .filter(isDef)
 
-  return res.filter(isDef).flat()
+  // const middleIndex = Math.ceil(networks.length / 2)
+  //
+  // const firstHalf = networks.splice(0, middleIndex)
+  // const secondHalf = networks.splice(-middleIndex)
+  //
+  // const promise = [ firstHalf, secondHalf ].map(async (networksChunk) =>
+  //   getAccountBalancesRequest(account, networksChunk)
+  // )
+  //
+  // const res = await Promise.allSettled(promise)
+  // return res.filter(isDef).flat()
 }

src/api/utils.ts

@@ -35,6 +35,7 @@ type SendGetRequestProps = {
   params: GetParams
   onFailReturnedValue: any
   onFailedText: string
+  timeout?: number
 }
 
 export const sendGetRequest = ({ params: { url, config }, ...otherProps }: SendGetRequestProps) => (

src/components/accountDashboard/index.tsx

@@ -25,34 +25,32 @@ const TotalSection = ({
   loading,
 }: TotalSectionProps) => {
   return (
-    <>
-      <div className={styles.BalanceBlock}>
-        <MutedSpan className={styles.FontSmall}>
-          {title}
-          {description && (
-            <Tooltip className='ml-2' title={description}>
-              <QuestionCircleOutlined />
-            </Tooltip>
-          )}
-        </MutedSpan>
-
-        {loading ? (
-          <Skeleton
-            active
-            title={false}
-            paragraph={{ rows: 1, className: styles.SkeletonParagraph }}
-            className={styles.Skeleton}
-          />
-        ) : (
-          <BalanceView
-            value={totalBalance.toString()}
-            symbol='$'
-            startWithSymbol
-            className={styles.FontLarge}
-          />
+    <div className={styles.BalanceBlock}>
+      <MutedSpan className={styles.FontSmall}>
+        {title}
+        {description && (
+          <Tooltip className='ml-2' title={description}>
+            <QuestionCircleOutlined />
+          </Tooltip>
         )}
-      </div>
-    </>
+      </MutedSpan>
+
+      {loading ? (
+        <Skeleton
+          active
+          title={false}
+          paragraph={{ rows: 1, className: styles.SkeletonParagraph }}
+          className={styles.Skeleton}
+        />
+      ) : (
+        <BalanceView
+          value={totalBalance.toString()}
+          symbol='$'
+          startWithSymbol
+          className={styles.FontLarge}
+        />
+      )}
+    </div>
   )
 }
 

src/components/common/balances/Balance.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { formatBalance } from '@polkadot/util'
-import BN from 'bn.js'
+import { formatBalance, BN } from '@polkadot/util'
 import { Compact } from '@polkadot/types'
 
 // for million, 2 * 3-grouping + comma

src/components/table/collatorStakingTable/stakeModal/StakeAmountInput.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
-import { Button, Col, FormInstance, Input, Row } from 'antd'
-import { Form } from 'antd'
+import { Button, Col, FormInstance, Input, Row, Form } from 'antd'
 import BigNumber from 'bignumber.js'
 import { nonEmptyStr } from '@subsocial/utils'
-import BN from 'bn.js'
 import { useTranslation } from 'react-i18next'
 import { ChainInfo } from '../../../../rtk/features/multiChainInfo/types'
 import { FormatBalance } from '../../../common/balances/Balance'
@@ -13,6 +11,7 @@ import { convertToBalanceWithDecimal } from '../../../common/balances/utils'
 import styles from '../StakingTable.module.sass'
 import { Action } from './StakingActionButtons'
 import { BIGNUMBER_ZERO } from '../../../../config/app/consts'
+import { BN } from '@polkadot/util'
 
 type StakeAmountInputProps = {
   form: FormInstance

src/components/tips/TipModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
-import { Avatar, Button, Col, Form, Modal, Row, Select } from 'antd'
+import { Avatar, Button, Col, Form, FormInstance, Modal, Row, Select } from 'antd'
 import Name from '../homePage/address-views/Name'
 import styles from '../homePage/address-views/utils/index.module.sass'
 import { useMyExtensionAddresses } from '../providers/MyExtensionAccountsContext'
@@ -27,7 +27,6 @@ import { useAppDispatch } from 'src/rtk/app/store'
 import { fetchBalanceByNetwork } from '../../rtk/features/balances/balancesHooks'
 import { showSuccessMessage } from '../utils/Message'
 import { useTranslation } from 'react-i18next'
-import { FormInstance } from 'rc-field-form'
 import { isEthereumAddress } from '@polkadot/util-crypto'
 import { BIGNUMBER_ZERO } from '../../config/app/consts'
 

src/components/transfer/configs/cross-chain.ts

@@ -3,7 +3,12 @@ import { AstarAdapter, ShidenAdapter } from '@polkawallet/bridge/adapters/astar'
 import { AltairAdapter } from '@polkawallet/bridge/adapters/centrifuge'
 import { ShadowAdapter } from '@polkawallet/bridge/adapters/crust'
 import { CrabAdapter } from '@polkawallet/bridge/adapters/darwinia'
-import { BasiliskAdapter, HydraAdapter } from '@polkawallet/bridge/adapters/hydradx'
+import {
+  BasiliskAdapter,
+  HydraAdapter,
+  hydraRouteConfigs,
+  hydraTokensConfig,
+} from '@polkawallet/bridge/adapters/hydradx'
 import { InterlayAdapter, KintsugiAdapter } from '@polkawallet/bridge/adapters/interlay'
 import { KicoAdapter } from '@polkawallet/bridge/adapters/kico'
 import { PichiuAdapter } from '@polkawallet/bridge/adapters/kylin'
@@ -19,6 +24,29 @@ import { IntegriteeAdapter } from '@polkawallet/bridge/adapters/integritee'
 import { TuringAdapter } from '@polkawallet/bridge/adapters/oak'
 import { HeikoAdapter, ParallelAdapter } from '@polkawallet/bridge/adapters/parallel'
 import { ZeitgeistAdapter } from '@polkawallet/bridge/adapters/zeitgeist'
+import { SubsocialAdapter, subsocialTokensConfig } from './custom/SubsocialAdapter'
+
+// Add SUB for Hydra DX
+hydraRouteConfigs.push({
+  from: 'hydradx',
+  to: 'subsocial' as ChainId,
+  token: 'SUB',
+  xcm: {
+    fee: {
+      token: 'SUB',
+      amount: '63199000',
+    },
+  },
+})
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+hydraTokensConfig.SUB = {
+  ...subsocialTokensConfig.SUB,
+  toRaw: () => 24, // 24 is the token id for SUB in Hydra DX
+}
+
+console.log(hydraRouteConfigs, hydraTokensConfig)
 
 const availableAdapters: Record<string, { adapter: BaseCrossChainAdapter; chainName?: ChainId }> = {
   polkadot: {
@@ -53,7 +81,7 @@ const availableAdapters: Record<string, { adapter: BaseCrossChainAdapter; chainN
   },
   'darwinia-crab-parachain': {
     adapter: new CrabAdapter(),
-    chainName: 'crab'
+    chainName: 'crab',
   },
   basilisk: {
     adapter: new BasiliskAdapter(),
@@ -84,7 +112,7 @@ const availableAdapters: Record<string, { adapter: BaseCrossChainAdapter; chainN
   },
   bifrostKusama: {
     adapter: new BifrostAdapter(),
-    chainName: 'bifrost'
+    chainName: 'bifrost',
   },
   integritee: {
     adapter: new IntegriteeAdapter(),
@@ -97,14 +125,17 @@ const availableAdapters: Record<string, { adapter: BaseCrossChainAdapter; chainN
   },
   heiko: {
     adapter: new HeikoAdapter(),
-    chainName: 'heiko'
+    chainName: 'heiko',
   },
   hydradx: {
     adapter: new HydraAdapter(),
   },
   zeitgeist: {
     adapter: new ZeitgeistAdapter(),
-  }
+  },
+  subsocial: {
+    adapter: new SubsocialAdapter(),
+  },
 }
 
 function getPolkawalletChainName (chain: string) {
@@ -115,7 +146,7 @@ function getPolkawalletChainName (chain: string) {
 }
 
 const polkawalletChainToSubidNetworkMap = Object.entries(
-  availableAdapters
+  availableAdapters,
 ).reduce((acc, [ subIdNetwork, { chainName } ]) => {
   acc[chainName || subIdNetwork as ChainId] = subIdNetwork
   return acc
@@ -176,6 +207,7 @@ type AugmentedRouterFilter = {
   to?: string
   token?: string
 }
+
 export function getRouteOptions (type: 'dest', params: Omit<AugmentedRouterFilter, 'to'>): string[]
 export function getRouteOptions (type: 'source', params: Omit<AugmentedRouterFilter, 'from'>): string[]
 export function getRouteOptions (type: 'source' | 'dest', params: AugmentedRouterFilter): string[] {
@@ -185,7 +217,7 @@ export function getRouteOptions (type: 'source' | 'dest', params: AugmentedRoute
     const parsedParams: RouterFilter = deleteUndefinedAttributes({
       token: params.token,
       from: getPolkawalletChainName(params.from ?? ''),
-      to: getPolkawalletChainName(params.to ?? '')
+      to: getPolkawalletChainName(params.to ?? ''),
     })
     if (type === 'source') {
       options = bridge.router.getFromChains(parsedParams)
@@ -197,3 +229,4 @@ export function getRouteOptions (type: 'source' | 'dest', params: AugmentedRoute
   }
   return options.map(({ id }) => polkawalletChainToSubidNetworkMap[id as ChainId])
 }
+