#4232 signer modal component #4362

IlyaSmiyukha · 2023-04-21T07:04:26Z

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

vercel · 2023-04-21T07:04:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
dao	❌ Failed (Inspect)		Jun 10, 2023 9:34am
pioneer-2	❌ Failed (Inspect)		Jun 10, 2023 9:34am
pioneer-2-storybook	✅ Ready (Inspect)	Visit Preview	Jun 10, 2023 9:34am

chrlschwb

ok

chrlschwb · 2023-04-21T16:04:42Z

For backend API this should help.
https://github.com/Joystream/pioneer/pull/4210/files#diff-b097e1a2a6e98e4068893380ab22bb3bd17532e6108eb84d67630fd8485d952a

and this
https://www.apollographql.com/docs/react/data/mutations

IlyaSmiyukha · 2023-04-21T17:03:28Z

Great, thanks. Will check it

thesan

@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

packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx

thesan · 2023-04-26T09:38:43Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/utils.ts

+
+import { EmailSubscriptionForm } from './types'
+
+export function createBatch(transactionParams: EmailSubscriptionForm, api: Api | undefined) {


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

packages/ui/src/memberships/types/Member.ts

thesan

@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

thesan · 2023-05-31T10:15:54Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx

+    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>
+    )


Here too the logic shoiuld be similar to @common/modals/OnBoardingModal/OnBoardingModal:

Suggested change

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

thesan · 2023-05-31T11:02:44Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx

+    modalData: { member },
+  } = useModal<EmailSubscriptionModalCall>()
+  const [state, send] = useMachine(EmailSubscriptionMachine)
+


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.

thesan

@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.

thesan · 2023-06-13T10:48:43Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx

+  const signModal = async () => {
+    const timestamp = new Date()
+    api?.sign(member.controllerAccount, `${member.id}:${timestamp}`)
+  }
+
+  useEffect(() => {
+    if (state.matches('signature')) {
+      signModal()
+    }
+  }, [state])


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.

thesan · 2023-06-13T10:50:51Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx

+  if (state.matches('transaction')) {
+    return <WaitModal onClose={hideModal} title="Pending transaction" description="Registering email address..." />
+  }


In the meantime this loader can show for both the signature and transaction steps:

Suggested change

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..." />

}

thesan · 2023-06-13T10:56:20Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx

+  if (state.matches('prepare')) {
+    return (
+      <EmailSubscriptionFormModal
+        onClose={hideModal}
+        onSubmit={(params: EmailSubscriptionForm) => send('DONE', { form: params })}
+        member={member}
+      />
+    )
+  }


This step doesn't exist anymore

thesan · 2023-06-13T11:02:25Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts

+interface TransactionContext {
+  signature?: EventRecord[]
+}


I don't think this is relevant here

thesan · 2023-06-13T11:07:40Z

packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts

