diff --git a/packages/desktop/views/dashboard/collectibles/Collectibles.svelte b/packages/desktop/views/dashboard/collectibles/Collectibles.svelte index a51bd4a85ab..6b8f811f3e6 100644 --- a/packages/desktop/views/dashboard/collectibles/Collectibles.svelte +++ b/packages/desktop/views/dashboard/collectibles/Collectibles.svelte @@ -4,12 +4,10 @@
-
- {#if $collectiblesRoute === CollectiblesRoute.Gallery} - - {/if} - {#if $collectiblesRoute === CollectiblesRoute.Details} - - {/if} -
+ {#if $collectiblesRoute === CollectiblesRoute.Gallery} + + {/if} + {#if $collectiblesRoute === CollectiblesRoute.Details} + + {/if}
diff --git a/packages/desktop/views/dashboard/collectibles/views/DetailsView.svelte b/packages/desktop/views/dashboard/collectibles/views/DetailsView.svelte index fe2972c4225..b559819388b 100644 --- a/packages/desktop/views/dashboard/collectibles/views/DetailsView.svelte +++ b/packages/desktop/views/dashboard/collectibles/views/DetailsView.svelte @@ -25,7 +25,7 @@ const storageDeposit = 0 // TODO: get storage deposit from corresponding activity -
+
diff --git a/packages/desktop/views/dashboard/collectibles/views/GalleryView.svelte b/packages/desktop/views/dashboard/collectibles/views/GalleryView.svelte index 940f3bd8a59..3227b9193f2 100644 --- a/packages/desktop/views/dashboard/collectibles/views/GalleryView.svelte +++ b/packages/desktop/views/dashboard/collectibles/views/GalleryView.svelte @@ -1,5 +1,5 @@ -
- {localize('views.collectibles.gallery.title')} - • {$selectedAccountNfts.length} -
+
+
+ {localize('views.collectibles.gallery.title')} + • {$selectedAccountNfts.length} +
-
- {#each $selectedAccountNfts as nft} - handleNftClick(nft)} /> - {/each} +
+ {#if $selectedAccountNfts.length} +
+ {#each $selectedAccountNfts as nft} + handleNftClick(nft)} /> + {/each} +
+ {:else} +
+ +
+ {localize('views.collectibles.gallery.emptyTitle')} + {localize('views.collectibles.gallery.emptyDescription')} +
+ +
+ {/if} +
diff --git a/packages/shared/assets/illustrations/wallet/empty-collectibles.svg b/packages/shared/assets/illustrations/wallet/empty-collectibles.svg new file mode 100644 index 00000000000..b90d79ec9a3 --- /dev/null +++ b/packages/shared/assets/illustrations/wallet/empty-collectibles.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/shared/components/Illustration.svelte b/packages/shared/components/Illustration.svelte index 34385bf4d84..831d52446e1 100644 --- a/packages/shared/components/Illustration.svelte +++ b/packages/shared/components/Illustration.svelte @@ -75,6 +75,11 @@ lightmode: 'staking/staking-notification.svg', darkmode: 'staking/staking-notification.svg', }, + // Wallet + 'empty-collectibles': { + lightmode: 'wallet/empty-collectibles.svg', + darkmode: 'wallet/empty-collectibles.svg', + }, } diff --git a/packages/shared/components/atoms/buttons/ReceiveButton.svelte b/packages/shared/components/atoms/buttons/ReceiveButton.svelte index 23ce3eca879..a28dfccafce 100644 --- a/packages/shared/components/atoms/buttons/ReceiveButton.svelte +++ b/packages/shared/components/atoms/buttons/ReceiveButton.svelte @@ -2,6 +2,8 @@ import { localize } from '@core/i18n' import { openPopup } from '@auxiliary/popup' + export let text: string = localize('actions.receive') + function handleReceiveClick(): void { openPopup({ type: 'receiveAddress', @@ -10,8 +12,8 @@ diff --git a/packages/shared/components/inputs/AssetAmountSliderInput.svelte b/packages/shared/components/inputs/AssetAmountSliderInput.svelte new file mode 100644 index 00000000000..aa91583587d --- /dev/null +++ b/packages/shared/components/inputs/AssetAmountSliderInput.svelte @@ -0,0 +1,119 @@ + + + (isFocused = false)} +> +
+
+ +
+ + {asset?.metadata?.name ?? asset?.id} + +
+
+ + +
+
+ +
+ {formatTokenAmountBestMatch(0, asset?.metadata)} + {formatTokenAmountBestMatch(asset?.balance?.available, asset?.metadata)} +
+
+ diff --git a/packages/shared/components/inputs/SliderInput.svelte b/packages/shared/components/inputs/SliderInput.svelte new file mode 100644 index 00000000000..65e785868d6 --- /dev/null +++ b/packages/shared/components/inputs/SliderInput.svelte @@ -0,0 +1,227 @@ + + + +
+
+
+
+
(thumbHover = true)} + on:focus={() => (thumbHover = true)} + on:mouseout={() => (thumbHover = false)} + on:blur={() => (thumbHover = false)} + /> +
+
+
+ + + + + + diff --git a/packages/shared/components/inputs/index.js b/packages/shared/components/inputs/index.js index 4631feb4577..3e4e57b036f 100644 --- a/packages/shared/components/inputs/index.js +++ b/packages/shared/components/inputs/index.js @@ -2,6 +2,7 @@ export { default as AccountInput } from './AccountInput.svelte' export { default as AliasInput } from './AliasInput.svelte' export { default as AmountInput } from './AmountInput.svelte' export { default as AssetAmountInput } from './AssetAmountInput.svelte' +export { default as AssetAmountSliderInput } from './AssetAmountSliderInput.svelte' export { default as AssetDropdown } from './AssetDropdown.svelte' export { default as Checkbox } from './Checkbox.svelte' export { default as ClosableInput } from './ClosableInput.svelte' @@ -21,6 +22,7 @@ export { default as PasswordInput } from './PasswordInput.svelte' export { default as PinInput } from './PinInput.svelte' export { default as Radio } from './Radio.svelte' export { default as RecipientInput } from './RecipientInput.svelte' +export { default as SliderInput } from './SliderInput.svelte' export { default as TextInput } from './TextInput.svelte' export { default as TogglableButton } from './TogglableButton.svelte' export { default as Toggle } from './Toggle.svelte' diff --git a/packages/shared/components/modals/AssetActionsMenu.svelte b/packages/shared/components/modals/AssetActionsMenu.svelte index 7c8d1ec66bd..76e716e0c74 100644 --- a/packages/shared/components/modals/AssetActionsMenu.svelte +++ b/packages/shared/components/modals/AssetActionsMenu.svelte @@ -9,12 +9,10 @@ hideActivitiesForHiddenAssets, NotVerifiedStatus, VerifiedStatus, - burnAsset, } from '@core/wallet' import { Icon } from '@lib/auxiliary/icon' - import { closePopup, openPopup, updatePopupProps } from '@auxiliary/popup' + import { openPopup, updatePopupProps } from '@auxiliary/popup' import { MenuItem, Modal } from 'shared/components' - import { checkActiveProfileAuth } from '@core/profile' import features from '@features/features' export let modal: Modal = undefined @@ -56,26 +54,7 @@ function handleBurnToken(): void { modal.close() - openPopup({ - type: 'confirmation', - props: { - title: localize('actions.confirmTokenBurn.title', { - values: { - assetName: asset.metadata.name, - }, - }), - description: localize('actions.confirmTokenBurn.description'), - hint: localize('actions.confirmTokenBurn.hint'), - warning: true, - confirmText: localize('actions.burnToken'), - onConfirm: () => { - checkActiveProfileAuth(async () => { - await burnAsset(asset.id) - closePopup() - }) - }, - }, - }) + openPopup({ type: 'burnNativeTokens', props: { asset } }) } diff --git a/packages/shared/components/popups/BurnNativeTokensPopup.svelte b/packages/shared/components/popups/BurnNativeTokensPopup.svelte new file mode 100644 index 00000000000..baf43fc677e --- /dev/null +++ b/packages/shared/components/popups/BurnNativeTokensPopup.svelte @@ -0,0 +1,52 @@ + + +
+ + {localize('actions.confirmTokenBurn.title', { + values: { + assetName: asset.metadata.name, + }, + })} + +
+ + +
+ + + + +
diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte index b790c9053bb..f9ca1612b9d 100644 --- a/packages/shared/components/popups/Index.svelte +++ b/packages/shared/components/popups/Index.svelte @@ -12,6 +12,7 @@ import ActivityDetailsPopup from './ActivityDetailsPopup.svelte' import AddNodePopup from './AddNodePopup.svelte' import BackupStrongholdPopup from './BackupStrongholdPopup.svelte' + import BurnNativeTokensPopup from './BurnNativeTokensPopup.svelte' import ConfirmationPopup from './ConfirmationPopup.svelte' import ConnectLedgerPopup from './ConnectLedgerPopup.svelte' import CreateAccountPopup from './CreateAccountPopup.svelte' @@ -87,6 +88,7 @@ unlockStronghold: UnlockStrongholdPopup, version: Version, backupStronghold: BackupStrongholdPopup, + burnNativeTokens: BurnNativeTokensPopup, confirmation: ConfirmationPopup, deepLinkError: DeepLinkErrorPopup, deleteAccount: DeleteAccount, diff --git a/packages/shared/components/popups/ReceiveAddressPopup.svelte b/packages/shared/components/popups/ReceiveAddressPopup.svelte index 4ca3d3f86d5..854c2e26078 100644 --- a/packages/shared/components/popups/ReceiveAddressPopup.svelte +++ b/packages/shared/components/popups/ReceiveAddressPopup.svelte @@ -9,8 +9,8 @@ {localize('general.receiveFunds')} -
+
- +
diff --git a/packages/shared/lib/core/wallet/actions/burnAsset.ts b/packages/shared/lib/core/wallet/actions/burnAsset.ts index 11224821053..5dfbf1a650a 100644 --- a/packages/shared/lib/core/wallet/actions/burnAsset.ts +++ b/packages/shared/lib/core/wallet/actions/burnAsset.ts @@ -3,17 +3,12 @@ import { handleError } from '@core/error/handlers/handleError' import { handleLedgerError } from '@core/ledger' import { activeProfile, ProfileType } from '@core/profile' import { get } from 'svelte/store' -import { selectedAccountAssets } from '../stores' -export async function burnAsset(assetId: string): Promise { +export async function burnAsset(assetId: string, rawAmount: string): Promise { const account = get(selectedAccount) const _activeProfile = get(activeProfile) - const nativeTokens = get(selectedAccountAssets).nativeTokens try { - const balance = nativeTokens.find((_asset) => _asset.id === assetId)?.balance.available - if (balance) { - await account.burnNativeToken(assetId, '0x' + balance.toString(16)) - } + await account.burnNativeToken(assetId, '0x' + Number(rawAmount).toString(16)) } catch (err) { if (_activeProfile.type === ProfileType.Ledger) { handleLedgerError(err.error) diff --git a/packages/shared/lib/core/wallet/utils/convertToRawAmount.ts b/packages/shared/lib/core/wallet/utils/convertToRawAmount.ts index ff2ef48d0d7..3d1fe7fde9e 100644 --- a/packages/shared/lib/core/wallet/utils/convertToRawAmount.ts +++ b/packages/shared/lib/core/wallet/utils/convertToRawAmount.ts @@ -6,7 +6,7 @@ import { IOTA_UNIT_MAP } from '@core/utils' import { ITokenMetadata } from '../interfaces' import { MAX_SUPPORTED_DECIMALS } from '../constants/max-supported-decimals.constants' -export function convertToRawAmount(amount: string, unit: string, tokenMetadata?: ITokenMetadata): Big { +export function convertToRawAmount(amount: string, unit: string, tokenMetadata: ITokenMetadata): Big { if (amount) { const parsedAmount = parseCurrency(amount) return convertToRawAmountFromMetadata(parsedAmount, unit, tokenMetadata) diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json index 91fe04b0a33..2a964589a67 100644 --- a/packages/shared/locales/en.json +++ b/packages/shared/locales/en.json @@ -548,7 +548,9 @@ }, "collectibles": { "gallery": { - "title": "Collectibles" + "title": "Collectibles", + "emptyTitle": "No collectibles", + "emptyDescription": "Deposit or Receive your first collectible now!" }, "details": { "collection": "Collection", @@ -998,7 +1000,6 @@ }, "confirmTokenBurn": { "title": "Burn {assetName}", - "description": "Are you sure you want burn this token?", "hint": "Please note that burning a token may free storage deposit attached to it and is not reversible" }, "proceedAnyway": "Proceed anyway", @@ -1140,7 +1141,8 @@ "initialize": "Initialize", "initializing": "Initializing", "delete": "Delete", - "addReference": "Add reference" + "addReference": "Add reference", + "depositNft": "Deposit NFTs" }, "general": { "recipient": "Recipient",