refactor: remove /organisms folder and cleanup `NodeConfigurationFo…

…rm` & `NodeListTable` (#7083)

* refactor: remove AccountAssetsList

* refatcor: move components out organisms

* refactor: add missing types to prevent warnings

* fix: rename files

* fix: refactor function

* fix: move interface to component

* fix: remove export

* fix: reactivity and remove function

---------

Co-authored-by: Jean Carlo Noguera <[email protected]>

packages/shared/components/organisms/NodeConfigurationForm.svelte → packages/shared/components/NodeConfigurationForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import { localize } from '@core/i18n'
- import { NetworkId } from '@core/network'
+ import { IAuth, NetworkId } from '@core/network'
  import { EMPTY_NODE } from '@core/network/constants'
  import { IClientOptions, INode, INodeInfoResponse } from '@core/network/interfaces'
  import { nodeInfo } from '@core/network/stores'
@@ -10,19 +10,18 @@
  import { IDropdownItem, cleanUrl } from '@core/utils'
  import features from '@features/features'
  import { Dropdown, Error, NumberInput, PasswordInput, TextInput } from 'shared/components'
-
- interface NodeValidationOptions {
+ interface INodeValidationOptions {
  checkNodeInfo: boolean
  checkSameNetwork: boolean
  uniqueCheck: boolean
  validateClientOptions: boolean
  }
 
  export let node: INode = structuredClone(EMPTY_NODE)
- export let networkId: NetworkId
- export let coinType: string | undefined
- export let isBusy = false
- export let formError = ''
+ export let networkId: NetworkId | undefined = undefined
+ export let coinType: string | undefined = undefined
+ export let isBusy: boolean = false
+ export let formError: string | undefined = undefined
  export let currentClientOptions: IClientOptions | undefined = undefined
  export let isDeveloperProfile: boolean = false
  export let onSubmit: () => void = () => {}
@@ -48,20 +47,29 @@
  ].filter((item) => features.onboarding?.[item.value]?.enabled)
 
  let [username, password] = node.auth?.basicAuthNamePwd ?? ['', '']
- let jwt = node.auth?.jwt
+ let jwt = node?.auth?.jwt ?? ''
 
  $: networkId, (coinType = undefined)
  $: networkId, coinType, node.url, (formError = '')
- $: node = {
- url: node.url,
- auth: {
- ...([username, password].every((val) => val !== '') && {
- basicAuthNamePwd: [username, password],
- }),
- ...(jwt !== '' && {
- jwt,
- }),
- },
+ $: jwt,
+ username,
+ password,
+ (node = {
+ url: node.url,
+ auth: getAuth(),
+ })
+
+ function getAuth(): IAuth {
+ const auth: IAuth = {}
+
+ if ([username, password].every((value) => value !== '')) {
+ auth.basicAuthNamePwd = [username, password]
+ }
+
+ if (jwt !== '') {
+ auth.jwt = jwt
+ }
+ return auth
  }
 
  function cleanNodeUrl(): void {
@@ -72,7 +80,7 @@
  networkId = selected.value
  }
 
- export async function validate(options: NodeValidationOptions): Promise<void> {
+ export async function validate(options: INodeValidationOptions): Promise<void> {
  if (networkId === NetworkId.Custom && !coinType) {
  formError = localize('error.node.noCoinType')
  return Promise.reject({ type: 'validationError', error: formError })
@@ -122,7 +130,7 @@
 </script>
 
 <form id="node-configuration-form" class="w-full h-full flex-col space-y-3" on:submit|preventDefault={onSubmit}>
- {#if showNetworkFields}
+ {#if showNetworkFields && networkId}
  <Dropdown
  label={localize('general.network')}
  placeholder={localize('general.network')}
@@ -131,7 +139,7 @@
  disabled={isBusy}
  onSelect={onNetworkIdChanges}
  />
- {#if networkId === NetworkId.Custom}
+ {#if networkId === NetworkId.Custom && coinType}
  <NumberInput
  bind:value={coinType}
  placeholder={localize('general.coinType')}

packages/shared/components/NodeListTable.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+ import { NodeActionsButton, Pill, Text } from '@ui'
+ import { localize } from '@core/i18n'
+ import { getOfficialNodes, INode, isOfficialNetwork } from '@core/network'
+ import { activeProfile } from '@core/profile'
+ import { PopupId, openPopup } from '@auxiliary/popup'
+
+ export let nodesContainer: HTMLElement | undefined = undefined
+
+ $: clientOptions = $activeProfile?.clientOptions
+
+ function isPrimary(node: INode): boolean {
+ return node.url === clientOptions?.primaryNode?.url
+ }
+
+ function onViewNodeInfoClick(node: INode): void {
+ openPopup({
+ id: PopupId.NodeInfo,
+ props: {
+ node,
+ },
+ })
+ }
+</script>
+
+<div
+ class="max-h-80 flex flex-col border border-solid border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-700 rounded-2xl overflow-auto"
+ bind:this={nodesContainer}
+>
+ {#if clientOptions?.nodes}
+ {#if clientOptions?.nodes?.length < 1 && !isOfficialNetwork($activeProfile?.network?.id)}
+ <Text classes="p-3">
+ {localize('views.settings.configureNodeList.noNodes')}
+ </Text>
+ {:else}
+ {#each clientOptions?.nodes?.length > 0 ? clientOptions?.nodes : getOfficialNodes($activeProfile?.network?.id) as node}
+ <button
+ class="flex flex-row items-center justify-between py-4 px-3 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20"
+ on:click={() => onViewNodeInfoClick(node)}
+ >
+ <div class="flex flex-row items-center space-x-4 overflow-hidden">
+ <Text classes={'self-start overflow-hidden whitespace-nowrap text-ellipsis'}>
+ {node.url}
+ </Text>
+ {#if isPrimary(node)}
+ <Pill
+ data={localize('views.settings.configureNodeList.primaryNode').toLowerCase()}
+ textColor="blue-500"
+ />
+ {/if}
+ {#if node?.disabled}
+ <Pill data={localize('general.excluded').toLowerCase()} textColor="red-500" />
+ {/if}
+ </div>
+ <NodeActionsButton {node} {clientOptions} />
+ </button>
+ {/each}
+ {/if}
+ {/if}
+</div>

packages/shared/components/enums/index.ts

@@ -6,3 +6,4 @@ export * from './nft-media-size.enum'
 export * from './position.enum'
 export * from './tab.enum'
 export * from './text-type.enum'
+export * from './input-type.enum'

packages/shared/components/enums/input-type.enum.ts

@@ -0,0 +1,5 @@
+export enum InputType {
+ Text = 'text',
+ Number = 'number',
+ Password = 'password',
+}

packages/shared/components/index.js

@@ -24,6 +24,8 @@ export { default as Toast } from './Toast.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as Tooltip } from './Tooltip.svelte'
 export { default as Transition } from './Transition.svelte'
+export { default as NodeConfigurationForm } from './NodeConfigurationForm.svelte'
+export { default as NodeListTable } from './NodeListTable.svelte'
 export { default as BalanceSummaryRow } from './BalanceSummaryRow.svelte'
 export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
 export { default as ColoredCircle } from './ColoredCircle.svelte'
@@ -38,7 +40,6 @@ export * from './inputs'
 export * from './interfaces'
 export * from './modals'
 export * from './molecules'
-export * from './organisms'
 export * from './types'
 export * from './badges'
 export * from './boxes'

packages/shared/components/inputs/PasswordInput.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
  import { Icon as IconEnum } from '@auxiliary/icon'
  import { localize } from '@core/i18n'
- import { Icon, Text, TextInput } from 'shared/components'
+ import { Icon, InputType, Text, TextInput } from 'shared/components'
 
- export let value = ''
- export let classes = ''
- export let strength = 0
+ export let value: string
+ export let classes: string | undefined = undefined
+ export let strength: number = 0
  export let showStrengthLevel = false
  export let showRevealToggle = false
  export let strengthLevels = 4
- export let label: string = undefined
- export let placeholder = undefined
- export let maxlength = undefined
- export let error = null
- export let integer = false
- export let autofocus = false
- export let submitHandler = undefined
- export let disabled = false
+ export let label: string | undefined = undefined
+ export let placeholder: string | undefined = undefined
+ export let maxlength: number | undefined = undefined
+ export let error: string | undefined = undefined
+ export let integer: boolean = false
+ export let autofocus: boolean = false
+ export let submitHandler: () => void = () => {}
+ export let disabled: boolean = false
 
- let revealed = false
- let type = 'password'
+ let revealed: boolean = false
+ let type: InputType = InputType.Password
 
  function revealToggle(): void {
- type = type === 'password' ? 'text' : 'password'
+ type = type === InputType.Password ? InputType.Text : InputType.Password
  revealed = !revealed
  }
 
- const STRENGTH_COLORS = ['gray-300', 'orange-500', 'yellow-600', 'yellow-300', 'green-700']
+ const STRENGTH_COLORS: string[] = ['gray-300', 'orange-500', 'yellow-600', 'yellow-300', 'green-700']
 </script>
 
 <div class={classes} class:disabled>

packages/shared/components/inputs/TextInput.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
  import Input from './Input.svelte'
- import { FontWeight, TextPropTypes, TextType } from 'shared/components'
+ import { FontWeight, InputType, TextPropTypes, TextType } from 'shared/components'
 
  export let value: string = ''
- export let inputElement: HTMLInputElement = undefined
+ export let inputElement: HTMLInputElement | undefined = undefined
  export let hasFocus: boolean = false
  export let error: string = ''
- export let inputType: 'text' | 'number' | 'password' = 'text'
+ export let inputType: InputType = InputType.Text
  export let alignment: 'left' | 'right' | 'center' | 'justify' = 'left'
 
  // Text Props