Currently, refreshing the page on myloan and checkout results in routing error

• Refactor it into its own component
• Create responsive calculator
• Create Dai units in textfield
• Income shares should be 2 decimal spots
• Should have simulated returns that depends on both investment amount and simulated salary
• Get Ines to send over income share agreement, link it to calculator

Current:

Wireframes and specs

The Balsamiq Interactive Wireframes hold the concept wireframes. It basically consists of 4 pages:

PDF version of clickable prototype

2. Loan Offer Step 1 (personal details page)

Balsamiq Wireframe of Loan Offer Step 1

Page purpose:
The "email / name" step is purposefully brought forward, because it captures intent to lend for a loan:

• We can launch this first (i.e. "get notified when we launch!") while still working on the Web3 + contracts, to capture interested lenders pre-launch
• This also helps capture the contact detail of a potential lender as soon as possible - this is helpful since many people might drop off during the Metamask step due to Metamask errors
• Collecting video interview requests early on allows Ines to clear them slowly over the weeks prior to the crowdfunding campaign

• This page may be a modal instead of a full page
• What are the KYC / AUML requirements?
• Can we include a note / link to Protonmail, if the lender wants to be anonymous?
• Where does this write to? (backend through a serverless function?)
• Do we need a recaptcha to prevent spam?

3. Loan Offer Step 2 (amount page)

Balsamiq Wireframe of Loan Offer page

Page Purpose:

• The lender will specify the amount they want to lend and trigger the Web3 action to transfer funds to the crowdfunding smart contract

Notes:
This page has received very little user testing vs. its importance to the process. We need to user test the wireframes!

• This page may be a modal, not a full page (same as Step 1)
• User test whether Loan Confirmation should be brought higher in the page (i.e. the "fund with metamask" button)
• Should we move the simulated returns down?
• Where should we put the disclaimer?

Some Todos:

• @onggunhao and @urmauur Go through React Typescript docs
• Initial scaffold of Balsamiq wireframes in Typescript + React
• Web3 integration (either through Drizzle or plain Web3), @onggunhao to evaluate Drizzle
• Onboard @urmauur onto project

Some thoughts after looking at the UI more closely.

1: Missing "Contributing Lenders" section

2: Contributing Lenders don't have avatars

• Ethereum addresses do not have avatars

3: Missing "Social Credit" section

• Our survey showed that 80+% of people would be more confident to donate if a borrower had people to "guarantor" or "socially attest" for borrower
• I can be listed as a guarantor, while others can "socially attest" for Ines (we can hard-code this for now)

4. Typography - line length

https://practicaltypography.com/line-length.html

5. Typography - paragraph spacing and line height

https://pearsonified.com/golden-ratio-typography-intro/

6. Typography - letter-spacing

We will need to make the Web3 calls (and show success / failure modals) and interact with the smart contracts

1. Authorizing Web3

2. Loan Page

3. Personal Details

4. Make Loan

5. My Loan

Site should have a modal that states:

1. This is a work in progress, and is deployed for user testing purposes
2. It is also to give the community an idea of our progress
3. And then include a link to https://www.enable.credit for people to add their emails

We should hide the overflowing address on this

This refactor will basically earn back the time spent passing simulateReturns down and up the component chain

I'm going to hack it together for the 5pm deadline tomorrow but I insist that this is the next thing we do once we are at functional

User Story

As a user, I want to see the list of contributors to Ines's Loan from the highest contributor to the lowest contributor.

Why Is this Needed

To give lenders a useful insight about contributors to Ines's loan.

Current Behavior

The current list of contributors comes from mocked data

Expected Behavior

Display real contributors to Ines's loan since no loan hasn't started there should be no contributors.

Definition of Done

See above

Data Requirements

Additional Information

Wireframes and specs

The Balsamiq Interactive Wireframes hold the concept wireframes. It basically consists of 4 pages:

PDF version of clickable prototype

1. Main loan page

Balsamiq Wireframe of Main Loan Page

Page purpose:
This page is similar to Kiva's "loan" page. The purpose is to allow potential lenders to find out more about the loan details, and the borrower.

Notes:

• Lend button should be anchored to the bottom of the viewport, so that lenders can lend while viewing any part of the page
• If there are many contributing lenders, we should only show a truncated list of lenders
• If Borrower Profile is too long, should only show a shorter excerpt and allow user to click "more" to expand it

• investmentAmount should not be tracked as a state variable outside of react-final-form, but use mutators to change it based on button input

See: https://medium.com/@erikras/final-form-arrays-and-mutators-13159cb7d285

• Validations should only run after user presses submit (it currently runs on form blur)
• Validate that amount is more than 10 Dai? (should we have this?)

• Simple append-only database
• Should have simple frontend so Ines / non-technical users can follow up
• React frontend should query GraphQL endpoint based on tx_id (not necessary so early? Can just put anonymous)

• Video Interview link
• ISA length
• Loan Amount
• Name of borrower
• Social media links of borrower (instagram, linkedin, twitter, facebook)
• Ethereum address
• Admission proof
• Expected salary
• Link to expected salary
• 3Box profile link
• Minimum repayment and maximum repayment cap

