Skip to content

Commit

Permalink
Merge pull request #7711 from hassnian/issue-7643
Browse files Browse the repository at this point in the history
  • Loading branch information
yangwao authored Nov 9, 2023
2 parents ad93267 + bf629cf commit 73767db
Show file tree
Hide file tree
Showing 44 changed files with 2,831 additions and 513 deletions.
8 changes: 8 additions & 0 deletions assets/styles/abstracts/_animations.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,14 @@
opacity: 0;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@keyframes cardHoverIn {
0% {
Expand Down
23 changes: 22 additions & 1 deletion assets/styles/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ a.has-text-grey {

.has-text-k-green {
@include ktheme() {
color: theme('k-green');
color: theme('k-green') !important;
}
}
.has-text-k-red {
Expand Down Expand Up @@ -466,6 +466,14 @@ a.has-text-grey {
.is-cursor-pointer {
cursor: pointer !important;
}


.has-text-k-accent {
@include ktheme() {
color: theme('k-accent') !important;
}
}

//hover

.is-hoverable-item {
Expand Down Expand Up @@ -538,3 +546,16 @@ a.has-text-grey {
.w-half {
width: 50%;
}

.has-accent-blur {
position: relative;
.blur {
position: absolute !important;
top: 0;
left: 0;
}
}

.is-size-3-5 {
font-size: 1.6rem;
}
2 changes: 1 addition & 1 deletion components/balance/MultipleBalances.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ import { ChainToken, useIdentityStore } from '@/stores/identity'
const identityStore = useIdentityStore()
const { multiBalances } = useMultipleBalance()
const { multiBalances } = useMultipleBalance(true)
const isBalanceLoading = computed(
() => identityStore.getStatusMultiBalances === 'loading',
Expand Down
127 changes: 87 additions & 40 deletions components/buy/Buy.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<template>
<div>
<ConfirmPurchaseModal @confirm="onConfirm" />
<Loader v-model="isLoading" :status="status" />
<Loader v-if="!usingAutoTeleport" v-model="isLoading" :status="status" />
<ConfirmPurchaseModal
:action="autoteleportAction"
@close="handleClose"
@confirm="handleConfirm"
@completed="handleActionCompleted" />
</div>
</template>

Expand All @@ -10,83 +14,126 @@ import { useShoppingCartStore } from '@/stores/shoppingCart'
import { usePreferencesStore } from '@/stores/preferences'
import { useFiatStore } from '@/stores/fiat'
import { warningMessage } from '@/utils/notification'
import ConfirmPurchaseModal from '@/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue'
import Loader from '@/components/shared/Loader.vue'
import { TokenToBuy } from '@/composables/transaction/types'
import ConfirmPurchaseModal from '@/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue'
import { Actions, TokenToBuy } from '@/composables/transaction/types'
import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
import { AutoTeleportActionButtonConfirmEvent } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
import { warningMessage } from '@/utils/notification'
import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
const { transaction, status, isLoading, isError, blockNumber } =
useTransaction()
const { urlPrefix } = usePrefix()
const shoppingCartStore = useShoppingCartStore()
const preferencesStore = usePreferencesStore()
const fiatStore = useFiatStore()
const usingAutoTeleport = ref(false)
const buyAction = ref<Actions>(emptyObject<Actions>())
const autoteleportAction = computed<AutoTeleportAction>(() => ({
action: buyAction.value,
transaction: transaction,
details: {
status: status.value,
isLoading: isLoading.value,
isError: isError.value,
blockNumber: blockNumber.value,
},
}))
const items = computed(() =>
shoppingCartStore.getItemsByPrefix(urlPrefix.value),
)
onMounted(async () => {
if (
fiatStore.getCurrentKSMValue === null ||
fiatStore.getCurrentDOTValue === null ||
fiatStore.getCurrentBSXValue === null
) {
if (fiatStore.incompleteFiatValues) {
fiatStore.fetchFiatPrice()
}
})
const { transaction, status, isLoading } = useTransaction()
const { $i18n } = useNuxtApp()
const isShoppingCartMode = computed(
() => preferencesStore.getCompletePurchaseModal.mode === 'shopping-cart',
)
const ShoppingCartItemToTokenToBuy = (item: ShoppingCartItem): TokenToBuy => {
return {
currentOwner: item.currentOwner,
price: item.price,
id: item.id,
royalty: item.royalty,
currentOwner: item?.currentOwner,
price: item?.price,
id: item?.id,
royalty: item?.royalty,
}
}
watchEffect(() => {
if (
isLoading.value === false &&
status.value === TransactionStatus.Finalized
) {
preferencesStore.setTriggerBuySuccess(true)
shoppingCartStore.clear()
const handleClose = () => {
usingAutoTeleport.value = false
}
const handleActionCompleted = () => {
preferencesStore.setTriggerBuySuccess(true)
shoppingCartStore.clear()
handleClose()
}
const handleConfirm = async ({
autoteleport,
}: AutoTeleportActionButtonConfirmEvent) => {
usingAutoTeleport.value = autoteleport
if (!isShoppingCartMode.value) {
shoppingCartStore.removeItemToBuy()
}
})
const onConfirm = () => {
if (preferencesStore.getCompletePurchaseModal.mode === 'shopping-cart') {
handleBuy(
if (!autoteleport) {
await handleBuy()
}
}
const getCartModeBasedBuyAction = () => {
if (isShoppingCartMode.value) {
return getBuyAction(
items.value.map(ShoppingCartItemToTokenToBuy),
items.value.map((item) => item.name),
)
} else {
const item = shoppingCartStore.getItemToBuy as ShoppingCartItem
handleBuy(ShoppingCartItemToTokenToBuy(item), [item.name || ''])
shoppingCartStore.removeItemToBuy()
return getBuyAction(ShoppingCartItemToTokenToBuy(item), [item?.name || ''])
}
}
const handleBuy = async (
const getBuyAction = (
nfts: TokenToBuy | TokenToBuy[],
nftNames: string[],
) => {
): Actions => {
return {
interaction: ShoppingActions.BUY,
nfts,
urlPrefix: urlPrefix.value,
successMessage: {
message: $i18n.t('mint.successPurchasedNfts', [nftNames.join(', ')]),
large: true,
},
errorMessage: $i18n.t('transaction.buy.error'),
}
}
const handleBuy = async () => {
try {
await transaction({
interaction: ShoppingActions.BUY,
nfts,
urlPrefix: urlPrefix.value,
successMessage: {
message: $i18n.t('mint.successPurchasedNfts', [nftNames.join(', ')]),
large: true,
},
errorMessage: $i18n.t('transaction.buy.error'),
})
await transaction(buyAction.value)
} catch (error) {
warningMessage(error)
}
}
watch(
() => preferencesStore.completePurchaseModal.isOpen,
(isOpen, prevIsOpen) => {
if (isOpen && !prevIsOpen) {
buyAction.value = getCartModeBasedBuyAction()
}
},
{ immediate: true },
)
</script>
Loading

0 comments on commit 73767db

Please sign in to comment.