feat(wallet): add ui for account origin info (#18725)

Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>

src/status_im/constants.cljs

@@ -257,6 +257,7 @@
 (def ^:const terms-of-service-link "https://status.im/terms-of-use")
 (def ^:const docs-link "https://status.im/docs/")
 (def ^:const principles-link "https://our.status.im/our-principles/")
+(def ^:const create-account-link "https://status.app/help/wallet/create-wallet-accounts")
 
 (def ^:const visibility-status-unknown 0)
 (def ^:const visibility-status-automatic 1)

src/status_im/contexts/wallet/common/sheets/account_origin/style.cljs

@@ -0,0 +1,21 @@
+(ns status-im.contexts.wallet.common.sheets.account-origin.style
+  (:require [react-native.platform :as platform]))
+
+(def header-container
+  {:gap                2
+   :padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     6})
+
+(def desc-container
+  {:gap                2
+   :padding-horizontal 20
+   :padding-top        0
+   :padding-bottom     8})
+
+(def action-container
+  {:padding-horizontal 20
+   :padding-top        21
+   :padding-bottom     (if platform/ios? 14 24)
+   :align-self         :flex-start
+   :justify-content    :center})

src/status_im/contexts/wallet/common/sheets/account_origin/view.cljs

@@ -0,0 +1,47 @@
+(ns status-im.contexts.wallet.common.sheets.account-origin.view
+  (:require
+    [quo.core :as quo]
+    [quo.theme]
+    [react-native.core :as rn]
+    [status-im.constants :as const]
+    [status-im.contexts.wallet.common.sheets.account-origin.style :as style]
+    [utils.i18n :as i18n]))
+
+(defn- header
+  [text]
+  [quo/text
+   {:weight :semi-bold
+    :style  style/header-container}
+   text])
+
+(defn- description
+  [text]
+  [quo/text
+   {:size  :paragraph-2
+    :style style/desc-container}
+   text])
+
+(defn- section
+  [title desc]
+  [:<>
+   [header title]
+   [description desc]])
+
+(defn- view-internal
+  []
+  [rn/view
+   [quo/drawer-top {:title (i18n/label :t/account-origin-header)}]
+   [description (i18n/label :t/account-origin-desc)]
+   [section (i18n/label :t/origin-header) (i18n/label :t/origin-desc)]
+   [section
+    (i18n/label :t/derivation-path-header)
+    (i18n/label :t/derivation-path-desc)]
+   [quo/button
+    {:type            :outline
+     :size            24
+     :icon-left       :i/info
+     :container-style style/action-container
+     :on-press        #(rn/open-url const/create-account-link)}
+    (i18n/label :t/read-more)]])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/create_account/view.cljs

@@ -10,6 +10,7 @@
     [status-im.common.emoji-picker.utils :as emoji-picker.utils]
     [status-im.common.standard-authentication.core :as standard-auth]
     [status-im.constants :as constants]
+    [status-im.contexts.wallet.common.sheets.account-origin.view :as account-origin]
     [status-im.contexts.wallet.common.utils :as utils]
     [status-im.contexts.wallet.create-account.style :as style]
     [status-im.feature-flags :as ff]
@@ -69,7 +70,9 @@
        [quo/page-nav
         {:type       :no-title
          :background :blur
-         :right-side [{:icon-name :i/info}]
+         :right-side [{:icon-name :i/info
+                       :on-press  #(rf/dispatch [:show-bottom-sheet
+                                                 {:content account-origin/view}])}]
          :icon-name  :i/close
          :on-press   #(rf/dispatch [:navigate-back])}]
        [quo/gradient-cover

translations/en.json

@@ -2495,5 +2495,11 @@
     "do-not-cheat": "Don't try to cheat",
     "do-not-cheat-description": "These 12 words give access to all of your funds so it is important that you write them in the correct order, take it seriously.",
     "see-recovery-phrase-again": "See recovery phrase again",
-    "fees": "Fees"
+    "fees": "Fees",
+    "account-origin-header": "Account origin",
+    "account-origin-desc": "To create a new account, you can generate a key pair in the app or import an existing account.",
+    "origin-header": "Origin",
+    "origin-desc": "Origin is where your key pair (your private and public key) comes from. You can generate a new key pair or import an existing private key.",
+    "derivation-path-header": "Derivation path",
+    "derivation-path-desc": "Derivation paths are the routes your Status Wallet uses to generate addresses from your private key."
 }