Code Monkey home page Code Monkey logo

aptos-wallet-adapter's Introduction

NOTE: Use the Wallet Adapter v2.0.0 and up with the new Aptos TypeScript SDK @aptos-labs/ts-sdk

Aptos Wallet Adapter

A monorepo modular wallet adapter developed and maintained by Aptos for wallet and dapp builders that includes:

Getting Started

Supported wallet packages

Note: These are in alphabetical order, any new wallets must be in alphabetical order

AIP-62 standard compatible

Legacy standard compatible

Develop Locally

You would need [email protected] in order to bootstrap and test a local copy of this repo.

  1. Clone the repo with git clone https://github.com/aptos-labs/aptos-wallet-adapter.git
  2. On the root folder, run pnpm install and pnpm turbo run build
  3. On the root folder, run pnpm turbo run dev - that would spin up a local server (localhost:3000) with the nextjs demoapp

Looking how you can contribute? Take a look at our contribution guide

Terms of Use and Privacy Policy

By accessing or using the wallet adapter, you agree to be bound to the Aptos Labs Terms of Use and Privacy Policy.

aptos-wallet-adapter's People

Contributors

0xmaayan avatar alexzander-stone avatar blakezimmerman avatar briungri avatar chendatony31 avatar dependabot[bot] avatar geekflyer avatar github-actions[bot] avatar gregnazario avatar hardsetting avatar heliuchuan avatar jillxuu avatar jmintuitive avatar kaw2k avatar kent-white avatar lcs86-dev avatar martianabhishek avatar mizu-ice avatar nikli2009 avatar norbertbodziony avatar okxwallet avatar pierreneter avatar rowanfuture avatar rsrbk avatar sanyu1225 avatar scottphc avatar vanishcode avatar xbtmatt avatar xorgal avatar yoon-suji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

aptos-wallet-adapter's Issues

[Commit Issue] I don't have permission to push commit on new branch

Hello. I am developer working on FaceWallet team from Haechi Labs.
I've made some changes to the README and the example app, and tried to push the commit(on branch named facewallet) to this repository.
However, I was denied permission, as shown in the error below:

ERROR: Permission to aptos-labs/aptos-wallet-adapter.git denied to raspLarry.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

How can I obtain permission to create a pull request?

`connect` does not throw when connection fails due to no wallets "installed"

So we previously spoke elsewhere and determined that connect just returns rather than throws when no wallet is installed: https://github.com/aptos-labs/aptos-wallet-adapter/blob/main/packages/wallet-adapter-core/src/WalletCore.ts#L175. As it is now, there is no easy way to catch this particular connection failure.

Relevant code to demonstrate this issue:

const handleConnectWallet = () => {
  let wallet = wallets.find((w) => w.name === "Petra");
  if (!wallet) {
    console.log("No Petra wallet found");
    toast({
      title: "Couldn't find Petra!",
      description: "Only Petra is supported right now.",
      status: "error",
      duration: 5000,
      isClosable: true,
    });
    return;
  }
  console.log(`Connecting to ${wallet.name}...`);
  // TODO: This doesn't actually throw an exception if connect fails, figure out
  // how to handle the error properly.
  try {
    connect(wallet.name);
  } catch (e) {
    toast({
      title: "Failed to connect wallet",
      description: `${e}`,
      status: "error",
      duration: 5000,
      isClosable: true,
    });
  }
};

Update README.md for Installation Tips

@0xmaayan could we add some Getting Started steps in the README.md for beginners who want to integrate with Aptos for their dApp? Maybe something like

npm install @aptos-core/wallet-adapater-react

OKX wallet adapter failed to estimate gas

image

okx wallet failed to estimate gas. Below is the example code:

let transaction: InputTransactionData = {
            data: {
                function: "0x1::code::publish_package_txn",
                typeArguments: [],
                functionArguments: [hexToByteArray(metadataBytes), [hexToByteArray(byteCode)]],
            },
            options: {
                gasUnitPrice: processedGasUnitPrice
            }
        };
        
  const pendingTransaction = await signAndSubmitTransaction(transaction);

it that possible that okxwallet cant estimate gas for typeArguments is empty array? for other transaction like transfer is fine.

Error when sign and submit transaction with type module_bundle_payload

Hi there,

I met a problem when trying to submit a transaction which is creating a coin on Aptos devnet.

