refactor: button to link

greymass · Feb 20, 2025 · 792b0a0 · 792b0a0
1 parent 1e6942d
commit 792b0a0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 21 deletions.
diff --git a/src/lib/components/button/account.svelte b/src/lib/components/button/account.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
 	import { cn } from '$lib/utils';
 	import User from 'lucide-svelte/icons/user';
 
@@ -11,10 +10,6 @@
 
 	let { slop = true, ...props }: Props = $props();
 
-	function goToContract() {
-		goto(`/${props.data}`);
-	}
-
 	let buttonSize = $derived(slop ? 'size-12' : 'size-4');
 </script>
 
@@ -23,15 +18,15 @@
 	<div
 		class="relative inline-flex text-skyBlue-500 hover:text-skyBlue-400 focus-visible:text-skyBlue-400 has-[:focus-visible]:text-solar-500"
 	>
-		<button
-			onclick={goToContract}
+		<a
+			href={props.data}
 			class={cn(
 				'peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none',
 				buttonSize
 			)}
 		>
 			<!-- Button is done this way with absolute positioning so we can maintain a decent hit slop on mobile without affecting layout -->
-		</button>
+		</a>
 		<User class="pointer-events-none z-50 inline size-4 align-baseline peer-active:scale-95" />
 	</div>
 {/if}
diff --git a/src/lib/components/button/contract.svelte b/src/lib/components/button/contract.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
 	import { cn } from '$lib/utils';
 	import Code from 'lucide-svelte/icons/code';
 
@@ -11,10 +10,6 @@
 
 	let { slop = true, ...props }: Props = $props();
 
-	function goToContract() {
-		goto(`/${props.data}`);
-	}
-
 	let buttonSize = $derived(slop ? 'size-12' : 'size-4');
 </script>
 
@@ -23,15 +18,15 @@
 	<div
 		class="relative inline-flex text-skyBlue-500 hover:text-skyBlue-400 focus-visible:text-skyBlue-400 has-[:focus-visible]:text-solar-500"
 	>
-		<button
-			onclick={goToContract}
+		<a
+			href={props.data}
 			class={cn(
 				'peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none',
 				buttonSize
 			)}
 		>
 			<!-- Button is done this way with absolute positioning so we can maintain a decent hit slop on mobile without affecting layout -->
-		</button>
+		</a>
 		<Code class="pointer-events-none z-50 inline size-4 align-baseline peer-active:scale-95" />
 	</div>
 {/if}
diff --git a/src/lib/components/pageheader.svelte b/src/lib/components/pageheader.svelte
@@ -4,7 +4,6 @@
 	import AccountButton from '$lib/components/button/account.svelte';
 	import ContractButton from '$lib/components/button/contract.svelte';
 	import CopyButton from '$lib/components/button/copy.svelte';
-	import { languageTag } from '$lib/paraglide/runtime';
 	import { type NetworkState } from '$lib/state/network.svelte';
 	import { chainLogos } from '@wharfkit/common';
 	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
@@ -30,10 +29,8 @@
 	let logo = $derived(chainLogos.get(String(props.network.chain.id)) || '');
 
 	let routePath = $derived(page.url.pathname.split('/')[3]);
-	let contractPath = $derived(
-		`${languageTag()}/${props.network.shortname}/contract/${props.title}`
-	);
-	let accountPath = $derived(`${languageTag()}/${props.network.shortname}/account/${props.title}`);
+	let contractPath = $derived(`/${props.network.shortname}/contract/${props.title}`);
+	let accountPath = $derived(`/${props.network.shortname}/account/${props.title}`);
 </script>
 
 <header class="col-span-full flex min-h-16 items-center gap-4">