Implement Wallet Connect 2.0

Signed-off-by: Brian Sztamfater <brian@status.im>

Author: briansztamfater

index.js

@@ -1 +1,2 @@
+import "node-libs-react-native/globals";
 import "./app/index.js";

ios/Podfile.lock

@@ -208,6 +208,8 @@ PODS:
     - React
   - react-native-blob-util (0.13.18):
     - React-Core
+  - react-native-blur (0.8.0):
+    - React
   - react-native-camera-kit (8.0.4):
     - React
   - react-native-cameraroll (4.0.4):
@@ -224,6 +226,8 @@ PODS:
     - React
   - react-native-notifications (4.1.3):
     - React-Core
+  - react-native-randombytes (3.6.1):
+    - React-Core
   - react-native-safe-area-context (2.0.0):
     - React
   - react-native-shake (3.4.0):
@@ -422,13 +426,15 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
   - react-native-blob-util (from `../node_modules/react-native-blob-util`)
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-camera-kit (from `../node_modules/react-native-camera-kit`)
   - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
   - react-native-mail (from `../node_modules/react-native-mail`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-notifications (from `../node_modules/react-native-notifications`)
+  - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-shake (from `../node_modules/react-native-shake`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
@@ -525,6 +531,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-background-timer"
   react-native-blob-util:
     :path: "../node_modules/react-native-blob-util"
+  react-native-blur:
+    :path: "../node_modules/@react-native-community/blur"
   react-native-camera-kit:
     :path: "../node_modules/react-native-camera-kit"
   react-native-cameraroll:
@@ -539,6 +547,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-notifications:
     :path: "../node_modules/react-native-notifications"
+  react-native-randombytes:
+    :path: "../node_modules/react-native-randombytes"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-shake:
@@ -653,13 +663,15 @@ SPEC CHECKSUMS:
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
   react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
   react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
+  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-camera-kit: 498a6d111a904834e0824e9073cfadef7303235f
   react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2
   react-native-config: c98128a72bc2c3a1ca72caec0b021f0fa944aa29
   react-native-image-resizer: 2f1577efa3bc762597681f530c8e8d05ce0ceeb3
   react-native-mail: 8fdcd3aef007c33a6877a18eb4cf7447a1d4ce4a
   react-native-netinfo: ddaca8bbb9e6e914b1a23787ccb879bc642931c9
   react-native-notifications: 805108822ceff3440644d5701944f0cda35f5b4b
+  react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-safe-area-context: 60f654e00b6cc416573f6d5dbfce3839958eb57a
   react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
   react-native-slider: 12bd76d3d568c9c5500825db54123d44b48e4ad4

metro.config.js

@@ -13,4 +13,7 @@ module.exports = {
             },
         }),
     },
+    resolver: {
+        extraNodeModules: require('node-libs-react-native'),
+    },
 };

package.json

@@ -13,13 +13,15 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#v2.0.3-status-v6",
+    "@react-native-community/blur": "^3.6.0",
     "@react-native-community/cameraroll": "git+https://github.com/status-im/react-native-cameraroll.git#v4.0.4-status.0",
     "@react-native-community/clipboard": "^1.2.2",
     "@react-native-community/hooks": "^2.5.1",
     "@react-native-community/masked-view": "^0.1.6",
     "@react-native-community/netinfo": "^4.4.0",
     "@react-native-community/push-notification-ios": "^1.4.1",
     "@react-native-community/slider": "^3.0.0",
+    "@walletconnect/client": "^2.0.0-beta.23",
     "bignumber.js": "git+https://github.com/status-im/bignumber.js.git#v4.0.2-status",
     "buffer": "^5.4.2",
     "chance": "^1.1.0",
@@ -30,6 +32,7 @@
     "hermes-engine": "0.5.2-rc1",
     "hi-base32": "^0.5.0",
     "i18n-js": "^3.3.0",
+    "node-libs-react-native": "^1.2.1",
     "qrcode": "^1.4.1",
     "react": "16.13.1",
     "react-dom": "^16.4.2",
@@ -56,6 +59,7 @@
     "react-native-navigation": "^7.13.0",
     "react-native-notifications": "^4.1.3",
     "react-native-permissions": "^2.1.5",
+    "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "^2.1.0",
     "react-native-redash": "^16.0.11",
     "react-native-safe-area-context": "^2.0.0",

react-native.config.js

@@ -22,5 +22,10 @@ module.exports = {
                 ios: null,
             },
         },
+        '@react-native-community/blur': {
+            platforms: {
+                android: null,
+            },
+        },
     },
 };

resources/images/icons/billfold@2x.png

