Improvements

apps/satshoot/src/lib/components/Mints/Item.svelte

@@ -2,7 +2,8 @@
     import type { MintUrl, MintUsage } from '@nostr-dev-kit/ndk-wallet';
     import { CashuMint, type GetInfoResponse } from '@cashu/cashu-ts';
     import Avatar from '../Users/Avatar.svelte';
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
+    import Button from '../UI/Buttons/Button.svelte';
 
     const dispatcher = createEventDispatcher();
 
@@ -13,21 +14,21 @@
     let mintInfo: GetInfoResponse | null = null;
     let gettingMintInfo = true;
 
-    $: {
-        const mint = new CashuMint(mintUrl);
-        mint.getInfo()
-            .then((info) => {
-                if (info.nuts[4].methods.some((method) => method.unit === 'sat')) {
-                    mintInfo = info;
-                }
-            })
-            .catch((err) => {
-                console.error('An error occurred in getting mint info', mintUrl, err);
-            })
-            .finally(() => {
-                gettingMintInfo = false;
-            });
-    }
+    // Fetch mint info on mount
+    onMount(async () => {
+        try {
+            const mint = new CashuMint(mintUrl);
+            const info = await mint.getInfo();
+
+            if (info.nuts[4]?.methods.some((method) => method.unit === 'sat')) {
+                mintInfo = info;
+            }
+        } catch (err) {
+            console.error('Error fetching mint info:', mintUrl, err);
+        } finally {
+            gettingMintInfo = false;
+        }
+    });
 
     function toggleSelection() {
         isSelected = !isSelected;
@@ -37,23 +38,17 @@
         });
     }
 
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            toggleSelection();
-            event.preventDefault(); // Prevents the default scrolling behavior when pressing the space bar
-        }
-    }
-
     $: wrapperClasses =
-        'transition ease duration-[0.3s] w-full flex flex-col rounded-[6px] gap-[3px] px-[10px] py-[10px] relative ' +
-        `${isSelected ? 'bg-blue-500 text-white' : 'bg-black-100 dark:bg-white-100'} hover:bg-black-200`;
+        'w-full flex flex-col items-start gap-[3px] px-[10px] py-[10px] text-left relative ' +
+        `${isSelected ? 'bg-blue-500 text-white' : 'bg-black-100 dark:bg-white-100'} outline-[0px]`;
 
     const avatarWrapperClasses =
         'transition-all ease-in-out duration-[0.3s] min-w-[30px] min-h-[30px] w-[30px] h-[30px] ' +
         'rounded-full border-[2px] border-white shadow-deep flex flex-col justify-center items-center ' +
         'relative overflow-hidden bg-white-200 backdrop-blur-[10px] text-[12px] leading-[1] hover:border-[2px]';
 </script>
 
