thirdweb-dev · iketw · Sep 27, 2023 · Aug 30, 2023 · Sep 5, 2023 · Sep 6, 2023
diff --git a/.changeset/bright-llamas-greet.md b/.changeset/bright-llamas-greet.md
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+Lots of small UI fixes
diff --git a/packages/chains/chains/1089.ts b/packages/chains/chains/1089.ts
@@ -30,9 +30,9 @@ export default {
   "chainId": 1089,
   "networkId": 1089,
   "icon": {
-    "url": "ipfs://QmU83haX3TNifDDjBx6RP6ByqES1Kg9VqeJC87X9ipKyCS",
-    "width": 386,
-    "height": 397,
+    "url": "ipfs://QmX6XuoQDTTjYqAmdNJiieLDZSwHHyUx44yQb4E3tmHmEA",
+    "width": 400,
+    "height": 400,
     "format": "png"
   },
   "explorers": [

diff --git a/packages/chains/chains/2241.ts b/packages/chains/chains/2241.ts
@@ -1,15 +1,15 @@
 import type { Chain } from "../src/types";
 export default {
-  "name": "The Krest Network",
+  "name": "Krest Network",
   "chain": "Krest",
   "icon": {
-    "url": "ipfs://bafkreid3bhzhughhjwq3rpgiic5zesj5mekqktawt646itdyqtvjxoupca",
-    "width": 257,
-    "height": 257,
-    "format": "svg"
+    "url": "ipfs://bafkreid732273ib5at7krjdl2t7lteljlepwd3tvifqge7mu7g6naxavhe",
+    "width": 256,
+    "height": 256,
+    "format": "png"
   },
   "rpc": [
-    "https://the-krest-network.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://krest-network.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://erpc-krest.peaq.network"
   ],
   "faucets": [],
@@ -35,5 +35,5 @@ export default {
     }
   ],
   "testnet": false,
-  "slug": "the-krest-network"
+  "slug": "krest-network"
 } as const satisfies Chain;
diff --git a/packages/chains/chains/9990.ts b/packages/chains/chains/9990.ts
@@ -3,10 +3,10 @@ export default {
   "name": "Agung Network",
   "chain": "Agung",
   "icon": {
-    "url": "ipfs://bafkreih6nzctk6brx5cqkylxbhvi3vsr6q5ks4th5knolkrlfp4tdia2mu",
-    "width": 400,
-    "height": 400,
-    "format": "svg"
+    "url": "ipfs://bafkreibkqdof3ztkdhgukwvkacwgrjb27e23hgz5c6mmudzu5hipyvgisa",
+    "width": 256,
+    "height": 256,
+    "format": "png"
   },
   "rpc": [
     "https://agung-network.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
@@ -27,6 +27,11 @@ export default {
       "name": "Polkadot.js",
       "url": "https://polkadot.js.org/apps/?rpc=wss://wsspc1-qa.agung.peaq.network#/explorer",
       "standard": "none"
+    },
+    {
+      "name": "Subscan",
+      "url": "https://agung.subscan.io",
+      "standard": "none"
     }
   ],
   "testnet": false,

diff --git a/packages/chains/src/index.ts b/packages/chains/src/index.ts
diff --git a/packages/react-native/src/evm/assets/svgs.ts b/packages/react-native/src/evm/assets/svgs.ts
@@ -1,3 +1,31 @@
+export const SMART_WALLET_ICON = `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
+<rect width="80" height="80" rx="12" fill="url(#paint0_linear_1_91)"/>
+<path d="M39.9969 18L40.2333 18.0156L40.3513 18.0333L40.4736 18.0622L40.6958 18.1378C40.8494 18.2006 40.9953 18.2842 41.1305 18.3867L41.3387 18.5689L41.8493 19.0533C45.8891 22.7768 50.9947 24.7762 56.2458 24.6911L56.9307 24.6689C57.3783 24.6462 57.82 24.7909 58.1849 25.0798C58.5498 25.3687 58.8167 25.785 58.9431 26.2622C59.9271 29.9769 60.2283 33.8731 59.8287 37.7194C59.4289 41.5658 58.3367 45.2836 56.6165 48.6523C54.8965 52.0207 52.5836 54.9714 49.8156 57.3285C47.0476 59.6856 43.8809 61.4012 40.5036 62.3734C40.174 62.4683 39.828 62.4683 39.4982 62.3734C36.1209 61.4014 32.9538 59.686 30.1856 57.3289C27.4176 54.9718 25.1045 52.0214 23.3842 48.6529C21.6638 45.2843 20.5713 41.5662 20.1715 37.7198C19.7717 33.8734 20.0727 29.9769 21.0567 26.2622C21.1831 25.785 21.4501 25.3687 21.815 25.0798C22.1799 24.7909 22.6215 24.6462 23.0693 24.6689C28.5513 24.947 33.9293 22.9444 38.1507 19.0533L38.6773 18.5533L38.8696 18.3867C39.0047 18.2842 39.1505 18.2006 39.304 18.1378L39.5282 18.0622C39.6069 18.0412 39.6865 18.0256 39.7667 18.0156L39.9969 18ZM40.0009 33.5556C38.9905 33.5551 38.0173 33.9787 37.2765 34.7411C36.5356 35.5036 36.0816 36.5485 36.0058 37.6667L35.9958 38L36.0058 38.3334C36.0551 39.0547 36.2625 39.7518 36.6098 40.364C36.9569 40.9762 37.4336 41.4851 37.9985 41.8467V45.7778L38.0125 46.0378C38.0727 46.6003 38.3242 47.1158 38.7156 47.4794C39.1071 47.8429 39.6087 48.0269 40.1182 47.9938C40.6278 47.9605 41.1067 47.7127 41.4571 47.3009C41.8076 46.8889 42.0029 46.3442 42.0036 45.7778L42.0056 41.8489C42.7691 41.3596 43.366 40.6042 43.7034 39.7002C44.0407 38.796 44.0996 37.7938 43.8711 36.8487C43.6427 35.9036 43.1396 35.0685 42.4398 34.4731C41.74 33.8776 40.8827 33.5551 40.0009 33.5556Z" fill="url(#paint1_linear_1_91)"/>
+<defs>
+<linearGradient id="paint0_linear_1_91" x1="40" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8356BD"/>
+<stop offset="1" stop-color="#7C20F4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_91" x1="40" y1="18" x2="40" y2="62.4445" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#E1D8FB"/>
+</linearGradient>
+</defs>
+</svg>
+`;
+
+export const WALLETCONNECT_ICON = `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
+<rect width="80" height="80" rx="12" fill="#1C7DFC"/>
+<rect width="80" height="80" rx="12" fill="url(#paint0_radial_1_46)"/>
+<path d="M26.4227 31.4731C33.9171 24.1756 46.0829 24.1756 53.5773 31.4731L54.4796 32.358C54.858 32.7207 54.858 33.3155 54.4796 33.6782L51.3945 36.6813C51.2053 36.8699 50.8997 36.8699 50.7105 36.6813L49.4736 35.4772C44.2347 30.385 35.7653 30.385 30.5264 35.4772L29.2021 36.7684C29.013 36.957 28.7074 36.957 28.5182 36.7684L25.4331 33.7653C25.0547 33.4026 25.0547 32.8078 25.4331 32.4451L26.4227 31.4731ZM59.9658 37.6824L62.7162 40.3518C63.0946 40.7145 63.0946 41.3093 62.7162 41.672L50.3322 53.728C49.9538 54.0907 49.3426 54.0907 48.9788 53.728L40.1892 45.1684C40.1019 45.0813 39.9418 45.0813 39.8545 45.1684L31.0649 53.728C30.6865 54.0907 30.0753 54.0907 29.7115 53.728L17.2838 41.672C16.9054 41.3093 16.9054 40.7145 17.2838 40.3518L20.0342 37.6824C20.4125 37.3197 21.0237 37.3197 21.3875 37.6824L30.1772 46.242C30.2645 46.329 30.4245 46.329 30.5119 46.242L39.3015 37.6824C39.6799 37.3197 40.291 37.3197 40.6549 37.6824L49.4445 46.242C49.5318 46.329 49.6919 46.329 49.7792 46.242L58.5688 37.6824C58.9763 37.3197 59.5875 37.3197 59.9658 37.6824Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_1_46" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0.000247955 40.0012) scale(80)">
+<stop stop-color="#5D9DF6"/>
+<stop offset="1" stop-color="#006FFF"/>
+</radialGradient>
+</defs>
+</svg>`;
+
 export const LOCAL_WALLET_ICON = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="16" cy="16" r="16" fill="url(#paint0_linear_2103_3904)"/>
 <rect x="14" y="22" width="4" height="3" fill="#E6DEFC"/>

diff --git a/packages/react-native/src/evm/components/ConnectWallet.tsx b/packages/react-native/src/evm/components/ConnectWallet.tsx
@@ -72,8 +72,10 @@ export const ConnectWallet = ({
   theme,
   buttonTitle,
   modalTitle,
+  modalTitleIconUrl,
   extraRows,
   hideTestnetFaucet,
+  displayBalanceToken,
   switchToActiveChain,
   termsOfServiceUrl,
   privacyPolicyUrl,
@@ -151,12 +153,14 @@ export const ConnectWallet = ({
               extraRows={extraRows}
               hideTestnetFaucet={hideTestnetFaucet}
               supportedTokens={supportedTokensMemo}
+              displayBalanceToken={displayBalanceToken}
             />
           )
         ) : (
           <ConnectWalletButton
             modalTitle={modalTitle}
             buttonTitle={buttonTitle}
+            modalTitleIconUrl={modalTitleIconUrl}
             theme={theme}
             termsOfServiceUrl={termsOfServiceUrl}
             privacyPolicyUrl={privacyPolicyUrl}

diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx
@@ -27,6 +27,7 @@ import TransactionIcon from "../../assets/transaction";
 import { ReceiveButton } from "../ReceiveButton";
 import { SendButton } from "../SendFunds/SendButton";
 import { SupportedTokens } from "../SendFunds/defaultTokens";
+import { ActiveDot } from "../base";
 
 const MODAL_HEIGHT = Dimensions.get("window").height * 0.7;
 const DEVICE_WIDTH = Dimensions.get("window").width;
@@ -199,6 +200,27 @@ export const ConnectWalletDetailsModal = ({
               onDisconnectPress={onDisconnectPress}
               onAddressCopied={onAddressCopied}
             />
+            {activeWallet?.walletId === SmartWallet.id || smartWallet ? (
+              <BaseButton
+                onPress={() => {
+                  Linking.openURL(
+                    `https://thirdweb.com/${chain?.slug}/${address}/account`,
+                  );
+                }}
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                mt="md"
+              >
+                <Box flexDirection="row">
+                  <ActiveDot width={12} height={12} />
+                  <Text variant="bodySmallSecondary" ml="xxs">
+                    Connected to a Smart Wallet
+                  </Text>
+                </Box>
+                <RightArrowIcon width={10} height={10} />
+              </BaseButton>
+            ) : null}
             <Box flexDirection="row" justifyContent="space-evenly" mt="md">
               <SendButton supportedTokens={supportedTokens} />
               <ReceiveButton />

diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ExportLocalWalletModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ExportLocalWalletModal.tsx
@@ -16,7 +16,6 @@ import * as FileSystem from "expo-file-system";
 import { SmartWallet } from "@thirdweb-dev/wallets";
 import { usePersonalWalletAddress } from "../../wallets/hooks/usePersonalWalletAddress";
 import { shortenWalletAddress } from "../../utils/addresses";
-import { WalletIcon } from "../base/WalletIcon";
 import { LocalWallet } from "../../wallets/wallets/LocalWallet";
 import { TWModal } from "../base/modal/TWModal";
 
@@ -150,13 +149,10 @@ export const ExportLocalWalletModal = ({
           borderRadius="md"
           p="lg"
         >
-          <Box flexDirection="row" justifyContent="space-between" mb="sm">
-            <WalletIcon size={32} iconUri={LocalWallet.meta.iconURL} />
-            <ModalHeaderTextClose flex={1} onClose={onCloseInternal} />
-          </Box>
-          <Text variant="header" textAlign="left">
-            Backup your Wallet
-          </Text>
+          <ModalHeaderTextClose
+            onClose={onCloseInternal}
+            headerText="Backup your Wallet"
+          />
           <Text variant="subHeader" mt="md" textAlign="left">
             {
               "This will download a JSON file containing your wallet information onto your device encrypted with the password."

diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsButton.tsx
@@ -4,12 +4,13 @@ import Text from "../base/Text";
 import { WalletIcon } from "../base/WalletIcon";
 import { useWallet } from "@thirdweb-dev/react-core";
 import { StyleSheet } from "react-native";
-import { LocalWallet } from "@thirdweb-dev/wallets";
+import { LocalWallet, walletIds } from "@thirdweb-dev/wallets";
 import Box from "../base/Box";
 import { ConnectWalletDetailsModal } from "./ConnectWalletDetailsModal";
 import { useState } from "react";
 import { TextBalance } from "../base/TextBalance";
 import { SupportedTokens } from "../SendFunds/defaultTokens";
+import { SMART_WALLET_ICON } from "../../assets/svgs";
 
 export type ConnectWalletDetailsProps = {
   address?: string;
@@ -51,6 +52,11 @@ export const WalletDetailsButton = ({
     setIsModalVisible(!isModalVisible);
   };
 
+  const walletIconUrl =
+    activeWallet?.walletId === walletIds.smartWallet
+      ? SMART_WALLET_ICON
+      : activeWallet?.getMeta().iconURL || "";
+
   return (
     <>
       <ConnectWalletDetailsModal
@@ -72,10 +78,7 @@ export const WalletDetailsButton = ({
           onPress={onPress}
         >
           <Box flex={1} flexDirection="row" justifyContent="flex-start">
-            <WalletIcon
-              size={32}
-              iconUri={activeWallet?.getMeta().iconURL || ""}
-            />
+            <WalletIcon size={32} iconUri={walletIconUrl} />
             <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/ConnectWalletDetails/WalletDetailsModalHeader.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsModalHeader.tsx
@@ -10,6 +10,8 @@ import Box from "../base/Box";
 import CopyIcon from "../../assets/copy";
 import { useState } from "react";
 import { TextBalance } from "../base/TextBalance";
+import { walletIds } from "@thirdweb-dev/wallets";
+import { SMART_WALLET_ICON } from "../../assets/svgs";
 
 interface WalletDetailsModalHeaderProps {
   address?: string;
@@ -44,10 +46,15 @@ export const WalletDetailsModalHeader = ({
     }, 0);
   };
 
+  const walletIconUrl =
+    activeWallet?.walletId === walletIds.smartWallet
+      ? SMART_WALLET_ICON
+      : activeWallet?.getMeta().iconURL || "";
+
   return (
     <>
       <View style={styles.header}>
-        <WalletIcon size={40} iconUri={activeWallet?.getMeta().iconURL || ""} />
+        <WalletIcon size={40} iconUri={walletIconUrl} />
         <BaseButton
           flex={1}
           justifyContent="flex-start"

diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx
@@ -18,6 +18,7 @@ export type ChooseWalletProps = {
   onClose: () => void;
   wallets: WalletConfig<any>[];
   excludeWalletIds?: string[];
+  modalTitleIconUrl?: string;
   termsOfServiceUrl?: string;
   privacyPolicyUrl?: string;
 };
@@ -27,6 +28,7 @@ export function ChooseWallet({
   subHeaderText,
   wallets,
   onChooseWallet,
+  modalTitleIconUrl,
   onClose,
   excludeWalletIds = [],
   termsOfServiceUrl,
@@ -98,11 +100,21 @@ export function ChooseWallet({
               alignContent="center"
               justifyContent="center"
             >
-              <ThirdwebLogo
-                width={26}
-                height={15}
-                color={theme.colors.backgroundInverted}
-              />
+              {modalTitleIconUrl !== undefined ? (
+                modalTitleIconUrl.length === 0 ? null : (
+                  <ImageSvgUri
+                    width={26}
+                    height={15}
+                    imageUrl={modalTitleIconUrl}
+                  />
+                )
+              ) : (
+                <ThirdwebLogo
+                  width={26}
+                  height={15}
+                  color={theme.colors.backgroundInverted}
+                />
+              )}
               <Text
                 variant="header"
                 ml="xxs"
@@ -181,7 +193,7 @@ export function ChooseWallet({
           marginHorizontal="xl"
           justifyContent="center"
           borderRadius="lg"
-          paddingVertical="xmd"
+          paddingVertical="md"
           borderColor="border"
           flexDirection="row"
           alignItems="center"
@@ -208,15 +220,18 @@ export function ChooseWallet({
         <BaseButton
           marginHorizontal="xl"
           mt="sm"
-          paddingVertical="xmd"
+          paddingVertical="md"
           justifyContent="center"
           borderRadius="lg"
           borderColor="border"
           borderWidth={1}
           onPress={onContinueAsGuestPress}
         >
           {isConnecting ? (
-            <ActivityIndicator size={"small"} />
+            <ActivityIndicator
+              size={"small"}
+              color={theme.colors.textPrimary}
+            />
           ) : (
             <Text variant="bodySmall" fontWeight="700">
               Continue as guest

diff --git a/...es/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWalletContent.tsx b/...es/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWalletContent.tsx
@@ -74,6 +74,7 @@ export const ChooseWalletContent = ({
                   recommended={item.recommended}
                   onPress={() => onChooseWallet(item)}
                   mb={marginBottom}
+                  paddingVertical="xxs"
                 />
               )}
             </Box>

diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx
@@ -18,6 +18,12 @@ export type ConnectWalletButtonProps = {
    * @default "Choose your wallet"
    */
   modalTitle?: string;
+  /**
+   * Replace the thirdweb icon next to modalTitle and set your own iconUrl
+   *
+   * Set to empty string to hide the icon
+   */
+  modalTitleIconUrl?: string;
   /**
    * Set a custom terms of service url
    */
@@ -31,6 +37,7 @@ export type ConnectWalletButtonProps = {
 
 export const ConnectWalletButton = ({
   modalTitle,
+  modalTitleIconUrl,
   termsOfServiceUrl,
   privacyPolicyUrl,
   buttonTitle,
@@ -72,6 +79,7 @@ export const ConnectWalletButton = ({
       view: "ConnectWalletFlow",
       data: {
         modalTitle,
+        modalTitleIconUrl,
         termsOfServiceUrl,
         privacyPolicyUrl,
         walletConfig:

diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletFlow.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletFlow.tsx
@@ -16,9 +16,13 @@ import { useAppTheme } from "../../styles/hooks";
 
 export const ConnectWalletFlow = () => {
   const { modalState, setModalState } = useModalState();
-  const { modalTitle, privacyPolicyUrl, termsOfServiceUrl, walletConfig } = (
-    modalState as ConnectWalletFlowModal
-  ).data;
+  const {
+    modalTitle,
+    modalTitleIconUrl,
+    privacyPolicyUrl,
+    termsOfServiceUrl,
+    walletConfig,
+  } = (modalState as ConnectWalletFlowModal).data;
 
   const [modalVisible, setModalVisible] = useState(false);
   const [activeWallet, setActiveWallet] = useState<WalletConfig | undefined>();
@@ -142,6 +146,7 @@ export const ConnectWalletFlow = () => {
         ) : (
           <ChooseWallet
             headerText={modalTitle}
+            modalTitleIconUrl={modalTitleIconUrl}
             privacyPolicyUrl={privacyPolicyUrl}
             termsOfServiceUrl={termsOfServiceUrl}
             wallets={supportedWallets}