From a33deb5e8650facdab9cb7d814035bc97853a321 Mon Sep 17 00:00:00 2001 From: Aslau Mario-Daniel Date: Thu, 9 May 2024 21:17:41 +0100 Subject: [PATCH 1/3] feat: Upgrade to react-native-svg to 15.2.0 --- package.json | 2 +- yarn.lock | 52 ++++++++-------------------------------------------- 2 files changed, 9 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 777f4ab0763..aed55c37270 100644 --- a/package.json +++ b/package.json @@ -308,7 +308,7 @@ "react-native-size-matters": "0.4.0", "react-native-skeleton-placeholder": "^5.0.0", "react-native-step-indicator": "^1.0.3", - "react-native-svg": "12.1.1", + "react-native-svg": "^15.2.0", "react-native-svg-charts": "^5.4.0", "react-native-swipe-gestures": "1.0.3", "react-native-tcp": "aprock/react-native-tcp#11/head", diff --git a/yarn.lock b/yarn.lock index d707e1be4e3..469ad53b76a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13730,16 +13730,6 @@ css-loader@^6.7.1: postcss-value-parser "^4.2.0" semver "^7.3.8" -css-select@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef" - integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ== - dependencies: - boolbase "^1.0.0" - css-what "^3.2.1" - domutils "^1.7.0" - nth-check "^1.0.2" - css-select@^4.1.3: version "4.1.3" resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067" @@ -13781,7 +13771,7 @@ css-to-react-native@^2.2.1: css-color-keywords "^1.0.0" postcss-value-parser "^3.3.0" -css-tree@^1.0.0-alpha.39, css-tree@^1.1.2, css-tree@^1.1.3: +css-tree@^1.1.2, 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== @@ -13794,11 +13784,6 @@ css-value@^0.0.1: resolved "https://registry.yarnpkg.com/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea" integrity sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q== -css-what@^3.2.1: - version "3.4.2" - resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4" - integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ== - css-what@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad" @@ -14582,14 +14567,6 @@ dom-helpers@^5.0.1: "@babel/runtime" "^7.8.7" csstype "^3.0.2" -dom-serializer@0: - version "0.2.2" - resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" - integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g== - dependencies: - domelementtype "^2.0.1" - entities "^2.0.0" - dom-serializer@^1.0.1: version "1.3.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91" @@ -14613,11 +14590,6 @@ dom-walk@^0.1.0: resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84" integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== -domelementtype@1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f" - integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w== - domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" @@ -14637,14 +14609,6 @@ domhandler@^5.0.2, domhandler@^5.0.3: dependencies: domelementtype "^2.3.0" -domutils@^1.7.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a" - integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg== - dependencies: - dom-serializer "0" - domelementtype "1" - domutils@^2.5.2, domutils@^2.6.0: version "2.7.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442" @@ -22020,7 +21984,7 @@ npmlog@^6.0.0: gauge "^4.0.3" set-blocking "^2.0.0" -nth-check@^1.0.2, nth-check@^2.0.0, nth-check@^2.0.1: +nth-check@^2.0.0, nth-check@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2" integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w== @@ -24382,13 +24346,13 @@ react-native-svg-transformer@^1.0.0: "@svgr/plugin-svgo" "^6.1.2" path-dirname "^1.0.2" -react-native-svg@12.1.1: - version "12.1.1" - resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee" - integrity sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q== +react-native-svg@^15.2.0: + version "15.2.0" + resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.2.0.tgz#9561a6b3bd6b44689f437ba13182afee33bd5557" + integrity sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw== dependencies: - css-select "^2.1.0" - css-tree "^1.0.0-alpha.39" + css-select "^5.1.0" + css-tree "^1.1.3" react-native-svg@^6.2.1: version "6.5.3" From f072878da3795bf58e72f86f494892392c5fc46b Mon Sep 17 00:00:00 2001 From: Aslau Mario-Daniel Date: Thu, 9 May 2024 22:36:25 +0100 Subject: [PATCH 2/3] feat: update react-native-svg patch --- patches/react-native-svg+12.1.1.patch | 56 ------------------------ patches/react-native-svg+15.2.0.patch | 63 +++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 56 deletions(-) delete mode 100644 patches/react-native-svg+12.1.1.patch create mode 100644 patches/react-native-svg+15.2.0.patch diff --git a/patches/react-native-svg+12.1.1.patch b/patches/react-native-svg+12.1.1.patch deleted file mode 100644 index 73073c85c71..00000000000 --- a/patches/react-native-svg+12.1.1.patch +++ /dev/null @@ -1,56 +0,0 @@ -diff --git a/node_modules/react-native-svg/src/xml.tsx b/node_modules/react-native-svg/src/xml.tsx -index 828f104..db726a9 100644 ---- a/node_modules/react-native-svg/src/xml.tsx -+++ b/node_modules/react-native-svg/src/xml.tsx -@@ -123,21 +123,39 @@ export function SvgXml(props: XmlProps) { - } - - export async function fetchText(uri: string) { -- const response = await fetch(uri); -- return await response.text(); -+ const response = await fetch(uri); -+ // This is a temporary fix for dapps with bad metadata icon urls -+ // Remove this once we replace WebsiteIcon with AvatarFavicon component -+ const excludeList = ['text/html', '']; -+ const contentType = response.headers.get('content-type') || ''; -+ if (excludeList.includes(contentType)) { -+ throw new Error(`Fetching ${uri} resulted in invalid content-type ${contentType}`); -+ } -+ if (!response.ok) { -+ throw new Error('Image not found'); -+ } -+ return await response.text(); - } - - export function SvgUri(props: UriProps) { -- const { onError = err, uri } = props; -- const [xml, setXml] = useState(null); -- useEffect(() => { -- uri -- ? fetchText(uri) -- .then(setXml) -- .catch(onError) -- : setXml(null); -- }, [onError, uri]); -- return ; -+ const { onError = err, uri } = props; -+ const [xml, setXml] = useState(null); -+ useEffect(() => { -+ const fetchXml = async () => { -+ if (uri) { -+ try { -+ const res = await fetchText(uri) -+ setXml(res || null) -+ } catch (e) { -+ onError(e); -+ setXml(null); -+ } -+ } -+ }; -+ -+ fetchXml(); -+ }, [onError, uri]); -+ return ; - } - - // Extending Component is required for Animated support. diff --git a/patches/react-native-svg+15.2.0.patch b/patches/react-native-svg+15.2.0.patch new file mode 100644 index 00000000000..647d35cccad --- /dev/null +++ b/patches/react-native-svg+15.2.0.patch @@ -0,0 +1,63 @@ +diff --git a/node_modules/react-native-svg/src/xml.tsx b/node_modules/react-native-svg/src/xml.tsx +index 9e2352a..8eeaa98 100644 +--- a/node_modules/react-native-svg/src/xml.tsx ++++ b/node_modules/react-native-svg/src/xml.tsx +@@ -124,9 +124,17 @@ export function SvgXml(props: XmlProps) { + + export async function fetchText(uri: string) { + const response = await fetch(uri); ++ const excludeList = ['text/html', '']; ++ const contentType = response.headers.get('content-type') || ''; ++ ++ if (excludeList.includes(contentType)) { ++ throw new Error(`Fetching ${uri} resulted in invalid content-type ${contentType}`); ++ } ++ + if (response.ok || (response.status === 0 && uri.startsWith('file://'))) { + return await response.text(); + } ++ + throw new Error(`Fetching ${uri} failed with status ${response.status}`); + } + +@@ -134,21 +142,28 @@ export function SvgUri(props: UriProps) { + const { onError = err, uri, onLoad, fallback } = props; + const [xml, setXml] = useState(null); + const [isError, setIsError] = useState(false); ++ + useEffect(() => { +- uri +- ? fetchText(uri) +- .then((data) => { +- setXml(data); +- isError && setIsError(false); +- onLoad?.(); +- }) +- .catch((e) => { +- onError(e); +- setIsError(true); +- }) +- : setXml(null); ++ const fetchXml = async () => { ++ if (uri) { ++ try { ++ const data = await fetchText(uri); ++ setXml(data); ++ isError && setIsError(false); ++ onLoad?.(); ++ } catch (e) { ++ onError(e); ++ setIsError(true); ++ } ++ } else { ++ setXml(null); ++ } ++ }; ++ ++ fetchXml(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [onError, uri, onLoad]); ++ + if (isError) { + return fallback ?? null; + } From 1034f5bec2fd6dd55649cf5253311a76f79a41f2 Mon Sep 17 00:00:00 2001 From: tommasini Date: Fri, 10 May 2024 13:43:48 +0100 Subject: [PATCH 3/3] update patch with information of why the fetchText function needed to change, updated snapshots, and removed part of the patch that seems to not be necessary anymore --- .../__snapshots__/AvatarAccount.test.tsx.snap | 30 ++++- .../Cell/__snapshots__/Cell.test.tsx.snap | 90 +++++++++++-- .../__snapshots__/CellBase.test.tsx.snap | 30 ++++- .../__snapshots__/CellDisplay.test.tsx.snap | 30 ++++- .../CellMultiSelect.test.tsx.snap | 30 ++++- .../__snapshots__/CellSelect.test.tsx.snap | 30 ++++- .../__snapshots__/PickerAccount.test.tsx.snap | 30 ++++- .../__snapshots__/SelectButton.test.tsx.snap | 30 ++++- .../SelectButtonBase.test.tsx.snap | 30 ++++- .../__snapshots__/SelectOption.test.tsx.snap | 30 ++++- .../__snapshots__/SelectValue.test.tsx.snap | 30 ++++- .../__snapshots__/index.test.tsx.snap | 30 ++++- .../AccountSelector.test.tsx.snap | 120 +++++++++++++++--- .../__snapshots__/WalletAccount.test.tsx.snap | 30 ++++- .../ApproveTransactionHeader.test.tsx.snap | 60 +++++++-- .../__snapshots__/index.test.tsx.snap | 30 ++++- patches/react-native-svg+15.2.0.patch | 51 +------- 17 files changed, 576 insertions(+), 135 deletions(-) diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarAccount/__snapshots__/AvatarAccount.test.tsx.snap b/app/component-library/components/Avatars/Avatar/variants/AvatarAccount/__snapshots__/AvatarAccount.test.tsx.snap index 9aabe835220..150a92a3df8 100644 --- a/app/component-library/components/Avatars/Avatar/variants/AvatarAccount/__snapshots__/AvatarAccount.test.tsx.snap +++ b/app/component-library/components/Avatars/Avatar/variants/AvatarAccount/__snapshots__/AvatarAccount.test.tsx.snap @@ -48,9 +48,21 @@ exports[`AvatarAccount should render correctly 1`] = ` } width={32} > - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + (null); - const [isError, setIsError] = useState(false); -+ - useEffect(() => { -- uri -- ? fetchText(uri) -- .then((data) => { -- setXml(data); -- isError && setIsError(false); -- onLoad?.(); -- }) -- .catch((e) => { -- onError(e); -- setIsError(true); -- }) -- : setXml(null); -+ const fetchXml = async () => { -+ if (uri) { -+ try { -+ const data = await fetchText(uri); -+ setXml(data); -+ isError && setIsError(false); -+ onLoad?.(); -+ } catch (e) { -+ onError(e); -+ setIsError(true); -+ } -+ } else { -+ setXml(null); -+ } -+ }; -+ -+ fetchXml(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [onError, uri, onLoad]); -+ - if (isError) { - return fallback ?? null; - }