+<!-- Loading State -->
 {#if gettingMintInfo}
     <div class="p-4 space-y-4 w-full">
         <div class="placeholder animate-pulse" />
@@ -70,20 +65,11 @@
         </div>
     </div>
 {:else if mintInfo}
-    <div
-        class={wrapperClasses}
-        role="button"
+    <Button
+        classes={wrapperClasses}
         on:click={toggleSelection}
-        on:keydown={handleKeydown}
-        tabindex="0"
+        variant={isSelected ? 'contained' : 'text'}
     >
-        <input
-            type="checkbox"
-            name="mintsWalletCheckbox"
-            checked={isSelected}
-            class="w-full absolute top-[0] bottom-[0] right-[0] left-[0] opacity-[0] cursor-pointer peer"
-        />
-
         <span class="font-[500]">
             {mintInfo.name.length < 26 ? mintInfo.name : mintInfo.name.substring(0, 25) + '...'}
         </span>
@@ -113,5 +99,5 @@
                 </p>
             {/if}
         </div>
-    </div>
+    </Button>
 {/if}

apps/satshoot/src/lib/components/Modals/ExploreMintsModal.svelte

@@ -75,8 +75,11 @@
                 </div>
 
                 <div
-                    class="w-full flex items-center justify-center pt-[10px] mt-[10px] border-t-[1px] border-black-100 dark:border-white-100"
+                    class="w-full flex items-center justify-center gap-[10px] pt-[10px] mt-[10px] border-t-[1px] border-black-100 dark:border-white-100"
                 >
+                    <Button variant="outlined" on:click={() => modalStore.close()} grow
+                        >Cancel</Button
+                    >
                     <Button on:click={handleSelect} grow>Save</Button>
                 </div>
             {:else}

apps/satshoot/src/lib/components/Modals/LoginModal.svelte

@@ -854,7 +854,7 @@
                             grow
                             on:click={() => (displayGeneratedAccount = !displayGeneratedAccount)}
                         >
-                            Account Generation
+                            Generate Account
                         </Button>
                     </div>
                 </div>

apps/satshoot/src/lib/components/Modals/RelayRemovalConfirmation.svelte

@@ -35,37 +35,37 @@
 </script>
 
 <Popup title="Confirm Removal of Relay">
-    <div class="w-full flex flex-col">
-        <div class="w-full py-[10px] px-[5px]">
-            <div class="w-full max-h-[50vh] overflow-auto flex flex-col gap-[10px]">
-                <div
-                    class="w-full py-[5px] px-[10px] rounded-[6px] bg-orange-500 border-[2px] border-black-100 dark:border-white-100 flex flex-col justify-center items-center"
-                >
-                    <p class="font-[600] text-[16px] text-white">
-                        Do you really want to remove {url.replace('wss://', '').slice(0, -1)}?
-                    </p>
-                </div>
-
-                <div class="flex flex-row gap-[5px]">
-                    <Button grow variant="outlined" on:click={() => modalStore.close()}>
-                        Abort
-                    </Button>
-                    <Button grow on:click={handleConfirm} disabled={posting}>
-                        <i class="bx bx-trash" />
-                        <span>Remove</span>
-                        {#if posting}
-                            <ProgressRadial
-                                value={undefined}
-                                stroke={60}
-                                meter="stroke-white-500"
-                                track="stroke-white-500/30"
-                                strokeLinecap="round"
-                                width="w-8"
-                            />
-                        {/if}
-                    </Button>
-                </div>
+    <div class="w-full flex flex-col gap-[15px]">
+        <div class="w-full max-h-[50vh] overflow-auto flex flex-col gap-[10px] mt-[10px]">
+            <div
+                class="w-full py-[5px] px-[10px] rounded-[6px] bg-orange-500 border-[2px] border-black-100 dark:border-white-100 flex flex-col justify-center items-center"
+            >
+                <p class="font-[600] text-[16px] text-white">
+                    Do you really want to remove {url.replace('wss://', '').slice(0, -1)}?
+                </p>
             </div>
         </div>
+        <div class="w-full flex items-center justify-center gap-[10px]">
+            <Button grow variant="outlined" on:click={() => modalStore.close()}>Cancel</Button>
+            <Button
+                classes="bg-red-600 hover:bg-red-500 text-white"
+                grow
+                on:click={handleConfirm}
+                disabled={posting}
+            >
+                <i class="bx bx-trash" />
+                <span>Remove</span>
+                {#if posting}
+                    <ProgressRadial
+                        value={undefined}
+                        stroke={60}
+                        meter="stroke-white-500"
+                        track="stroke-white-500/30"
+                        strokeLinecap="round"
+                        width="w-8"
+                    />
+                {/if}
+            </Button>
+        </div>
     </div>
 </Popup>

apps/satshoot/src/lib/components/Modals/UpdateEcashWalletName.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { getModalStore } from '@skeletonlabs/skeleton';
+    import Popup from '../UI/Popup.svelte';
+    import Input from '../UI/Inputs/input.svelte';
+    import Button from '../UI/Buttons/Button.svelte';
+
+    const modalStore = getModalStore();
+
+    export let dataToEdit: string;
+
+    $: value = dataToEdit;
+
+    function update() {
+        if ($modalStore[0].response) {
+            $modalStore[0].response(value);
+            modalStore.close();
+        }
+    }
+</script>
+
+{#if $modalStore[0]}
+    <Popup title="Update Ecash Wallet Name">
+        <div class="flex flex-col gap-[15px] mt-4">
+            <Input bind:value />
+            <Button on:click={update}>Update</Button>
+        </div>
+    </Popup>
+{/if}