rainbow-me / rainbowkit Goto Github PK

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.2.1

wagmi Version

0.4.5

Current Behavior

When opening the webpage in the mobile chrome browser and wechat, the wallet pop-up window displays an adaptation error. The pop-up window should be at the bottom, and now it is centered, and the layout is abnormal.

Expected Behavior

This is a screenshot of the mobile terminal of the Safari browser, this UI display is normal.

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/rainbow-me/rainbowkit-examples/tree/main/with-next

Anything else?

No response

Description

The <AccountInfo /> is a component show connected wallet info and will have buttons for disconnecting or changing wallets.

Check if MetaMask has a way to get network information.

UI

Example

<AccountInfo
  address="..."
  wallet="..."
  provider={provider}
  explorer={true || ({ network, address }) => <>{/* ... */}</>} // either enable built-in explorer link or provide your own
  copyAddress={true || ({ address }) => <>{/* ... */}</>} // either use built-in copy address or provide your own
/>

RNBW-1499

Description

A view-only UI component to display Ethereum address and ENS properties like a profile pic. Shouldn't be tied to an address for use-cases like listing all the addresses inside of a badge

UI

Example

<EthAddress
  addr="0x..."
  profileIcon="https://.." // optional, if not set and `avatar` found in ENS it's set to that, otherwise can pass manually
  classNames={{
    profileIcon: '...',
    container: '...',
    address: '...'
  }}
/>

Blocked by #6

Description

The <TxHistory /> is a component that will use a useTxHistory hook + <Tx /> component to list current user's trasnaction history by searching logs.

ref: https://docs.ethers.io/v4/api-providers.html?highlight=gethistory#contract-state

UI

Example

How it could be used:

const Profile = () => (
  <div>
    <TxHistory classNames={{ container: '...' }} txComponent={Tx} />
  </div>
)

Allowing a user to pass a custom txComponent makes sense IMO bc someone might be not satisfied with the default one.

Implementation

How it could look like in the code:

import { Tx } from '@rainbowkit/badge'
import { useTxHistory } from '@rainbowkit/utils'

const TxHistory = ({ txComponent: Tx, ...props }) => {
  const { data: txes } = useTxHistory()

  return  <div>{(txes) => txes.map(tx => <Tx {...tx} />)}</div>
}

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.4

Current Behavior

When using rainbowkit with a TypeScript based React app built with ViteJS and standard configuration to setup wallet provider connections any of the non-MetaMask wallet providers fail to work and the console shows a ReferenceError: global is not defined error message.

This happens when running Vite JS dev server by running yarn dev.
On the production build of the Vite JS app (yarn build, yarn preview), there's no error messages displayed but the non-MetaMask wallets fail to work as expected and no QR code is displayed.

Expected Behavior

non-MetaMask wallet providers should function normally and QR code must be displayed.

Steps To Reproduce

1. Setup a standard Vite JS React app: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
2. Configure a standard wallet setup based on rainbowkit docs: https://www.rainbowkit.com/docs/installation
3. Try connecting to non-MetaMask wallets and observe Chrome console for errors.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/intelligent-surf-n8b7dy

Anything else?

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.1

wagmi Version

0.4.0

Current Behavior

Many sections across the docs recommend using the WagmiProvider within Rainbow Kit usage.
Currently, it behaves correctly, but it was just deprecated and suggested to use WagmiConfig instead.

This is the deprecation notice

Expected Behavior

The deprecation warning should not appear

Steps To Reproduce

Follow installation steps here, and you'll get the deprecation notice if you're using Typescript

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

wevm/wagmi@1928685#diff-1cee8646d2cfba37d6ce6a6e9a8d16f8caba0b99fc3a1ad0cb997ed8c7384d2eR4

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

When calling signMessage within the Chrome browser on an Android device, there is haptic feedback, but the wallet app (e.g. Rainbow, MetaMask) is not launched / brought to the foreground, requiring that the user manually open the wallet app to find the sign message prompt.

Expected Behavior

I would expect the connected wallet (e.g. Rainbow, MetaMask) to be launched / brought to the foreground, similar to the experience of connecting a wallet. See also #460.

Steps To Reproduce

1. In Chrome on an Android device, navigate to https://neon-griffin-f8c8b4.netlify.app/
2. Connect to Rainbow or MetaMask.
3. Press "Sign Message" and observe that while there is haptic feedback, the wallet app is not brought to the foreground.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/nickcherry/rainbowkit-test

Anything else?

No response

Hey frens!

Was trying to get RainbowKit to work with wagmi 0.3, and realised that #188 hasn't gotten to npm yet.

Would love to get that tagged so I can play around :D

