search

alephium / alephium-frontend

A monorepo containing all things frontend on Alephium.
Other
12 stars 9 forks source link

Fix display of SVG data URL NFTs in mobile wallet #658

Closed nop33 closed 3 months ago

nop33 commented 3 months ago

Duplicate of https://github.com/alephium/alephium-frontend/issues/589

nop33 commented 3 months ago

So even though both desktop wallet and mobile wallet use the same code for fetching NFT tokenUri, displaying SVGs works on desktop wallet but not on mobile. This is the code that gets the JSON from the tokenUri: https://github.com/alephium/alephium-frontend/blob/next/packages/shared/src/store/assets/assetsActions.ts#L130-L136

  const promiseResults = await Promise.allSettled(
    nftsMetadata.map(({ tokenUri, id }) =>
      exponentialBackoffFetchRetry(tokenUri)
        .then((res) => res.json())
        .then((data) => ({ ...data, id }))
    )
  )

In the React Native environment we get TypeError: Network request failed] when the tokenUrl is something like

"data:application/json;utf8,{\"name\":\"Africa/Djibouti%20-%20EAT(GMT+3)\",\"attributes\":[{\"trait_type\":\"time\",\"value\":\"1718288767193\"},{\"trait_type\":\"zone\",\"value\":\"Africa/Djibouti\"},{\"trait_type\":\"offset\",\"value\":\"GMT+3\"},{\"trait_type\":\"abbr\",\"value\":\"EAT\"}],\"image\":\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzAwMCIgc3R5bGU9InRyYW5zZm9ybTogcm90YXRlKC05MGRlZykiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHN0eWxlPjpyb290ey0tczo3Oy0tbToyNjstLWg6MTQ7fWNpcmNsZXtmaWxsOndoaXRlO30ubXt0cmFuc2Zvcm06dHJhbnNsYXRlKDIwcHgsMjBweCk7c3Ryb2tlLXdpZHRoOjAuMjt9LnMsLm1pLC5oe3RyYW5zZm9ybTp0cmFuc2xhdGUoMjBweCwgMjBweCkgcm90YXRlKDBkZWcpO30uc3t0cmFuc2Zvcm06dHJhbnNsYXRlKDIwcHgsIDIwcHgpIHJvdGF0ZShjYWxjKHZhcigtLXMpKjZkZWcpKTtzdHJva2Utd2lkdGg6MC4zO2FuaW1hdGlvbjpyb3RhdGVTZWNvbmRIYW5kIDYwcyBzdGVwcyg2MCkgaW5maW5pdGU7c3Ryb2tlOiNkMDA1MDU7fS5taXt0cmFuc2Zvcm06dHJhbnNsYXRlKDIwcHgsIDIwcHgpIHJvdGF0ZShjYWxjKHZhcigtLW0pKjZkZWcpKTtzdHJva2Utd2lkdGg6MC42O2FuaW1hdGlvbjpyb3RhdGVtaUhhbmQgMzYwMHMgc3RlcHMoNjApIGluZmluaXRlO2FuaW1hdGlvbi1kZWxheTpjYWxjKHZhcigtLXMpKi0xKjFzKTt9Lmh7dHJhbnNmb3JtOnRyYW5zbGF0ZSgyMHB4LCAyMHB4KSByb3RhdGUoY2FsYyh2YXIoLS1oKSozMGRlZykpO2FuaW1hdGlvbjpyb3RhdGVoSGFuZCBjYWxjKDEyKjYwKjYwcykgbGluZWFyIGluZmluaXRlO3N0cm9rZS13aWR0aDoxO2FuaW1hdGlvbi1kZWxheTpjYWxjKGNhbGModmFyKC0tbSkqLTYwKjFzKSArIGNhbGModmFyKC0tcykqLTEqMXMpKTt9LnRleHR7Zm9udC1zaXplOjFweDtmb250LWZhbWlseTpzYW5zLXNlcmlmO3RyYW5zZm9ybTp0cmFuc2xhdGUoMTRweCwgMTlweCkgcm90YXRlKDkwZGVnKTtmaWxsOiNkZmRmZGY7c3Ryb2tlOm5vbmU7fS5waW57c3Ryb2tlOiNkMDA1MDU7c3Ryb2tlLXdpZHRoOjAuMjt9QGtleWZyYW1lcyByb3RhdGVTZWNvbmRIYW5ke2Zyb217dHJhbnNmb3JtOnRyYW5zbGF0ZSgyMHB4LCAyMHB4KSByb3RhdGUoY2FsYyh2YXIoLS1zKSo2ZGVnKSk7fXRve3RyYW5zZm9ybTp0cmFuc2xhdGUoMjBweCwgMjBweCkgcm90YXRlKGNhbGModmFyKC0tcykqNmRlZyArIDM2MGRlZykpO319QGtleWZyYW1lcyByb3RhdGVtaUhhbmR7ZnJvbXt0cmFuc2Zvcm06dHJhbnNsYXRlKDIwcHgsIDIwcHgpIHJvdGF0ZShjYWxjKHZhcigtLW0pKjZkZWcpKTt9dG97dHJhbnNmb3JtOnRyYW5zbGF0ZSgyMHB4LCAyMHB4KSByb3RhdGUoY2FsYyh2YXIoLS1tKSo2ZGVnICsgMzYwZGVnKSk7fX1Aa2V5ZnJhbWVzIHJvdGF0ZWhIYW5ke2Zyb217dHJhbnNmb3JtOnRyYW5zbGF0ZSgyMHB4LCAyMHB4KSByb3RhdGUoY2FsYyh2YXIoLS1oKSozMGRlZykpO310b3t0cmFuc2Zvcm06dHJhbnNsYXRlKDIwcHgsIDIwcHgpIHJvdGF0ZShjYWxjKHZhcigtLWgpKjMwZGVnICsgMzYwZGVnKSk7fX0ubT5saW5lOm50aC1jaGlsZCgxKXt0cmFuc2Zvcm06cm90YXRlKDMwZGVnKTt9Lm0+bGluZTpudGgtY2hpbGQoMil7dHJhbnNmb3JtOnJvdGF0ZShjYWxjKDIqMzBkZWcpKTt9Lm0+bGluZTpudGgtY2hpbGQoMyl7dHJhbnNmb3JtOnJvdGF0ZShjYWxjKDMqMzBkZWcpKTtzdHJva2Utd2lkdGg6MC41O30ubT5saW5lOm50aC1jaGlsZCg0KXt0cmFuc2Zvcm06cm90YXRlKGNhbGMoNCozMGRlZykpO30ubT5saW5lOm50aC1jaGlsZCg1KXt0cmFuc2Zvcm06cm90YXRlKGNhbGMoNSozMGRlZykpO30ubT5saW5lOm50aC1jaGlsZCg2KXt0cmFuc2Zvcm06cm90YXRlKGNhbGMoNiozMGRlZykpO3N0cm9rZS13aWR0aDowLjU7fS5tPmxpbmU6bnRoLWNoaWxkKDcpe3RyYW5zZm9ybTpyb3RhdGUoY2FsYyg3KjMwZGVnKSk7fS5tPmxpbmU6bnRoLWNoaWxkKDgpe3RyYW5zZm9ybTpyb3RhdGUoY2FsYyg4KjMwZGVnKSk7fS5tPmxpbmU6bnRoLWNoaWxkKDkpe3RyYW5zZm9ybTpyb3RhdGUoY2FsYyg5KjMwZGVnKSk7c3Ryb2tlLXdpZHRoOjAuNTt9Lm0+bGluZTpudGgtY2hpbGQoMTApe3RyYW5zZm9ybTpyb3RhdGUoY2FsYygxMCozMGRlZykpO30ubT5saW5lOm50aC1jaGlsZCgxMSl7dHJhbnNmb3JtOnJvdGF0ZShjYWxjKDExKjMwZGVnKSk7fS5tPmxpbmU6bnRoLWNoaWxkKDEyKXt0cmFuc2Zvcm06cm90YXRlKGNhbGMoMTIqMzBkZWcpKTtzdHJva2Utd2lkdGg6MC41O308L3N0eWxlPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjE5Ii8+PGcgY2xhc3M9Im0iPjxsaW5lIHgxPSIxNSIgeDI9IjE2Ii8+PGxpbmUgeDE9IjE1IiB4Mj0iMTYiLz48bGluZSB4MT0iMTUiIHgyPSIxNiIvPjxsaW5lIHgxPSIxNSIgeDI9IjE2Ii8+PGxpbmUgeDE9IjE1IiB4Mj0iMTYiLz48bGluZSB4MT0iMTUiIHgyPSIxNiIvPjxsaW5lIHgxPSIxNSIgeDI9IjE2Ii8+PGxpbmUgeDE9IjE1IiB4Mj0iMTYiLz48bGluZSB4MT0iMTUiIHgyPSIxNiIvPjxsaW5lIHgxPSIxNSIgeDI9IjE2Ii8+PGxpbmUgeDE9IjE1IiB4Mj0iMTYiLz48bGluZSB4MT0iMTUiIHgyPSIxNiIvPjwvZz48bGluZSB4Mj0iOSIgY2xhc3M9ImgiLz48bGluZSB4Mj0iMTMiIGNsYXNzPSJtaSIvPjxsaW5lIHgyPSIxNiIgY2xhc3M9InMiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIuNyIgY2xhc3M9InBpbiIvPjwvc3ZnPg==\"}"
nop33 commented 3 months ago

Commit 5093f2f4e16b8cd8ad14b561a3b244201fbd2589 fixes the problem I mentioned in the above comment.

RN doesn't natively support SVGs, thus a package like react-native-svg needs to be used.

The closest I managed to get to displaying the Reed's clocks was to use SvgWithCssUri from react-native-svg/css

<SvgWithCssUri uri={nft.image} width={size} height={size} />
image

However, there are problems with the CSS.

This is the decoded SVG ```xml ```

react-native-svg doesn't like px values, for example this:

translate(20px,20px)

Gives this error:

Expected ")", ",", [ \t\r\n], [0-9], or [eE] but "p" found.
nop33 commented 3 months ago

Commit https://github.com/alephium/alephium-frontend/commit/5093f2f4e16b8cd8ad14b561a3b244201fbd2589 fixes the problem I mentioned in the above comment.

Actually I was wrong. The problem persists on Android. It works on iOS. We still get

[TypeError: Network request failed]