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

Show subscription price and token address on subscription page

Browse source
This commit is contained in:
silverpill 2022-05-20 18:49:37 +00:00
parent 89ccba3201
commit f48cb67299
2 changed files with 65 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/api/subscriptions.ts
View file

@ -1,4 +1,4 @@
import { Signer } from "ethers"
import { BigNumber, FixedNumber, Signer } from "ethers"
import { TransactionResponse } from "@ethersproject/abstract-provider"
import { BACKEND_URL } from "@/constants"
@ -38,14 +38,34 @@ export async function configureSubscription(
return transaction
}
export async function isSubscriptionConfigured(
export interface Subscription {
recipientAddress: string;
token: string;
price: FixedNumber;
}
const SECONDS_IN_MONTH = 3600 * 24 * 30
export async function getSubscriptionInfo(
contractAddress: string,
signer: Signer,
recipientAddress: string,
): Promise<boolean> {
): Promise<Subscription | null> {
const adapter = await getContract(Contracts.Adapter, contractAddress, signer)
const result = await adapter.isSubscriptionConfigured(recipientAddress)
return result
if (result === true) {
const tokenAddress = await adapter.subscriptionToken()
const price = await adapter.getSubscriptionPrice(recipientAddress)
const pricePerMonth = price.mul(SECONDS_IN_MONTH)
const priceDec = FixedNumber.fromValue(pricePerMonth, 18).round(2)
return {
recipientAddress,
token: tokenAddress,
price: priceDec,
}
} else {
return null
}
}
export async function makeSubscriptionPayment(
@ -59,8 +79,7 @@ export async function makeSubscriptionPayment(
const tokenAddress = await adapter.subscriptionToken()
const token = await getContract(Contracts.ERC20, tokenAddress, signer)
const subscriptionPrice = await adapter.getSubscriptionPrice(recipientAddress)
const duration = 3600 * 24 * 31 // 1 month
const amount = subscriptionPrice.mul(duration)
const amount = subscriptionPrice.mul(SECONDS_IN_MONTH)
const allowance = await token.allowance(
signer.getAddress(),
subscription.address,

64
src/views/Subscription.vue
View file

@ -7,19 +7,26 @@
<div class="connect-wallet" v-if="canConnectWallet()">
<button class="btn" @click="connectWallet()">Connect wallet</button>
</div>
<div class="setup" v-if="canConfigureSubscription()">
<template v-if="subscriptionConfigured">
Subscription is configured.
<div class="info" v-if="subscriptionConfigured !== null">
<template v-if="subscription">
<div>Recipient address: {{ subscription.recipientAddress }}</div>
<div>Token address: {{ subscription.token }}</div>
<div>Price of one month: {{ subscription.price }}</div>
</template>
<button v-else class="btn" @click="onConfigureSubscription()">
<template v-else-if="isCurrentUser()">
Subscription is not configured.
</template>
<template v-else>
Subscription is not available.
</template>
</div>
<div class="setup" v-if="canConfigureSubscription()">
<button class="btn" @click="onConfigureSubscription()">
Set up subscription
</button>
</div>
<div class="payment" v-if="canSubscribe()">
<template v-if="!subscriptionConfigured">
Subscription is not available.
</template>
<button v-else class="btn" @click="onMakeSubscriptionPayment()">
<button class="btn" @click="onMakeSubscriptionPayment()">
Pay for subscription
</button>
</div>
@ -40,10 +47,11 @@ import {
Profile,
} from "@/api/users"
import {
getSubscriptionAuthorization,
configureSubscription,
isSubscriptionConfigured,
getSubscriptionAuthorization,
getSubscriptionInfo,
makeSubscriptionPayment,
Subscription,
} from "@/api/subscriptions"
import Sidebar from "@/components/Sidebar.vue"
import { useInstanceInfo } from "@/store/instance"
@ -56,6 +64,7 @@ const { instance, getActorAddress } = $(useInstanceInfo())
let profile = $ref<Profile | null>(null)
let walletConnected = $ref(false)
let subscriptionConfigured = $ref<boolean | null>(null)
let subscription = $ref<Subscription | null>(null)
onMounted(async () => {
const { authToken } = useCurrentUser()
@ -88,10 +97,10 @@ async function connectWallet() {
return
}
walletConnected = true
checkSubscriptionConfigured()
checkSubscription()
}
async function checkSubscriptionConfigured() {
async function checkSubscription() {
if (
!profile ||
!instance ||
@ -107,16 +116,21 @@ async function checkSubscriptionConfigured() {
if (!signer) {
return
}
subscriptionConfigured = await isSubscriptionConfigured(
subscription = await getSubscriptionInfo(
instance.blockchain_contract_address,
signer,
profileEthereumAddress,
)
if (subscription !== null) {
subscriptionConfigured = true
} else {
subscriptionConfigured = false
}
}
function canConfigureSubscription(): boolean {
// If wallet is not connected, subscriptionConfigured is set to null
return isCurrentUser() && subscriptionConfigured !== null
return isCurrentUser() && subscriptionConfigured === false
}
async function onConfigureSubscription() {
@ -135,17 +149,23 @@ async function onConfigureSubscription() {
}
const authToken = ensureAuthToken()
const signature = await getSubscriptionAuthorization(authToken)
await configureSubscription(
const transaction = await configureSubscription(
instance.blockchain_contract_address,
signer,
currentUser.wallet_address,
signature,
)
await transaction.wait()
subscriptionConfigured = true
subscription = await getSubscriptionInfo(
instance.blockchain_contract_address,
signer,
currentUser.wallet_address,
)
}
function canSubscribe(): boolean {
return !isCurrentUser() && subscriptionConfigured !== null
return !isCurrentUser() && subscriptionConfigured === true
}
async function onMakeSubscriptionPayment() {
@ -182,19 +202,15 @@ async function onMakeSubscriptionPayment() {
background-color: $block-background-color;
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
gap: $block-inner-padding;
margin-bottom: $block-outer-padding;
padding: $block-inner-padding;
h1 {
font-size: 20px;
text-align: center;
margin: 0;
}
}
.connect-wallet,
.setup,
.payment {
display: flex;
justify-content: center;
}
</style>