From 158c2b6e8e41a88233fc819af54f4e0848604d0a Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Fri, 25 Oct 2024 11:52:08 +1300 Subject: [PATCH] feat: respect theme accentColor for default connect UI icons (#5163) --- .changeset/few-bears-float.md | 5 ++ .../connect/sign-in/button/RightSection.tsx | 65 ++++++++--------- .../src/react/core/utils/walletIcon.ts | 6 +- .../react/web/ui/ConnectWallet/MenuButton.tsx | 3 - .../web/ui/ConnectWallet/WalletSelector.tsx | 4 +- .../ui/ConnectWallet/WalletTypeRowButton.tsx | 21 ++---- .../web/ui/ConnectWallet/icons/EmailIcon.tsx | 30 ++++++++ .../ConnectWallet/icons/FingerPrintIcon.tsx | 18 ++--- .../web/ui/ConnectWallet/icons/GuestIcon.tsx | 24 +++++++ .../ConnectWallet/icons/OutlineWalletIcon.tsx | 4 +- .../web/ui/ConnectWallet/icons/PhoneIcon.tsx | 32 +++++++++ .../react/web/ui/ConnectWallet/icons/types.ts | 2 +- .../screens/LinkedProfilesScreen.tsx | 11 ++- .../react/web/ui/components/WalletImage.tsx | 69 +++++++++++++------ .../react/web/wallets/in-app/WalletAuth.tsx | 16 ++++- .../shared/ConnectWalletSocialOptions.tsx | 25 ++++--- 16 files changed, 230 insertions(+), 105 deletions(-) create mode 100644 .changeset/few-bears-float.md create mode 100644 packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx create mode 100644 packages/thirdweb/src/react/web/ui/ConnectWallet/icons/GuestIcon.tsx create mode 100644 packages/thirdweb/src/react/web/ui/ConnectWallet/icons/PhoneIcon.tsx diff --git a/.changeset/few-bears-float.md b/.changeset/few-bears-float.md new file mode 100644 index 00000000000..7b3f4bf3808 --- /dev/null +++ b/.changeset/few-bears-float.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Respect theme accentColor for default icons in connect UI diff --git a/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx b/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx index 3e91d0ffb6c..ddf9057cbb9 100644 --- a/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx +++ b/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx @@ -82,6 +82,37 @@ export function RightSection(props: { } }, [connectOptions.enableAuth, doLogout]); + const connectButton = ( + + ); + return (
+ // TODO: should show the expanded connected modal here instead + connectButton ) : (
))} - {previewTab === "button" && ( - - )} + {previewTab === "button" && connectButton} {previewTab === "code" && }
diff --git a/packages/thirdweb/src/react/core/utils/walletIcon.ts b/packages/thirdweb/src/react/core/utils/walletIcon.ts index cabb929617f..b7a93f4132e 100644 --- a/packages/thirdweb/src/react/core/utils/walletIcon.ts +++ b/packages/thirdweb/src/react/core/utils/walletIcon.ts @@ -23,9 +23,9 @@ const githubIconUri = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwNiAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUzIiBjeT0iNTMiIHI9IjUzIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUyLjg1NCA0QzI1LjgzOSA0IDQgMjYgNCA1My4yMTdDNCA3NC45NzMgMTcuOTkzIDkzLjM4OSAzNy40MDUgOTkuOTA3QzM5LjgzMiAxMDAuMzk3IDQwLjcyMSA5OC44NDggNDAuNzIxIDk3LjU0NUM0MC43MjEgOTYuNDA0IDQwLjY0MSA5Mi40OTMgNDAuNjQxIDg4LjQxOEMyNy4wNTEgOTEuMzUyIDI0LjIyMSA4Mi41NTEgMjQuMjIxIDgyLjU1MUMyMi4wMzcgNzYuODQ3IDE4LjgwMSA3NS4zODEgMTguODAxIDc1LjM4MUMxNC4zNTMgNzIuMzY2IDE5LjEyNSA3Mi4zNjYgMTkuMTI1IDcyLjM2NkMyNC4wNTkgNzIuNjkyIDI2LjY0OCA3Ny40MTggMjYuNjQ4IDc3LjQxOEMzMS4wMTUgODQuOTE0IDM4LjA1MiA4Mi43OTYgNDAuODgzIDgxLjQ5MkM0MS4yODcgNzguMzE0IDQyLjU4MiA3Ni4xMTQgNDMuOTU3IDc0Ljg5MkMzMy4xMTggNzMuNzUxIDIxLjcxNCA2OS41MTQgMjEuNzE0IDUwLjYwOUMyMS43MTQgNDUuMjMxIDIzLjY1NCA0MC44MzEgMjYuNzI4IDM3LjQwOUMyNi4yNDMgMzYuMTg3IDI0LjU0NCAzMS4xMzQgMjcuMjE0IDI0LjM3MUMyNy4yMTQgMjQuMzcxIDMxLjMzOSAyMy4wNjcgNDAuNjQgMjkuNDIzQzQ0LjYyMjEgMjguMzQ1NyA0OC43Mjg4IDI3Ljc5NzYgNTIuODU0IDI3Ljc5M0M1Ni45NzkgMjcuNzkzIDYxLjE4NCAyOC4zNjQgNjUuMDY3IDI5LjQyM0M3NC4zNjkgMjMuMDY3IDc4LjQ5NCAyNC4zNzEgNzguNDk0IDI0LjM3MUM4MS4xNjQgMzEuMTM0IDc5LjQ2NCAzNi4xODcgNzguOTc5IDM3LjQwOUM4Mi4xMzQgNDAuODMxIDgzLjk5NCA0NS4yMzEgODMuOTk0IDUwLjYwOUM4My45OTQgNjkuNTE0IDcyLjU5IDczLjY2OSA2MS42NyA3NC44OTJDNjMuNDUgNzYuNDQgNjQuOTg2IDc5LjM3MyA2NC45ODYgODQuMDE4QzY0Ljk4NiA5MC42MTggNjQuOTA2IDk1LjkxNSA2NC45MDYgOTcuNTQ0QzY0LjkwNiA5OC44NDggNjUuNzk2IDEwMC4zOTcgNjguMjIyIDk5LjkwOEM4Ny42MzQgOTMuMzg4IDEwMS42MjcgNzQuOTczIDEwMS42MjcgNTMuMjE3QzEwMS43MDcgMjYgNzkuNzg4IDQgNTIuODU0IDRaIiBmaWxsPSIjMjQyOTJGIi8+Cjwvc3ZnPgo="; const xIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="; -export const emailIcon = +const emailIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzUgMi42NjY1SDIuNjY2ODNDMS45MzA0NSAyLjY2NjUgMS4zMzM1IDMuMjYzNDYgMS4zMzM1IDMuOTk5ODRWMTEuOTk5OEMxLjMzMzUgMTIuNzM2MiAxLjkzMDQ1IDEzLjMzMzIgMi42NjY4MyAxMy4zMzMySDEzLjMzMzVDMTQuMDY5OSAxMy4zMzMyIDE0LjY2NjggMTIuNzM2MiAxNC42NjY4IDExLjk5OThWMy45OTk4NEMxNC42NjY4IDMuMjYzNDYgMTQuMDY5OSAyLjY2NjUgMTMuMzMzNSAyLjY2NjVaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQuNjY2OCA0LjY2NjVMOC42ODY4MyA4LjQ2NjVDOC40ODEwMSA4LjU5NTQ1IDguMjQzMDQgOC42NjM4NCA4LjAwMDE2IDguNjYzODRDNy43NTcyOCA4LjY2Mzg0IDcuNTE5MzEgOC41OTU0NSA3LjMxMzUgOC40NjY1TDEuMzMzNSA0LjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="; -export const phoneIcon = +const phoneIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU2MzlfNjMyKSI+CjxwYXRoIGQ9Ik0xNC42NjY5IDExLjI4MDJWMTMuMjgwMkMxNC42Njc3IDEzLjQ2NTkgMTQuNjI5NyAxMy42NDk3IDE0LjU1NTMgMTMuODE5OEMxNC40ODA5IDEzLjk4OTkgMTQuMzcxOCAxNC4xNDI2IDE0LjIzNSAxNC4yNjgxQzE0LjA5ODIgMTQuMzkzNyAxMy45MzY3IDE0LjQ4OTIgMTMuNzYwOCAxNC41NDg3QzEzLjU4NDkgMTQuNjA4MiAxMy4zOTg1IDE0LjYzMDMgMTMuMjEzNiAxNC42MTM2QzExLjE2MjIgMTQuMzkwNyA5LjE5MTYxIDEzLjY4OTcgNy40NjAyOCAxMi41NjY5QzUuODQ5NSAxMS41NDMzIDQuNDgzODQgMTAuMTc3NyAzLjQ2MDI4IDguNTY2ODlDMi4zMzM2IDYuODI3NyAxLjYzMjQ0IDQuODQ3NTYgMS40MTM2MSAyLjc4Njg5QzEuMzk2OTUgMi42MDI1NCAxLjQxODg2IDIuNDE2NzMgMS40Nzc5NSAyLjI0MTMxQzEuNTM3MDMgMi4wNjU4OSAxLjYzMTk5IDEuOTA0NjkgMS43NTY3OSAxLjc2Nzk3QzEuODgxNTkgMS42MzEyNiAyLjAzMzQ4IDEuNTIyMDMgMi4yMDI4MSAxLjQ0NzI0QzIuMzcyMTMgMS4zNzI0NSAyLjU1NTE3IDEuMzMzNzQgMi43NDAyOCAxLjMzMzU2SDQuNzQwMjhDNS4wNjM4MiAxLjMzMDM4IDUuMzc3NDggMS40NDQ5NSA1LjYyMjc5IDEuNjU1OTJDNS44NjgxIDEuODY2ODkgNi4wMjgzMyAyLjE1OTg2IDYuMDczNjEgMi40ODAyM0M2LjE1ODAzIDMuMTIwMjcgNi4zMTQ1OCAzLjc0ODcxIDYuNTQwMjggNC4zNTM1NkM2LjYyOTk4IDQuNTkyMTggNi42NDkzOSA0Ljg1MTUgNi41OTYyMiA1LjEwMDgxQzYuNTQzMDUgNS4zNTAxMiA2LjQxOTUyIDUuNTc4OTcgNi4yNDAyOCA1Ljc2MDIzTDUuMzkzNjEgNi42MDY4OUM2LjM0MjY1IDguMjc1OTIgNy43MjQ1OCA5LjY1Nzg2IDkuMzkzNjEgMTAuNjA2OUwxMC4yNDAzIDkuNzYwMjNDMTAuNDIxNSA5LjU4MDk5IDEwLjY1MDQgOS40NTc0NiAxMC44OTk3IDkuNDA0MjlDMTEuMTQ5IDkuMzUxMTIgMTEuNDA4MyA5LjM3MDUzIDExLjY0NjkgOS40NjAyM0MxMi4yNTE4IDkuNjg1OTMgMTIuODgwMiA5Ljg0MjQ4IDEzLjUyMDMgOS45MjY4OUMxMy44NDQxIDkuOTcyNTggMTQuMTM5OSAxMC4xMzU3IDE0LjM1MTMgMTAuMzg1MkMxNC41NjI3IDEwLjYzNDggMTQuNjc1MSAxMC45NTMzIDE0LjY2NjkgMTEuMjgwMloiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NjM5XzYzMiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"; export const genericTokenIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQwNDhfNDIzMSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNTg0IDQuODU1NjZDNy43MTA2OSA0Ljc4MjUyIDcuODU0MzkgNC43NDQwMiA4LjAwMDY3IDQuNzQ0MDJDOC4xNDY5NSA0Ljc0NDAyIDguMjkwNjUgNC43ODI1MiA4LjQxNzM0IDQuODU1NjZMMTAuNTE1MyA2LjA2NjY2QzEwLjY0MiA2LjEzOTggMTAuNzQ3MiA2LjI0NSAxMC44MjA0IDYuMzcxNjhDMTAuODkzNSA2LjQ5ODM1IDEwLjkzMiA2LjY0MjA1IDEwLjkzMiA2Ljc4ODMzVjkuMjExQzEwLjkzMiA5LjM1NzI3IDEwLjg5MzUgOS41MDA5NyAxMC44MjA0IDkuNjI3NjVDMTAuNzQ3MiA5Ljc1NDMzIDEwLjY0MiA5Ljg1OTUzIDEwLjUxNTMgOS45MzI2Nkw4LjQxNzM0IDExLjE0NEM4LjI5MDY1IDExLjIxNzEgOC4xNDY5NSAxMS4yNTU2IDguMDAwNjcgMTEuMjU1NkM3Ljg1NDM5IDExLjI1NTYgNy43MTA2OSAxMS4yMTcxIDcuNTg0IDExLjE0NEw1LjQ4NiA5LjkzMjY2QzUuMzU5MzIgOS44NTk1MyA1LjI1NDEzIDkuNzU0MzMgNS4xODA5OSA5LjYyNzY1QzUuMTA3ODUgOS41MDA5NyA1LjA2OTM0IDkuMzU3MjcgNS4wNjkzNCA5LjIxMVY2Ljc4ODY2QzUuMDY5MjggNi42NDIzMyA1LjEwNzc2IDYuNDk4NTYgNS4xODA5IDYuMzcxODJDNS4yNTQwNSA2LjI0NTA4IDUuMzU5MjcgNi4xMzk4MyA1LjQ4NiA2LjA2NjY2TDcuNTg0IDQuODU1NjZaTTguMDg0IDUuNDMzQzguMDU4NjcgNS40MTgzNyA4LjAyOTkzIDUuNDEwNjcgOC4wMDA2NyA1LjQxMDY3QzcuOTcxNDEgNS40MTA2NyA3Ljk0MjY3IDUuNDE4MzcgNy45MTczNCA1LjQzM0w1LjgxOTM0IDYuNjQ0MzNDNS43OTQgNi42NTg5NiA1Ljc3Mjk2IDYuNjggNS43NTgzMyA2LjcwNTMzQzUuNzQzNyA2LjczMDY3IDUuNzM2IDYuNzU5NDEgNS43MzYgNi43ODg2NlY5LjIxMTMzQzUuNzM2IDkuMjQwNTkgNS43NDM3IDkuMjY5MzMgNS43NTgzMyA5LjI5NDY2QzUuNzcyOTYgOS4zMiA1Ljc5NCA5LjM0MTA0IDUuODE5MzQgOS4zNTU2Nkw3LjkxNzM0IDEwLjU2NjdDNy45NDI2NyAxMC41ODEzIDcuOTcxNDEgMTAuNTg5IDguMDAwNjcgMTAuNTg5QzguMDI5OTMgMTAuNTg5IDguMDU4NjcgMTAuNTgxMyA4LjA4NCAxMC41NjY3TDEwLjE4MiA5LjM1NTMzQzEwLjIwNzMgOS4zNDA3IDEwLjIyODQgOS4zMTk2NiAxMC4yNDMgOS4yOTQzM0MxMC4yNTc2IDkuMjY4OTkgMTAuMjY1MyA5LjI0MDI1IDEwLjI2NTMgOS4yMTFWNi43ODg2NkMxMC4yNjUzIDYuNzU5NDEgMTAuMjU3NiA2LjczMDY3IDEwLjI0MyA2LjcwNTMzQzEwLjIyODQgNi42OCAxMC4yMDczIDYuNjU4OTYgMTAuMTgyIDYuNjQ0MzNMOC4wODQgNS40MzNaIiBmaWxsPSIjNUM1QzVDIi8+CjwvZz4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjcuNjkyMzEiIHN0cm9rZT0iIzVDNUM1QyIgc3Ryb2tlLXdpZHRoPSIwLjYxNTM4NSIvPgo8Y2lyY2xlIGN4PSI3Ljk5OTU1IiBjeT0iOC4wMDAwNCIgcj0iNS44NDYxNSIgc3Ryb2tlPSIjNUM1QzVDIiBzdHJva2Utd2lkdGg9IjAuNjE1Mzg1Ii8+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQwNDhfNDIzMSI+CjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg=="; @@ -33,7 +33,7 @@ const guestIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDIxVjE5QzE5IDE3LjkzOTEgMTguNTc4NiAxNi45MjE3IDE3LjgyODQgMTYuMTcxNkMxNy4wNzgzIDE1LjQyMTQgMTYuMDYwOSAxNSAxNSAxNUg5QzcuOTM5MTMgMTUgNi45MjE3MiAxNS40MjE0IDYuMTcxNTcgMTYuMTcxNkM1LjQyMTQzIDE2LjkyMTcgNSAxNy45MzkxIDUgMTlWMjEiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyIDExQzE0LjIwOTEgMTEgMTYgOS4yMDkxNCAxNiA3QzE2IDQuNzkwODYgMTQuMjA5MSAzIDEyIDNDOS43OTA4NiAzIDggNC43OTA4NiA4IDdDOCA5LjIwOTE0IDkuNzkwODYgMTEgMTIgMTFaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="; export const genericWalletIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjY2NjcgNC42NjY2N1YyLjY2NjY3QzEyLjY2NjcgMi40ODk4NiAxMi41OTY0IDIuMzIwMjkgMTIuNDcxNCAyLjE5NTI2QzEyLjM0NjQgMi4wNzAyNCAxMi4xNzY4IDIgMTIgMkgzLjMzMzMzQzIuOTc5NzEgMiAyLjY0MDU3IDIuMTQwNDggMi4zOTA1MiAyLjM5MDUyQzIuMTQwNDggMi42NDA1NyAyIDIuOTc5NzEgMiAzLjMzMzMzQzIgMy42ODY5NiAyLjE0MDQ4IDQuMDI2MDkgMi4zOTA1MiA0LjI3NjE0QzIuNjQwNTcgNC41MjYxOSAyLjk3OTcxIDQuNjY2NjcgMy4zMzMzMyA0LjY2NjY3SDEzLjMzMzNDMTMuNTEwMSA0LjY2NjY3IDEzLjY3OTcgNC43MzY5IDEzLjgwNDcgNC44NjE5M0MxMy45Mjk4IDQuOTg2OTUgMTQgNS4xNTY1MiAxNCA1LjMzMzMzVjhNMTQgOEgxMkMxMS42NDY0IDggMTEuMzA3MiA4LjE0MDQ4IDExLjA1NzIgOC4zOTA1MkMxMC44MDcxIDguNjQwNTcgMTAuNjY2NyA4Ljk3OTcxIDEwLjY2NjcgOS4zMzMzM0MxMC42NjY3IDkuNjg2OTYgMTAuODA3MSAxMC4wMjYxIDExLjA1NzIgMTAuMjc2MUMxMS4zMDcyIDEwLjUyNjIgMTEuNjQ2NCAxMC42NjY3IDEyIDEwLjY2NjdIMTRDMTQuMTc2OCAxMC42NjY3IDE0LjM0NjQgMTAuNTk2NCAxNC40NzE0IDEwLjQ3MTRDMTQuNTk2NCAxMC4zNDY0IDE0LjY2NjcgMTAuMTc2OCAxNC42NjY3IDEwVjguNjY2NjdDMTQuNjY2NyA4LjQ4OTg2IDE0LjU5NjQgOC4zMjAyOSAxNC40NzE0IDguMTk1MjZDMTQuMzQ2NCA4LjA3MDI0IDE0LjE3NjggOCAxNCA4WiIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIgMy4zMzM1VjEyLjY2NjhDMiAxMy4wMjA1IDIuMTQwNDggMTMuMzU5NiAyLjM5MDUyIDEzLjYwOTZDMi42NDA1NyAxMy44NTk3IDIuOTc5NzEgMTQuMDAwMiAzLjMzMzMzIDE0LjAwMDJIMTMuMzMzM0MxMy41MTAxIDE0LjAwMDIgMTMuNjc5NyAxMy45Mjk5IDEzLjgwNDcgMTMuODA0OUMxMy45Mjk4IDEzLjY3OTkgMTQgMTMuNTEwMyAxNCAxMy4zMzM1VjEwLjY2NjgiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="; -export const passkeyIcon = +const passkeyIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU2MzlfMzIpIj4KPHBhdGggZD0iTTcuOTk5NTkgNi42NjY1QzcuNjQ1OTYgNi42NjY1IDcuMzA2ODMgNi44MDY5OCA3LjA1Njc4IDcuMDU3MDNDNi44MDY3MyA3LjMwNzA4IDYuNjY2MjUgNy42NDYyMiA2LjY2NjI1IDcuOTk5ODRDNi42NjYyNSA4LjY3OTg0IDYuNTk5NTkgOS42NzMxNyA2LjQ5MjkyIDEwLjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjI1NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOS4zMzI5MyA4Ljc0NjU4QzkuMzMyOTMgMTAuMzMzMiA5LjMzMjkzIDEyLjk5OTkgOC42NjYyNiAxNC42NjY2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjUyNzMgMTQuMDEzM0MxMS42MDczIDEzLjYxMzMgMTEuODE0IDEyLjQ4IDExLjg2MDcgMTIiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjI1NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMS4zMzM5OCA4LjAwMDE2QzEuMzMzOTggNi42MDA5NSAxLjc3NDIzIDUuMjM3MiAyLjU5MjM3IDQuMTAyMDlDMy40MTA1MSAyLjk2Njk5IDQuNTY1MDUgMi4xMTgwOCA1Ljg5MjQ3IDEuNjc1NjFDNy4yMTk4OCAxLjIzMzE0IDguNjUyODYgMS4yMTk1NCA5Ljk4ODQ0IDEuNjM2NzRDMTEuMzI0IDIuMDUzOTQgMTIuNDk0NSAyLjg4MDc5IDEzLjMzNCA0LjAwMDE2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEuMzMzOTggMTAuNjY2NUgxLjMzOTE0IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE0LjUzMjcgMTAuNjY2NUMxNC42NjYgOS4zMzMxNyAxNC42MiA3LjA5NzE3IDE0LjUzMjcgNi42NjY1IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTMuMzMzOTggMTIuOTk5OEMzLjY2NzMyIDExLjk5OTggNC4wMDA2NSA5Ljk5OTg0IDQuMDAwNjUgNy45OTk4NEMzLjk5OTk4IDcuNTQ1NzUgNC4wNzY2MyA3LjA5NDg2IDQuMjI3MzIgNi42NjY1IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUuNzY3MDkgMTQuNjY2OEM1LjkwNzA5IDE0LjIyNjggNi4wNjcwOSAxMy43ODY4IDYuMTQ3MDkgMTMuMzMzNSIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2Utd2lkdGg9IjEuMjU0OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02IDQuNTMzNDZDNi42MDgyNyA0LjE4MjI4IDcuMjk4MjggMy45OTc0NSA4LjAwMDY0IDMuOTk3NTZDOC43MDMwMSAzLjk5NzY3IDkuMzkyOTYgNC4xODI3MiAxMC4wMDExIDQuNTM0MUMxMC42MDkzIDQuODg1NDggMTEuMTE0MiA1LjM5MDc5IDExLjQ2NTEgNS45OTkyM0MxMS44MTYgNi42MDc2NiAxMi4wMDA1IDcuMjk3NzYgMTIgOC4wMDAxMlY5LjMzMzQ2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NjM5XzMyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo="; export const socialIcons = { diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx index 923ee56c349..131269d05eb 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx @@ -34,9 +34,6 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => { }, "&[disabled]": { cursor: "not-allowed", - svg: { - display: "none", - }, }, svg: { color: theme.colors.secondaryText, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx index 61d690c5641..743e2412a1c 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx @@ -16,7 +16,6 @@ import { radius, spacing, } from "../../../core/design-system/index.js"; -import { genericWalletIcon } from "../../../core/utils/walletIcon.js"; import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js"; import { sortWallets } from "../../utils/sortWallets.js"; import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js"; @@ -42,6 +41,7 @@ import { PoweredByThirdweb } from "./PoweredByTW.js"; import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js"; import { WalletTypeRowButton } from "./WalletTypeRowButton.js"; import { compactModalMaxHeight } from "./constants.js"; +import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js"; import type { ConnectLocale } from "./locale/types.js"; const InAppWalletSelectionUI = /* @__PURE__ */ lazy( @@ -226,7 +226,7 @@ const WalletSelectorInner: React.FC = (props) => { const connectAWallet = ( { setIsWalletGroupExpanded(true); }} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx index 93b95204ced..35bc1225394 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx @@ -1,19 +1,15 @@ import type { ThirdwebClient } from "../../../../client/client.js"; -import { - iconSize, - radius, - spacing, -} from "../../../core/design-system/index.js"; +import { iconSize, spacing } from "../../../core/design-system/index.js"; import { Text } from "../../ui/components/text.js"; -import { Img } from "../components/Img.js"; import { Container } from "../components/basic.js"; import { Button } from "../components/buttons.js"; +import type { IconFC } from "./icons/types.js"; type WalletTypeRowProps = { client: ThirdwebClient; onClick: () => void; title: string; - icon: string; + icon: IconFC; disabled?: boolean; }; @@ -33,16 +29,7 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) { disabled={props.disabled} > - + {props.title} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx new file mode 100644 index 00000000000..04031ebfebc --- /dev/null +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx @@ -0,0 +1,30 @@ +import type { IconFC } from "./types.js"; + +/** + * @internal + */ +export const EmailIcon: IconFC = (props) => { + return ( + + + + + ); +}; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/FingerPrintIcon.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/FingerPrintIcon.tsx index 8137624a454..cfb28de01fa 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/FingerPrintIcon.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/FingerPrintIcon.tsx @@ -11,63 +11,63 @@ export const FingerPrintIcon: IconFC = (props) => { > { + return ( + + + + + ); +}; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx index 927048d2f90..59210957c8a 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx @@ -15,14 +15,14 @@ export const OutlineWalletIcon: IconFC = (props) => { > { + return ( + + + + + + + + + + + ); +}; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/types.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/types.ts index b32aac26652..83e0d717cb2 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/types.ts +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/types.ts @@ -1 +1 @@ -export type IconFC = React.FC<{ size: string }>; +export type IconFC = React.FC<{ size: string; color?: string }>; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx index 7ab67e79c15..e8e7327dcad 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx @@ -14,6 +14,9 @@ import { Text } from "../../components/text.js"; import { Blobbie } from "../Blobbie.js"; import { MenuButton } from "../MenuButton.js"; import { AddUserIcon } from "../icons/AddUserIcon.js"; +import { EmailIcon } from "../icons/EmailIcon.js"; +import { FingerPrintIcon } from "../icons/FingerPrintIcon.js"; +import { PhoneIcon } from "../icons/PhoneIcon.js"; import type { ConnectLocale } from "../locale/types.js"; import type { WalletDetailsModalScreen } from "./types.js"; @@ -84,7 +87,7 @@ export function LinkedProfilesScreen(props: { fontSize: fontSize.sm, }} > - + {props.locale.manageWallet.linkProfile} @@ -147,6 +150,12 @@ function LinkedProfile({ > + ) : profile.type === "passkey" ? ( + + ) : profile.type === "email" ? ( + + ) : profile.type === "phone" ? ( + ) : ( (undefined); + const theme = useCustomTheme(); + const [image, setImage] = useState(undefined); const activeWallet = useActiveWallet(); useEffect(() => { async function fetchImage() { @@ -33,7 +43,7 @@ export function WalletImage(props: { // show the admin EOA icon for smart const storage = webLocalStorage; const activeEOAId = props.id; - let image: string | undefined; + let image: WalletImageState | undefined; if ( activeEOAId === "inApp" && @@ -43,17 +53,22 @@ export function WalletImage(props: { // when showing an active wallet icon - check last auth provider and override the IAW icon const lastAuthProvider = await getLastAuthProvider(storage); image = lastAuthProvider - ? getSocialIcon(lastAuthProvider) - : genericWalletIcon; + ? { + uri: getSocialIcon(lastAuthProvider), + authProvider: lastAuthProvider as AuthOption, + } + : { uri: "", authProvider: "wallet" }; } else { const mipdImage = getInstalledWalletProviders().find( (x) => x.info.rdns === activeEOAId, )?.info.icon; if (mipdImage) { - image = mipdImage; + image = { uri: mipdImage }; } else { - image = await getWalletInfo(activeEOAId, true); + image = { + uri: await getWalletInfo(activeEOAId, true), + }; } } @@ -62,10 +77,34 @@ export function WalletImage(props: { fetchImage(); }, [props.id, activeWallet]); - if (image) { + if (image?.authProvider === "email") { + return ; + } + + if (image?.authProvider === "phone") { + return ; + } + + if (image?.authProvider === "passkey") { + return ( + + ); + } + + if (image?.authProvider === "wallet") { + return ( + + ); + } + + if (image?.authProvider === "guest") { + return ; + } + + if (image?.uri) { return ( - ); + return ; } diff --git a/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx b/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx index 0328b5a9657..1916a949584 100644 --- a/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx +++ b/packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx @@ -131,7 +131,12 @@ export function WalletAuth(props: { size={props.size} meta={props.meta || {}} walletConnect={props.walletConnect} - modalHeader={{ title: props.inAppLocale.linkWallet, onBack: back }} + modalHeader={{ + title: props.isLinking + ? props.inAppLocale.linkWallet + : props.inAppLocale.signInWithWallet, + onBack: back, + }} walletIdsToHide={["inApp"]} disableSelectionDataReset={true} /> @@ -141,7 +146,14 @@ export function WalletAuth(props: { return ( - + { setManualInputMode("email"); }} @@ -451,7 +450,7 @@ export const ConnectWalletSocialOptions = ( ) : ( { setManualInputMode("phone"); }} @@ -463,7 +462,7 @@ export const ConnectWalletSocialOptions = ( {passKeyEnabled && ( { handlePassKeyLogin(); }} @@ -476,7 +475,7 @@ export const ConnectWalletSocialOptions = ( {siweEnabled && ( { handleWalletLogin(); }} @@ -488,7 +487,7 @@ export const ConnectWalletSocialOptions = ( {guestEnabled && ( { handleGuestLogin(); }} @@ -500,7 +499,7 @@ export const ConnectWalletSocialOptions = ( {props.isLinking && ( { handleWalletLogin(); }}