Add Documentation drawer on Check your Keycard screen

Author: Parveshdhull

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-info)]
+    [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

translations/en.json

@@ -1393,6 +1393,7 @@
   "keycard-free-pairing-slots": "Keycard has {{n}} free pairing slots",
   "keycard-full": "Keycard is full",
   "keycard-has-multiaccount-on-it": "This card is full. Each card can hold one main key pair",
+  "keycard-info": "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-init-description": "Put the card to the back of your phone to continue",
   "keycard-init-title": "Looking for cards...",
   "keycard-is-blocked-details": "You can no longer use this card to access or sign for this account. There have been too many failed passcode and PUK attempts.",