first pass at file selector

Author: cgjohn

package-lock.json

@@ -25,6 +25,18 @@ export default function OnboardingLayout() {
           title: "Create Your PIN",
         }}
       />
+      <Stack.Screen
+        name="import-account"
+        options={{
+          title: "Import Account",
+        }}
+      />
+      <Stack.Screen
+        name="import-file"
+        options={{
+          title: "Import File",
+        }}
+      />
     </Stack>
   );
 }

packages/mobile-app/app/onboarding/_layout.tsx

@@ -0,0 +1,66 @@
+import { StyleSheet, View } from "react-native";
+import { Button, Layout, Text } from "@ui-kitten/components";
+import { useState } from "react";
+import * as DocumentPicker from "expo-document-picker";
+
+import { Files } from "@/svgs/Files";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: "#fff",
+  },
+  content: {
+    flex: 1,
+    gap: 24,
+  },
+  uploadContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 24,
+    padding: 32,
+    borderWidth: 1,
+    borderColor: "#E1E1E1",
+    borderRadius: 8,
+    borderStyle: "dashed",
+  },
+  fileName: {
+    marginTop: 16,
+    textAlign: "center",
+  },
+});
+
+export default function ImportFile() {
+  const [fileName, setFileName] = useState<string | null>(null);
+
+  const pickDocument = async () => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: ["application/json", "text/plain"],
+      });
+
+      if (!result.canceled) {
+        setFileName(result.assets[0].name);
+        console.log("Document picked:", result.assets[0]);
+      }
+    } catch (err) {
+      console.log("DocumentPicker Error:", err);
+    }
+  };
+
+  return (
+    <Layout style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.uploadContainer}>
+          <Files />
+          <Text>Upload your JSON or Bech32 file</Text>
+          <Button onPress={pickDocument}>Select File</Button>
+          {fileName && (
+            <Text style={styles.fileName}>Selected: {fileName}</Text>
+          )}
+        </View>
+      </View>
+    </Layout>
+  );
+}

packages/mobile-app/app/onboarding/import-file.tsx

@@ -42,7 +42,8 @@
     "react-native-screens": "~4.4.0",
     "react-native-svg": "9.13.6",
     "react-native-webview": "13.13.2",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "expo-document-picker": "~13.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

packages/mobile-app/package.json

