feat(wasm): Import/export account

package.json

@@ -72,6 +72,6 @@
         "uuid": "^9.0.1",
         "vite-plugin-node-polyfills": "^0.21.0",
         "voice-activity-detection": "^0.0.5",
-        "warp-wasm": "1.6.2"
+        "warp-wasm": "1.7.0"
     }
 }

src/lib/components/settings/OrderedPhrase.svelte

@@ -2,10 +2,13 @@
     import { fade } from "svelte/transition"
     import { animationDelay, animationDuration } from "$lib/globals/animations"
     import { Text, Loader } from "$lib/elements"
+    import Input from "$lib/elements/Input/Input.svelte"
+    import type { Writable } from "svelte/store"
 
     export let number: number = 0
     export let word: string = "UNKNOWN"
     export let loading: boolean = false
+    export let editable: boolean = false
 </script>
 
 <div class="ordered-phrase">
@@ -18,12 +21,16 @@
             </div>
         {/if}
     </span>
-    <span class="word">
+    <span class="word {editable ? 'editable' : ''}">
         {#if loading}
             <Loader text />
         {:else}
             <div data-cy="ordered-phrase-word-{number}" in:fade={{ duration: animationDuration, delay: number * animationDelay }}>
-                <Text>{word}</Text>
+                {#if editable}
+                    <Input bind:value={word}></Input>
+                {:else}
+                    <Text>{word}</Text>
+                {/if}
             </div>
         {/if}
     </span>
@@ -64,6 +71,16 @@
             display: inline-block;
             flex: 1;
             padding: var(--padding-minimal) var(--padding);
+            &.editable {
+                padding: 0;
+            }
+        }
+
+        :global(.input-group > .input-container) {
+            border: none;
+        }
+        :global(.input-group > .input-container::selection) {
+            border: none;
         }
     }
 </style>

src/lib/elements/Input/FileInput.svelte

@@ -3,6 +3,8 @@
 
     export let hidden: boolean = false
     export let clss: string = ""
+    export let allowed: string | undefined = undefined
+    export let multiple: boolean = true
 
     const dispatch: EventDispatcher<Record<string, File[]>> = createEventDispatcher()
 
@@ -24,4 +26,4 @@
     }
 </script>
 
-<input class={clss} style={hidden ? "display: none" : ""} multiple type="file" bind:this={refSelf} bind:files={fileInput} />
+<input class={clss} style={hidden ? "display: none" : ""} multiple={multiple} accept={allowed ? allowed : "*"} type="file" bind:this={refSelf} bind:files={fileInput} />

src/lib/lang/en.json

@@ -272,6 +272,16 @@
                 "new": "Create New Account",
                 "import": "Import Account",
                 "profile": "Create new profile"
+            },
+            "import": {
+                "title": "Import Account",
+                "description": "Import your account from remote or a backup file",
+                "passphrase": "Add passphrase",
+                "remote": "Import from remote",
+                "file": "Import from file",
+                "warning": "By continuing your old account will be overwritten!",
+                "fail": "Failed to import account",
+                "fail.null": "Failed to create identity during account import"
             }
         }
     },
@@ -366,6 +376,14 @@
                 "remove": "Your recovery phrase will not be stored anymore and will be removed. Make sure to save the phrase! This change is irreversible!",
                 "remove.yes": "I understand",
                 "remove.no": "Cancel"
