nation3 / citizen-app Goto Github PK
View Code? Open in Web Editor NEWNation3 citizen app
Home Page: https://app.nation3.org
License: GNU General Public License v3.0
Nation3 citizen app
Home Page: https://app.nation3.org
License: GNU General Public License v3.0
As we start having more apps for citizens, it’s easily for the frontend to become quite a monolith. There are a few ways to not fall into that issue:
I think the last option makes the most sense. I’d propose moving most of the components under a shared library in a repo (which can be nation3/shared
). This library can expose two packages: @nation3/components
and @nation3/utils
.
From a practical perspective, this means:
Current components
directory: All current components can be moved to @nation3/components
.
_app.tsx
and _document.tsx
can also be exported in @nation3/components
.
Current lib
directory: These files could be moved to @nation3/utils
connectors.ts
approve.ts
nation-token.ts
network-id.ts
numbers.ts
passport-nft.js
static-call.ts
use-*.ts
ve-token.ts
Finally, a Nation3App
component can implement:
It could be something like this:
const sidebar = [
{
name: 'Start',
href: '/',
icon: <ViewGridIcon className="h-5 w-5" />,
},
{
name: 'Become a citizen',
href: '/join',
icon: <UserAddIcon className="h-5 w-5" />,
}
]
return (
<Nation3App sidebar=sidebar>
{children}
</Nation3App>
)
When the lock is an extension of a pre-existing lock, the final balance estimation fails:
To test the code changes of each pull request, start a server on localhost:3000
before running the tests. This way, we can catch UI errors sooner.
Docs: https://nextjs.org/docs/testing#running-your-cypress-tests
Suggested by @Caranell at #86 (comment)
@luisivan we should also publish the goerli .env
contract addresses
Originally posted by @gregfromstl in #14 (comment)
Page is not displayed properly on mobile: https://app.nation3.org/citizen
I don't understand how going from 3 different RPC providers to one is a good move.
I don't feel good about maintaining these three keys, especially in UI code, I can see all your API keys (someone can send a lot of traffic to these and break things):
If you are looking for fallback providers, i think it is better to use a few other trusted public nodes, and use FallbackProvider instead
Originally posted by @biendeveloper in #107 (comment)
https://app.dework.xyz/nation3/app-2?taskId=0554bc64-e2b2-4161-90b5-75997aaf3891
A bug causes the "Lock expiration date" slider at https://app.nation3.org/lock to automatically adjust itself to the original date after a few seconds, which is causing trouble for users interacting with the app:
How to reproduce:
If you are having trouble reproducing this behavior, it could be that this bug only happens for users that have already locked $NATION
. If that's the case, you can obtain some test tokens at https://goerli.balancer.fi/#/trade/ether/0x333A4823466879eeF910A04D473505da62142069
It's not good for vision-impaired people to view some of the content as the background color(them color) is too sharp or not contrast enough. Could you please add an option to add a dark mode maybe?
For example, this page https://nation3.org/join#carousel
After have done an unlimited approval before:
https://etherscan.io/tx/0xf58e4108795db19e424ef987e29c9d0e29c0a7530b2a4ce4a54ff662dc3b019f
The UI for /liquidity keeps asking for approval again:
Initially reported by other user.
Same behaviour on /lock.
@pythonpete32 We don't know yet if this typo is in the code or in the Vercel admin dashboard. But we'll double-check that once we get admin access to Vercel.
Originally posted by @aahna-ashina in #168 (comment)
Introduce logging in some of the main functions to make it easier to pin down the location of bugs/errors.
https://app.dework.xyz/nation3/app-2?taskId=52213f7d-c0f1-4b62-8545-6f4f9f794ea7
Unhandled promise rejections are making integration tests unstable: https://github.com/nation3/app/runs/7461874997?check_suite_focus=true
To reproduce, open https://app.nation3.org/ in a browser without Web3 support.
javascript
Uncaught (in promise) Error: invalid address or ENS name (argument="name", value=undefined, code=INVALID_ARGUMENT, version=contracts/5.6.1)
at d.makeError (_app-f771c5453f43eeba.js:1:107374)
at d.throwError (_app-f771c5453f43eeba.js:1:107494)
at d.throwArgumentError (_app-f771c5453f43eeba.js:1:107549)
at _app-f771c5453f43eeba.js:1:63972
at Generator.next (<anonymous>)
at s (_app-f771c5453f43eeba.js:1:63452)
First reported in Discord: https://discord.com/channels/690584551239581708/963777388712460288/968696161416400916
I tried to lock 2 $NATION for 4 years three times but it shows the error and the transaction failed.
This is the transaction hash: https://etherscan.io/tx/0x9ce585e255a2afe5d9a006c33c5c3ed5b8e9089a9e6185fb700221cc351f4fce
transaction failed [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (transactionHash="0x9ce585e255a2afe5d9a006c33c5c3ed5b8e9089a9e6185fb700221cc351f4fce", transaction=
{
"hash": "0x9ce585e255a2afe5d9a006c33c5c3ed5b8e9089a9e6185fb700221cc351f4fce",
"type": 2,
"accessList": null,
"blockHash": null,
"blockNumber": null,
"transactionIndex": null,
"confirmations": 0,
"from": "0x568b9bFfF4a3a7C7351db84EC2F4Ad4CA147A1D0",
"gasPrice": {
"type": "BigNumber",
"hex": "0x0b356e6a69"
},
"maxPriorityFeePerGas": {
"type": "BigNumber",
"hex": "0x59682f00"
},
"maxFeePerGas": {
"type": "BigNumber",
"hex": "0x0b356e6a69"
},
"gasLimit": {
"type": "BigNumber",
"hex": "0x06b1f4"
},
"to": "0xF7deF1D2FBDA6B74beE7452fdf7894Da9201065d",
"value": {
"type": "BigNumber",
"hex": "0x00"
},
"nonce": 42,
"data": "0x65fc38730000000000000000000000000000000000000000000000001bc16d674ec800000000000000000000000000000000000000000000000000000000000069e56c80",
"r": "0xb4d1d9bdf85e15567998f70133017a9abf24c251163306fd1f4f042185e1ccd5",
"s": "0x0efde33ece255b3ff19b276755eaf2daa2b23294ad24152100ee93b8a3df5841",
"v": 1,
"creates": null,
"chainId": 0
}, receipt = {
"to": "0xF7deF1D2FBDA6B74beE7452fdf7894Da9201065d",
"from": "0x568b9bFfF4a3a7C7351db84EC2F4Ad4CA147A1D0",
"contractAddress": null,
"transactionIndex": 225,
"gasUsed": {
"type": "BigNumber",
"hex": "0x06b1f4"
},
"logsBloom": "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
"blockHash": "0xb251a8ee4062576a65cce73ba94c385f565008e03ebb9f4b3b09e68bb257375d",
"transactionHash": "0x9ce585e255a2afe5d9a006c33c5c3ed5b8e9089a9e6185fb700221cc351f4fce",
"logs": [],
"blockNumber": 14625765,
"confirmations": 2,
"cumulativeGasUsed": {
"type": "BigNumber",
"hex": "0x013a2c4e"
},
"effectiveGasPrice": {
"type": "BigNumber",
"hex": "0x0b27d195ff"
},
"status": 0,
"type": 2,
"byzantium": true
}
, code=CALL_EXCEPTION, version=providers/5.6.0)
After staking some LP tokens, the page refreshed to show this error:
Application error: a client-side exception has occurred (see the browser console for more information).
The console showed this:
inpage.js:1 MetaMask - RPC Error: execution reverted Object
(anonymous) @ inpage.js:1
framework-5f4595e5518b5600.js:1 Error: invalid decimal value (argument="value", value="Infinity", code=INVALID_ARGUMENT, version=bignumber/5.7.0)
at d.makeError (_app-829a704c68928b4b.js:1:170377)
at d.throwError (_app-829a704c68928b4b.js:1:170497)
at d.throwArgumentError (_app-829a704c68928b4b.js:1:170552)
at m (_app-829a704c68928b4b.js:1:50776)
at Module.u (_app-829a704c68928b4b.js:1:369179)
at p (582-eb8d93187353437a.js:1:5354)
at liquidity-eef06e9b6bca3c51.js:1:29401
at Ui (framework-5f4595e5518b5600.js:1:104662)
at t.unstable_runWithPriority (framework-5f4595e5518b5600.js:1:129336)
at Ql (framework-5f4595e5518b5600.js:1:44981)
After refreshing the page it looks like everything was successful: the staked LP show up under Unstake
as expected ('Available to withdraw').
At https://app.nation3.org/liquidity, I can see this text:
You can boost your APY to 124.16%. To do so, claim your current rewards.
But how can a reward of 0.0028 boost the APY from 66.61% to 124.15%?
Is there a bug with the way the potentialBoost
variable is calculated?
Add Web3 wallet support to the integration tests so that we can automatically test blockchain interactions for each pull request.
This will greatly reduce future bugs related to a wallet interacting with the Nation3 app.
Before staking the LP tokens, the value shown for Your boosted APY
was exactly the same as Rewards APY
. After successfully staking, it's about 5% higher. I think that same value should also be shown before staking?
It would also be nice to explain what up to 2.5x more rewards
means exactly. What's the formula? How much veNATION do I need to have to get the maximum?
zhongbuzhong.eth
https://app.dework.xyz/nation3/app-2?taskId=307bc999-e381-4919-b569-f2a7465f3dbd
To make it easier for developers, we need to move public environment variables out of Vercel. Development work involving process.env.*
is now is slow and difficult because not all developers have access to Vercel, and therefore cannot easily know the value of each variable or add/edit variables.
More context here: https://discord.com/channels/690584551239581708/963778898389237800/999871593184497765
Remove usage of all process.env.NEXT_PUBLIC_*
variables except for NEXT_PUBLIC_CHAIN
:
After the PR for this issue has been merged into main
:
NEXT_PUBLIC_*
variables except for NEXT_PUBLIC_CHAIN
Steps to reproduce:
Result:
How to reproduce: Obtain at least 2 $veNATION
, then press the claim button at http://localhost:42069/join
next-dev.js?3515:32 TypeError: claim is not a function
at _callee$ (join.tsx?f81f:46:24)
at tryCatch (runtime.js?ecd4:45:16)
at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
at asyncGeneratorStep (join.tsx?f81f:27:53)
at _next (join.tsx?f81f:27:53)
at eval (join.tsx?f81f:27:53)
at new Promise (<anonymous>)
at Object.eval (join.tsx?f81f:27:53)
at Object.eval [as onSuccess] (join.tsx?f81f:44:40)
at N.execute (index.production.js?491d:21:15248)
At https://app.nation3.org/liquidity, the "Available to withdraw" amount under "Unstake" is rounded, causing UX problems when the number gets rounded to a higher number than what is available in the user's account.
When pressing "MAX", the actual number is used:
But when the user copies the number from the input field label and pastes it into the input field, the Ethereum transaction will fail:
Solve this by showing the full amount instead of rounding it to 2 decimals.
https://app.dework.xyz/nation3/citizen-app-p?taskId=f614e270-4baf-4e1a-80d7-a6a9f3ad1234
How to reproduce:
$veNATION
Add license for this repository's code to LICENSE.md
.
How to reproduce:
$NATION
tokensIf you want to reproduce on Goerli, you need to get some test tokens first.
main-acf70204e036151b.js:1 TypeError: Cannot read properties of undefined (reading '0')
at lock-a83f12e356202410.js:1:6747
at Object.To [as useMemo] (framework-bb5c596eafb42b22.js:1:64149)
at t.useMemo (framework-bb5c596eafb42b22.js:1:125294)
at S (lock-a83f12e356202410.js:1:6686)
at oo (framework-bb5c596eafb42b22.js:1:59416)
at Wo (framework-bb5c596eafb42b22.js:1:68983)
at Ku (framework-bb5c596eafb42b22.js:1:112707)
at Li (framework-bb5c596eafb42b22.js:1:98957)
at Ni (framework-bb5c596eafb42b22.js:1:98885)
at Pi (framework-bb5c596eafb42b22.js:1:98748)
During development, when NEXT_PUBLIC_CHAIN=goerli
, use https://goerli.balancer.fi
instead of https://app.balancer.fi
.
This way, a developer can more easily trade and pool $NATION
tokens on the Goerli testnet.
Balancer pool on Goerli: https://goerli.balancer.fi/#/pool/0x6f57329d43f3de9ff39d4424576db920b55060b30002000000000000000000d7
The files that need to be updated are:
https://github.com/nation3/app/blob/130d1fec82f44a209969164d1ad17b835569b9d7/ui/pages/index.tsx#L85
https://github.com/nation3/app/blob/130d1fec82f44a209969164d1ad17b835569b9d7/ui/pages/index.tsx#L98
https://github.com/nation3/app/blob/0e0bb4d2bdd28406a7b8f7cd5ed693234eb956ae/ui/pages/claim.tsx#L84
https://github.com/nation3/app/blob/956c1e33fcff3e7dcaac3136c3602b60ebd6e974/ui/pages/join.tsx#L184
https://github.com/nation3/app/blob/main/contracts/deployments/goerli.json
Fix unhandled runtime error introduced in #147
Remove signer account settings from https://app.nation3.org/citizen to avoid confusion during Snapshot voting.
Revamp the config system to use the *.json
manifest files found in contracts/deployments
by default and use only the ENV variable to override.
Originally posted by @xPi2 in #18 (comment)
An error is thrown at /lock
:
next-dev.js?3515:32 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at EthersInput (webpack-internal:///./components/EthersInput.tsx:69:27)
at div
at div
at div
at div
at div
at div
at div
at MainCard (webpack-internal:///./components/MainCard.tsx:12:26)
How to reproduce:
cp .env.goerli .env.local
yarn dev
Go to http://localhost:42069/lock and type a number into the "Lock amount" field.
How to reproduce:
inpage.js:1 MetaMask - RPC Error: execution reverted {code: -32603, message: 'execution reverted', data: {…}}
The error seems to occur only when the Ethereum account holds zero $veNATION
.
Refactor the code so that no error is thrown in the console.
A couple users reported to me the same UX problem.
When trying to withdraw & claim on https://app.nation3.org/liquidity they got confused by the fact that you can select an amount of tokens to withdraw but if you click ¨withdraw all and claim¨ you are actually withdrawing all your staked tokens.
As the contract doesn't implement an option to withdraw a set amount and claim on the same transaction i think the best fix would be to add a tooltip in this button that clarifies that you are about to withdraw ALL your tokens.
Application error when typing more than 18 decimals as stake amount at https://app.nation3.org/liquidity
Error: fractional component exceeds decimals [ See: https://links.ethers.org/v5-errors-NUMERIC_FAULT ] (fault="underflow", operation="parseFixed", code=NUMERIC_FAULT, version=bignumber/5.6.1)
at d.makeError (_app-6c618fae021f384d.js:1:107374)
at d.throwError (_app-6c618fae021f384d.js:1:107494)
at h (_app-6c618fae021f384d.js:1:49985)
at m (_app-6c618fae021f384d.js:1:50990)
at Module.u (_app-6c618fae021f384d.js:1:261202)
at u (57-1a3a605a543a96c8.js:1:5929)
at R (liquidity-5b716c9f1c561dc5.js:1:26463)
at oo (framework-5f4595e5518b5600.js:1:59412)
at Wo (framework-5f4595e5518b5600.js:1:68979)
at Ku (framework-5f4595e5518b5600.js:1:112703)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.