Display loading component in exchange operations

packages/exchange/package.json

@@ -14,8 +14,10 @@
   },
   "dependencies": {
     "@burner-wallet/types": "^1.0.0",
+    "@types/promise-retry": "^1.1.3",
     "@types/react": "*",
     "@types/styled-components": "4.1.8",
+    "promise-retry": "^1.1.1",
     "styled-components": "^5.0.1"
   },
   "devDependencies": {

packages/exchange/src/index.ts

@@ -5,3 +5,4 @@ export default Exchange;
 export { default as Pair, ValueTypes, ExchangeParams } from './pairs/Pair';
 export { default as Uniswap } from './pairs/Uniswap';
 export { default as XDaiBridge } from './pairs/XDaiBridge';
+export { default as Bridge } from './pairs/Bridge';

packages/exchange/src/pairs/Bridge.ts

@@ -0,0 +1,87 @@
+import Pair, { ExchangeParams, ValueTypes } from './Pair';
+import { Asset } from '@burner-wallet/types';
+import promiseRetry from 'promise-retry';
+import Web3 from "web3";
+const { toBN } = Web3.utils;
+
+
+interface BridgePairConstructor {
+    assetA: string;
+    assetABridge: string;
+    assetB: string;
+    assetBBridge: string;
+}
+
+interface BridgeExchangeParams {
+    asset: Asset;
+    assetOnOtherNetwork: Asset;
+    from: string;
+    value: string;
+    to: string;
+}
+
+export default class Bridge extends Pair {
+    protected readonly assetABridge: string;
+    protected readonly assetBBridge: string;
+
+    constructor({ assetA, assetABridge, assetB, assetBBridge }: BridgePairConstructor) {
+        super({ assetA, assetB });
+        this.assetABridge = assetABridge;
+        this.assetBBridge = assetBBridge;
+    }
+
+    exchangeAtoB({ account, value, ether }: ExchangeParams) {
+        const _value = this._getValue({ value, ether });
+        const asset = this.getExchange().getAsset(this.assetA);
+        const assetOnOtherNetwork = this.getExchange().getAsset(this.assetB);
+        return this._exchangeAndWait({
+            asset,
+            assetOnOtherNetwork,
+            from: account,
+            value: _value,
+            to: this.assetABridge
+        });
+    }
+
+    exchangeBtoA({ account, value, ether }: ExchangeParams) {
+        const _value = this._getValue({ value, ether });
+        const asset = this.getExchange().getAsset(this.assetB);
+        const assetOnOtherNetwork = this.getExchange().getAsset(this.assetA);
+        return this._exchangeAndWait({
+            asset,
+            assetOnOtherNetwork,
+            from: account,
+            value: _value,
+            to: this.assetBBridge
+        });
+    }
+
+    async _exchangeAndWait({ asset, assetOnOtherNetwork, from, value, to }: BridgeExchangeParams) {
+        const initialBalance = await assetOnOtherNetwork.getBalance(from);
+        const result = await asset.send({ from, value, to });
+        await promiseRetry(async (retry) => {
+            const updatedBalance = await assetOnOtherNetwork.getBalance(from);
+            console.log("updated balance", updatedBalance.toString())
+            if (!toBN(updatedBalance).gt(toBN(initialBalance))) {
+                retry(null);
+            }
+        }, {
+            forever: true,
+            factor: 1.2
+        });
+
+        return result;
+    }
+
+    async estimateAtoB(value: ValueTypes) {
+        return this._getValue(value);
+    }
+
+    async estimateBtoA(value: ValueTypes) {
+        return this._getValue(value);
+    }
+
+    getLoadingMessage(): string {
+        return 'Exchanging assets.. please wait until the bridge relays the transaction';
+    }
+}

packages/exchange/src/pairs/Pair.ts

@@ -53,4 +53,8 @@ export default abstract class Pair {
     const web3 = this.getExchange().getWeb3(this.getExchange().getAsset(this.assetA).network);
     return web3.utils.toWei(ether as string, 'ether');
   }
+
+  getLoadingMessage(): string {
+    return 'Exchanging assets...'
+  }
 }

packages/exchange/src/pairs/XDaiBridge.ts

@@ -1,39 +1,12 @@
-import Pair, { ExchangeParams, ValueTypes } from './Pair';
+import Bridge from "./Bridge";
 
