Merge pull request #1064 from rainlanguage/1063-migrate-icons-to-ui-c…

…oponents

1063 migrate icons to UI coponents

packages/ui-components/src/lib/components/IconExternalLink.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let svgClass: string = '';
+</script>
+
+<svg
+	class="h-5 w-5 text-gray-800 dark:text-white {svgClass}"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 18 18"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+	/>
+</svg>

packages/ui-components/src/lib/components/IconInfo.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import InfoCircleSolid from 'flowbite-svelte-icons/InfoCircleSolid.svelte';
+</script>
+
+<div
+	class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-500 dark:bg-blue-800 dark:text-blue-200"
+>
+	<InfoCircleSolid class="h-5 w-5" />
+</div>

tauri-app/src/lib/components/IconLedger.svelte → packages/ui-components/src/lib/components/IconLedger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import icon from '$lib/assets/ledger.svg?raw';
+	import icon from '$lib/assets/ledger.svg?raw';
 </script>
 
 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
 <div class="icon-ledger">{@html icon}</div>
 
 <style lang="css">
-  :global(.icon-ledger svg) {
-    height: 1.5rem;
-    width: auto;
-    fill: white;
-  }
+	:global(.icon-ledger svg) {
+		height: 1.5rem;
+		width: auto;
+		fill: white;
+	}
 </style>

packages/ui-components/src/lib/components/IconSuccess.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import CheckCircleSolid from 'flowbite-svelte-icons/CheckCircleSolid.svelte';
+</script>
+
+<div
+	class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200"
+>
+	<CheckCircleSolid class="h-5 w-5" />
+</div>

packages/ui-components/src/lib/components/IconTelegram.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let dark = false;
+</script>
+
+<svg
+	width="24px"
+	height="24px"
+	viewBox="0 0 24 24"
+	class={`h-5 w-5 fill-current ${dark ? 'text-white dark:text-black' : 'text-black dark:text-white'}`}
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
+	><path
+		id="telegram-1"
+		d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
+	/></svg
+>

tauri-app/src/lib/components/IconWalletConnect.svelte → packages/ui-components/src/lib/components/IconWalletConnect.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import icon from '$lib/assets/walletconnect.svg?raw';
+	import icon from '$lib/assets/walletconnect.svg?raw';
 </script>
 
 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
 <div class="icon-walletconnect">{@html icon}</div>
 
 <style lang="css">
-  :global(.icon-walletconnect svg) {
-    height: 1.5rem;
-    width: auto;
-    fill: white;
-  }
+	:global(.icon-walletconnect svg) {
+		height: 1.5rem;
+		width: auto;
+		fill: white;
+	}
 </style>

packages/ui-components/src/lib/components/IconWarning.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import ExclamationCircleSolid from 'flowbite-svelte-icons/ExclamationCircleSolid.svelte';
+</script>
+
+<div
+	class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-yellow-100 text-yellow-500 dark:bg-yellow-800 dark:text-yellow-200"
+>
+	<ExclamationCircleSolid class="h-5 w-5" />
+</div>

packages/ui-components/src/lib/index.ts

@@ -35,6 +35,13 @@ export { default as Text } from './components/Text.svelte';
 export { default as DropdownProperty } from './components/DropdownProperty.svelte';
 export { default as IconError } from './components/IconError.svelte';
 export { default as ButtonLoading } from './components/ButtonLoading.svelte';
+export { default as IconExternalLink } from './components/IconExternalLink.svelte';
+export { default as IconInfo } from './components/IconInfo.svelte';
+export { default as IconLedger } from './components/IconLedger.svelte';
+export { default as IconSuccess } from './components/IconSuccess.svelte';
+export { default as IconTelegram } from './components/IconTelegram.svelte';
+export { default as IconWalletConnect } from './components/IconWalletConnect.svelte';
+export { default as IconWarning } from './components/IconWarning.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';

packages/webapp/src/routes/test/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" generics="T">
+	import { ButtonLoading, IconError } from '@rainlanguage/ui-components';
+	import {
+		IconInfo,
+		IconLedger,
+		IconSuccess,
+		IconTelegram,
+		IconWalletConnect,
+		IconWarning,
+		IconExternalLink
+	} from '@rainlanguage/ui-components';
+	let isLoading: boolean = true;
+</script>
+
+<div>
+	<ButtonLoading color="primary" class="w-full px-2 py-1" size="lg" pill loading={isLoading}
+		>Loading button</ButtonLoading
+	>
+	<IconError />
+	<IconExternalLink svgClass="!h-2 !w-2 mr-1" />
+	<IconInfo />
+	<IconLedger />
+	<IconSuccess />
+	<IconTelegram dark />
+	<IconWalletConnect />
+	<IconWarning />
+</div>

