feat: only allow l1 -> l2 native tokens & nfts txs in developer profi…

…les (#7045) * feat: Only allow l1 -> l2 txs in developer profiles * fix * clean up * update comment * clean up * fix * fix * fix * fix: Enable NetworkInput dropdown in non-developer-profiles * fix: Revert changes * clean up * fix: Reset selected destination network when asset changes * fmt * fix: Also check for active tab * fix: Reset network when NFT Id changes * fix: Improve UX for developer profiles --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Jun 29, 2023 · cd1f4d4 · cd1f4d4
1 parent cc7963f
commit cd1f4d4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/packages/desktop/components/popups/send/SendFormPopup.svelte b/packages/desktop/components/popups/send/SendFormPopup.svelte
@@ -10,6 +10,7 @@
         newTransactionDetails,
         NewTransactionType,
         setNewTransactionDetails,
+        TokenStandard,
     } from '@core/wallet'
     import { selectedAccount } from '@core/account/stores'
     import {
@@ -25,6 +26,7 @@
         TextType,
     } from 'shared/components'
     import features from '@features/features'
+    import { activeProfile } from '@core/profile'
 
     enum SendForm {
         SendToken = 'general.sendToken',
@@ -37,7 +39,8 @@
     }
 
     const transactionDetails = get(newTransactionDetails)
-    let { metadata, recipient, tag, layer2Parameters, disableAssetSelection } = transactionDetails
+    let { metadata, recipient, tag, layer2Parameters } = transactionDetails
+    const { disableAssetSelection } = transactionDetails
 
     let assetAmountInput: AssetAmountInput
     let nftInput: NftInput
@@ -68,6 +71,13 @@
     $: hasSpendableNfts = $ownedNfts.some((nft) => nft.isSpendable)
     $: isLayer2 = !!iscpChainAddress
     $: isSendTokenTab = activeTab === SendForm.SendToken
+    $: isBaseToken =
+        activeTab === SendForm.SendToken &&
+        transactionDetails.type === NewTransactionType.TokenTransfer &&
+        asset?.metadata?.standard === TokenStandard.BaseToken
+    // Only allow L1 -> L2 transactions in developer profiles when transfering other than base tokens
+    $: showLayer2 = features?.network?.layer2?.enabled && ($activeProfile.isDeveloperProfile || isBaseToken)
+    $: asset, nftId, !showLayer2 && networkInput?.reset()
 
     function setTransactionDetails(): void {
         layer2Parameters = isLayer2
@@ -180,7 +190,7 @@
         {:else}
             <NftInput bind:this={nftInput} bind:nftId readonly={disableAssetSelection} />
         {/if}
-        <NetworkInput bind:this={networkInput} bind:iscpChainAddress showLayer2={features?.network?.layer2?.enabled} />
+        <NetworkInput bind:this={networkInput} bind:iscpChainAddress {showLayer2} />
         <RecipientInput bind:this={recipientInput} bind:recipient {isLayer2} />
         <optional-inputs class="flex flex-row flex-wrap gap-4">
             <OptionalInput

diff --git a/packages/shared/components/inputs/NetworkInput.svelte b/packages/shared/components/inputs/NetworkInput.svelte
@@ -8,12 +8,12 @@
     export let iscpChainAddress: string | undefined = undefined
     export let showLayer2: boolean = false
 
-    const readonlyAttribute = $activeProfile?.isDeveloperProfile ? {} : { readonly: true }
     const layer1Network = {
         key: $activeProfile?.network.name,
         value: undefined,
     }
 
+    let selectorInput: SelectorInput
     let inputElement: HTMLInputElement
     let modal: Modal
     let error: string
@@ -24,6 +24,11 @@
 
     $: iscpChainAddress = selected?.value
 
+    export function reset(): void {
+        selected = networkOptions[0]
+        selectorInput?.resetValue(selected)
+    }
+
     function getNetworkOptions(showLayer2: boolean): IOption[] {
         let layer2Networks: IOption[] = []
         if (showLayer2) {
@@ -55,12 +60,12 @@
 
 <SelectorInput
     labelLocale="general.destinationNetwork"
+    bind:this={selectorInput}
     bind:selected
     bind:inputElement
     bind:modal
     bind:error
     options={networkOptions}
-    {...readonlyAttribute}
     inputClasses="cursor-pointer"
     containerClasses="cursor-pointer"
 />
diff --git a/packages/shared/components/molecules/SelectorInput.svelte b/packages/shared/components/molecules/SelectorInput.svelte
@@ -53,7 +53,8 @@
         setFilteredOptions()
     }
 
-    function resetValue(): void {
+    export function resetValue(newSelected?: IOption): void {
+        if (newSelected) selected = newSelected
         value = selected?.key ?? selected?.value
     }
 </script>

diff --git a/packages/shared/lib/core/wallet/types/new-transaction-details.type.ts b/packages/shared/lib/core/wallet/types/new-transaction-details.type.ts
@@ -22,8 +22,8 @@ type NewBaseTransactionDetails = {
 export type NewTokenTransactionDetails = NewBaseTransactionDetails & {
     type: NewTransactionType.TokenTransfer
     rawAmount: string
-    asset: IAsset
-    unit: string
+    asset?: IAsset
+    unit?: string
 }
 
 export type NewNftTransactionDetails = NewBaseTransactionDetails & {