@@ -0,0 +1,21 @@
+import { SvgXml } from "react-native-svg";
+
+const svgContent = `<svg width="134" height="166" viewBox="0 0 134 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4501_15395)">
+<path d="M2.27518 113.009C2.24047 118.034 2.51812 123.054 2.64538 128.075C2.6261 136.232 3.45519 144.514 6.78311 152.037C7.4271 153.499 8.09037 154.961 9.15083 156.156C10.647 157.815 12.2898 159.425 14.2642 160.376C17.5034 162.113 21.1437 162.411 24.7223 162.376C29.4462 162.395 34.1855 162.763 38.89 162.937C46.5369 163.455 54.1723 163.907 61.823 164.283C71.6834 164.898 81.6864 165.482 91.3849 163.184C98.6153 161.672 105.055 156.578 107.577 149.542C108.911 145.434 109.59 141.187 109.964 136.902C108.645 137.114 107.319 137.265 105.985 137.37C101.693 137.702 97.3042 138.023 93.016 138.155C90.953 138.329 88.8899 138.511 86.8191 138.569C80.6607 138.576 74.5023 138.681 68.3439 138.708C64.5764 138.727 60.7896 138.654 57.0644 138.012C52.4948 137.482 47.9098 136.457 43.7797 134.376C38.7936 131.788 35.6662 127.611 33.9348 122.316C32.6237 118.517 32.0105 114.526 31.6751 110.534C30.6994 102.179 30.5645 93.7548 30.3177 85.3537C29.7701 70.6981 30.2868 56.0154 29.2919 41.3714C29.1801 35.6469 29.2842 29.8411 30.0786 24.1553C26.0488 24.9405 21.9265 25.3582 17.9854 26.5302C15.6794 27.4624 13.2153 28.1973 11.1406 29.5936C7.26514 32.0497 5.66866 33.6626 4.09918 38.0373C1.52707 45.3902 1.56178 53.2885 1.27642 60.978C0.913933 72.7133 1.43452 84.437 1.69675 96.1645C1.84714 101.781 2.34845 107.382 2.26747 113.006L2.27518 113.009Z" fill="#FFC2E8"/>
+<path d="M130.873 65.9174C129.731 65.0007 128.061 64.6835 126.692 64.2928C123.415 63.9563 120.16 64.1729 116.89 64.3934C116.774 64.4746 116.62 64.5133 116.443 64.4746C116.454 64.4746 116.466 64.4785 116.477 64.4824C116.5 64.4824 116.52 64.4824 116.543 64.4901C116.038 64.5327 115.548 64.7106 115.035 64.6216C113.446 64.9581 112.687 65.7936 111.962 67.1745C111.422 68.1995 111.264 69.3134 111.063 70.4196C111.009 70.7059 111.04 71.0772 110.963 71.3596C111.009 73.8505 111.071 76.3415 111.183 78.8285C111.376 86.0306 111.376 93.2404 111.429 100.446C111.618 112.012 111.969 123.6 111.283 135.153C111.271 135.266 111.26 135.378 111.248 135.486C112.305 135.273 113.354 135.018 114.395 134.701C116.886 134.055 119.408 133.397 121.498 131.831C124.953 129.661 127.171 126.137 129.106 122.637C129.955 120.83 130.58 118.92 130.957 116.959C131.474 114.537 132.01 112.271 132.272 109.838C132.947 104.399 132.982 98.9031 132.508 93.4493C132.28 89.3338 132.446 85.2106 132.265 81.0913C132.272 78.5965 132.107 76.0823 132.072 73.5797C131.991 73.4173 131.995 73.2355 132.072 73.073C132.072 72.8371 132.068 72.605 132.072 72.3691C132.033 71.8779 132.002 71.3828 131.991 70.8877C131.991 70.8683 131.983 70.8529 131.979 70.8335C131.844 69.3405 131.706 67.8088 131.062 66.4357C130.923 66.2578 130.876 66.076 130.888 65.9174H130.873Z" fill="#FFC2E8"/>
+<path d="M73.3262 11.2556C73.1025 14.9147 73.4688 18.5273 73.8313 22.1554C74.429 27.617 74.3712 33.1133 74.6026 38.5941C74.807 40.4817 74.9728 42.4079 75.397 44.2607C75.8019 45.9355 76.3803 47.591 76.951 49.1807C78.2776 52.5535 79.9897 56.0617 83.148 58.0421C86.6224 60.2159 90.6252 61.2525 94.5817 61.9603C96.5946 62.3046 98.6037 62.672 100.624 62.9621C103.544 63.2174 106.482 63.4224 109.409 63.4998C113.658 63.6429 117.877 63.0085 122.115 62.9814C124.197 62.9853 126.349 62.8461 128.351 63.5384C129.523 63.9446 130.765 64.2695 131.717 65.1011C131.686 65.0237 131.659 64.9425 131.625 64.869C130.491 62.5831 128.54 60.9198 126.82 59.0942C123.661 55.8799 120.395 52.7779 117.233 49.5713C110.87 43.2898 104.955 36.5712 98.6153 30.2665C95.592 27.1451 92.3451 24.248 89.3951 21.0569C86.4373 17.7885 83.522 14.4931 80.8651 10.9771C79.446 9.12438 78.1387 7.08984 76.6309 5.32994C75.6592 4.14248 74.5332 3.00531 73.0485 2.51795C72.8094 2.53729 72.5935 2.3787 72.5009 2.16984C72.4932 2.1621 72.4855 2.15823 72.4778 2.1505C72.393 2.13502 72.3043 2.12342 72.2194 2.11182C73.9393 4.71107 73.1372 8.25022 73.33 11.2633L73.3262 11.2556Z" fill="#D657D9"/>
+<path d="M45.2104 21.3199C48.4997 21.1729 51.7968 21.1922 55.0862 21.3199C57.1801 21.4939 59.3782 21.8227 61.4489 21.9542C63.0917 22.0857 64.7345 22.1321 66.3772 22.2095C66.4967 22.1437 66.6394 22.1089 66.7821 22.1244C67.0597 22.078 67.2718 22.0238 67.5302 21.9813C68.4094 21.9 69.3388 21.6796 70.0792 21.2115C70.8504 20.7435 71.5021 20.0318 71.934 19.2428C72.0728 19.0339 72.1654 18.7167 72.3042 18.4769C72.0574 15.2047 72.1307 11.8821 72.1461 8.64851C72.1538 7.082 72.3196 5.39171 71.8299 3.89869C71.5523 3.20633 71.1705 2.57199 70.6846 2.03821C70.6075 1.98406 70.5535 1.91444 70.5188 1.84482C68.4133 1.55472 66.2962 1.34199 64.1869 1.16406C59.3743 1.21821 54.5077 1.34972 49.7414 1.89123C42.9738 2.44048 38.1689 5.50775 34.6636 11.3096C33.0748 14.9532 32.1069 18.8096 31.4706 22.7162C31.9103 22.6388 32.3499 22.5576 32.7933 22.488C36.9079 21.8962 41.0611 21.5674 45.2065 21.3199H45.2104Z" fill="#FFC2E8"/>
+<path d="M31.5401 88.2506C31.8254 95.7389 31.9527 103.254 32.8589 110.696C33.3294 116.107 34.3397 121.673 37.0391 126.427C41.9904 135.25 53.1658 136.619 62.2703 137.424C69.4969 137.764 76.7389 137.342 83.9732 137.439C88.269 137.54 92.4839 136.905 96.7566 136.851C99.4444 136.754 101.997 136.476 104.658 136.306C106.478 136.201 108.283 136.016 110.061 135.714C110.319 132.264 110.396 128.794 110.469 125.36C110.631 116.796 110.396 108.228 110.257 99.6687C110.238 93.7934 110.184 87.9141 110.088 82.0387C109.956 76.3026 109.737 70.5626 109.679 64.8225C109.679 64.7607 109.69 64.7026 109.71 64.6485C105.113 64.6175 100.516 64.2114 96.0007 63.3875C90.6522 62.467 84.9719 61.295 80.7378 57.663C78.4472 55.4931 77.0435 52.5651 75.8944 49.6757C74.2246 45.4442 73.384 40.9729 73.3724 36.4319C73.2529 32.7961 73.1796 29.1525 72.9482 25.5244C72.7747 25.1956 72.6397 24.8513 72.4354 24.5342C72.2618 24.3524 72.0304 24.2402 71.8261 24.101C71.7027 24.0043 71.5716 23.9269 71.4366 23.8612C66.9132 23.1611 62.3089 23.3777 57.774 22.7897C52.9306 22.1593 47.9213 22.3449 43.0663 22.6118C39.1291 22.9445 35.1726 23.2229 31.2817 23.9385C31.0156 25.7642 30.8151 27.6014 30.657 29.4271C30.0014 37.8592 30.8537 46.2758 30.9848 54.7079C31.2971 65.8901 31.0889 77.0762 31.5324 88.2545L31.5401 88.2506Z" fill="#DE83F0"/>
+<path d="M0.944779 104.542C1.19929 111.729 1.09903 118.923 1.41909 126.106C1.55792 128.953 1.48079 131.811 1.66975 134.654C2.00139 139.265 2.70707 143.995 4.15702 148.409C5.46813 152.068 6.79853 155.905 9.81796 158.523C12.1625 160.941 15.3362 162.445 18.6063 163.118C21.1283 163.567 23.7081 163.513 26.2609 163.567C30.0516 163.617 33.742 163.857 37.5404 164.058C41.1112 164.124 44.6551 164.534 48.2221 164.758C50.7055 164.793 53.0655 164.952 55.5875 165.118C62.4863 165.424 69.3735 166.05 76.28 165.984C81.2391 166.097 86.1712 165.443 91.0185 164.437C97.5432 163.2 103.721 159.293 106.995 153.41C109.922 148.393 110.535 142.417 111.113 136.697C112.259 136.476 113.396 136.205 114.518 135.861C116.458 135.339 118.448 134.879 120.245 133.954C122.046 132.925 123.785 131.734 125.246 130.256C127.121 128.307 128.509 125.94 129.885 123.627C131.814 119.933 132.4 115.732 133.182 111.686C133.776 107.583 133.992 103.428 133.996 99.282C133.9 96.3849 133.587 93.6155 133.549 90.6759C133.514 86.5449 133.46 82.414 133.36 78.283C133.337 76.6159 133.24 74.9721 133.213 73.3243C133.271 73.158 133.29 72.9801 133.252 72.8176C133.233 72.6552 133.221 72.4966 133.209 72.3341C133.209 71.723 133.225 71.108 133.26 70.493C133.634 70.2261 133.452 69.5028 133.452 69.058C133.41 68.3966 133.352 67.7236 133.252 67.0622C133.036 63.0859 129.978 60.7574 127.174 57.7868C124.02 54.6074 120.781 51.5169 117.638 48.322C111.291 42.025 105.371 35.3064 99.0163 29.0172C92.6111 22.7743 86.2985 16.4851 81.0155 9.22111C79.4845 7.12856 78.0346 4.97026 76.2029 3.12138C75.7594 2.6495 75.2273 2.29365 74.6527 1.99582C74.3558 1.80629 73.839 1.49299 73.3801 1.38468C72.9367 0.742607 71.1088 0.835437 70.4378 0.665248C69.0342 0.491192 67.6421 0.255248 66.2307 0.181757C64.372 -0.0735265 62.386 -0.046451 60.4965 0.0889266C57.4925 0.10053 54.5193 0.266851 51.523 0.529871C47.2388 0.854777 42.7733 1.67865 39.2718 4.34365C36.8308 6.32403 34.5749 8.75696 33.2407 11.6347C31.8139 15.2899 30.873 19.0766 30.2637 22.9213C27.8227 23.3623 25.3933 23.8419 22.9407 24.2248C20.2568 24.6116 17.6307 25.3078 15.1395 26.3831C13.2847 27.0445 11.4877 27.8877 9.88737 29.0443C8.38344 30.0422 6.86023 31.0981 5.68794 32.4983C3.60172 35.2252 2.63381 38.6135 1.75459 41.8897C3.67605e-06 51.0334 0.127259 60.417 0.0308535 69.6885C-0.080977 75.5639 0.154253 81.4315 0.320071 87.303C0.547588 93.0508 0.505169 98.8063 0.948635 104.542H0.944779ZM131.975 70.8875C131.987 71.3826 132.018 71.8777 132.056 72.369C132.056 72.6049 132.056 72.837 132.056 73.0729C131.983 73.2354 131.975 73.421 132.056 73.5796C132.091 76.0822 132.257 78.5963 132.249 81.0911C132.431 85.2105 132.265 89.3337 132.492 93.4492C132.967 98.903 132.928 104.395 132.257 109.838C131.999 112.271 131.463 114.537 130.942 116.958C130.564 118.92 129.939 120.83 129.091 122.637C127.155 126.137 124.934 129.661 121.483 131.831C119.393 133.397 116.875 134.055 114.38 134.701C113.338 135.018 112.289 135.273 111.233 135.486C111.244 135.374 111.256 135.262 111.268 135.153C111.954 123.6 111.603 112.008 111.414 100.446C111.36 93.2403 111.356 86.0305 111.167 78.8284C111.055 76.3413 110.998 73.8504 110.947 71.3594C111.025 71.0809 110.994 70.7057 111.048 70.4195C111.252 69.3133 111.406 68.1993 111.946 67.1743C112.675 65.7935 113.435 64.9541 115.02 64.6215C115.536 64.7066 116.022 64.5287 116.527 64.49C116.504 64.49 116.485 64.4861 116.462 64.4822C116.45 64.4822 116.439 64.4784 116.427 64.4745C116.608 64.5132 116.759 64.4745 116.875 64.3933C120.145 64.1728 123.399 63.9523 126.677 64.2927C128.046 64.6834 129.716 65.0005 130.857 65.9172C130.846 66.0797 130.892 66.2576 131.031 66.4355C131.675 67.8087 131.814 69.3404 131.949 70.8334C131.949 70.8527 131.956 70.8682 131.96 70.8875H131.975ZM72.4778 2.1428C72.4778 2.1428 72.4932 2.1544 72.5009 2.16214C72.5935 2.37487 72.8094 2.52959 73.0485 2.51025C74.537 2.99761 75.6592 4.13091 76.6309 5.32224C78.1387 7.08215 79.446 9.11668 80.8651 10.9694C83.522 14.4854 86.4335 17.7808 89.395 21.0492C92.3451 24.2403 95.592 27.1374 98.6153 30.2588C104.955 36.5635 110.87 43.2821 117.233 49.5636C120.395 52.774 123.665 55.8761 126.82 59.0865C128.54 60.9121 130.491 62.5754 131.625 64.8613C131.659 64.9387 131.686 65.016 131.717 65.0934C130.765 64.2618 129.523 63.933 128.351 63.5307C126.349 62.8384 124.201 62.9776 122.115 62.9737C117.877 63.0047 113.655 63.6352 109.409 63.4921C106.482 63.4147 103.544 63.2058 100.624 62.9544C98.6037 62.6643 96.5946 62.3007 94.5817 61.9526C90.6252 61.2448 86.6224 60.2082 83.1479 58.0344C79.9897 56.054 78.2775 52.5458 76.951 49.173C76.3803 47.5832 75.8018 45.9316 75.3969 44.253C74.9728 42.4002 74.8069 40.4779 74.6026 38.5864C74.3712 33.1056 74.4329 27.6054 73.8313 22.1477C73.4688 18.5235 73.1025 14.907 73.3261 11.2479C73.1333 8.23479 73.9354 4.6995 72.2156 2.09638C72.3004 2.11185 72.3891 2.11959 72.4739 2.13506L72.4778 2.1428ZM34.6675 11.3098C38.1728 5.51177 42.9776 2.44063 49.7453 1.89138C54.5155 1.34987 59.382 1.21836 64.1908 1.16421C66.3001 1.346 68.4172 1.55487 70.5227 1.84497C70.5574 1.91846 70.6114 1.98421 70.6885 2.03836C71.1744 2.57214 71.5561 3.21035 71.8338 3.89884C72.3235 5.39186 72.1577 7.08215 72.15 8.64866C72.1346 11.8822 72.0613 15.2048 72.3081 18.4771C72.1654 18.7169 72.0729 19.0302 71.9379 19.2429C71.5099 20.032 70.8543 20.7398 70.0831 21.2117C69.3465 21.6797 68.4133 21.9002 67.5341 21.9814C67.2757 22.024 67.0636 22.0781 66.786 22.1245C66.6433 22.1091 66.5006 22.1439 66.3811 22.2096C64.7383 22.1323 63.0917 22.0858 61.4528 21.9543C59.382 21.819 57.1801 21.4941 55.0901 21.32C51.8007 21.1924 48.4998 21.173 45.2143 21.32C41.065 21.5714 36.9118 21.8963 32.8011 22.4881C32.3615 22.5616 31.9218 22.639 31.4784 22.7163C32.1108 18.8058 33.0787 14.9495 34.6713 11.3098H34.6675ZM30.6647 29.4194C30.8267 27.5938 31.0233 25.7565 31.2894 23.9309C35.1804 23.2153 39.1368 22.9329 43.0741 22.6042C47.9252 22.3411 52.9344 22.1555 57.7817 22.7821C62.3205 23.37 66.921 23.1534 71.4443 23.8535C71.5793 23.9192 71.7142 23.9966 71.8338 24.0933C72.042 24.2326 72.2734 24.3447 72.4431 24.5265C72.6436 24.8437 72.7786 25.1879 72.9559 25.5167C73.1873 29.1487 73.2606 32.7923 73.3801 36.4243C73.3917 40.9652 74.2324 45.4404 75.9021 49.6681C77.0474 52.5574 78.4549 55.4854 80.7455 57.6553C84.9797 61.2873 90.6599 62.4632 96.0085 63.3799C100.524 64.1999 105.117 64.6099 109.717 64.6408C109.698 64.695 109.687 64.753 109.687 64.8149C109.744 70.5549 109.964 76.291 110.095 82.031C110.192 87.9064 110.242 93.7818 110.265 99.6611C110.4 108.225 110.639 116.788 110.477 125.352C110.404 128.787 110.323 132.256 110.068 135.706C108.287 136.008 106.486 136.194 104.666 136.298C102.001 136.472 99.4521 136.747 96.7643 136.844C92.4916 136.898 88.2767 137.536 83.9809 137.431C76.7505 137.335 69.5085 137.756 62.2781 137.416C53.1774 136.615 42.002 135.242 37.0468 126.419C34.3474 121.662 33.3371 116.1 32.8666 110.689C31.9643 103.247 31.8332 95.7313 31.5478 88.2429C31.1043 77.0646 31.3126 65.8786 31.0002 54.6964C30.8691 46.2643 30.0169 37.8477 30.6724 29.4156L30.6647 29.4194ZM1.28027 60.9818C1.56563 53.2923 1.53478 45.394 4.10303 38.0411C5.67251 33.6626 7.26899 32.0535 11.1445 29.5974C13.2191 28.201 15.6794 27.4661 17.9893 26.534C21.9304 25.3659 26.0488 24.9481 30.0824 24.1591C29.288 29.8449 29.1839 35.6507 29.2958 41.3752C30.2907 56.0153 29.7701 70.7019 30.3215 85.3575C30.5683 93.7547 30.7033 102.183 31.6789 110.538C32.0144 114.529 32.6275 118.521 33.9387 122.319C35.6662 127.615 38.7975 131.792 43.7836 134.38C47.9136 136.461 52.4987 137.486 57.0683 138.015C60.7896 138.658 64.5764 138.727 68.3478 138.712C74.5062 138.688 80.6607 138.584 86.8229 138.572C88.8937 138.514 90.953 138.333 93.0199 138.159C97.308 138.027 101.696 137.706 105.988 137.373C107.319 137.269 108.649 137.118 109.968 136.905C109.594 141.191 108.915 145.438 107.581 149.546C105.059 156.582 98.6191 161.679 91.3887 163.188C81.6864 165.482 71.6872 164.901 61.8269 164.286C54.1761 163.911 46.5408 163.459 38.8939 162.94C34.1855 162.766 29.45 162.399 24.7261 162.38C21.1476 162.414 17.5073 162.117 14.268 160.38C12.2898 159.428 10.6509 157.819 9.15469 156.16C8.09422 154.965 7.43095 153.499 6.78696 152.041C3.45904 144.517 2.62609 136.24 2.64923 128.079C2.52198 123.058 2.24433 118.038 2.27903 113.013C2.36001 107.389 1.8587 101.788 1.70831 96.1722C1.44609 84.4446 0.925498 72.7209 1.28798 60.9856L1.28027 60.9818Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4501_15395">
+<rect width="134" height="166" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+
+export function Files() {
+  return <SvgXml xml={svgContent} width="134" height="166" />;
+}