Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "feat: Drops requiring funds to enable auto-teleport" #8620

Merged
merged 1 commit into from
Dec 16, 2023
Merged

Revert "feat: Drops requiring funds to enable auto-teleport" #8620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 82 additions & 85 deletions components/collection/drop/AddFundsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,114 +8,117 @@
<ModalBody
:title="$t('mint.unlockable.addFundsModal.title')"
:scrollable="false"
:loading="loading"
@close="onClose">
<ModalIdentityItem class="mb-5" />

<div
class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3 mb-6">
<IdentityItem
:label="$t('confirmPurchase.connectedWith')"
hide-identity-popover
disable-identity-link
:prefix="urlPrefix"
:account="accountId"
class="identity-name-font-weight-regular"
data-testid="item-creator" />
</div>
<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.textP1', [
formattedMinimumFunds,
chain,
`${minimumFunds} ${token}`,
])
"
class="mb-4" />
<template v-if="!canAutoTeleport">
<p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
<NeoTooltip multiline multiline-width="256px" content-class="p-4">
<div
class="is-flex is-justify-items-space-between is-align-items-center has-text-grey add-funds-note">
<NeoIcon icon="circle-info" class="mr-3" />
<p class="is-size-7">
{{ $t('mint.unlockable.addFundsModal.howToAddFunds') }}
</p>
</div>
<template #content>
<h3 class="tooltip__title">
{{ $t('mint.unlockable.addFundsModal.tooltip.title', [token]) }}
</h3>
<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.tooltip.onramp', [token])
"
class="tooltip__text mb-2" />
<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.tooltip.exchange')
"
class="tooltip__text mb-2"></p>

<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.tooltip.transfer', [token])
"
class="tooltip__text mb-6" />
<p class="tooltip__note has-text-grey">
{{ $t('mint.unlockable.addFundsModal.tooltip.note') }}
</p>
</template>
</NeoTooltip>
</template>

<p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
<NeoTooltip multiline multiline-width="256px" content-class="p-4">
<div
class="is-flex is-justify-items-space-between is-align-items-center has-text-grey add-funds-note">
<NeoIcon icon="circle-info" class="mr-3" />
<p class="is-size-7">
{{ $t('mint.unlockable.addFundsModal.howToAddFunds') }}
</p>
</div>
<template #content>
<h3 class="tooltip__title">
{{ $t('mint.unlockable.addFundsModal.tooltip.title', [token]) }}
</h3>
<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.tooltip.onramp', [token])
"
class="tooltip__text mb-2" />
<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.tooltip.exchange')
"
class="tooltip__text mb-2"></p>
<p
v-dompurify-html="
$t('mint.unlockable.addFundsModal.tooltip.transfer', [token])
"
class="tooltip__text mb-6" />
<p class="tooltip__note has-text-grey">
{{ $t('mint.unlockable.addFundsModal.tooltip.note') }}
</p>
</template>
</NeoTooltip>
<div class="is-flex">
<AutoTeleportActionButton
ref="autoteleport"
:amount="minimumFunds"
:hide-top="!canAutoTeleport"
:interaction="interaction"
@modal:close="handleModalClose" />
<NeoButton
class="is-flex-1 h-14 is-capitalized shine"
no-shadow
variant="k-accent"
@click="onShowRamp">
{{ $t('autoTeleport.addFundsViaOnramp') }}
</NeoButton>
</div>
</ModalBody>
</NeoModal>
<OnRampModal v-model="onRampActive" @close="onRampActive = false" />
</template>

