dfinity · AntonioVentilii-DFINITY · Oct 14, 2024
@@ -1,19 +1,12 @@
 <script lang="ts">
 	import IconWalletConnect from '$lib/components/icons/IconWalletConnect.svelte';
+	import ButtonIcon from '$lib/components/ui/ButtonIcon.svelte';
 	import { ethAddressNotLoaded } from '$lib/derived/address.derived';
+
+	export let ariaLabel: string;
 </script>
 
-<button on:click class="tertiary text-primary h-10" disabled={$ethAddressNotLoaded}>
-	<IconWalletConnect size="24" />
+<ButtonIcon on:click {ariaLabel} disabled={$ethAddressNotLoaded}>
+	<IconWalletConnect size="24" slot="icon" />
 	<slot />
-</button>
-
-<style lang="scss">
-	button {
-		border-radius: var(--border-radius-sm-1_5x);
-
-		&:hover {
-			color: inherit;
-		}
-	}
-</style>
+</ButtonIcon>
@@ -339,9 +339,9 @@
 </script>
 
 {#if nonNullish(listener)}
-	<WalletConnectButton on:click={disconnect}
-		>{$i18n.wallet_connect.text.disconnect}</WalletConnectButton
-	>
+	<WalletConnectButton on:click={disconnect} ariaLabel={$i18n.wallet_connect.alt.disconnect}>
+		{$i18n.wallet_connect.text.disconnect}
+	</WalletConnectButton>
 {/if}
 
 {#if $modalWalletConnectAuth}

@@ -1,11 +1,23 @@
-<!-- source: https://walletconnect.com/brand -->
+<!-- source: ISC Lucide - please visit https://lucide.dev/license -->
 <script lang="ts">
 	export let size = '20';
 </script>
 
-<svg fill="none" height={size} viewBox="0 0 480 332" width={size} xmlns="http://www.w3.org/2000/svg"
-	><path
-		d="m126.613 93.9842c62.622-61.3123 164.152-61.3123 226.775 0l7.536 7.3788c3.131 3.066 3.131 8.036 0 11.102l-25.781 25.242c-1.566 1.533-4.104 1.533-5.67 0l-10.371-10.154c-43.687-42.7734-114.517-42.7734-158.204 0l-11.107 10.874c-1.565 1.533-4.103 1.533-5.669 0l-25.781-25.242c-3.132-3.066-3.132-8.036 0-11.102zm280.093 52.2038 22.946 22.465c3.131 3.066 3.131 8.036 0 11.102l-103.463 101.301c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896c-.783-.767-2.052-.767-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0l-103.4657-101.302c-3.1311-3.066-3.1311-8.036 0-11.102l22.9456-22.466c3.1311-3.065 8.2077-3.065 11.3388 0l73.4333 71.897c.782.767 2.051.767 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897c.783.767 2.052.767 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z"
-		fill="currentColor"
-	/></svg
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
 >
+	<g clip-path="url(#clip0_2192_6523)">
+		<path
+			d="M4.91302 7.51973C8.82802 3.68873 15.173 3.68873 19.087 7.51973L19.558 7.98073C19.6045 8.02577 19.6415 8.07969 19.6668 8.1393C19.692 8.19891 19.705 8.26299 19.705 8.32773C19.705 8.39247 19.692 8.45656 19.6668 8.51617C19.6415 8.57578 19.6045 8.6297 19.558 8.67473L17.947 10.2517C17.8999 10.2983 17.8363 10.3244 17.77 10.3244C17.7038 10.3244 17.6402 10.2983 17.593 10.2517L16.944 9.61773C14.214 6.94473 9.78702 6.94473 7.05702 9.61773L6.36302 10.2977C6.31545 10.3439 6.25179 10.3697 6.18552 10.3697C6.11926 10.3697 6.0556 10.3439 6.00802 10.2977L4.39702 8.71973C4.35054 8.67479 4.31358 8.62095 4.28833 8.56142C4.26309 8.50189 4.25008 8.43789 4.25008 8.37323C4.25008 8.30858 4.26309 8.24458 4.28833 8.18505C4.31358 8.12552 4.35054 8.07168 4.39702 8.02673L4.91302 7.51973ZM22.419 10.7827L23.853 12.1867C23.8995 12.2318 23.9365 12.2857 23.9618 12.3453C23.987 12.4049 24 12.469 24 12.5337C24 12.5985 23.987 12.6626 23.9618 12.7222C23.9365 12.7818 23.8995 12.8357 23.853 12.8807L17.387 19.2117C17.2922 19.3042 17.165 19.3559 17.0325 19.3559C16.9001 19.3559 16.7729 19.3042 16.678 19.2117L12.09 14.7187C12.0664 14.6952 12.0344 14.6819 12.001 14.6819C11.9677 14.6819 11.9356 14.6952 11.912 14.7187L7.32302 19.2117C7.22816 19.3042 7.10096 19.3559 6.96852 19.3559C6.83609 19.3559 6.70888 19.3042 6.61402 19.2117L0.147024 12.8807C0.100512 12.8357 0.0635293 12.7818 0.0382723 12.7222C0.0130153 12.6626 0 12.5985 0 12.5337C0 12.469 0.0130153 12.4049 0.0382723 12.3453C0.0635293 12.2857 0.100512 12.2318 0.147024 12.1867L1.58102 10.7827C1.67588 10.6903 1.80309 10.6386 1.93552 10.6386C2.06796 10.6386 2.19516 10.6903 2.29002 10.7827L6.87902 15.2757C6.92902 15.3237 7.00802 15.3237 7.05702 15.2757L11.646 10.7827C11.7409 10.6903 11.8681 10.6386 12.0005 10.6386C12.133 10.6386 12.2602 10.6903 12.355 10.7827L16.944 15.2757C16.994 15.3237 17.072 15.3237 17.122 15.2757L21.711 10.7827C21.8057 10.6904 21.9328 10.6387 22.065 10.6387C22.1973 10.6387 22.3243 10.6904 22.419 10.7827Z"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_2192_6523">
+			<rect width="24" height="24" />
+		</clipPath>
+	</defs>
+</svg>
@@ -529,6 +529,9 @@
 			"eth_transaction_executed": "WalletConnect eth_sendTransaction request executed.",
 			"sign_executed": "WalletConnect sign request executed."
 		},
+		"alt": {
+			"disconnect": "Disconnect from WalletConnect"
+		},
 		"error": {
 			"qr_code_read": "Cannot read QR code.",
 			"missing_uri": "A URI to connect to should be provided.",

@@ -468,6 +468,7 @@ interface I18nWallet_connect {
 		eth_transaction_executed: string;
 		sign_executed: string;
 	};
+	alt: { disconnect: string };
 	error: {
 		qr_code_read: string;
 		missing_uri: string;