Merge branch 'stardust-develop' into chore/update-wallet.rs

iotaledger · Nov 16, 2022 · 0c42b17 · 0c42b17
2 parents db272e8 + 066a6de
commit 0c42b17
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 216 deletions.
diff --git a/packages/shared/components/molecules/ActivityInformation.svelte b/packages/shared/components/molecules/ActivityInformation.svelte
@@ -1,12 +1,18 @@
 <script lang="typescript">
-    import { Tabs, GenericActivityInformation, AliasActivityInformation } from 'shared/components'
+    import {
+        Tabs,
+        GenericActivityInformation,
+        AliasActivityInformation,
+        NftActivityInformation,
+    } from 'shared/components'
     import { ActivityType, Activity } from '@core/wallet'
 
     export let activity: Activity
 
     enum Tab {
         Transaction = 'general.transaction',
         Alias = 'general.alias',
+        Nft = 'general.nft',
     }
 
     let tabs: Tab[] = []
@@ -17,6 +23,9 @@
         case ActivityType.Alias:
             tabs = [Tab.Transaction, Tab.Alias]
             break
+        case ActivityType.Nft:
+            tabs = [Tab.Transaction, Tab.Nft]
+            break
     }
 
     let activeTab = Tab.Transaction
@@ -30,5 +39,7 @@
         <GenericActivityInformation {activity} />
     {:else if activeTab === Tab.Alias}
         <AliasActivityInformation {activity} />
+    {:else if activeTab === Tab.Nft}
+        <NftActivityInformation {activity} />
     {/if}
 </activity-details>
diff --git a/packages/shared/components/molecules/NftActivityDetails.svelte b/packages/shared/components/molecules/NftActivityDetails.svelte
@@ -1,156 +1,18 @@
 <script lang="typescript">
-    import {
-        TransactionActivityStatusPill,
-        ActivityAsyncStatusPill,
-        KeyValueBox,
-        Pill,
-        Icon,
-        SubjectBox,
-    } from 'shared/components'
-    import { formatDate, localize } from '@core/i18n'
-    import { activeProfile } from '@core/profile'
-    import {
-        formatTokenAmountPrecise,
-        ActivityAsyncStatus,
-        ActivityType,
-        Subject,
-        InclusionState,
-        ActivityDirection,
-    } from '@core/wallet'
-    import { Icon as IconEnum } from '@lib/auxiliary/icon'
-    import { BASE_TOKEN } from '@core/network'
-    import { getOfficialExplorerUrl } from '@core/network/utils'
-    import { Platform, time } from '@core/app'
-    import { truncateString } from '@core/utils'
-    import { setClipboard } from '@core/utils'
-    import { IIrc27Metadata } from '@core/nfts'
-
-    export let nftId: string = ''
-    export let nftMetadata: IIrc27Metadata
-    export let metadata: string = null
-    export let tag: string = null
-    export let asyncStatus: ActivityAsyncStatus = null
-    export let claimedDate: Date = null
-    export let claimingTransactionId: string = null
-    export let direction: ActivityDirection = ActivityDirection.Incoming
-    export let expirationDate: Date = null
-    export let timelockDate: Date = null
-    export let inclusionState: InclusionState = InclusionState.Pending
-    export let storageDeposit = 0
-    export let giftedStorageDeposit = 0
-    export let subject: Subject = null
-    export let transactionTime: Date = null
-    export let isInternal: boolean = false
-    export let isClaiming: boolean = false
-    export let type: ActivityType
-
-    const explorerUrl = getOfficialExplorerUrl($activeProfile?.networkProtocol, $activeProfile?.networkType)
-
-    $: expirationTime = getDateFormat(expirationDate)
-    $: claimedTime = getDateFormat(claimedDate)
-    $: isTimelocked = timelockDate > $time
-    $: hasStorageDeposit = storageDeposit || (storageDeposit === 0 && giftedStorageDeposit === 0)
-
-    $: formattedTransactionTime = getDateFormat(transactionTime)
-    $: formattedTimelockDate = getDateFormat(timelockDate)
-    $: formattedStorageDeposit = formatTokenAmountPrecise(
-        storageDeposit ?? 0,
-        BASE_TOKEN[$activeProfile?.networkProtocol]
-    )
-    $: formattedGiftedStorageDeposit = formatTokenAmountPrecise(
-        giftedStorageDeposit ?? 0,
-        BASE_TOKEN[$activeProfile?.networkProtocol]
-    )
+    import { ActivityAsyncStatusPill, Icon, Pill, SubjectBox, TransactionActivityStatusPill } from 'shared/components'
 