<script setup lang="ts">
import { NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
import { NeoButton, NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
import ModalBody from '@/components/shared/modals/ModalBody.vue'
import AutoTeleportActionButton from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
import OnRampModal from '@/components/shared/OnRampModal.vue'

const emit = defineEmits(['confirm', 'update:modelValue'])
const props = withDefaults(
defineProps<{
modelValue: boolean
minimumFunds: number
formattedMinimumFunds: string
token: string
chain: string
free: boolean
}>(),
{
free: false,
},
)

const autoteleport = ref()
const interaction = computed(() => {
//tmp solution till drop type check is fixed
return props.free
? ActionlessInteraction.FREE_DROP
: ActionlessInteraction.DROP
type Props = {
modelValue: boolean
minimumFunds: number
token: string
}

withDefaults(defineProps<Props>(), {
modelValue: false,
})

const canAutoTeleport = computed(() => autoteleport.value?.canAutoTeleport)
const loading = computed(() => !autoteleport.value?.hasBalances)
const { urlPrefix } = usePrefix()
const { accountId } = useAuth()

const onRampActive = ref(false)

const emit = defineEmits(['confirm', 'update:modelValue'])

const onClose = () => {
emit('update:modelValue', false)
}

const handleModalClose = (completed: boolean) => {
if (completed) {
emit('confirm')
}
const onShowRamp = () => {
onRampActive.value = true
onClose()
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/abstracts/variables';

.shade-border-color {
@include ktheme() {
border-color: theme('k-shade');
}
}

.rounded {
border-radius: 10rem;
}

.add-funds-note {
cursor: default;
margin-bottom: 16px;
Expand Down Expand Up @@ -152,10 +155,4 @@ const handleModalClose = (completed: boolean) => {
height: initial;
}
}

@include mobile() {
.modal-width {
width: unset;
}
}
</style>
99 changes: 53 additions & 46 deletions components/collection/drop/Generative.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
<NeoIcon icon="circle-info" class="mr-3" />
<div
v-dompurify-html="
$t('mint.unlockable.freeMinimumFundsDescription', [
formattedMinimumFunds,
$t('mint.unlockable.minimumFundsDescription', [
`${minimumFunds} ${token}`,
chainName,
])
"
Expand Down Expand Up @@ -115,12 +115,8 @@
<CollectionDropAddFundsModal
v-model="isAddFundModalActive"
:minimum-funds="minimumFunds"
:formatted-minimum-funds="formattedMinimumFunds"
:token="token"
:chain="chainName"
free
@close="closeAddFundModal"
@confirm="handleDropAddModalConfirm" />
@close="isAddFundModalActive = false" />

<ListingCartModal />
</template>
Expand All @@ -135,12 +131,18 @@ import { createUnlockableMetadata } from '../unlockable/utils'
import GenerativePreview from '@/components/collection/drop/GenerativePreview.vue'
import { DropItem } from '@/params/types'
import { DoResult, doWaifu } from '@/services/waifu'
import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
import { useDropStatus } from '@/components/drops/useDrops'
import { makeScreenshot } from '@/services/capture'
import { pinFileToIPFS } from '@/services/nftStorage'
import { sanitizeIpfsUrl } from '@/utils/ipfs'
import newsletterApi from '@/utils/newsletter'
import { formatBsxBalanceToNumber } from '@/utils/format/balance'
import { prefixToToken } from '@/components/common/shoppingCart/utils'
import { useIdentityStore } from '@/stores/identity'
import {
DOT_EXISTENTIAL_DEPOSIT,
KSM_EXISTENTIAL_DEPOSIT,
} from '@/components/collection/unlockable/const'
import DropConfirmModal from './modal/DropConfirmModal.vue'
import ListingCartModal from '@/components/common/listingCart/ListingCartModal.vue'
import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
Expand All @@ -149,12 +151,6 @@ import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
const NuxtLink = resolveComponent('NuxtLink')
const MINTING_SECOND = 120

export type DropMintedNft = DoResult & {
id: string
collectionName: string
name: string
}

const props = defineProps({
drop: {
type: Object,
Expand All @@ -164,39 +160,55 @@ const props = defineProps({
},
})

useMultipleBalance(true)

const minimumFunds = computed<number>(
() => (props.drop.meta && formatBsxBalanceToNumber(props.drop.meta)) || 0,
)
const store = useIdentityStore()

const isWalletConnecting = ref(false)
const collectionId = computed(() => props.drop?.collection)
const disabledByBackend = computed(() => props.drop?.disabled)
const defaultImage = computed(() => props.drop?.image)
const defaultName = computed(() => props.drop?.name)
const defaultMax = computed(() => props.drop?.max || 255)
const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
useDropStatus(props.drop.alias)
const instance = getCurrentInstance()
const listingCartStore = useListingCartStore()
const preferencesStore = usePreferencesStore()

const { doAfterLogin } = useDoAfterlogin(instance)
const { $i18n } = useNuxtApp()
const root = ref()

const { toast } = useToast()
const { accountId, isLogIn } = useAuth()
const { urlPrefix } = usePrefix()
const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
useDropStatus(props.drop.alias)
const { doAfterLogin } = useDoAfterlogin(instance)
const { fetchMultipleBalance } = useMultipleBalance()
const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
useDropMinimumFunds(props.drop)

const isWalletConnecting = ref(false)
const root = ref()
const { urlPrefix } = usePrefix()
const selectedImage = ref<string>('')
const isLoading = ref(false)
const isImageFetching = ref(false)
const isConfirmModalActive = ref(false)
const isAddFundModalActive = ref(false)
const mintedNft = ref<DropMintedNft>()
const mintedNftWithMetadata = ref<NFTWithMetadata>()

const collectionId = computed(() => props.drop?.collection)
const disabledByBackend = computed(() => props.drop?.disabled)
const defaultImage = computed(() => props.drop?.image)
const defaultName = computed(() => props.drop?.name)
const defaultMax = computed(() => props.drop?.max || 255)
const chainName = computed(() => getChainName(props.drop.chain))
const token = computed(() => prefixToToken[props.drop.chain])

export type DropMintedNft = DoResult & {
id: string
collectionName: string
name: string
}

const mintedNft = ref<DropMintedNft>()
const mintedNftWithMetadata = ref<NFTWithMetadata>()

const handleSelectImage = (image: string) => {
selectedImage.value = image
}

const { data: collectionData } = useGraphql({
queryName: 'unlockableCollectionById',
variables: {
Expand Down Expand Up @@ -244,10 +256,6 @@ const collectionName = computed(
() => collectionData.value?.collectionEntity?.name,
)

const handleSelectImage = (image: string) => {
selectedImage.value = image
}

const tryCapture = async () => {
try {
const imgFile = await makeScreenshot(sanitizeIpfsUrl(selectedImage.value))
Expand All @@ -273,12 +281,21 @@ const handleSubmitMint = async () => {

return
}

if (isLoading.value || isImageFetching.value) {
return false
}

if (hasMinimumFunds.value) {
const dropChainBalance = Number(store.getAuthBalanceByChain(props.drop.chain))
const relayChainBalance = Number(
store.getAuthBalanceByRelayChain(props.drop.chain),
)
const existentialDeposit =
token.value === 'KSM' ? KSM_EXISTENTIAL_DEPOSIT : DOT_EXISTENTIAL_DEPOSIT

if (
dropChainBalance >= minimumFunds.value ||
relayChainBalance >= existentialDeposit + minimumFunds.value
) {
openConfirmModal()
} else {
openAddFundModal()
Expand All @@ -297,10 +314,6 @@ const openAddFundModal = () => {
isAddFundModalActive.value = true
}

const closeAddFundModal = () => {
isAddFundModalActive.value = false
}

const subscribe = async (email: string) => {
try {
await newsletterApi.subscribe(email)
Expand Down Expand Up @@ -405,12 +418,6 @@ const clear = () => {
listingCartStore.removeItem(mintedNftWithMetadata.value?.id)
}

const handleDropAddModalConfirm = () => {
closeAddFundModal()
openConfirmModal()
fetchMultipleBalance([urlPrefix.value])
}

onBeforeUnmount(clear)
</script>

Expand Down
Loading