cardano-foundation/cardano-connect-with-wallet

This repository aims to provide useful hooks and React components as well as a framework-independent core library

cardano-connect-with-wallet's Issues

Add preview gif to README.md

As a new user I want to see an example of the components directly within the README.md

Get payment addresses from useCardano hook

There are some use cases where dapps require the payment addresses of a connected wallet. Therefore, it is suggested that a wrapper will be added to the useCardano hook for both window.cardano.[enabledWallet].getUsedAddresses() and window.cardano.[enabledWallet].getUnusedAddresses() so that they will available as { usedAddresses, unusedAddresses } = useCardano().

[FEATURE] Full CIP-30

Is your feature request related to a problem? Please describe.
I have been playing with the the CIP-30 on the react app and found your library just amazing in case of the react applications !
But seems that still some functionality from CIP-30 is missing, especially submitTx and signTx functions. Is it a plan to add them in the nearest future ? Seems to me it is a vital part for the dapp development.

[FEATURE] Add VESPR to list supported wallets

The wallet can be found under "window.cardano.vespr"

Add option to display account balance instead of stake address

I would like to suggest adding an option to the connect button component to display the account balance of a connected user instead of their stake address. Therefore a new property showAccountBalance will be introduced.

As a lot of dapps want to provide their customers a way to quickly check their account balance without having to navigate to another page or application, it would make sense to add this option to the component.

Gerowallet not working[BUG]

Describe :
Whenever i click on connect button it redirect me on install extension page of gero wallet.

This is the code im running .
<ConnectWalletButton
alwaysVisibleWallets={["gerowallet", "typhon", "flint", "nufi"]}
/>

Refactor this component in an abstract non-react lib and a react implementation

As many developers are using non-react frontend frameworks it makes sense to rewrite this component in an "abstract" non-react lib and a react component using this lib, as an example how an implementation for another framework should look like.

[FEATURE]

...

[BUG] CBOR decode error: non-string keys not supported

Describe the bug
After connection to the Yoroi wallet using connect I am getting the following error message.

Uncaught (in promise) Error: CBOR decode error: non-string keys not supported (got object)
    at decode.js:71:1
    at ie (decode.js:90:1)
    at decode.js:42:1
    at ie (decode.js:55:1)
    at se (decode.js:123:1)
    at index.ts:352:1
    at f (index.ts:2:1)
    at Generator.<anonymous> (index.ts:2:1)
    at Generator.next (index.ts:2:1)
    at ce (index.ts:2:1)

And complaints for this line const cborBalance = await api.getBalance(); inside this code block

if (typeof api.getBalance === 'function') {
                 const cborBalance = await api.getBalance();
                  const balance = decodeCbor(Buffer.from(cborBalance, 'hex'));
                  this.accountBalanceObserver.set(balance / 1000000);
}

This error appears after successful connection from some time.

Platform (please complete the following information):

• Desktop
• macOS
• chrome

[BUG] CBOR decode error

Describe the bug
Unhandled error when using useCardano hooks, this error happens if either Preprod or Preview is set in the wallet.

Uncaught (in promise) Error: CBOR decode error: non-string keys not supported (got object)
    at eval (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:103216)
    at ie (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:103556)
    at eval (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:102603)
    at ie (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:102827)
    at se (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:103927)
    at eval (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:116930)
    at f (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:105012)
    at Generator.eval (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:106368)
    at Generator.eval [as next] (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:105375)
    at ce (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:111022)
    at s (webpack-internal:///(:3000/app-client)/./node_modules/@cardano-foundation/cardano-connect-with-wallet-core/dist/index.js:2:111226)

To Reproduce
Steps to reproduce the behavior:

Follow Readme example and enable testnet for limitNetwork

const {
        isEnabled,
        isConnected,
        enabledWallet,
        stakeAddress,
        signMessage,
        connect,
        disconnect,
        usedAddresses
    } = useCardano({limitNetwork: NetworkType.TESTNET});

1. Go to 'Nami'
2. Click on 'Network' and Preprod
3. See error

Expected behavior
No erros

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):

• Desktop
• OS: [MacOS]
• Browser [brave]
• Version Version 1.52.130 Chromium: 114.0.5735.198]

Additional context
Add any other context about the problem here.

[Bug]: NuFi wallet does not reconnect after page reload

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

If you're connected with NuFi and reload the page, the NuFi wallet wants a manual reconnect.

Expected Behavior

Once connected the wallet should re-connect after a page reload within a few milliseconds.

Steps To Reproduce

1. Goto https://voting.summit.cardano.org/ and connect a wallet like nami
2. Reload the page and the wallet will be re-connecting automatically
3. Disconnect and connect to a NuFi wallet
4. Reload the page
5. The login dialog appears which should not happen

Environment

- OS: any
- Browser: Chrome, Brave, probably any other as well

Anything else?

main.67b5090d.js:2 WalletConnectError: There was an error while connecting to the wallet. Please ensure that you have created a wallet inside of your nufi app and that your network or account has a proper configuration. The error coming from this wallet is: undefined.

Maybe it has something todo with the multi account or cross chain support of NuFi which probably changed the way accounts are handled app internally.

[FEATURE] AdaHandle support

Is your feature request related to a problem? Please describe.

Many Cardano Connect with Wallet integrations upon connection let a user choose ada handle. Once ada handle is chosen, the wallet connector doesn't display a stake address but ada handle, e.g. $matiwinnetou

Describe the solution you'd like
Add additional property to the react component so it is possible to pick adahandle and once user picks adahandle it becomes sticky.

Describe alternatives you've considered
Basically one can extend cardano-connect-with-wallet, fork it and provide this functionality without being in the common component.

[BUG] Can not write unit test if i import this library. I use jest, testing-library and styled-components

[FEATURE]

Thanks so much for great component to connect Cardano, it works perfectly.
But to make tranactions , there is no way by using this component, so I hope your team add that features as well
now only wallet connect functions are perfect, but with only this function, it is really difficult to develop cardano web3 project.
Best regards

[Bug]: event name mismatch: "connecting" vs "isConnecting"

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

An event listener "connecting" can be added using addEventListener function. https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/index.ts#L64

The callback will never be triggered because only an event named "isConnecting" would enter the clause where you subscribe to the isConnectingObserver: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/index.ts#L83

Expected Behavior

I expect addEventListener("connecting", callback) to trigger the callback.

Steps To Reproduce

import { Wallet } from '@cardano-foundation/cardano-connect-with-wallet-core';

Wallet.addEventListener("connecting", () => {
  console.log("connecting")
});

await Wallet.connect("eternl", "mainnet");

Environment

No response

Anything else?

No response

[FEATURE] Vue Support

Is your feature request related to a problem? Please describe.
No. Perhaps diversity of backgrounds...

Describe the solution you'd like
Add package for Vue framework

Describe alternatives you've considered
Implement own library/components based on @cardano-foundation/cardano-connect-with-wallet-core and react implementation.

[BUG] cannot get stakeAddress

Describe the bug
whenever I reload the browser 3 to 4 times, I always receive stakeAddress = null. Does anyone face this issue?