Improve types and add swap subscription

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "Apache-2.0",
   "private": true,
   "author": "[email protected] <[email protected]>",

src/App.vue

@@ -149,13 +149,12 @@ import { KnownSymbols, FPNumber } from '@sora-substrate/util'
 import { PageNames, BridgeChildPages, SidebarMenuGroups, SocialNetworkLinks, FaucetLink, Components, LogoSize } from '@/consts'
 
 import TransactionMixin from '@/components/mixins/TransactionMixin'
-import LoadingMixin from '@/components/mixins/LoadingMixin'
 import NodeErrorMixin from '@/components/mixins/NodeErrorMixin'
 
 import axios from '@/api'
 import router, { lazyComponent } from '@/router'
 import { formatAddress, disconnectWallet } from '@/utils'
-import { Node, ConnectToNodeOptions } from '@/types/nodes'
+import { ConnectToNodeOptions } from '@/types/nodes'
 
 const WALLET_DEFAULT_ROUTE = WALLET_CONSTS.RouteNames.Wallet
 const WALLET_CONNECTION_ROUTE = WALLET_CONSTS.RouteNames.WalletConnection
@@ -170,7 +169,7 @@ const WALLET_CONNECTION_ROUTE = WALLET_CONSTS.RouteNames.WalletConnection
     TokenLogo: lazyComponent(Components.TokenLogo)
   }
 })
