Merge pull request #226 from comit-network/lending-backup

e2e_tests/src/borrow.test.ts

@@ -59,6 +59,20 @@ describe("borrow test", () => {
         debug("Signing loan");
         let signLoanButton = await getElementById(driver, "//button[@data-cy='data-cy-sign-loan-button']", 20_000);
         await signLoanButton.click();
+        debug("Download loan backup");
+        let downloadLoanButton = await getElementById(
+            driver,
+            "//button[@data-cy='data-cy-download-loan-button']",
+            20_000,
+        );
+        await downloadLoanButton.click();
+        debug("Confirming the backup");
+        let confirmLoanButton = await getElementById(
+            driver,
+            "//button[@data-cy='data-cy-confirm-loan-button']",
+            20_000,
+        );
+        await confirmLoanButton.click();
 
         await switchToWindow(driver, webAppTitle);
 

extension/package.json

@@ -46,13 +46,15 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/uuid": "^8.3.1",
+    "chakra-ui-steps": "^1.3.0",
     "debug": "^4.3.1",
     "framer-motion": "^4.0.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-async": "^10.0.1",
     "react-browser-extension-scripts": "4.0.10",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-qr-code": "^1.1.1",
     "react-scripts": "4.0.1",
     "type-fest": "^2.0.0",

extension/public/manifest.json

@@ -45,6 +45,7 @@
     "storage",
     "tabs",
     "unlimitedStorage",
-    "webRequest"
+    "webRequest",
+    "downloads"
   ]
 }

extension/src/App.tsx

@@ -8,7 +8,7 @@ import { browser } from "webextension-polyfill-ts";
 import { getBalances, getLoanToSign, getOpenLoans, getSwapToSign, getWalletStatus } from "./background-proxy";
 import AddressQr from "./components/AddressQr";
 import WalletBalances from "./components/Balances";
-import ConfirmLoan from "./components/ConfirmLoan";
+import ConfirmLoanWizard from "./components/ConfirmLoanWizard";
 import ConfirmSwap from "./components/ConfirmSwap";
 import CreateWallet from "./components/CreateWallet";
 import OpenLoans from "./components/OpenLoans";
@@ -74,7 +74,7 @@ const App = () => {
                             swapToSign={swapToSign!}
                         />}
                         {signLoan
-                            && <ConfirmLoan
+                            && <ConfirmLoanWizard
                                 onCancel={refreshAll}
                                 onSuccess={refreshAll}
                                 loanToSign={loanToSign!}

extension/src/background-proxy.ts

@@ -1,5 +1,14 @@
 import { browser } from "webextension-polyfill-ts";
-import { Address, BalanceUpdate, LoanDetails, LoanToSign, SwapToSign, Txid, WalletStatus } from "./models";
+import {
+    Address,
+    BackupDetails,
+    BalanceUpdate,
+    LoanDetails,
+    LoanToSign,
+    SwapToSign,
+    Txid,
+    WalletStatus,
+} from "./models";
 
 const proxy = browser.extension.getBackgroundPage();
 
@@ -13,11 +22,26 @@ export async function signAndSendSwap(txHex: string): Promise<void> {
     return proxy.signAndSendSwap(txHex);
 }
 
-export async function signLoan(): Promise<void> {
+export async function signLoan(): Promise<string> {
     // @ts-ignore
     return proxy.signLoan();
 }
 
+export async function confirmLoan(payload: string): Promise<void> {
+    // @ts-ignore
+    return proxy.confirmLoan(payload);
+}
+
+export async function createLoanBackup(loanTx: string): Promise<string> {
+    // @ts-ignore
+    return proxy.createLoanBackup(loanTx);
+}
+
+export async function loadLoanBackup(backupDetails: BackupDetails): Promise<void> {
+    // @ts-ignore
+    return proxy.loadLoanBackup(backupDetails);
+}
+
 export async function getLoanToSign(): Promise<LoanToSign | undefined> {
     // @ts-ignore
     return proxy.getLoanToSign();

extension/src/background/index.ts

@@ -1,9 +1,10 @@
 import Debug from "debug";
 import { browser } from "webextension-polyfill-ts";
 import WavesProvider from "../in-page";
-import { LoanDetails, LoanToSign, SwapToSign, Txid } from "../models";
+import { BackupDetails, LoanDetails, LoanToSign, SwapToSign, Txid } from "../models";
 import {
     bip39SeedWords,
+    createLoanBackup,
     createNewBip39Wallet,
     extractLoan,
     extractTrade,
@@ -12,6 +13,7 @@ import {
     getBlockHeight,
     getOpenLoans,
     getPastTransactions,
+    loadLoanBackup,
     makeBuyCreateSwapPayload,
     makeLoanRequestPayload,
     makeSellCreateSwapPayload,
@@ -171,11 +173,32 @@ window.signLoan = async () => {
     // on the pop-up matches what is stored in the extension's
     // storage. It would be better to send around the swap ID to check
     // that the wallet is signing the same transaction the user has authorised
-    signLoan(walletName)
-        .then(resolveLoanSignRequest)
-        .catch(rejectLoanSignRequest)
-        .then(cleanupPendingLoan);
+
+    // if we receive an error, we respond directly, else we return the details
+    return await signLoan(walletName).catch(rejectLoanSignRequest);
+};
+
+// @ts-ignore
+window.confirmLoan = async (payload: string) => {
+    if (!resolveLoanSignRequest || !rejectLoanSignRequest) {
+        throw new Error("No pending promise functions for loan sign request");
+    }
+    // once sent to the page, we assume the business is done.
+    // TODO: a feedback loop is required where the wallet gets told if bobtimus successfully published the transaction
+    resolveLoanSignRequest(payload);
+    await cleanupPendingLoan();
 };
+
+// @ts-ignore
+window.createLoanBackup = async (loanTx: string) => {
+    return createLoanBackup(walletName, loanTx);
+};
+
+// @ts-ignore
+window.loadLoanBackup = async (backupDetails: BackupDetails) => {
+    return loadLoanBackup(backupDetails);
+};
+
 // @ts-ignore
 window.rejectLoan = () => {
     if (!resolveLoanSignRequest || !rejectLoanSignRequest) {