Add support for displaying svg images (#71)

* Add support for SVG images

* Fix imports

---------

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

src/components/PairingModal.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Image, View, Modal, ScrollView } from 'react-native';
 import { Button, Text } from 'react-native-paper';
+import { SvgUri } from 'react-native-svg';
 import mergeWith from 'lodash/mergeWith';
 
 import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils';
@@ -190,14 +191,12 @@ 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,10 +214,15 @@ const PairingModal = ({
           <ScrollView showsVerticalScrollIndicator={true}>
             <View style={styles.container}>
               {icon && (
-                <Image
-                  style={styles.dappLogo}
-                  source={icon ? { uri: icon } : undefined}
-                />
+                <>
+                  {icon.endsWith('.svg') ? (
+                    <View style={styles.dappLogo}>
+                      <SvgUri height="50" width="50" uri={icon} />
+                    </View>
+                  ) : (
+                    <Image style={styles.dappLogo} source={{ uri: icon }} />
+                  )}
+                </>
               )}
 
               <Text variant="titleMedium">{dappName}</Text>

src/screens/SignRequest.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Alert, Image, ScrollView, View } from 'react-native';
 import { ActivityIndicator, Button, Text, Appbar } from 'react-native-paper';
+import { SvgUri } from 'react-native-svg';
 
 import { useNavigation } from '@react-navigation/native';
 import {
@@ -128,7 +129,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
   }, [retrieveData, sanitizePath, route]);
 
   const handleWalletConnectRequest = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     const { requestEvent } = route.params || {};
 
     if (!account) {
@@ -148,7 +149,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
 
     const { topic } = requestEvent;
     await web3wallet!.respondSessionRequest({ topic, response });
-    setIsLoading(false)
+    setIsLoading(false);
   };
 
   const handleIntent = async () => {
@@ -223,10 +224,18 @@ const SignRequest = ({ route }: SignRequestProps) => {
         <ScrollView contentContainerStyle={styles.appContainer}>
           <View style={styles.dappDetails}>
             {requestIcon && (
-              <Image
-                style={styles.dappLogo}
-                source={requestIcon ? { uri: requestIcon } : undefined}
-              />
+              <>
+                {requestIcon.endsWith('.svg') ? (
+                  <View style={styles.dappLogo}>
+                    <SvgUri height="50" width="50" uri={requestIcon} />
+                  </View>
+                ) : (
+                  <Image
+                    style={styles.dappLogo}
+                    source={{ uri: requestIcon }}
+                  />
+                )}
+              </>
             )}
             <Text>{requestName}</Text>
             <Text variant="bodyMedium">{requestURL}</Text>

src/screens/WalletConnect.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { List, Text } from 'react-native-paper';
+import { SvgUri } from 'react-native-svg';
 
 import { getSdkError } from '@walletconnect/utils';
 
@@ -43,10 +44,22 @@ export default function WalletConnect() {
                 //TODO: Refactor
                 description={`${sessionId} \n\n${session.peer.metadata.url}\n\n${session.peer.metadata.description}`}
                 left={() => (
-                  <Image
-                    style={styles.dappLogo}
-                    source={{ uri: session.peer.metadata.icons[0] }}
-                  />
+                  <>
+                    {session.peer.metadata.icons[0].endsWith('.svg') ? (
+                      <View style={styles.dappLogo}>
+                        <SvgUri
+                          height="50"
+                          width="50"
+                          uri={session.peer.metadata.icons[0]}
+                        />
+                      </View>
+                    ) : (
+                      <Image
+                        style={styles.dappLogo}
+                        source={{ uri: session.peer.metadata.icons[0] }}
+                      />
+                    )}
+                  </>
                 )}
                 right={() => (
                   <TouchableOpacity

src/styles/stylesheet.js

@@ -179,6 +179,7 @@ const styles = StyleSheet.create({
     height: 50,
     borderRadius: 8,
     marginVertical: 16,
+    overflow: 'hidden',
   },
   space: {
     width: 50,