geyserfund / geyser-app Goto Github PK

Context
As we get more projects on Geyser we should bring all the About info from the landing page to their separate page, so that we can put the focus on the projects.

Description
Create an About page (visible on the header bar), which is mostly static.

Acceptance Criteria

• See About page in figma and reproduce

Additional Attachments

ABOUT PAGE
Figma

Context
Let's make the page more dynamic with this GIF.

Acceptance Criteria

• GIF displays in the landing page instead of the jpeg.

Additional Attachments
File here: https://drive.google.com/drive/folders/1UFNyXmpF_tgxEcBiPAoZjhVkrfH8Ge4s?usp=sharing

Context

• Current landing page is full of 'about' material that can be moved in an about page.
• We are getting 3 new campaigns this month, so we want the page to look clean and emphasize the projects.

Description
A new Landing page that is free from clutter

Acceptance Criteria

• A static header
• A carousel showing live projects
• Project categories: Gaming, Education, Tech, Media, Companies (scrollable horizontally)
• Netflix-like sections showing 3 projects per column. You can also click right to see more project in a category.

Additional Attachments

Context
We want to allow users to earn rewards for funding.

Description
For reward based crowdfunds, a user who clicks 'fund this project' will see a reward based crowdfunding flow. This entails seeing:

• User can add a specific donation amount
• User can select a reward to donate for - user selects with the + / -
• The summary view shows the donated amount and reward amount
• We give emoji badges to users Badges without showing them in the reward process.

Acceptance Criteria
See overall view in Attachment A.

DONATE

• User sees "Donate to this idea" section where users can:
  • Add a Satoshi amount.
  • Switch between USD and Satoshi
  • Component is small and compact (350 x 40)
  • When a user clicks on the input area, the border's corder goes green 20ECC7, with 2px thickness.
  • If donation amount is higher than a reward and reward unselected we say:

  Note that you are not receiving a reward with this donation. To get a reward select the item below directly.

###BACK WITH REWARD

• In the "Donate to receive a reward", a user can see the reward item, which includes (Attachment A.):
  • Title
  • Amount it costs in USD
  • Number of backers
• If a user clicks on the reward item, the item description appears below (Attachment B.) (ideally, if not we show pop-up)
• If a user clicks on the + in the reward, the number shows on the top right (See C.)
• If user clicks on reward, the email component pops up (A)

###TOTAL/SUM

• A user sees the summary of donations and reward-based donations:
  • Donation
  • Reward: Satoshi and number of rewards.

    Reward = 丰154,226 (1 reward)

  • Total sum amount in Satoshis
  • IF a user has clicked a reward, we display the Shipping cost.

COMMENT

• Comment
• Appear as anonymous / appear with profile.

###CONTACT INFO

• When a user inputs 1 or more rewards a required ‘Contact info’ component appears with a copy:

  Drop your contact address so the project owner can get back to you for more information on the delivery of the rewards.
  - [ ] This field is mandatory

###FUND

• Static note below the Fund button stating:

  Geyser is not a store. It’s a way to bring creative projects to life using Bitcoin. Your donation will support a creative project that has yet to be developed. There’s a risk that, despite a creator’s best efforts, your reward will not be fulfilled, and we urge you to consider this risk prior to backing it. Geyser is not responsible for project claims or reward fulfillment.

Additional Attachments

A.
Figma

B:

C.
Figma

Description

I cannot pay LNURL nor Lightning addresses with Zeus wallet. Because the server dos not follow the standard and does not include description hash in the invoice.

Reproduction URL

https://geyser.fund/project/citadel

Reproduction steps

1. Go to https://geyser.fund/project/citadel
2. Click on the QR code icon
3. Scan it with Zeus wallet (using getalby.com backend)
3. Set amount 1 sat
4. See error: `Error: wrong desciption_hash! ...`

Screenshots

No response

Logs

No response

Version of Browser

Firefox 114.0.2