Getting this error on main right now. Anything I need to do on my end?

 docs % pnpm run build

> docs@ build /Users/bret/rainbow/kit/packages/docs
> next build

info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
info  - Using external babel configuration from /Users/bret/rainbow/kit/packages/docs/.babelrc
info  - Creating an optimized production build  
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve '../.linaria-cache/components/modal.linaria.module.css' in '/Users/bret/rainbow/kit/packages/docs/components'


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/bret/rainbow/kit/node_modules/.pnpm/[email protected]_f31b35bdaa3b7c2fce82404f09d2dac4/node_modules/next/dist/build/index.js:397:19
    at async Span.traceAsyncFn (/Users/bret/rainbow/kit/node_modules/.pnpm/[email protected]_f31b35bdaa3b7c2fce82404f09d2dac4/node_modules/next/dist/telemetry/trace/trace.js:60:20)
    at async Object.build [as default] (/Users/bret/rainbow/kit/node_modules/.pnpm/[email protected]_f31b35bdaa3b7c2fce82404f09d2dac4/node_modules/next/dist/build/index.js:77:25)
 ELIFECYCLE  Command failed with exit code 1.

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.1

wagmi Version

0.2.5

Current Behavior

When changing networks then sometimes RainbowKit disconnects from the wallet. It's not completely deterministic but it happens frequently. Based on observation it seems to happen more when changing between layer 2 networks than mainnet.

It can happen both when changing the network directly in the wallet (e.g. MetaMask) or having the dApp prompt the change.

Expected Behavior

No disconnection, obviously. It's bad UX for the wallet to be disconnected after having it connected once.

Steps To Reproduce

1. Change networks back and forth between Arbitrum and Optimism.
2. ???
3. Disconnected from the wallet.

Can reproduce locally; can reproduce in the latest example from the GitHub repo; can even reproduce on the official homepage:
https://user-images.githubusercontent.com/10894666/170055832-766f9874-93ed-489b-842f-eedbaf884a57.mov

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

I also created a thread under GitHub discussions but didn't get any answers there: #402

At first I was a bit skeptical whether it's happening only on my computer (because Linux + Firefox) but then I got other people to easily reproduce it as well.

Otherwise liking RainbowKit 👍 but this is a major issue for a multi-network dApp.

Would be really cool to have the UI transition to a different loading state, and ask the user for a signature on the connect flow, instead of having to implement it manually.

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

I setup Rainbowkit following your installation guide and tried rendering the connect button. Nothing is showing up. All I see is a blank page.

Expected Behavior

I should be seeing the connect wallet button from rainbowkit. I should also be seeing that piece of text I have added above the connect button in App.tsx (codesandbox link below). I am guessing that the page is not being rendered at all / is crashing.

Steps To Reproduce

1. Go to https://codesandbox.io/s/rainbowkit-vite-demo-l81x9g
2. Wait for the dependencies to get installed
3. You will notice a blank white page in the preview tab

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/rainbowkit-vite-demo-l81x9g

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.3

Current Behavior

Would be great if you can add gnosis as a built in

Expected Behavior

Have gnosis built-in

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Not really sure where the appropriate fix is.

The domain being pased into getEns is 0x2000d583cfc8919912e5C1eBb4B5C2c346e7324A which should have an ens name bcomnes.eth.

It seems like a null is sneaking in here: https://github.com/talentlessguy/get-ens/blob/0bb7281bc2b77dfe3b55ccaad87882a48fe0e28f/src/index.ts#L91-L93 but I haven't been able to 100% confirm that.

https://github.com/talentlessguy/get-ens/blob/0bb7281bc2b77dfe3b55ccaad87882a48fe0e28f/src/namehash.ts#L7-L11

ATM <TxHistory /> only shows completed transactions

useTxHistory should also show pending txes, as well as TxHistory

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

^0.3.5

Current Behavior

ConnectButton is not showing my ENS name, only my wallet address.

Expected Behavior

Expected to see my .eth name

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Just seems like the ENS service doesn't seem to be working. When I use the following wagmi hooks and then log my ensName i get null...

const { data: account } = useAccount(); const { data: ensName } = useEnsName({ address: account?.address });

The feature was working initially, now when I start an entirely new app I get the same problem. Although I see the ENS feature working on the rainbow kit docs

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.3

Current Behavior

Expected Behavior

Steps To Reproduce

• Add tailwindcss to the project

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/great-moon-9l6swr

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

When I use the react example from the official repo, connecting to my wallet in a browser on a laptop works as expected but on iOS fails.

