Add Documentation drawer on Check your Keycard screen

Author: Parveshdhull

Diff for: src/status_im/contexts/keycard/check/view.cljs

@@ -3,16 +3,39 @@
             [react-native.core :as rn]
             [status-im.common.events-helper :as events-helper]
             [status-im.common.resources :as resources]
+            [status-im.constants :as constants]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
+(defn- keycard-documentation
+  []
+  [quo/documentation-drawers
+   {:title  (i18n/label :t/keycard)
+    :shell? true}
+   [rn/view
+    [quo/text {:size :paragraph-2}
+     (i18n/label :t/keycard-documentation)]
+    [quo/button
+     {:size                40
+      :type                :primary
+      :container-style     {:margin-top 24 :margin-bottom 12}
+      :background          :blur
+      :icon-right          :i/external
+      :on-press            #(rf/dispatch [:browser.ui/open-url constants/get-keycard-url])
+      :accessibility-label :get-keycard}
+     (i18n/label :t/buy-keycard)]]])
+
 (defn view
   []
   (let [{:keys [on-press]} (rf/sub [:get-screen-params])]
     [:<>
      [quo/page-nav
-      {:icon-name :i/arrow-left
-       :on-press  events-helper/navigate-back}]
+      {:icon-name  :i/arrow-left
+       :on-press   events-helper/navigate-back
+       :right-side [{:icon-name :i/info
+                     :on-press  #(rf/dispatch [:show-bottom-sheet
+                                               {:content keycard-documentation
+                                                :shell?  true}])}]}]
      [quo/page-top
       {:title            (i18n/label :t/check-keycard)
        :description      :text

Diff for: translations/en.json

@@ -1381,6 +1381,7 @@
   "keycard-connected-title": "Connected",
   "keycard-contains-key-pair": "Keycard contains your profile key pair",
   "keycard-desc": "Own a Keycard? Store your keys on it; you’ll need it for transactions",
+  "keycard-documentation": "Keycard is a hardware wallet in a credit-card sized smartcard that works with the Status app. You can store your Status keys and sign transactions securely with it.\n\nKeycard is designed to be mobile-friendly and uses contactless NFC technology to communicate with your phone, so you can sign transactions with just a tap of the card. It is lightweight, convenient, and can fit in your wallet, pocket, or phone case.\n\nProtect your assets and accounts with the Keycard, a cold storage hardware wallet that provides a contactless and convenient experience.",
   "keycard-dont-ask-card": "Don't ask for card to sign in",
   "keycard-empty": "Keycard is empty",
   "keycard-empty-ready": "Keycard is empty and ready to be used",