From 9d8644ebfc0f1f84d012a6b907a78601c8f1e565 Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Fri, 14 Apr 2023 17:53:32 -0300
Subject: [PATCH 1/7] fix: improved views for landscape mode

---
 example/app.json              |  2 +-
 src/components/Web3Modal.tsx  | 14 ++++++--------
 src/constants/Platform.ts     |  6 +-----
 src/hooks/useOrientation.ts   | 24 ++++++++++++++++++++++++
 src/views/Account.tsx         |  6 +++---
 src/views/InitialExplorer.tsx | 16 +++++++---------
 src/views/QRCodeView.tsx      | 10 ++++------
 src/views/ViewAllExplorer.tsx | 16 +++++++---------
 8 files changed, 53 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/useOrientation.ts

diff --git a/example/app.json b/example/app.json
index 32999280..3c06f507 100644
--- a/example/app.json
+++ b/example/app.json
@@ -3,7 +3,7 @@
     "name": "web3modal-rn-example",
     "slug": "web3modal-rn-example",
     "version": "1.0.0",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "splash": {
diff --git a/src/components/Web3Modal.tsx b/src/components/Web3Modal.tsx
index fc207f85..63302fb1 100644
--- a/src/components/Web3Modal.tsx
+++ b/src/components/Web3Modal.tsx
@@ -1,15 +1,14 @@
 import { useCallback, useEffect } from 'react';
 import {
   StyleSheet,
-  View,
   useColorScheme,
   ImageBackground,
   Alert,
+  SafeAreaView,
 } from 'react-native';
 import Modal from 'react-native-modal';
 import { useSnapshot } from 'valtio';
 
-import { DEVICE_WIDTH } from '../constants/Platform';
 import { DarkTheme, LightTheme } from '../constants/Colors';
 import Background from '../assets/Background.png';
 import Web3ModalHeader from './Web3ModalHeader';
@@ -20,6 +19,7 @@ import { ExplorerCtrl } from '../controllers/ExplorerCtrl';
 import { ConfigCtrl } from '../controllers/ConfigCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import { ClientCtrl } from '../controllers/ClientCtrl';
+import { useOrientation } from '../hooks/useOrientation';
 
 interface Web3ModalProps {
   projectId: string;
@@ -34,6 +34,7 @@ export function Web3Modal({
 }: Web3ModalProps) {
   const modalState = useSnapshot(ModalCtrl.state);
   const isDarkMode = useColorScheme() === 'dark';
+  const { width } = useOrientation();
 
   const onSessionCreated = useCallback(async () => {
     OptionsCtrl.getAccount();
@@ -126,19 +127,19 @@ export function Web3Modal({
       useNativeDriver
     >
       <ImageBackground
-        style={styles.wcContainer}
+        style={{ width }}
         source={Background}
         imageStyle={styles.wcImage}
       >
         <Web3ModalHeader onClose={ModalCtrl.close} />
-        <View
+        <SafeAreaView
           style={[
             styles.connectWalletContainer,
             isDarkMode && styles.connectWalletContainerDark,
           ]}
         >
           <Web3ModalRouter onCopyClipboard={onCopyClipboard} />
-        </View>
+        </SafeAreaView>
       </ImageBackground>
     </Modal>
   );
@@ -149,9 +150,6 @@ const styles = StyleSheet.create({
     margin: 0,
     justifyContent: 'flex-end',
   },
-  wcContainer: {
-    width: DEVICE_WIDTH,
-  },
   wcImage: {
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
diff --git a/src/constants/Platform.ts b/src/constants/Platform.ts
index 2de23c8d..f7d8885d 100644
--- a/src/constants/Platform.ts
+++ b/src/constants/Platform.ts
@@ -1,8 +1,4 @@
-import { Dimensions, Platform } from 'react-native';
-
-const windowDimensions = Dimensions.get('window');
-export const DEVICE_HEIGHT = windowDimensions.height;
-export const DEVICE_WIDTH = windowDimensions.width;
+import { Platform } from 'react-native';
 
 export const isAndroid = Platform.OS === 'android';
 export const isIOS = Platform.OS === 'ios';
diff --git a/src/hooks/useOrientation.ts b/src/hooks/useOrientation.ts
new file mode 100644
index 00000000..316b464f
--- /dev/null
+++ b/src/hooks/useOrientation.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { Dimensions, ScaledSize } from 'react-native';
+
+export function useOrientation() {
+  const [dimensions, setDimensions] = useState(Dimensions.get('window'));
+
+  useEffect(() => {
+    const callback = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
+
+    const subscription = Dimensions.addEventListener('change', callback);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return {
+    width: dimensions.width,
+    height: dimensions.height,
+    isPortrait: dimensions.height >= dimensions.width,
+  };
+}
diff --git a/src/views/Account.tsx b/src/views/Account.tsx
index 9b2c5cc0..1dda592e 100644
--- a/src/views/Account.tsx
+++ b/src/views/Account.tsx
@@ -10,7 +10,6 @@ import {
 } from 'react-native';
 import { useSnapshot } from 'valtio';
 
-import { DEVICE_HEIGHT } from '../constants/Platform';
 import { ClientCtrl } from '../controllers/ClientCtrl';
 import DisconnectIcon from '../assets/Disconnect.png';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
@@ -18,10 +17,12 @@ import { DarkTheme, LightTheme } from '../constants/Colors';
 import { ModalCtrl } from '../controllers/ModalCtrl';
 import type { RouterProps } from '../types/routerTypes';
 import NavHeader from '../components/NavHeader';
+import { useOrientation } from '../hooks/useOrientation';
 
 export function Account(_: RouterProps) {
   const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
+  const { height } = useOrientation();
 
   const onDisconnect = useCallback(async () => {
     try {
@@ -35,7 +36,7 @@ export function Account(_: RouterProps) {
   }, []);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { height: height * 0.4 }]}>
       <NavHeader title="Connected Account" />
       <View>
         <Text
@@ -70,7 +71,6 @@ export function Account(_: RouterProps) {
 
 const styles = StyleSheet.create({
   container: {
-    height: DEVICE_HEIGHT * 0.4,
     padding: 16,
   },
   button: {
diff --git a/src/views/InitialExplorer.tsx b/src/views/InitialExplorer.tsx
index a0d755d3..3ab1b36c 100644
--- a/src/views/InitialExplorer.tsx
+++ b/src/views/InitialExplorer.tsx
@@ -12,18 +12,20 @@ import WalletItem from '../components/WalletItem';
 import ViewAllBox from '../components/ViewAllBox';
 import QRIcon from '../assets/QR.png';
 import NavHeader from '../components/NavHeader';
-import { DEVICE_HEIGHT } from '../constants/Platform';
 import { DarkTheme, LightTheme } from '../constants/Colors';
 import type { Listing } from '../types/controllerTypes';
 import { RouterCtrl } from '../controllers/RouterCtrl';
 import { ExplorerCtrl } from '../controllers/ExplorerCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import type { RouterProps } from '../types/routerTypes';
+import { useOrientation } from '../hooks/useOrientation';
 
 function InitialExplorer(_: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
+  const { height, isPortrait } = useOrientation();
+
   const loading = !optionsState.isDataLoaded || !optionsState.sessionUri;
 
   const wallets = useMemo(() => {
@@ -39,7 +41,7 @@ function InitialExplorer(_: RouterProps) {
   }, [fadeAnim]);
 
   return (
-    <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
+    <Animated.View style={{ opacity: fadeAnim }}>
       <NavHeader
         title="Connect your Wallet"
         onActionPress={() => RouterCtrl.push('Qrcode')}
@@ -48,7 +50,9 @@ function InitialExplorer(_: RouterProps) {
       />
       {loading ? (
         <ActivityIndicator
-          style={styles.loader}
+          style={{
+            height: isPortrait ? height * 0.3 : height * 0.6,
+          }}
           color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
         />
       ) : (
@@ -68,9 +72,6 @@ function InitialExplorer(_: RouterProps) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    paddingBottom: 12,
-  },
   explorerContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -78,9 +79,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 4,
   },
-  loader: {
-    height: DEVICE_HEIGHT * 0.3,
-  },
   qrIcon: {
     height: 24,
     width: 24,
diff --git a/src/views/QRCodeView.tsx b/src/views/QRCodeView.tsx
index 469f1d39..562d374a 100644
--- a/src/views/QRCodeView.tsx
+++ b/src/views/QRCodeView.tsx
@@ -7,7 +7,6 @@ import {
 } from 'react-native';
 import { useSnapshot } from 'valtio';
 
-import { DEVICE_HEIGHT, DEVICE_WIDTH } from '../constants/Platform';
 import NavHeader from '../components/NavHeader';
 import QRCode from '../components/QRCode';
 import CopyIcon from '../assets/Copy.png';
@@ -15,11 +14,13 @@ import { DarkTheme, LightTheme } from '../constants/Colors';
 import { RouterCtrl } from '../controllers/RouterCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import type { RouterProps } from '../types/routerTypes';
+import { useOrientation } from '../hooks/useOrientation';
 
 function QRCodeView({ onCopyClipboard }: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const optionsState = useSnapshot(OptionsCtrl.state);
   const isDarkMode = useColorScheme() === 'dark';
+  const { height, width, isPortrait } = useOrientation();
 
   const copyToClipboard = async () => {
     if (onCopyClipboard && optionsState.sessionUri) {
@@ -48,12 +49,12 @@ function QRCodeView({ onCopyClipboard }: RouterProps) {
       {optionsState?.sessionUri ? (
         <QRCode
           uri={optionsState.sessionUri}
-          size={DEVICE_WIDTH * 0.9}
+          size={isPortrait ? width * 0.9 : height * 0.5}
           theme={isDarkMode ? 'dark' : 'light'}
         />
       ) : (
         <ActivityIndicator
-          style={styles.loader}
+          style={{ height: isPortrait ? width * 0.9 : height * 0.5 }}
           color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
         />
       )}
@@ -65,9 +66,6 @@ const styles = StyleSheet.create({
   container: {
     paddingBottom: 32,
   },
-  loader: {
-    height: DEVICE_HEIGHT * 0.4,
-  },
 });
 
 export default QRCodeView;
diff --git a/src/views/ViewAllExplorer.tsx b/src/views/ViewAllExplorer.tsx
index 42b6a86f..0d78b106 100644
--- a/src/views/ViewAllExplorer.tsx
+++ b/src/views/ViewAllExplorer.tsx
@@ -9,18 +9,20 @@ import {
 import { useSnapshot } from 'valtio';
 
 import { DarkTheme, LightTheme } from '../constants/Colors';
-import { DEVICE_HEIGHT } from '../constants/Platform';
+// import { DEVICE_HEIGHT } from '../constants/Platform';
 import WalletItem, { ITEM_HEIGHT } from '../components/WalletItem';
 import NavHeader from '../components/NavHeader';
 import { RouterCtrl } from '../controllers/RouterCtrl';
 import { ExplorerCtrl } from '../controllers/ExplorerCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import type { RouterProps } from '../types/routerTypes';
+import { useOrientation } from '../hooks/useOrientation';
 
 function ViewAllExplorer(_: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
+  const { height } = useOrientation();
   const loading = !optionsState.isDataLoaded || !optionsState.sessionUri;
   const wallets = useMemo(() => {
     return ExplorerCtrl.state.wallets.listings;
@@ -43,13 +45,15 @@ function ViewAllExplorer(_: RouterProps) {
         />
         {loading ? (
           <ActivityIndicator
-            style={styles.loader}
+            style={{
+              height: height * 0.6,
+            }}
             color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
           />
         ) : (
           <FlatList
             data={wallets || []}
-            style={styles.list}
+            style={{ maxHeight: height * 0.6 }}
             contentContainerStyle={styles.listContentContainer}
             indicatorStyle={isDarkMode ? 'white' : 'black'}
             showsVerticalScrollIndicator
@@ -73,16 +77,10 @@ function ViewAllExplorer(_: RouterProps) {
 }
 
 const styles = StyleSheet.create({
-  list: {
-    maxHeight: DEVICE_HEIGHT * 0.6,
-  },
   listContentContainer: {
     paddingHorizontal: 4,
     paddingBottom: 12,
   },
-  loader: {
-    height: DEVICE_HEIGHT * 0.4,
-  },
 });
 
 export default ViewAllExplorer;

From 7f8c2fdb5ab2d8f4c3617b8545e61d485165b1c5 Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Fri, 14 Apr 2023 18:27:26 -0300
Subject: [PATCH 2/7] refactor: showing more wallets per row in landscape mode,
 improved useOrientation hook

---
 src/components/WalletItem.tsx | 11 +++++++----
 src/hooks/useOrientation.ts   | 23 +++++------------------
 src/views/ViewAllExplorer.tsx |  8 +++++---
 3 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/components/WalletItem.tsx b/src/components/WalletItem.tsx
index f2ca84ca..8f4496ba 100644
--- a/src/components/WalletItem.tsx
+++ b/src/components/WalletItem.tsx
@@ -4,20 +4,23 @@ import {
   TouchableOpacity,
   StyleSheet,
   useColorScheme,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 
 import type { Listing } from '../types/controllerTypes';
 import { DarkTheme, LightTheme } from '../constants/Colors';
 import { ExplorerUtil } from '../utils/ExplorerUtil';
 
-interface WalletItemProps {
+interface Props {
   currentWCURI?: string;
   walletInfo: Listing;
+  style?: StyleProp<ViewStyle>;
 }
 
 export const ITEM_HEIGHT = 80;
 
-function WalletItem({ currentWCURI, walletInfo }: WalletItemProps) {
+function WalletItem({ currentWCURI, walletInfo, style }: Props) {
   const isDarkMode = useColorScheme() === 'dark';
 
   const onPress = () => {
@@ -34,7 +37,7 @@ function WalletItem({ currentWCURI, walletInfo }: WalletItemProps) {
     <TouchableOpacity
       onPress={onPress}
       key={walletInfo.id}
-      style={styles.container}
+      style={[styles.container, style]}
     >
       <Image
         style={styles.icon}
@@ -54,7 +57,7 @@ const styles = StyleSheet.create({
   container: {
     width: '25%',
     height: 80,
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
     alignItems: 'center',
     marginVertical: 16,
   },
diff --git a/src/hooks/useOrientation.ts b/src/hooks/useOrientation.ts
index 316b464f..359599f4 100644
--- a/src/hooks/useOrientation.ts
+++ b/src/hooks/useOrientation.ts
@@ -1,24 +1,11 @@
-import { useEffect, useState } from 'react';
-import { Dimensions, ScaledSize } from 'react-native';
+import { useWindowDimensions } from 'react-native';
 
 export function useOrientation() {
-  const [dimensions, setDimensions] = useState(Dimensions.get('window'));
-
-  useEffect(() => {
-    const callback = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    const subscription = Dimensions.addEventListener('change', callback);
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
+  const window = useWindowDimensions();
 
   return {
-    width: dimensions.width,
-    height: dimensions.height,
-    isPortrait: dimensions.height >= dimensions.width,
+    width: window.width,
+    height: window.height,
+    isPortrait: window.height >= window.width,
   };
 }
diff --git a/src/views/ViewAllExplorer.tsx b/src/views/ViewAllExplorer.tsx
index 0d78b106..d57528d3 100644
--- a/src/views/ViewAllExplorer.tsx
+++ b/src/views/ViewAllExplorer.tsx
@@ -9,7 +9,6 @@ import {
 import { useSnapshot } from 'valtio';
 
 import { DarkTheme, LightTheme } from '../constants/Colors';
-// import { DEVICE_HEIGHT } from '../constants/Platform';
 import WalletItem, { ITEM_HEIGHT } from '../components/WalletItem';
 import NavHeader from '../components/NavHeader';
 import { RouterCtrl } from '../controllers/RouterCtrl';
@@ -22,7 +21,7 @@ function ViewAllExplorer(_: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
-  const { height } = useOrientation();
+  const { isPortrait, height, width } = useOrientation();
   const loading = !optionsState.isDataLoaded || !optionsState.sessionUri;
   const wallets = useMemo(() => {
     return ExplorerCtrl.state.wallets.listings;
@@ -57,7 +56,8 @@ function ViewAllExplorer(_: RouterProps) {
             contentContainerStyle={styles.listContentContainer}
             indicatorStyle={isDarkMode ? 'white' : 'black'}
             showsVerticalScrollIndicator
-            numColumns={4}
+            numColumns={isPortrait ? 4 : 6}
+            key={isPortrait ? 'portrait' : 'landscape'}
             getItemLayout={(_data, index) => ({
               length: ITEM_HEIGHT,
               offset: ITEM_HEIGHT * index,
@@ -67,6 +67,7 @@ function ViewAllExplorer(_: RouterProps) {
               <WalletItem
                 currentWCURI={optionsState.sessionUri}
                 walletInfo={item}
+                style={{ width: isPortrait ? width / 4 : width / 7 }}
               />
             )}
           />
@@ -80,6 +81,7 @@ const styles = StyleSheet.create({
   listContentContainer: {
     paddingHorizontal: 4,
     paddingBottom: 12,
+    alignItems: 'center',
   },
 });
 

From 7ffa4e9fd08282c8f3034146888356e8e83e5604 Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Fri, 14 Apr 2023 18:52:32 -0300
Subject: [PATCH 3/7] fix: adjusted account view size

---
 src/views/Account.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/views/Account.tsx b/src/views/Account.tsx
index 1dda592e..0b0294be 100644
--- a/src/views/Account.tsx
+++ b/src/views/Account.tsx
@@ -22,7 +22,7 @@ import { useOrientation } from '../hooks/useOrientation';
 export function Account(_: RouterProps) {
   const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
-  const { height } = useOrientation();
+  const { isPortrait, height } = useOrientation();
 
   const onDisconnect = useCallback(async () => {
     try {
@@ -36,7 +36,12 @@ export function Account(_: RouterProps) {
   }, []);
 
   return (
-    <View style={[styles.container, { height: height * 0.4 }]}>
+    <View
+      style={[
+        styles.container,
+        { height: isPortrait ? height * 0.3 : height * 0.7 },
+      ]}
+    >
       <NavHeader title="Connected Account" />
       <View>
         <Text

From 666c843d3333c55bec996d6069a35eb4219a8962 Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Fri, 14 Apr 2023 18:55:16 -0300
Subject: [PATCH 4/7] fix: adjusted account view size

---
 src/views/Account.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/views/Account.tsx b/src/views/Account.tsx
index 0b0294be..142f57d1 100644
--- a/src/views/Account.tsx
+++ b/src/views/Account.tsx
@@ -36,14 +36,14 @@ export function Account(_: RouterProps) {
   }, []);
 
   return (
-    <View
-      style={[
-        styles.container,
-        { height: isPortrait ? height * 0.3 : height * 0.7 },
-      ]}
-    >
+    <>
       <NavHeader title="Connected Account" />
-      <View>
+      <View
+        style={[
+          styles.container,
+          { height: isPortrait ? height * 0.3 : height * 0.6 },
+        ]}
+      >
         <Text
           style={[
             styles.text,
@@ -63,14 +63,14 @@ export function Account(_: RouterProps) {
         >
           {optionsState.address}
         </Text>
+        <TouchableOpacity onPress={onDisconnect} style={styles.button}>
+          <View style={styles.iconContainer}>
+            <Image source={DisconnectIcon} style={styles.icon} />
+          </View>
+          <Text style={styles.buttonText}>Disconnect</Text>
+        </TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={onDisconnect} style={styles.button}>
-        <View style={styles.iconContainer}>
-          <Image source={DisconnectIcon} style={styles.icon} />
-        </View>
-        <Text style={styles.buttonText}>Disconnect</Text>
-      </TouchableOpacity>
-    </View>
+    </>
   );
 }
 

From c6fe3777d5ee9bbe41358d0bc564d73724dccd9d Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Mon, 17 Apr 2023 11:51:13 -0300
Subject: [PATCH 5/7] refactor: moved theme and size logic to router and
 sending the info as props to views

---
 src/components/NavHeader.tsx       |  1 -
 src/components/Web3ModalHeader.tsx | 12 +++++------
 src/components/Web3ModalRouter.tsx | 21 +++++++++++++++---
 src/types/routerTypes.ts           |  4 ++++
 src/views/Account.tsx              |  6 ++----
 src/views/InitialExplorer.tsx      | 25 +++++++++++-----------
 src/views/QRCodeView.tsx           | 34 ++++++++++++++++++------------
 src/views/ViewAllExplorer.tsx      | 25 ++++++++++++++--------
 8 files changed, 79 insertions(+), 49 deletions(-)

diff --git a/src/components/NavHeader.tsx b/src/components/NavHeader.tsx
index a5f25e9d..c8dbb40c 100644
--- a/src/components/NavHeader.tsx
+++ b/src/components/NavHeader.tsx
@@ -67,7 +67,6 @@ function NavHeader({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 16,
diff --git a/src/components/Web3ModalHeader.tsx b/src/components/Web3ModalHeader.tsx
index c09c7633..fd11dfd0 100644
--- a/src/components/Web3ModalHeader.tsx
+++ b/src/components/Web3ModalHeader.tsx
@@ -1,8 +1,8 @@
 import {
   Image,
+  SafeAreaView,
   StyleSheet,
   TouchableOpacity,
-  View,
   useColorScheme,
 } from 'react-native';
 
@@ -19,7 +19,7 @@ export function Web3ModalHeader({ onClose }: Web3ModalHeaderProps) {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Image style={styles.wcLogo} source={WCLogo} />
       <TouchableOpacity
         style={[styles.closeContainer, isDarkMode && styles.closeContainerDark]}
@@ -31,17 +31,17 @@ export function Web3ModalHeader({ onClose }: Web3ModalHeaderProps) {
           source={isDarkMode ? CloseWhite : Close}
         />
       </TouchableOpacity>
-    </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
-    display: 'flex',
+    height: 46,
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 10,
+    marginHorizontal: 10,
   },
   wcLogo: {
     width: 181,
diff --git a/src/components/Web3ModalRouter.tsx b/src/components/Web3ModalRouter.tsx
index 4ba07f46..c5f563e8 100644
--- a/src/components/Web3ModalRouter.tsx
+++ b/src/components/Web3ModalRouter.tsx
@@ -7,10 +7,17 @@ import { RouterCtrl } from '../controllers/RouterCtrl';
 import InitialExplorer from '../views/InitialExplorer';
 import { Account } from '../views/Account';
 import { Error } from '../views/Error';
-import type { RouterProps } from '../types/routerTypes';
+import { useOrientation } from '../hooks/useOrientation';
+import { useColorScheme } from 'react-native';
 
-export function Web3ModalRouter(props: RouterProps) {
+interface Props {
+  onCopyClipboard?: (value: string) => void;
+}
+
+export function Web3ModalRouter(props: Props) {
   const routerState = useSnapshot(RouterCtrl.state);
+  const { height, width, isPortrait } = useOrientation();
+  const isDarkMode = useColorScheme() === 'dark';
 
   const ViewComponent = useMemo(() => {
     switch (routerState.view) {
@@ -27,5 +34,13 @@ export function Web3ModalRouter(props: RouterProps) {
     }
   }, [routerState.view]);
 
-  return <ViewComponent {...props} />;
+  return (
+    <ViewComponent
+      windowHeight={height}
+      windowWidth={width}
+      isPortrait={isPortrait}
+      isDarkMode={isDarkMode}
+      {...props}
+    />
+  );
 }
diff --git a/src/types/routerTypes.ts b/src/types/routerTypes.ts
index 034c3945..21f09815 100644
--- a/src/types/routerTypes.ts
+++ b/src/types/routerTypes.ts
@@ -1,3 +1,7 @@
 export type RouterProps = {
+  isPortrait: boolean;
+  windowHeight: number;
+  windowWidth: number;
+  isDarkMode: boolean;
   onCopyClipboard?: (value: string) => void;
 };
diff --git a/src/views/Account.tsx b/src/views/Account.tsx
index 142f57d1..ee074d03 100644
--- a/src/views/Account.tsx
+++ b/src/views/Account.tsx
@@ -17,12 +17,10 @@ import { DarkTheme, LightTheme } from '../constants/Colors';
 import { ModalCtrl } from '../controllers/ModalCtrl';
 import type { RouterProps } from '../types/routerTypes';
 import NavHeader from '../components/NavHeader';
-import { useOrientation } from '../hooks/useOrientation';
 
-export function Account(_: RouterProps) {
+export function Account({ isPortrait, windowHeight }: RouterProps) {
   const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
-  const { isPortrait, height } = useOrientation();
 
   const onDisconnect = useCallback(async () => {
     try {
@@ -41,7 +39,7 @@ export function Account(_: RouterProps) {
       <View
         style={[
           styles.container,
-          { height: isPortrait ? height * 0.3 : height * 0.6 },
+          { height: isPortrait ? windowHeight * 0.3 : windowHeight * 0.6 },
         ]}
       >
         <Text
diff --git a/src/views/InitialExplorer.tsx b/src/views/InitialExplorer.tsx
index 3ab1b36c..8e101e0a 100644
--- a/src/views/InitialExplorer.tsx
+++ b/src/views/InitialExplorer.tsx
@@ -1,11 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import {
-  StyleSheet,
-  View,
-  Animated,
-  ActivityIndicator,
-  useColorScheme,
-} from 'react-native';
+import { StyleSheet, View, Animated, ActivityIndicator } from 'react-native';
 import { useSnapshot } from 'valtio';
 
 import WalletItem from '../components/WalletItem';
@@ -18,13 +12,14 @@ import { RouterCtrl } from '../controllers/RouterCtrl';
 import { ExplorerCtrl } from '../controllers/ExplorerCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import type { RouterProps } from '../types/routerTypes';
-import { useOrientation } from '../hooks/useOrientation';
 
-function InitialExplorer(_: RouterProps) {
+function InitialExplorer({
+  windowHeight,
+  isPortrait,
+  isDarkMode,
+}: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
-  const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
-  const { height, isPortrait } = useOrientation();
 
   const loading = !optionsState.isDataLoaded || !optionsState.sessionUri;
 
@@ -41,7 +36,11 @@ function InitialExplorer(_: RouterProps) {
   }, [fadeAnim]);
 
   return (
-    <Animated.View style={{ opacity: fadeAnim }}>
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+      }}
+    >
       <NavHeader
         title="Connect your Wallet"
         onActionPress={() => RouterCtrl.push('Qrcode')}
@@ -51,7 +50,7 @@ function InitialExplorer(_: RouterProps) {
       {loading ? (
         <ActivityIndicator
           style={{
-            height: isPortrait ? height * 0.3 : height * 0.6,
+            height: isPortrait ? windowHeight * 0.3 : windowHeight * 0.7,
           }}
           color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
         />
diff --git a/src/views/QRCodeView.tsx b/src/views/QRCodeView.tsx
index 562d374a..ba6fa1e5 100644
--- a/src/views/QRCodeView.tsx
+++ b/src/views/QRCodeView.tsx
@@ -1,10 +1,5 @@
 import { useEffect, useRef } from 'react';
-import {
-  ActivityIndicator,
-  Animated,
-  StyleSheet,
-  useColorScheme,
-} from 'react-native';
+import { ActivityIndicator, Animated, StyleSheet } from 'react-native';
 import { useSnapshot } from 'valtio';
 
 import NavHeader from '../components/NavHeader';
@@ -14,13 +9,16 @@ import { DarkTheme, LightTheme } from '../constants/Colors';
 import { RouterCtrl } from '../controllers/RouterCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import type { RouterProps } from '../types/routerTypes';
-import { useOrientation } from '../hooks/useOrientation';
 
-function QRCodeView({ onCopyClipboard }: RouterProps) {
+function QRCodeView({
+  onCopyClipboard,
+  isPortrait,
+  windowHeight,
+  windowWidth,
+  isDarkMode,
+}: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const optionsState = useSnapshot(OptionsCtrl.state);
-  const isDarkMode = useColorScheme() === 'dark';
-  const { height, width, isPortrait } = useOrientation();
 
   const copyToClipboard = async () => {
     if (onCopyClipboard && optionsState.sessionUri) {
@@ -38,7 +36,15 @@ function QRCodeView({ onCopyClipboard }: RouterProps) {
   }, [fadeAnim]);
 
   return (
-    <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity: fadeAnim,
+          height: isPortrait ? windowHeight * 0.5 : windowHeight * 0.7,
+        },
+      ]}
+    >
       <NavHeader
         title="Scan the code"
         onBackPress={RouterCtrl.goBack}
@@ -49,12 +55,14 @@ function QRCodeView({ onCopyClipboard }: RouterProps) {
       {optionsState?.sessionUri ? (
         <QRCode
           uri={optionsState.sessionUri}
-          size={isPortrait ? width * 0.9 : height * 0.5}
+          size={isPortrait ? windowWidth * 0.9 : windowHeight * 0.5}
           theme={isDarkMode ? 'dark' : 'light'}
         />
       ) : (
         <ActivityIndicator
-          style={{ height: isPortrait ? width * 0.9 : height * 0.5 }}
+          style={{
+            height: isPortrait ? windowWidth * 0.9 : windowHeight * 0.5,
+          }}
           color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
         />
       )}
diff --git a/src/views/ViewAllExplorer.tsx b/src/views/ViewAllExplorer.tsx
index d57528d3..83273355 100644
--- a/src/views/ViewAllExplorer.tsx
+++ b/src/views/ViewAllExplorer.tsx
@@ -2,7 +2,6 @@ import { useRef, useEffect, useMemo } from 'react';
 import {
   Animated,
   StyleSheet,
-  useColorScheme,
   FlatList,
   ActivityIndicator,
 } from 'react-native';
@@ -15,13 +14,15 @@ import { RouterCtrl } from '../controllers/RouterCtrl';
 import { ExplorerCtrl } from '../controllers/ExplorerCtrl';
 import { OptionsCtrl } from '../controllers/OptionsCtrl';
 import type { RouterProps } from '../types/routerTypes';
-import { useOrientation } from '../hooks/useOrientation';
 
-function ViewAllExplorer(_: RouterProps) {
+function ViewAllExplorer({
+  isPortrait,
+  windowHeight,
+  windowWidth,
+  isDarkMode,
+}: RouterProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
-  const isDarkMode = useColorScheme() === 'dark';
   const optionsState = useSnapshot(OptionsCtrl.state);
-  const { isPortrait, height, width } = useOrientation();
   const loading = !optionsState.isDataLoaded || !optionsState.sessionUri;
   const wallets = useMemo(() => {
     return ExplorerCtrl.state.wallets.listings;
@@ -36,7 +37,12 @@ function ViewAllExplorer(_: RouterProps) {
   }, [fadeAnim]);
 
   return (
-    <Animated.View style={{ opacity: fadeAnim }}>
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+        maxHeight: isPortrait ? windowHeight * 0.7 : windowHeight * 0.8,
+      }}
+    >
       <>
         <NavHeader
           title="Connect your Wallet"
@@ -45,14 +51,13 @@ function ViewAllExplorer(_: RouterProps) {
         {loading ? (
           <ActivityIndicator
             style={{
-              height: height * 0.6,
+              height: windowHeight * 0.6,
             }}
             color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
           />
         ) : (
           <FlatList
             data={wallets || []}
-            style={{ maxHeight: height * 0.6 }}
             contentContainerStyle={styles.listContentContainer}
             indicatorStyle={isDarkMode ? 'white' : 'black'}
             showsVerticalScrollIndicator
@@ -67,7 +72,9 @@ function ViewAllExplorer(_: RouterProps) {
               <WalletItem
                 currentWCURI={optionsState.sessionUri}
                 walletInfo={item}
-                style={{ width: isPortrait ? width / 4 : width / 7 }}
+                style={{
+                  width: isPortrait ? windowWidth / 4 : windowWidth / 7,
+                }}
               />
             )}
           />

From b665bc79c47bf9f81442acab0065e6563320cae7 Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Mon, 17 Apr 2023 15:24:23 -0300
Subject: [PATCH 6/7] refactor: moved theme and size logic to router and
 sending the info as props to views

---
 src/assets/ViewAll.png        | Bin 25116 -> 0 bytes
 src/components/ViewAllBox.tsx |  56 ++++++++++++++++++++++++++++------
 src/components/WalletItem.tsx |   2 +-
 src/views/InitialExplorer.tsx |  17 +++++++++--
 src/views/QRCodeView.tsx      |   6 ++--
 src/views/ViewAllExplorer.tsx |   1 -
 6 files changed, 64 insertions(+), 18 deletions(-)
 delete mode 100644 src/assets/ViewAll.png

diff --git a/src/assets/ViewAll.png b/src/assets/ViewAll.png
deleted file mode 100644
index 1eb7cfc1977d2e59913f8990188e0191eaa94886..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25116
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
P00000NkvXXu0mjf{ofnx

diff --git a/src/components/ViewAllBox.tsx b/src/components/ViewAllBox.tsx
index ec674cec..ecdb8233 100644
--- a/src/components/ViewAllBox.tsx
+++ b/src/components/ViewAllBox.tsx
@@ -5,21 +5,45 @@ import {
   Text,
   TouchableOpacity,
   useColorScheme,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 
-import ViewAllIcon from '../assets/ViewAll.png';
 import { DarkTheme, LightTheme } from '../constants/Colors';
+import type { Listing } from '../types/controllerTypes';
+import { ExplorerUtil } from '../utils/ExplorerUtil';
 
 interface Props {
   onPress: any;
+  wallets: Listing[];
+  style?: StyleProp<ViewStyle>;
 }
 
-function ViewAllBox({ onPress }: Props) {
+function ViewAllBox({ onPress, wallets, style }: Props) {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
-    <TouchableOpacity onPress={onPress} style={styles.container}>
-      <Image style={styles.icon} source={ViewAllIcon} />
+    <TouchableOpacity onPress={onPress} style={[styles.container, style]}>
+      <View style={styles.icons}>
+        <View style={styles.row}>
+          {wallets.slice(0, 2).map((wallet, index) => (
+            <Image
+              key={index}
+              source={{ uri: ExplorerUtil.getWalletImageUrl(wallet.image_id) }}
+              style={styles.icon}
+            />
+          ))}
+        </View>
+        <View style={styles.row}>
+          {wallets.slice(-2).map((wallet, index) => (
+            <Image
+              key={index}
+              source={{ uri: ExplorerUtil.getWalletImageUrl(wallet.image_id) }}
+              style={styles.icon}
+            />
+          ))}
+        </View>
+      </View>
       <View>
         <Text
           style={[styles.text, isDarkMode && styles.textDark]}
@@ -33,22 +57,34 @@ function ViewAllBox({ onPress }: Props) {
 }
 
 const styles = StyleSheet.create({
-  icon: {
+  container: {
+    width: 80,
+    height: 80,
+    alignItems: 'center',
+  },
+  icons: {
     height: 60,
     width: 60,
     borderRadius: 16,
     borderWidth: 1,
     borderColor: LightTheme.overlayThin,
-  },
-  container: {
-    width: '25%',
     justifyContent: 'center',
     alignItems: 'center',
-    marginVertical: 8,
+  },
+  icon: {
+    height: 23,
+    width: 23,
+    borderRadius: 8,
+    margin: 1,
+    borderWidth: 1,
+    borderColor: LightTheme.overlayThin,
+  },
+  row: {
+    flexDirection: 'row',
   },
   text: {
     color: LightTheme.foreground1,
-    marginVertical: 8,
+    marginTop: 8,
     maxWidth: 100,
     fontWeight: '600',
     fontSize: 12,
diff --git a/src/components/WalletItem.tsx b/src/components/WalletItem.tsx
index 8f4496ba..6957dbed 100644
--- a/src/components/WalletItem.tsx
+++ b/src/components/WalletItem.tsx
@@ -55,7 +55,7 @@ function WalletItem({ currentWCURI, walletInfo, style }: Props) {
 
 const styles = StyleSheet.create({
   container: {
-    width: '25%',
+    width: 80,
     height: 80,
     justifyContent: 'center',
     alignItems: 'center',
diff --git a/src/views/InitialExplorer.tsx b/src/views/InitialExplorer.tsx
index 8e101e0a..53720e4b 100644
--- a/src/views/InitialExplorer.tsx
+++ b/src/views/InitialExplorer.tsx
@@ -27,6 +27,10 @@ function InitialExplorer({
     return ExplorerCtrl.state.wallets.listings.slice(0, 7);
   }, []);
 
+  const viewAllWallets = useMemo(() => {
+    return ExplorerCtrl.state.wallets.listings.slice(7, 11);
+  }, []);
+
   useEffect(() => {
     Animated.timing(fadeAnim, {
       toValue: 1,
@@ -50,7 +54,7 @@ function InitialExplorer({
       {loading ? (
         <ActivityIndicator
           style={{
-            height: isPortrait ? windowHeight * 0.3 : windowHeight * 0.7,
+            height: windowHeight * 0.3,
           }}
           color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
         />
@@ -61,9 +65,14 @@ function InitialExplorer({
               walletInfo={item}
               key={item.id}
               currentWCURI={optionsState.sessionUri}
+              style={isPortrait && styles.wallet}
             />
           ))}
-          <ViewAllBox onPress={() => RouterCtrl.push('WalletExplorer')} />
+          <ViewAllBox
+            onPress={() => RouterCtrl.push('WalletExplorer')}
+            wallets={viewAllWallets}
+            style={isPortrait && styles.wallet}
+          />
         </View>
       )}
     </Animated.View>
@@ -76,12 +85,14 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 4,
   },
   qrIcon: {
     height: 24,
     width: 24,
   },
+  wallet: {
+    width: '25%',
+  },
 });
 
 export default InitialExplorer;
diff --git a/src/views/QRCodeView.tsx b/src/views/QRCodeView.tsx
index ba6fa1e5..1711a34b 100644
--- a/src/views/QRCodeView.tsx
+++ b/src/views/QRCodeView.tsx
@@ -41,7 +41,7 @@ function QRCodeView({
         styles.container,
         {
           opacity: fadeAnim,
-          height: isPortrait ? windowHeight * 0.5 : windowHeight * 0.7,
+          height: isPortrait ? windowHeight * 0.5 : windowHeight * 0.8,
         },
       ]}
     >
@@ -55,13 +55,13 @@ function QRCodeView({
       {optionsState?.sessionUri ? (
         <QRCode
           uri={optionsState.sessionUri}
-          size={isPortrait ? windowWidth * 0.9 : windowHeight * 0.5}
+          size={isPortrait ? windowWidth * 0.9 : windowHeight * 0.6}
           theme={isDarkMode ? 'dark' : 'light'}
         />
       ) : (
         <ActivityIndicator
           style={{
-            height: isPortrait ? windowWidth * 0.9 : windowHeight * 0.5,
+            height: isPortrait ? windowWidth * 0.9 : windowHeight * 0.6,
           }}
           color={isDarkMode ? LightTheme.accent : DarkTheme.accent}
         />
diff --git a/src/views/ViewAllExplorer.tsx b/src/views/ViewAllExplorer.tsx
index 83273355..a23eb37e 100644
--- a/src/views/ViewAllExplorer.tsx
+++ b/src/views/ViewAllExplorer.tsx
@@ -86,7 +86,6 @@ function ViewAllExplorer({
 
 const styles = StyleSheet.create({
   listContentContainer: {
-    paddingHorizontal: 4,
     paddingBottom: 12,
     alignItems: 'center',
   },

From 49cf075d3a33349c1533391b764aab9898c3ff16 Mon Sep 17 00:00:00 2001
From: ignaciosantise <ignacio.santise@gmail.com>
Date: Mon, 17 Apr 2023 16:27:19 -0300
Subject: [PATCH 7/7] style: code style improve

---
 src/components/ViewAllBox.tsx | 35 ++++++++++++++++++-----------------
 src/components/WalletItem.tsx |  1 -
 src/views/InitialExplorer.tsx |  1 +
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/ViewAllBox.tsx b/src/components/ViewAllBox.tsx
index ecdb8233..bcf43129 100644
--- a/src/components/ViewAllBox.tsx
+++ b/src/components/ViewAllBox.tsx
@@ -4,7 +4,6 @@ import {
   View,
   Text,
   TouchableOpacity,
-  useColorScheme,
   StyleProp,
   ViewStyle,
 } from 'react-native';
@@ -16,31 +15,29 @@ import { ExplorerUtil } from '../utils/ExplorerUtil';
 interface Props {
   onPress: any;
   wallets: Listing[];
+  isDarkMode: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
-function ViewAllBox({ onPress, wallets, style }: Props) {
-  const isDarkMode = useColorScheme() === 'dark';
+const WalletIcon = ({ wallet }: { wallet: Listing }) => (
+  <Image
+    source={{ uri: ExplorerUtil.getWalletImageUrl(wallet.image_id) }}
+    style={styles.icon}
+  />
+);
 
+function ViewAllBox({ onPress, wallets, style, isDarkMode }: Props) {
   return (
     <TouchableOpacity onPress={onPress} style={[styles.container, style]}>
-      <View style={styles.icons}>
+      <View style={[styles.icons, isDarkMode && styles.iconsDark]}>
         <View style={styles.row}>
-          {wallets.slice(0, 2).map((wallet, index) => (
-            <Image
-              key={index}
-              source={{ uri: ExplorerUtil.getWalletImageUrl(wallet.image_id) }}
-              style={styles.icon}
-            />
+          {wallets.slice(0, 2).map((wallet) => (
+            <WalletIcon key={wallet.id} wallet={wallet} />
           ))}
         </View>
         <View style={styles.row}>
-          {wallets.slice(-2).map((wallet, index) => (
-            <Image
-              key={index}
-              source={{ uri: ExplorerUtil.getWalletImageUrl(wallet.image_id) }}
-              style={styles.icon}
-            />
+          {wallets.slice(2, 4).map((wallet) => (
+            <WalletIcon key={wallet.id} wallet={wallet} />
           ))}
         </View>
       </View>
@@ -61,6 +58,7 @@ const styles = StyleSheet.create({
     width: 80,
     height: 80,
     alignItems: 'center',
+    marginVertical: 16,
   },
   icons: {
     height: 60,
@@ -71,6 +69,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  iconsDark: {
+    backgroundColor: DarkTheme.background2,
+  },
   icon: {
     height: 23,
     width: 23,
@@ -84,7 +85,7 @@ const styles = StyleSheet.create({
   },
   text: {
     color: LightTheme.foreground1,
-    marginTop: 8,
+    marginTop: 5,
     maxWidth: 100,
     fontWeight: '600',
     fontSize: 12,
diff --git a/src/components/WalletItem.tsx b/src/components/WalletItem.tsx
index 6957dbed..249c81ae 100644
--- a/src/components/WalletItem.tsx
+++ b/src/components/WalletItem.tsx
@@ -57,7 +57,6 @@ const styles = StyleSheet.create({
   container: {
     width: 80,
     height: 80,
-    justifyContent: 'center',
     alignItems: 'center',
     marginVertical: 16,
   },
diff --git a/src/views/InitialExplorer.tsx b/src/views/InitialExplorer.tsx
index 53720e4b..cd639f58 100644
--- a/src/views/InitialExplorer.tsx
+++ b/src/views/InitialExplorer.tsx
@@ -72,6 +72,7 @@ function InitialExplorer({
             onPress={() => RouterCtrl.push('WalletExplorer')}
             wallets={viewAllWallets}
             style={isPortrait && styles.wallet}
+            isDarkMode={isDarkMode}
           />
         </View>
       )}