From 4110df590dd7ec28f91083b5003da4bec52a0d90 Mon Sep 17 00:00:00 2001 From: silverpill Date: Tue, 7 Jun 2022 21:14:04 +0000 Subject: [PATCH] Redesign subscription page --- src/assets/feather/arrow-right.svg | 1 + src/components/Avatar.vue | 2 + src/components/Subscription.vue | 217 +++++++++++++++++++++++++---- 3 files changed, 192 insertions(+), 28 deletions(-) create mode 100644 src/assets/feather/arrow-right.svg diff --git a/src/assets/feather/arrow-right.svg b/src/assets/feather/arrow-right.svg new file mode 100644 index 0000000..8bf22d5 --- /dev/null +++ b/src/assets/feather/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue index 2b7c884..f80041d 100644 --- a/src/components/Avatar.vue +++ b/src/components/Avatar.vue @@ -19,6 +19,8 @@ export default class Avatar extends Vue { get avatarUrl(): string { if (this.profile.avatar) { return this.profile.avatar + } else if (this.profile.acct === "") { + return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC8ElEQVR4nO3Y3UtTcRzHcf+nPdwccQ4GmeBymZDXYUgP2BTbdOIfURmFMibOdJPZ00WRBq1wq3RBBlkIS106N92m9gd8vWrwW5B69fuccz4X78svfH/ntXMOO01/jivCcGrSvQAjCHQEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAKWKUGKu9sSn47J4GBQ/B0d4vG0iNvtFm9rqwQCnRK6OySJxBPZL+9o39XSIIe1skxMPJLm5mZxOByn5vG0yEx8SvvelgSpVvbk1s0bZ4JoLDISluOjA+1nsBRIZCSsXGSn0ynBYL8spJLyJfdJ1r+vyepKVubmZqS399o/KA/H72s/g2VA0u+WlIvr9XpleTn935mFVFJcLld9xjAM2drc0H4WS4A0Pqoyp2D8bfzBPWXODO8TeJC94rbyS+/vv33m2eLutrjd7vrscDik/TymB3mffqv8ypPJ2XPNX/L767N9fde1n8f0IEeH+1Io5OXH+jdZ+ZyR3Z2tc813dV0mCEq1akkMw6iDjI2Nat/J1iDz87PK4+75s5T2nWwLUijkxefz1THa2i5IrVrSvpctQbY2N6S7+4pydyy+eaV9L1uCZLMfpL39ooIxFYtq38uWIJOTj5X/HYZhyMsXT7XvZTuQw1pZQqEh5a4IBDpl7WtO+262BGn88DgwcEfKpd/a97IlyNLiawVjNDJsmk/tlgTp6bmqPKYqB0XtO9kW5Ff+p3J3xKdj2neyNUhmOa2A5FY/at/J1iBWjCBgEQQsU4NEoxPKOySVSmjfiSAEwYkgYBGEEcRuEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwDoBOz/dnwXMOO8AAAAASUVORK5CYII=" } else { return makeBlockie(this.profile.acct) } diff --git a/src/components/Subscription.vue b/src/components/Subscription.vue index 4620179..dd579f2 100644 --- a/src/components/Subscription.vue +++ b/src/components/Subscription.vue @@ -1,38 +1,69 @@ @@ -49,8 +80,10 @@ import { Subscription, SubscriptionState, } from "@/api/subscriptions" +import Avatar from "@/components/Avatar.vue" import { useWallet } from "@/composables/wallet" import { useInstanceInfo } from "@/store/instance" +import { useCurrentUser } from "@/store/user" import { ethereumAddressMatch, getWeb3Provider } from "@/utils/ethereum" /* eslint-disable-next-line no-undef */ @@ -58,14 +91,34 @@ const props = defineProps<{ profile: Profile, }>() +const guest: Profile = { + id: "", + username: "", + acct: "", + url: "", + display_name: "You", + note: null, + avatar: null, + header: null, + identity_proofs: [], + fields: [], + followers_count: 0, + following_count: 0, + statuses_count: 0, +} + +const { currentUser } = $(useCurrentUser()) const { instance } = $(useInstanceInfo()) const { connectWallet: connectEthereumWallet } = useWallet() const recipient = new ProfileWrapper(props.profile) const recipientEthereumAddress = recipient.getVerifiedEthereumAddress() +const sender = $ref(new ProfileWrapper(currentUser || guest)) +let senderEthereumAddress = $ref(sender.getVerifiedEthereumAddress()) let { walletAddress, walletError } = $(useWallet()) let subscriptionConfigured = $ref(null) let subscription = $ref(null) let subscriptionState = $ref(null) +const paymentDuration = $ref(1) onMounted(() => { if (walletAddress && !walletError) { @@ -111,6 +164,7 @@ async function checkSubscription() { walletError = "incorrect wallet address" return } + senderEthereumAddress = walletAddress.toLowerCase() const signer = getWeb3Provider().getSigner() subscription = await getSubscriptionInfo( instance.blockchain_contract_address, @@ -130,6 +184,13 @@ async function checkSubscription() { ) } +function getPaymentAmount(): number { + if (!subscription) { + return 0 + } + return subscription.pricePerMonth.toUnsafeFloat() * paymentDuration +} + function canSubscribe(): boolean { return subscriptionConfigured === true } @@ -144,7 +205,7 @@ async function onMakeSubscriptionPayment() { return } const signer = getWeb3Provider().getSigner() - const amount = subscription.pricePerMonthInt + const amount = subscription.pricePerMonthInt.mul(paymentDuration) const transaction = await makeSubscriptionPayment( instance.blockchain_contract_address, signer, @@ -196,20 +257,120 @@ async function onCancelSubscription() { @import "../styles/mixins"; @import "../styles/theme"; -.subscription { - @include block-btn; +.btn.primary { + background-color: $btn-background-hover-color; + color: $btn-text-hover-color; + &:hover { + background-color: $block-background-color; + color: $btn-text-color; + } +} + +.btn.secondary { + &:hover { + background-color: $block-background-color; + color: $btn-text-color; + } +} + +.subscription { + display: flex; + flex-direction: column; + gap: $block-outer-padding; + text-align: center; +} + +.participants { + $avatar-size: 60px; + + align-items: center; + display: flex; + gap: $block-inner-padding; + + .profile-card { + background-color: $block-background-color; + border-radius: $block-border-radius; + display: flex; + flex-basis: 50%; + flex-direction: column; + gap: $block-inner-padding / 2; + min-width: 0; + padding: $block-inner-padding; + } + + .separator img { + height: $icon-size; + min-width: $icon-size; + object-fit: contain; + width: $icon-size; + } + + .avatar { + height: $avatar-size; + margin: 0 auto; + width: $avatar-size; + } + + .display-name { + font-size: 16px; + } + + .wallet-address { + font-family: monospace; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + } +} + +.info { background-color: $block-background-color; border-radius: $block-border-radius; display: flex; flex-direction: column; gap: $block-inner-padding / 2; - margin-bottom: $block-outer-padding; padding: $block-inner-padding; - h1 { - font-size: 20px; - margin: 0; + .price { + font-size: 16px; + font-weight: bold; + } + + .price-subtext { + font-size: 14px; + } + + .status { + color: $secondary-text-color; + } +} + +.payment { + align-items: center; + display: flex; + flex-direction: column; + gap: $block-inner-padding; + + .input-group { + align-items: center; + display: flex; + font-size: 16px; + gap: $input-padding; + justify-content: center; + + label { + font-weight: bold; + } + + input { + width: 100px; + } + } + + .button-row { + display: flex; + gap: $block-inner-padding; } }