Operating system

Linux

Description

Currently, we get a backend bad-request error, when user tries to add a bio longer than 500 characters.

Reproduction URL

https://geyser.fund/probile/{yourprofileid}

Reproduction steps

1. Go to geyser.fund
2. log in
3. go to your profile -> settings
4. update bio to have more than 500 characters.

Screenshots

No response

Logs

No response

Version of Browser

all

Operating system

all

Context
Currently, it's hard to become a sponsor or advisor. We want to make it more obvious.

Description
We make it more obvious by having a "+" sign in the Ambassador field and Sponsor field.

Acceptance Criteria

• Add a + icon next to the funders
  - [ ] Basic color: E9E9E9
  - [ ] Hover: color D0D0D0 + light shadow and show "Become an Ambassador"
  - [ ] click: color only: D0D0D0

• When a user hovers over it, the + becomes a "Become an Ambassador" or "Become a Funding Partner"

• When a user clicks on "Become an Ambassador" he get's a pop up with:
  > Become an ambassador to support this project, by bringing in your reputation to increase the sense of trust. To become an ambassador send an email to Craig at [email protected].

• When a user clicks on "Become a Funding Partner" he get's a pop up with:
  > Become a Funding Partner to be featured in the crowdfund and the product. Reach out to Craig at [email protected] for more info.

• Update the Ambassador + Sponsor components
  - [ ] Add a background behind the Ambassador + Sponsor components with F4F4F4 color and 4 borders rounding.
  - [ ] Decrease the size of the user profile picture.

