Stcelo front-end V2 (#133)

* Components for New Features (#105)

* Add LinkOut Component
Add Purple Caret Icon

* Add Pill Component

* Add Row Component (list item)

* temp create a library page to view Components on

---------

Co-authored-by: Aaron <[email protected]>

* Dependency Upgrades (#106)

* upgrade to latest versions of react celo

Adds support for wallet connect v2 and drops support for v1

* add "dark" to body so react-celo modal is also in dark mode

note theme is set in a provider below the CeloProvider so this seemed simpler than moving components around

---------

Co-authored-by: Aaron <[email protected]>

* chore: ran npx update-browserslist-db@latest

* refactor: navigation (#108)

* refactor: navigation

* fix: remove unused mode

* refactor: make pages routing clearer

* fix: slug could be undefined

* fix: remove unecessary ga interactions

* Validator Selection Feature part 1 (#109)

* add validatorGroupRow component


* remove margin from row as spacing should be handled by parent padding and gap
lists should be lists


---------

Co-authored-by: Aaron <[email protected]>

* Refactor onModeChange to be non duplicated (#110)

* remove duplicated interfaces and methods relating to changing the current mode

* remove duplicated mode change code

* clean up path

* removed to much

---------

Co-authored-by: Aaron <[email protected]>

* use StakedCelo as the app name everywhere (#107)

Co-authored-by: Aaron <[email protected]>

* feat: add governance layout and detail page (#111)

* feat: add governance layout and detail page

* fix: governanceProps

* feat: styling

* feat: show past proposals

* chore: PR review feedback

* Fetch Validator Groups (#113)

* Fetch Validator Groups (no filtering yet)

* add info about exactly what will be filtered

* add graph request for querying block explorer for validators

* fetech validators groups for correct chain
add celo explorer graphql endpoints

* removing as React celo now does switch the network even after changing chain 10 times.

* move to components directory and fix issue when name is undefined

* clean url means celo main

* remove commented out code

* prepare for merge

* review suggestion: name is falsey unless its at least once char

* chainId in query across all pages so links work nicer

* fix infinite loop now that its on multiple pages

---------

Co-authored-by: Aaron <[email protected]>

* Validator Group Page (#114)

* fetch validator group name from chain.
Details => Show page
Validators => List Page
Move ValidatorGroupRow to components folder

* Add Validator Show Page / Selection

respond 404 if address is invalid
move components shared between features to top components directory
getGroupName returns Default Strategy for address 0
add react-use-async-callback for better dev-ex

* change language

* Fix links

* fix overflows on long group names
remove background where its not needed
dont display zeros

* fix back link

* show the back button even while loading or erroring.

* abstract out reusable connect button

allow Valdiator Group and Proposal Detail pages to be viewed without being logged in.

name Show Page back to Details Page for consistency

* more detail to show row / group is currently highlighted
link address to explorer
show more of address when it is used as name

* rename useQueryStringFor chain to a less confusing name

* fix typo

---------

Co-authored-by: Aaron <[email protected]>

* Contracts + Contract Types + Blockchain Context (#115)

* add status label to governance proposals and center spinner

* refactor: make useBlockchain reference to a Context so contracts are only created once in the app rather than once per component.
add typechain so StCelo contracts are properly typed
add early returns when things are not loaded yet

* constants dont need to be prefixed with `NEXT_PUBLIC` that is for secrets kept in .env files that you want to be viewale on browser. having it here jut adds noise

add ABIs for GroupHealth, Vote and SpecificGroupStategy

* Manger Contract v2 beta

* comment out useWithdrawal for now as managr.getGroups is no longer a method


---------

Co-authored-by: Aaron <[email protected]>

* add in transitions between pages (good for waiting for serverside data) (#119)

update Names of featues

Co-authored-by: Aaron <[email protected]>

* Select Group + Current Selected Group First (#116)

* get current strategy, + sort so its on top

select strategy, (including toast message)

dont use hooks directly use thru accountContext

default to dark mode in css (already defaults to this anyway but only after first render)

* reload strategy when its changed


---------

Co-authored-by: Aaron <[email protected]>

* add/update alfajores contract addresses (#120)

Co-authored-by: Aaron <[email protected]>

* trying out gathering proposals serverside (like validator groups) (#118)

* trying out gathering proposals serverside (like validator groups)

* fix dup proposal types

* remove hook as all fetching and processing has been moved to backend

* ensure proposals dont have any Bignumbers and can be jsonified

* only get markdown for proposals we actually use

* sort proposals so most recent are first

* dont use upvotes so why send em

* fix type

---------

Co-authored-by: Aaron <[email protected]>

* Group filtering (#121)

* WIP Nfilter groups by health and block status.

& get actually addresses for contracts.

Adds multicall to reduce number of requests to blockchain.


* block parameter for multicall is the one we are looking up data for not the one the contract was created.


---------

Co-authored-by: Aaron <[email protected]>

* parsed yaml was missing from individual page json (#122)

Co-authored-by: Aaron <[email protected]>

* Feat/governance voting (#124)

* perf: optimize getting all proposals

* feat: vote for proposal

* chore: address feedback

* feat: remove unused code

* fix: type

* fix: use proper vote weight

* Voter History (#130)

* fixes incorrect contract address and infinite router issue on page load

* show st celo holders how they voted for proposals

---------

Co-authored-by: Aaron <[email protected]>

* Mainfest.json for safe app support (#131)

* follows https://docs.safe.global/learn/safe-apps/releasing-your-safe-app to make stcelo safe compatible.

fixes #128

* setup cors for mainfest.json

* typo

---------

Co-authored-by: Aaron <[email protected]>
Co-authored-by: Nicolas Brugneaux <[email protected]>

* chore: add bundle analyzer in gh actions (#132)

* Rainbowkit+viem migration (#129)

* wip: rainbowkit

* feat: use @celo/rainbowkit beta

* refactor: chain imports

* chore: update rainbowkit-celo to 1.0.0

* feat: multicalls with viem

* chore: remove ts-expect-errors

* test

* feat: add tx modal to governance and fix validators not closing it

* types

* fix all types

* follows https://docs.safe.global/learn/safe-apps/releasing-your-safe-app to make stcelo safe compatible.

fixes #128

* setup cors for mainfest.json

* fix get logs

* ignore ts error

* fix redirection

* typo

* chore: remove web3

* chore: review feedback

* chore: remove unused types

* chore: bundle analyzer

* refactor: wagmi hooks!

* refactor: use useblockchain properly

* refactor: remove big file

* fix: possible undefined pendingWithdrawals

* refactor: use `enabled` pattern

* fix: possible undefined loadPendingWithdrawals

* fix: type

* fix: wrong args

* chore: attempt at speeding up liting

* fix: possibly undefined variable

* chore: attempt at speeding up liting

* fix: use cp instead of ln

* fix: bit safer

* fix: handle errors better

* chore: remove unused consts

* refactor: pr review

* refactor: use walletconnect project id

* chore: remove unused type

* feat: add placeholder plage in case contracts aren't deployed

* feat: copy changes

* fix: remove unused variable

* chore: upgrade deps

* feat: upgrade to rainbowkit 1.0.3 and celo/abis 9.0.6

* chore: upgrade rainbowkit-celo

* chore: upgrade rainbowkit and deps

* chore: upgrade rainbowkit-celo

* chore: projectid???

* chore: idk what is happening at this stage

* fix: 100% cpu

* fix: use import Router

* fix: reverse mainnet and testnet due to a bug in  wagmi+wcv2

* chore: force @wagmi/connectors to be ^2.6.4

* fix: attempt yet again a new project id

* fix: remove minimization

* Revert "fix: attempt yet again a new project id"

This reverts commit 6d63eff.

* fix: reenable minification without swc

---------

Co-authored-by: Aaron <[email protected]>

* fix: merge conflict

* feat: add back the withdrawal bot (#142)

* feat: add back the withdrawal bot

* fix: useState deps

* fix: PR review

* refactor: clearer naming

* feat: wording

* fix: borken layout

---------

Co-authored-by: Aaron DeRuvo <[email protected]>
Co-authored-by: Aaron <[email protected]>
Co-authored-by: Aaron DeRuvo <[email protected]>

.gitignore

@@ -39,3 +39,4 @@ public/THIRD_PARTY_LICENSES.txt
 
 # env
 .env
+src/blockchain/types

.vscode/settings.json

@@ -48,4 +48,7 @@
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
   "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": [
+    "unstake"
+  ],
 }

next.config.js

@@ -45,4 +45,7 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+module.exports = withBundleAnalyzer(nextConfig);

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "liquid-staking",
-  "version": "1.1.0",
+  "name": "staked-celo-app",
+  "version": "2.0.0",
   "private": false,
   "scripts": {
     "dev": "next dev",
@@ -10,32 +10,42 @@
     "generate-disclaimer": "yarn licenses generate-disclaimer --production > ./public/THIRD_PARTY_LICENSES.txt"
   },
   "dependencies": {
-    "@celo/contractkit": "^3.2.0",
-    "@celo/react-celo": "^5.0.4",
+    "@celo/abis": "^9.0.6",
+    "@celo/rainbowkit-celo": "1.0.2-beta.2",
+    "@rainbow-me/rainbowkit": "^1.0.4",
     "@types/react-modal": "^3.13.1",
     "@types/react-transition-group": "^4.4.5",
+    "@wagmi/chains": "^1.4.0",
     "axios": "^0.27.2",
     "bignumber.js": "^9.0.2",
     "compliance-sdk": "^1.0.5",
+    "date-fns": "^2.29.3",
     "dayjs": "^1.11.4",
+    "graphql": "^16.6.0",
+    "graphql-request": "^5.2.0",
     "next": "12.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-modal": "^3.15.1",
     "react-number-format": "^4.9.3",
     "react-toastify": "^9.0.5",
     "react-transition-group": "^4.4.5",
-    "web3": "^1.3.6",
-    "web3-core": "1.3.6",
-    "web3-utils": "^1.7.4"
+    "react-use-async-callback": "^2.1.2",
+    "viem": "^1.2.9",
+    "wagmi": "^1.3.4"
+  },
+  "resolutions": {
+    "@wagmi/connectors": "^2.6.4"
   },
   "devDependencies": {
+    "@celo/contractkit": "^3.2.0",
+    "@next/bundle-analyzer": "^13.4.3",
     "@types/gtag.js": "^0.0.11",
     "@types/node": "18.0.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "autoprefixer": "^10.4.7",
     "eslint": "8.19.0",
     "eslint-config-next": "12.2.1",
@@ -44,7 +54,7 @@
     "prettier": "^2.7.1",
     "sass": "^1.54.3",
     "tailwindcss": "^3.1.5",
-    "typescript": "4.7.4",
+    "typescript": "5.0.4",
     "webpack": "^5.76.0"
   },
   "nextBundleAnalysis": {

public/site.webmanifest

@@ -1,16 +1,18 @@
 {
-    "name": "Liquid Staking",
-    "icons": [
-        {
-            "src": "/public/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/public/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "display": "standalone"
+  "name": "StakedCelo",
+  "iconPath": "android-chrome-512x512.png",
+  "description": "A simple DApp for Celo liquid staking. Stake your CELO and vote on governance proposals while maintaining liquidity.",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "display": "standalone"
 }