Add support for displaying svg images (#71)

* Add support for SVG images

* Fix imports

---------

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

package.json

@@ -40,6 +40,7 @@
     "react-native-quick-crypto": "^0.6.1",
     "react-native-safe-area-context": "^4.9.0",
     "react-native-screens": "^3.29.0",
+    "react-native-svg": "^15.1.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-vision-camera": "^3.9.0",
     "text-encoding-polyfill": "^0.6.7"

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}
+                  {icon.endsWith('.svg') ? (
-                  source={icon ? { uri: icon } : undefined}
+                    <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}
+                {requestIcon.endsWith('.svg') ? (
-                source={requestIcon ? { uri: requestIcon } : undefined}
+                  <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}
+                    {session.peer.metadata.icons[0].endsWith('.svg') ? (
-                    source={{ uri: session.peer.metadata.icons[0] }}
+                      <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,

yarn.lock

@@ -2809,16 +2809,16 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/long@^4.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
-  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
-
 "@types/lodash@^4.17.0":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
   integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
 
+"@types/long@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
+  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
+
 "@types/node@*":
   version "20.11.16"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.16.tgz#4411f79411514eb8e2926f036c86c9f0e4ec6708"
@@ -3638,6 +3638,11 @@ bn.js@^5.0.0, bn.js@^5.2.0, bn.js@^5.2.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4197,6 +4202,30 @@ crypto-browserify@^3.12.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
+css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -4378,6 +4407,36 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 duplexify@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.2.tgz#18b4f8d28289132fa0b9573c898d9f903f81c7b0"
@@ -4433,6 +4492,11 @@ end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+entities@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 envinfo@^7.10.0:
   version "7.11.1"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.11.1.tgz#2ffef77591057081b0129a8fd8cf6118da1b94e1"
@@ -6642,6 +6706,11 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
@@ -7132,6 +7201,13 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -7801,6 +7877,14 @@ react-native-screens@^3.29.0:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
+react-native-svg@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.1.0.tgz#07c75f29b1d641faba50144c7ccd21604b368420"
+  integrity sha512-p0Sx0EpQNk1nu6UcMEiB8K9P04n3J7s+pNYUwf1d/Yz+v4hk961VjuVqjyndgiEbHZyWiKWLZRVNuvLpwjPY2A==
+  dependencies:
+    css-select "^5.1.0"
+    css-tree "^1.1.3"
+
 react-native-url-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz#db714520a2985cff1d50ab2e66279b9f91ffd589"