-    let transactionDetailsList: { [key in string]: { data: string; isTooltipVisible?: boolean } }
-    $: transactionDetailsList = {
-        ...(transactionTime && {
-            transactionTime: { data: formattedTransactionTime },
-        }),
-        ...(nftId && { nftId: { data: nftId, copyable: true } }),
-        ...(tag && {
-            tag: { data: tag, isTooltipVisible: true },
-        }),
-        ...(metadata && {
-            metadata: { data: metadata, isTooltipVisible: true },
-        }),
-        ...(hasStorageDeposit && {
-            storageDeposit: { data: formattedStorageDeposit, isTooltipVisible: true },
-        }),
-        ...(giftedStorageDeposit && {
-            giftedStorageDeposit: { data: formattedGiftedStorageDeposit, isTooltipVisible: true },
-        }),
-        ...(expirationTime && {
-            expirationTime: { data: expirationTime, isTooltipVisible: true },
-        }),
-        ...(timelockDate && {
-            timelockDate: { data: formattedTimelockDate, isTooltipVisible: true },
-        }),
-        ...(claimedTime && { claimedTime: { data: claimedTime } }),
-    }
+    import { time } from '@core/app'
+    import { localize } from '@core/i18n'
+    import { Activity } from '@core/wallet'
 
-    let nftMetadataDetailsList: {
-        [key in keyof typeof nftMetadata]: { data: unknown; isTooltipVisible?: boolean; isCopyable?: boolean }
-    }
-    $: nftMetadataDetailsList = {
-        ...(nftMetadata?.standard && {
-            standard: { data: nftMetadata.standard, isTooltipVisible: true },
-        }),
-        ...(nftMetadata?.version && {
-            version: { data: nftMetadata.version },
-        }),
-        ...(nftMetadata?.name && {
-            name: { data: nftMetadata.name },
-        }),
-        ...(nftMetadata?.type && {
-            type: { data: nftMetadata.type as string, isTooltipVisible: true },
-        }),
-        ...(nftMetadata?.uri && {
-            uri: { data: nftMetadata.uri, isCopyable: true },
-        }),
-        ...(nftMetadata?.collectionId && {
-            collectionId: { data: nftMetadata.collectionId, isTooltipVisible: true },
-        }),
-        ...(nftMetadata?.collectionName && {
-            collectionName: { data: nftMetadata.collectionName },
-        }),
-        ...(nftMetadata?.royalties && {
-            royalties: { data: nftMetadata.royalties, isTooltipVisible: true },
-        }),
-        ...(nftMetadata?.issuerName && {
-            issuerName: { data: nftMetadata.issuerName, isTooltipVisible: true },
-        }),
-        ...(nftMetadata?.description && {
-            description: { data: nftMetadata.description },
-        }),
-        ...(nftMetadata?.attributes && {
-            attributes: { data: nftMetadata.attributes, isTooltipVisible: true },
-        }),
-    }
+    import { Icon as IconEnum } from '@lib/auxiliary/icon'
 
-    function handleTransactionIdClick(): void {
-        explorerUrl
-            ? Platform.openUrl(`${explorerUrl}/block/${claimingTransactionId}`)
-            : setClipboard(claimingTransactionId)
-    }
+    export let activity: Activity
 
