open-index/open-npm huggingface dataset:
npm package: @imtbl/imx-walletconnect-qrcode-modal
Description: ImmutableX Customised QR Code Modal for WalletConnect
Author: Immutable, Inc.
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# WalletConnect QR Code Modal

Immutable QR Code Modal for WalletConnect<br />
Based upon version 1.7.5 of `@walletconnect/qrcode-modal`<br />

## Purpose
The WalletConnect documentation claims that it's possible to
[filter the list of wallets displayed for mobile](https://docs.walletconnect.com/quick-start/dapps/web3-provider#filter-mobile-linking-options),
although the original WalletConnect QR code modal only supports this functionality for iOS. In the original Android
implementation, a list of filterable wallets would not be displayed as they are for iOS devices. Instead, a 'Connect'
link would appear with a href that follows the [WalletConnect URI standard](https://docs.walletconnect.com/mobile-linking#for-android).
The issue with this approach is that when the link is clicked, the Android OS will prompt the user to open the link with
any wallet installed that supports the WalletConnect URI standard, including wallets that are not StarkEx compatible.<br />
<br />
To work around this issue and to improve the UX, we've made the modifications outlined below.

## Modifications
- Removed Android UI; iOS UI will now always be displayed for Android & iOS
- Modified formatting of deep links for MetaMask & Rainbow wallets on Android devices
- Disabled logic to open wallet deep links in new tab for Android, as this would result in a blank screen when returning
to the browser from the wallet
- Removed wallet search functionality, `WalletConnect` header & unused code

The bulk of the custom logic can be found in `/src/imtbl/`.

## Usage

```js
import ImxQrCodeModel from '@imtbl/imx-walletconnect-qrcode-modal';
import WalletConnectProvider from '@walletconnect/web3-provider';

/**
 * Override the default WalletConnect QR code modal 
 */
const wcProvider = new WalletConnectProvider({
  qrcodeModal: ImxQrCodeModel,
});
```
npm package: @imtbl/react-analytics
Description: This package publishes via CICD to the public npm component: `@imtbl/react-analytics`.
Latest version: 0.4.1

# @imtbl/react-analytics

This package publishes via CICD to the public npm component: `@imtbl/react-analytics`.


## Important notice

It appears this library is being phased out, thus maintenance on it for now will be paused. 
If you are using this library, you're advised to post inside #frontend-engineering

## What's inside?

The root of this package exports:

1. a helper function called `createAnalytics()`, and
2. some useful type unions to use as generic type inputs for `createAnalytics`.

This function accepts some configuation and some generic types (to apply to analytics events) - and returns an `<AnalyticsProvider>` and a `useAnalytics()` hook.

Under the hood, this tooling utilises `@segment/analytics-next` - and the structure of the events sent using this tooling conform to the [schema](https://immutable.atlassian.net/wiki/spaces/DAG/pages/2119436426/Naming+Events+Immutable+s+Telemetry+Taxonomy) that is currently recommended by the imx-data team.

## Example usage

```tsx
import {
  createAnalytics,
  StandardAnalyticsActions,
  StandardAnalyticsControlTypes,
} from '@imtbl/react-analytics';
import { Button } from '@biom3/react';

export const getWriteKey = () => process.env.NEXT_PUBLIC_SEGMENT_WRITEKEY || '';

export const { AnalyticsProvider, useAnalytics } = createAnalytics<
  'Onboarding' | 'ViewDocsPage' | 'UsingStorybook',
  string,
  'Click' | 'CopyText' | 'Signup',
  StandardAnalyticsControlTypes
>({
  writeKey: getWriteKey(),
  appName: 'BiomeDocs',
});

function DemoButton() {
  const { track } = useAnalytics();
  return (
    <Button
      onClick={() =>
        track({
          userJourney: 'Onboarding',
          screen: '/moo',
          control: 'Signup',
          controlType: 'Button',
          action: 'click',
        })
      }
    >
      Signup
    </Button>
  );
}

function DemoApp() {
  return (
    <AnalyticsProvider>
      <DemoButton />
    </AnalayticsProvider>
  )
}
```

For testing purposes, the analytics browser held in the context can be overridden:

```
function MockAnalyticsProvider(props: PropsWithChildren) {
  return (
    <AnalyticsProvider overrideValue={{ track: cy.stub().as('track') } as any}>
      {props.children}
    </AnalyticsProvider>
  );
}

...

  cy.mount(<MockAnalyticsProvider><MyComponent></MockAnalyticsProvider>);
  cy.get('@track').should('be.calledWith', 'rewardsZkEvmConnectWallet');
```

## Commands and tooling

Thanks to turbo-repo, all of these commands can be run from the root of the repo

### Install dependencies

To install depedendencies for all monorepo apps and packages, run:

```
npm i
```

### Build

To build all apps and packages, run the following command:

```
npm run build
```

### Lint

To lint all apps and packages, run the following command:

```
npm run lint
```

### Testing headless

To headlessly test all apps and packages, run the following command:

```
npm run test
```