FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Rename Subscription type to SubscriptionConfig

Browse source
This commit is contained in:
silverpill 2022-08-07 23:50:13 +00:00
parent acf5116093
commit 7002eea107
3 changed files with 56 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/api/subscriptions.ts
View file

@ -92,7 +92,7 @@ export async function onSubscriptionsEnabled(
} }
} }
export class Subscription { export class SubscriptionConfig {
recipientAddress: string; recipientAddress: string;
tokenAddress: string; tokenAddress: string;
@ -135,11 +135,11 @@ export class Subscription {
} }
export async function getSubscriptionInfo( export async function getSubscriptionConfig(
contractAddress: string, contractAddress: string,
signer: Signer, signer: Signer,
recipientAddress: string, recipientAddress: string,
): Promise<Subscription | null> { ): Promise<SubscriptionConfig | null> {
const adapter = await getContract(Contracts.SubscriptionAdapter, contractAddress, signer) const adapter = await getContract(Contracts.SubscriptionAdapter, contractAddress, signer)
const result = await adapter.isSubscriptionConfigured(recipientAddress) const result = await adapter.isSubscriptionConfigured(recipientAddress)
if (result === true) { if (result === true) {
@ -148,7 +148,7 @@ export async function getSubscriptionInfo(
const tokenSymbol = await token.symbol() const tokenSymbol = await token.symbol()
const tokenDecimals = await token.decimals() const tokenDecimals = await token.decimals()
const price = await adapter.getSubscriptionPrice(recipientAddress) const price = await adapter.getSubscriptionPrice(recipientAddress)
return new Subscription( return new SubscriptionConfig(
recipientAddress, recipientAddress,
tokenAddress, tokenAddress,
tokenSymbol, tokenSymbol,

66
src/components/Subscription.vue
View file

@ -27,9 +27,9 @@
{{ walletError }} {{ walletError }}
</div> </div>
<div class="info" v-if="subscriptionsEnabled !== null"> <div class="info" v-if="subscriptionsEnabled !== null">
<template v-if="subscription"> <template v-if="subscriptionConfig">
<div class="price"> <div class="price">
{{ subscription.pricePerMonth }} {{ subscription.tokenSymbol }} {{ subscriptionConfig.pricePerMonth }} {{ subscriptionConfig.tokenSymbol }}
<span class="price-subtext">per month</span> <span class="price-subtext">per month</span>
</div> </div>
<div class="status" v-if="subscriptionState"> <div class="status" v-if="subscriptionState">
@ -37,8 +37,15 @@
You are not subscribed yet You are not subscribed yet
</template> </template>
<template v-else> <template v-else>
<div>Your balance is {{ subscription.formatAmount(subscriptionState.senderBalance) }} {{ subscription.tokenSymbol }}</div> <div>
<div>Subscription expires {{ subscription.getExpirationDate(subscriptionState.senderBalance).toLocaleString() }}</div> Your balance is
{{ subscriptionConfig.formatAmount(subscriptionState.senderBalance) }}
{{ subscriptionConfig.tokenSymbol }}
</div>
<div>
Subscription expires
{{ subscriptionConfig.getExpirationDate(subscriptionState.senderBalance).toLocaleString() }}
</div>
</template> </template>
</div> </div>
</template> </template>
@ -55,7 +62,7 @@
<div> <div>
<div class="payment-amount"> <div class="payment-amount">
<label>Amount</label> <label>Amount</label>
<div>{{ getPaymentAmount() }} {{ subscription.tokenSymbol }}</div> <div>{{ getPaymentAmount() }} {{ subscriptionConfig.tokenSymbol }}</div>
</div> </div>
<div <div
v-if="tokenBalance !== null" v-if="tokenBalance !== null"
@ -64,9 +71,9 @@
> >
<label>You have</label> <label>You have</label>
<output :class="{ loading: isTokenBalanceLoading }"> <output :class="{ loading: isTokenBalanceLoading }">
{{ subscription.formatAmount(tokenBalance) }} {{ subscriptionConfig.formatAmount(tokenBalance) }}
</output> </output>
<span>{{ subscription.tokenSymbol }}</span> <span>{{ subscriptionConfig.tokenSymbol }}</span>
<button @click.prevent="refreshTokenBalance()"> <button @click.prevent="refreshTokenBalance()">
<img :src="require('@/assets/feather/refresh-ccw.svg')"> <img :src="require('@/assets/feather/refresh-ccw.svg')">
</button> </button>
@ -79,7 +86,9 @@
:disabled="!canPay()" :disabled="!canPay()"
@click.prevent="onMakeSubscriptionPayment()" @click.prevent="onMakeSubscriptionPayment()"
> >
<template v-if="!subscriptionState || subscriptionState.senderBalance.isZero()">Pay</template> <template v-if="!subscriptionState || subscriptionState.senderBalance.isZero()">
Pay
</template>
<template v-else>Extend</template> <template v-else>Extend</template>
</button> </button>
<button <button
@ -105,11 +114,11 @@ import { searchProfileByEthereumAddress } from "@/api/search"
import { Profile, ProfileWrapper } from "@/api/users" import { Profile, ProfileWrapper } from "@/api/users"
import { import {
cancelSubscription, cancelSubscription,
getSubscriptionInfo, getSubscriptionConfig,
getSubscriptionState, getSubscriptionState,
getTokenBalance, getTokenBalance,
makeSubscriptionPayment, makeSubscriptionPayment,
Subscription, SubscriptionConfig,
SubscriptionState, SubscriptionState,
} from "@/api/subscriptions" } from "@/api/subscriptions"
import Avatar from "@/components/Avatar.vue" import Avatar from "@/components/Avatar.vue"
@ -149,7 +158,7 @@ const recipientEthereumAddress = recipient.getVerifiedEthereumAddress()
let sender = $ref<ProfileWrapper>(new ProfileWrapper(currentUser || guest)) let sender = $ref<ProfileWrapper>(new ProfileWrapper(currentUser || guest))
let { walletAddress, walletError, getSigner } = $(useWallet()) let { walletAddress, walletError, getSigner } = $(useWallet())
let subscriptionsEnabled = $ref<boolean | null>(null) let subscriptionsEnabled = $ref<boolean | null>(null)
let subscription = $ref<Subscription | null>(null) let subscriptionConfig = $ref<SubscriptionConfig | null>(null)
let subscriptionState = $ref<SubscriptionState | null>(null) let subscriptionState = $ref<SubscriptionState | null>(null)
let tokenBalance = $ref<BigNumber | null>(null) let tokenBalance = $ref<BigNumber | null>(null)
const paymentDuration = $ref<number>(1) const paymentDuration = $ref<number>(1)
@ -177,7 +186,7 @@ function canConnectWallet(): boolean {
function reset() { function reset() {
subscriptionsEnabled = null subscriptionsEnabled = null
subscription = null subscriptionConfig = null
subscriptionState = null subscriptionState = null
tokenBalance = null tokenBalance = null
} }
@ -221,12 +230,12 @@ async function checkSubscription() {
} }
const signer = getSigner() const signer = getSigner()
isLoading = true isLoading = true
subscription = await getSubscriptionInfo( subscriptionConfig = await getSubscriptionConfig(
instance.blockchain_contract_address, instance.blockchain_contract_address,
signer, signer,
recipientEthereumAddress, recipientEthereumAddress,
) )
if (subscription !== null) { if (subscriptionConfig !== null) {
subscriptionsEnabled = true subscriptionsEnabled = true
} else { } else {
subscriptionsEnabled = false subscriptionsEnabled = false
@ -239,7 +248,10 @@ async function checkSubscription() {
walletAddress, walletAddress,
recipientEthereumAddress, recipientEthereumAddress,
) )
tokenBalance = await getTokenBalance(signer, subscription.tokenAddress) tokenBalance = await getTokenBalance(
signer,
subscriptionConfig.tokenAddress,
)
isLoading = false isLoading = false
} }
@ -248,28 +260,28 @@ function canSubscribe(): boolean {
} }
function getPaymentAmount(): FixedNumber { function getPaymentAmount(): FixedNumber {
if (!subscription) { if (!subscriptionConfig) {
return FixedNumber.from(0) return FixedNumber.from(0)
} }
const amount = subscription.pricePerMonthInt.mul(paymentDuration) const amount = subscriptionConfig.pricePerMonthInt.mul(paymentDuration)
return subscription.formatAmount(amount) return subscriptionConfig.formatAmount(amount)
} }
function canPay(): boolean { function canPay(): boolean {
if (!subscription || !tokenBalance || isLoading) { if (!subscriptionConfig || !tokenBalance || isLoading) {
return false return false
} }
const amount = subscription.pricePerMonthInt.mul(paymentDuration) const amount = subscriptionConfig.pricePerMonthInt.mul(paymentDuration)
return amount.lte(tokenBalance) return amount.lte(tokenBalance)
} }
async function refreshTokenBalance() { async function refreshTokenBalance() {
if (!subscription) { if (!subscriptionConfig) {
return return
} }
const signer = getSigner() const signer = getSigner()
isTokenBalanceLoading = true isTokenBalanceLoading = true
tokenBalance = await getTokenBalance(signer, subscription.tokenAddress) tokenBalance = await getTokenBalance(signer, subscriptionConfig.tokenAddress)
isTokenBalanceLoading = false isTokenBalanceLoading = false
} }
@ -278,13 +290,13 @@ async function onMakeSubscriptionPayment() {
!instance?.blockchain_contract_address || !instance?.blockchain_contract_address ||
!recipientEthereumAddress || !recipientEthereumAddress ||
!walletAddress || !walletAddress ||
!subscription || !subscriptionConfig ||
!subscriptionState !subscriptionState
) { ) {
return return
} }
const signer = getSigner() const signer = getSigner()
const amount = subscription.pricePerMonthInt.mul(paymentDuration) const amount = subscriptionConfig.pricePerMonthInt.mul(paymentDuration)
isLoading = true isLoading = true
let transaction let transaction
try { try {
@ -312,7 +324,7 @@ async function onMakeSubscriptionPayment() {
) )
} }
subscriptionState = newSubscriptionState subscriptionState = newSubscriptionState
tokenBalance = await getTokenBalance(signer, subscription.tokenAddress) tokenBalance = await getTokenBalance(signer, subscriptionConfig.tokenAddress)
isLoading = false isLoading = false
} }
@ -332,7 +344,7 @@ async function onCancelSubscription() {
!instance?.blockchain_contract_address || !instance?.blockchain_contract_address ||
!recipientEthereumAddress || !recipientEthereumAddress ||
!walletAddress || !walletAddress ||
!subscription !subscriptionConfig
) { ) {
return return
} }
@ -357,7 +369,7 @@ async function onCancelSubscription() {
walletAddress, walletAddress,
recipientEthereumAddress, recipientEthereumAddress,
) )
tokenBalance = await getTokenBalance(signer, subscription.tokenAddress) tokenBalance = await getTokenBalance(signer, subscriptionConfig.tokenAddress)
isLoading = false isLoading = false
} }
</script> </script>

