Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(tangle-dapp): Integrate bridge ERC-20 tokens into restaking #2783

Open
wants to merge 31 commits into
base: develop
Choose a base branch
from

Conversation

yurixander
Copy link
Member

@yurixander yurixander commented Jan 30, 2025

Summary of changes

Provide a detailed description of proposed changes.

  • βž• Tokens introduced via the bridge PR are now available to be used in restaking.
  • πŸ› Various bug fixes.

Proposed area of change

Put an x in the boxes that apply.

  • apps/tangle-dapp
  • apps/tangle-cloud
  • libs/tangle-shared-ui
  • libs/webb-ui-components

Associated issue(s)

Specify any issues that can be closed from these changes (e.g. Closes #233).

Screen Recording

If possible provide screenshots and/or a screen recording of proposed change.

@yurixander yurixander self-assigned this Jan 30, 2025
Copy link

netlify bot commented Jan 30, 2025

βœ… Deploy Preview for tangle-dapp ready!

Name Link
πŸ”¨ Latest commit ddf7161
πŸ” Latest deploy log https://app.netlify.com/sites/tangle-dapp/deploys/679c103c8797e70008ba5635
😎 Deploy Preview https://deploy-preview-2783--tangle-dapp.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 30, 2025

βœ… Deploy Preview for tangle-cloud ready!

Name Link
πŸ”¨ Latest commit ddf7161
πŸ” Latest deploy log https://app.netlify.com/sites/tangle-cloud/deploys/679c103cd83b4c0008066f25
😎 Deploy Preview https://deploy-preview-2783--tangle-cloud.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 30, 2025

βœ… Deploy Preview for tangle-dapp ready!

Name Link
πŸ”¨ Latest commit 2ab751a
πŸ” Latest deploy log https://app.netlify.com/sites/tangle-dapp/deploys/679e7895272c780008486693
😎 Deploy Preview https://deploy-preview-2783--tangle-dapp.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 30, 2025

βœ… Deploy Preview for tangle-cloud ready!

Name Link
πŸ”¨ Latest commit 2ab751a
πŸ” Latest deploy log https://app.netlify.com/sites/tangle-cloud/deploys/679e789540d8ad0008ba2646
😎 Deploy Preview https://deploy-preview-2783--tangle-cloud.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@yurixander
Copy link
Member Author

yurixander commented Jan 31, 2025

Progress:

  • Join Operators modal should automatically close when the transaction completes.
  • ERC-20 deposit balance should update after depositing.
  • Fix proper TVL column values.
  • Fix network change bugs, where when you load the page, it switches back to mainnet after a short delay.
  • List the bridge ERC-20 assets for use with restaking.

@yurixander yurixander marked this pull request as ready for review February 1, 2025 19:44
@devpavan04
Copy link
Member

devpavan04 commented Feb 1, 2025

@yurixander I was able to bridge WETH from Holesky and successfully deposit it πŸ‘πŸΌ

CleanShot 2025-02-01 at 12 25 06

CleanShot.2025-02-01.at.12.23.24.mp4

As we discussed, these issues need to be addressed:

  • The Switch chain button, on click should display EVM wallet options as well.
  • Unable to delegate using deposited WETH unlike CPT.

Otherwise, LGTM!

Copy link
Member

@AtelyPham AtelyPham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments.

@@ -45,7 +45,7 @@ export default function usePayouts(): UsePayoutsReturnType {
LocalStorageKey.PAYOUTS,
);

const { rpcEndpoint, network } = useNetworkStore();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we use the selector here?

const wsRpcEndpoint = useNetworkStore(store => store.network.wsRpcEndpoint);

}),
);
return Object.entries(delegatorInfo.deposits).map(([assetIdString]) => {
const availableForWithdrawal = calculateRestakeAvailableBalance(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The backend has a field called delegated_amount that indicates the total delegated amount, which can be used to calculate the available balance.

This issue has been addressed in PR #2788.

(delegation) => delegation.assetId === selectedAsset.id,
)?.amountBonded ?? ZERO_BIG_INT;

const availableBalance = amountBigInt - delegatedBigInt;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The backend has a field called delegated_amount that indicates the total delegated amount, which can be used to calculate the available balance.

This issue has been addressed in PR #2788.

(delegation) => delegation.assetId === assetId,
)?.amountBonded ?? ZERO_BIG_INT;

const balance = new BN((amount - delegatedAmount).toString());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The backend has a field called delegated_amount that indicates the total delegated amount, which can be used to calculate the available balance.

This issue has been addressed in PR #2788.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AtelyPham I tested with these calculations, and everything seems to be in order, including after you deposit, delegate, withdraw, etc. all the values updated accordingly. Just to make sure, that's the same case for when you used delegated_amount?

Copy link
Member Author

@yurixander yurixander Feb 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^ Also these tests were done with local dev on latest Tangle node changes, since testnet has different / incorrect values which seem to have been fixed on newer node updates.

return {};
}

const depositedAsset = Object.entries(delegatorInfo.deposits).find(
([assetId]) => assetId === selectedAssetId,
const availableBalance = calculateRestakeAvailableBalance(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The backend has a field called delegated_amount that indicates the total delegated amount, which can be used to calculate the available balance.

This issue has been addressed in PR #2788.

@drewstone
Copy link
Contributor

Conflicts here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Building πŸ—οΈ
4 participants