tauri-app/src/lib/components/AppToast.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
   import { Toast } from 'flowbite-svelte';
-  import IconSuccess from '$lib/components/IconSuccess.svelte';
-  import { IconError } from '@rainlanguage/ui-components';
-  import IconWarning from '$lib/components/IconWarning.svelte';
-  import IconInfo from '$lib/components/IconInfo.svelte';
+  import { IconError, IconSuccess, IconWarning, IconInfo } from '@rainlanguage/ui-components';
   import CloseSolid from 'flowbite-svelte-icons/CloseSolid.svelte';
   import type { ToastData } from '$lib/stores/toasts';
   import { ToastMessageType } from '$lib/typeshare/toast';

tauri-app/src/lib/components/BadgeExternalLink.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Badge } from 'flowbite-svelte';
-  import IconExternalLink from '$lib/components/IconExternalLink.svelte';
+  import { IconExternalLink } from '@rainlanguage/ui-components';
   export let text: string;
   export let href: string;
   export let color:

tauri-app/src/lib/components/InputLedgerWallet.svelte

@@ -5,9 +5,8 @@
   import { toasts } from '$lib/stores/toasts';
   import { getAddressFromLedger } from '$lib/services/wallet';
   import { reportErrorToSentry } from '$lib/services/sentry';
-  import IconWarning from '$lib/components/IconWarning.svelte';
+  import { IconWarning, ButtonLoading } from '@rainlanguage/ui-components';
   import { ledgerWalletAddress, ledgerWalletDerivationIndex } from '$lib/stores/wallets';
-  import { ButtonLoading } from '@rainlanguage/ui-components';
   import { Hash, HashType } from '@rainlanguage/ui-components';
 
   const maskOptions = {

tauri-app/src/lib/components/InputWalletConnect.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import IconWarning from '$lib/components/IconWarning.svelte';
   import { Alert } from 'flowbite-svelte';
-  import { ButtonLoading } from '@rainlanguage/ui-components';
+  import { ButtonLoading, IconWarning } from '@rainlanguage/ui-components';
   import { Hash, HashType } from '@rainlanguage/ui-components';
   import {
     walletconnectConnect,

tauri-app/src/lib/components/ModalConnect.svelte

@@ -3,8 +3,7 @@
   import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
   import { ledgerWalletAddress } from '$lib/stores/wallets';
   import InputWalletConnect from '$lib/components/InputWalletConnect.svelte';
-  import IconLedger from '$lib/components/IconLedger.svelte';
-  import IconWalletConnect from '$lib/components/IconWalletConnect.svelte';
+  import { IconLedger, IconWalletConnect } from '@rainlanguage/ui-components';
   import { walletconnectAccount } from '$lib/stores/walletconnect';
 
   let open = false;

tauri-app/src/lib/components/ModalExecute.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
   import { Button, Modal } from 'flowbite-svelte';
-  import { ButtonLoading } from '@rainlanguage/ui-components';
   import { settings } from '$lib/stores/settings';
   import { ledgerWalletAddress } from '$lib/stores/wallets';
   import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
   import InputWalletConnect from '$lib/components/InputWalletConnect.svelte';
   import { walletConnectNetwork, walletconnectAccount } from '$lib/stores/walletconnect';
-  import IconLedger from './IconLedger.svelte';
-  import IconWalletConnect from './IconWalletConnect.svelte';
+  import { IconLedger, IconWalletConnect, ButtonLoading } from '@rainlanguage/ui-components';
   import { activeNetworkRef, chainId as globalChainId } from '$lib/stores/settings';
   import type { Network } from '$lib/typeshare/config';
 

tauri-app/src/lib/components/Sidebar.svelte

@@ -10,11 +10,10 @@
   import ReceiptSolid from 'flowbite-svelte-icons/ReceiptSolid.svelte';
   import GearSolid from 'flowbite-svelte-icons/GearSolid.svelte';
   import FileLinesSolid from 'flowbite-svelte-icons/FileLinesSolid.svelte';
-  import IconExternalLink from '$lib/components/IconExternalLink.svelte';
+  import { IconExternalLink, IconTelegram } from '@rainlanguage/ui-components';
   import { page } from '$app/stores';
   import ButtonDarkMode from '../../../../packages/ui-components/src/lib/components/ButtonDarkMode.svelte';
   import { PlusSolid } from 'flowbite-svelte-icons';
-  import IconTelegram from '$lib/components/IconTelegram.svelte';
   import ModalConnect from '$lib/components/ModalConnect.svelte';
   import { onMount } from 'svelte';
   import { getAppCommitSha } from '$lib/services/app';

tauri-app/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import IconTelegram from '$lib/components/IconTelegram.svelte';
+  import { IconTelegram } from '@rainlanguage/ui-components';
   import { Button } from 'flowbite-svelte';
 </script>