fix: wizard modal opening glitch (#2325)

# Motivation Fix wizard modal opening glitch by integrating gix-cmp PR dfinity/gix-components#198 # ⚠️ PRs The related PR is a tricky PR! - [x] dfinity/gix-components#198 # Changes - bump gix-cmp
dfinity · Apr 17, 2023 · 9ed9814 · 9ed9814
1 parent 1a72e67
commit 9ed9814
Show file tree

Hide file tree

Showing 18 changed files with 36 additions and 36 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/lib/modals/accounts/CkBTCTransactionModal.svelte b/frontend/src/lib/modals/accounts/CkBTCTransactionModal.svelte
@@ -45,7 +45,7 @@
   let bitcoinEstimatedFee: bigint | undefined | null = undefined;
   let kytEstimatedFee: bigint | undefined | null = undefined;
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   let title: string;
   $: title =

diff --git a/frontend/src/lib/modals/accounts/IcpTransactionModal.svelte b/frontend/src/lib/modals/accounts/IcpTransactionModal.svelte
@@ -19,7 +19,7 @@
     sourceAccount: selectedAccount,
   };
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   $: title =
     currentStep?.name === "Form"

diff --git a/frontend/src/lib/modals/accounts/SnsTransactionModal.svelte b/frontend/src/lib/modals/accounts/SnsTransactionModal.svelte
@@ -23,7 +23,7 @@
     sourceAccount: selectedAccount,
   };
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   $: title =
     currentStep?.name === "Form"

diff --git a/frontend/src/lib/modals/neurons/DisburseNnsNeuronModal.svelte b/frontend/src/lib/modals/neurons/DisburseNnsNeuronModal.svelte
@@ -44,7 +44,7 @@
     },
   ];
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let modal: WizardModal;
   let loading = false;
   let amount: TokenAmount;
@@ -100,10 +100,10 @@
     ><span data-tid="disburse-neuron-modal">{currentStep?.title}</span
     ></svelte:fragment
   >