+            },
+            "export": {
+                "label": "Export",
+                "description": "Export your account manually to remote or a file",
+                "remote": "Remote",
+                "file": "File",
+                "fail": "Failed to export account",
+                "success": "Successfully exported account to remote"
             }
         },
         "calling": {

src/lib/layouts/login/Entrypoint.svelte

@@ -63,11 +63,9 @@
             <Button text={$_("pages.auth.create.new")} hook="button-create-account" on:click={_ => (page = LoginPage.Username)} appearance={Appearance.Primary} fill>
                 <Icon icon={Shape.Plus} />
             </Button>
-            {#if get(SettingsStore.state).devmode}
-                <Button text={$_("pages.auth.create.import")} hook="button-import-account" on:click={_ => (showConfigureRelay = true)} appearance={Appearance.Alt} fill>
-                    <Icon icon={Shape.ArrowUp} />
-                </Button>
-            {/if}
+            <Button text={$_("pages.auth.create.import")} hook="button-import-account" on:click={_ => (page = LoginPage.Import)} appearance={Appearance.Alt} fill>
+                <Icon icon={Shape.ArrowUp} />
+            </Button>
         </Controls>
     </div>
 

src/lib/layouts/login/ImportAccount.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+    import { Icon, Button, Title, Text } from "$lib/elements"
+    import { Appearance, Shape } from "$lib/enums"
+    import { _ } from "svelte-i18n"
+    import { Identity, WarpInstance } from "warp-wasm"
+    import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
+    import { OrderedPhrase } from "$lib/components"
+    import FileInput from "$lib/elements/Input/FileInput.svelte"
+    import { TesseractStoreInstance } from "$lib/wasm/TesseractStore"
+    import { RelayStore } from "$lib/state/wasm/relays"
+    import { WarpStore } from "$lib/wasm/WarpStore"
+    import { get } from "svelte/store"
+    import { LoginPage } from "."
+    import Unlock from "./Unlock.svelte"
+    import { AuthStore } from "$lib/state/auth"
+    import { Store } from "$lib/state/Store"
+    import { ToastMessage } from "$lib/state/ui/toast"
+
+    export let page: LoginPage
+    export let onImport: (identity: Identity) => void
+
+    let loading = false
+
+    let passphrase: string[] = new Array(12).fill("")
+
+    let passphraseUpload: FileInput
+    let accountUpload: FileInput
+
+    let failed: string = ""
+    let pin = ""
+
+    // We cache it here to not init the warp instances in all stores since its not ready at this time
+    let warp: WarpInstance
+
+    async function setupTesseract(pinInput: string) {
+        await TesseractStoreInstance.initTesseract()
+        let tesseract = await TesseractStoreInstance.getTesseract()
+        if (TesseractStoreInstance.exists()) {
+            tesseract.clear()
+        }
+        let result = await TesseractStoreInstance.unlock(pinInput)
+        let failed = false
+        result.onFailure(_ => {
+            failed = true
+            console.log("Failed to unlock tesseract")
+        })
+        if (failed) return
+        let addresses = Object.values(get(RelayStore.state))
+            .filter(r => r.active)
+            .map(r => r.address)
+        warp = await WarpStore.createIpfs(addresses)
+        pin = pinInput
+    }
+
+    async function readPassphrase(files: File[]) {
+        let file = files[0]
+        let content = await file.text()
+        // Allow splitting by new lines and/or whitespace
+        passphrase = content.split("\n").join(" ").split(" ")
+    }
+
+    async function importAccount(files?: File[]) {
+        loading = true
+        let memory: Uint8Array | undefined = undefined
+        if (files) {
+            memory = new Uint8Array(await files[0].arrayBuffer())
+        }
+        let res = await MultipassStoreInstance.importAccount(passphrase.join(" "), { to: memory, multipassBox: warp.multipass })
+        res.onSuccess(identity => {
+            if (identity) {
+                AuthStore.setStoredPin(pin)
+                WarpStore.updateWarpInstance(warp)
+                onImport(identity)
+            } else {
+                Store.addToastNotification(new ToastMessage($_("pages.auth.import.fail.null"), "", 2))
+            }
+        })
+        res.onFailure(err => {
+            Store.addToastNotification(new ToastMessage($_("pages.auth.import.fail"), err, 2))
+            failed = err
+        })
+        loading = false
+    }
+</script>
+
+{#if pin.length == 0}
+    <Unlock
+        create={true}
+        importing={true}
+        on:pin={async e => {
+            await setupTesseract(e.detail.pin)
+            e.detail.done()
+        }} />
+{:else}
+    <div class="account-import">
+        <div class="header">
+            <Title hook="title-import-account">{$_("pages.auth.import.title")}</Title>
+            <Text hook="text-import-account-secondary" muted>{$_("pages.auth.import.description")}</Text>
+        </div>
+        {#each passphrase as word, i}
+            <OrderedPhrase number={i + 1} bind:word={word} editable loading={loading} />
+        {/each}
+        <Button
+            hook="upload-passphrase"
+            on:click={() => {
+                passphraseUpload.click()
+            }}
+            text={$_("pages.auth.import.passphrase")}>
+            <Icon icon={Shape.Details} />
+        </Button>
+        <div class="import-button-group">
+            <Button
+                hook="button-import-account-go-back"
+                loading={loading}
+                text={$_("controls.go_back")}
+                appearance={Appearance.Alt}
+                on:click={() => {
+                    page = LoginPage.EntryPoint
+                    TesseractStoreInstance.clearTesseract()
+                }}>
+                <Icon icon={Shape.ArrowLeft} />
+            </Button>
+            <Button
+                hook="import-account-file"
+                loading={loading}
+                disabled={passphrase.find(s => s.length === 0) !== undefined}
+                on:click={() => {
+                    accountUpload.click()
+                }}
+                text={$_("pages.auth.import.file")}>
+                <Icon icon={Shape.Document} />
+            </Button>
+            <Button
+                hook="import-account"
+                loading={loading}
+                disabled={passphrase.find(s => s.length === 0) !== undefined}
+                on:click={() => {
+                    importAccount()
+                }}
+                text={$_("pages.auth.import.remote")}>
+                <Icon icon={Shape.Globe} />
+            </Button>
+            <FileInput
+                bind:this={passphraseUpload}
+                hidden
+                on:select={e => {
+                    readPassphrase(e.detail)
+                }} />
+            <FileInput
+                bind:this={accountUpload}
+                hidden
+                on:select={e => {
+                    importAccount(e.detail)
+                }} />
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .account-import {
+        align-self: center;
+        align-content: center;
+        justify-content: center;
+        display: inline-flex;
+        flex-direction: row;
+        gap: var(--gap);
+        padding: var(--padding);
+        max-width: var(--max-component-width);
+        flex-wrap: wrap;
+        flex: 1;
+        .import-button-group {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
+</style>

src/lib/layouts/login/Unlock.svelte

@@ -18,6 +18,8 @@
     import { ToastMessage } from "$lib/state/ui/toast"
     import { TesseractStoreInstance } from "$lib/wasm/TesseractStore"
     export let create: boolean = false
+    export let importing: boolean = false
+
     const dispatch = createEventDispatcher()
 
     let loading = false
@@ -119,6 +121,10 @@
         </Modal>
     {/if}
 
+    {#if importing}
+        <Text appearance={Appearance.Warning}>{$_("pages.auth.import.warning")}</Text>
+    {/if}
+
     {#if loading}
         <Label text={$_("generic.loading")} />
     {:else}

src/lib/wasm/HandleWarpErrors.ts

@@ -15,6 +15,7 @@ export enum WarpError {
     CONSTELLATION_NOT_FOUND = "Constellation instance not found",
     RAYGUN_NOT_FOUND = "Raygun instance not found",
     FILE_SIZE_EXCEEDED = "File size exceeded",
+    INVALID_PHRASE = "Invalid word in phrase",
 }
 
 export function handleErrors(error: any): WarpError {
@@ -40,6 +41,8 @@ export function handleErrors(error: any): WarpError {
                 return WarpError.ITEM_ALREADY_EXIST_WITH_SAME_NAME
             case message.includes(WarpError.ITEM_DOES_NOT_EXIST):
                 return WarpError.ITEM_DOES_NOT_EXIST
+            case message.includes(WarpError.INVALID_PHRASE.toLowerCase()):
+                return WarpError.INVALID_PHRASE
             default:
                 return WarpError.GENERAL_ERROR
         }

src/lib/wasm/MultipassStore.ts

@@ -620,6 +620,30 @@ class MultipassStore {
         }
     }
 
+    async importAccount(passphrase: string, settings?: { to?: Uint8Array; multipassBox?: wasm.MultiPassBox }): Promise<Result<WarpError, wasm.Identity | undefined>> {
+        let multipass = settings?.multipassBox ? settings.multipassBox : get(this.multipassWritable)
+        if (multipass) {
+            let result = multipass
+                .import_identity(passphrase, settings?.to)
+                .then(value => {
+                    return success<WarpError, wasm.Identity | undefined>(value)
+                })
+                .catch(reason => {
+                    return failure<WarpError, wasm.Identity | undefined>(handleErrors(reason))
+                })
+            return await result
+        }
+        return failure(WarpError.MULTIPASS_NOT_FOUND)
+    }
+
+    async exportAccount(memory?: boolean): Promise<Result<WarpError, Uint8Array | undefined>> {
+        let multipass = get(this.multipassWritable)
+        if (multipass) {
+            return success(await multipass.export_identity(memory))
+        }
+        return failure(WarpError.MULTIPASS_NOT_FOUND)
+    }
+
     async identity_from_did(id: string, maxRetries = 3): Promise<User | undefined> {
         let multipass = get(this.multipassWritable)
         let lastErr

src/lib/wasm/TesseractStore.ts

@@ -15,6 +15,10 @@ class TesseractStore {
         this.tesseractWritable = writable(null)
     }
 
+    clearTesseract() {
+        this.tesseractWritable.set(null)
+    }
+
     /**
      * Retrieves the Tesseract instance.
      * @returns {wasm.Tesseract} The current Tesseract instance.