There is the code:
const transaction: Types.TransactionPayload_ModuleBundlePayload = { type: "module_bundle_payload", modules: [ { bytecode: "0xa11ceb0b0500000009010006020604030a1b042504052924074d52089f01400adf01050ce40123000001010102000300000004000100000502010001040401010002070506000105070101000203040305060c0a020a0202030002060c0301080005060c0a020a02020101060c010503060c05030b637573746f6d5f636f696e0c6d616e616765645f636f696e067369676e65720a437573746f6d436f696e0a696e697469616c697a65046d696e740b64756d6d795f6669656c640a616464726573735f6f66d15fa3f056a9c8f16561a7e7b0d4d3baf878631d21f513846acf31138e2f4465000000000000000000000000000000000000000000000000000000000000000100020106010001040001070b000b010b020b03083800020101040001060a000b0011030b0138010200", abi: { address: account?.address || "", name: "public", friends: [], exposed_functions: [], structs: [], } }, ], };
const response = await signAndSubmitTransaction(transaction);

The error message: Uncaught (in promise) Cannot read properties of undefined (reading 'map')

For more information:
Node 16.15.0
"@aptos-labs/wallet-adapter-react": "^0.2.4"
"@martianwallet/aptos-wallet-adapter": "^0.0.3"
"petra-plugin-wallet-adapter": "^0.1.3"

image

image

Thanks for reading

how to use fullnode config

When using the Aptos Wallet Adapter to connect to another chain, there is a bug. When calling WalletCore.submitTransaction, the new AptosConfig only includes the network parameter without the fullnode parameter. As a result, aptos.transaction.submit.multiAgent uses the Aptos RPC node instead of the RPC node I have configured.

photo_2024-07-26_14-39-54

Wrapping Aptos-Wallet-Providers for improving scalability

Hi, I have a suggestion about the aptos-wallet-adapter.

For now, an AdapterPlugin must be injected directly under the window as the same name as wallet to detect the wallet. This way is especially uncomfortable for multi-chain wallets because they have to implement Aptos-only provider with the same name as wallet. (For example, in the case of a WELLDONE Wallet, we try to inject window.welldone_aptos provider to prevent conflicts with other chain's provider in the future. But to do so, we must be named WELLDONE_APTOS)

For the above reason, I'd like to suggest below:

  • Assign a property, such as window.aptosWallet or window.aptosProvider, to wrap Aptos Provider objects.
  • Inject Aptos Provider objects under that property. e.g. window.aptosWallet.welldone (I think it might also be in array form.)

In this way, the provider of the wallet is injected under the aptosWallet, so I think it will be convenient to support the aptos-wallet-adapter for multi-chain wallet builder.

In this way, I believe the aptos-wallet-adapter will be more scalable and able to support a wider range of wallets.

Bug: maxGasAmount not work correctly

The function signAndSubmitTransaction from useWallet declaration is:

signAndSubmitTransaction(transaction: InputTransactionData, options?: InputGenerateTransactionOptions): Promise<any>;

Currently, it has two ways to input the maxGasAmount. Both of them could pass the type check but couldn't work correctly.

The first way is putting in transaction.options. It could pass the type check, but actually the value won't be used anywhere in the implementation. I believe we can change the first argument type of signAndSubmitTransaction from InputTransactionData to InputGenerateTransactionData to fix.

const response = await signAndSubmitTransaction({
  data: {
    function: "0x1::coin::transfer",
    typeArguments: [APTOS_COIN],
    functionArguments: [account.address, 1]
  },
  options: {
    maxGasAmount: 1000000, // here
  }
});

The other way to pass in maxGasAmount to signAndSubmitTransaction is putting in the second parameter options. It works when use Petra, but failed when using the maxGasAmount and using wallet Martian. It could be reproduced in the next.js example app in this repo.

const response = await signAndSubmitTransaction({
  data: {
    function: "0x1::coin::transfer",
    typeArguments: [APTOS_COIN],
    functionArguments: [account.address, 1], // 1 is in Octas
  },
},
{
  maxGasAmount: 1000000, // here
});

The error message:

 Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function callback): Could not serialize message.

[Bug] not bcs serialized transaction, but been treated as bcs serialized

There is a code at: https://github.com/aptos-labs/aptos-wallet-adapter/blob/137eba26e94b3243330b7992a385b812786ec1a4/packages/wallet-adapter-core/src/WalletCore.ts#L315C5-L315C5

