Chore: rebrand AddProposalPopup (#1944)

* chore: remove .js * chore: rebrand NodeInput * chore: rebrand AddProposalPopup * fix: handle undefined accountIndex * chore: add locale * chore: remove Checkbox --------- Co-authored-by: Jean Ribeiro <[email protected]>
bloomwalletio · Feb 19, 2024 · 83ac18d · 83ac18d
1 parent 5eab4c2
commit 83ac18d
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 255 deletions.
diff --git a/packages/desktop/components/popup/popups/AddProposalPopup.svelte b/packages/desktop/components/popup/popups/AddProposalPopup.svelte
@@ -10,8 +10,10 @@
     import { truncateString } from '@core/utils/string'
     import type { IAuth } from '@iota/sdk/out/types'
     import { closePopup, openPopup, PopupId } from '@desktop/auxiliary/popup'
-    import { Checkbox, NodeInput, Text, TextInput, TextType } from '@ui'
-    import { Button } from '@bloomwalletio/ui'
+    import { NodeInput } from '@ui'
+    import { Checkbox, TextInput } from '@bloomwalletio/ui'
+    import PopupTemplate from '../PopupTemplate.svelte'
+    import { IError } from '@core/error'
 
     export let initialEventId: string
     export let initialNodeUrl: string
@@ -41,15 +43,16 @@
                 nodeInput?.validate(),
             ])
             await registerParticipationWrapper()
-            updateActiveAccountPersistedData($selectedAccount.index, {
-                removedProposalIds: $selectedAccount.removedProposalIds?.filter((id) => id !== inputtedEventId),
+            updateActiveAccountPersistedData($selectedAccount?.index, {
+                removedProposalIds: $selectedAccount?.removedProposalIds?.filter((id) => id !== inputtedEventId),
             })
             isBusy = false
         } catch (err) {
             isBusy = false
-            const isAuthenticationError = err?.error?.match(/(username)|(password)|(jwt)/g)?.length > 0
-            const isEventError = err?.error?.match(/(the requested data)|(was not found)/)?.length > 0
-            const isNodeError = err?.error?.match(/(failed to lookup address information)|(dns error)/)?.length > 0
+            const error = err as IError
+            const isAuthenticationError = error?.error?.match(/(username)|(password)|(jwt)/g)
+            const isEventError = error?.error?.match(/(the requested data)|(was not found)/)
+            const isNodeError = error?.error?.match(/(failed to lookup address information)|(dns error)/)
             if (isAuthenticationError) {
                 openNodeAuthRequiredPopup()
             } else if (isEventError) {
@@ -65,7 +68,7 @@
                     text: localize('error.node.dns'),
                 })
             } else if (!nodeInputError && !eventIdError) {
-                handleError(err)
+                handleError(error)
             }
         }
     }
@@ -82,7 +85,7 @@
             node: { url: nodeUrl, auth },
             eventsToRegister: isRegisteringAllProposals ? [] : [eventId],
         }
