Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: APP-163 custodial wallet design implementation #2470

Merged
merged 15 commits into from
Sep 17, 2024
Merged

feat: APP-163 custodial wallet design implementation #2470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
39560c4
refactor: make name prop optional
Sep 11, 2024
95541c8
feat: update AccountById query with custodialAddress and generate Typ…
Sep 11, 2024
6b95f79
feat: display custodial address in UserAccountSettings
Sep 11, 2024
ea3eb85
feat: update user's settings section padding
Sep 11, 2024
5cc31ab
fix: error with missing providers in UserAccountSettings stories
Sep 11, 2024
4ab9d3b
feat: add custodial address to UserAccountSettings stories
Sep 11, 2024
bf25800
chore: update .po files
Sep 11, 2024
f3ad9a5
chore: update UserAccountSettings with correct URL in learn more link
Sep 11, 2024
fd77a5f
reafactor: move useEmailConfirmationData to the parent component
Sep 16, 2024
3a37be5
refactor: remove ReactQuery, AuthApollo and Analytics providers from …
Sep 16, 2024
97d95a7
feat: update UserAccountSettings stories
Sep 16, 2024
098bc7b
chore: update .po files
Sep 16, 2024
779ba67
fix: conflict error
Sep 16, 2024
484d026
chore: update .po files
Sep 16, 2024
74373e3
fix: lingui error
Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,512 changes: 1,196 additions & 1,316 deletions web-marketplace/graphql.schema.json
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions ...etplace/src/components/organisms/UserAccountSettings/UserAccountSettings.ConnectField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { Body } from 'web-components/src/components/typography';

import { SocialProviderInfo } from './UserAccountSettings.types';