Which is:

// if first function arguments is an object (i.e a bcs serialized argument)
// we assume the transaction should be a bcs serialized transaction
if (typeof payloadData.functionArguments[0] === "object") {
 ...
}

when the first argument type of the Move function is vector<64>, user will pass in a JavaScript Array. The condition typeof payloadData.functionArguments[0] === "object" would be true, but actually it's not a bcs serialized transaction.

Return chainId as a number

Currently it is returned as a string, but this is not necessary since chainId is only a u8 under the hood.

How to publish a package on aptos chain using martian wallet

Hello, I am connecting the martian wallet to the website. I wonder if there is a way to publish a module on the aptos chain. I tried this,

	 const metadataHexNew = new HexString(
        metadataHex
      ).toUint8Array();
      const codeSerializer = new BCS.Serializer();
      BCS.serializeVector(
        [new TxnBuilderTypes.Module(new HexString(moduleHex).toUint8Array())],
        codeSerializer
      );
      const payload = new TxnBuilderTypes.TransactionPayloadEntryFunction(
        TxnBuilderTypes.EntryFunction.natural(
          "0x1::code",
          "publish_package_txn",
          [],
          [
            BCS.bcsSerializeBytes(
              metadataHexNew
            ),
            codeSerializer.getBytes(),
          ]
        )
      );

      const pendingTransaction = await (window as any).martian.signAndSubmitTransaction(
        payload
      );

but it failed.

[apps/nextjs-example]: TypeError: Cannot read properties of null (reading 'useState')

description

Run nextjs demo in local and got 3 errors in browser:

// error 1
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'useState')

// error 2
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'useState')

// error 3
Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

reproduce

browser: Chrome
pnpm version: 7.14.2
cmd:

pnpm install
pnpm turbo run build 
pnpm turbo run dev

Unable to submit a Multiagent transaction in the demo next.js app

[Feature Request] Add ANS support

๐Ÿš€ Feature Request

We want to add ANS support in the wallet adapter. It means that when account is connected to the dapp, the adapter will fetch its ANS name and add it to the account object so the dapp can display it.

Motivation

In the current version of the adapter, the AccountInfo type has account address and publickKey as mandatory properties.

type AccountInfo = {
  address: string;
  publicKey: string | string[];
  minKeysRequired?: number
};

This lets dapps the option to display the account address on the app.
We also want to have the option to display the account ANS name.

Pitch

To implement this feature we need Wallet to export the current connected chainId (so the adapter can read it and query the current ANS endpoint i.e mainnet/testnet) as part of the network() function response.

chainId is part of the Wallet Standard and currently is an optional prop in the NetworkInfo type

We want to change it to be a mandatory prop - that would be a breaking change.

Then, we would add an optional ans_name to the AccountInfo type.

type AccountInfo = {
  address: string;
  publicKey: string | string[];
  minKeysRequired?: number;
  ansName?: string;
};

Additional context

This is the list of wallets that currently NOT returning the chainId as part of the network() function response
Petra
Martian
TrustWallet
Spika
Fewcha
Blocto
mSafe

Next.js 13 App Router Issue

Hello,
I am working on a project with Next.js 13 and it seems that there is this error when I am using useWallet in any file of the app dir.

error - node_modules/@aptos-labs/wallet-adapter-react/dist/index.js (37:2) @ DEFAULT_COUNTEXT
error - TypeError: (0 , import_react.createContext) is not a function
    at eval (webpack-internal:///(sc_server)/./node_modules/@aptos-labs/wallet-adapter-react/dist/index.js:39:52)
    at Object.(sc_server)/./node_modules/@aptos-labs/wallet-adapter-react/dist/index.js (/home/homefolder/dev/project/web_app/frontend/.next/server/app/home/page.js:579:1)
    at __webpack_require__ (/home/homefolder/dev/project/web_app/frontend/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./src/app/components/AppContext.tsx:30:91)
    at Module.(sc_server)/./src/app/components/AppContext.tsx (/home/homefolder/dev/project/web_app/frontend/.next/server/app/home/page.js:1820:1)
    at __webpack_require__ (/home/homefolder/dev/project/web_app/frontend/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./src/app/layout.tsx:12:80)
    at Module.(sc_server)/./src/app/layout.tsx (/home/homefolder/dev/project/web_app/frontend/.next/server/app/home/page.js:1923:1)
    at Function.__webpack_require__ (/home/homefolder/dev/project/web_app/frontend/.next/server/webpack-runtime.js:33:43)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  type: 'TypeError',
  page: '/home'
}