-    function getDateFormat(date: Date): string {
-        try {
-            if (date) {
-                return formatDate(date, {
-                    dateStyle: 'long',
-                    timeStyle: 'medium',
-                })
-            } else {
-                return undefined
-            }
-        } catch (error) {
-            return undefined
-        }
-    }
+    $: isTimelocked = activity?.asyncData?.timelockDate > $time
 </script>
 
-<transaction-details class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0">
+<nft-transaction-details class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0">
     <div class="flex w-full items-center justify-center">
         <div class="rounded-full flex justify-center items-center transition-none p-2 w-16 h-16 bg-gray-500">
             <Icon
@@ -163,54 +25,25 @@
     </div>
     <main-content class="flex flex-auto w-full flex-col items-center justify-center space-y-3">
         <transaction-status class="flex flex-row w-full space-x-2 justify-center">
-            {#if inclusionState && direction}
-                <TransactionActivityStatusPill {type} {direction} {isInternal} {inclusionState} />
+            {#if activity?.inclusionState && activity?.direction}
+                <TransactionActivityStatusPill
+                    type={activity?.type}
+                    direction={activity?.direction}
+                    isInternal={activity?.isInternal}
+                    inclusionState={activity?.inclusionState}
+                />
             {/if}
-            {#if asyncStatus}
-                <ActivityAsyncStatusPill {asyncStatus} />
+            {#if activity?.asyncData?.asyncStatus}
+                <ActivityAsyncStatusPill asyncStatus={activity?.asyncData?.asyncStatus} />
             {/if}
             {#if isTimelocked}
                 <Pill backgroundColor="gray-200" darkBackgroundColor="gray-200">
                     {localize('pills.locked')}
                 </Pill>
             {/if}
         </transaction-status>
-        {#if subject}
-            <SubjectBox {subject} />
+        {#if activity?.subject}
+            <SubjectBox subject={activity?.subject} />
         {/if}
     </main-content>
-    {#if Object.entries(transactionDetailsList).length > 0}
-        <details-list class="flex flex-col space-y-2">
-            {#each Object.entries(transactionDetailsList) as [key, value]}
-                <KeyValueBox
-                    keyText={localize(`general.${key}`)}
-                    valueText={value.data}
-                    tooltipText={value.isTooltipVisible
-                        ? localize(`tooltips.transactionDetails.${direction}.${key}`)
-                        : undefined}
-                />
-            {/each}
-            {#each Object.entries(nftMetadataDetailsList) as [key, value]}
-                <KeyValueBox
-                    keyText={localize(`views.collectibles.metadata.${key}`)}
-                    valueText={value.data}
-                    tooltipText={value.isTooltipVisible
-                        ? localize(`tooltips.transactionDetails.nftMetadata.${key}`)
-                        : undefined}
-                    isCopyable={value.isCopyable}
-                />
-            {/each}
-            {#if claimingTransactionId}
-                <KeyValueBox keyText={localize(isClaiming ? 'general.claimingIn' : 'general.claimedIn')}>
-                    <button
-                        slot="value"
-                        class="action w-fit flex justify-start text-center font-medium text-14 text-blue-500"
-                        on:click={handleTransactionIdClick}
-                    >
-                        {truncateString(claimingTransactionId, 12, 12)}
-                    </button>
-                </KeyValueBox>
-            {/if}
-        </details-list>
-    {/if}
-</transaction-details>
+</nft-transaction-details>
diff --git a/packages/shared/components/molecules/activity-info/GenericActivityInformation.svelte b/packages/shared/components/molecules/activity-info/GenericActivityInformation.svelte
@@ -82,7 +82,7 @@
         keyText={localize(`general.${key}`)}
         valueText={value.data}
         tooltipText={value.isTooltipVisible
-            ? localize(`tooltips.transactionDetails.${activity.direction}.${key}`)
+            ? localize(`tooltips.transactionDetails.${activity?.direction}.${key}`)
             : undefined}
     />
 {/each}

diff --git a/packages/shared/components/molecules/activity-info/NftActivityInformation.svelte b/packages/shared/components/molecules/activity-info/NftActivityInformation.svelte
@@ -0,0 +1,22 @@
+<script lang="typescript">
+    import { KeyValueBox } from 'shared/components'
+
+    import { selectedAccountIndex } from '@core/account'
+    import { localize } from '@core/i18n'
+    import { getNftByIdFromAllAccountNfts } from '@core/nfts'
+    import { getBech32AddressFromAddressTypes, NftActivity } from '@core/wallet'
+
+    export let activity: NftActivity
+
+    $: storedNft = getNftByIdFromAllAccountNfts($selectedAccountIndex, activity?.nftId)
+
+    let detailsList: { [key in string]: string }
+    $: detailsList = {
+        nftId: activity?.nftId,
+        immutableIssuer: getBech32AddressFromAddressTypes(storedNft?.issuer),
+    }
+</script>
+
+{#each Object.entries(detailsList) as [key, value]}
+    <KeyValueBox keyText={localize(`general.${key}`)} valueText={value} isCopyable />
+{/each}
diff --git a/packages/shared/components/molecules/activity-info/index.js b/packages/shared/components/molecules/activity-info/index.js
@@ -1,2 +1,3 @@
 export { default as AliasActivityInformation } from './AliasActivityInformation'
 export { default as GenericActivityInformation } from './GenericActivityInformation'
+export { default as NftActivityInformation } from './NftActivityInformation'
diff --git a/packages/shared/components/popups/ActivityDetailsPopup.svelte b/packages/shared/components/popups/ActivityDetailsPopup.svelte
@@ -87,14 +87,6 @@
                 unit: asset?.metadata?.unit,
                 giftedStorageDeposit: activity.giftedStorageDeposit,
             }
-        } else if (activity.type === ActivityType.Nft) {
-            return {
-                ...details,
-                type: activity.type,
-                nftId: activity.nftId,
-                storageDeposit: activity.storageDeposit,
-                isInternal: activity.isInternal,
-            }
         }
     }
 
@@ -181,7 +173,10 @@
             <ActivityInformation {activity} />
         </alias-details>
     {:else if activity?.type === ActivityType.Nft}
-        <NftActivityDetails {...details} />
+        <nft-details class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0">
+            <NftActivityDetails {activity} />
+            <ActivityInformation {activity} />
+        </nft-details>
     {/if}
 
     {#if !isTimelocked && isActivityIncomingAndUnclaimed}

diff --git a/packages/shared/components/popups/MintNftConfirmationPopup.svelte b/packages/shared/components/popups/MintNftConfirmationPopup.svelte
@@ -1,9 +1,9 @@
 <script lang="typescript">
     import { onMount } from 'svelte'
-    import { Button, Text, FontWeight, NftActivityDetails } from 'shared/components'
+    import { Button, Text, FontWeight, NftActivityDetails, ActivityInformation } from 'shared/components'
     import { localize } from '@core/i18n'
     import { selectedAccount } from '@core/account'
-    import { mintNft, mintNftDetails } from '@core/wallet'
+    import { ActivityDirection, mintNft, mintNftDetails } from '@core/wallet'
     import { checkActiveProfileAuth } from '@core/profile'
     import { handleError } from '@core/error/handlers/handleError'
     import { closePopup, openPopup } from '@auxiliary/popup'
@@ -66,7 +66,12 @@
         {localize('popups.mintNftForm.title')}
     </Text>
     <div class="space-y-2 max-h-100 scrollable-y flex-1">
-        <NftActivityDetails nftMetadata={$mintNftDetails} />
+        <nft-details>
+            <NftActivityDetails />
+            <ActivityInformation
+                activity={{ metadata: JSON.stringify($mintNftDetails), direction: ActivityDirection.Outgoing }}
+            />
+        </nft-details>
     </div>
     <div class="flex flex-row flex-nowrap w-full space-x-4">
         <Button outline classes="w-full" disabled={isTransferring} onClick={handleBack}>