Support campaign flow depending on user status

[codersquirrelbln]

User Story: Logged-In User Supports a Campaign

Description

As a logged-in user, I want to support a campaign, so I need to be guided through the process of connecting my wallet and confirming the transfer.

Steps to Implement

1. User is already logged in (current_user):
   • Sub-option 1a: User has no wallet connected to their account:
     • Trigger the modal to connect a wallet.
     • After the wallet is connected, proceed to step 1b.
   • Sub-option 1b: User has a wallet connected:
     • Show a page with all the transfer data including:
       • Their wallet address
       • The campaign owner's wallet address
       • Transfer amount
       • Other relevant details
     • Provide an option to confirm the transfer.
     • Implement the transfer process (covered in a separate issue).

Acceptance Criteria

• Logged-in users without a connected wallet see a modal to connect their wallet.
• Logged-in users with a connected wallet see a page with transfer details.
• Users can confirm the transfer on the transfer details page.
• The transfer process is initiated upon confirmation.

Tasks

• Detect if the user is logged in and has a connected wallet.
• Trigger the wallet connect modal if no wallet is connected.
• Show the transfer details page if the wallet is connected.
• Implement the transfer confirmation page.
• Implement the transfer process (separate issue).

Additional Information

• Ensure smooth transitions between each step.
• Maintain security and user experience throughout the workflow.
• Log errors and provide user-friendly messages for any issues encountered.

Possible Questions and Options:

1. Modals vs. Normal Pages:

   • Should the entire flow be guided using modals for a seamless and contained user experience, or should we use normal pages with URLs to provide more flexibility and direct access?
   • Pros and Cons of using modals:
     • Pros: Provides a seamless and consistent user experience without page reloads.
     • Cons: May require more complex JavaScript and state management.
   • Pros and Cons of using normal pages:
     • Pros: Easier to manage and debug, allows direct URL access and bookmarking.
     • Cons: May feel less seamless due to page reloads.

2. Handling Authentication:

   • Should the authentication step be a modal overlay on the current page, or a full-page redirect to the sign-in/sign-up page?
   • How should we handle errors during the authentication process? Display inline messages or redirect to an error page?

3. Wallet Connection Process:

   • Should the wallet connection process be integrated into the sign-up flow, or should it be a separate step after authentication?
   • How do we ensure the wallet connection step is user-friendly and secure?

4. Confirmation Modal:

   • Should the confirmation of the transfer be a modal overlay, or a separate confirmation page?
   • What specific details should be included in the confirmation modal to ensure users are fully informed before proceeding?

Related Files:

• CampaignsController
• Views related to campaign, sign-in, sign-up, wallet connect, and contribute pages.
• JavaScript files handling modals and redirects.

References:

• GitHub OAuth documentation
• Wallet Connect documentation

---

User Story: New User Supports a Campaign

Description

As a new user who has not authenticated through GitHub and has no wallet connected, I want to support a campaign, so I need to be guided through the authentication and wallet connection process before confirming the transfer.

Steps to Implement

1. User is not authenticated (current_user is nil):
   • Redirect the user to authenticate through GitHub.
   • After successful authentication, trigger the modal to connect a wallet.
   • Once the wallet is connected, follow the steps in User Story 1b to show the transfer data and confirm the transfer.

Acceptance Criteria

• Unauthenticated users are redirected to GitHub for authentication.
• After authentication, users see a modal to connect their wallet.
• Once the wallet is connected, users are shown the transfer details page.
• Users can confirm the transfer on the transfer details page.
• The transfer process is initiated upon confirmation.

Tasks

• Redirect unauthenticated users to GitHub for authentication.
• Trigger the wallet connect modal post-authentication.
• Show the transfer details page once the wallet is connected.
• Implement the transfer confirmation page.
• Implement the transfer process (separate issue).

Additional Information

• Ensure smooth transitions between each step.
• Maintain security and user experience throughout the workflow.
• Log errors and provide user-friendly messages for any issues encountered.