Implementing the old way with pages and _app.tsx has no problems.

error: The requested module 'tweetnacl' is a CommonJS module

Hi Aptos team,

Error

I'm a fronend developer trying to build an Aptos dapp with Next.js.
I've installed your package and just inserted your provider in my app, and I got this error from Nextjs dev server console.

error - file:///rootDirectory/node_modules/@aptos-labs/wallet-adapter-core/dist/index.mjs:4
import { sign } from "tweetnacl";
         ^^^^
SyntaxError: Named export 'sign' not found. The requested module 'tweetnacl' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tweetnacl';
const { sign } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15) {
  page: '/'
}

It seems lines mentions above are from your code:

import { sign } from "tweetnacl";
import { Buffer } from "buffer";

How to Reproduce

It seems the same error happens when I try to build your example app, without local package.
This is the step I tried:

  1. clone aptos-wallet-adapter repo
  2. remove package.json, pnpm-lock.yaml and pnpm-workspace.yaml in root directory
  3. move to apps/nextjs-example directory
  4. install packages (I tried yarn, but pnpm install should also work)
  5. as there's no workspace in example directory's view, yarn asks which version to install
  6. I chose [email protected] and [email protected]
  7. run dev server (yarn dev)
  8. tada - got the same error

My code

This is how my _app.tsx looks like:
(in case you might need what packages I'm using, I included all import sentences as well.)

import { StyleProvider } from '@ant-design/cssinjs';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { AppProps } from 'next/app';
import type { NextPage } from 'next/types';
import { ReactElement, ReactNode } from 'react';
import { RecoilRoot } from 'recoil';
import { AptosWalletAdapterProvider } from '@aptos-labs/wallet-adapter-react';
import { PetraWallet } from 'petra-plugin-wallet-adapter';

const queryClient = new QueryClient();

const wallets = [new PetraWallet()];

export default function App() {
  return (
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <AptosWalletAdapterProvider plugins={wallets} autoConnect={true}>
          <StyleProvider hashPriority="high">
            <Component {...pageProps} />
          </StyleProvider>
        </AptosWalletAdapterProvider>
      </QueryClientProvider>
    </RecoilRoot>
  );
}

Conclusion

Would you let me know if I'm doing something wrong?
My guess is the packages you're importing, such as tweetnacl, has something to do with this error.
I'll dig up more as well and let you know if I get something.

setNetwork function similar to connect

We have our own custom wallet connector modal using the adapter. We have an issue on our public testnet where when a user has their wallet set to mainnet, we have no way of helping them switch their wallet to testnet. The user must manually set their wallet to testnet, then try to connect to our dapp again.

It would be great if we could show users a prompt with a button to swap networks. This would also be useful for projects to do the opposite (ie a wallet is set to testnet but the user is trying to access the mainnet page).

There is a helper network() that shows the network. I think it would be helpful if there was a function like setNetwork(chainId || NetworkName).

How to verify Aptos Connect wallet off-chain

Currently with private key created wallets, you can use the following mechanism to verify wallet ownership off-chain:

  1. signMessage
  2. Send signature, wallet address, and public key to to off-chain server.
  3. Public key can be used to:
    1. Verify the signature
    2. Derive the wallet address or the auth key and verify on-chain

How would you accomplish something like this with a Aptos Connect account?

Cannot generate a signed transaction error.

Screenshot 2024-05-30 at 14 30 28 Screenshot 2024-05-30 at 14 33 04

I got this error when calling signAndSubmitTransaction. after checking, I found the fetchAptosWallets func on aptos-adapter-react override signAndSubmitTransaction to undefined. The code ends up with the error from aptos.transaction.submit.simple(transaction).

please help me to resolve this issue. I trying to submit transaction on petra wallet.

[Feature Request] Using the RPC URL of the wallet in the `AptosClient`

๐Ÿš€ Feature Request

There are some extension wallets that have their own RPC provider. So I'd like to suggest that using wallet's RPC URL in the AptosClient so that dapp developer don't need to set up a separate RPC in the SDK to use the wallet's resources.

Motivation

We are working on adding a WELLDONE Wallet to the aptos-wallet-adapter. When implementing the signAndSubmitTransaction method, I have to use AptosClient.generateTransaction() method to convert the payload received by arguments into a transaction form. However, in order to create the AptosClient, I have to put nodeUrl.
Despite having an RPC provider in the wallet, it felt unncessary to use redundant RPC URL. Therefore, I think changing the SDK methods to utilize the wallet's RPC provider would be much more practical for developers.

Pitch

Iโ€™d like to first add the request method to PluginProvider in wallet-adapter-core, an interface that communicates with the wallet. This method allows communication with the Aptos node using the RPC url in the wallet.

// <https://github.com/aptos-labs/aptos-core/blob/2a1dd9ec05cd4eb4b32d5ff505d21fee8e44a5ea/ecosystem/typescript/sdk/src/generated/core/BaseHttpRequest.ts>
/*
export abstract {
    constructor(public readonly config: OpenAPIConfig) {}
    public abstract request<T>(options: ApiRequestOptions): CancelablePromise<T>;
}
*/

export interface PluginProvider extends BaseHttpRequest {
  connect: () => Promise<AccountInfo>;
  account: () => Promise<AccountInfo>;
  disconnect: () => Promise<void>;
  signAndSubmitTransaction: (
    transaction: any,
    options?: any
  ) => Promise<{ hash: Types.HexEncodedBytes } | AptosWalletErrorResult>;
  signMessage: (message: SignMessagePayload) => Promise<SignMessageResponse>;
  network: () => Promise<NetworkName>;
  onAccountChange: (
    listener: (newAddress: AccountInfo) => Promise<void>
  ) => Promise<void>;
  onNetworkChange: (
    listener: (network: { networkName: NetworkInfo }) => Promise<void>
  ) => Promise<void>;
	//
  request<T>(options: ApiRequestOptions) => CancelablePromise<T>;
}

Then, I'd like to make it possible to use a PluginProvider by adding a constructor option to AptosGeneratedClient. It is anticipated that the wallet's usability would rise. (You don't need to set up a separate RPC in the SDK to use the wallet's resources.)

  • aptos_client.ts
// <https://github.com/aptos-labs/aptos-core/blob/2a1dd9ec05cd4eb4b32d5ff505d21fee8e44a5ea/ecosystem/typescript/sdk/src/aptos_client.ts#L88>

constructor(nodeUrl: string | PluginProvider, config?: Partial<Gen.OpenAPIConfig>, doNotFixNodeUrl: boolean = false) {

    //...........

    if(typeof nodeUrl === 'string') {
      this.client = new Gen.AptosGeneratedClient(new HttpRequest({
        BASE: config?.BASE ?? '/v1',
        VERSION: config?.VERSION ?? '1.2.0',
        WITH_CREDENTIALS: config?.WITH_CREDENTIALS ?? false,
        CREDENTIALS: config?.CREDENTIALS ?? 'include',
        TOKEN: config?.TOKEN,
        USERNAME: config?.USERNAME,
        PASSWORD: config?.PASSWORD,
        HEADERS: config?.HEADERS,
        ENCODE_PATH: config?.ENCODE_PATH,
      }));
    } else {
      this.client = new Gen.AptosGeneratedClient(nodeUrl);
    }
  }
  • AptosGeneratedClient
// <https://github.com/aptos-labs/aptos-core/blob/2a1dd9ec05cd4eb4b32d5ff505d21fee8e44a5ea/ecosystem/typescript/sdk/src/generated/AptosGeneratedClient.ts>

export class AptosGeneratedClient {

    public readonly accounts: AccountsService;
    public readonly blocks: BlocksService;
    public readonly events: EventsService;
    public readonly general: GeneralService;
    public readonly tables: TablesService;
    public readonly transactions: TransactionsService;
    public readonly view: ViewService;

    public readonly request: BaseHttpRequest;

    constructor(Request: BaseHttpRequest | PluginProvider) {
        this.request = Request;
        this.accounts = new AccountsService(this.request);
        this.blocks = new BlocksService(this.request);
        this.events = new EventsService(this.request);
        this.general = new GeneralService(this.request);
        this.tables = new TablesService(this.request);
        this.transactions = new TransactionsService(this.request);
        this.view = new ViewService(this.request);
    }
}

I opened the same issue on aptos-core.

`@aptos-labs/wallet-adapter-core` should expose account() method

Hey Aptos team. I was using @aptos-labs/[email protected] and there's no way how can I understand whether user authorized within the wallet or not. It's needed to restore the connection after page reload.

Basically my strategy is:

  • IF account() returns authorized account
    • CALL .connect()
  • ELSE
    • Don't do anything and not bother the user with wallet UI requests

account() taken from docs: https://aptos.dev/standards/wallets#get-account

I was trying to extend your WalletCore class but all needed fields are private so I can't make it externally

Wallet adapter fails to use fullnode url at `submitTransaction`

Description

Code

During submitTransaction, a new AptosConfig is created, but the new config does not include the optional fullnode field in the config data structure, which will lead to fullnode config does not take effect when submitting transaction.

  async submitTransaction(
    transaction: InputSubmitTransactionData
  ): Promise<PendingTransactionResponse> {
    ...
      const aptosConfig = new AptosConfig({
        network: convertNetwork(this.network),
      });
      ...

Proposed solution

Add optional fullnode url and other optional settings from AptosConfig when creating the new AptosConfig at submitTransaction

Initial isLoading state error when auto connect is disabled

The isLoading state should represent whether there's an action ongoing, but when autoConnect is set to false, the initial isLoading state seems to always be true.

// a local state to track whether wallet connect request is loading
// https://github.com/aptos-labs/aptos-wallet-adapter/issues/94
const [isLoading, setIsLoading] = useState<boolean>(true);

useEffect(() => {
if (autoConnect) {
if (localStorage.getItem("AptosWalletName") && !connected) {
connect(localStorage.getItem("AptosWalletName") as WalletName);
} else {
// if we dont use autoconnect set the connect is loading to false
setIsLoading(false);
}
}
}, wallets);

return (
<WalletContext.Provider
value={{
connect,
account,
network,
connected,
disconnect,
wallet,
wallets,
signAndSubmitTransaction,
signTransaction,
signMessage,
signMessageAndVerify,
isLoading,
submitTransaction,
}}
>
{children}
</WalletContext.Provider>
);

Wallet adapter refresh will lead to couple ms loading where wallet info's not loaded yet

When refreshing the page, wallet adapter will be refreshed as well and the wallet info takes milliseconds to get loaded. During that period, we see wallet button content change from wallet address to "Connect Wallet" as if wallets were not connected.

Would suggest to have a more graceful way to handle the wallet adapter reloading.

wallet adapter nextjs example:

Screen.Recording.2023-02-21.at.3.10.47.PM.mov

ANS:

Screen.Recording.2023-02-21.at.3.11.11.PM.mov

Explorer:

Screen.Recording.2023-02-21.at.3.11.21.PM.mov

Return a chain ID for local

The chain ID for local is always 4, barring some localnet genesis manipulation that I doubt anyone would bother with. So it could be hardcoded maybe.

React.js Deployment Issue: @aptos-labs/wallet-adapter-react Breaks After Deployment, Works Fine on Localhost

The @aptos-labs/wallet-adapter-react library fails to work in any React.js project during deployment, while it functions correctly on localhost.

Steps to Reproduce:

  1. Create a new React.js project.
  2. Install @aptos-labs/wallet-adapter-react version 2.1.4.
  3. Integrate the Wallet Adapter as per the documentation.
  4. Render the Wallet component.
  5. Run the application locally.
  6. Confirm proper functionality on localhost.
  7. Deploy the application.
  8. Observe issues in the console during deployment.

Expected Behavior:

Seamless integration of the wallet adapter into the React.js project on both localhost and deployment without errors.

Actual Behavior:

The app can't render the React.js component when the @aptos-labs/wallet-adapter-react is added during deployment. It works fine on localhost but breaks after deployment.

The console after deployment:
Uncaught TypeError: Cannot convert a BigInt value to a number at Math.pow (<anonymous>) at consts.ts:10:40 at index.tsx:14:11 at index.tsx:14:11

Environment:

  • OS: [Windows 11]

ModuleDependencyResolutionError: 'SimpleTransaction' not exported from '@aptos-labs/ts-sdk' after dependencies update(@aptos-labs/wallet-adapter-react)

Issue Description

After updating to the latest versions of the Aptos wallet adapter and its dependencies, our Next application fails to compile due to a ModuleDependencyError. The error indicates that SimpleTransaction, which is expected to be exported from @aptos-labs/ts-sdk, is not found.

Environment

Node.js version: v20.13.1
React version: ^18
Next.js version: 14.1.4
Wallet Adapter packages:
@aptos-labs/ts-sdk: ^1.9.1
@aptos-l,abs/wallet-adapter-core: ^3.3.0
@aptos-labs/wallet-adapter-react: ^3.0.3

Steps to Reproduce

Update the following dependencies to their specified versions:
@aptos-labs/ts-sdk: ^1.9.1
@aptos-labs/wallet-adapter-core: ^3.3.0
@aptos-labs/wallet-adapter-react: ^3.0.3

Run the application.

Observe the compilation error in the console.

Expected Behavior

The application should compile without errors.

Actual Behavior
The application fails to compile with the following error:
index.js:618 Uncaught ModuleDependencyError: export 'SimpleTransaction' (imported as 'SimpleTransaction') was not found in '@aptos-labs/ts-sdk' (possible exports: APTOS_BIP44_REGEX, APTOS_COIN, ...<omitted for brevity>)

image

Fix nextjs `.eslintrc.js` file

we keep having this warning on build time.

ESLint: Failed to load config "adapter" to extend from. Referenced from: /home/runner/work/aptos-wallet-adapter/aptos-wallet-adapter/apps/nextjs-example/.eslintrc.js

This is because we try to extend adapter on .eslintrc.js file. but we dont ave any adapter package.

Need to change it to extend from eslint-config-adapter folder

[Wallet Adapter] Add deep-link to mobile app support

Motivation

Different wallets support different platforms (desktop, mobile, etc). Our adapter currently supports only web extension wallets and in-app browser on mobile wallet.

If user interact with the adapter on a web app, the connect button would try to connect the wallet as a web extension wallet. If they try to connect on a web app on mobile - nothing happens.

We need to provide support to mobile wallets that when trying to connect them, the adapter would redirect the user to the mobile app browser or the App store. (same as opensea.io is doing)

Pitch

A wallet plugin would have an optional deep_link_property. If wallet support a mobile app, it can add a deep link value (for example, https://aptos.app/link).
when user goes to a dapp that uses the adapter, the adapter detects if it is a mobile or a desktop device.
if it is mobile, the connect button would use the deep_link_property (if wallet doesnt have deep_link_property mark as "desktop only")

The adapter will add a url query param to the deep link that would hold the current website the user in on.
For example - https://aptos.app/link?url=aptosnames.com

https://docs.google.com/spreadsheets/d/1MsFNvRNl1fMphrP-bW5MR-8Qd_OQphLOWQKz6K7A5io/edit#gid=0

SyntaxError: Named export 'EventEmitter' not found

@0xmaayan Following https://github.com/aptos-labs/aptos-wallet-adapter/tree/main/packages/wallet-adapter-react, I got:

Server Error
SyntaxError: Named export 'EventEmitter' not found. The requested module 'eventemitter3' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'eventemitter3';
const { EventEmitter } = pkg;

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/0xbe1/movetx/node_modules/@aptos-labs/wallet-adapter-core/dist/index.mjs (2)
ModuleJob._instantiate
node:internal/modules/esm/module_job (127:21)
async ModuleJob.run
node:internal/modules/esm/module_job (193:5)
async ESMLoader.import
node:internal/modules/esm/loader (337:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (437:15)

To reproduce, first, install the 2 packages:

"@aptos-labs/wallet-adapter-react": "^0.1.6",
"petra-plugin-wallet-adapter": "^0.1.2",

second, do this in _app.tsx of my nextjs app

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
import { PetraWallet } from "petra-plugin-wallet-adapter";
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <AptosWalletAdapterProvider
        plugins={[new PetraWallet()]}
        autoConnect={true}
      >
        <Component {...pageProps} />
      </AptosWalletAdapterProvider>
    </ChakraProvider>
  );
}

third, run yarn dev or yarn build

Any help?

signTransaction not supported for major wallets

Have been getting by with signAndSubmitTransaction, but wanted to separate these actions for more granular UX control and error messaging.

Upon switching to signTransaction, have been receiving the following error

Sign Transaction is not supported by <Petra> // <Pontem> - for each of these wallets.

Is signTransaction really not supported for these major wallets? Or is this possibly a non descriptive error message?

Any info would help, thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.