-        const accounts = isAddingForAllAccounts ? $activeAccounts : [$selectedAccount]
+        const accounts = isAddingForAllAccounts ? $activeAccounts : $selectedAccount ? [$selectedAccount] : []
         await registerProposalsForAccounts(options, accounts)
         showNotification({
             variant: 'success',
@@ -120,29 +123,42 @@
     }
 </script>
 
-<form id="add-proposal" on:submit|preventDefault={onSubmit}>
-    <Text type={TextType.h3} classes="mb-6"
-        >{localize(`popups.${isEditMode ? 'editProposal' : 'addProposal'}.title`)}</Text
-    >
-    <Text fontSize="15">{localize(`popups.${isEditMode ? 'editProposal' : 'addProposal'}.body`)}</Text>
-    <div class="flex flex-col w-full space-y-5 mt-4">
-        <NodeInput bind:this={nodeInput} bind:nodeUrl bind:error={nodeInputError} />
-        {#if !isEditMode}
-            <Checkbox label="Add all proposals on this node" bind:checked={isRegisteringAllProposals} />
-        {/if}
-        <TextInput
-            bind:value={inputtedEventId}
-            bind:error={eventIdError}
-            disabled={isRegisteringAllProposals || isEditMode}
-            placeholder={localize('views.governance.details.proposalInformation.eventId')}
-            label={localize('views.governance.details.proposalInformation.eventId')}
-        />
-        {#if !isEditMode}
-            <Checkbox label={localize('popups.addProposal.addToAllAccounts')} bind:checked={isAddingForAllAccounts} />
-        {/if}
-    </div>
-    <div class="flex w-full space-x-4 mt-6">
-        <Button variant="outlined" width="full" on:click={onCancelClick} text={localize('actions.cancel')} />
-        <Button type="submit" {disabled} busy={isBusy} width="full" text={localize('actions.confirm')} />
-    </div>
-</form>
+<PopupTemplate
+    title={localize(`popups.${isEditMode ? 'editProposal' : 'addProposal'}.title`)}
+    description={localize(`popups.${isEditMode ? 'editProposal' : 'addProposal'}.body`)}
+    busy={isBusy}
+    backButton={{
+        text: localize('actions.cancel'),
+        onClick: onCancelClick,
+    }}
+    continueButton={{
+        type: 'submit',
+        form: 'add-proposal',
+        text: localize('actions.confirm'),
+        disabled,
+    }}
+>
+    <form id="add-proposal" on:submit|preventDefault={onSubmit}>
+        <div class="flex flex-col w-full space-y-4">
+            <NodeInput bind:this={nodeInput} bind:nodeUrl bind:error={nodeInputError} />
+            {#if !isEditMode}
+                <Checkbox
+                    label={localize('popups.addProposal.addAllProposalsOnNode')}
+                    bind:checked={isRegisteringAllProposals}
+                />
+            {/if}
+            <TextInput
+                bind:value={inputtedEventId}
+                bind:error={eventIdError}
+                disabled={isRegisteringAllProposals || isEditMode}
+                label={localize('views.governance.details.proposalInformation.eventId')}
+            />
+            {#if !isEditMode}
+                <Checkbox
+                    label={localize('popups.addProposal.addToAllAccounts')}
+                    bind:checked={isAddingForAllAccounts}
+                />
+            {/if}
+        </div>
+    </form>
+</PopupTemplate>
diff --git a/packages/shared/src/components/inputs/Checkbox.svelte b/packages/shared/src/components/inputs/Checkbox.svelte
diff --git a/packages/shared/src/components/inputs/NodeInput.svelte b/packages/shared/src/components/inputs/NodeInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { SelectorInput, IOption, Modal } from '@ui'
+    import { SelectInput, IOption } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { activeProfile } from '@core/profile/stores'
     import { isValidUrl, stripTrailingSlash } from '@core/utils'
@@ -8,12 +8,10 @@
     export let error: string
     export let nodeUrl: string
 
-    let inputElement: HTMLInputElement
-    let modal: Modal
     let nodeOptions: IOption[]
     let selected: IOption = { value: nodeUrl }
 
-    $: clientOptionsNodes = $activeProfile?.clientOptions?.nodes
+    $: clientOptionsNodes = $activeProfile?.clientOptions?.nodes ?? []
     $: clientOptionsNodes, (nodeOptions = getNodeOptionsFromClientOptions())
     $: nodeUrl = stripTrailingSlash(selected?.value?.trim())
 
@@ -24,7 +22,7 @@
             }
             return Promise.resolve()
         } catch (err) {
-            error = err?.message ?? err
+            error = (err as Error)?.message
             return Promise.reject(error)
         }
     }
@@ -40,13 +38,10 @@
     }
 </script>
 
-<SelectorInput
-    labelLocale="views.governance.details.proposalInformation.nodeUrl"
+<SelectInput
+    label={localize('views.governance.details.proposalInformation.nodeUrl')}
     bind:selected
-    bind:inputElement
-    bind:modal
     bind:error
     {disabled}
     options={nodeOptions}
-    {...$$restProps}
 />
diff --git a/packages/shared/src/components/inputs/index.ts b/packages/shared/src/components/inputs/index.ts
@@ -1,7 +1,6 @@
 export { default as AccountInput } from './AccountInput.svelte'
 export { default as AliasInput } from './AliasInput.svelte'
 export { default as AmountInput } from './AmountInput.svelte'
-export { default as Checkbox } from './Checkbox.svelte'
 export { default as ClosableInput } from './ClosableInput.svelte'
 export { default as Dropdown } from './Dropdown.svelte'
 export { default as Dropzone } from './Dropzone.svelte'

diff --git a/packages/shared/src/components/molecules/SelectorInput.svelte b/packages/shared/src/components/molecules/SelectorInput.svelte
diff --git a/...mponents/molecules/activity-info/index.js → ...mponents/molecules/activity-info/index.ts b/...mponents/molecules/activity-info/index.js → ...mponents/molecules/activity-info/index.ts
@@ -1,9 +1,9 @@
-export { default as AliasActivityInformation } from './AliasActivityInformation'
-export { default as ConsolidationActivityInformation } from './ConsolidationActivityInformation'
-export { default as FoundryActivityInformation } from './FoundryActivityInformation'
-export { default as GenericActivityInformation } from './GenericActivityInformation'
-export { default as GovernanceActivityInformation } from './GovernanceActivityInformation'
-export { default as TokenActivityInformation } from './TokenActivityInformation'
-export { default as NftActivityInformation } from './NftActivityInformation'
-export { default as NftMetadataInformation } from './NftMetadataInformation'
-export { default as SmartContractActivityInformation } from './SmartContractActivityInformation'
+export { default as AliasActivityInformation } from './AliasActivityInformation.svelte'
+export { default as ConsolidationActivityInformation } from './ConsolidationActivityInformation.svelte'
+export { default as FoundryActivityInformation } from './FoundryActivityInformation.svelte'
+export { default as GenericActivityInformation } from './GenericActivityInformation.svelte'
+export { default as GovernanceActivityInformation } from './GovernanceActivityInformation.svelte'
+export { default as TokenActivityInformation } from './TokenActivityInformation.svelte'
+export { default as NftActivityInformation } from './NftActivityInformation.svelte'
+export { default as NftMetadataInformation } from './NftMetadataInformation.svelte'
+export { default as SmartContractActivityInformation } from './SmartContractActivityInformation.svelte'
diff --git a/...omponents/molecules/filter-items/index.js → ...omponents/molecules/filter-items/index.ts b/...omponents/molecules/filter-items/index.js → ...omponents/molecules/filter-items/index.ts
diff --git a/packages/shared/src/components/molecules/index.ts b/packages/shared/src/components/molecules/index.ts
@@ -9,7 +9,6 @@ export { default as NftGallery } from './NftGallery.svelte'
 export { default as NftGalleryItem } from './NftGalleryItem.svelte'
 export { default as NftMedia } from './NftMedia.svelte'
 export { default as NodeAuthTab } from './NodeAuthTab.svelte'
-export { default as SelectorInput } from './SelectorInput.svelte'
 export { default as ShimmerClaimingAccountList } from './ShimmerClaimingAccountList.svelte'
 export { default as TransactionAssetSection } from './TransactionAssetSection.svelte'