From 9bb8a41471bc422c0c559107f0943f4fe745028e Mon Sep 17 00:00:00 2001 From: yashdesu Date: Tue, 27 Aug 2024 13:12:44 +0530 Subject: [PATCH 1/6] feat: rename Memberships/NFT to Direct payments in Funds page --- src/plugins/admin/Funds.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/admin/Funds.tsx b/src/plugins/admin/Funds.tsx index 143cbe6b2..3c02df9d6 100644 --- a/src/plugins/admin/Funds.tsx +++ b/src/plugins/admin/Funds.tsx @@ -64,9 +64,9 @@ const FundsInfo = (props: { return ( <> - {/* */} + {/* */}
-

Memberships/NFTs

+

Direct payments

{/* */}
From 9733ae607082e361776e97afb75903106f55e449 Mon Sep 17 00:00:00 2001 From: yashdesu Date: Tue, 27 Aug 2024 16:18:09 +0530 Subject: [PATCH 2/6] feat: replicate direct payments section for clubs vault in funds --- src/plugins/admin/Funds.tsx | 84 ++++++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/src/plugins/admin/Funds.tsx b/src/plugins/admin/Funds.tsx index 3c02df9d6..cb74b990f 100644 --- a/src/plugins/admin/Funds.tsx +++ b/src/plugins/admin/Funds.tsx @@ -4,7 +4,6 @@ import StakeInfo from './StakeInfo' import { KYCStatuses } from './Withdrawal' import { ALL_CURRENCIES } from '@constants/memberships' import CurrencyMembershipInfo from './CurrencyMembershipInfo' -import NotVerifiedBannerImg from './assets/NotVerifiedBannerImg.svg' const FundsInfo = (props: { propertyAddress: string @@ -64,9 +63,90 @@ const FundsInfo = (props: { return ( <> + {/* */} +
+

Clubs Vault

+ + {/* */} +
+

+ Your withdrawable funds +

+
+

+ $ + {new Intl.NumberFormat(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 3, + }).format( + Number( + yourTotalWithdrawableInDollars.reduce( + (prev: string, curr: string) => + String(Number(prev) + Number(curr)), + ), + ) || 0, + )} +

+

+ equivalent tokens +

+
+ {ALL_CURRENCIES.map((curr, id) => ( + + ))} +
+ + {/* */} +
+

+ Total withdrawable funds +

+
+

+ $ + {new Intl.NumberFormat(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 3, + }).format( + Number( + totalWithrawableInDollars.reduce( + (prev: string, curr: string) => + String(Number(prev) + Number(curr)), + ), + ) || 0, + )} +

+

+ equivalent tokens +

+
+ {ALL_CURRENCIES.map((curr, id) => ( + + ))} +
+
+ {/* */}
-

Direct payments

+

Direct Payments

{/* */}
From b526796d1413823bb89c02ce51f000b7fb3f68dc Mon Sep 17 00:00:00 2001 From: yashdesu Date: Wed, 28 Aug 2024 10:38:43 +0530 Subject: [PATCH 3/6] feat: add create clubs vault button basic --- src/plugins/admin/Funds.tsx | 2 ++ src/plugins/admin/Withdrawal.tsx | 3 ++ .../admin/components/CreateClubsVault.tsx | 35 +++++++++++++++++++ src/plugins/admin/funds.astro | 6 ++-- src/plugins/admin/index.ts | 6 +++- 5 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 src/plugins/admin/components/CreateClubsVault.tsx diff --git a/src/plugins/admin/Funds.tsx b/src/plugins/admin/Funds.tsx index cb74b990f..50d7c005d 100644 --- a/src/plugins/admin/Funds.tsx +++ b/src/plugins/admin/Funds.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react' +import type { UndefinedOr } from '@devprotocol/util-ts' import StakeInfo from './StakeInfo' import { KYCStatuses } from './Withdrawal' @@ -6,6 +7,7 @@ import { ALL_CURRENCIES } from '@constants/memberships' import CurrencyMembershipInfo from './CurrencyMembershipInfo' const FundsInfo = (props: { + vaultAddress: UndefinedOr propertyAddress: string chainId: number uniqueBeneficiaries: string[] diff --git a/src/plugins/admin/Withdrawal.tsx b/src/plugins/admin/Withdrawal.tsx index 2bf78b958..51b06157b 100644 --- a/src/plugins/admin/Withdrawal.tsx +++ b/src/plugins/admin/Withdrawal.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react' import KYCInfo from './KYCInfo' import FundsInfo from './Funds' +import type { UndefinedOr } from '@devprotocol/util-ts' export enum KYCStatuses { VERIFIED, @@ -10,6 +11,7 @@ export enum KYCStatuses { } export const Withdrawal = (props: { + vaultAddress: UndefinedOr propertyAddress: string chainId: number uniqueBeneficiaries: string[] @@ -30,6 +32,7 @@ export const Withdrawal = (props: { diff --git a/src/plugins/admin/components/CreateClubsVault.tsx b/src/plugins/admin/components/CreateClubsVault.tsx new file mode 100644 index 000000000..af9e80149 --- /dev/null +++ b/src/plugins/admin/components/CreateClubsVault.tsx @@ -0,0 +1,35 @@ +import React, { useState } from 'react' + +interface ICreateClubsVaultProps { + isKYCVerified: boolean +} + +const CreateClubsVault = (props: ICreateClubsVaultProps) => { + const [isCreatingVault, setIsCreatingVault] = useState(false) + + const createVault = async () => { + setIsCreatingVault(true) + + // @TODO: add logic to create vault here. + + setIsCreatingVault(false) + } + + return ( + + ) +} + +export default CreateClubsVault diff --git a/src/plugins/admin/funds.astro b/src/plugins/admin/funds.astro index 44e05f082..fc520636c 100644 --- a/src/plugins/admin/funds.astro +++ b/src/plugins/admin/funds.astro @@ -1,11 +1,10 @@ --- -import FundsTeaser from './FundsTeaser.tsx' import { ZeroAddress } from 'ethers' import type { Membership } from '@plugins/memberships' -import { KYCStatuses, Withdrawal } from './Withdrawal' +import { Withdrawal } from './Withdrawal' -const { memberships, chainId, propertyAddress } = Astro.props +const { memberships, chainId, propertyAddress, vaultAddress } = Astro.props let beneficiaries: string[] = memberships.map( (membership: Membership) => membership.fee?.beneficiary ?? ZeroAddress, @@ -22,6 +21,7 @@ const uniqueBeneficiaries = new Array(...new Set(beneficiaries)) chainId={chainId} uniqueBeneficiaries={uniqueBeneficiaries} propertyAddress={propertyAddress} + vaultAddress={vaultAddress} />
diff --git a/src/plugins/admin/index.ts b/src/plugins/admin/index.ts index 83067d30f..ee4550ecc 100644 --- a/src/plugins/admin/index.ts +++ b/src/plugins/admin/index.ts @@ -15,7 +15,7 @@ import { default as Overview } from './overview.astro' export const getPagePaths = (async () => []) satisfies ClubsFunctionGetPagePaths -export const getAdminPaths = (async (_, config) => { +export const getAdminPaths = (async (options, config) => { const membersihpPlugin = config.plugins.find( (plg) => plg.id === 'devprotocol:clubs:simple-memberships', ) @@ -23,6 +23,9 @@ export const getAdminPaths = (async (_, config) => { (membersihpPlugin?.options.find((opt) => opt.key === 'memberships') ?.value as UndefinedOr) ?? [] + const vaultAddress = config.options?.find((option) => option.key === 'vault') + ?.value as UndefinedOr + return [ { paths: ['general'], @@ -52,6 +55,7 @@ export const getAdminPaths = (async (_, config) => { propertyAddress: config.propertyAddress, rpcUrl: config.rpcUrl, chainId: config.chainId, + vaultAddress, }, }, ] From 64b085ca594937b2fac60ee6b712a5df4eb5ffb1 Mon Sep 17 00:00:00 2001 From: yashdesu Date: Wed, 28 Aug 2024 12:23:18 +0530 Subject: [PATCH 4/6] fix: update props in Funds page --- src/plugins/admin/Withdrawal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/admin/Withdrawal.tsx b/src/plugins/admin/Withdrawal.tsx index 51b06157b..227b12282 100644 --- a/src/plugins/admin/Withdrawal.tsx +++ b/src/plugins/admin/Withdrawal.tsx @@ -32,7 +32,7 @@ export const Withdrawal = (props: { From f668532219649b3158b1484baab30de89a62bb25 Mon Sep 17 00:00:00 2001 From: yashdesu Date: Wed, 28 Aug 2024 12:37:09 +0530 Subject: [PATCH 5/6] feat: update create vaults btn to use svg --- src/plugins/admin/Funds.tsx | 7 +++++++ src/plugins/admin/assets/CreateVault.svg | 3 +++ src/plugins/admin/components/CreateClubsVault.tsx | 11 +++++++++-- 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 src/plugins/admin/assets/CreateVault.svg diff --git a/src/plugins/admin/Funds.tsx b/src/plugins/admin/Funds.tsx index 50d7c005d..524d0e587 100644 --- a/src/plugins/admin/Funds.tsx +++ b/src/plugins/admin/Funds.tsx @@ -4,6 +4,7 @@ import type { UndefinedOr } from '@devprotocol/util-ts' import StakeInfo from './StakeInfo' import { KYCStatuses } from './Withdrawal' import { ALL_CURRENCIES } from '@constants/memberships' +import CreateClubsVault from './components/CreateClubsVault' import CurrencyMembershipInfo from './CurrencyMembershipInfo' const FundsInfo = (props: { @@ -68,6 +69,12 @@ const FundsInfo = (props: { {/* */}

Clubs Vault

+ {/* */} +
+ +
{/* */}
diff --git a/src/plugins/admin/assets/CreateVault.svg b/src/plugins/admin/assets/CreateVault.svg new file mode 100644 index 000000000..ddf409ff6 --- /dev/null +++ b/src/plugins/admin/assets/CreateVault.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/plugins/admin/components/CreateClubsVault.tsx b/src/plugins/admin/components/CreateClubsVault.tsx index af9e80149..a10d9080c 100644 --- a/src/plugins/admin/components/CreateClubsVault.tsx +++ b/src/plugins/admin/components/CreateClubsVault.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react' +import CreateVaultSVG from '../assets/CreateVault.svg' + interface ICreateClubsVaultProps { isKYCVerified: boolean } @@ -19,7 +21,7 @@ const CreateClubsVault = (props: ICreateClubsVaultProps) => { ) } From bb02ac073f616d31261b0720c3cac534dd3a7ae6 Mon Sep 17 00:00:00 2001 From: yashdesu Date: Wed, 28 Aug 2024 12:41:27 +0530 Subject: [PATCH 6/6] feat: add conditional rendering in clubs vault funds page --- src/plugins/admin/Funds.tsx | 153 +++++++++++++++++++----------------- 1 file changed, 80 insertions(+), 73 deletions(-) diff --git a/src/plugins/admin/Funds.tsx b/src/plugins/admin/Funds.tsx index 524d0e587..b0a0e6f36 100644 --- a/src/plugins/admin/Funds.tsx +++ b/src/plugins/admin/Funds.tsx @@ -69,88 +69,95 @@ const FundsInfo = (props: { {/* */}

Clubs Vault

+ {/* */} -
- -
+ {!props.vaultAddress && ( +
+ +
+ )} {/* */} -
-

- Your withdrawable funds -

-
-

- $ - {new Intl.NumberFormat(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: 3, - }).format( - Number( - yourTotalWithdrawableInDollars.reduce( - (prev: string, curr: string) => - String(Number(prev) + Number(curr)), - ), - ) || 0, - )} -

+ {props.vaultAddress && ( +

- equivalent tokens + Your withdrawable funds

-
- {ALL_CURRENCIES.map((curr, id) => ( - - ))} -
+
+

+ $ + {new Intl.NumberFormat(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 3, + }).format( + Number( + yourTotalWithdrawableInDollars.reduce( + (prev: string, curr: string) => + String(Number(prev) + Number(curr)), + ), + ) || 0, + )} +

+

+ equivalent tokens +

+
+ {ALL_CURRENCIES.map((curr, id) => ( + + ))} +
+ )} {/* */} -
-

- Total withdrawable funds -

-
-

- $ - {new Intl.NumberFormat(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: 3, - }).format( - Number( - totalWithrawableInDollars.reduce( - (prev: string, curr: string) => - String(Number(prev) + Number(curr)), - ), - ) || 0, - )} -

+ {props.vaultAddress && ( +

- equivalent tokens + Total withdrawable funds

-
- {ALL_CURRENCIES.map((curr, id) => ( - - ))} -
+
+

+ $ + {new Intl.NumberFormat(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 3, + }).format( + Number( + totalWithrawableInDollars.reduce( + (prev: string, curr: string) => + String(Number(prev) + Number(curr)), + ), + ) || 0, + )} +

+

+ equivalent tokens +

+
+ {ALL_CURRENCIES.map((curr, id) => ( + + ))} +
+ )}
{/* */}