From fed1d99e9288512871c042964efb62fc4977c7f7 Mon Sep 17 00:00:00 2001
From: Brandon Fancher <brandonfancher@gmail.com>
Date: Fri, 19 Nov 2021 17:27:15 -0500
Subject: [PATCH 1/3] Create new Member model and apply to simple component.

---
 packages/webapp/src/_app/ui/nav-profile.tsx   | 46 +++++++++----------
 .../webapp/src/members/helpers/formatters.ts  | 31 ++++++++++++-
 packages/webapp/src/members/hooks/queries.ts  | 33 ++++++++++++-
 packages/webapp/src/members/interfaces.ts     | 33 +++++++++++++
 4 files changed, 117 insertions(+), 26 deletions(-)

diff --git a/packages/webapp/src/_app/ui/nav-profile.tsx b/packages/webapp/src/_app/ui/nav-profile.tsx
index 2833a28b2..ef0f21989 100644
--- a/packages/webapp/src/_app/ui/nav-profile.tsx
+++ b/packages/webapp/src/_app/ui/nav-profile.tsx
@@ -4,11 +4,10 @@ import { Popover } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { IoMdLogIn } from "react-icons/io";
 
-import { MemberStatus } from "_app";
-import { useCurrentMember, useSignOut } from "_app/hooks";
-import { Button, ProfileImage, Text } from "_app/ui";
 import { ROUTES } from "_app/routes";
-import { useMemberByAccountName } from "members/hooks";
+import { useSignOut } from "_app/hooks";
+import { Button, ProfileImage, Text } from "_app/ui";
+import { Member, useCurrentMember } from "members";
 
 import { useUALAccount } from "../eos";
 