Clicking on the "connect" button will open the corresponding wallet app but will not prompt for a pairing request once the app is open. When testing with Metamask it just fails silently. When testing with Rainbow Wallet a text box pops up stating "Error initializing with WalletConnect."

Curiously, both of the next.js examples found in the official repo work as expected (on both laptop browser and mobile thick clients).

Expected Behavior

I expect the "connect" button to successfully open a wallet and initiate the pairing sequence on Android and iOS.

Steps To Reproduce

1. Clone the official examples repo at https://github.com/rainbow-me/rainbowkit-examples
2. Change directory to the with-create-react-app subdirectory
3. Install dependencies (npm install)
4. Run the server (npm start)
5. On a mobile phone, point your browser to the server spun up in the previous step
6. Click on the "connect" button
   7a. Choose Metamask and observe that the Metamask app is opened but no prompt to pair the wallet is received
   7b. Choose Rainbow Wallet and observe the error stating that there was a Wallet Connect misconfiguration

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.2

Current Behavior

I downloaded the .zip file from the create-react-app-based example, linked from the Readme's Try It Out section. (This -> https://codesandbox.io/s/dn3rho)

I then yarn install'ed and started the project, but hit the issue below. I have made no changes to the code that I downloaded from CodeSandbox.

Failed to compile.

./node_modules/react-query/lib/reactjs/useSyncExternalStore.mjs
Can't reexport the named export 'useSyncExternalStore' from non EcmaScript module (only default export is available)

Expected Behavior

The example project should run.

Steps To Reproduce

As described above.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Description

Subscribes to pending transactions on mount, unsubscribes on unmount.

Example

import { usePendingTx } from '@rainbowkit/hooks'

const App = () => {
  const txes = usePendingTx()

  return <>{txes.map(tx => <div>{JSON.stringify(tx)}</div>))</>
} 

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.3

Current Behavior

For some reason, changing the font on the theme causes a React Hydration issue. Below are a couple of images detailing the issue:

Code used to generate the issue:

const rainbowTheme = merge(
    lightTheme({
        borderRadius: 'none',
        accentColor: 'black',
    }),
    {
        colors: {
            modalBorder: 'black',
        },
        fonts: {
            body: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
        },
    } as Theme,
);

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.0.0

wagmi Version

0.0.3

Current Behavior

I'd like to provide a Rainbow connector to my users, but I am not using Rainbow Kit. I don't believe this library makes it possible for me to import just the wagmi connector.

Expected Behavior

I'd love to be able to do:

import { createClient } from 'wagmi';
import { RainbowWalletConnector } from '@rainbow/rainbowkit';

const client = createClient({
  connectors({ chainId }) {
    return [
      new RainbowWalletConnector({ ... }),
    ]
  }
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider client={client}>
      <Component {...pageProps} />
    </Provider>
  );
};

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Rainbowkit is awesome! I just wanna build my own UI.

RNBW-1630

Description

A hook that returns current chain ID.

Example

const chainId = useChainId({ provider }) // e.g. 137 

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

Yesterday we noticed weird behavior as with a fresh install of the dependencies the ui of our dapp stopped loading with error thrown to console

Whether I remove RainbowKitProvider from the tree the page loads successfuly
yarn.lock is same in both copies of the project, everything is same actually, but in one I get the error and in another I don't have it...

Expected Behavior

No response

Steps To Reproduce

Should be possible to reproduce by forking this repo https://github.com/fuertefi/lyra-ethglobal/tree/main/packages/frontend
and trying to run dapp from frontend package

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/fuertefi/lyra-ethglobal/tree/main/packages/frontend

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

1

wagmi Version

1

Current Behavior

Currently sending my browser for a loop when I try to set react state in next js. My calling setState before the UI is being returned.

Expected Behavior

Expected to set state

Steps To Reproduce