type Props = SocialProviderInfo & {
type Props = Omit<SocialProviderInfo, 'name'> & {
name?: string;
connect?: () => void;
disconnect?: () => void;
address?: string;
Expand All @@ -29,9 +30,11 @@ export const ConnectField = ({
return (
<div className="flex flex-row justify-between flex-wrap gap-y-10">
<div className="flex flex-col gap-5">
<Body size="md" color="info.dark-grey">
{name}
</Body>
{name && (
<Body size="md" color="info.dark-grey">
{name}
</Body>
)}
{address ? (
<AddressWidget address={address} />
) : (
Expand Down
83 changes: 63 additions & 20 deletions web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,76 @@ import { Title } from 'web-components/src/components/typography';

import { UserAccountSettings } from './UserAccountSettings';

const meta: Meta<typeof UserAccountSettings> = {
title: 'Marketplace/Organisms/UserAccountSettings',
component: UserAccountSettings,
args: {
email: '[email protected]',
socialProviders: [
{
name: 'Google',
connect: action('connect google'),
},
{
name: 'LinkedIn',
disconnect: async () => {
action('disconnect linkedin')();
},
},
],
walletProvider: {
address: 'regenfoobar3792723djghsdg',
const args = {
email: '',
socialProviders: [
{
name: 'Google',
connect: action('connect google'),
},
{
name: 'LinkedIn',
disconnect: async () => {
action('disconnect wallet')();
action('disconnect linkedin')();
},
},
],
walletProvider: {
address: 'regenfoobar3792723djghsdg',
disconnect: async () => {
action('disconnect wallet')();
},
},
custodialAddress: 'mock-regen-custodial-address',
emailConfirmationData: {
isConfirmationModalOpen: false,
email: '',
emailModalError: '',
resendTimeLeft: null,
onConfirmationModalClose: action('close confirmation modal'),
onMailCodeChange: async (passcode: string) => {
action('mail code change')(passcode);
},
onResendPasscode: async () => {
action('resend passcode')();
return Promise.resolve();
},
onEmailSubmit: async ({
email,
callback,
}: {
email: string;
callback?: () => void;
}) => {
action('email submit')({ email, callback });
return Promise.resolve();
},
isConnectedEmailErrorModalOpen: false,
onConnectedEmailErrorModalClose: action(
'close connected email error modal',
),
},
};

const meta: Meta<typeof UserAccountSettings> = {
title: 'Marketplace/Organisms/UserAccountSettings',
component: UserAccountSettings,
};

export default meta;
type Story = StoryObj<typeof UserAccountSettings>;

export const Default: Story = {};

Default.args = args;

export const WithEmail: Story = {};

WithEmail.args = {
...args,
email: '[email protected]',
};

export const Width375: Story = {
name: 'Wrapped in a 375px mobile container',
render: args => (
Expand All @@ -50,6 +89,8 @@ export const Width375: Story = {
),
};

Width375.args = args;

export const Width560: Story = {
name: 'Wrapped in a 560px container',
render: args => (
Expand All @@ -63,3 +104,5 @@ export const Width560: Story = {
</div>
),
};

Width560.args = args;
33 changes: 30 additions & 3 deletions web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import TextField from 'web-components/src/components/inputs/new/TextField/TextFi
import { EmailConfirmationModal } from 'web-components/src/components/modal/EmailConfirmationModal/EmailConfirmationModal';
import { Body, Subtitle } from 'web-components/src/components/typography';

import { Link } from 'components/atoms';
import Form from 'components/molecules/Form/Form';
import { useZodForm } from 'components/molecules/Form/hook/useZodForm';

Expand All @@ -16,11 +17,9 @@ import {
} from '../LoginButton/LoginButton.constants';
import { getResendCodeButtonLink } from '../LoginButton/utils/getResendCodeButtonLink';
import { getResendCodeLabel } from '../LoginButton/utils/getResendCodeLabel';
import { useEmailConfirmationData } from '../LoginFlow/hooks/useEmailConfirmationData';
import { emailFormSchema } from '../LoginModal/LoginModal.schema';
import { ConnectedEmailErrorModal } from './UserAccountSettings.ConnectedEmailErrorModal';
import { ConnectField } from './UserAccountSettings.ConnectField';
import { EMAIL_ADDED } from './UserAccountSettings.constants';
import { UserAccountSettingsProps } from './UserAccountSettings.types';

/** UserAccountSettings is a component for displaying and managing a user's
Expand All @@ -33,6 +32,8 @@ export const UserAccountSettings = ({
email: initialEmail,
socialProviders,
walletProvider,
custodialAddress,
emailConfirmationData,
}: UserAccountSettingsProps) => {
const { _ } = useLingui();
const {
Expand All @@ -46,7 +47,8 @@ export const UserAccountSettings = ({
onEmailSubmit,
isConnectedEmailErrorModalOpen,
onConnectedEmailErrorModalClose,
} = useEmailConfirmationData({ emailConfirmationText: _(EMAIL_ADDED) });
} = emailConfirmationData;

const form = useZodForm({
schema: emailFormSchema,
defaultValues: {
Expand Down Expand Up @@ -152,6 +154,31 @@ export const UserAccountSettings = ({
{/* eslint-disable-next-line lingui/no-unlocalized-strings */}
<ConnectField name="Keplr" {...walletProvider} />
</div>
{custodialAddress && (
<div className="flex flex-col gap-30">
<div className="flex flex-col gap-10">
<Subtitle size="lg">
<Trans>Regen impact address</Trans>
</Subtitle>
<Body size="sm" color="info.dark-grey">
<Trans>
In order to buy and retire ecocredits using credit card payment,
we may generate a dedicated hosted wallet address to use as the
recipient of the retired blockchain credits. Please do not send
funds or tradable credits to this address, as you will not have
the ability to initiate transactions from this account.
<Link
className="inline ml-5"
href="https://guides.regen.network/guides/regen-marketplace-buyers-guides/ecocredits/buy-ecocredits"
>
Learn more»
</Link>
</Trans>
</Body>
</div>
<ConnectField address={custodialAddress} />
</div>
)}
</div>
);
};
29 changes: 29 additions & 0 deletions web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import { AccountByIdQuery } from 'generated/graphql';

import { useEmailConfirmationData } from '../LoginFlow/hooks/useEmailConfirmationData';

/**
* Describes the props for the UserAccountSettings component.
*/
Expand All @@ -16,6 +20,31 @@ export interface UserAccountSettingsProps {
* The wallet provider that the user can connect to.
*/
walletProvider: WalletProviderInfo;

/**
* The current user's custodial address.
*/
custodialAddress: NonNullable<
AccountByIdQuery['accountById']
>['custodialAddress'];

/**
* Methods and data related to email confirmation,
* returned by the useEmailConfirmationData hook.
*/
emailConfirmationData: Pick<
ReturnType<typeof useEmailConfirmationData>,
| 'isConfirmationModalOpen'
| 'email'
| 'emailModalError'
| 'resendTimeLeft'
| 'onConfirmationModalClose'
| 'onMailCodeChange'
| 'onResendPasscode'
| 'onEmailSubmit'
| 'isConnectedEmailErrorModalOpen'
| 'onConnectedEmailErrorModalClose'
>;
}

type DisconnectedState = {
Expand Down
Loading