feat: add an approval/funding UI #30

zugdev · 2024-11-21T03:26:01Z

Resolves #29

I like the word funding better than approval, allowance or permit2, as it is better aligned with the "ubiquity banking" concept. Don't worry bout the text, it still needs rephrasing.

Current UI:

I have a couple questions:

Should I force UUSD or should I offer an input field for token. If I should force, what about chains where UUSD is not at currently? I've included all permit2 chains I could, for now.
I don't want to have user authenticate with GitHub, it's an unnecessary step, but if I did I could read what chain he has payments setup in. Is there a way to read what token he is using as reward too? If that was the case I should consider adding GitHub auth.
I am waiting on the above to integrate ethers.

github-actions · 2024-11-21T03:27:59Z

Unused dependencies (4)

Filename	dependencies
package.json	`@coinbase/wallet-sdk` `@reown/appkit` `@reown/appkit-adapter-ethers5` `ethers`

Unused devDependencies (2)

Filename	devDependencies
package.json	`@types/react` `react`

ubiquity-os-deployer · 2024-11-21T03:28:18Z

rndquu · 2024-11-21T08:42:48Z

Should I force UUSD or should I offer an input field for token. If I should force, what about chains where UUSD is not at currently? I've included all permit2 chains I could, for now.

There should be a separate input for a token. When mainnet or gnosis is selected the UUSD should be set in the input token field by default but user should have the ability to change the token address.

I don't want to have user authenticate with GitHub, it's an unnecessary step, but if I did I could read what chain he has payments setup in. Is there a way to read what token he is using as reward too? If that was the case I should consider adding GitHub auth.

Check this comment. Overall github auth is not necessary as a part of the current github issue and can be solved in another PR.

ubiquity-os · 2024-11-22T19:50:00Z

@zugdev, this task has been idle for a while. Please provide an update.

0x4007 · 2024-11-24T14:24:30Z

Should I force UUSD or should I offer an input field for token. If I should force, what about chains where UUSD is not at currently? I've included all permit2 chains I could, for now.

I wonder if it makes sense for us to bridge over to as many chains as we can. I suppose anybody can do this and we just need to aggregate the addresses.

I don't want to have user authenticate with GitHub, it's an unnecessary step, but if I did I could read what chain he has payments setup in. Is there a way to read what token he is using as reward too? If that was the case I should consider adding GitHub auth.

This is actually determined by the partner project currently. So in theory we could have partner A, B, and C and each pays with their own preferred token on their own preferred chain. This is because they need to fund their wallets with whatever asset they want.

I am waiting on the above to integrate ethers.

zugdev · 2024-11-26T21:02:00Z

I think aside from providers that's it. I need to find a smart way to use providers in all 10+ chains, why don't we use Alchemy or some service like that?

0x4007 · 2024-12-25T18:49:15Z

@rndquu can you move this review forward?

rndquu

@zugdev

Pls fix failing CI workflows
Could you open etherscan transaction URL on transaction click?

3. Somehow on revoking approval the "Success" modal is not shown although transaction is sent successfully

.github/workflows/build.yml

zugdev · 2024-12-26T07:45:33Z

@rndquu fixed

rndquu

Works fine

EresDev

Looking good. Just a few small improvements and we are good to go.

static/handle-approval.ts

static/index.html

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

…evelopment

zugdev · 2024-12-26T21:32:01Z

@0x4007

ubiquity-os · 2024-12-29T21:18:23Z

@zugdev, this task has been idle for a while. Please provide an update.

whilefoo

Did you get it working with Anvil or did you test it on testnet? I tried with Anvil fork of mainnet but got Internal JSON-RPC error when trying to approve

static/populate-dropdown.ts

test-dashboard.md

whilefoo · 2025-01-08T21:44:12Z

static/main.ts