Additional Attachments
[Figma](https://www.figma.com/file/PWmmkC53SqLCSqp2KtDnGx/geyser?node-id=2167%3A40864)

Description

For certain devices that have geyser PWA installed, the prompt for Refresh your geyser app to get the newer Version is never seen.

Reproduction URL

https://geyser.fund

Reproduction steps

1. Go to geyer.fund
2. Add to home ( PWA )
3. Wait for new deployment
4. See when the new deployment is seen on the PWA ( if a refresh is prompted)

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Version of Browser

Mobile browsers, safari

Operating system

Android and IOS are heavily affected, haven't seen this issue in desktops.

Context

The project funding flow is already started to clutter up, and does not easily integrate with multiple types of funding flow which will be introduced.

Description

We will refactor the funding components to streamlined for the case that we can easily add multiple different types of funding flow, as we would for di

Acceptance Criteria

Additional Attachments

Summary

Youtube and Vimeo videos work as expected for the project header, but other videos from platforms like Rumble are not supported.
Needs some looking into why it's not supported, and come up with a neat solution to support them.

Basic Example

The project header video, should support videos from Rumble paltform.

Drawbacks

No response

Implementation

No response

Reference Issues

No response

Other Concerns

No response

The geyser-app dependencies have vulnerabilities that require manual dependency management. This is urgent.

The vulnerabilities can be seen by running yarn audit.

I have already upgraded the backward-compatible dependencies but the remaining ones require manual checking to ensure compatibility. We should at least fix the high and critical ones.

Context

• [ ]
• [ ]
• [ ]

Context
Users don't get directed towards the project page from the home page.
The project section on the home page gives an AD-like feel

Description
The project card needs to be updated so that users get more information out of it.

Acceptance Criteria

• Update Project highlights to "Fund live Projects"
• Update the project card's design (1).
• On hover, the view project is seen in the image as per design (1).
• Location of project card and blue coins is changed. (2)
• White area behind the project page is removed
• If user clicks 'More projects soon' we send a pop up (3)

Figma:
https://www.figma.com/file/PWmmkC53SqLCSqp2KtDnGx/geyser?node-id=1618%3A39063

Additional Attachments

Context
We want to reward / recognize users who spend

Description
We want to apply emojis to users who funded on geyser.

• Apply emojis retroactively (to previous funders)
• Apply emoji on a user-basis. if a user funded low amount and then high amount we sum those up and show the badge next to both user profiles. Badge will appear in both of his transactions.

Acceptance Criteria

Apply Emojis next to funder name in activity page (A)

• Apply emojis next to user name.
• Emoji values:

  🏅 = 21,000 sats
  🏆 = 120,000 sats
  👑 = 1,000,000 sats
  ⭐️ = 10,000,000 sats

Show emoji reward in success page once a user has funded (B)

• User who just funded and earned a reward is made aware of this through a message in the success screen

  🏆 With this donation you’ve earned a trophy!

Apply Tooltip to explain what emojis stand for (C)

• When a user hovers over the emojis they can see a tooltip showcasing what the (C)

Additional Attachments
A. Emojis

B. Funding successful

C. Tooltip.
Figma

Context
We want to enable emoji badges to reward/recognize users who made payments.

Description
We need to integrate emoji badges in the payment flow.

Acceptance Criteria -- See A for full view.

Title

• Donate to this idea

Badges (see B)

• States
  - [ ] Basic -> shows in gray E9E9E9 border.
  - [ ] Selected -> shows in green 1BD5B3 border
• Types of badges & costs:
  - [ ] Medal -> $10
  - [ ] Trophy -> $60
  - [ ] Crown -> $300
  - [ ] Star -> $500

Donation

• Amount selection shows with green 1BD5B3 border
• User sees USD amount in the right
• Actions:
  - [ ] User can click on USD to be able to select amount in USD.

Comment

States:

• Basic: Comment shows in gray E9E9E9 border.

• Selected:
  - [ ] Comment shows in green 1BD5B3 border.
  - [ ] Text appears in black.

• Actions:
  - [ ] Users can add comment
  - [ ] Users can add GIFs (separate task)

Profile

• Appear as anonymous.
• Appear with profile -> sends to twitter verification.

Fund button.

• Fund button.

Additional Attachments
Figma
A. Full view:

B. Badges.

Summary

The current rewards shown in the right sidebar in projects are clunky and cluttered. Cleaning this design a based on newer designs.

Details of the design update can be seen below.

Basic Example

When a users clicks buy a reward, the right sidebar changes to showcase the current and other rewards, update the small reward view component.

Drawbacks

No response

Implementation

No response

Reference Issues

No response

Other Concerns

Make sure both mobile views and desktop views have consistent components.

Context
We are adding on-chain payments to the flow. This has an impact on the frontend.

Description
We are going to allow users to decide on how to pay: lightning or on-chain on the QR-payment view.

Acceptance Criteria -- See A. for full view.

Title:

• "Confirm & Fund"

Confirmation Details Component -- See B.

The confirmation detail component show the information about the project, the payment and rewards.

Design details:

• 2px Border with E9E9E9 color.
• Line in the middle is 1px with same E9E9E9 color.

Content details:

• Project: Project Name
• Message: (none if no message)
• Appear as: (anonymous if no profile connected)
• Reward: The Bitcoin Game sent to [email protected]. (none if no rewards)
• What emoji the user is earning.
  • 🏆 With this donation you’ll earn a trophy!
  • ⭐️With this donation you’ll earn a star!
  • 🏅With this donation you’ll earn a medal!
  • 👑With this donation you’ll earn a crown!
• Total -> reuse same component from previous screen. incldues donation / Reward breakdown.

Update QR component to include on-chain / Lightning -- See C

The QR view shows a toggle between on-chain and lightning invoice.

• If a user clicks on-chain the QR code displays the static address.
• If a user clicks on lightning the QR code displays the invoice we generated (we don't generate one every time someone presses lightning)
• Show copy below QR Code
  • for on-chain

    Scan Bitcoin address to send funds

  • for Lightning:

    Scan lightning invoice to send funds

• The QR Code has the same 2px border with 1BD5B3 color
• When a user clicks on QR Code the QR Code lights up.

Copy Invoice / Address.

• If user selected Lightning, we show copy invoice
• If user selected onchain, we show copy address

Update post-payment comment to include a lightning icon

• Lightning icon appears for lightning payments.
• Chain icon appears for on-chain payments.

Additional Attachments

A. Full component - Figma

B: Content Details.

C: QR (normal & copied)

D. Lightning vs onchain icon in payment.

Figma

Summary

Add the feature to view the thumbnail image as larger image as a modal popup.

Replace the _large.webp postfix for the thumbnail URL to _medium.webp, and use the _large.webp for the larger image in the modal.

Basic Example

Clicking on the profile image will pop up a larger image in a modal for viewing purpose.

Context
Make success effect feel more rewarding and fun.

Acceptance Criteria

• confetti falling from the sky with geyser colors

Notes
See library:
https://github.com/cdvntr/react-native-confetti

The 'fund now' is a bit small and hard to see for users
The '

Screenshots

figma

Criteria

• "Fund now" is all in a line
• "Fund now" has a larger font
• More wide button
• Use our main color (20ECC7)

Description

2

Reproduction URL

2

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
2

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Version of Browser

2

Operating system

2

Context
We want to make funding more social and fun. Let's integrate GIFs as content!

Description
A funder can choose a GIF to sent out out with their funding.

Acceptance Criteria

• Comment component shows a GIF icon. [See A]
• When a user clicks on the GIF icon a Giphy pop-up appears (no funding amount required). [See B]
• Giphy pop up has a search bar for users to select a type of crowdfunding.
• When a user selects a GIF to send the GIF populates inside of the comments section.
• Once a user funds with a GIF the GIF appears in the chat
• [OPTIONAL] Enable users to add text as well as the GIF at the same time.

Additional Attachments
A.

B. https://developers.giphy.com/docs/sdk/

Description

3

Reproduction URL

3

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
3

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Version of Browser

3

Operating system

3

Context
We need to update the content of the boxes.

Description
Update the top box content differently.

**Acceptance Criteria **
TOP BOX LAYOUT (See Attachment B.):

• The main top boxes will show the following items in this order:
  • Project photos, with main photo appearing for 50% of the width of the box
  • Problem (optional)
  • Solution (optional)
  • Idea (optional)
  • Project owner
  • Project ambassador
  • Sponsor
• Update Box Border (See Attachment B.)
  • Lower the shadowing below the Boxing to the minimum to 5% opacity and 10 blur.
  • Ensure the box border is 2px.

BECOME AN AMBASSADOR / SPONSOR (See Attachment C.)

• Update the Ambassadors + Sponsors component
  • Image is 20x20
  • Background has color F4F4F4 and borders with 4 curvature
• Add + for users to become Ambassadors or Sponsors.
  • There is a + button, for users to become an Ambassador
  • User who clicks + Ambassador is redirected to Airtable: https://airtable.com/shrsLeLz4bBYqTUpA
  • There is a + for users to become a Sponsor
  • User who clicks + Sponsor is redirected to Airtable: https://airtable.com/shr8X1T7M8SuvHOjD

Additional Attachments
A.

B.

C.

Context

In mobile view, users don't always know, where to go next to fund. Less number of users are opening up the fund section in mobile view.

Description

Need to update the design for how users move to and from the details section to the fund section in mobile view. Adding a button hover suggesting that can click to fund should help more users understand where to go next.

Acceptence Criteria

• Change project page mobile view tabs component (Project / Fund) to specific floating buttons.

Additional Attachments

Figma link for the design

Context
Craig came back with an additional reuquirement of adding different shipping cost for US or Outside US

Description
Selector with:
US shipping -> $15.
Outside the US -> $60

Acceptance Criteria

• Select Region (mandatory) shows:
  - [ ] US
  - [ ] Non-US
• Change in Shipping costs
  - [ ] US -> $15
  - [ ] non-US -> $60.

Additional Attachments

Context
Apata's project will be running until the end of the conference - on April 9th.

Acceptance criteria

• Change "The conference date has been set for the event which will be held on March 26th - the last Saturday of March" to
  The conference date has been set for the event which will be held on Saturday April 9th"
• Set Countdown the end date of the project to April 9th at midnight.
• Add a new project update (#3), this update will talk about and explain about why we changed the date:

Title:

Conference date is set to 9 April: what's next?

Body:

My friends and I have been working hard handing out the conference fliers and stickers and circulating them in the streets of Lagos. By talking to people on the streets, there seems to be much excitement about this conference: it's going to be bigger than I thought! God is helping us!
What's next? Getting more communities in Lagos on-board, and doing proper planning of the conference agenda and setup.
I'm also getting a lot of ideas of the aftermath of the conference. I think we can move to other states. Since bitcoin education is best for people on the street. I can still organize street meet ups and educate them on bitcoin live.
See the video of my good friend spreading the word about the conference!

Embed Tweet:

https://twitter.com/ApataJ/status/1496460733697167371?s=20&t=ZtoP8nLf7ZQge9H8lhQO9A

Description

4

Reproduction URL

4

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to 4'....'
4. See error
4

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Version of Browser

4

Operating system

4

• There should be more horizontal margin or padding between the sponsors because currently the sponsor avatar is closer to the previous sponsor than the sponsor link it is associated with.
  

Describe the bug
Still hard to see the project funding in mobile

• increase size of button
• increase size of font
• decrease opacity

Context
Anonymous user profile could look suspicious from the eyes of regulators.

Description
We want to remove 'anonymous' from appearing, as well as changing the user PFP to a random set of Geyser Orbs.

Acceptance Criteria

• remove 'anonymous' from appearing next to the anonymous PFP
• change the Satoshi icon to a randomly selected Geyser orb.

Additional Attachments

Context
The current font is not cool enough.

Description
Update the font to all elements. This may need us to retweek the font sizes.

FONT:

• Change fonts to Inter.

Description

This download button doesn’t work on the DuckDuckGo browser, both mobile and desktop versions.

There is some issue with the conversion of the QR code generated for the project's lnaddress, to the image component for the download feature. This results in the QR code not being present in the parsed/downloadable image.

Reproduction URL

geyser.fund/project/geyser

Reproduction steps

1. Open duckduckgo browser
2. go to any project
3. click on the view project qrcode button

Screenshots

Browser

duckduckgo browser

Operating system

ios, mac

Description

Testing Linear Integration

Reproduction URL

https://geyser.fund

Reproduction steps

Testing Linear Integration

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Version of Browser

Arc

Operating system

MacOs

Context
Users want a way to update their funders with new project information. Simply updating the project description is not enough. We need a way for users to send 'project updates'.

Acceptance criteria:

• We have a new component that sits outside of the Project Description [1]
• Title: "Project Update #0X"
• Date: Showcase the publishing date.
• Copy & Media [2]
• Toggle: The updates can be closed and opened using the toggle [3]. The toggle doesn't close completely, but it shows a bit of the content with some transparency.
• The default view for a new user who lands on the page is that we show all the content in the toggles (Toggles are open)

[1] Wireframes

[2] Copy & Media

PROJECT UPDATE #2
14 Feb 20222
LAGOS BITCOIN CONFERENCE UPDATE
The conference is about tackling a major problem among the youths in Nigeria and Africa as a whole. The aim is to teach youths financial literacy with help of bitcoin and lightning, and taking back their freedom from the system. The aim is also educating the youths to be active and advanced in this information and technology age so we can move from an underdeveloped country to a super developed country

So, how is the conference planning going? We have 3 major updates:
We have started with the distribution of flyers, hand bills and stickers about the conference.
The conference date has been set for the event which will be held on March 26th - the last Saturday of March
Bitnob has decided to sponsor the conference hall in Ikeja city in Lagos, with the capacity to hold 300 youths.

Photos and videos of the progress will be out soon!

I believe with this conference, there would be a positive revolution that will transform my country for the better if not best. Live coverage of the event will be available on YouTube for lovers of bitcoin around the world to see the rise of youths learning to move the country in the right direction with sound money.

[3]
Figma

Context

King's Project mostly consist of static components, these need to be refactored to individual components so as to be reusable across multiple projects.

Description

Abstracting necessary project statuses.

Acceptance Criteria

Additional Attachments

Description

On the Geyser User Profile page. The badges section is not scrollable. So more than 4 badges are only partially seen or not seen at all. There is an issue with the layout.

The same issue is seen with the projects tab in the profile view. Here it is scrollable but the border is cut off like the badges section.

Reproduction URL

geyser.fund/project/geyser

Reproduction steps

go to a user profile

Screenshots

Version of Browser

chrome

Operating system

mac

Context
Users who fund the project while being logged in are negatively surprised about the fact that a bot sent out the confirmation message.

Description

Acceptance Criteria

• Confirmation screen: for logged in users who funded, let’s show them a text to let them know that our Bot sent them a message.

Check your Twitter. Our Twitter bot 🤖 @geyserfunders just sent out a tweet to thank you for supporting this project.

• To anon users who funded:

  Did you know that the 🤖 @geyserfunders bot tweets if you fund with your twitter profile?

Additional Attachments
Figma

Context

Provide more reassurance + trust to the product by embedding tweets of important accounts.
Someone sent feedback: "I think the biggest problem will be gaining trust that this project is legit. It would help if the sponsors of the currently active crowdfund tweeted about it. “

Description

Add a tweets section on the project page, details section right before the sponsor section, to showcase required tweets.
These would be static for now.

Acceptance Criteria

• Create a new section, with the provided design.
• Clicking the tweet takes the user to the Twitter thread.

Additional Attachments

Context

Currently we are going through a static way for displaying details for king's projects. This way would not be suitable for multiple type of projects and templates based on those.

Description

Create a template based on King's design components for Donation based, in such a way that we can easily plugin multiple templates based on different crowdfunds.

Acceptance Criteria

Additional Attachments

Incorrect copy for Log In button in the landing page.
When a user clicks Log In from the landing page the incorrect old copy appears in the pop up.

To Reproduce
Steps to reproduce the behavior:

1. Go to Landing page
2. click Log In
3. See copy
4. See error "To create a project you have to first connect to your twitter account so that we can recognize you for your contributions"

Update copy to: "Link your twitter account to appear as a project backer when you fund a project."

Context
Users are doing big donations without logging in and claiming badges.
the problem is we don't tell them they have to login to claim badges.

Description
Let's show them the badge they are earning together with the reward they are getting in invoice view.

Acceptance Criteria

• If a user funds an amount that could earn him a badge, show the option to 'redeem' the badge in the success screen. (a)
• If a user is logged in show the user he/she has gained the emoji badge.

Additional Attachments
FIGMA: https://www.figma.com/file/FToyC2btXaRp3HMsKMZX7X/Geyser-product-designs?node-id=1%3A4876

A:

NOTES FOR PLAN B

Non-logged in user with no rewards(A)

• make badge opaque
• copy

  Login to receive a trophy badge

• Login button

Non logged in user who selected a reward (B)

• The same as above, except we also show the reward.

Logged in user (C)

• copy

  With this donation you'll receive a trophy

A.

B.

C.

Summary

Basic Example

MILESTONES NEED TO BE DISPLAYED A BIT DIFFERENT IMO . THERE IS NO WAS TO TELL USER THE SPECIFIC AMOUT FOR SPECIFIC MILESTONES. INSTEAD IT LOOS AS THOUGH EACH MILESTONE REQUIRES MORE FUNDING

Drawbacks

No response

Implementation

No response

Reference Issues

No response

Other Concerns

No response