-  {#if currentStep.name === "SelectDestination"}
+  {#if currentStep?.name === "SelectDestination"}
     <DestinationAddress on:nnsAddress={onSelectAddress} />
   {/if}
-  {#if currentStep.name === "ConfirmDisburse" && destinationAddress !== undefined}
+  {#if currentStep?.name === "ConfirmDisburse" && destinationAddress !== undefined}
     <ConfirmDisburseNeuron
       on:nnsClose
       on:nnsConfirm={executeTransaction}

diff --git a/frontend/src/lib/modals/neurons/DisburseSnsNeuronModal.svelte b/frontend/src/lib/modals/neurons/DisburseSnsNeuronModal.svelte
@@ -54,7 +54,7 @@
     },
   ];
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let loading = false;
 
   let destinationAddress: string | undefined;
@@ -113,7 +113,7 @@
     ><span data-tid="disburse-sns-neuron-modal">{currentStep?.title}</span
     ></svelte:fragment
   >
-  {#if currentStep.name === "ConfirmDisburse" && destinationAddress !== undefined}
+  {#if currentStep?.name === "ConfirmDisburse" && destinationAddress !== undefined}
     <ConfirmDisburseNeuron
       on:nnsClose
       on:nnsBack={() => {

diff --git a/frontend/src/lib/modals/neurons/IncreaseDissolveDelayModal.svelte b/frontend/src/lib/modals/neurons/IncreaseDissolveDelayModal.svelte
@@ -23,7 +23,7 @@
     },
   ];
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let modal: WizardModal;
 
   let delayInSeconds = Number(neuron.dissolveDelaySeconds);
@@ -39,7 +39,7 @@
 
 <WizardModal {steps} bind:currentStep bind:this={modal} on:nnsClose>
   <svelte:fragment slot="title">{currentStep?.title}</svelte:fragment>
-  {#if currentStep.name === "SetDissolveDelay"}
+  {#if currentStep?.name === "SetDissolveDelay"}
     <SetNnsDissolveDelay
       {neuron}
       on:nnsCancel={closeModal}
@@ -52,7 +52,7 @@
       >
     </SetNnsDissolveDelay>
   {/if}
-  {#if currentStep.name === "ConfirmDissolveDelay"}
+  {#if currentStep?.name === "ConfirmDissolveDelay"}
     <ConfirmDissolveDelay
       confirmButtonText={$i18n.neurons.confirm_update_delay}
       {neuron}

diff --git a/frontend/src/lib/modals/neurons/IncreaseNeuronStakeModal.svelte b/frontend/src/lib/modals/neurons/IncreaseNeuronStakeModal.svelte
@@ -25,7 +25,7 @@
     pollAccounts();
   });
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   let title: string;
   $: title =

diff --git a/frontend/src/lib/modals/neurons/SpawnNeuronModal.svelte b/frontend/src/lib/modals/neurons/SpawnNeuronModal.svelte
@@ -53,7 +53,7 @@
     ? hardwareWalletSteps
     : nnsDappAccountSteps;
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   let percentageToSpawn = 0;
 
@@ -96,7 +96,7 @@
   <svelte:fragment slot="title"
     >{currentStep?.title ?? steps[0].title}</svelte:fragment
   >
-  {#if currentStep.name === "SelectPercentage"}
+  {#if currentStep?.name === "SelectPercentage"}
     <NeuronSelectPercentage
       formattedMaturity={formattedMaturity(neuron)}
       buttonText={$i18n.neuron_detail.spawn}
@@ -117,7 +117,7 @@
         </p>
       </svelte:fragment>
     </NeuronSelectPercentage>
-  {:else if currentStep.name === "ConfirmSpawn"}
+  {:else if currentStep?.name === "ConfirmSpawn"}
     <ConfirmSpawnHW {neuron} on:nnsConfirm={spawnNeuronFromMaturity} />
   {/if}
 </WizardModal>

diff --git a/frontend/src/lib/modals/neurons/StakeMaturityModal.svelte b/frontend/src/lib/modals/neurons/StakeMaturityModal.svelte
@@ -25,7 +25,7 @@
     },
   ];
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let modal: WizardModal;
 
   let percentageToStake = 0;
@@ -43,7 +43,7 @@
     >{currentStep?.title ?? steps[0].title}</svelte:fragment
   >
 
-  {#if currentStep.name === "SelectPercentage"}
+  {#if currentStep?.name === "SelectPercentage"}
     <NeuronSelectPercentage
       {formattedMaturity}
       buttonText={$i18n.neuron_detail.stake}
@@ -56,7 +56,7 @@
         {$i18n.neuron_detail.stake_maturity_modal_description}
       </svelte:fragment>
     </NeuronSelectPercentage>
-  {:else if currentStep.name === "ConfirmStake"}
+  {:else if currentStep?.name === "ConfirmStake"}
     <NeuronConfirmActionScreen
       on:nnsConfirm={stakeNeuronMaturity}
       on:nnsCancel={modal.back}

diff --git a/frontend/src/lib/modals/sns/neurons/AddPermissionsModal.svelte b/frontend/src/lib/modals/sns/neurons/AddPermissionsModal.svelte
@@ -31,7 +31,7 @@
     },
   ];
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let modal: WizardModal;
 
   let principal: Principal | undefined = undefined;
@@ -82,7 +82,7 @@
     >{`${currentStep?.title} - TESTNET ONLY`}</svelte:fragment
   >
 
-  {#if currentStep.name === "AddPrincipal"}
+  {#if currentStep?.name === "AddPrincipal"}
     <AddPrincipal
       bind:principal
       on:nnsSelectPrincipal={() => modal.next()}
@@ -93,7 +93,7 @@
     </AddPrincipal>
   {/if}
 
-  {#if currentStep.name === "AddPermissions"}
+  {#if currentStep?.name === "AddPermissions"}
     <p>{`Select permissions for ${principal?.toText()}`}</p>
     {#each selectablePermissions as { checked, permission }}
       <Checkbox

diff --git a/frontend/src/lib/modals/sns/neurons/IncreaseSnsDissolveDelayModal.svelte b/frontend/src/lib/modals/sns/neurons/IncreaseSnsDissolveDelayModal.svelte
@@ -34,7 +34,7 @@
     },
   ];
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let modal: WizardModal;
 
   let delayInSeconds = Number(getSnsLockedTimeInSeconds(neuron) ?? 0n);
@@ -80,7 +80,7 @@
 
 <WizardModal {steps} bind:currentStep bind:this={modal} on:nnsClose>
   <svelte:fragment slot="title">{currentStep?.title}</svelte:fragment>
-  {#if currentStep.name === "SetSnsDissolveDelay"}
+  {#if currentStep?.name === "SetSnsDissolveDelay"}
     <SetSnsDissolveDelay
       {rootCanisterId}
       {neuron}
@@ -95,7 +95,7 @@
       >
     </SetSnsDissolveDelay>
   {/if}
-  {#if currentStep.name === "ConfirmSnsDissolveDelay"}
+  {#if currentStep?.name === "ConfirmSnsDissolveDelay"}
     <ConfirmSnsDissolveDelay
       {rootCanisterId}
       {neuron}

diff --git a/frontend/src/lib/modals/sns/neurons/SnsIncreaseStakeNeuronModal.svelte b/frontend/src/lib/modals/sns/neurons/SnsIncreaseStakeNeuronModal.svelte
@@ -23,7 +23,7 @@
   export let rootCanisterId: Principal;
   export let reloadNeuron: () => Promise<void>;
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   let title: string;
   $: title =

diff --git a/frontend/src/lib/modals/sns/neurons/SnsStakeNeuronModal.svelte b/frontend/src/lib/modals/sns/neurons/SnsStakeNeuronModal.svelte
@@ -24,7 +24,7 @@
   export let governanceCanisterId: Principal;
   export let transactionFee: TokenAmount;
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
 
   let stakeNeuronText = replacePlaceholders(
     $i18n.sns_neurons.stake_sns_neuron,

diff --git a/frontend/src/lib/modals/sns/neurons/SnsTransactionModal.svelte b/frontend/src/lib/modals/sns/neurons/SnsTransactionModal.svelte
@@ -11,7 +11,7 @@
   export let rootCanisterId: Principal;
   export let governanceCanisterId: Principal;
   export let transactionFee: TokenAmount;
-  export let currentStep: WizardStep;
+  export let currentStep: WizardStep | undefined;
   export let validateAmount: ValidateAmountFn = () => undefined;
 
   let transactionInit: TransactionInit = {

diff --git a/frontend/src/lib/modals/sns/sale/ParticipateSwapModal.svelte b/frontend/src/lib/modals/sns/sale/ParticipateSwapModal.svelte
@@ -88,7 +88,7 @@
     swap: { params },
   } = summary);
 
-  let currentStep: WizardStep;
+  let currentStep: WizardStep | undefined;
   let title: string | undefined;
   $: title =
     currentStep?.name === "Form"

diff --git a/frontend/src/tests/lib/components/neurons/NnsNeuronsFooter.spec.ts b/frontend/src/tests/lib/components/neurons/NnsNeuronsFooter.spec.ts
@@ -34,7 +34,7 @@ describe("NnsNeurons", () => {
       const spawningNeuron = {
         ...mockNeuron,
         state: NeuronState.Spawning,
-        neuronId: BigInt(223),
+        neuronId: BigInt(456),
         fullNeuron: {
           ...mockFullNeuron,
           spawnAtTimesSeconds: BigInt(12312313),

diff --git a/frontend/src/tests/lib/modals/transaction/TransactionModalTest.svelte b/frontend/src/tests/lib/modals/transaction/TransactionModalTest.svelte
@@ -5,7 +5,7 @@
   import { OWN_CANISTER_ID } from "$lib/constants/canister-ids.constants";
   import { DEFAULT_TRANSACTION_FEE_E8S } from "$lib/constants/icp.constants";
 
-  export let currentStep: WizardStep;
+  export let currentStep: WizardStep | undefined;
 
   let modal: TransactionModal;