+  if (appState.getIsConnectedState() && window.ethereum) {
+    const ethereum = window.ethereum as ethers.providers.ExternalProvider;
+    if (ethereum.request) {
+      await ethereum.request({ method: "eth_requestAccounts" });
+    }
+
+    // Create a Web3Provider from window.ethereum
+    web3Provider = new ethers.providers.Web3Provider(window.ethereum);
+
+    // web3Provider signer will handle transaction signing
+    userSigner = web3Provider.getSigner(appState.getAddress());
+
+    console.log("User address:", await userSigner.getAddress());
+  } else {


this will only work for browser extension wallets but Reown also supports mobile wallets, so why not just use appState.getWalletProvider() and appState.subscribeProvider(handleChange)

I tried that, but reown doesnt offer a signer so we would need to externally manage it anyway. also this is the standar for other UIs in ubiquity too

I don't understand. appState.getWalletProvider() returns a provider and then you call provider.getSigner() and you get the signer

appState.getWalletProvider() returns undefined, you can try it for urself :(

reown was previously wallet connect, but there are still distinctions like that from a new product

whilefoo · 2025-01-08T21:50:28Z

static/handle-approval.ts

+    console.error("Provider is not initialized");
+    return;
+  }
+
  const tokenAddress = addressInput.value;


you might wanna check if the address is ERC20 because if put a random address then it throws a revert error and it can be confusing to the users

managed that, thanks

whilefoo · 2025-01-08T21:54:17Z

static/display-popup-modal.ts

@@ -1,6 +1,8 @@
+import { appState, explorersUrl } from "./main";
+
 export function renderErrorInModal(error: Error) {


for common errors like ACTION_REJECTED you can display a more user-friendly error message

we already display action rejected in a pretty way, also we try to avoid all errors instead of better displaying them. insufficient funds, missing new, numeric fault .. are handled. we could handle nonce id if user waits tooooo long to sign tho

It might be pretty enough for a developer but it's not really pretty a normal user though

whilefoo · 2025-01-08T22:06:38Z

static/main.ts

@@ -26,22 +21,32 @@ const metadata = {
  url: "https://onboard.ubq.fi",
  icons: ["https://avatars.githubusercontent.com/u/76412717"],
 };
+export const providersUrl: { [key: string]: string } = {


can you add anvil network to providers and permit2 addresses otherwise it doesn't work when testing

I guess you dont need to actually sign the transaction to see if it works, if the transaction to approve x amount pops up in ur wallet u know it works

but btw I just checked and I've included anvil already, u can pick from te drop down

yes I can select the network but it doesn't work because it's not in providersUrl. I wanted to try to see the success message and I can't get there

whilefoo · 2025-01-08T22:13:59Z

static/index.html

          <div class="current-allowance">
-            <span>current allowance:</span>
+            <span>Current allowance:</span>
            <span class="current-allowance-amount">-</span>
          </div>


If it's not too much work can you also display balance, I think it's beneficial for the user to know.

I thought about it too, but allowance is not tied to balance, so I figured its not necessary, lmk what you think

allowance is not tied to balance

Normally, I've seen that the default requested allowance would be the user's balance amount.

yeah but that's usually in a flow like swapping.

user MUST allow 100 UUSD to swap 100 UUSD into 100 DAI.

it's not a problem if he allows 119238129319203, its actually common for max allowances to happen (which is not good, opsec wise)

in our case having a balance is not mandatory, I can allow 10k UUSD even if I dont have that quantity in balance. but I can add if you guys want it

whilefoo · 2025-01-11T10:38:36Z

static/handle-approval.ts

+  approveButton.disabled = true;
+  revokeButton.disabled = true;

  if (isAddressValid && isConnected) {
-    void getCurrentAllowance();
+    const isSuccess = await getCurrentAllowance();
+    if (isSuccess) {
+      approveButton.disabled = !isAmountValid;
+      revokeButton.disabled = false;
+      addressInput.style.border = green;
+    } else {
+      addressInput.style.border = red;
+    }


now every time I click out of the amount input, the buttons get disabled until allowance is fetched and it's a weird UX

but thats what you meant by checking if its an erc20 token, should I add a spinner to indicate loading perhaps?

I thought you will do the check when approve button is clicked and then it would show the error modal.

zugdev added 8 commits November 20, 2024 20:29

feat: rollback to template

bc37549

chore: install dependencies

6719d29

feat: base UI

dc3aaaa

feat: add network button

68e1715

feat: add chains

a220ca3

chore: format

f6a4e17

feat: basic styiling and form

4571b5e

feat: add current allowance

287505d

zugdev requested a review from rndquu as a code owner November 21, 2024 03:26

zugdev requested a review from 0x4007 November 21, 2024 03:26

rndquu requested review from rndquu and removed request for rndquu November 21, 2024 08:25

rndquu marked this pull request as draft November 21, 2024 08:43

ubiquity-os bot closed this Nov 24, 2024

zugdev reopened this Nov 24, 2024

zugdev added 8 commits November 26, 2024 13:21

feat: add neon border

a3caa79

feat: add token-selector and change expected allowance

9634f81

feat: fix token selector

edd0772

feat: update dropdown tokens based on network

3befb07

feat: add erc20 abi

03b9dcf

feat: rollback to current allowance

6fd952e

feat: add permit2 address table

9d1ffb8

feat: add web3 integration

19f3bbf

zugdev marked this pull request as ready for review November 26, 2024 21:10

rndquu requested review from rndquu and removed request for rndquu December 26, 2024 06:42

rndquu reviewed Dec 26, 2024

View reviewed changes

.github/workflows/build.yml Outdated Show resolved Hide resolved

rndquu marked this pull request as draft December 26, 2024 07:09

zugdev added 6 commits December 26, 2024 04:31

chore: fix jest

228f7d1

feat: add explorers map

834b8dd

feat: render success in revoke

1bd7ca8

feat: add tx linkback in success

8105aab

feat: remove alchemy from deploy

9299ea3

chore: fix knip

23f3344

zugdev marked this pull request as ready for review December 26, 2024 07:45

rndquu self-requested a review December 26, 2024 13:10

rndquu approved these changes Dec 26, 2024

View reviewed changes

EresDev requested changes Dec 26, 2024

View reviewed changes

static/handle-approval.ts Outdated Show resolved Hide resolved

static/index.html Show resolved Hide resolved

zugdev and others added 3 commits December 26, 2024 18:05

chore: typo

f04f3d1

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

chore: missing div

656e862

Merge branch 'development' of github.com:zugdev/onboard.ubq.fi into d…

58edb53

…evelopment

EresDev approved these changes Dec 26, 2024

View reviewed changes

ubiquity-os bot marked this pull request as draft December 29, 2024 21:18

rndquu marked this pull request as ready for review December 31, 2024 10:35

whilefoo requested changes Jan 8, 2025

View reviewed changes

zugdev added 4 commits January 9, 2025 00:26

feat: const

c906697

chore: delete outdated

78fb771

feat: feedback on erc20 fail

b525724

chore: cspell

326dbc2

whilefoo requested changes Jan 11, 2025

View reviewed changes

		@@ -1,6 +1,8 @@
		import { appState, explorersUrl } from "./main";

		export function renderErrorInModal(error: Error) {

feat: add an approval/funding UI #30

Are you sure you want to change the base?

feat: add an approval/funding UI #30

Conversation

zugdev commented Nov 21, 2024

github-actions bot commented Nov 21, 2024

Unused dependencies (4)

Unused devDependencies (2)

ubiquity-os-deployer bot commented Nov 21, 2024 • edited Loading

rndquu commented Nov 21, 2024

ubiquity-os bot commented Nov 22, 2024

0x4007 commented Nov 24, 2024

zugdev commented Nov 26, 2024

0x4007 commented Dec 25, 2024

rndquu left a comment

Choose a reason for hiding this comment

zugdev commented Dec 26, 2024

rndquu left a comment

Choose a reason for hiding this comment

EresDev left a comment

Choose a reason for hiding this comment

zugdev commented Dec 26, 2024

ubiquity-os bot commented Dec 29, 2024

whilefoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whilefoo Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ubiquity-os-deployer bot commented Nov 21, 2024 •

edited

Loading

whilefoo Jan 9, 2025 •

edited

Loading