refactor(frontend): Extract Button that represents Next action

dfinity · Oct 9, 2024 · 8a2b81f · 8a2b81f
1 parent 1e78380
commit 8a2b81f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 20 deletions.
diff --git a/src/frontend/src/eth/components/send/SendForm.svelte b/src/frontend/src/eth/components/send/SendForm.svelte
@@ -9,11 +9,10 @@
 	import type { EthereumNetwork } from '$eth/types/network';
 	import { SEND_CONTEXT_KEY, type SendContext } from '$icp-eth/stores/send.store';
 	import SendSource from '$lib/components/send/SendSource.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
+	import ButtonNext from '$lib/components/ui/ButtonNext.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
 	import { ethAddress } from '$lib/derived/address.derived';
-	import { i18n } from '$lib/stores/i18n.store';
 	import type { Network } from '$lib/types/network';
 	import type { Token } from '$lib/types/token';
 	import { isNullishOrEmpty } from '$lib/utils/input.utils';
@@ -62,9 +61,7 @@
 
 		<ButtonGroup slot="toolbar">
 			<slot name="cancel" />
-			<Button disabled={invalid}>
-				{$i18n.core.text.next}
-			</Button>
+			<ButtonNext disabled={invalid} />
 		</ButtonGroup>
 	</ContentWithToolbar>
 </form>
diff --git a/src/frontend/src/icp/components/send/IcSendForm.svelte b/src/frontend/src/icp/components/send/IcSendForm.svelte
@@ -7,11 +7,10 @@
 	import type { IcAmountAssertionError } from '$icp/types/ic-send';
 	import { SEND_CONTEXT_KEY, type SendContext } from '$icp-eth/stores/send.store';
 	import SendSource from '$lib/components/send/SendSource.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
+	import ButtonNext from '$lib/components/ui/ButtonNext.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
 	import { balance } from '$lib/derived/balances.derived';
-	import { i18n } from '$lib/stores/i18n.store';
 	import type { NetworkId } from '$lib/types/network';
 	import { isNullishOrEmpty } from '$lib/utils/input.utils';
 
@@ -47,9 +46,7 @@
 
 		<ButtonGroup slot="toolbar">
 			<slot name="cancel" />
-			<Button disabled={invalid}>
-				{$i18n.core.text.next}
-			</Button>
+			<ButtonNext disabled={invalid} />
 		</ButtonGroup>
 	</ContentWithToolbar>
 </form>
diff --git a/src/frontend/src/lib/components/manage/AddTokenByNetworkToolbar.svelte b/src/frontend/src/lib/components/manage/AddTokenByNetworkToolbar.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonBack from '$lib/components/ui/ButtonBack.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
-	import { i18n } from '$lib/stores/i18n.store';
+	import ButtonNext from '$lib/components/ui/ButtonNext.svelte';
 
 	export let invalid: boolean;
 
@@ -12,7 +11,5 @@
 
 <ButtonGroup>
 	<ButtonBack on:click={() => dispatch('icBack')} />
-	<Button disabled={invalid}>
-		{$i18n.core.text.next}
-	</Button>
+	<ButtonNext disabled={invalid} />
 </ButtonGroup>
diff --git a/src/frontend/src/lib/components/send/SendForm.svelte b/src/frontend/src/lib/components/send/SendForm.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import SendSource from '$lib/components/send/SendSource.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
+	import ButtonNext from '$lib/components/ui/ButtonNext.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
-	import { i18n } from '$lib/stores/i18n.store';
 	import type { OptionBalance } from '$lib/types/balance';
 	import type { OptionToken } from '$lib/types/token';
 
@@ -29,9 +28,7 @@
 		<ButtonGroup slot="toolbar">
 			<slot name="cancel" />
 
-			<Button {disabled}>
-				{$i18n.core.text.next}
-			</Button>
+			<ButtonNext {disabled} />
 		</ButtonGroup>
 	</ContentWithToolbar>
 </form>
diff --git a/src/frontend/src/lib/components/ui/ButtonNext.svelte b/src/frontend/src/lib/components/ui/ButtonNext.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Button from '$lib/components/ui/Button.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	export let disabled = false;
+</script>
+
+<Button {disabled}>
+	{$i18n.core.text.next}
+</Button>