@@ -213,6 +213,16 @@
 (def react-native-notifications
   #js {:Notifications #js {}})
 
+(def react-native-blur
+  (clj->js {:BlurView {}}))
+
+(def wallet-connect-client #js {:default       #js {}
+                                :CLIENT_EVENTS #js {:session #js {:request nil
+                                                                  :created nil
+                                                                  :deleted nil
+                                                                  :proposal nil
+                                                                  :updated nil}}})
+
 ;; Update i18n_resources.cljs
 (defn mock [module]
   (case module
@@ -243,12 +253,14 @@
     "react-native-linear-gradient" react-native-gradien
     "react-native-navigation" react-native-navigation
     "@react-native-community/push-notification-ios" push-notification-ios
+    "@react-native-community/blur" react-native-blur
     "react-native-camera-kit" react-native-camera-kit
     "rn-emoji-keyboard" rn-emoji-keyboard
     "react-native-notifications" react-native-notifications
     "react-native-draggable-flatlist" react-native-draggable-flatlist
     "./fleets.js" default-fleets
     "./chats.js" default-chats
+    "@walletconnect/client" wallet-connect-client
     "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))
     "../translations/de.json" (js/JSON.parse (slurp "./translations/de.json"))
     "../translations/en.json" (js/JSON.parse (slurp "./translations/en.json"))

resources/images/icons/billfold@3x.png

@@ -57,6 +57,8 @@
 (defn pressable-hooks [props]
   (let [{background-color    :bgColor
          border-radius       :borderRadius
+         border-color        :borderColor
+         border-width        :borderWidth
          type                :type
          disabled            :disabled
          on-press            :onPress
@@ -121,7 +123,9 @@
          [animated/view {:style (merge absolute-fill
                                        background
                                        {:background-color background-color
-                                        :border-radius    border-radius})}]
+                                        :border-radius    border-radius
+                                        :border-color     border-color
+                                        :border-width     border-width})}]
          (into [animated/view {:style foreground}]
                (react/get-children children))]]]])))
 

resources/images/icons/checkmark@2x.png

@@ -28,27 +28,31 @@
 
 (defn themes [theme]
   (case theme
-    :main     {:icon-color       (:icon-04 @colors/theme)
-               :background-color (:interactive-02 @colors/theme)
-               :text-color       (:text-04 @colors/theme)}
-    :icon     {:icon-color       (:icon-01 @colors/theme)
-               :background-color (:interactive-02 @colors/theme)
-               :text-color       (:text-01 @colors/theme)}
-    :negative {:icon-color       (:negative-01 @colors/theme)
-               :background-color (:negative-02 @colors/theme)
-               :text-color       (:negative-01 @colors/theme)}
-    :positive {:icon-color       (:positive-01 @colors/theme)
-               :background-color (:positive-02 @colors/theme)
-               :text-color       (:positive-01 @colors/theme)}
-    :accent   {:icon-color       (:icon-05 @colors/theme)
-               :background-color (:interactive-01 @colors/theme)
-               :text-color       (:text-05 @colors/theme)}
-    :secondary {:icon-color       (:icon-02 @colors/theme)
-                :background-color (:interactive-02 @colors/theme)
-                :text-color       (:text-02 @colors/theme)}
-    :disabled {:icon-color       (:icon-02 @colors/theme)
-               :background-color (:ui-01 @colors/theme)
-               :text-color       (:text-02 @colors/theme)}))
+    :main         {:icon-color       (:icon-04 @colors/theme)
+                   :background-color (:interactive-02 @colors/theme)
+                   :text-color       (:text-04 @colors/theme)}
+    :icon         {:icon-color       (:icon-01 @colors/theme)
+                   :background-color (:interactive-02 @colors/theme)
+                   :text-color       (:text-01 @colors/theme)}
+    :negative     {:icon-color       (:negative-01 @colors/theme)
+                   :background-color (:negative-02 @colors/theme)
+                   :text-color       (:negative-01 @colors/theme)}
+    :positive     {:icon-color       (:positive-01 @colors/theme)
+                   :background-color (:positive-02 @colors/theme)
+                   :text-color       (:positive-01 @colors/theme)}
+    :accent       {:icon-color       (:icon-05 @colors/theme)
+                   :background-color (:interactive-01 @colors/theme)
+                   :text-color       (:text-05 @colors/theme)}
+    :secondary    {:icon-color       (:icon-02 @colors/theme)
+                   :background-color (:interactive-02 @colors/theme)
+                   :text-color       (:text-02 @colors/theme)}
+    :disabled     {:icon-color       (:icon-02 @colors/theme)
+                   :background-color (:ui-01 @colors/theme)
+                   :text-color       (:text-02 @colors/theme)}
+    :monocromatic {:icon-color       (:icon-01 @colors/theme)
+                   :background-color (:ui-background @colors/theme)
+                   :text-color       (:text-01 @colors/theme)
+                   :border-color     (:ui-01 @colors/theme)}))
 
 (defn button [{:keys [on-press disabled type theme before after
                       haptic-feedback haptic-type on-long-press on-press-start
@@ -62,7 +66,7 @@
   (let [theme' (cond
                  disabled :disabled
                  :else    theme)
-        {:keys [icon-color background-color text-color]}
+        {:keys [icon-color background-color text-color border-color]}
         (themes theme')
 
         optional-haptic (fn []
@@ -73,6 +77,9 @@
                                  :type                type
                                  :disabled            disabled
                                  :accessibility-label accessibility-label}
+                                (when border-color
+                                  {:border-color border-color
+                                   :border-width 1})
                                 (when on-press
                                   {:on-press (fn []
                                                (optional-haptic)

resources/images/icons/checkmark@3x.png

@@ -20,6 +20,7 @@
 (def light-theme
   {:positive-01    "rgba(68,208,88,1)"     ; Primary Positive, text, icons color
    :positive-02    "rgba(78,188,96,0.1)"   ; Secondary Positive, Supporting color for success illustrations
+   :positive-03    "rgba(78,188,96,1)"     ; Lighter Positive, Supporting color for success illustrations
    :negative-01    "rgba(255,45,85,1)"     ; Primary Negative, text, icons color
    :negative-02    "rgba(255,45,85,0.1))"  ; Secondary Negative, Supporting color for errors illustrations
    :warning-01     "rgba(255, 202, 15, 1)"
@@ -46,11 +47,13 @@
    :backdrop       "rgba(0,0,0,0.4)"       ; Backdrop for modals and bottom sheet
    :border-01      "rgba(238,242,245,1)"
    :border-02      "rgba(67, 96, 223, 0.1)"
-   :highlight      "rgba(67,96,223,0.4)"})
+   :highlight      "rgba(67,96,223,0.4)"
+   :blurred-bg     "rgba(255,255,255,0.3)"})
 
 (def dark-theme
   {:positive-01    "rgba(68,208,88,1)"
    :positive-02    "rgba(78,188,96,0.1)"
+   :positive-03    "rgba(78,188,96,1)"
    :negative-01    "rgba(252,95,95,1)"
    :negative-02    "rgba(252,95,95,0.1)"
    :warning-01     "rgba(255, 202, 15, 1)"
@@ -77,7 +80,8 @@
    :backdrop       "rgba(0,0,0,0.4)"
    :border-01      "rgba(37,37,40,1)"
    :border-02      "rgba(97,119,229,0.1)"
-   :highlight      "rgba(67,96,223,0.4)"})
+   :highlight      "rgba(67,96,223,0.4)"
+   :blurred-bg     "rgba(0,0,0,0.3)"})
 
 (def theme (reagent/atom light-theme))
 

resources/images/icons/chevron_down@2x.png

@@ -61,7 +61,8 @@
             status-im.wallet.custom-tokens.core
             [status-im.navigation.core :as navigation.core]
             [status-im.multiaccounts.login.core :as login.core]
-            [status-im.signing.core :as signing]))
+            [status-im.signing.core :as signing]
+            status-im.wallet-connect.core))
 
 (re-frame/reg-fx
  :dismiss-keyboard

resources/images/icons/chevron_down@3x.png

@@ -42,7 +42,8 @@
             [status-im.ui.components.react :as react]
             [status-im.utils.platform :as platform]
             [status-im.ethereum.tokens :as tokens]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [status-im.utils.wallet-connect :as wallet-connect]))
 
 (re-frame/reg-fx
  ::initialize-communities-enabled
@@ -82,6 +83,20 @@
  (fn []
    (status/start-local-notifications)))
 
