Skip to content

Commit

Permalink
feat: add new pro eoa to eoa
Browse files Browse the repository at this point in the history
  • Loading branch information
@bigint
bigint committed Jun 25, 2024
1 parent 901b883 commit 8964113
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 99 deletions.
20 changes: 7 additions & 13 deletions apps/web/src/components/Pro/ExtendButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { FC } from 'react';
import errorToast from '@helpers/errorToast';
import { Leafwatch } from '@helpers/leafwatch';
import { Errors } from '@hey/data';
import { MONTHLY_PRO_PRICE } from '@hey/data/constants';
import { PAGEVIEW } from '@hey/data/tracking';
import { Button } from '@hey/ui';
import { useEffect, useState } from 'react';
Expand All @@ -15,16 +16,10 @@ import { parseEther } from 'viem';
import { useSendTransaction, useTransaction } from 'wagmi';

interface ExtendButtonProps {
outline?: boolean;
size?: 'lg' | 'md';
tier: 'annually' | 'monthly';
}

const ExtendButton: FC<ExtendButtonProps> = ({
outline = false,
size = 'lg',
tier
}) => {
const ExtendButton: FC<ExtendButtonProps> = ({ size = 'lg' }) => {
const { currentProfile } = useProfileStore();
const { isPro } = useProStore();

Expand Down Expand Up @@ -58,7 +53,7 @@ const ExtendButton: FC<ExtendButtonProps> = ({
}
}, [isSuccess]);

const upgrade = async (id: 'annually' | 'monthly') => {
const upgrade = async () => {
if (!currentProfile) {
return toast.error(Errors.SignWallet);
}
Expand All @@ -72,9 +67,9 @@ const ExtendButton: FC<ExtendButtonProps> = ({
await handleWrongNetwork();

return await sendTransactionAsync({
data: '0x0d',
data: currentProfile.id,
to: '0xF618330F51fa54Ce5951d627Ee150c0fDADeBA43',
value: parseEther('10')
value: parseEther(MONTHLY_PRO_PRICE.toString())
});
} catch (error) {
errorToast(error);
Expand All @@ -87,14 +82,13 @@ const ExtendButton: FC<ExtendButtonProps> = ({
<Button
className="mt-3 w-full"
disabled={isLoading || transactionLoading}
onClick={() => upgrade(tier as 'annually' | 'monthly')}
outline={outline}
onClick={upgrade}
size={size}
>
{transactionLoading
? 'Transaction pending...'
: isPro
? `Extend a ${tier === 'monthly' ? 'Month' : 'Year'}`
? `Extend a Month`
: 'Upgrade to Pro'}
</Button>
);
Expand Down
131 changes: 51 additions & 80 deletions apps/web/src/components/Pro/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Leafwatch } from '@helpers/leafwatch';
import { CheckIcon } from '@heroicons/react/24/outline';
import {
APP_NAME,
PRO_TIER_PRICES,
MONTHLY_PRO_PRICE,
STATIC_IMAGES_URL
} from '@hey/data/constants';
import { PAGEVIEW } from '@hey/data/tracking';
Expand All @@ -15,35 +15,21 @@ import { useProStore } from 'src/store/non-persisted/useProStore';

import ExtendButton from './ExtendButton';

const tiers = [
{
description: 'Billed monthly',
featured: true,
features: [
'Profile Analytics',
'Publication Drafts',
'Choose your app icon',
'Pro Badge on your profile',
'Early access to new features',
'Priority support'
],
id: 'monthly',
name: 'Monthly',
price: PRO_TIER_PRICES.monthly
},
{
description: 'Billed annually',
featured: false,
features: [
'All features, plus',
'Free 2 months of Pro',
'Support indie team 💖'
],
id: 'annually',
name: 'Annually',
price: (PRO_TIER_PRICES.annually / 12).toFixed(1)
}
];
const details = {
description: 'Billed monthly',
features: [
'Profile Analytics',
'Publication Drafts',
'Choose your app icon',
'Higher video upload limits',
'Pro Badge on your profile',
'Early access to new features',
'Priority support'
],
id: 'monthly',
name: 'Monthly',
price: MONTHLY_PRO_PRICE
};

const Pro: NextPage = () => {
const { proExpiresAt } = useProStore();
Expand Down Expand Up @@ -72,58 +58,43 @@ const Pro: NextPage = () => {
</div>
<p className="ld-text-gray-500 mx-auto mt-4 max-w-2xl text-center text-lg leading-7">
You can extend your Pro subscription anytime for an additional month or
year, whenever it suits you, without any hassle.
given time, whenever it suits you, without any hassle.
</p>
<div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center space-y-6 sm:mt-20 sm:space-y-0 lg:max-w-4xl lg:grid-cols-2">
{tiers.map((tier, tierIdx) => (
<div
className={cn(
tier.featured
? 'relative bg-white shadow-2xl dark:bg-black'
: 'bg-white/60 sm:mx-8 lg:mx-0 dark:bg-black/60',
tier.featured
? ''
: tierIdx === 0
? 'rounded-t-2xl sm:rounded-b-none lg:rounded-bl-2xl lg:rounded-tr-none'
: 'sm:rounded-t-none lg:rounded-bl-none lg:rounded-tr-2xl',
'rounded-2xl p-8 ring-1 ring-gray-900/10 sm:p-10 dark:ring-gray-100/20'
)}
key={tier.id}
>
<h3 className="font-bold" id={tier.id}>
{tier.name}
</h3>
<p className="mt-4 flex items-baseline space-x-3">
<img
alt="MATIC"
className="size-7"
src={`${STATIC_IMAGES_URL}/tokens/matic.svg`}
/>
<span className="text-5xl font-bold tracking-tight text-gray-900 dark:text-white">
{tier.price}
</span>
<span className="ld-text-gray-500">/month</span>
</p>
<p className="ld-text-gray-500 mt-6">{tier.description}</p>
<ul className="ld-text-gray-500 mt-8 space-y-1 text-sm sm:mt-10">
{tier.features.map((feature) => (
<li className="flex items-center space-x-3" key={feature}>
<CheckIcon aria-hidden="true" className="size-5" />
<span>{feature}</span>
</li>
))}
</ul>
{proExpiresAt ? (
<div className="mb-2 mt-6 text-sm">
Your Pro expires at <b>{formatDate(proExpiresAt)}</b>
</div>
) : null}
<ExtendButton
outline={!tier.featured}
tier={tier.id as 'annually' | 'monthly'}
<div className="mx-auto mt-20 max-w-md items-center space-y-6">
<div
className={cn(
'relative bg-white shadow-2xl dark:bg-black',
'rounded-2xl p-8 ring-1 ring-gray-900/10 sm:p-10 dark:ring-gray-100/20'
)}
>
<h3 className="font-bold">{details.name}</h3>
<p className="mt-4 flex items-baseline space-x-3">
<img
alt="MATIC"
className="size-7"
src={`${STATIC_IMAGES_URL}/tokens/matic.svg`}
/>
</div>
))}
<span className="text-5xl font-bold tracking-tight text-gray-900 dark:text-white">
{details.price}
</span>
<span className="ld-text-gray-500">/month</span>
</p>
<p className="ld-text-gray-500 mt-6">{details.description}</p>
<ul className="ld-text-gray-500 mt-8 space-y-1 text-sm sm:mt-10">
{details.features.map((feature) => (
<li className="flex items-center space-x-3" key={feature}>
<CheckIcon aria-hidden="true" className="size-5" />
<span>{feature}</span>
</li>
))}
</ul>
{proExpiresAt ? (
<div className="mb-2 mt-6 text-sm">
Your Pro expires at <b>{formatDate(proExpiresAt)}</b>
</div>
) : null}
<ExtendButton />
</div>
</div>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions apps/web/src/components/Settings/Pro/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ const Overview: FC = () => {
<span className={getColor(daysLeft)}>{daysLeft} days</span>
</b>
<div className="flex items-center space-x-5">
<ExtendButton outline size="md" tier="monthly" />
<ExtendButton outline size="md" tier="annually" />
<ExtendButton size="md" />
</div>
</div>
</Card>
Expand Down
5 changes: 1 addition & 4 deletions packages/data/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@ export const ZERO_PUBLICATION_ID = '0x00-0x00';
export const HANDLE_PREFIX = 'lens/';
export const CLUB_HANDLE_PREFIX = 'club/';
export const SIGNUP_PRICE = IS_MAINNET ? 8 : 1;
export const PRO_TIER_PRICES = {
annually: 90,
monthly: 8
};
export const MONTHLY_PRO_PRICE = 10;
export const HEY_MEMBERSHIP_NFT = IS_MAINNET
? '0x100372BBF7f975f6b1448fB11AB0F814b2740EEd'
: '0x75120677aBF34ae95a916C6E9DbB610a06536CC3';
Expand Down

1 comment on commit 8964113

@vercel
Copy link

@vercel vercel bot commented on 8964113 Jun 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web – ./apps/web

web-git-main-heyxyz.vercel.app
hey.xyz
heyxyz.vercel.app
web-heyxyz.vercel.app

Please sign in to comment.