Native file downloads with toast notification

android/app/capacitor.build.gradle

@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-filesystem')
+    implementation project(':capacitor-toast')
     implementation project(':mutinywallet-barcode-scanner')
 
 }

android/capacitor.settings.gradle

@@ -8,5 +8,8 @@ project(':capacitor-clipboard').projectDir = new File('../node_modules/.pnpm/@ca
 include ':capacitor-filesystem'
 project(':capacitor-filesystem').projectDir = new File('../node_modules/.pnpm/@capacitor+filesystem@5.1.1_@capacitor+core@5.2.2/node_modules/@capacitor/filesystem/android')
 
+include ':capacitor-toast'
+project(':capacitor-toast').projectDir = new File('../node_modules/.pnpm/@capacitor+toast@5.0.6_@capacitor+core@5.2.2/node_modules/@capacitor/toast/android')
+
 include ':mutinywallet-barcode-scanner'
 project(':mutinywallet-barcode-scanner').projectDir = new File('../node_modules/.pnpm/@mutinywallet+barcode-scanner@5.0.0-beta.3_@capacitor+core@5.2.2/node_modules/@mutinywallet/barcode-scanner/android')

package.json

@@ -47,6 +47,7 @@
         "@capacitor/clipboard": "^5.0.6",
         "@capacitor/core": "^5.2.2",
         "@capacitor/filesystem": "^5.1.1",
+        "@capacitor/toast": "^5.0.6",
         "@kobalte/core": "^0.9.8",
         "@kobalte/tailwindcss": "^0.5.0",
         "@modular-forms/solid": "^0.18.1",

pnpm-lock.yaml

@@ -16,6 +16,9 @@ importers:
       '@capacitor/filesystem':
         specifier: ^5.1.1
         version: 5.1.1(@capacitor/core@5.2.2)
+      '@capacitor/toast':
+        specifier: ^5.0.6
+        version: 5.0.6(@capacitor/core@5.2.2)
       '@kobalte/core':
         specifier: ^0.9.8
         version: 0.9.8(solid-js@1.7.8)
@@ -1575,6 +1578,14 @@ packages:
       '@capacitor/core': 5.2.2
     dev: false
 
+  /@capacitor/toast@5.0.6(@capacitor/core@5.2.2):
+    resolution: {integrity: sha512-djkRHVT8YtLJC1vvOnDU3EfAHfQYqAD7LYEXmSmhYuTnXRIggX93m/NkazwLnnpr95kDbs2VVPM/J6dqqYuJng==}
+    peerDependencies:
+      '@capacitor/core': ^5.0.0
+    dependencies:
+      '@capacitor/core': 5.2.2
+    dev: false
+
   /@colors/colors@1.5.0:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}

src/components/ImportExport.tsx

@@ -30,7 +30,7 @@ export function ImportExport(props: { emergency?: boolean }) {
         try {
             setError(undefined);
             const json = await MutinyWallet.export_json();
-            downloadTextFile(json || "", "mutiny-state.json");
+            await downloadTextFile(json || "", "mutiny-state.json");
         } catch (e) {
             console.error(e);
             const err = eify(e);
@@ -54,7 +54,7 @@ export function ImportExport(props: { emergency?: boolean }) {
                 );
             }
             const json = await MutinyWallet.export_json(password());
-            downloadTextFile(json || "", "mutiny-state.json");
+            await downloadTextFile(json || "", "mutiny-state.json");
         } catch (e) {
             console.error(e);
             setError(eify(e));

src/components/Logs.tsx

@@ -10,7 +10,7 @@ export function Logs() {
         try {
             const logs = await MutinyWallet.get_logs();
 
-            downloadTextFile(
+            await downloadTextFile(
                 logs.join("") || "",
                 "mutiny-logs.txt",
                 "text/plain"

src/utils/download.ts

@@ -1,14 +1,40 @@
-// https://stackoverflow.com/questions/34156282/how-do-i-save-json-to-local-text-file
+import { Capacitor } from "@capacitor/core";
+import { Directory, Encoding, Filesystem } from "@capacitor/filesystem";
+import { Toast } from "@capacitor/toast";
 
-export function downloadTextFile(
+export async function downloadTextFile(
     content: string,
     fileName: string,
     type?: string
 ) {
     const contentType = type ? type : "application/json";
-    const a = document.createElement("a");
-    const file = new Blob([content], { type: contentType });
-    a.href = URL.createObjectURL(file);
-    a.download = fileName;
-    a.click();
+
+    if (Capacitor.isNativePlatform()) {
+        try {
+            const writeFileResult = await Filesystem.writeFile({
+                path: `${fileName}`,
+                data: content,
+                directory: Directory.Documents,
+                encoding: Encoding.UTF8
+            });
+
+            await Toast.show({
+                text: `Saved to ${writeFileResult.uri}`,
+                duration: "long"
+            });
+        } catch (err) {
+            console.error("Error writing the file:", err);
+            await Toast.show({
+                text: `Error while saving file`,
+                duration: "long"
+            });
+        }
+    } else {
+        // https://stackoverflow.com/questions/34156282/how-do-i-save-json-to-local-text-file
+        const a = document.createElement("a");
+        const file = new Blob([content], { type: contentType });
+        a.href = URL.createObjectURL(file);
+        a.download = fileName;
+        a.click();
+    }
 }

vite.config.ts

@@ -62,7 +62,10 @@ export default defineConfig({
             "i18next",
             "i18next-browser-languagedetector",
             "@capacitor/clipboard",
-            "@capacitor/core"
+            "@capacitor/core",
+            "@capacitor/filesystem",
+            "@capacitor/toast",
+            "@mutinywallet/barcode-scanner"
         ],
         // This is necessary because otherwise `vite dev` can't find the wasm
         exclude: ["@mutinywallet/mutiny-wasm", "@mutinywallet/waila-wasm"]