Possible Questions and Options:

1. Modals vs. Normal Pages:

   • Should the entire flow be guided using modals for a seamless and contained user experience, or should we use normal pages with URLs to provide more flexibility and direct access?
   • Pros and Cons of using modals:
     • Pros: Provides a seamless and consistent user experience without page reloads.
     • Cons: May require more complex JavaScript and state management.
   • Pros and Cons of using normal pages:
     • Pros: Easier to manage and debug, allows direct URL access and bookmarking.
     • Cons: May feel less seamless due to page reloads.

2. Handling Authentication:

   • Should the authentication step be a modal overlay on the current page, or a full-page redirect to the sign-in/sign-up page?
   • How should we handle errors during the authentication process? Display inline messages or redirect to an error page?

3. Wallet Connection Process:

   • Should the wallet connection process be integrated into the sign-up flow, or should it be a separate step after authentication?
   • How do we ensure the wallet connection step is user-friendly and secure?

4. Confirmation Modal:

   • Should the confirmation of the transfer be a modal overlay, or a separate confirmation page?
   • What specific details should be included in the confirmation modal to ensure users are fully informed before proceeding?

Related Files:

• CampaignsController
• Views related to campaign, sign-in, sign-up, wallet connect, and contribute pages.
• JavaScript files handling modals and redirects.

References:

• GitHub OAuth documentation
• Wallet Connect documentation

---

Enhancement: Implement Wallet Transfer Process

Description

Implement the process of transferring funds from the user's wallet to the campaign owner's wallet upon confirmation.

Steps to Implement

1. Show Transfer Details Page:

   • Display details including:
     • User's wallet address
     • Campaign owner's wallet address
     • Transfer amount
     • Other relevant details

2. Confirm Transfer:

   • Provide an option for the user to confirm the transfer.
   • Display a modal to ensure the user wants to proceed with the transfer.

3. Execute Transfer:

   • Trigger the transfer from the user's wallet to the campaign owner's wallet upon confirmation.
   • Handle any errors and provide feedback to the user.

Acceptance Criteria

• Transfer details page displays all relevant information.
• Users can confirm or cancel the transfer.
• Transfer is executed upon confirmation.
• Errors are handled gracefully with user-friendly messages.

Tasks

• Display transfer details page with relevant information.
• Implement confirmation modal.
• Execute wallet transfer upon confirmation.
• Handle errors and provide feedback.

Additional Information

• Ensure the transfer process is secure and user-friendly.
• Log errors and provide user-friendly messages for any issues encountered.

Possible Questions and Options:

1. Modals vs. Normal Pages:

   • Should the entire flow be guided using modals for a seamless and contained user experience, or should we use normal pages with URLs to provide more flexibility and direct access?
   • Pros and Cons of using modals:
     • Pros: Provides a seamless and consistent user experience without page reloads.
     • Cons: May require more complex JavaScript and state management.
   • Pros and Cons of using normal pages:
     • Pros: Easier to manage and debug, allows direct URL access and bookmarking.
     • Cons: May feel less seamless due to page reloads.

2. Handling Authentication:

   • Should the authentication step be a modal overlay on the current page, or a full-page redirect to the sign-in/sign-up page?
   • How should we handle errors during the authentication process? Display inline messages or redirect to an error page?

3. Wallet Connection Process:

   • Should the wallet connection process be integrated into the sign-up flow, or should it be a separate step after authentication?
   • How do we ensure the wallet connection step is user-friendly and secure?

4. Confirmation Modal:

   • Should the confirmation of the transfer be a modal overlay, or a separate confirmation page?
   • What specific details should be included in the confirmation modal to ensure users are fully informed before proceeding?

Related Files:

• CampaignsController
• Views related to campaign, sign-in, sign-up, wallet connect, and contribute pages.
• JavaScript files handling modals and redirects.

References:

• GitHub OAuth documentation
• Wallet Connect documentation

---

For all scenarios, tests are necessary.