When a wallet is connected via the connect-wallet package, we should look up if the wallet also has an associated ENS and display it in the connected wallet state instead of the truncated address.

Concerns and challenges

• This should only be the desired functionality when:
  • Either an Alchemy or Infura provider are present
  • Why?
    • Minimize the risk of rate limiting for developers and the storefronts which these components may be rendered on.
• How to handle cross chain support (could defer this until #3 is complete)

Upgrade to latest TailwindCSS to remove the need for including the @tailwindcss/line-clamp plugin since it is now included by default.

Relevant log message:

@shopify/tokengate:dev: [tsup] warn - As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.
@shopify/tokengate:dev: [tsup] warn - Remove it from the `plugins` array in your configuration to eliminate this warning.

The package.json for @shopify/gate-context-client is using invalid links which affect the links on npmjs.

Problem

There are edge cases where the lookup of the NFTs in the user's wallet can take longer than expected, particularly if the wallet contains thousands of results, or the blockchain provider is just generally slow.

In that case the current behavior is that the connect wallet button displays the connected address already, but the tokengate card still displays the required tokens instead of the unlocking tokens.

Suggestion

Introduce a loading state that will be replaced by the unlocked state once the unlocking tokens are available.

I'm trying out connect-wallet with vanilla setup and am receiving Uncaught TypeError: storage.getItem is not a function from redux-persist using create-react-app and polyfills for Buffer and process.

I'm using https://github.com/niksy/node-stdlib-browser for the polyfills.

Is this error related to a missing polyfill?

Do you have an example of connect-wallet in create-react-app?

Hey, I understand that Shopify is using the Ajax API to add the wallet address to the cart. However, I'm wondering what the purpose of this is. Shouldn't the wallet address be stored in the customer metafields instead? Additionally, I'm curious if the wallet address is available in Shopify webhooks such as orders/paid, checkout/created, and cart/created.

Description

This package relies on WalletConnect for mobile connections, Rainbow, Ledger (until ConnectKit is GA), and the default WalletConnect modal. WalletConnect v1 will be shut down officially on March 1, 2023.

This work captures what is required to begin supporting v2, however, we are currently waiting on a couple of other wallet providers to release full support for WalletConnect v2 before we release this as the primary version.

Unfortunately, this will be a breaking change as we will not be able to support v1 anymore when this rolls out.

We're investigating support for EVM-compatible chains outside of the Ethereum mainnet.

Description

After a connection event occurs, if the user disconnects and tries to connect again they are stuck on the "Connect with" screen where the content is empty.

Temporary workaround

This can be temporarily fixed by the user if they refresh their page.

Hi!

I don't know if I misunderstand smth. but it seems the components have version conflicts with their own dependencies:

.
├─┬ @shopify/connect-wallet 0.1.0
│ └─┬ siwe 1.1.6
│   └── ✕ unmet peer [email protected]: found 5.7.2
└─┬ @shopify/tokengate 0.1.0
  └─┬ @storybook/react 6.5.16
    └─┬ react-element-to-jsx-string 14.3.4
      ├── ✕ unmet peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1": found 18.2.0 in @shopify/tokengate
      └── ✕ unmet peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1": found 18.2.0 in @shopify/tokengate

I am not able to create a clean install of @shopify/connect-wallet or @shopify/tokengate in the merchant facing app. Entry point is the vanilla tokengating example app. I just bumped react to be compatible with @shopify/tokengate. I want to include them to build a gate preview as shown in the docs.

Thanks,
Hagen

From the tutorial

When I am setting up my <WagmiConfig> config:

Like:

const {chains, publicClient, webSocketPublicClient} = configureChains(
  [mainnet],
  [
    /**
     * We recommend using `alchemyProvider or `infuraProvider`
    * to reduce the risk of your application being rate limited.
    */
    // alchemyProvider({apiKey: 'INSERT API KEY HERE'}),
    publicProvider(),
  ],
);
const {connectors, wagmiConnectors} = buildConnectors({
  chains,
  projectId: 'YOUR_WALLET_CONNECT_PROJECT_ID',
});
const config = createConfig({
  autoConnect: true,
  connectors: wagmiConnectors,
  publicClient,
  webSocketPublicClient,
});

And then go to run my dev server I am getting:
TypeError: Object prototype may only be an Object or null: undefined

And the server won't start.

If I remove the buildConnectors call and pass <WagmiConfig> a basic config like from their docs:

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http(),
  }),
});

The app will run. Any idea what's going on?

Description

The Storybook demo / playground for the connect-wallet package is currently styled in a way that prevents the full modal from being displayed in smaller environments.

Example

Demo

Followed the instructions of the getting started, but couldn't get a nextJS app running (typescript)

I believe you should probably pin the versions of wagmi and ethers you're using, because they change a lot.

Error:

Error: Cannot find module '/Users/nicholascharriere/privy/shopify-connect/node_modules/ethers/lib/utils' imported from /Users/nicholascharriere/privy/shopify-connect/node_modules/@shopify/connect-wallet/dist/index.js
Did you mean to import ethers/lib/utils.js?

Description

During the process of resolving issues with use of the package in webpack based bundlers we made an upgrade to utilize v2 of RTK which also requires a bump to v5+ of Redux.

Both are in alpha and this issue is primarily to ensure that we continue to track the release of RTK v2 and Redux v5. The expected outcome of this PR would be that we continue to track and implement changes from the v2 and v5 releases to ensure that our package can be used in additional frameworks + bundler combinations.

Related

Redux PR: reduxjs/redux#4491
Redux Toolkit PR: reduxjs/redux-toolkit#3089
RTK + Redux Alpha upgrade PR: #37

Summary

Currently our list of wallets in the modal/bottom sheet supports listing MetaMask, Rainbow, Coinbase, Ledger and generic WalletConnect. We've received feedback requesting that other wallets be visibly represented in that list, even if under the hood it just uses generic WalletConnect.

While initially attempting to utilize @shopify/connect-wallet in a hydrogen storefront, I ran into the following error

Error: Some functionality, such as asynchronous I/O (fetch, Cache API, KV), timeouts (setTimeout, setInterval), and generating random values (crypto.getRandomValues, crypto.subtle.generateKey), can only be performed while handling a request.

This error was later tracked down to our usage of redux-persist in the @shopify/connect-wallet package. Because the persistReducer method is using setTimeout during rehydration, we receive this error from miniflare via Oxygen.

This will need to be fixed in a more clever way so that we can continue to rely on persistent data being present in our package. Persistence is important for this package to ensure that connection state is maintained across sessions (whether those are shopping sessions, browser sessions, or even page refreshes).

Right now we do not support customizing the list of wallets that show up in the connection modal.

There are many wallets available and currently no way to customize the wallets which are displayed. In an attempt to allow developers to add wallets they trust the most, or wallets in which they may have partnerships with, we should add additional wallet connector configuration options.

The current workaround for WalletConnect wallets is to utilize the WalletConnect button and find the desired wallet in the WalletConnect modal.

If the wallet is not a WalletConnect wallet there is additional work that would be required and we suggest that these connectors are added to the wagmi references repository instead as wagmi is who we have chosen as our source of truth for legitimate and trustworthy connectors.

Have been noticing that MM isn't available when I'm using the default connectors for the connect-wallet. Is this a known issue?