attempting to transfer token (native or erc20) in celo testnet alfajores and getting infinite spinner

[chusla]

Hello, I'm trying to do a simple call to transfer a token in celo testnet with torus wallet and getting the popup but then the wallet gets stuck at an infinite spinner. Inspecting the console doesn't tell much unfortunately.

Any help/ideas?

[shahbaz17]

Hey @chusla

Celo Alfajores is not available out of the box on https://app.tor.us. I hope you've added the Celo Alfajores Testnet as Custom and provided the inputs.

I have just added the Celo Alfajores, requested some funds from Tesnet faucet, and did the transfer from https://app.tor.us, which went through.

• Click on Add Custom Network

* Add the following details:

* Make a transfer. For me, it went through.

* Can be seen on Testnet Explorer.

[chusla]

@shahbaz17 thx for the response yes I've added the custom inputs. The issue is when I try to trigger the txn through JavaScript the popup gets stuck. I have successfully sent celo via the wallet directly.

[shahbaz17]

Can you share the code?

[shahbaz17]

Assuming you're using https://web3auth.io/docs/connect-blockchain/celo as reference

[chusla]

actually using this bubble plugin: https://forum.bubble.io/t/web3auth-plugin-by-novabloq/206354

[chusla]

This is the demo page where one can test connectivity and native/erc20 token transfer: https://web3plugins.bubbleapps.io/version-test/web3auth_web3metamask

other functions work perfectly, for some reason just send native and send erc20 token result in infinite loader. I will ask dev if they can share a code snippet. Is there a way to share with you via DM?

[shahbaz17]

Where you passing the chainId and Celo blockchain specific configs?

[shahbaz17]

After login in, I see this. It is configured with Polygon Testnet. Try changing the config to CELO from https://web3auth.io/docs/connect-blockchain/celo

[chusla]

Thanks for the continued help on this, I think it may configure first with a different testnet, I usually change the chain via the torus wallet settings and then can get it to alfajores. I will record a loom. https://www.loom.com/share/2841dc3720374cceac7c3bc9e1f12a4c you can see from this loom that it is able to switch to Celo properly after changing network settings. Am able to sign cryptographically and check balance. But send token stalls. 

[NovaBloq]

Hey, I'm the dev of the plugin discussed here.

After login in, I see this.

@shahbaz17
The demo page was set to connect to Polygon at the time you were testing. I've changed it back to Celo testnet.

Here are the parameters used to initiate the Web3Auth

Please note that every other blockchain works, also I have tested the exact same code to send a token but connecting to MetaMask directly, instead of web3auth, and it works.

[shahbaz17]

Thanks for sharing @NovaBloq

Yes, this helps. We would need to test the plugin with a Bubble project. Let me know how I can get access to this plugin for testing.

[chusla]

@shahbaz17 Hello, does the above code help? we also tried on celo mainnet and ran into the same issue. For some reason this seems to be isolated to the CELO chain in particular. Any ideas or any other info we can provide to help troubleshoot?

[shahbaz17]

Hey @chusla

I would need to test this on Bubble. Is there a way I can get this plugin for Bubble for testing?

[chusla]

@shahbaz17 perhaps @NovaBloq can help you with getting a deeper look but in meantime, this link gives you access to @NovaBloq's bubble demo page with the debugger options turned on. They are in a white bar in the bottom of the screen

https://web3plugins.bubbleapps.io/version-test/web3auth_web3metamask?debug_mode=true

and this page gives a view of the editor itself:

https://bubble.io/page?version=test&name=web3auth_web3metamask&id=web3plugins&tab=tabs-1

Thank you!!

[NovaBloq]

@shahbaz17 the Web3Auth plugin works together with other plugin that runs the web3js functions. If you want to see the code, it would take too much time to explain how things works here (in Bubble plugins)
But in short, we get the provider from web3auth and pass it to other plugin with web3js functions.
It works for every chain we tested except for Celo testnet and mainnet.

If you can't test it on your side, I will try to modify the web3auth plugin to test it directly without other plugins, to try to debug it.

[chusla]

hi @shahbaz17 does the above help with troubleshooting? @NovaBloq also added some additional color and options for testing. Thx!

[chusla]

Hi @shahbaz17 any luck with this? Thx!

[chusla]

@shahbaz17 to further isolate the issue, i've created a fork of the commonjs sample app and targeted celo testnet. (also fixed some bugs in your commonjs code) please see below:

Still seeing the infinite loader issue even if bubble.io removed completely from equation.

app is here:
https://graceful-tanuki-29ee9f.netlify.app/

my github fork is here:
https://github.com/chusla/w3a_react/blob/main/web-modal-sdk/evm/commonjs-evm-web3auth-example/web3RPC.js

[chusla]

bug on commonjs, i posted this to discord as well:

just a heads up @shahbaz | Web3Auth and web3auth team, i found two bugs in your sample commonjs code. may also be present elsewhere:

In send transaction in web3RPC:

const amount = web3.utils.toWei(1); // Convert 1 ether to wei

toWei only accepts strings so the 1 value needs to be in single quotes:

const amount = web3.utils.toWei('1'); // Convert 1 ether to wei

Secondly, in send transaction. it uses fromAddress which is not previously defined.

const address should instead be const fromAddress

  // Get user's Ethereum public address
  const address = (await web3.eth.getAccounts())[0];

  const destination = "0x7aFac68875d2841dc16F1730Fba43974060b907A";

  // Convert 1 ether to wei
  const amount = web3.utils.toWei(0.001);

  // Submit transaction to the blockchain and wait for it to be mined
  const receipt = await web3.eth.sendTransaction({
    from: fromAddress,

This:
const address = (await web3.eth.getAccounts())[0];
should be this:
const fromAddress = (await web3.eth.getAccounts())[0];

[chusla]

goerli launches immediately with same code (once chain changed to goerli via torus wallet/settings)

[chusla]

not sure what changed but this is now working!!

able to transact with this demo page: https://web3plugins.bubbleapps.io/version-test/web3auth_web3metamask

and this erc20 contract 0x874069fa1eb16d44d622f2e0ca25eea172369bc1

https://alfajores.celoscan.io/tx/0x0dbf5874ec8979037573333860d533452db4622d9511d64f7a75be0dc35d017e

marking done!