feature: permanent "walletconnect has issues" notification for WCv2"

packages/connect-wallet-modal/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @reef-knot/connect-wallet-modal
 
+## 1.4.3
+
+### Patch Changes
+
+- Add a notification about WC v2 issues
+- Updated dependencies
+  - @reef-knot/core-react@1.4.2
+  - @reef-knot/ui-react@1.0.4
+
 ## 1.4.2
 
 ### Patch Changes

packages/connect-wallet-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/connect-wallet-modal",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -36,23 +36,27 @@
     "dev": "dev=on rollup -c -w",
     "lint": "eslint"
   },
+  "dependencies": {
+    "@types/react": "17.0.53",
+    "@types/react-dom": "17"
+  },
   "devDependencies": {
-    "@reef-knot/core-react": "^1.4.1",
+    "@reef-knot/core-react": "^1.4.2",
     "@reef-knot/types": "^1.2.1",
-    "@reef-knot/ui-react": "^1.0.3",
+    "@reef-knot/ui-react": "^1.0.4",
     "@reef-knot/wallets-icons": "^1.0.0",
     "@reef-knot/web3-react": "^1.2.1",
-    "@types/react": "17.0.53",
     "@types/ua-parser-js": "^0.7.36",
     "ethers": "^5.7.2",
     "react": "17.0.2",
+    "react-dom": "17.0.2",
     "ua-parser-js": "1.0.33",
     "wagmi": "^0.12.17"
   },
   "peerDependencies": {
-    "@reef-knot/core-react": "^1.4.1",
+    "@reef-knot/core-react": "^1.4.2",
     "@reef-knot/types": "^1.2.1",
-    "@reef-knot/ui-react": "^1.0.3",
+    "@reef-knot/ui-react": "^1.0.4",
     "@reef-knot/wallets-icons": "^1.0.0",
     "@reef-knot/web3-react": "^1.2.1",
     "react": ">=17",

packages/connect-wallet-modal/src/connectButtons/ConnectWC.tsx

@@ -1,6 +1,7 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { useConnect } from 'wagmi';
 import { useDisconnect } from '@reef-knot/web3-react';
+import { WCWarnBannerRequest } from '@reef-knot/ui-react';
 import { ConnectButton } from '../components/ConnectButton';
 import { capitalize } from '../helpers';
 import { ConnectWCProps } from './types';
@@ -73,22 +74,29 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
   });
   const { disconnect } = useDisconnect();
 
+  const [isConnecting, setIsConnecting] = useState(false);
+
   const handleConnect = useCallback(async () => {
-    onBeforeConnect?.();
-    metricsOnClick?.();
+    setIsConnecting(true);
+    try {
+      onBeforeConnect?.();
+      metricsOnClick?.();
 
-    disconnect?.();
+      disconnect?.();
 
-    if (WCURICondition) {
-      // because of popup blockers, window.open must be called directly from onclick handler
-      redirectionWindow = window.open('', '_blank');
-      redirectionWindow?.document.write(getRedirectionLoadingHTML());
-      await connectAsync({ connector: WCURIConnector });
-      if (WCURICloseRedirectionWindow) {
-        redirectionWindow?.close();
+      if (WCURICondition) {
+        // because of popup blockers, window.open must be called directly from onclick handler
+        redirectionWindow = window.open('', '_blank');
+        redirectionWindow?.document.write(getRedirectionLoadingHTML());
+        await connectAsync({ connector: WCURIConnector });
+        if (WCURICloseRedirectionWindow) {
+          redirectionWindow?.close();
+        }
+      } else {
+        await connectAsync({ connector });
       }
-    } else {
-      await connectAsync({ connector });
+    } finally {
+      setIsConnecting(false);
     }
   }, [
     WCURICloseRedirectionWindow,
@@ -104,13 +112,16 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
   const WalletIcon = icon || icons;
 
   return (
-    <ConnectButton
-      {...rest}
-      icon={WalletIcon}
-      shouldInvertWalletIcon={shouldInvertWalletIcon}
-      onClick={handleConnect}
-    >
-      {walletName}
-    </ConnectButton>
+    <>
+      {isConnecting ? <WCWarnBannerRequest /> : null}
+      <ConnectButton
+        {...rest}
+        icon={WalletIcon}
+        shouldInvertWalletIcon={shouldInvertWalletIcon}
+        onClick={handleConnect}
+      >
+        {walletName}
+      </ConnectButton>
+    </>
   );
 };

packages/core-react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @reef-knot/core-react
 
+## 1.4.2
+
+### Patch Changes
+
+- Add a notification about WC v2 issues
+- Updated dependencies
+  - @reef-knot/ui-react@1.0.4
+
 ## 1.4.1
 
 ### Patch Changes

packages/core-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/core-react",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -40,12 +40,14 @@
     "react": "17.0.2",
     "wagmi": "^0.12.17",
     "@reef-knot/wallets-list": "^1.4.1",
-    "@reef-knot/types": "^1.2.1"
+    "@reef-knot/types": "^1.2.1",
+    "@reef-knot/ui-react": "^1.0.4"
   },
   "peerDependencies": {
     "react": ">=17",
     "wagmi": "^0.12.17",
     "@reef-knot/wallets-list": "^1.4.1",
-    "@reef-knot/types": "^1.2.1"
+    "@reef-knot/types": "^1.2.1",
+    "@reef-knot/ui-react": "^1.0.4"
   }
 }

packages/core-react/src/context/index.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, FC, useMemo } from 'react';
 import { WalletAdapterData } from '@reef-knot/types';
 import { Chain } from 'wagmi/chains';