-const toXdaiBridge = '0x4aa42145Aa6Ebf72e164C9bBC74fbD3788045016';
-const toDaiBridge = '0x7301cfa0e1756b71869e93d4e4dca5c7d0eb0aa6';
-
-export default class XDaiBridge extends Pair {
+export default class XDaiBridge extends Bridge {
   constructor() {
-    super({ assetA: 'xdai', assetB: 'dai' });
-  }
-
-  exchangeAtoB({ account, value, ether }: ExchangeParams) {
-    const _value = this._getValue({ value, ether });
-    const xdai = this.getExchange().getAsset('xdai');
-    return xdai.send({
-      from: account,
-      value: _value,
-      to: toDaiBridge,
+    super({
+      assetA: 'xdai',
+      assetABridge: '0x7301cfa0e1756b71869e93d4e4dca5c7d0eb0aa6',
+      assetB: 'dai',
+      assetBBridge: '0x4aa42145Aa6Ebf72e164C9bBC74fbD3788045016'
     });
   }
-
-  exchangeBtoA({ account, value, ether }: ExchangeParams) {
-    const _value = this._getValue({ value, ether });
-
-    const dai = this.getExchange().getAsset(this.assetB);
-    return dai.send({
-      from: account,
-      value: _value,
-      to: toXdaiBridge,
-    });
-  }
-
-  async estimateAtoB(value: ValueTypes) {
-    return this._getValue(value);
-  }
-
-  async estimateBtoA(value: ValueTypes) {
-    return this._getValue(value);
-  }
 }

packages/exchange/src/ui/ExchangePage.tsx

@@ -59,6 +59,7 @@ export default class ExchangePage extends Component<PluginPageContext, ExchangeP
 
   async runExchange() {
     const { assetA, assetB, amount } = this.state;
+    const { actions } = this.props;
 
     const pair = this.getPair(assetA, assetB);
     if (!pair) {
@@ -69,14 +70,18 @@ export default class ExchangePage extends Component<PluginPageContext, ExchangeP
 
     this.setState({ isExchanging: true, error: null });
     try {
+      const loadingMessage = pair.getLoadingMessage()
+      actions.setLoading(loadingMessage)
       const response = await (pair.assetA === assetA.id
         ? pair.exchangeAtoB(exchangeProps)
         : pair.exchangeBtoA(exchangeProps));
     } catch (e) {
       this.setState({ error: e.message });
+      actions.setLoading(null);
       console.error(e);
     }
     this.setState({ isExchanging: false });
+    actions.setLoading(null);
   }
 
   async getEstimate(assetA: Asset, assetB: Asset, amount: string) {
@@ -192,12 +197,15 @@ export default class ExchangePage extends Component<PluginPageContext, ExchangeP
 
         <Bottom>
           <ErrorBar>{error}</ErrorBar>
-          <Button
-            onClick={() => this.runExchange()}
-            disabled={isExchanging || assetBOptions.length === 0}
-          >
-            Exchange
-          </Button>
+          {
+            !isExchanging &&
+            <Button
+              onClick={() => this.runExchange()}
+              disabled={isExchanging || assetBOptions.length === 0}
+            >
+              Exchange
+            </Button>
+          }
         </Bottom>
       </Page>
     );

yarn.lock

@@ -2507,6 +2507,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.4.tgz#8ed27dba0a83b020fca035f003ffe21f70207a9c"
   integrity sha512-tJUH7//zNZ/539DH4cgZS3NsmW0b9ShDeRBzoCEMCEAlHn5WHUghOfHdycvpo4RCxxEPmQ3WfjDogh+DCCvuSg==
 
+"@types/promise-retry@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@types/promise-retry/-/promise-retry-1.1.3.tgz#baab427419da9088a1d2f21bf56249c21b3dd43c"
+  integrity sha512-LxIlEpEX6frE3co3vCO2EUJfHIta1IOmhDlcAsR4GMMv9hev1iTI9VwberVGkePJAuLZs5rMucrV8CziCfuJMw==
+  dependencies:
+    "@types/retry" "*"
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -2590,6 +2597,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/retry@*":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -15235,6 +15247,7 @@ websocket-extensions@>=0.1.1:
   dependencies:
     debug "^2.2.0"
     es5-ext "^0.10.50"
+    gulp "^4.0.2"
     nan "^2.14.0"
     typedarray-to-buffer "^3.1.5"
     yaeti "^0.0.6"