+(re-frame/reg-fx
+ ::initialize-wallet-connect
+ (fn []
+   (wallet-connect/init
+    #(re-frame/dispatch [:wallet-connect/client-init %])
+    #(log/error "[wallet-connect]" %))))
+
+(re-frame/reg-fx
+ ::initialize-wallet-connect
+ (fn []
+   (async-storage/get-item
+    :wallet-connect-enabled?
+    #(re-frame/dispatch [:multiaccounts.ui/switch-wallet-connect-enabled %]))))
+
 (defn rpc->accounts [accounts]
   (reduce (fn [acc {:keys [chat type wallet] :as account}]
             (if chat
@@ -343,6 +358,10 @@
   [cofx]
   {::initialize-transactions-management-enabled nil})
 
+(fx/defn initialize-wallet-connect
+  [cofx]
+  {::initialize-wallet-connect nil})
+
 (fx/defn get-node-config-callback
   {:events [::get-node-config-callback]}
   [{:keys [db] :as cofx} node-config-json]
@@ -377,6 +396,7 @@
               (acquisition/login)
               (initialize-appearance)
               (initialize-communities-enabled)
+              (initialize-wallet-connect)
               (get-node-config)
               (communities/fetch)
               (logging/set-log-level (:log-level multiaccount))

resources/images/icons/chevron_right@2x.png

@@ -86,3 +86,20 @@
   [_]
   {:hide-select-acc-sheet nil})
 
+(fx/defn hide-wallet-connect-sheet
+  {:events [:hide-wallet-connect-sheet]}
+  [_]
+  {:hide-wallet-connect-sheet nil})
+
+(fx/defn hide-wallet-connect-success-sheet
+  {:events [:hide-wallet-connect-success-sheet]}
+  [_]
+  {:hide-wallet-connect-success-sheet nil})
+
+(fx/defn hide-wallet-connect-app-management-sheet
+  {:events [:hide-wallet-connect-app-management-sheet]}
+  [{:keys [db]}]
+  {:db (-> db
+           (assoc db :wallet-connect/showing-app-management-sheet? false)
+           (dissoc :wallet-connect/session-managed))
+   :hide-wallet-connect-app-management-sheet nil})