fix: use themable SVGs in react native for common icons (#4462)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to fix the common icons theme in React Native components.

### Detailed summary
- Updated icons in `WalletImage.tsx` and `ConnectModal.tsx`
- Refactored `getAuthProviderImage` function
- Added new `PASSKEY_ICON` in `svgs.ts`

> The following files were skipped due to too many changes: `packages/thirdweb/src/react/core/utils/walletIcon.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

.changeset/nasty-bats-promise.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix common icons theme in React Native

packages/thirdweb/src/react/core/utils/walletIcon.ts

@@ -32,12 +32,6 @@ export const emailIcon =
 export const phoneIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU2MzlfNjMyKSI+CjxwYXRoIGQ9Ik0xNC42NjY5IDExLjI4MDJWMTMuMjgwMkMxNC42Njc3IDEzLjQ2NTkgMTQuNjI5NyAxMy42NDk3IDE0LjU1NTMgMTMuODE5OEMxNC40ODA5IDEzLjk4OTkgMTQuMzcxOCAxNC4xNDI2IDE0LjIzNSAxNC4yNjgxQzE0LjA5ODIgMTQuMzkzNyAxMy45MzY3IDE0LjQ4OTIgMTMuNzYwOCAxNC41NDg3QzEzLjU4NDkgMTQuNjA4MiAxMy4zOTg1IDE0LjYzMDMgMTMuMjEzNiAxNC42MTM2QzExLjE2MjIgMTQuMzkwNyA5LjE5MTYxIDEzLjY4OTcgNy40NjAyOCAxMi41NjY5QzUuODQ5NSAxMS41NDMzIDQuNDgzODQgMTAuMTc3NyAzLjQ2MDI4IDguNTY2ODlDMi4zMzM2IDYuODI3NyAxLjYzMjQ0IDQuODQ3NTYgMS40MTM2MSAyLjc4Njg5QzEuMzk2OTUgMi42MDI1NCAxLjQxODg2IDIuNDE2NzMgMS40Nzc5NSAyLjI0MTMxQzEuNTM3MDMgMi4wNjU4OSAxLjYzMTk5IDEuOTA0NjkgMS43NTY3OSAxLjc2Nzk3QzEuODgxNTkgMS42MzEyNiAyLjAzMzQ4IDEuNTIyMDMgMi4yMDI4MSAxLjQ0NzI0QzIuMzcyMTMgMS4zNzI0NSAyLjU1NTE3IDEuMzMzNzQgMi43NDAyOCAxLjMzMzU2SDQuNzQwMjhDNS4wNjM4MiAxLjMzMDM4IDUuMzc3NDggMS40NDQ5NSA1LjYyMjc5IDEuNjU1OTJDNS44NjgxIDEuODY2ODkgNi4wMjgzMyAyLjE1OTg2IDYuMDczNjEgMi40ODAyM0M2LjE1ODAzIDMuMTIwMjcgNi4zMTQ1OCAzLjc0ODcxIDYuNTQwMjggNC4zNTM1NkM2LjYyOTk4IDQuNTkyMTggNi42NDkzOSA0Ljg1MTUgNi41OTYyMiA1LjEwMDgxQzYuNTQzMDUgNS4zNTAxMiA2LjQxOTUyIDUuNTc4OTcgNi4yNDAyOCA1Ljc2MDIzTDUuMzkzNjEgNi42MDY4OUM2LjM0MjY1IDguMjc1OTIgNy43MjQ1OCA5LjY1Nzg2IDkuMzkzNjEgMTAuNjA2OUwxMC4yNDAzIDkuNzYwMjNDMTAuNDIxNSA5LjU4MDk5IDEwLjY1MDQgOS40NTc0NiAxMC44OTk3IDkuNDA0MjlDMTEuMTQ5IDkuMzUxMTIgMTEuNDA4MyA5LjM3MDUzIDExLjY0NjkgOS40NjAyM0MxMi4yNTE4IDkuNjg1OTMgMTIuODgwMiA5Ljg0MjQ4IDEzLjUyMDMgOS45MjY4OUMxMy44NDQxIDkuOTcyNTggMTQuMTM5OSAxMC4xMzU3IDE0LjM1MTMgMTAuMzg1MkMxNC41NjI3IDEwLjYzNDggMTQuNjc1MSAxMC45NTMzIDE0LjY2NjkgMTEuMjgwMloiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NjM5XzYzMiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
 
-export const emailAndPhoneIcon =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM2ODVfNjcwMikiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzY4NV82NzAyKSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM2ODVfNjcwMikiLz4KPHBhdGggZD0iTTE3IDExQzEzLjY4NzUgMTEgMTEgMTMuNjg3NSAxMSAxN0MxMSAyMC4zMTI1IDEzLjY4NzUgMjMgMTcgMjNDMTcuNTUzMSAyMyAxOCAyMy40NDY5IDE4IDI0QzE4IDI0LjU1MzEgMTcuNTUzMSAyNSAxNyAyNUMxMi41ODEzIDI1IDkgMjEuNDE4NyA5IDE3QzkgMTIuNTgxMyAxMi41ODEzIDkgMTcgOUMyMS40MTg3IDkgMjUgMTIuNTgxMyAyNSAxN1YxOEMyNSAxOS42NTYyIDIzLjY1NjIgMjEgMjIgMjFDMjEuMDg0NCAyMSAyMC4yNjI1IDIwLjU4NzUgMTkuNzEyNSAxOS45NDA2QzE5IDIwLjU5NjkgMTguMDQ2OSAyMSAxNyAyMUMxNC43OTA2IDIxIDEzIDE5LjIwOTQgMTMgMTdDMTMgMTQuNzkwNiAxNC43OTA2IDEzIDE3IDEzQzE3Ljg3MTkgMTMgMTguNjc4MSAxMy4yNzgxIDE5LjMzNDQgMTMuNzUzMUMxOS41MTI1IDEzLjU5NjkgMTkuNzQzOCAxMy41IDIwIDEzLjVDMjAuNTUzMSAxMy41IDIxIDEzLjk0NjkgMjEgMTQuNVYxOEMyMSAxOC41NTMxIDIxLjQ0NjkgMTkgMjIgMTlDMjIuNTUzMSAxOSAyMyAxOC41NTMxIDIzIDE4VjE3QzIzIDEzLjY4NzUgMjAuMzEyNSAxMSAxNyAxMVpNMTkgMTdDMTkgMTYuNDY5NiAxOC43ODkzIDE1Ljk2MDkgMTguNDE0MiAxNS41ODU4QzE4LjAzOTEgMTUuMjEwNyAxNy41MzA0IDE1IDE3IDE1QzE2LjQ2OTYgMTUgMTUuOTYwOSAxNS4yMTA3IDE1LjU4NTggMTUuNTg1OEMxNS4yMTA3IDE1Ljk2MDkgMTUgMTYuNDY5NiAxNSAxN0MxNSAxNy41MzA0IDE1LjIxMDcgMTguMDM5MSAxNS41ODU4IDE4LjQxNDJDMTUuOTYwOSAxOC43ODkzIDE2LjQ2OTYgMTkgMTcgMTlDMTcuNTMwNCAxOSAxOC4wMzkxIDE4Ljc4OTMgMTguNDE0MiAxOC40MTQyQzE4Ljc4OTMgMTguMDM5MSAxOSAxNy41MzA0IDE5IDE3WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI3LjgzODQgMzMuMjY0NEwyOC4yNDI5IDMzLjY5MDdDMjguMjQyOSAzMy42OTA3IDI5LjIwNTUgMzQuNzAzNCAzMS44MzIyIDMxLjkzODNDMzQuNDU4OCAyOS4xNzMxIDMzLjQ5NjIgMjguMTYwNCAzMy40OTYyIDI4LjE2MDRMMzMuMjQxOSAyNy44OTEyQzMyLjYxMzUgMjcuMjMwNSAzMi41NTM5IDI2LjE2ODkgMzMuMTAyNCAyNS4zOTM0TDM0LjIyMjQgMjMuODA5NEMzNC45MDE1IDIyLjg0OTQgMzYuMjEyNiAyMi43MjIzIDM2Ljk5MDQgMjMuNTQxMkwzOC4zODU5IDI1LjAwOTRDMzguNzcwOCAyNS40MTYgMzkuMDI4NiAyNS45NDExIDM4Ljk5NzUgMjYuNTI0N0MzOC45MTc1IDI4LjAxODMgMzguMjc5MiAzMS4yMzA1IDM0LjcyMDIgMzQuOTc4M0MzMC45NDUxIDM4Ljk1MTkgMjcuNDAyOSAzOS4xMSAyNS45NTQ5IDM4Ljk2NjlDMjUuNDk2MiAzOC45MjE4IDI1LjA5OCAzOC42NzUyIDI0Ljc3NzEgMzguMzM2M0wyMy41MTQ5IDM3LjAwNzRDMjIuNjYxNiAzNi4xMTA1IDIyLjkwMTYgMzQuNTcxNyAyMy45OTMxIDMzLjk0MzlMMjUuNjkwOSAzMi45NjZDMjYuNDA3MyAzMi41NTM4IDI3LjI3ODQgMzIuNjc1MiAyNy44Mzg0IDMzLjI2NDRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMzY4NV82NzAyIiB4MT0iMjUuNSIgeTE9Ii02LjI5NTcyZS0wNiIgeDI9IjMwLjIwMTYiIHkyPSI0Ny41MzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzgzNThCQSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3QjFDRjciLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzM2ODVfNjcwMiIgeDE9IjI1LjU2MjUiIHkxPSItMS4wMDAwMSIgeDI9IjMwLjQ2IiB5Mj0iNDguNTE1NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjODM1OEJBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCMUNGNyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM2ODVfNjcwMiI+CjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgcng9IjgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
-
-export const smartWalletIcon =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiByeD0iMTIiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xXzkxKSIvPgo8cGF0aCBkPSJNMzkuOTk2OSAxOEw0MC4yMzMzIDE4LjAxNTZMNDAuMzUxMyAxOC4wMzMzTDQwLjQ3MzYgMTguMDYyMkw0MC42OTU4IDE4LjEzNzhDNDAuODQ5NCAxOC4yMDA2IDQwLjk5NTQgMTguMjg0MiA0MS4xMzA1IDE4LjM4NjdMNDEuMzM4NyAxOC41Njg5TDQxLjg0OTMgMTkuMDUzM0M0NS44ODkxIDIyLjc3NjggNTAuOTk0NyAyNC43NzYyIDU2LjI0NTggMjQuNjkxMUw1Ni45MzA3IDI0LjY2ODlDNTcuMzc4MyAyNC42NDYyIDU3LjgyIDI0Ljc5MDkgNTguMTg0OSAyNS4wNzk4QzU4LjU0OTggMjUuMzY4NyA1OC44MTY3IDI1Ljc4NSA1OC45NDMxIDI2LjI2MjJDNTkuOTI3MSAyOS45NzY5IDYwLjIyODMgMzMuODczMSA1OS44Mjg3IDM3LjcxOTRDNTkuNDI4OSA0MS41NjU4IDU4LjMzNjcgNDUuMjgzNiA1Ni42MTY1IDQ4LjY1MjNDNTQuODk2NSA1Mi4wMjA3IDUyLjU4MzYgNTQuOTcxNCA0OS44MTU2IDU3LjMyODVDNDcuMDQ3NiA1OS42ODU2IDQzLjg4MDkgNjEuNDAxMiA0MC41MDM2IDYyLjM3MzRDNDAuMTc0IDYyLjQ2ODMgMzkuODI4IDYyLjQ2ODMgMzkuNDk4MiA2Mi4zNzM0QzM2LjEyMDkgNjEuNDAxNCAzMi45NTM4IDU5LjY4NiAzMC4xODU2IDU3LjMyODlDMjcuNDE3NiA1NC45NzE4IDI1LjEwNDUgNTIuMDIxNCAyMy4zODQyIDQ4LjY1MjlDMjEuNjYzOCA0NS4yODQzIDIwLjU3MTMgNDEuNTY2MiAyMC4xNzE1IDM3LjcxOThDMTkuNzcxNyAzMy44NzM0IDIwLjA3MjcgMjkuOTc2OSAyMS4wNTY3IDI2LjI2MjJDMjEuMTgzMSAyNS43ODUgMjEuNDUwMSAyNS4zNjg3IDIxLjgxNSAyNS4wNzk4QzIyLjE3OTkgMjQuNzkwOSAyMi42MjE1IDI0LjY0NjIgMjMuMDY5MyAyNC42Njg5QzI4LjU1MTMgMjQuOTQ3IDMzLjkyOTMgMjIuOTQ0NCAzOC4xNTA3IDE5LjA1MzNMMzguNjc3MyAxOC41NTMzTDM4Ljg2OTYgMTguMzg2N0MzOS4wMDQ3IDE4LjI4NDIgMzkuMTUwNSAxOC4yMDA2IDM5LjMwNCAxOC4xMzc4TDM5LjUyODIgMTguMDYyMkMzOS42MDY5IDE4LjA0MTIgMzkuNjg2NSAxOC4wMjU2IDM5Ljc2NjcgMTguMDE1NkwzOS45OTY5IDE4Wk00MC4wMDA5IDMzLjU1NTZDMzguOTkwNSAzMy41NTUxIDM4LjAxNzMgMzMuOTc4NyAzNy4yNzY1IDM0Ljc0MTFDMzYuNTM1NiAzNS41MDM2IDM2LjA4MTYgMzYuNTQ4NSAzNi4wMDU4IDM3LjY2NjdMMzUuOTk1OCAzOEwzNi4wMDU4IDM4LjMzMzRDMzYuMDU1MSAzOS4wNTQ3IDM2LjI2MjUgMzkuNzUxOCAzNi42MDk4IDQwLjM2NEMzNi45NTY5IDQwLjk3NjIgMzcuNDMzNiA0MS40ODUxIDM3Ljk5ODUgNDEuODQ2N1Y0NS43Nzc4TDM4LjAxMjUgNDYuMDM3OEMzOC4wNzI3IDQ2LjYwMDMgMzguMzI0MiA0Ny4xMTU4IDM4LjcxNTYgNDcuNDc5NEMzOS4xMDcxIDQ3Ljg0MjkgMzkuNjA4NyA0OC4wMjY5IDQwLjExODIgNDcuOTkzOEM0MC42Mjc4IDQ3Ljk2MDUgNDEuMTA2NyA0Ny43MTI3IDQxLjQ1NzEgNDcuMzAwOUM0MS44MDc2IDQ2Ljg4ODkgNDIuMDAyOSA0Ni4zNDQzIDQyLjAwMzYgNDUuNzc3OEw0Mi4wMDU2IDQxLjg0ODlDNDIuNzY5MSA0MS4zNTk2IDQzLjM2NiA0MC42MDQyIDQzLjcwMzQgMzkuNzAwMkM0NC4wNDA3IDM4Ljc5NiA0NC4wOTk2IDM3Ljc5MzggNDMuODcxMSAzNi44NDg3QzQzLjY0MjcgMzUuOTAzNiA0My4xMzk2IDM1LjA2ODUgNDIuNDM5OCAzNC40NzMxQzQxLjc0IDMzLjg3NzYgNDAuODgyNyAzMy41NTUxIDQwLjAwMDkgMzMuNTU1NloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xXzkxKSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzFfOTEiIHgxPSI0MCIgeTE9IjAiIHgyPSI0MCIgeTI9IjgwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU2QkQiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0MyMEY0Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl8xXzkxIiB4MT0iNDAiIHkxPSIxOCIgeDI9IjQwIiB5Mj0iNjIuNDQ0NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNFMUQ4RkIiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K";
-
 export const genericTokenIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQwNDhfNDIzMSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNTg0IDQuODU1NjZDNy43MTA2OSA0Ljc4MjUyIDcuODU0MzkgNC43NDQwMiA4LjAwMDY3IDQuNzQ0MDJDOC4xNDY5NSA0Ljc0NDAyIDguMjkwNjUgNC43ODI1MiA4LjQxNzM0IDQuODU1NjZMMTAuNTE1MyA2LjA2NjY2QzEwLjY0MiA2LjEzOTggMTAuNzQ3MiA2LjI0NSAxMC44MjA0IDYuMzcxNjhDMTAuODkzNSA2LjQ5ODM1IDEwLjkzMiA2LjY0MjA1IDEwLjkzMiA2Ljc4ODMzVjkuMjExQzEwLjkzMiA5LjM1NzI3IDEwLjg5MzUgOS41MDA5NyAxMC44MjA0IDkuNjI3NjVDMTAuNzQ3MiA5Ljc1NDMzIDEwLjY0MiA5Ljg1OTUzIDEwLjUxNTMgOS45MzI2Nkw4LjQxNzM0IDExLjE0NEM4LjI5MDY1IDExLjIxNzEgOC4xNDY5NSAxMS4yNTU2IDguMDAwNjcgMTEuMjU1NkM3Ljg1NDM5IDExLjI1NTYgNy43MTA2OSAxMS4yMTcxIDcuNTg0IDExLjE0NEw1LjQ4NiA5LjkzMjY2QzUuMzU5MzIgOS44NTk1MyA1LjI1NDEzIDkuNzU0MzMgNS4xODA5OSA5LjYyNzY1QzUuMTA3ODUgOS41MDA5NyA1LjA2OTM0IDkuMzU3MjcgNS4wNjkzNCA5LjIxMVY2Ljc4ODY2QzUuMDY5MjggNi42NDIzMyA1LjEwNzc2IDYuNDk4NTYgNS4xODA5IDYuMzcxODJDNS4yNTQwNSA2LjI0NTA4IDUuMzU5MjcgNi4xMzk4MyA1LjQ4NiA2LjA2NjY2TDcuNTg0IDQuODU1NjZaTTguMDg0IDUuNDMzQzguMDU4NjcgNS40MTgzNyA4LjAyOTkzIDUuNDEwNjcgOC4wMDA2NyA1LjQxMDY3QzcuOTcxNDEgNS40MTA2NyA3Ljk0MjY3IDUuNDE4MzcgNy45MTczNCA1LjQzM0w1LjgxOTM0IDYuNjQ0MzNDNS43OTQgNi42NTg5NiA1Ljc3Mjk2IDYuNjggNS43NTgzMyA2LjcwNTMzQzUuNzQzNyA2LjczMDY3IDUuNzM2IDYuNzU5NDEgNS43MzYgNi43ODg2NlY5LjIxMTMzQzUuNzM2IDkuMjQwNTkgNS43NDM3IDkuMjY5MzMgNS43NTgzMyA5LjI5NDY2QzUuNzcyOTYgOS4zMiA1Ljc5NCA5LjM0MTA0IDUuODE5MzQgOS4zNTU2Nkw3LjkxNzM0IDEwLjU2NjdDNy45NDI2NyAxMC41ODEzIDcuOTcxNDEgMTAuNTg5IDguMDAwNjcgMTAuNTg5QzguMDI5OTMgMTAuNTg5IDguMDU4NjcgMTAuNTgxMyA4LjA4NCAxMC41NjY3TDEwLjE4MiA5LjM1NTMzQzEwLjIwNzMgOS4zNDA3IDEwLjIyODQgOS4zMTk2NiAxMC4yNDMgOS4yOTQzM0MxMC4yNTc2IDkuMjY4OTkgMTAuMjY1MyA5LjI0MDI1IDEwLjI2NTMgOS4yMTFWNi43ODg2NkMxMC4yNjUzIDYuNzU5NDEgMTAuMjU3NiA2LjczMDY3IDEwLjI0MyA2LjcwNTMzQzEwLjIyODQgNi42OCAxMC4yMDczIDYuNjU4OTYgMTAuMTgyIDYuNjQ0MzNMOC4wODQgNS40MzNaIiBmaWxsPSIjNUM1QzVDIi8+CjwvZz4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjcuNjkyMzEiIHN0cm9rZT0iIzVDNUM1QyIgc3Ryb2tlLXdpZHRoPSIwLjYxNTM4NSIvPgo8Y2lyY2xlIGN4PSI3Ljk5OTU1IiBjeT0iOC4wMDAwNCIgcj0iNS44NDYxNSIgc3Ryb2tlPSIjNUM1QzVDIiBzdHJva2Utd2lkdGg9IjAuNjE1Mzg1Ii8+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQwNDhfNDIzMSI+CjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
 
@@ -56,6 +50,7 @@ export const socialIcons = {
   telegram: telegramIconUri,
 };
 
+// TODO: this should return actual <svg> elements so they can be themed
 export function getWalletIcon(provider: string) {
   switch (provider) {
     case "google":

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx

@@ -5,13 +5,15 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
-import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import {
   APPLE_ICON,
   DISCORD_ICON,
+  EMAIL_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
   GOOGLE_ICON,
+  PASSKEY_ICON,
+  PHONE_ICON,
   TELEGRAM_ICON,
   WALLET_ICON,
 } from "../icons/svgs.js";
@@ -63,12 +65,14 @@ export const WalletImage = (props: {
   return <RNImage theme={props.theme} data={data} size={size} />;
 };
 
-export function getAuthProviderImage(lastAuthProvider: string | null): string {
-  switch (lastAuthProvider) {
+export function getAuthProviderImage(authProvider: string | null): string {
+  switch (authProvider) {
     case "phone":
+      return PHONE_ICON;
     case "email":
+      return EMAIL_ICON;
     case "passkey":
-      return getWalletIcon(lastAuthProvider);
+      return PASSKEY_ICON;
     case "google":
       return GOOGLE_ICON;
     case "apple":
@@ -82,6 +86,6 @@ export function getAuthProviderImage(lastAuthProvider: string | null): string {
     case "telegram":
       return TELEGRAM_ICON;
     default:
-      return getWalletIcon("");
+      return WALLET_ICON;
   }
 }

packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx

@@ -15,7 +15,6 @@ import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js"
 import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
-import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
@@ -28,7 +27,7 @@ import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
-import { TW_ICON } from "../icons/svgs.js";
+import { TW_ICON, WALLET_ICON } from "../icons/svgs.js";
 import { ErrorView } from "./ErrorView.js";
 import { ExternalWalletsList } from "./ExternalWalletsList.js";
 import { InAppWalletUI, OtpLogin, PasskeyView } from "./InAppWalletUI.js";
@@ -374,7 +373,7 @@ export function ConnectModal(
                     <OrDivider theme={theme} />
                     <ThemedButtonWithIcon
                       theme={theme}
-                      icon={getWalletIcon("")}
+                      icon={WALLET_ICON}
                       title="Connect a wallet"
                       onPress={() =>
                         setModalState({ screen: "external_wallets" })

packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -21,9 +21,9 @@ import {
 } from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
-import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { RNImage } from "../components/RNImage.js";
+import { getAuthProviderImage } from "../components/WalletImage.js";
 import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { ThemedInput, ThemedInputWithSubmit } from "../components/input.js";
 import { Spacer } from "../components/spacer.js";
@@ -93,7 +93,7 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           <ThemedButtonWithIcon
             theme={theme}
             title="Email address"
-            icon={getWalletIcon("email")}
+            icon={getAuthProviderImage("email")}
             onPress={() => setInputMode("email")}
           />
         )
@@ -105,7 +105,7 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           <ThemedButtonWithIcon
             theme={theme}
             title="Phone number"
-            icon={getWalletIcon("phone")}
+            icon={getAuthProviderImage("phone")}
             onPress={() => setInputMode("phone")}
           />
         )
@@ -114,7 +114,7 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
         <ThemedButtonWithIcon
           theme={theme}
           title="Passkey"
-          icon={getWalletIcon("passkey")}
+          icon={getAuthProviderImage("passkey")}
           onPress={() => {
             props.setScreen({ screen: "passkey", wallet });
           }}
@@ -363,7 +363,12 @@ export function PasskeyView(props: InAppWalletFormUIProps) {
           padding: spacing.xl,
         }}
       >
-        <RNImage theme={theme} size={90} data={getWalletIcon("passkey")} />
+        <RNImage
+          theme={theme}
+          size={90}
+          data={getAuthProviderImage("passkey")}
+          color={theme.colors.accentButtonBg}
+        />
         <Spacer size="xxl" />
         <ThemedButton
           theme={theme}

packages/thirdweb/src/react/native/ui/icons/svgs.ts

@@ -74,6 +74,18 @@ export const PHONE_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill=
 </svg>
 `;
 
+export const PASSKEY_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99971 6.6665C7.64609 6.6665 7.30695 6.80698 7.0569 7.05703C6.80685 7.30708 6.66638 7.64622 6.66638 7.99984C6.66638 8.67984 6.59971 9.67317 6.49304 10.6665" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33305 8.74658C9.33305 10.3332 9.33305 12.9999 8.66638 14.6666" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5272 14.0133C11.6072 13.6133 11.8139 12.48 11.8606 12" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.33386 8.00016C1.33386 6.60095 1.77411 5.2372 2.59225 4.10209C3.41038 2.96699 4.56493 2.11808 5.89234 1.67561C7.21976 1.23314 8.65274 1.21954 9.98831 1.63674C11.3239 2.05394 12.4943 2.88079 13.3339 4.00016" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.33386 10.6665H1.33902" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5327 10.6665C14.666 9.33317 14.62 7.09717 14.5327 6.6665" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.33386 12.9998C3.6672 11.9998 4.00053 9.99984 4.00053 7.99984C3.99986 7.54575 4.07651 7.09486 4.2272 6.6665" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.76709 14.6668C5.90709 14.2268 6.06709 13.7868 6.14709 13.3335" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.00012 4.53346C6.60839 4.18228 7.2984 3.99745 8.00076 3.99756C8.70313 3.99767 9.39308 4.18272 10.0012 4.5341C10.6094 4.88548 11.1143 5.39079 11.4652 5.99923C11.8161 6.60766 12.0006 7.29776 12.0001 8.00012V9.33346" stroke="currentColor" stroke-width="1.2549" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
 export const RIGHT_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.5868 16.2882C10.4994 16.2011 10.4301 16.0977 10.3827 15.9837C10.3354 15.8697 10.3111 15.7476 10.3111 15.6242C10.3111 15.5008 10.3354 15.3786 10.3827 15.2647C10.4301 15.1507 10.4994 15.0472 10.5868 14.9601L14.6095 10.9375L3.12509 10.9375C2.87645 10.9375 2.638 10.8387 2.46218 10.6629C2.28637 10.4871 2.18759 10.2486 2.18759 9.99996C2.18759 9.75132 2.28637 9.51287 2.46218 9.33705C2.638 9.16124 2.87645 9.06246 3.12509 9.06246L14.6095 9.06246L10.5868 5.03825C10.4107 4.86213 10.3117 4.62326 10.3117 4.37418C10.3117 4.12511 10.4107 3.88624 10.5868 3.71012C10.7629 3.534 11.0018 3.43506 11.2509 3.43506C11.4999 3.43506 11.7388 3.534 11.9149 3.71012L17.5399 9.33512C17.6273 9.42222 17.6967 9.52571 17.744 9.63967C17.7913 9.75362 17.8157 9.8758 17.8157 9.99918C17.8157 10.1226 17.7913 10.2447 17.744 10.3587C17.6967 10.4727 17.6273 10.5761 17.5399 10.6632L11.9149 16.2882C11.8278 16.3756 11.7243 16.445 11.6104 16.4923C11.4964 16.5396 11.3743 16.564 11.2509 16.564C11.1275 16.564 11.0053 16.5396 10.8914 16.4923C10.7774 16.445 10.6739 16.3756 10.5868 16.2882Z" fill="currentColor"/>
 </svg>