Connect wallet to a dapp using WalletConnect (#38)

* Connect with dapp using WalletConnect

* Pair dapp with wallet

* Sign message taken from dapp and return the signature

* Add todos

* Move wallet connect functions to seperate screen

* Change ui

* Change ui for wc modals

* Add styles

* Remove border radius at the bottom

* Make review changes

* Add dependancy to useEffect

* Move pairing modal methods

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>

styles/stylesheet.js

@@ -131,12 +131,66 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 20,
   },
-  messageText: {
+  invalidMessageText: {
     color: 'black',
     fontSize: 16,
     textAlign: 'center',
     marginBottom: 20,
   },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalContentContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 34,
+    borderBottomStartRadius: 0,
+    borderBottomEndRadius: 0,
+    borderWidth: 1,
+    width: '100%',
+    height: '50%',
+    position: 'absolute',
+    backgroundColor: 'white',
+    bottom: 0,
+  },
+  dappLogo: {
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+    marginVertical: 16,
+  },
+  space: {
+    width: 50,
+  },
+  flexRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 20,
+    paddingHorizontal: 16,
+  },
+  marginVertical8: {
+    marginVertical: 8,
+    textAlign: 'center',
+  },
+  subHeading: {
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+  centerText: {
+    textAlign: 'center',
+  },
+  messageBody: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    marginVertical: 20,
+  },
 });
 
 export default styles;