UI Improvements (#65)

* Rebase ui branch

* Fix scrollview (#69)

* Add loading prop to button

* Change function reference

* Remove fragment

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>
Co-authored-by: IshaVenikar <145848618+IshaVenikar@users.noreply.github.com>

src/components/PairingModal.tsx

@@ -11,7 +11,7 @@ import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
 import { useAccounts } from '../context/AccountsContext';
 import { useWalletConnect } from '../context/WalletConnectContext';
 import { EIP155_CHAINS } from '../utils/wallet-connect/EIP155Data';
-import { COSMOS_MAINNET_CHAINS } from '../utils/wallet-connect/COSMOSData';
+import { COSMOS_CHAINS } from '../utils/wallet-connect/COSMOSData';
 
 const PairingModal = ({
   visible,
@@ -21,7 +21,9 @@ const PairingModal = ({
   setToastVisible,
 }: PairingModalProps) => {
   const { accounts, currentIndex } = useAccounts();
+  const [isLoading, setIsLoading] = useState(false);
 
+  const dappName = currentProposal?.params?.proposer?.metadata.name;
   const url = currentProposal?.params?.proposer?.metadata.url;
   const icon = currentProposal?.params.proposer?.metadata.icons[0];
 
@@ -80,7 +82,7 @@ const PairingModal = ({
     const eip155Chains = Object.keys(EIP155_CHAINS);
 
     // cosmos
-    const cosmosChains = Object.keys(COSMOS_MAINNET_CHAINS);
+    const cosmosChains = Object.keys(COSMOS_CHAINS);
 
     // Set selected account as the first account in supported namespaces
     const sortedAccounts = Object.entries(accounts).reduce(
@@ -160,6 +162,7 @@ const PairingModal = ({
   const handleAccept = async () => {
     try {
       if (currentProposal && namespaces) {
+        setIsLoading(true);
         const { id } = currentProposal;
 
         await web3wallet!.approveSession({
@@ -168,6 +171,7 @@ const PairingModal = ({
         });
 
         const sessions = web3wallet!.getActiveSessions();
+        setIsLoading(false);
         setActiveSessions(sessions);
         setModalVisible(false);
         setToastVisible(true);
@@ -186,12 +190,14 @@ const PairingModal = ({
 
   const handleReject = async () => {
     if (currentProposal) {
+      setIsLoading(true);
       const { id } = currentProposal;
       await web3wallet!.rejectSession({
         id,
         reason: getSdkError('USER_REJECTED_METHODS'),
       });
 
+      setIsLoading(false);
       setModalVisible(false);
       setCurrentProposal(undefined);
       setWalletConnectData({
@@ -215,11 +221,16 @@ const PairingModal = ({
                 />
               )}
 
+              <Text variant="titleMedium">{dappName}</Text>
               <Text variant="bodyMedium">{url}</Text>
               <View style={styles.marginVertical8} />
               <Text variant="titleMedium">Connect to this site?</Text>
-              <Text>Chains: {walletConnectData.walletConnectChains}</Text>
+              <Text variant="titleMedium">Chains:</Text>
-
+              {walletConnectData.walletConnectChains.map(chain => (
+                <Text style={styles.centerText} key={chain}>
+                  {chain}
+                </Text>
+              ))}
               <View style={styles.marginVertical8}>
                 <Text variant="titleMedium">Methods Requested:</Text>
                 {walletConnectData.walletConnectMethods.map(method => (
@@ -237,18 +248,18 @@ const PairingModal = ({
                   </Text>
                 ))}
               </View>
-
-              <View style={styles.flexRow}>
-                <Button mode="contained" onPress={handleAccept}>
-                  Accept
-                </Button>
-                <View style={styles.space} />
-                <Button mode="outlined" onPress={handleReject}>
-                  Cancel
-                </Button>
-              </View>
             </View>
           </ScrollView>
+
+          <View style={styles.flexRow}>
+            <Button mode="contained" onPress={handleAccept} loading={isLoading}>
+              {isLoading ? 'Connecting' : 'Yes'}
+            </Button>
+            <View style={styles.space} />
+            <Button mode="outlined" onPress={handleReject}>
+              No
+            </Button>
+          </View>
         </View>
       </View>
     </Modal>

src/screens/SignRequest.tsx

@@ -128,7 +128,8 @@ const SignRequest = ({ route }: SignRequestProps) => {
   }, [retrieveData, sanitizePath, route]);
 
   const handleWalletConnectRequest = async () => {
-    const { requestEvent } = route.params;
+    setIsLoading(true)
+    const { requestEvent } = route.params || {};
 
     if (!account) {
       throw new Error('account not found');
@@ -147,6 +148,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
 
     const { topic } = requestEvent;
     await web3wallet!.respondSessionRequest({ topic, response });
+    setIsLoading(false)
   };
 
   const handleIntent = async () => {
@@ -174,13 +176,15 @@ const SignRequest = ({ route }: SignRequestProps) => {
   };
 
   const rejectRequestHandler = async () => {
-    if (route.params.requestEvent) {
+    if (route.params?.requestEvent) {
-      const response = rejectWalletConnectRequest(route.params.requestEvent);
+      setIsLoading(true);
-      const { topic } = route.params.requestEvent;
+      const response = rejectWalletConnectRequest(route.params?.requestEvent);
+      const { topic } = route.params?.requestEvent;
       await web3wallet!.respondSessionRequest({
         topic,
         response,
       });
+      setIsLoading(true);
     }
     navigation.navigate('Laconic');
   };

src/styles/stylesheet.js

@@ -137,6 +137,8 @@ const styles = StyleSheet.create({
   buttonContainer: {
     flexDirection: 'row',
     marginLeft: 20,
+    marginTop: 20,
+    marginBottom: 20,
     justifyContent: 'space-evenly',
   },
   badRequestContainer: {
@@ -155,6 +157,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginBottom: 10,
+    paddingHorizontal: 20,
   },
   modalContentContainer: {
     display: 'flex',
@@ -186,6 +189,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginTop: 20,
     paddingHorizontal: 16,
+    marginBottom: 10,
   },
   marginVertical8: {
     marginVertical: 8,