@@ -17,15 +16,10 @@ interface Props {
 }
 
 export const NavProfile = ({ location }: Props) => {
-    const [ualAccount, _, ualShowModal] = useUALAccount();
-    const accountName = ualAccount?.accountName;
-
+    const [_ualAccount, _, ualShowModal] = useUALAccount();
     const { data: member } = useCurrentMember();
-    const { data: userProfile } = useMemberByAccountName(member?.account ?? "");
-
-    const isActiveMember = member?.status === MemberStatus.ActiveMember;
 
-    if (!ualAccount) {
+    if (!member?.accountName) {
         return (
             <div className="flex justify-end xs:justify-center md:justify-end xl:justify-start mb-0 xs:mb-8 my-0">
                 <Button
@@ -66,16 +60,19 @@ export const NavProfile = ({ location }: Props) => {
     // TODO: Handle loaders and error state, non-member state
     return (
         <div className={WRAPPER_CLASS}>
-            <PopoverWrapper location={location} isActiveMember={isActiveMember}>
+            <PopoverWrapper location={location} member={member}>
                 <div className={CONTAINER_CLASS}>
                     <div className="cursor-pointer">
-                        <ProfileImage imageCid={userProfile?.image} size={40} />
+                        <ProfileImage
+                            imageCid={member?.profile?.image.cid}
+                            size={40}
+                        />
                     </div>
                     <div className="hidden xl:block text-left">
                         <Text size="sm" className="font-semibold">
-                            {member?.name ?? "Not a member"}
+                            {member?.profile?.name ?? "Not a member"}
                         </Text>
-                        <Text size="sm">@{member?.account ?? accountName}</Text>
+                        <Text size="sm">@{member?.accountName}</Text>
                     </div>
                 </div>
             </PopoverWrapper>
@@ -85,11 +82,12 @@ export const NavProfile = ({ location }: Props) => {
 
 export default NavProfile;
 
-const PopoverWrapper = ({
-    children,
-    location,
-    isActiveMember,
-}: { children: React.ReactNode; isActiveMember: boolean } & Props) => {
+interface PopoverProps extends Props {
+    children: React.ReactNode;
+    member?: Member;
+}
+
+const PopoverWrapper = ({ children, member, location }: PopoverProps) => {
     const [
         referenceElement,
         setReferenceElement,
@@ -103,10 +101,10 @@ const PopoverWrapper = ({
         { placement: location === "mobile-nav" ? "bottom-end" : "top-start" }
     );
 
-    const [ualAccount] = useUALAccount();
-    const accountName = ualAccount?.accountName;
     const signOut = useSignOut();
 
+    const isActiveMember = Boolean(member?.profile);
+
     return (
         <Popover
             className={`xl:w-full ${location === "mobile-nav" ? "h-10" : ""}`}
@@ -129,7 +127,9 @@ const PopoverWrapper = ({
                     }}
                 >
                     {isActiveMember && (
-                        <Link href={`${ROUTES.MEMBERS.href}/${accountName}`}>
+                        <Link
+                            href={`${ROUTES.MEMBERS.href}/${member?.accountName}`}
+                        >
                             <a className="block p-6 w-full hover:bg-gray-100 text-left">
                                 <Text>My profile</Text>
                             </a>
diff --git a/packages/webapp/src/members/helpers/formatters.ts b/packages/webapp/src/members/helpers/formatters.ts
index da5eafd83..105f27839 100644
--- a/packages/webapp/src/members/helpers/formatters.ts
+++ b/packages/webapp/src/members/helpers/formatters.ts
@@ -1,4 +1,5 @@
-import { MemberData, MembersQueryNode } from "members/interfaces";
+import { ipfsUrl } from "_app";
+import { Member, MemberData, MembersQueryNode } from "members/interfaces";
 
 /********************************************
  * MICROCHAIN GRAPHQL QUERY RESULT FORMATTERS
@@ -19,3 +20,31 @@ export const formatQueriedMemberData = (
         inductionVideo: data.inductionVideo,
     };
 };
+
+export const formatQueriedMemberDataAsMember = (
+    data: MembersQueryNode
+): Member | undefined => {
+    if (!data) return;
+    return {
+        createdAt: data.createdAt ? new Date(data.createdAt).getTime() : 0,
+        accountName: data.account,
+        profile: {
+            name: data.profile.name,
+            image: {
+                cid: data.profile.img,
+                url: ipfsUrl(data.profile.img),
+                attributions: data.profile.attributions,
+            },
+            bio: data.profile.bio,
+            socialHandles: JSON.parse(data.profile.social),
+        },
+        inductionVideo: {
+            cid: data.inductionVideo,
+            url: ipfsUrl(data.inductionVideo),
+        },
+        encryptionKey: undefined, // Include once exposed
+        participatingInNextElection: data.participating,
+        delegateRank: undefined, // Include once exposed
+        representativeAccountName: undefined, // Include once exposed
+    };
+};
diff --git a/packages/webapp/src/members/hooks/queries.ts b/packages/webapp/src/members/hooks/queries.ts
index 7c48d257a..caaa118a5 100644
--- a/packages/webapp/src/members/hooks/queries.ts
+++ b/packages/webapp/src/members/hooks/queries.ts
@@ -1,12 +1,17 @@
 import { useQuery as useReactQuery } from "react-query";
 import { useQuery as useBoxQuery } from "@edenos/eden-subchain-client/dist/ReactSubchain";
 
-import { formatQueriedMemberData, getNewMembers } from "members";
+import {
+    formatQueriedMemberData,
+    formatQueriedMemberDataAsMember,
+    getNewMembers,
+} from "members";
 import { MemberData, MembersQuery } from "members/interfaces";
+import { useUALAccount } from "_app";
 
 export const MEMBER_DATA_FRAGMENT = `
-    account
     createdAt
+    account
     profile {
         name
         img
@@ -15,6 +20,7 @@ export const MEMBER_DATA_FRAGMENT = `
         bio
     }
     inductionVideo
+    participating
 `;
 
 export const useMembers = () => {
@@ -107,3 +113,26 @@ export const useMembersWithAssets = () => {
 
     return { members, isLoading, isError };
 };
+
+export const useMemberByAccountNameNew = (account: string) => {
+    const result = useBoxQuery<MembersQuery>(`{
+        members(ge: "${account}", le: "${account}") {
+            edges {
+                node {
+                    ${MEMBER_DATA_FRAGMENT}
+                }
+            }
+        }
+    }`);
+
+    if (!result.data) return { ...result, data: null };
+
+    const memberNode = result.data.members.edges[0]?.node;
+    const member = formatQueriedMemberDataAsMember(memberNode) ?? null;
+    return { ...result, data: member };
+};
+
+export const useCurrentMember = () => {
+    const [ualAccount] = useUALAccount();
+    return useMemberByAccountNameNew(ualAccount?.accountName);
+};
diff --git a/packages/webapp/src/members/interfaces.ts b/packages/webapp/src/members/interfaces.ts
index 45c597a8c..520bdb4ba 100644
--- a/packages/webapp/src/members/interfaces.ts
+++ b/packages/webapp/src/members/interfaces.ts
@@ -6,6 +6,38 @@ export type VoteDataQueryOptionsByField = {
     fieldValue: string;
 };
 
+interface ProfileImage {
+    cid: string;
+    url: string;
+    attributions: string;
+}
+
+interface InductionVideo {
+    cid: string;
+    url: string;
+}
+
+interface MemberProfile {
+    name: string;
+    image: ProfileImage;
+    bio: string;
+    socialHandles: EdenNftSocialHandles;
+}
+
+export interface Member {
+    createdAt: number;
+    accountName: string;
+    profile: MemberProfile;
+    inductionVideo: InductionVideo;
+    encryptionKey?: string; // Include once exposed (as optional)
+    // Member's participation status is updated once they lose a round (updated as soon as a new value is known),
+    // ie. a member's opt-in participation status lifetime is only from the start of Round 1
+    // until the end of the Round they lose (or end of the election)
+    participatingInNextElection: boolean;
+    delegateRank?: number; // Include once exposed
+    representativeAccountName?: string; // Include once exposed
+}
+
 export interface MemberData {
     createdAt: number;
     account: string;
@@ -80,4 +112,5 @@ export interface MembersQueryNode {
         bio: string;
     };
     inductionVideo: string;
+    participating: boolean;
 }

From e0d92a88ae425d5a2d61f3edaf64b41b89a2f9f5 Mon Sep 17 00:00:00 2001
From: Brandon Fancher <brandonfancher@gmail.com>
Date: Mon, 22 Nov 2021 17:26:46 -0500
Subject: [PATCH 2/3] Update participating property name on Member.

---
 packages/webapp/src/members/helpers/formatters.ts | 2 +-
 packages/webapp/src/members/hooks/queries.ts      | 4 ++--
 packages/webapp/src/members/interfaces.ts         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/members/helpers/formatters.ts b/packages/webapp/src/members/helpers/formatters.ts
index 105f27839..423a91445 100644
--- a/packages/webapp/src/members/helpers/formatters.ts
+++ b/packages/webapp/src/members/helpers/formatters.ts
@@ -43,7 +43,7 @@ export const formatQueriedMemberDataAsMember = (
             url: ipfsUrl(data.inductionVideo),
         },
         encryptionKey: undefined, // Include once exposed
-        participatingInNextElection: data.participating,
+        participatingInElection: data.participating,
         delegateRank: undefined, // Include once exposed
         representativeAccountName: undefined, // Include once exposed
     };
diff --git a/packages/webapp/src/members/hooks/queries.ts b/packages/webapp/src/members/hooks/queries.ts
index caaa118a5..c2fd4dda8 100644
--- a/packages/webapp/src/members/hooks/queries.ts
+++ b/packages/webapp/src/members/hooks/queries.ts
@@ -114,7 +114,7 @@ export const useMembersWithAssets = () => {
     return { members, isLoading, isError };
 };
 
-export const useMemberByAccountNameNew = (account: string) => {
+export const useMemberByAccountNameAsMember = (account: string) => {
     const result = useBoxQuery<MembersQuery>(`{
         members(ge: "${account}", le: "${account}") {
             edges {
@@ -134,5 +134,5 @@ export const useMemberByAccountNameNew = (account: string) => {
 
 export const useCurrentMember = () => {
     const [ualAccount] = useUALAccount();
-    return useMemberByAccountNameNew(ualAccount?.accountName);
+    return useMemberByAccountNameAsMember(ualAccount?.accountName);
 };
diff --git a/packages/webapp/src/members/interfaces.ts b/packages/webapp/src/members/interfaces.ts
index 520bdb4ba..6a76c5ff2 100644
--- a/packages/webapp/src/members/interfaces.ts
+++ b/packages/webapp/src/members/interfaces.ts
@@ -33,7 +33,7 @@ export interface Member {
     // Member's participation status is updated once they lose a round (updated as soon as a new value is known),
     // ie. a member's opt-in participation status lifetime is only from the start of Round 1
     // until the end of the Round they lose (or end of the election)
-    participatingInNextElection: boolean;
+    participatingInElection: boolean;
     delegateRank?: number; // Include once exposed
     representativeAccountName?: string; // Include once exposed
 }

From e36194f8c0842bb27850831a8bf81733da26e8e2 Mon Sep 17 00:00:00 2001
From: Brandon Fancher <brandonfancher@gmail.com>
Date: Mon, 22 Nov 2021 17:29:36 -0500
Subject: [PATCH 3/3] Member detail page and inductions use new Member model.

---
 .../common/member-card-preview.tsx            | 10 +++---
 .../induction-journeys/invitee-journey.tsx    | 20 +++++------
 .../invitee/profile-preview.tsx               |  8 ++---
 .../inviter-witness-journey.tsx               | 24 ++++++-------
 .../third-party-journey.tsx                   | 20 +++++------
 packages/webapp/src/inductions/utils.ts       | 32 ++++++++++-------
 packages/webapp/src/members/api/members.ts    | 25 +++++++++++--
 .../src/members/components/member-card.tsx    | 22 +++++++-----
 .../members/components/member-collections.tsx | 36 ++++++++++++++-----
 .../members/components/member-holo-card.tsx   | 20 +++++------
 .../components/member-social-links.tsx        | 29 +++++++--------
 packages/webapp/src/pages/members/[id].tsx    |  8 ++---
 12 files changed, 153 insertions(+), 101 deletions(-)

diff --git a/packages/webapp/src/inductions/components/induction-journeys/common/member-card-preview.tsx b/packages/webapp/src/inductions/components/induction-journeys/common/member-card-preview.tsx
index 0f612abd6..c21708faf 100644
--- a/packages/webapp/src/inductions/components/induction-journeys/common/member-card-preview.tsx
+++ b/packages/webapp/src/inductions/components/induction-journeys/common/member-card-preview.tsx
@@ -1,19 +1,19 @@
 import { Card } from "_app";
-import { MemberData, MemberHoloCard, MemberCard } from "members";
+import { Member, MemberHoloCard, MemberCard } from "members";
 
 export const MemberCardPreview = ({
     cardTitle = "Invitee information",
-    memberData,
+    member,
 }: {
     cardTitle?: string;
-    memberData: MemberData;
+    member: Member;
 }) => (
     <Card title={cardTitle} titleSize={2}>
         <div className="flex justify-center items-center space-y-10 xl:space-y-0 xl:space-x-10 flex-col xl:flex-row">
             <div className="max-w-xl">
-                <MemberHoloCard member={memberData} inducted={false} />
+                <MemberHoloCard member={member} inducted={false} />
             </div>
-            <MemberCard member={memberData} />
+            <MemberCard member={member} />
         </div>
     </Card>
 );
diff --git a/packages/webapp/src/inductions/components/induction-journeys/invitee-journey.tsx b/packages/webapp/src/inductions/components/induction-journeys/invitee-journey.tsx
index ef218dbcd..c046ab655 100644
--- a/packages/webapp/src/inductions/components/induction-journeys/invitee-journey.tsx
+++ b/packages/webapp/src/inductions/components/induction-journeys/invitee-journey.tsx
@@ -1,10 +1,10 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
 
 import { Heading, Link, Text, useIsCommunityActive } from "_app";
-import { MemberData } from "members";
+import { Member } from "members";
 
 import {
-    convertPendingProfileToMemberData,
+    convertPendingProfileToMember,
     EndorsementsStatus,
     InductionExpiresIn,
     InductionStepGenesis,
@@ -96,7 +96,7 @@ export default InviteeJourney;
 
 interface ContainerProps {
     step: InductionStepInvitee | InductionStepGenesis;
-    memberPreview?: MemberData;
+    memberPreview?: Member;
     children: React.ReactNode;
 }
 
@@ -105,7 +105,7 @@ const Container = ({ step, memberPreview, children }: ContainerProps) => (
         <InductionStepsContainer step={step}>
             {children}
         </InductionStepsContainer>
-        {memberPreview && <MemberCardPreview memberData={memberPreview} />}
+        {memberPreview && <MemberCardPreview member={memberPreview} />}
     </>
 );
 
@@ -188,7 +188,7 @@ const PendingCeremonyVideoStep = ({
     induction,
     setIsRevisitingProfile,
 }: PendingCeremonyVideoStepProps) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -196,7 +196,7 @@ const PendingCeremonyVideoStep = ({
     return (
         <Container
             step={InductionStepInvitee.PendingVideoAndEndorsements}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <WaitingForVideo induction={induction} />
             <Text className="my-3">
@@ -220,7 +220,7 @@ const PendingEndorsementStep = ({
     endorsements,
     setIsRevisitingProfile,
 }: PendingCompletionStepProps) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -228,7 +228,7 @@ const PendingEndorsementStep = ({
     return (
         <Container
             step={InductionStepInvitee.PendingVideoAndEndorsements}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <Heading size={1} className="mb-2">
                 Endorsements
@@ -256,7 +256,7 @@ const PendingDonationStep = ({
     endorsements,
     setIsRevisitingProfile,
 }: PendingCompletionStepProps) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -269,7 +269,7 @@ const PendingDonationStep = ({
                     ? InductionStepInvitee.Donate
                     : InductionStepGenesis.Donate
             }
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <Heading size={1} className="mb-2">
                 Pending donation
diff --git a/packages/webapp/src/inductions/components/induction-journeys/invitee/profile-preview.tsx b/packages/webapp/src/inductions/components/induction-journeys/invitee/profile-preview.tsx
index ad6117b69..8a1631b1e 100644
--- a/packages/webapp/src/inductions/components/induction-journeys/invitee/profile-preview.tsx
+++ b/packages/webapp/src/inductions/components/induction-journeys/invitee/profile-preview.tsx
@@ -11,7 +11,7 @@ import {
     useUALAccount,
 } from "_app";
 import {
-    convertPendingProfileToMemberData,
+    convertPendingProfileToMember,
     MemberCardPreview,
     setInductionProfileTransaction,
 } from "inductions";
@@ -70,7 +70,7 @@ export const InductionProfilePreview = ({
 
             setDidSubmitProfile(true);
         } catch (error) {
-            onError(error, "Unable to set the profile");
+            onError(error as Error, "Unable to set the profile");
         }
         setIsLoading(false);
     };
@@ -81,7 +81,7 @@ export const InductionProfilePreview = ({
             const img = URL.createObjectURL(selectedPhoto);
             pendingProfile = { ...profileInfo!, img };
         }
-        return convertPendingProfileToMemberData(
+        return convertPendingProfileToMember(
             pendingProfile!,
             induction.invitee
         );
@@ -89,7 +89,7 @@ export const InductionProfilePreview = ({
 
     return (
         <>
-            <MemberCardPreview cardTitle="" memberData={memberCardData} />
+            <MemberCardPreview cardTitle="" member={memberCardData} />
             <Card title="Review your profile">
                 <form
                     onSubmit={submitInductionProfileTransaction}
diff --git a/packages/webapp/src/inductions/components/induction-journeys/inviter-witness-journey.tsx b/packages/webapp/src/inductions/components/induction-journeys/inviter-witness-journey.tsx
index 7e5590f33..4315bee32 100644
--- a/packages/webapp/src/inductions/components/induction-journeys/inviter-witness-journey.tsx
+++ b/packages/webapp/src/inductions/components/induction-journeys/inviter-witness-journey.tsx
@@ -2,9 +2,9 @@ import React, { Dispatch, SetStateAction, useState } from "react";
 
 import { Heading, Link, Text, useIsCommunityActive, useUALAccount } from "_app";
 
-import { MemberData } from "members";
+import { Member } from "members";
 import {
-    convertPendingProfileToMemberData,
+    convertPendingProfileToMember,
     EndorsementsStatus,
     InductionExpiresIn,
     InductionStepGenesis,
@@ -87,7 +87,7 @@ export default InviterWitnessJourney;
 
 interface ContainerProps {
     step: InductionStepInviter | InductionStepGenesis;
-    memberPreview?: MemberData;
+    memberPreview?: Member;
     children: React.ReactNode;
 }
 
@@ -96,7 +96,7 @@ const Container = ({ step, memberPreview, children }: ContainerProps) => (
         <InductionStepsContainer step={step}>
             {children}
         </InductionStepsContainer>
-        {memberPreview && <MemberCardPreview memberData={memberPreview} />}
+        {memberPreview && <MemberCardPreview member={memberPreview} />}
     </>
 );
 
@@ -125,7 +125,7 @@ const RecommendReview = ({
 );
 
 const SubmittedVideoStep = ({ induction }: { induction: Induction }) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -133,7 +133,7 @@ const SubmittedVideoStep = ({ induction }: { induction: Induction }) => {
     return (
         <Container
             step={InductionStepInviter.VideoAndEndorse}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <InductionVideoSubmitConfirmation />
         </Container>
@@ -151,7 +151,7 @@ const VideoStep = ({
     isRevisitingVideo,
     setSubmittedVideo,
 }: VideoStepProps) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -159,7 +159,7 @@ const VideoStep = ({
     return (
         <Container
             step={InductionStepInviter.VideoAndEndorse}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <InductionVideoFormContainer
                 induction={induction}
@@ -197,7 +197,7 @@ const PendingEndorsementStep = ({
     setIsRevisitingVideo,
 }: PendingCompletionProps) => {
     const [ualAccount] = useUALAccount();
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -209,7 +209,7 @@ const PendingEndorsementStep = ({
     return (
         <Container
             step={InductionStepInviter.VideoAndEndorse}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <Heading size={1} className="mb-2">
                 Endorsements
@@ -241,7 +241,7 @@ const PendingDonationStep = ({
     setIsRevisitingVideo,
 }: PendingCompletionProps) => {
     const { data: isCommunityActive } = useIsCommunityActive();
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -253,7 +253,7 @@ const PendingDonationStep = ({
                     ? InductionStepInviter.PendingDonation
                     : InductionStepGenesis.Donate
             }
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <Heading size={1} className="mb-2">
                 Pending donation
diff --git a/packages/webapp/src/inductions/components/induction-journeys/third-party-journey.tsx b/packages/webapp/src/inductions/components/induction-journeys/third-party-journey.tsx
index f3b9359a7..d1729a262 100644
--- a/packages/webapp/src/inductions/components/induction-journeys/third-party-journey.tsx
+++ b/packages/webapp/src/inductions/components/induction-journeys/third-party-journey.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 import { Heading, Text, useIsCommunityActive } from "_app";
-import { MemberData } from "members";
+import { Member } from "members";
 import {
-    convertPendingProfileToMemberData,
+    convertPendingProfileToMember,
     EndorsementsStatus,
     InductionExpiresIn,
     InductionStepGenesis,
@@ -17,7 +17,7 @@ import { Endorsement, Induction, InductionStatus } from "inductions/interfaces";
 
 interface ContainerProps {
     step: InductionStepInvitee | InductionStepGenesis;
-    memberPreview?: MemberData;
+    memberPreview?: Member;
     children: React.ReactNode;
 }
 
@@ -26,7 +26,7 @@ const Container = ({ step, memberPreview, children }: ContainerProps) => (
         <InductionStepsContainer step={step}>
             {children}
         </InductionStepsContainer>
-        {memberPreview && <MemberCardPreview memberData={memberPreview} />}
+        {memberPreview && <MemberCardPreview member={memberPreview} />}
     </>
 );
 
@@ -83,7 +83,7 @@ const PendingProfileStep = ({ induction }: { induction: Induction }) => {
 };
 
 const PendingVideoStep = ({ induction }: { induction: Induction }) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -91,7 +91,7 @@ const PendingVideoStep = ({ induction }: { induction: Induction }) => {
     return (
         <Container
             step={InductionStepInvitee.PendingVideoAndEndorsements}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <WaitingForVideo induction={induction} />
         </Container>
@@ -107,7 +107,7 @@ const PendingEndorsementStep = ({
     induction,
     endorsements,
 }: PendingCompletionProps) => {
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -115,7 +115,7 @@ const PendingEndorsementStep = ({
     return (
         <Container
             step={InductionStepInvitee.PendingVideoAndEndorsements}
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <Heading size={1} className="mb-2">
                 Endorsements
@@ -132,7 +132,7 @@ const PendingDonationStep = ({
     endorsements,
 }: PendingCompletionProps) => {
     const { data: isCommunityActive } = useIsCommunityActive();
-    const memberData = convertPendingProfileToMemberData(
+    const member = convertPendingProfileToMember(
         induction.new_member_profile,
         induction.invitee,
         induction.video
@@ -144,7 +144,7 @@ const PendingDonationStep = ({
                     ? InductionStepInvitee.Donate
                     : InductionStepGenesis.Donate
             }
-            memberPreview={memberData}
+            memberPreview={member}
         >
             <Heading size={1} className="mb-2">
                 Pending donation
diff --git a/packages/webapp/src/inductions/utils.ts b/packages/webapp/src/inductions/utils.ts
index 6564b6b0a..e714ffc75 100644
--- a/packages/webapp/src/inductions/utils.ts
+++ b/packages/webapp/src/inductions/utils.ts
@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 
-import { eosBlockTimestampISO } from "_app";
-import { MemberData, memberDataDefaults } from "members";
+import { eosBlockTimestampISO, ipfsUrl } from "_app";
+import { Member, memberDefaults } from "members";
 import {
     Endorsement,
     Induction,
@@ -12,19 +12,27 @@ import {
 
 const INDUCTION_EXPIRATION_DAYS = 7;
 
-export const convertPendingProfileToMemberData = (
+export const convertPendingProfileToMember = (
     profile: NewMemberProfile,
     inviteeChainAccountName: string,
     inductionVideo?: string
-): MemberData => ({
-    ...memberDataDefaults,
-    name: profile.name,
-    image: profile.img,
-    account: inviteeChainAccountName,
-    bio: profile.bio,
-    socialHandles: JSON.parse(profile.social || "{}"),
-    inductionVideo: inductionVideo || "",
-    attributions: profile.attributions || "",
+): Member => ({
+    ...memberDefaults,
+    accountName: inviteeChainAccountName,
+    profile: {
+        name: profile.name,
+        image: {
+            cid: profile.img,
+            url: ipfsUrl(profile.img),
+            attributions: profile.attributions || "",
+        },
+        bio: profile.bio,
+        socialHandles: JSON.parse(profile.social || "{}"),
+    },
+    inductionVideo: {
+        cid: inductionVideo || "",
+        url: inductionVideo ? ipfsUrl(inductionVideo) : "",
+    },
 });
 
 export const getInductionStatus = (
diff --git a/packages/webapp/src/members/api/members.ts b/packages/webapp/src/members/api/members.ts
index 630b8d71b..807051651 100644
--- a/packages/webapp/src/members/api/members.ts
+++ b/packages/webapp/src/members/api/members.ts
@@ -7,7 +7,7 @@ import {
     TemplateData,
 } from "nfts/interfaces";
 
-import { MemberData } from "../interfaces";
+import { Member, MemberData } from "../interfaces";
 import { fixtureMemberData } from "./fixtures";
 
 export const getMembers = async (
@@ -48,7 +48,7 @@ export const getCollection = async (account: string): Promise<MemberData[]> => {
     return members.sort((a, b) => a.createdAt - b.createdAt);
 };
 
-export const memberDataDefaults = {
+export const memberDataDefaults: MemberData = {
     templateId: 0,
     name: "",
     image: "",
@@ -59,6 +59,27 @@ export const memberDataDefaults = {
     attributions: "",
     createdAt: 0,
 };
+
+export const memberDefaults: Member = {
+    createdAt: 0,
+    accountName: "",
+    profile: {
+        name: "",
+        image: {
+            cid: "",
+            url: "",
+            attributions: "",
+        },
+        bio: "",
+        socialHandles: {},
+    },
+    inductionVideo: {
+        cid: "",
+        url: "",
+    },
+    participatingInElection: false,
+};
+
 const convertAtomicTemplateToMember = (data: TemplateData): MemberData => ({
     ...memberDataDefaults,
     templateId: parseInt(data.template_id),
diff --git a/packages/webapp/src/members/components/member-card.tsx b/packages/webapp/src/members/components/member-card.tsx
index 646962d9f..c3e0b7dbc 100644
--- a/packages/webapp/src/members/components/member-card.tsx
+++ b/packages/webapp/src/members/components/member-card.tsx
@@ -1,37 +1,43 @@
 import React from "react";
 import { FaVideo } from "react-icons/fa";
 
-import { SocialButton, ipfsUrl, Container } from "_app";
+import { SocialButton, Container } from "_app";
 
-import { MemberData } from "../interfaces";
+import { Member } from "../interfaces";
 import { MemberBio } from "./member-bio";
 import { MemberSocialLinks } from "./member-social-links";
 import { TokenBalance } from "./token-balance";
 
 interface Props {
-    member: MemberData;
+    member: Member;
     showBalance?: boolean;
 }
 
 export const MemberCard = ({ member, showBalance }: Props) => {
     return (
-        <div data-testid={`member-card-${member.account}`} className="divide-y">
+        <div
+            data-testid={`member-card-${member.accountName}`}
+            className="divide-y"
+        >
             <Container>
-                {showBalance && <TokenBalance account={member.account} />}
+                {showBalance && <TokenBalance account={member.accountName} />}
             </Container>
             <Container>
-                <MemberBio bio={member.bio} />
+                <MemberBio bio={member.profile.bio} />
                 {member.inductionVideo && (
                     <SocialButton
                         handle="Induction Ceremony"
                         icon={FaVideo}
-                        href={ipfsUrl(member.inductionVideo)}
+                        href={member.inductionVideo.url}
                         className="mt-4"
                     />
                 )}
             </Container>
             <Container>
-                <MemberSocialLinks member={member} />
+                <MemberSocialLinks
+                    accountName={member.accountName}
+                    socialHandles={member.profile.socialHandles}
+                />
             </Container>
         </div>
     );
diff --git a/packages/webapp/src/members/components/member-collections.tsx b/packages/webapp/src/members/components/member-collections.tsx
index 85e5dfd73..a875b2c4a 100644
--- a/packages/webapp/src/members/components/member-collections.tsx
+++ b/packages/webapp/src/members/components/member-collections.tsx
@@ -4,11 +4,11 @@ import { Tab } from "@headlessui/react";
 import { Container, LoadingContainer, MessageContainer, Text } from "_app";
 import { MemberChip, MembersGrid } from "members";
 
-import { MemberData } from "../interfaces";
+import { Member } from "../interfaces";
 import { useMemberNFTCollection, useMemberNFTCollectors } from "nfts/hooks";
 
 interface Props {
-    member: MemberData;
+    member: Member;
 }
 
 export const MemberCollections = ({ member }: Props) => {
@@ -20,10 +20,16 @@ export const MemberCollections = ({ member }: Props) => {
             </Tab.List>
             <Tab.Panels>
                 <Tab.Panel>
-                    <Collection member={member} />
+                    <Collection
+                        accountName={member.accountName}
+                        name={member.profile.name}
+                    />
                 </Tab.Panel>
                 <Tab.Panel>
-                    <Collectors member={member} />
+                    <Collectors
+                        accountName={member.accountName}
+                        name={member.profile.name}
+                    />
                 </Tab.Panel>
             </Tab.Panels>
         </Tab.Group>
@@ -46,8 +52,16 @@ const StyledTab = ({ children }: { children: React.ReactNode }) => (
     </Tab>
 );
 
-const Collection = ({ member: { account, name } }: Props) => {
-    const { data: nfts, isLoading, isError } = useMemberNFTCollection(account);
+const Collection = ({
+    accountName,
+    name,
+}: {
+    accountName: string;
+    name: string;
+}) => {
+    const { data: nfts, isLoading, isError } = useMemberNFTCollection(
+        accountName
+    );
 
     if (isLoading) return <LoadingContainer />;
 
@@ -89,9 +103,15 @@ const Collection = ({ member: { account, name } }: Props) => {
     );
 };
 
-const Collectors = ({ member: { account, name } }: Props) => {
+const Collectors = ({
+    accountName,
+    name,
+}: {
+    accountName: string;
+    name: string;
+}) => {
     const { data: collectors, isLoading, isError } = useMemberNFTCollectors(
-        account
+        accountName
     );
 
     if (isLoading) return <LoadingContainer />;
diff --git a/packages/webapp/src/members/components/member-holo-card.tsx b/packages/webapp/src/members/components/member-holo-card.tsx
index 723c98e7d..8b353dd30 100644
--- a/packages/webapp/src/members/components/member-holo-card.tsx
+++ b/packages/webapp/src/members/components/member-holo-card.tsx
@@ -1,11 +1,11 @@
 import dayjs from "dayjs";
 import useDimensions from "react-cool-dimensions";
 
-import { Image, ipfsUrl } from "_app";
-import { MemberData } from "../interfaces";
+import { Image } from "_app";
+import { Member } from "../interfaces";
 
 interface Props {
-    member: MemberData;
+    member: Member;
     inducted?: boolean;
     className?: string;
 }
@@ -31,20 +31,16 @@ export const MemberHoloCard = ({
                     style={{ padding: width * 0.047 }}
                 >
                     <Image
-                        src={
-                            member.image.startsWith("blob:")
-                                ? member.image
-                                : ipfsUrl(member.image)
-                        }
+                        src={member.profile.image.url}
                         fallbackImage={"/images/avatars/fallback/avatar-6.svg"}
                         className="rounded-full object-cover bg-white"
-                        title={`Member image for ${member.name}.`}
+                        title={`Member image for ${member.profile.name}.`}
                         style={{
                             boxShadow: "0px 3px 6px rgba(0, 0, 0, 0.68)",
                             width: width / 4,
                             height: width / 4,
                         }}
-                        key={member.image}
+                        key={member.profile.image.url}
                     />
                     <div>
                         {inducted && (
@@ -59,13 +55,13 @@ export const MemberHoloCard = ({
                             className="font-medium leading-none"
                             style={{ fontSize: width * 0.058 }}
                         >
-                            {member.name}
+                            {member.profile.name}
                         </p>
                         <p
                             className="font-light sm:tracking-wide"
                             style={{ fontSize: width * 0.035 }}
                         >
-                            Eden: @{member.account}
+                            Eden: @{member.accountName}
                         </p>
                     </div>
                 </div>
diff --git a/packages/webapp/src/members/components/member-social-links.tsx b/packages/webapp/src/members/components/member-social-links.tsx
index 416719d53..5e080ff54 100644
--- a/packages/webapp/src/members/components/member-social-links.tsx
+++ b/packages/webapp/src/members/components/member-social-links.tsx
@@ -5,40 +5,41 @@ import { IoChatbubblesOutline } from "react-icons/io5";
 import { explorerAccountUrl, SocialButton } from "_app";
 import { EosCommunityIcon } from "_app/ui/icons";
 
-import { MemberData } from "../interfaces";
 import { getValidSocialLink } from "../helpers/social-links";
+import { EdenNftSocialHandles } from "nfts";
 
 interface Props {
-    member: MemberData;
+    accountName: string;
+    socialHandles: EdenNftSocialHandles;
 }
 
-export const MemberSocialLinks = ({ member }: Props) => {
-    const linkedinHandle = getValidSocialLink(member.socialHandles.linkedin);
-    const facebookHandle = getValidSocialLink(member.socialHandles.facebook);
-    const twitterHandle = getValidSocialLink(member.socialHandles.twitter);
-    const telegramHandle = getValidSocialLink(member.socialHandles.telegram);
+export const MemberSocialLinks = ({ accountName, socialHandles }: Props) => {
+    const linkedinHandle = getValidSocialLink(socialHandles.linkedin);
+    const facebookHandle = getValidSocialLink(socialHandles.facebook);
+    const twitterHandle = getValidSocialLink(socialHandles.twitter);
+    const telegramHandle = getValidSocialLink(socialHandles.telegram);
     return (
         <div
             className="grid gap-y-2 sm:justify-between text-sm"
             style={{ gridTemplateColumns: "repeat(auto-fill, 12.5rem)" }}
         >
             <SocialButton
-                handle={member.account}
+                handle={accountName}
                 icon={EosCommunityIcon}
-                href={explorerAccountUrl(member.account)}
+                href={explorerAccountUrl(accountName)}
             />
-            {member.socialHandles.eosCommunity && (
+            {socialHandles.eosCommunity && (
                 <SocialButton
-                    handle={member.socialHandles.eosCommunity}
+                    handle={socialHandles.eosCommunity}
                     icon={IoChatbubblesOutline}
-                    href={`https://forums.eoscommunity.org/u/${member.socialHandles.eosCommunity}`}
+                    href={`https://forums.eoscommunity.org/u/${socialHandles.eosCommunity}`}
                 />
             )}
-            {member.socialHandles.blog && (
+            {socialHandles.blog && (
                 <SocialButton
                     handle="Website"
                     icon={HiOutlineLink}
-                    href={urlify(member.socialHandles.blog)}
+                    href={urlify(socialHandles.blog)}
                 />
             )}
             {twitterHandle && (
diff --git a/packages/webapp/src/pages/members/[id].tsx b/packages/webapp/src/pages/members/[id].tsx
index ae63227bf..8c807ac5c 100644
--- a/packages/webapp/src/pages/members/[id].tsx
+++ b/packages/webapp/src/pages/members/[id].tsx
@@ -12,13 +12,13 @@ import {
     MemberCard,
     MemberCollections,
     MemberHoloCard,
-    useMemberByAccountName,
+    useMemberByAccountNameAsMember,
 } from "members";
 import { FundsAvailableCTA } from "members/components";
 
 export const MemberPage = () => {
     const router = useRouter();
-    const { data: member, isLoading, isError } = useMemberByAccountName(
+    const { data: member, isLoading, isError } = useMemberByAccountNameAsMember(
         router.query.id as string
     );
 
@@ -42,8 +42,8 @@ export const MemberPage = () => {
     }
 
     return (
-        <MemberPageContainer pageTitle={`${member.name}'s Profile`}>
-            <FundsAvailableCTA account={member.account} />
+        <MemberPageContainer pageTitle={`${member.profile.name}'s Profile`}>
+            <FundsAvailableCTA account={member.accountName} />
             <Container className="flex justify-center">
                 <MemberHoloCard member={member} className="max-w-xl" />
             </Container>