[RN] Fixes wallet icons border bug (#1880)

thirdweb-dev · Oct 31, 2023 · 7461e2a · 7461e2a
1 parent 178609a
commit 7461e2a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/.changeset/late-cups-begin.md b/.changeset/late-cups-begin.md
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+Fixes wallet icons borders bug
diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx
@@ -10,7 +10,7 @@ import { useMemo, useState } from "react";
 import { TextBalance } from "../base/TextBalance";
 import { SupportedTokens } from "../SendFunds/defaultTokens";
 import { SMART_WALLET_ICON } from "../../assets/svgs";
-import { ImageSvgUri } from "../base";
+import { WalletIcon } from "../base";
 import { useLocale } from "../../providers/ui-context-provider";
 
 export type ConnectWalletDetailsProps = {
@@ -92,13 +92,7 @@ export const WalletDetailsButton = ({
             alignContent="center"
             justifyContent="flex-start"
           >
-            <Box borderRadius="lg" overflow="hidden">
-              <ImageSvgUri
-                width={32}
-                height={32}
-                imageUrl={avatarUrl || walletIconUrl}
-              />
-            </Box>
+            <WalletIcon iconUri={avatarUrl || walletIconUrl} size={32} />
             <Box ml="md" justifyContent="center" alignItems="flex-start">
               {activeWallet?.walletId === LocalWallet.id ? (
                 <Text variant="bodySmall" color="red">

diff --git a/packages/react-native/src/evm/components/base/WalletIcon.tsx b/packages/react-native/src/evm/components/base/WalletIcon.tsx
@@ -1,3 +1,4 @@
+import Box from "./Box";
 import ImageSvgUri from "./ImageSvgUri";
 
 export const WalletIcon = ({
@@ -7,5 +8,9 @@ export const WalletIcon = ({
   iconUri: string;
   size: number;
 }) => {
-  return <ImageSvgUri imageUrl={iconUri} width={size} height={size} />;
+  return (
+    <Box borderRadius="sm" overflow="hidden">
+      <ImageSvgUri imageUrl={iconUri} width={size} height={size} />
+    </Box>
+  );
 };