<ConnectButton.Custom accountStatus="address">
{({
account,
chain,
openAccountModal,
openChainModal,
openConnectModal,
mounted,
}) => {
setAccount(account.address); // set the address state [address, setAddress]
return (
<div
{...(!mounted && {
"aria-hidden": true,
style: {
opacity: 0,
pointerEvents: "none",
userSelect: "none",
},
})}
>
{(() => {
if (!mounted || !account || !chain) {
return (

Connect Wallet

);
}

              if (chain.unsupported) {
                return (
                  <button onClick={openChainModal} type="button">
                    Wrong network
                  </button>
                );
              }

              return (
                <div style={{ display: "flex", gap: 12 }}>
                  <button
                    onClick={openChainModal}
                    style={{ display: "flex", alignItems: "center" }}
                    type="button"
                  >
                    {chain.hasIcon && (
                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: "hidden",
                          marginRight: 4,
                        }}
                      >
                        {chain.iconUrl && (
                          <Image
                            alt={chain.name ?? "Chain icon"}
                            src={chain.iconUrl}
                            width="12"
                            height="12"
                          />
                        )}
                      </div>
                    )}
                    {chain.name}
                  </button>

                  <button onClick={openAccountModal} type="button">
                    {account.displayName}
                    {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ""}
                  </button>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://www.rainbowkit.com/docs/custom-connect-button

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

Can't seem to get labels to work easily, think it's a bug - can anyone confirm whether there's a fix for this? My usage is roughly like this:

import { ConnectButton } from '@rainbow-me/rainbowkit'

import '@rainbow-me/rainbowkit/styles.css'

return (<ConnectButton showBalance={false} chainStatus="none" label="Create an account"/>)

I ended up going to static/chunks/pages/_app.js and changed it manually for now. This isn't an urgent issue but it is annoying and would be nice if it were easier.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

While we are waiting for the marketing page, we should set up a demo implementation of rainbow kit on an un-styled, dead simple app.

It should have (roughly):

• The connect button / profile pill
• The wallet connect modal
• The connected state dropdown
• A couple actions that activate when a wallet is connected, and show a connect button when not connected

Connected together in a way that represents the "happy" path with rainbowkit. This would be sort of similar to the rainbow-button demo website in terms of functionality.

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

I am finding that using Nextjs feature to set a custom layout per page is causing the error. I pinned it down to this after spending some time debugging.

Expected Behavior

Connect button works fine in my nav even with per page layouts configured for my next app

Steps To Reproduce

I found that the below code works i.e standard setup after create-next-app in _app.tsx

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
          return(
                        <Layout>
                            <Component {...pageProps} />
                        </Layout>
         )
)

And the below snippet contains the offending code. I'm not having any issues elsewhere except using the wallet button in my nav, which is in the component. Placing the wallet button in other pages/components (anywhere except header, footer or layout components) works fine. As we can see I am setting a custom layout on some pages using getLayout(), how next recommends doing it, this is what causes the issue:

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
    const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
    return getLayout(
     ...providers etc.
             <Component {...pageProps} />
     .....
         );
)

Here are my custom app props if of interest

type NextPageWithLayout = NextPage & {
    getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout;
};

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Description

Combination of EthAddress and @/modal

UI

Example

<Profile
  provider={provider}
  modalOptions={...}
  initialWallet={...}
  balance={true || BigNumber}
/>

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.0.2

wagmi Version

0.2.17

Current Behavior

I was displaying the chain selector, and found that the ethereum logo shows up in dev but not in prod.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.2

Current Behavior

A minor issue, but due to the wallet buttons scaling to 0.95 on click (:active), clicking on the very edges won't always work.

In theory, this could be solved by moving the relevant button styles (background, padding, hover/active) to the child div instead.

Expected Behavior

Allow buttons clicks anywhere.

Steps To Reproduce

Tested on the RainbowKit landing page.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

connectButtonTextError in the Light Theme is white which is not visible with white backgrounds. Is it possible to make it another color?

issue:

text is there:

Expected Behavior

Have a contrasting color such as black

Steps To Reproduce

use default theme and switch to an unsupported network

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.4

Current Behavior

Can't connect to Rainbow or Wallet Connect and get this in the console: "Uncaught (in promise) ReferenceError: Buffer is not defined". My wallet connects to MetaMask, but when I try to connect to my Rainbow wallet via mobile, the error on my phone was “Error initializing WalletConnect”.

Expected Behavior

Connect to Rainbow or WalletConnect wallet via mobile.

Steps To Reproduce

1. Go to this link
2. Try to connect to Rainbow or Wallet Connect

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.3

Current Behavior

I currently have a create-react-app application using Tailwind CSS. The RainbowKit styles aren't generated, leading to a "module not found" error.

Expected Behavior

Styles to properly load.

Steps To Reproduce

Generate app from create-react-app 6.2.0. install Tailwind npm:@tailwindcss/postcss7-compat@^2.2.4 with postcss ^7.0.36 and postcss-import ^14.1.0. Install RainbowKit, following instructions.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

While I'm almost certain that this is a build tooling issue (there is a known issue between postcss 8, css loading, and create-react-app), I'm wondering if there is a static-generated CSS file that can be used for cases like this?

Description

A <select> element to switch networks.

UI

Example

import { NetworkSelect } from '@rainbowkit/ui'

<NetworkSelect chains={['ethereum', 'polygon']} initialChain="ethereum" classNames={{ icon: '...', container: '...' }} />

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.2

wagmi Version

0.3.5

Current Behavior

Before clicking Connect Wallet:

After opening the Connect Modal:

Expected Behavior

The right side should not be clipped exposing the background of the body.

Steps To Reproduce

I experience this one my own project but I noticed it occurs on the RainbowKit homepage as well.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://www.rainbowkit.com/

Anything else?

Fixed positioned elements do not get clipped.

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.2.2

wagmi Version

0.4.4

Current Behavior

Copy user address on build project.

Expected Behavior

success

Steps To Reproduce

no

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

no

Anything else?

no

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.4

Current Behavior

When connecting to local Next.JS project and clicking rainbow from safari, spins for a while and then displays Connection Failed. This is on Rinkbey network. Scanning QR rainbow code connects wallet with no problem.

Expected Behavior

Expect modal in rainbow to show option to connect.

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

Using Next.js, TypeScript, and minification with the SWC compiler, causes rainbowkit to break. Happens with both a static site export and building and running a next server. I'm unsure if this is something that can be fixed inside the rainbowkit package or if this is an issue within swc.

In short: typescript + the swcMinify option inside next.config.js causes this issue.

Expected Behavior

Work with the swc compiler.

Steps To Reproduce

Please refer to the linked repository for a minimal reproducible example and steps to reproduce.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/giliamverheide/next-ts-swc-rainbowkit-issue

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.2

wagmi Version

idk

Current Behavior

chrome mobile on ios shows the desktop UI on [0.1.2]. it was working fine before.

Expected Behavior

show mobile UI

Steps To Reproduce

use rainbowkit on ios chrome mobile app - see example link below

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://spinamp-git-rainbowbugdemo-noizd.vercel.app/connect

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.3

Current Behavior

With connect a wallet Modal is opened with ConnectButton. Select Metamask as provider in the options, it shows that the brave browser doesn't have Metamask install.

Expected Behavior

Metamask should pop up to connect with the website.

Steps To Reproduce

Install Metamask extension in Brave Browser. Click on ConnectButton, select Metamask as provider.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://www.rainbowkit.com/

Anything else?

Brave has a shield service enabled by default that block ads. The only way I found to be able to connect to the website with Metamask is by disabling the shield so rainbowkit can detect I have metamask installed.

first 4 wallets in wallets array with hidden property should be shown like this:

Related: #3 #2

Description

<Tx /> is a React component to display a single transaction information. There are 3 states of a transaction - pending, active and failed.

UI

Pending:

Success:

Example

<Tx
  status={'pending' | 'success' | 'fail'}
  title="Swap X for Y"
  hash="0x..."
  chainId={137} /* based on chain detect the provider link */
  explorerUrl="https://polygonscan.com" /* if this is passed then `chainId` is ignored */
  provider={provider} // if provided, then chainId is auto-detected, as well as the tx title and status
/>

Related: #2

Description

A React hook to fetch the most recent transaction history using event logs. Optionally you can pass your own tx history fetcher function that must return the same looking array of txes.

In the core, it will use useWeb3React to get the user address and web3 provider instance.

Example

import { Tx } from '@rainbowkit/ui'
import { useTxHistory } from '@rainbowkit/util'

const App = () => {
 const { txes, loading, error } = useTxHistory({ txFetcher: () => [/* Transaction objects */] )

 if (loading) return <h1>Loading...</h1>

 if (error) return <h1 style={{ color: 'red' }}>ERROR!!!</h1>

 return <>{txes.map(tx => <Tx {...tx } />}</>
}

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.4

Current Behavior

When I am using the CoinBase wallet and I disconnect from within the CoinBase Wallet app, it does not disconnect in my application state and retains the previously selected Account address.

Expected Behavior

When I disconnect from the app, have it clear the account within the application state.

Steps To Reproduce

Connect a wallet using CoinBase Wallet app, then disconnect inside of the CoinBase app, the account will not become null.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/heuristic-shadow-1i79b6

Anything else?

I am not sure if this is an issue with Wagmi, or possibly the CoinBase Wallet SDK, but I thought I would post here first.

it's going to be used in here:

so some of the styles better be removed

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

Importing rainbow's styles.css file but says the file isn't found.

Expected Behavior

Excpected to see the file.

Steps To Reproduce

followed the installation, but used yarn instead of npm.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

Latest

wagmi Version

Latest

Current Behavior

• Go on https://www.rainbowkit.com/
• Attempt to connect with Ledger Live
• Reject the wallet connect in Ledger Live
• Go back to RainbowKit popup and click retry
• An error message appears:
  "Invalid or missing handshakeTopic parameter value"

Expected Behavior

I should just be provided with the wallet connect confirmation popup in Ledger Live

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response