+import { EmailSubscriptionForm } from './types'
+
+interface EmailSubscriptionContext {
+  form?: EmailSubscriptionForm


The context should include the email, the timestamp, and the signature

#4232 signer modal component

7be4054

vercel bot deployed to Preview – pioneer-2-storybook April 21, 2023 07:07 View deployment

vercel bot deployed to Preview – dao April 21, 2023 07:07 View deployment

vercel bot deployed to Preview – pioneer-2 April 21, 2023 07:07 View deployment

chrlschwb approved these changes Apr 21, 2023

View reviewed changes

chrlschwb requested a review from thesan April 21, 2023 16:05

chrlschwb added community-dev issue suitable for community-dev pipeline jsg-code-review labels Apr 21, 2023

thesan requested changes Apr 26, 2023

View reviewed changes

thesan removed the jsg-code-review label Apr 26, 2023

ilya Smiyukha added 2 commits April 30, 2023 15:15

Merge branch 'dev' into feature/email-subscription

df8e591

change local storage

446a4d2

vercel bot deployed to Preview – dao May 1, 2023 12:09 View deployment

rename cancel button for email subscription modal

fe79b4a

vercel bot deployed to Preview – pioneer-2-storybook May 1, 2023 12:12 View deployment

vercel bot deployed to Preview – dao May 1, 2023 12:12 View deployment

vercel bot deployed to Preview – pioneer-2 May 1, 2023 12:12 View deployment

add story for /EmailSubscriptionModal

22c7837

vercel bot deployed to Preview – pioneer-2-storybook May 15, 2023 13:02 View deployment

vercel bot deployed to Preview – dao May 15, 2023 13:02 View deployment

vercel bot deployed to Preview – pioneer-2 May 15, 2023 13:03 View deployment

lint fix

2478cb1

vercel bot deployed to Preview – pioneer-2-storybook May 15, 2023 13:15 View deployment

vercel bot deployed to Preview – dao May 15, 2023 13:16 View deployment

vercel bot deployed to Preview – pioneer-2 May 15, 2023 13:16 View deployment

Merge branch 'dev' into feature/email-subscription

eab8123

thesan added the scope:notifications Notifications subsystem label May 30, 2023

thesan requested changes May 31, 2023

View reviewed changes

change story for email modal

fedfa31

vercel bot deployed to Preview – pioneer-2 June 1, 2023 08:35 View deployment

vercel bot deployed to Preview – dao June 1, 2023 08:36 View deployment

vercel bot deployed to Preview – pioneer-2-storybook June 1, 2023 08:41 View deployment

ilya Smiyukha added 2 commits June 9, 2023 11:33

Merge branch 'dev' into feature/email-subscription

b7cf605

machine changes

da5f8d3

vercel bot had a problem deploying to Preview – dao June 10, 2023 09:33 Failure

vercel bot deployed to Preview – pioneer-2-storybook June 10, 2023 09:34 View deployment

vercel bot had a problem deploying to Preview – pioneer-2 June 10, 2023 09:34 Failure

thesan requested changes Jun 13, 2023

View reviewed changes

IlyaSmiyukha changed the base branch from dev to backend June 13, 2023 16:33

IlyaSmiyukha changed the base branch from backend to dev June 15, 2023 14:40

IlyaSmiyukha closed this Jun 22, 2023

IlyaSmiyukha deleted the feature/email-subscription branch June 22, 2023 11:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#4232 signer modal component #4362

#4232 signer modal component #4362

IlyaSmiyukha commented Apr 21, 2023

vercel bot commented Apr 21, 2023 •

edited

Loading

chrlschwb left a comment

chrlschwb commented Apr 21, 2023

IlyaSmiyukha commented Apr 21, 2023

thesan left a comment

thesan Apr 26, 2023

thesan left a comment

thesan May 31, 2023

thesan May 31, 2023 •

edited

Loading

thesan left a comment

thesan Jun 13, 2023

thesan Jun 13, 2023

thesan Jun 13, 2023

thesan Jun 13, 2023

thesan Jun 13, 2023


		import { EmailSubscriptionForm } from './types'

		export function createBatch(transactionParams: EmailSubscriptionForm, api: Api \| undefined) {

#4232 signer modal component #4362

#4232 signer modal component #4362

Conversation

IlyaSmiyukha commented Apr 21, 2023

vercel bot commented Apr 21, 2023 • edited Loading

chrlschwb left a comment

Choose a reason for hiding this comment

chrlschwb commented Apr 21, 2023

IlyaSmiyukha commented Apr 21, 2023

thesan left a comment

Choose a reason for hiding this comment

thesan Apr 26, 2023

Choose a reason for hiding this comment

thesan left a comment

Choose a reason for hiding this comment

thesan May 31, 2023

Choose a reason for hiding this comment

thesan May 31, 2023 • edited Loading

Choose a reason for hiding this comment

thesan left a comment

Choose a reason for hiding this comment

thesan Jun 13, 2023

Choose a reason for hiding this comment

thesan Jun 13, 2023

Choose a reason for hiding this comment

thesan Jun 13, 2023

Choose a reason for hiding this comment

thesan Jun 13, 2023

Choose a reason for hiding this comment

thesan Jun 13, 2023

Choose a reason for hiding this comment

vercel bot commented Apr 21, 2023 •

edited

Loading

thesan May 31, 2023 •

edited

Loading