-
Notifications
You must be signed in to change notification settings - Fork 68
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.
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
#4232 signer modal component #4362
#4232 signer modal component #4362
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
Great, thanks. Will check it |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@IlyaSmiyukha great job creating the modal and the transaction flow, this can be painful write.
I have a few suggestion but most importantly this PR still needs to implement the BE mutation, please feel free to ask me on discord if you're stuck there.
Also please add a story for the EmailSubscriptionModal
.
packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
Outdated
Show resolved
Hide resolved
packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
Outdated
Show resolved
Hide resolved
packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
Outdated
Show resolved
Hide resolved
packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx
Outdated
Show resolved
Hide resolved
|
||
import { EmailSubscriptionForm } from './types' | ||
|
||
export function createBatch(transactionParams: EmailSubscriptionForm, api: Api | undefined) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The "transaction" will actually just be a GQL mutation to the BE endpoint (because these membership data won't be stored on chain for confidentiality reasons), so this function won't be useful AFAICS.
packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@IlyaSmiyukha if I understand correctly you want to implement the backend mutation in a different PR. I think it's a good idea. You could also choose to implement the signature step in a different PR and just keep the "prepare" step and the "transaction" step (just an infinite WaitModal
for now).
This feature is pretty complex feature so I think splitting it into 3 PRs makes sense. WDYT ?
packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.stories.tsx
Outdated
Show resolved
Hide resolved
return ( | ||
<SignTransactionModal | ||
buttonText="Sign and subscribe" | ||
transaction={createBatch(state.context.form, api)} | ||
signer={member.controllerAccount} | ||
service={state.children.transaction} | ||
> | ||
<TextMedium>You subscribed to emal.</TextMedium> | ||
</SignTransactionModal> | ||
) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here too the logic shoiuld be similar to @common/modals/OnBoardingModal/OnBoardingModal
:
return ( | |
<SignTransactionModal | |
buttonText="Sign and subscribe" | |
transaction={createBatch(state.context.form, api)} | |
signer={member.controllerAccount} | |
service={state.children.transaction} | |
> | |
<TextMedium>You subscribed to emal.</TextMedium> | |
</SignTransactionModal> | |
) | |
return ( | |
<WaitModal | |
onClose={hideModal} | |
title="Pending transaction" | |
description="Registering email address..." | |
/> | |
) |
packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts
Outdated
Show resolved
Hide resolved
modalData: { member }, | ||
} = useModal<EmailSubscriptionModalCall>() | ||
const [state, send] = useMachine(EmailSubscriptionMachine) | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the sign modal can be triggered by simply calling:
const signature = await api.sign(member.controllerAccount, `${member.id}:${timestamp}`)
Keep in mind the signup
mutation is:
signup(memberId: String! signature: String! timestamp: BigInt! name: String! email: String): String
(As documented in the backend readme). So the signature and timestamp have to be sent too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@IlyaSmiyukha I just realized that this PR targets dev
but it should target backend
.
Please:
- Retarget the PR (maybe you'll need to rebase the changes).
- Address the change requests below.
- Remove
@/memberships/modals/EmailSubscriptionModal/utils.ts
.
Then this PR can be merged, and you can implement the signature
step in a new PR.
const signModal = async () => { | ||
const timestamp = new Date() | ||
api?.sign(member.controllerAccount, `${member.id}:${timestamp}`) | ||
} | ||
|
||
useEffect(() => { | ||
if (state.matches('signature')) { | ||
signModal() | ||
} | ||
}, [state]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is failing because the sign method is not implemented on the "ProxyApi". I think the best would be to implement this method as well as this logic in another PR.
if (state.matches('transaction')) { | ||
return <WaitModal onClose={hideModal} title="Pending transaction" description="Registering email address..." /> | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the meantime this loader can show for both the signature and transaction steps:
if (state.matches('transaction')) { | |
return <WaitModal onClose={hideModal} title="Pending transaction" description="Registering email address..." /> | |
} | |
if (state.matches('signature') || state.matches('transaction')) { | |
return <WaitModal onClose={hideModal} title="Pending transaction" description="Registering email address..." /> | |
} |
if (state.matches('prepare')) { | ||
return ( | ||
<EmailSubscriptionFormModal | ||
onClose={hideModal} | ||
onSubmit={(params: EmailSubscriptionForm) => send('DONE', { form: params })} | ||
member={member} | ||
/> | ||
) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This step doesn't exist anymore
interface TransactionContext { | ||
signature?: EventRecord[] | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this is relevant here
import { EmailSubscriptionForm } from './types' | ||
|
||
interface EmailSubscriptionContext { | ||
form?: EmailSubscriptionForm |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The context should include the email, the timestamp, and the signature
closes #4232
@thesan @chrlschwb
Check pls PR. I created a modal and stuck a bit with the backend. I'm not sure how properly connect the new API to the current frontend