# Frontend TODOs

Test link: https://bubki.netlify.app
Figma File: https://www.figma.com/file/UWDXK1R47W7jmEwKqbeDqf/%5BFE%5D--Ukraine-Yield-Delegator?node-id=0%3A1

# TODO

## P0
**Need to complete before launch**

- Other mint page work
- *- Owner: feathers*
- Change `Mint` button string to `Minting...` while the button is disable and the site awaits the tx confirmation [DONE :)]
- Mobile
- Connect wallet function not working for michelle (i dont think walletconnect is setup for this project unfortunately?)
- General
- Need to update about page to show where the funds are going and what address (@Mike)
- Update og:image with this asset: https://drive.google.com/file/d/11WjwTT0FcUHgCCxHSgt378mCzpzhnlXk/view?usp=sharing
- Staking page
- PR is up, need to fix decimals and wait for approval tx
- change "total yield earned" to "total currently staked"

## P1
**Important but not launch blocking**

- Add ipfs deployment via gh actions so anyone can access even site is blocked in some countries
*- Owner: yoginth.eth*
- Home Page (mobile)
- enables scroll to the right (and causes awk white spacing)
- Leadership page
- Add "Thank You!" in subtle font in title header -- reference figma file link
- Global
- Button font should be a touch smaller (w new font)
- Change font to Inter
- Mint page
- Make flower image/element link to OpenSea collection

## P2
**Important but less launch blocking**
- USDT from donate coin dropdown needs to be circle (currently is a square -- can take this photoshopped asset uploaded here: https://github.com/0xBubki/donate/blob/main/public/icons/tether-coin.png
- Leaderboard page mobile layout has "d" from "Donated" wrapped to next line

## P3
**Fix these if we have time**
- Leaderboard
- Fix leaderboard table position before content of the table loads to avoid vertical movement (from center of the screen when table is empty to top aligned when it's filled)
- Add in "thank you to everyone who donated" copy on leaderboard
- Underline the page you're on in the nav header

## P4
**Nice to haves**
- About page
- pile of ukraine flag icons around image
- We could add tabs to show NFTs if we wanted? Would prob be good for an eng to pick up a graph for that
- Add social icons w/ links at the bottom of every page
- Add a countdown to release of nft collection on mint page
- Carousel with latest donations at the bottom of the screen
- Add react-countup to big aggregated numbers (home page donation total & personal donation total)
- https://www.npmjs.com/package/react-countup

## Add new items here if you aren't sure
(Michelle or one of the other PMs will determine priority + sort)

- [sample bug + page]
-

### DESIGN CALL / OTHER NOTES
- javascript for minting script (ABI for contract instatiation) @relyt
- translation notes: https://www.notion.so/Copy-e439e050539649249debd85ad3aea4e2
- working w netlify to get a comped plan
- [PR](https://github.com/0xBubki/donate/pull/108) for fixing the persistence of wallet. Reminder to devs to use NextLink for routing:

import NextLink from 'next/link'
import { Link } from '@chakra-ui/react'

<NextLink href="/">
  <Link style={{}} {...props}>
    foor
  </Link>
</NextLink>

### DONE
- ~~Confirming the connect button isn't working... need to fix that~~
- ~~buy `domain` (bubki.xyz)~~
- ~~Bubki logo very misaligned (needs to be left aligned to content grid)~~
- ~~nav bar elements (connect wallet button, language selector, etc.) need to be right aligned to content grid. Currently they're just extending to the right end of the page with almost no padding.~~
- ~~- Make localization work. Owner: jmichaliga. when changing pages it doesn't respect the localization set (cache in local storage?) https://github.com/0xBubki/donate/pull/104)~~
~~- Implement translations for pages (and update dropdown)~~
~~- persistence of wallet connection breaks on home and about~~
~~- Home Page blue background is off~~
~~- Mint page needs to call actual contract to mint: load ABI and call mint method. DONE - needs to be tested // MH: i think this works? https://rinkeby.etherscan.io/tx/0xf8a69c76494a44d09a8c1f82bf7b1898a815f3cad54c27c16b13c3b008164ad6 but need to confirm around dynamic numbers~~
- ~~functionality on the stake page; update stake page (include unstake button); Need to hook up PoolTogether on the stake page to pull real data~~
~~- Number of mint needs to be dynamic (X/10000 minted)~~
~~- Handle error state for minting, replace text with: "Something went wrong, please try again."~~
~~- add listen and fire a toast saying successfully minted and reset button state so user can mint again~~
~~- Link to correct NFT after tx confirms successfully (seems hard-coded to token ID #2 rn) [DONE - Links to opensea collection]~~
~~- Donate Page (scrapped)~~
~~- Nav: change to "mint NFTs"~~
~~- About Page: update page copy to link through to unchain.fund and put their contract address~~
~~- About Page: Center the div (or increase padding on the sides) so that the content is more in the middle; Increase the spaces between each header + paragraph section~~