chore: replace Icon and Spinner with UI Kit variants

packages/desktop/components/WindowsControlButtons.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-    import { Icon as IconEnum } from '@auxiliary/icon'
     import { Platform } from '@core/app'
     import { OS } from '@core/app/constants'
-    import { Icon } from '@ui'
+    import { Icon, IconName } from '@bloomwalletio/ui'
     import { onDestroy, onMount } from 'svelte'
 
     let isMaximized = false
@@ -26,20 +25,20 @@
 
 <window-control-buttons class="flex flex-row justify-end space-x-4 mr-4">
     <button on:click={Platform.minimize} class="text-gray-500 dark:text-gray-100" type="button">
-        <Icon icon={IconEnum.Minimize} />
+        <Icon name={IconName.WindowsMinimize} />
     </button>
     <button
         on:click={async () => (isMaximized = await Platform.maximize())}
         class="text-gray-500 dark:text-gray-100"
         type="button"
     >
         {#if isMaximized}
-            <Icon icon={IconEnum.RestoreSize} />
+            <Icon name={IconName.WindowsRestoreSize} />
         {:else}
-            <Icon icon={IconEnum.Maximize} />
+            <Icon name={IconName.WindowsMaximize} />
         {/if}
     </button>
     <button on:click={Platform.close} class="text-gray-500 dark:text-gray-100" type="button">
-        <Icon icon={IconEnum.CloseThin} />
+        <Icon name={IconName.WindowsClose} />
     </button>
 </window-control-buttons>

packages/desktop/components/WindowsPopupMenu.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-    import { Icon as IconEnum } from '@auxiliary/icon'
     import { Platform } from '@core/app'
-    import { Icon } from '@ui'
+    import { Icon, IconName } from '@bloomwalletio/ui'
 </script>
 
 <button
     on:click={Platform.popupMenu}
     class="flex justify-center items-center p-3 text-gray-500 dark:text-gray-100"
     type="button"
 >
-    <Icon icon={IconEnum.Hamburger} />
+    <Icon name={IconName.WindowsHamburger} />
 </button>

packages/desktop/lib/electron/apis/electron.api.ts

@@ -137,7 +137,7 @@ const electronApi: IPlatform = {
     minimize(): Promise<void> {
         return ipcRenderer.invoke('minimize')
     },
-    maximize(): Promise<void> {
+    maximize(): Promise<boolean> {
         return ipcRenderer.invoke('maximize')
     },
     isMaximized(): Promise<boolean> {

packages/desktop/views/dashboard/campaigns/components/Leaderboard.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
     import { Pane } from '@ui'
-    import { Avatar, IconName, Pill, Text } from '@bloomwalletio/ui'
+    import { Avatar, IconName, Pill, Spinner, Text } from '@bloomwalletio/ui'
     import { truncateString } from '@core/utils'
     import { darkMode } from '@core/app/stores'
     import { ITideLeaderboardItem } from '@core/tide/interfaces'
     import { getSubjectFromAddress } from '@core/wallet'
     import { NetworkId } from '@core/network'
     import { EmptyListPlaceholder } from '@components'
-    import { Spinner } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
 
     export let leaderboardItems: ITideLeaderboardItem[]

packages/desktop/views/dashboard/drawers/dapp-config/views/ConfirmConnectionDrawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Button, SidebarToast, Steps } from '@bloomwalletio/ui'
-    import { DappInfo, Spinner } from '@ui'
+    import { Button, SidebarToast, Spinner, Steps } from '@bloomwalletio/ui'
+    import { DappInfo } from '@ui'
     import { localize } from '@core/i18n'
     import { Router } from '@core/router'
     import { DrawerTemplate } from '@components'
@@ -120,7 +120,7 @@
 
 <DrawerTemplate title={localize(`${localeKey}.title`)} {drawerRouter}>
     <div class="w-full h-full flex flex-col space-y-6 overflow-hidden">
-        {#if $sessionProposal}
+        {#if false}
             {@const requiredNamespaces = $sessionProposal.params.requiredNamespaces}
             {@const optionalNamespaces = $sessionProposal.params.optionalNamespaces}
 
@@ -179,7 +179,7 @@
             </div>
         {:else}
             <div class="w-full h-full flex items-center justify-center">
-                <Spinner busy size={50} />
+                <Spinner size={'lg'} />
             </div>
         {/if}
     </div>

packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectionRequestDrawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Button, Table, TableRow, Text } from '@bloomwalletio/ui'
-    import { DappInfo, Spinner } from '@ui'
+    import { Button, Spinner, Table, TableRow, Text } from '@bloomwalletio/ui'
+    import { DappInfo } from '@ui'
     import { localize } from '@core/i18n'
     import { Router } from '@core/router'
     import { DrawerTemplate } from '@components'
@@ -109,7 +109,7 @@
 
 <DrawerTemplate title={localize(`${localeKey}.title`)} {drawerRouter} onBack={rejectSession}>
     <div class="w-full h-full flex flex-col justify-between">
-        {#if $sessionProposal}
+        {#if false}
             {@const metadata = $sessionProposal.params.proposer.metadata}
             <DappInfo {metadata} {verifiedState} />
 
@@ -150,7 +150,7 @@
             {/if}
         {:else}
             <div class="w-full h-full flex items-center justify-center">
-                <Spinner busy size={50} />
+                <Spinner size={'lg'} />
             </div>
         {/if}
     </div>

packages/desktop/views/dashboard/drawers/network-config/views/ConnectedNetworksDrawer.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { Icon as IconEnum } from '@auxiliary/icon'
     import { DrawerTemplate, NetworkCard } from '@components'
     import { localize } from '@core/i18n'
     import { clearSelectedChain, networks, networkStatus } from '@core/network'
     import { Router } from '@core/router'
     import features from '@features/features'
-    import { Icon } from '@ui'
+    import { Button, IconName } from '@bloomwalletio/ui'
     import { onMount } from 'svelte'
     import { NetworkConfigRoute, networkConfigRouter } from '../'
 
@@ -29,15 +28,15 @@
                 {/each}
             {/key}
         </div>
+    </connected-chains-drawer>
+    <div slot="footer" class="flex justify-center">
         {#if features.network.config.addChain.enabled}
-            <button
-                type="button"
-                class="flex flex-row items-center justify-center w-full space-x-2 bg-transparent text-blue-500 px-8 py-3 text-15 rounded-lg"
-                on:click|stopPropagation={onAddChainClick}
-            >
-                <Icon icon={IconEnum.Plus} height={12} />
-                {localize('actions.addChain')}
-            </button>
+            <Button
+                variant="text"
+                text={localize('actions.addChain')}
+                icon={IconName.Plus}
+                on:click={onAddChainClick}
+            />
         {/if}
-    </connected-chains-drawer>
+    </div>
 </DrawerTemplate>

packages/shared/package.json

@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <[email protected]>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.19",
+        "@bloomwalletio/ui": "0.20.20",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",

packages/shared/src/components/atoms/index.ts

@@ -1,6 +1,5 @@
 export { default as BalanceSummaryRow } from './BalanceSummaryRow.svelte'
 export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
-export { default as Icon } from './Icon.svelte'
 export { default as LedgerIllustration } from './LedgerIllustration.svelte'
 export { default as MediaDisplay } from './MediaDisplay.svelte'
 export { default as Pane } from './Pane.svelte'

packages/shared/src/components/index.ts

@@ -8,7 +8,6 @@ export { default as LoadingScreen } from './LoadingScreen.svelte'
 export { default as Logo } from './Logo.svelte'
 export { default as QR } from './QR.svelte'
 export { default as RecoveryPhrase } from './RecoveryPhrase.svelte'
-export { default as Spinner } from './Spinner.svelte'
 export { default as StrengthMeter } from './StrengthMeter.svelte'
 export { default as Text } from './Text.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'