See 'isaConstants' file and Daniel's comments

Key things

• As we launch, things usually go wrong. We should have a way of tracking drop-offs
• Google Analytics to measure funnel conversions
• Intercom so users can ask questions
• Hotjar (?) to screen record so we know where people get stuck

Most importantly, we need to ask for users' consent before we do this

• Function actually lives in /pages/home
• home/simulation is where it is actually used (needs prepBigNumber)
• Remove from tab/profile.tsx
• Remove from /home/tab

prepBigNumber (what is this?)

Curreently, it is initialized in

• home/index.tsx
  then passed down to each of the sub-components

This should be a store and a redux method

I think we should help to guide the user as much as possible once they are making the actual donation

A big one is that users need to know that they need to click 2 metamask windows (i.e. approve, and then transfer). I think we have lost a few users who clicked, but didn't approve the 2nd transaction

• Can we show them the process of how it will happen (i.e. let them see screenshots of the two metamask screens)?
• Can we use Rimble UI to show toasts to let the user know when transaction is submitted, accepted?
• Can we show a spinner on the button, once it has been pressed by the user? (I accidentally pressed it multiple times, etc)

Explain:

• Go to my loan page in navbar
• Refresh page in my loan page
  you can get https://www.ines.fund/index.html, and our app will be redirected to page, not found

Spec:

• When loading loan homepage, we should prompt the user to unlock web3 with metamask

Resources:

https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

• State in simulationReturn such as salaryMin, salaryMax should be refactored into isaConstants as these are what students' salaries are based on

Currently, there are 2 issues:

• On desktop, there is a ~1 second delay between the time when the initial values (i.e. 0) load, and when they load the constants

• On my mobile phone (on dev site), the constant values do not load (i.e. show 0)

These are not due to Infura, as these are all loan constants. Currently, we return them in metadata.js.

• Should we refactor and move all loan constants into one file? (consider config/ines.fund.js)
• Should we just use constants, instead of fetchLoanMetadata in metadata.js (we can replace these with getter functions in the future, but it is likely that most of these will be stored in databases + IPFS, and not on-chain)

User Story

As a borrower or lender, I want investment details on my investment page to load faster so that I can quickly see my investment details.

Why Is this Needed

The investment details on my investment page should load faster to provide the desired user experience

Current Behavior

here

Expected Behavior

There is a very little delay or no delay at all when users access my investment page

Definition of Done

• There is no significant delay when accessing my investment page
• the users (borrower or lender) will immediately see their investment details after opening my investment page.

Data Requirements

Additional Information

Need to remove
float:left
from 3Box hover profile

• HeroCell: should have padding: 20px for mobile (media query below 768)
• TabContent: 20px 20px (or less)
• Youtube video should have full width (negative margin)

We should have a conditional render based on what network we are part of

• Instead of Kovan Testnet warning, we should modify for the user to accept a warning that this is beta software

After the crowdfund is over,
the UI starts to read negative days

4. My Loan page

Balsamiq Wireframe of Loan Offer page

Page Purpose:

• After making a successful loan, the lender should be redirected to a dashboard showing the total amount they have loaned, and the repayment schedule and status
• Longer-term, the lender should be able to visit a "My Loan" to track the status of the loan, repayment status, and withdraw his or her balance to his Eth wallet

Todos

• When the lender's loan is successful and he/she is redirected to the "My Loan" screen, there be a success notification on the "My Loan" page
• User Testing of this page is very important!

Design Guidelines

Mobile-first, Desktop responsive

The wireframes have been optimized for mobile as we anticipate most first-time visitors will be hearing of this through Twitter or reddit. However, most Ethereum app interaction happens on desktop through Metamask, so the site should be desktop responsive.

A possible example that balances functionality with simplicity is Balance, an open finance wallet. I have attached 2 screenshots below of how it utilizes container width to be usable on both mobile and desktop.

User Story

As a user that has not connected to any wallet, I want the connect to Metamask button to show up on the investment page so that I connect to my wallet and see the investment details

Why Is this Needed

Non-login users should log in to their wallets before able to see their investment details.

Current Behavior

• Here

• Metamask will appear to ask the user to log in into his/her wallet.

Expected Behavior

here

Definition of Done

See above

Data Requirements

Additional Information

Currently, page content is blocking on some async action (see gif below)

We should show spinners in each of the individual data fields, instead of render blocking the entire page

Related story: #57

• Should implement 3Box mouseovers
• Should link to Ines' social media profiles
• Eth Wallet Key should not overflow

• Identity Card
• Calculator (Simulated Returns)
• Writeup
• Company Sponsorships
• Contributors

• Prevent unnecessary re-renders of sliderValue call toString() of integer

Right now, the component is way too bloated. Let's move out the 3 sub-components into their own component and import them

• Mobile design should match

in hero/index.tsx

• handleLend should show a modal popup
• should use Rimble toasts

const FALLBACK_WEB3_PROVIDER = "http://localhost:8545";

getWeb3.js

See simulationReturn.tsx