24
src/components/SubscriptionSetup.vue
View file

@ -8,10 +8,10 @@
{{ walletError }} {{ walletError }}
</div> </div>
<div class="info" v-if="subscriptionsEnabled !== null"> <div class="info" v-if="subscriptionsEnabled !== null">
<template v-if="subscription"> <template v-if="subscriptionConfig">
<span>Subscriptions are enabled</span> <span>Subscriptions are enabled</span>
<div class="price"> <div class="price">
{{ subscription.pricePerMonth }} {{ subscription.tokenSymbol }} {{ subscriptionConfig.pricePerMonth }} {{ subscriptionConfig.tokenSymbol }}
<span class="price-subtext">per month</span> <span class="price-subtext">per month</span>
</div> </div>
</template> </template>
@ -33,7 +33,7 @@
Enable subscriptions Enable subscriptions
</button> </button>
</form> </form>
<form class="withdraw" v-if="subscription !== null"> <form class="withdraw" v-if="subscriptionConfig !== null">
<input v-model="subscriberAddress" placeholder="Subscriber address"> <input v-model="subscriberAddress" placeholder="Subscriber address">
<button <button
class="btn" class="btn"
@ -46,7 +46,9 @@
v-if="subscriptionState !== null" v-if="subscriptionState !== null"
@click.prevent="onWithdrawReceived()" @click.prevent="onWithdrawReceived()"
> >
Withdraw {{ subscription.formatAmount(subscriptionState.recipientBalance) }} {{ subscription.tokenSymbol }} Withdraw
{{ subscriptionConfig.formatAmount(subscriptionState.recipientBalance) }}
{{ subscriptionConfig.tokenSymbol }}
</button> </button>
</form> </form>
<loader v-if="isLoading"></loader> <loader v-if="isLoading"></loader>
@ -62,12 +64,12 @@ import {
configureSubscriptions, configureSubscriptions,
getPricePerSec, getPricePerSec,
getSubscriptionAuthorization, getSubscriptionAuthorization,
getSubscriptionInfo, getSubscriptionConfig,
getSubscriptionState, getSubscriptionState,
getSubscriptionToken, getSubscriptionToken,
onSubscriptionsEnabled, onSubscriptionsEnabled,
withdrawReceived, withdrawReceived,
Subscription, SubscriptionConfig,
SubscriptionState, SubscriptionState,
SubscriptionToken, SubscriptionToken,
} from "@/api/subscriptions" } from "@/api/subscriptions"
@ -92,7 +94,7 @@ let { walletAddress, walletError } = $(useWallet())
let isLoading = $ref(false) let isLoading = $ref(false)
let subscriptionToken = $ref<SubscriptionToken | null>(null) let subscriptionToken = $ref<SubscriptionToken | null>(null)
let subscriptionsEnabled = $ref<boolean | null>(null) let subscriptionsEnabled = $ref<boolean | null>(null)
let subscription = $ref<Subscription | null>(null) let subscriptionConfig = $ref<SubscriptionConfig | null>(null)
let subscriptionState = $ref<SubscriptionState | null>(null) let subscriptionState = $ref<SubscriptionState | null>(null)
let subscriberAddress = $ref<string | null>(null) let subscriberAddress = $ref<string | null>(null)
@ -117,7 +119,7 @@ function canConnectWallet(): boolean {
function reset() { function reset() {
subscriptionToken = null subscriptionToken = null
subscriptionsEnabled = null subscriptionsEnabled = null
subscription = null subscriptionConfig = null
subscriptionState = null subscriptionState = null
subscriberAddress = null subscriberAddress = null
} }
@ -150,12 +152,12 @@ async function checkSubscription() {
} }
isLoading = true isLoading = true
const signer = getSigner() const signer = getSigner()
subscription = await getSubscriptionInfo( subscriptionConfig = await getSubscriptionConfig(
instance.blockchain_contract_address, instance.blockchain_contract_address,
signer, signer,
profileEthereumAddress, profileEthereumAddress,
) )
if (subscription !== null) { if (subscriptionConfig !== null) {
subscriptionsEnabled = true subscriptionsEnabled = true
// Ensure server is aware of subscription configuration // Ensure server is aware of subscription configuration
await onSubscriptionsEnabled(ensureAuthToken()) await onSubscriptionsEnabled(ensureAuthToken())
@ -211,7 +213,7 @@ async function onEnableSubscriptions() {
} }
await transaction.wait() await transaction.wait()
subscriptionsEnabled = true subscriptionsEnabled = true
subscription = await getSubscriptionInfo( subscriptionConfig = await getSubscriptionConfig(
instance.blockchain_contract_address, instance.blockchain_contract_address,
signer, signer,
profileEthereumAddress, profileEthereumAddress,