-export default class App extends Mixins(TransactionMixin, LoadingMixin, NodeErrorMixin) {
+export default class App extends Mixins(TransactionMixin, NodeErrorMixin) {
   readonly nodesFeatureEnabled = true
 
   readonly SidebarMenuGroups = SidebarMenuGroups
@@ -187,7 +186,6 @@ export default class App extends Mixins(TransactionMixin, LoadingMixin, NodeErro
 
   showHelpDialog = false
 
-  @State(state => state.settings.node) node!: Node
   @State(state => state.settings.faucetUrl) faucetUrl!: string
   @State(state => state.settings.selectNodeDialogVisibility) selectNodeDialogVisibility!: boolean
 
@@ -199,12 +197,11 @@ export default class App extends Mixins(TransactionMixin, LoadingMixin, NodeErro
   @Getter nodeIsConnected!: boolean
 
   @Action navigate // Wallet
-  @Action trackActiveTransactions
-  @Action setSoraNetwork
+  @Action trackActiveTransactions!: AsyncVoidFn
+  @Action setSoraNetwork!: (data: any) => Promise<void>
   @Action setDefaultNodes!: (nodes: any) => Promise<void>
   @Action connectToNode!: (options: ConnectToNodeOptions) => Promise<void>
   @Action setFaucetUrl!: (url: string) => void
-  @Action setSelectNodeDialogVisibility!: (flag: boolean) => void
   @Action('setEvmSmartContracts', { namespace: 'web3' }) setEvmSmartContracts
   @Action('setSubNetworks', { namespace: 'web3' }) setSubNetworks
   @Action('setSmartContracts', { namespace: 'web3' }) setSmartContracts

src/components/ConfirmRemoveLiquidity.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
@@ -74,8 +74,6 @@ const namespace = 'removeLiquidity'
   }
 })
 export default class ConfirmRemoveLiquidity extends Mixins(TranslationMixin, DialogMixin, LoadingMixin, NumberFormatterMixin) {
-  @Prop({ default: false, type: Boolean }) readonly visible!: boolean
-
   @Getter('firstToken', { namespace }) firstToken!: any
   @Getter('secondToken', { namespace }) secondToken!: any
   @Getter('liquidityAmount', { namespace }) liquidityAmount!: string
@@ -85,7 +83,7 @@ export default class ConfirmRemoveLiquidity extends Mixins(TranslationMixin, Dia
   @Getter('price', { namespace: 'prices' }) price!: string | number
   @Getter('priceReversed', { namespace: 'prices' }) priceReversed!: string | number
 
-  @Getter slippageTolerance!: number
+  @Getter slippageTolerance!: string
 
   get formattedFromValue (): string {
     return this.formatStringValue(this.firstTokenAmount)

src/components/ConfirmSwap.vue

@@ -65,7 +65,7 @@ export default class ConfirmSwap extends Mixins(TransactionMixin, DialogMixin) {
   @Getter('minMaxReceived', { namespace }) minMaxReceived!: CodecString
   @Getter('isExchangeB', { namespace }) isExchangeB!: boolean
 
-  @Getter slippageTolerance!: number
+  @Getter slippageTolerance!: string
   @Getter('swapLiquiditySource', { namespace }) liquiditySource!: LiquiditySourceTypes
 
   @Prop({ default: false, type: Boolean }) readonly isInsufficientBalance!: boolean

src/components/PairTokenLogo.vue

@@ -10,7 +10,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { AccountAsset, Asset } from '@sora-substrate/util'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
-import { LogoSize, Components } from '@/consts'
+import { LogoSize, Components, ObjectInit } from '@/consts'
 import { lazyComponent } from '@/router'
 
 @Component({
@@ -19,8 +19,8 @@ import { lazyComponent } from '@/router'
   }
 })
 export default class PairTokenLogo extends Mixins(TranslationMixin) {
-  @Prop({ type: Object, default: () => null }) readonly firstToken!: AccountAsset | Asset
-  @Prop({ type: Object, default: () => null }) readonly secondToken!: AccountAsset | Asset
+  @Prop({ type: Object, default: ObjectInit }) readonly firstToken!: AccountAsset | Asset
+  @Prop({ type: Object, default: ObjectInit }) readonly secondToken!: AccountAsset | Asset
   @Prop({ type: String, default: LogoSize.MEDIUM, required: false }) readonly size!: LogoSize
 
   get computedClasses (): string {

src/components/SelectNetwork.vue

@@ -43,7 +43,7 @@ export default class SelectNetwork extends Mixins(TranslationMixin, DialogMixin)
 
   @Getter('subNetworks', { namespace: 'web3' }) subNetworks!: Array<SubNetwork>
 
-  created () {
+  created (): void {
     this.selectedNetwork = bridgeApi.externalNetwork || this.subNetworks[0]?.id
   }
 

src/components/SelectNodeDialog.vue

@@ -57,14 +57,13 @@ const NodeInfoView = 'NodeInfoView'
 })
 export default class SelectNodeDialog extends Mixins(TranslationMixin, LoadingMixin, DialogMixin, NodeErrorMixin) {
   @Getter nodeList!: Array<Node>
-  @State(state => state.settings.node) node!: Node
   @State(state => state.settings.defaultNodes) defaultNodes!: Array<Node>
   @State(state => state.settings.nodeAddressConnecting) nodeAddressConnecting!: string
   @State(state => state.settings.nodeConnectionAllowance) nodeConnectionAllowance!: boolean
   @State(state => state.settings.soraNetwork) soraNetwork!: string
   @Action connectToNode!: (options: ConnectToNodeOptions) => Promise<void>
-  @Action addCustomNode!: (node: Node) => void
-  @Action removeCustomNode!: (node: any) => void
+  @Action addCustomNode!: (node: Node) => Promise<void>
+  @Action removeCustomNode!: (node: any) => Promise<void>
 
   currentView = NodeListView
   selectedNode: any = {}

src/components/SelectRegisteredAsset.vue

@@ -98,7 +98,7 @@ import SelectAssetMixin from '@/components/mixins/SelectAssetMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
 import NumberFormatterMixin from '@/components/mixins/NumberFormatterMixin'
 import DialogBase from '@/components/DialogBase.vue'
-import { Components } from '@/consts'
+import { Components, ObjectInit } from '@/consts'
 import { lazyComponent } from '@/router'
 import { formatAssetBalance } from '@/utils'
 
@@ -113,7 +113,7 @@ const namespace = 'assets'
 })
 export default class SelectRegisteredAsset extends Mixins(TranslationMixin, SelectAssetMixin, LoadingMixin, NumberFormatterMixin) {
   query = ''
-  selectedAsset: AccountAsset | RegisteredAccountAsset | null = null
+  selectedAsset: Nullable<AccountAsset | RegisteredAccountAsset> = null
   readonly tokenTabs = [
     'tokens',
     'custom'
@@ -123,9 +123,9 @@ export default class SelectRegisteredAsset extends Mixins(TranslationMixin, Sele
   customAddress = ''
   customSymbol = ''
   alreadyAttached = false
-  selectedCustomAsset: Asset | undefined | null = null
+  selectedCustomAsset: Nullable<Asset> = null
 
-  @Prop({ default: () => null, type: Object }) readonly asset!: AccountAsset
+  @Prop({ default: ObjectInit, type: Object }) readonly asset!: AccountAsset
 
   @Getter('whitelistAssets', { namespace }) whitelistAssets!: Array<Asset>
   @Getter('isSoraToEvm', { namespace: 'bridge' }) isSoraToEvm!: boolean

src/components/SelectToken.vue

@@ -131,7 +131,7 @@ import SelectAssetMixin from '@/components/mixins/SelectAssetMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
 import NumberFormatterMixin from '@/components/mixins/NumberFormatterMixin'
 import DialogBase from '@/components/DialogBase.vue'
-import { Components } from '@/consts'
+import { Components, ObjectInit } from '@/consts'
 import { lazyComponent } from '@/router'
 import { copyToClipboard, formatAddress, formatAssetBalance, debouncedInputHandler } from '@/utils'
 
@@ -154,12 +154,12 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
   customAddress = ''
   alreadyAttached = false
   isConfirmed = false
-  customAsset: Asset | null = null
+  customAsset: Nullable<Asset> = null
 
-  @Prop({ default: () => false, type: Boolean }) readonly connected!: boolean
-  @Prop({ default: () => null, type: Object }) readonly asset!: Asset
-  @Prop({ default: () => false, type: Boolean }) readonly accountAssetsOnly!: boolean
-  @Prop({ default: () => false, type: Boolean }) readonly notNullBalanceOnly!: boolean
+  @Prop({ default: false, type: Boolean }) readonly connected!: boolean
+  @Prop({ default: ObjectInit, type: Object }) readonly asset!: Asset
+  @Prop({ default: false, type: Boolean }) readonly accountAssetsOnly!: boolean
+  @Prop({ default: false, type: Boolean }) readonly notNullBalanceOnly!: boolean
 
   @Getter('whitelistAssets', { namespace }) whitelistAssets!: Array<Asset>
   @Getter('nonWhitelistAccountAssets', { namespace }) nonWhitelistAccountAssets!: Array<AccountAsset>

src/components/Settings/MarketAlgorithm.vue

@@ -30,7 +30,7 @@ import { TabItem } from '@/types/tabs'
 export default class MarketAlgorithm extends Mixins(TranslationMixin) {
   @State(state => state.settings.marketAlgorithm) marketAlgorithm!: MarketAlgorithms
   @State(state => state.swap.pairLiquiditySources) liquiditySources!: Array<LiquiditySourceTypes>
-  @Action('setMarketAlgorithm') setMarketAlgorithm!: (name: string) => void
+  @Action('setMarketAlgorithm') setMarketAlgorithm!: (name: string) => Promise<void>
 
   get marketAlgorithms (): Array<MarketAlgorithms> {
     const items = Object.keys(LiquiditySourceForMarketAlgorithm) as Array<MarketAlgorithms>

src/components/Settings/SlippageTolerance.vue

@@ -78,10 +78,10 @@ export default class SlippageTolerance extends Mixins(TranslationMixin, NumberFo
 
   slippageToleranceFocused = false
 
-  @Getter slippageTolerance!: number
+  @Getter slippageTolerance!: string
   @Getter transactionDeadline!: number
   @Getter nodeAddress!: { ip: string; port: number }
-  @Action setSlippageTolerance!: any
+  @Action setSlippageTolerance!: (value: string) => Promise<void>
   @Action setTransactionDeadline!: any
 
   get customSlippageTolerance (): string {
@@ -107,14 +107,16 @@ export default class SlippageTolerance extends Mixins(TranslationMixin, NumberFo
   }
 
   get isErrorValue (): boolean {
-    return this.slippageTolerance < this.slippageToleranceExtremeValues.min || this.slippageTolerance > this.slippageToleranceExtremeValues.max
+    const slippageTolerance = Number(this.slippageTolerance)
+    return slippageTolerance < this.slippageToleranceExtremeValues.min || slippageTolerance > this.slippageToleranceExtremeValues.max
   }
 
   get slippageToleranceValidation (): string {
-    if (this.slippageTolerance >= this.slippageToleranceExtremeValues.min && this.slippageTolerance <= 0.1) {
+    const slippageTolerance = Number(this.slippageTolerance)
+    if (slippageTolerance >= this.slippageToleranceExtremeValues.min && slippageTolerance <= 0.1) {
       return 'warning'
     }
-    if (this.slippageTolerance >= 5 && this.slippageTolerance <= this.slippageToleranceExtremeValues.max) {
+    if (slippageTolerance >= 5 && slippageTolerance <= this.slippageToleranceExtremeValues.max) {
       return 'frontrun'
     }
     if (this.isErrorValue) {
@@ -144,12 +146,10 @@ export default class SlippageTolerance extends Mixins(TranslationMixin, NumberFo
     if (
       FPNumber.lt(
         this.getFPNumber(this.slippageTolerance),
-        this.getFPNumber(
-          this.slippageToleranceExtremeValues.min
-        )
+        this.getFPNumber(this.slippageToleranceExtremeValues.min)
       )
     ) {
-      value = this.slippageToleranceExtremeValues.min
+      value = `${this.slippageToleranceExtremeValues.min}`
     }
     this.setSlippageTolerance(value)
     this.slippageToleranceFocused = false

src/components/TokenLogo.vue

@@ -8,12 +8,12 @@ import { Asset, AccountAsset, KnownAssets } from '@sora-substrate/util'
 import { WhitelistAssets } from 'polkaswap-token-whitelist'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
-import { LogoSize } from '@/consts'
+import { LogoSize, ObjectInit } from '@/consts'
 
 @Component
 export default class TokenLogo extends Mixins(TranslationMixin) {
   @Prop({ type: String, default: '' }) readonly tokenSymbol!: string // ONLY for Bridge.vue
-  @Prop({ type: Object, default: () => null }) readonly token!: AccountAsset | Asset
+  @Prop({ type: Object, default: ObjectInit }) readonly token!: AccountAsset | Asset
   @Prop({ type: String, default: LogoSize.MEDIUM, required: false }) readonly size!: LogoSize
 
   get tokenClasses (): string {

src/components/mixins/TokenPairMixin.ts

@@ -27,7 +27,7 @@ const CreateTokenPairMixin = (namespace: string) => {
     @Getter('price', { namespace: 'prices' }) price!: string
     @Getter('priceReversed', { namespace: 'prices' }) priceReversed!: string
 
-    @Getter slippageTolerance!: number
+    @Getter slippageTolerance!: string
     @Getter isLoggedIn!: boolean
 
     @Action('setFirstTokenAddress', { namespace }) setFirstTokenAddress

src/components/mixins/TransactionMixin.ts

@@ -1,5 +1,5 @@
 import { Component, Mixins } from 'vue-property-decorator'
-import { History, TransactionStatus, Operation, RewardInfo } from '@sora-substrate/util'
+import { History, TransactionStatus, Operation } from '@sora-substrate/util'
 import { api } from '@soramitsu/soraneo-wallet-web'
 import findLast from 'lodash/fp/findLast'
 import { Action } from 'vuex-class'
@@ -14,7 +14,7 @@ import NumberFormatterMixin from './NumberFormatterMixin'
 export default class TransactionMixin extends Mixins(TranslationMixin, LoadingMixin, NumberFormatterMixin) {
   private time = 0
 
-  transaction: History | null = null // It's used just for sync errors
+  transaction: Nullable<History> = null // It's used just for sync errors
 
   @Action addActiveTransaction
   @Action removeActiveTransaction

src/consts/index.ts

@@ -28,6 +28,8 @@ export const Links = {
   }
 }
 
+export const ObjectInit = () => null
+
 export const ZeroStringValue = '0'
 
 export const MetamaskCancellationCode = 4001

src/store/addLiquidity.ts

@@ -37,11 +37,11 @@ interface AddLiquidityState {
   firstTokenValue: string;
   secondTokenValue: string;
   secondTokenBalance: any;
-  reserve: null | Array<CodecString>;
+  reserve: Nullable<Array<CodecString>>;
   minted: CodecString;
   fee: CodecString;
   totalSupply: CodecString;
-  focusedField: null | string;
+  focusedField: Nullable<string>;
   isAvailable: boolean;
 }
 
@@ -135,7 +135,7 @@ const mutations = {
   },
   [types.GET_RESERVE_REQUEST] (state) {
   },
-  [types.GET_RESERVE_SUCCESS] (state: AddLiquidityState, reserve: null | Array<CodecString>) {
+  [types.GET_RESERVE_SUCCESS] (state: AddLiquidityState, reserve: Nullable<Array<CodecString>>) {
     state.reserve = reserve
   },
   [types.GET_RESERVE_FAILURE] (state, error) {

src/store/bridge.ts

@@ -331,7 +331,7 @@ const mutations = {
   [types.GET_RESTORED_HISTORY_REQUEST] (state) {},
   [types.GET_RESTORED_HISTORY_SUCCESS] (state) {},
   [types.GET_RESTORED_HISTORY_FAILURE] (state) {},
-  [types.SET_HISTORY_ITEM] (state, historyItem: BridgeHistory | null) {
+  [types.SET_HISTORY_ITEM] (state, historyItem: Nullable<BridgeHistory>) {
     state.historyItem = historyItem
   },
   [types.SIGN_SORA_TRANSACTION_SORA_EVM_REQUEST] (state) {},
@@ -495,7 +495,7 @@ const actions = {
       throw error
     }
   },
-  setHistoryItem ({ commit }, historyItem: BridgeHistory | null) {
+  setHistoryItem ({ commit }, historyItem: Nullable<BridgeHistory>) {
     commit(types.SET_HISTORY_ITEM, historyItem)
   },
   saveHistory ({ commit }, history: BridgeHistory) {

src/store/removeLiquidity.ts

@@ -27,12 +27,12 @@ const types = flow(
 ])
 
 interface RemoveLiquidityState {
-  liquidity: null | any;
+  liquidity: Nullable<any>;
   removePart: number;
   liquidityAmount: string;
   firstTokenAmount: string;
   secondTokenAmount: string;
-  focusedField: null | string;
+  focusedField: Nullable<string>;
   fee: CodecString;
   reserveA: CodecString;
   reserveB: CodecString;

src/store/swap.ts

@@ -35,9 +35,9 @@ const types = flow(
 )(['CHECK_AVAILABILITY'])
 
 interface SwapState {
-  tokenFromAddress: string | null;
+  tokenFromAddress: Nullable<string>;
   tokenFromBalance: any;
-  tokenToAddress: string | null;
+  tokenToAddress: Nullable<string>;
   tokenToBalance: any;
   fromValue: string;
   toValue: string;

src/types/index.d.ts

@@ -0,0 +1,5 @@
+type Nullable<T> = T | null | undefined
+
+type VoidFn = () => void
+
+type AsyncVoidFn = () => Promise<void>

src/utils/index.ts

@@ -97,7 +97,7 @@ export const hasInsufficientBalance = (
   return FPNumber.lt(fpMaxBalance, fpAmount)
 }
 
-export const hasInsufficientXorForFee = (xorAsset: AccountAsset | RegisteredAccountAsset | null, fee: CodecString, isXorOutputSwap = false): boolean => {
+export const hasInsufficientXorForFee = (xorAsset: Nullable<AccountAsset | RegisteredAccountAsset>, fee: CodecString, isXorOutputSwap = false): boolean => {
   if (!xorAsset) return true
   if (asZeroValue(fee)) return false
 
@@ -126,7 +126,7 @@ export async function delay (ms = 50): Promise<void> {
   await new Promise(resolve => setTimeout(resolve, ms))
 }
 
-export const formatAssetSymbol = (assetSymbol: string | undefined | null): string => {
+export const formatAssetSymbol = (assetSymbol: Nullable<string>): string => {
   return assetSymbol ?? ''
 }