+import { WCWarnBannerContextProvider } from '@reef-knot/ui-react';
 import { getWalletDataList } from '../walletData/index';
 
 export interface ReefKnotContextProps {
@@ -38,7 +39,7 @@ export const ReefKnot: FC<ReefKnotContextProps> = ({
 
   return (
     <ReefKnotContext.Provider value={contextValue}>
-      {children}
+      <WCWarnBannerContextProvider>{children}</WCWarnBannerContextProvider>
     </ReefKnotContext.Provider>
   );
 };

packages/reef-knot/CHANGELOG.md

@@ -1,5 +1,14 @@
 # reef-knot
 
+## 1.4.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @reef-knot/connect-wallet-modal@1.4.3
+  - @reef-knot/core-react@1.4.2
+  - @reef-knot/ui-react@1.0.4
+
 ## 1.4.3
 
 ### Patch Changes

packages/reef-knot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reef-knot",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -41,10 +41,10 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@reef-knot/connect-wallet-modal": "1.4.2",
-    "@reef-knot/core-react": "1.4.1",
+    "@reef-knot/connect-wallet-modal": "1.4.3",
+    "@reef-knot/core-react": "1.4.2",
     "@reef-knot/web3-react": "1.2.2",
-    "@reef-knot/ui-react": "1.0.3",
+    "@reef-knot/ui-react": "1.0.4",
     "@reef-knot/wallets-icons": "1.0.0",
     "@reef-knot/wallets-list": "1.4.2",
     "@reef-knot/wallets-helpers": "1.1.2",

packages/ui-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/ui-react
 
+## 1.0.4
+
+### Patch Changes
+
+- Add a notification about WC v2 issues
+
 ## 1.0.3
 
 ### Patch Changes

packages/ui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/ui-react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -48,13 +48,15 @@
     "react": ">=17",
     "react-dom": ">=17",
     "react-is": ">=17",
-    "styled-components": "5"
+    "styled-components": "5",
+    "wagmi": "^0.12.17"
   },
   "devDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-is": "17.0.2",
     "styled-components": "^5.3.6",
-    "@types/react-transition-group": "4.4.2"
+    "@types/react-transition-group": "4.4.2",
+    "wagmi": "^0.12.17"
   }
 }

packages/ui-react/src/components/WCWarnBanner/GradientBanner.styles.tsx

@@ -0,0 +1,86 @@
+import styled from '../../utils/styledWrapper';
+
+const MEDIA = {
+  WIDTH: {
+    EXTRA_LARGE_MAX_WIDTH: 2559,
+    CONTENT_MAX_WIDTH: 1360,
+    TABLET_MAX_WIDTH: 1199,
+    TABLET_MIDDLE_WIDTH: 850,
+    MOBILE_MAX_WIDTH: 767,
+    MOBILE_MIDDLE_WIDTH: 420,
+    MOBILE_SMALL_MAX_WIDTH: 374,
+    CONTENT_MIN_WIDTH: 320,
+  },
+  PADDING: {
+    CONTENT_MAX_PADDING: 32,
+    CONTENT_MIN_PADDING: 20,
+  },
+  HEADER: {
+    HEADER_HEIGHT: 80,
+  },
+};
+
+export const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 10px;
+  color: #ffffff !important;
+  overflow: hidden;
+  background: linear-gradient(
+    89.98deg,
+    #1b4dcb -33.77%,
+    #530ec4 27.13%,
+    #41aefd 78.79%
+  );
+
+  @media (max-width: ${MEDIA.WIDTH.TABLET_MAX_WIDTH}px) {
+    padding: 10px 10px 10px 20px;
+  }
+
+  @media (max-width: ${MEDIA.WIDTH.MOBILE_MAX_WIDTH}px) {
+    padding: 10px 10px 20px 20px;
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  flex-grow: 1;
+  margin-left: 24px;
+
+  @media (max-width: ${MEDIA.WIDTH.TABLET_MAX_WIDTH}px) {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 0;
+  }
+`;
+
+export const Title = styled.h2`
+  margin-right: 12px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 20px;
+
+  @media (max-width: ${MEDIA.WIDTH.MOBILE_MAX_WIDTH}px) {
+    margin-right: 0;
+  }
+`;
+
+export const Description = styled.p`
+  text-align: center;
+  color: ${(p) => p.color};
+
+  position: relative;
+  font-size: 12px;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+
+  @media (max-width: ${MEDIA.WIDTH.TABLET_MAX_WIDTH}px) {
+    font-size: 14px;
+    line-height: 24px;
+    padding: 0;
+    text-align: left;
+  }
+`;

packages/ui-react/src/components/WCWarnBanner/GradientBanner.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+
+import {
+  Wrapper,
+  Container,
+  Title,
+  Description,
+} from './GradientBanner.styles';
+
+type Props = {
+  title: ReactNode;
+  description: ReactNode;
+};
+
+export const GradientBanner = ({ title, description }: Props) => (
+  <Wrapper>
+    <Container>
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+    </Container>
+  </Wrapper>
+);

packages/ui-react/src/components/WCWarnBanner/WCWarnBanner.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { GradientBanner } from './GradientBanner';
+
+export const WCWarnBanner = () => (
+  <GradientBanner
+    title="Notice on WalletConnect v2"
+    description={
+      <>
+        <a
+          href="https://github.com/orgs/WalletConnect/discussions/categories/v1-v2-migration-support"
+          target="_blank"
+          rel="noreferrer"
+          style={{ color: 'currentcolor' }}
+        >
+          WalletConnect v2
+        </a>{' '}
+        is still under development and might work unstable. In case of issues
+        with WalletConnect, please try to use another wallet connection option.
+      </>
+    }
+  />
+);