Fixed modal flickering issue in grid layout (#70)

* docs: Update CONTRIBUTING.md * docs: Add test result table * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * feat: add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. * fix: fix theme configuration naming error issue * docs: Add changeset docs * build: release * build: release 1.0.7 (#60) * chore: Update bug_report template (#26) * feat: Add test example * feat: Update examples * feat: Add disclaimer & download url * docs: Update example * docs: Update docs * docs: Update docs * docs: Update gitignore * docs: Update docs * feat: Add zIndices theme config * feat: Update examples * feat: Refactor switch network modal * refactor: Clean code * feat: Update examples * refactor: Update dependencies * feat: Update version * docs: Update docs * chore: Add changeset * test: Test changeset version * docs: Create LICENSE * docs: Update packages info * chore: Add husky & lint-staged * abc: test commit lint * chore: Update husky * chore: Update husky * test: test husky * chore: Add issue & pr template * fix: Update OpenSwitchNetworkOptions type * feat: Add options to control modal close * feat: Add default wallets to walletConnect * docs: Update useModal document * refactor: Add className to base components * chore: Add release github acton * chore: Add publish ci script * chore: Fix github action * chore: Update github action * test: Test github action * chore: Add .pnpm-store to gitignore * chore: Update github action * chore: Copy readme to walletkit package when publish * chore: Update issue_template * chore: Update pr & issue template * Update bug_report.yml * Create config.yml * Delete .github/ISSUE_TEMPLATE/config.yml * Update bug_report.yml * Update bug_report.yml * chore: Update bug_report.yml * style: Add chains type declaration for dev example * style: Add chains type declaration for dev example * chore: test docs release workflow * chore: Test docs release workflow * chore: test docs release workflow * chore: test docs release workflow * style: Add chains type declaration for dev example * chore: test docs release workflow * chore: Test docs release workflow * chore: test docs release workflow * chore: test docs release workflow * test: test alpha release * chore: update versions (alpha) (#39) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * docs: Update docs * fix: fix theme `auto` mode issue & fix walletConnect chains error * fix: fixed `WalletConnect` automatic connection issue * chore: Update dependencies versions * chore: update versions (alpha) (#41) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * fix: Fixed trustwallet losing account status after refreshing (#44) * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * chore: update versions (alpha) (#45) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * style: Update log output styles * style: Add switchNetwork log * refactor: update the `installed` field that detect whether wallet is installed to a function * fix: fixed conflict issue between trustwallet and metaMask * docs: update release docs * Dev (#47) * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * style: Update log output styles * style: Add switchNetwork log * refactor: update the `installed` field that detect whether wallet is installed to a function * fix: fixed conflict issue between trustwallet and metaMask * docs: update release docs * chore: update versions (alpha) (#48) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * docs: Add tests for adding new wallet * Dev (#49) * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * style: Update log output styles * style: Add switchNetwork log * refactor: update the `installed` field that detect whether wallet is installed to a function * fix: fixed conflict issue between trustwallet and metaMask * docs: update release docs * docs: Add tests for adding new wallet * docs: Update contributing * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * fix: Fixed multiple wallets conficts resulting in undetectable issues. (#51) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * chore: update versions (alpha) (#52) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: Fixed TrustWallet will automatically reconnect after reloading the page. (#53) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * chore: update versions (alpha) (#54) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat: add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. * Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. (#56) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * feat: add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. * chore: update versions (alpha) (#57) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: fix theme configuration naming error issue * docs: Add changeset docs * build: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: update versions (#61) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: Fixed modal flickering issue in grid layout. * Fixed modal flickering issue in grid layout. (#66) * chore: Update bug_report template (#26) * feat: Add test example * feat: Update examples * feat: Add disclaimer & download url * docs: Update example * docs: Update docs * docs: Update docs * docs: Update gitignore * docs: Update docs * feat: Add zIndices theme config * feat: Update examples * feat: Refactor switch network modal * refactor: Clean code * feat: Update examples * refactor: Update dependencies * feat: Update version * docs: Update docs * chore: Add changeset * test: Test changeset version * docs: Create LICENSE * docs: Update packages info * chore: Add husky & lint-staged * abc: test commit lint * chore: Update husky * chore: Update husky * test: test husky * chore: Add issue & pr template * fix: Update OpenSwitchNetworkOptions type * feat: Add options to control modal close * feat: Add default wallets to walletConnect * docs: Update useModal document * refactor: Add className to base components * chore: Add release github acton * chore: Add publish ci script * chore: Fix github action * chore: Update github action * test: Test github action * chore: Add .pnpm-store to gitignore * chore: Update github action * chore: Copy readme to walletkit package when publish * chore: Update issue_template * chore: Update pr & issue template * Update bug_report.yml * Create config.yml * Delete .github/ISSUE_TEMPLATE/config.yml * Update bug_report.yml * Update bug_report.yml * chore: Update bug_report.yml * style: Add chains type declaration for dev example * style: Add chains type declaration for dev example * chore: test docs release workflow * chore: Test docs release workflow * chore: test docs release workflow * chore: test docs release workflow * style: Add chains type declaration for dev example * chore: test docs release workflow * chore: Test docs release workflow * chore: test docs release workflow * chore: test docs release workflow * test: test alpha release * chore: update versions (alpha) (#39) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * docs: Update docs * fix: fix theme `auto` mode issue & fix walletConnect chains error * fix: fixed `WalletConnect` automatic connection issue * chore: Update dependencies versions * chore: update versions (alpha) (#41) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * fix: Fixed trustwallet losing account status after refreshing (#44) * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * chore: update versions (alpha) (#45) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * style: Update log output styles * style: Add switchNetwork log * refactor: update the `installed` field that detect whether wallet is installed to a function * fix: fixed conflict issue between trustwallet and metaMask * docs: update release docs * Dev (#47) * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * style: Update log output styles * style: Add switchNetwork log * refactor: update the `installed` field that detect whether wallet is installed to a function * fix: fixed conflict issue between trustwallet and metaMask * docs: update release docs * chore: update versions (alpha) (#48) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * docs: Add tests for adding new wallet * Dev (#49) * chore: prettier & eslint ignore changeset's md files * fix: No need refresh when open WalletConnect Modal in QRCode page * chore: Add vconsole for dev demo * fix: fixed trustwallet losing status after refreshing * chore: update release info * style: Update log output styles * style: Add switchNetwork log * refactor: update the `installed` field that detect whether wallet is installed to a function * fix: fixed conflict issue between trustwallet and metaMask * docs: update release docs * docs: Add tests for adding new wallet * docs: Update contributing * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * fix: Fixed multiple wallets conficts resulting in undetectable issues. (#51) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * chore: update versions (alpha) (#52) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: Fixed TrustWallet will automatically reconnect after reloading the page. (#53) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * chore: update versions (alpha) (#54) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat: add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. * Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. (#56) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * feat: add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network. * chore: update versions (alpha) (#57) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: fix theme configuration naming error issue * docs: Add changeset docs * build: release * fix: Fixed modal flickering issue in grid layout. --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * docs: Remove changeset log * docs: Update release docs * docs: Remove changeset logs --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
node-real · Dec 15, 2023 · 6f52e08 · 6f52e08
1 parent f141677
commit 6f52e08
Show file tree

Hide file tree

Showing 17 changed files with 39 additions and 58 deletions.
diff --git a/.changeset/cold-rockets-knock.md b/.changeset/cold-rockets-knock.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed modal flickering issue in grid layout.
diff --git a/.changeset/famous-drinks-behave.md b/.changeset/famous-drinks-behave.md
diff --git a/.changeset/happy-hounds-complain.md b/.changeset/happy-hounds-complain.md
diff --git a/.changeset/honest-numbers-hug.md b/.changeset/honest-numbers-hug.md
diff --git a/.changeset/late-birds-compare.md b/.changeset/late-birds-compare.md
diff --git a/.changeset/lovely-months-argue.md b/.changeset/lovely-months-argue.md
diff --git a/.changeset/modern-comics-smell.md b/.changeset/modern-comics-smell.md
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -1,19 +1,11 @@
 {
-  "mode": "pre",
+  "mode": "exit",
   "tag": "alpha",
   "initialVersions": {
     "example-nextjs": "0.0.1",
     "example-vite": "0.0.1",
     "@totejs/walletkit": "1.0.7-alpha.2",
     "website": "0.0.1"
   },
-  "changesets": [
-    "famous-drinks-behave",
-    "happy-hounds-complain",
-    "honest-numbers-hug",
-    "late-birds-compare",
-    "lovely-months-argue",
-    "modern-comics-smell",
-    "pretty-flowers-rhyme"
-  ]
+  "changesets": []
 }
diff --git a/.changeset/pretty-flowers-rhyme.md b/.changeset/pretty-flowers-rhyme.md
diff --git a/packages/walletkit/CHANGELOG.md b/packages/walletkit/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @totejs/walletkit
 
+## 1.0.7
+
+### Patch Changes
+
+- 084a397: Fixed theme configuration naming error issue
+- 084a397: Fixed TrustWallet will automatically reconnect after reloading the page.
+- 084a397: refactor: update the `installed` field that detect whether wallet is installed to a
+  function
+- 084a397: Fixed multiple wallets conficts resulting in undetectable issues.
+- 084a397: Fixed `WalletConnect` automatic connection issue in the follow scenario: connect the
+  WalletConnect -> close browser -> reopen browser -> disconnect -> select WalletConnect, will
+  automatically connect.
+- 084a397: Fixed trustwallet losing account status after refreshing
+- 084a397: Fixed conflict issue between trustwallet and metaMask.
+- 084a397: Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of
+  adding network.
+
 ## 1.0.7-alpha.6
 
 ### Patch Changes

diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@totejs/walletkit",
-  "version": "1.0.7-alpha.6",
+  "version": "1.0.7",
   "author": "node-real",
   "private": false,
   "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",

diff --git a/packages/walletkit/src/components/WalletKitProvider/context.ts b/packages/walletkit/src/components/WalletKitProvider/context.ts
@@ -29,6 +29,7 @@ export interface WalletKitOptions {
 export interface WalletKitContextProps {
   options: WalletKitOptions;
   supportedChains: ChainProps[];
+  isMobileLayout: boolean;
 
   action: Action;
   setAction: (action: Action) => void;

diff --git a/packages/walletkit/src/components/WalletKitProvider/index.tsx b/packages/walletkit/src/components/WalletKitProvider/index.tsx
@@ -10,6 +10,7 @@ import { RouteProvider } from '../RouteProvider';
 import { ThemeVariant, ThemeMode, ThemeProvider } from '../ThemeProvider';
 import { WalletKitModal } from '../WalletKitModal';
 import { WalletKitOptions, WalletKitContextProps, WalletKitContext, Action } from './context';
+import { useResponsive } from '@/base/hooks/useResponsive';
 
 export interface WalletKitProviderProps {
   options: WalletKitOptions;
@@ -34,6 +35,7 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
   const [selectedConnector, setSelectedConnector] = useState<Connector>({} as Connector);
 
   const chains = useChains();
+  const { isMobileLayout } = useResponsive();
 
   const value = useMemo(() => {
     const finalOptions = getDefaultProviderOptions(options);
@@ -44,13 +46,14 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
       log: debugMode ? console.log : () => {},
       options: finalOptions,
       supportedChains: finalChains,
+      isMobileLayout,
       action,
       setAction,
       selectedConnector,
       setSelectedConnector,
     };
     return finalValue;
-  }, [options, chains, debugMode, action, selectedConnector]);
+  }, [options, chains, debugMode, isMobileLayout, action, selectedConnector]);
 
   return (
     <WalletKitContext.Provider value={value}>

diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/styles.css.ts b/packages/walletkit/src/pages/Connectors/GridLayout/styles.css.ts
@@ -21,10 +21,10 @@ export const clsNoWalletButton = style({
   borderRadius: cssVar('noWalletButton', 'radii'),
   background: cssVar('noWalletButtonBackground'),
   borderColor: cssVar('noWalletButtonBorder'),
-  color: cssVar('noWalletButtonBackgroundText'),
+  color: cssVar('noWalletButtonText'),
   '@media': hover({
     background: cssVar('noWalletButtonBackgroundHover'),
-    color: cssVar('noWalletButtonBackgroundTextHover'),
+    color: cssVar('noWalletButtonTextHover'),
     borderColor: cssVar('noWalletButtonBorderHover'),
   }),
 });
diff --git a/packages/walletkit/src/pages/Connectors/index.tsx b/packages/walletkit/src/pages/Connectors/index.tsx
@@ -1,6 +1,5 @@
 import { Box } from '@/base/components/Box';
 import { ModalHeader } from '@/base/components/Modal/ModalHeader';
-import { useResponsive } from '@/base/hooks/useResponsive';
 import { Navbar } from '@/components/Navbar';
 import { useWalletKitContext, cx } from '@/index';
 import { useConnect } from 'wagmi';
@@ -11,9 +10,8 @@ import { LIST_LAYOUT_THRESHOLD } from '@/constants/common';
 
 export function ConnectorsPage() {
   const { connectors } = useConnect();
-  const { options } = useWalletKitContext();
+  const { options, isMobileLayout } = useWalletKitContext();
 
-  const { isMobileLayout } = useResponsive();
   const visibleConnectors = connectors.filter((c) => !!c._wallet);
   const useGridLayout = visibleConnectors.length > LIST_LAYOUT_THRESHOLD || isMobileLayout;
 

diff --git a/packages/walletkit/src/themes/base.ts b/packages/walletkit/src/themes/base.ts
@@ -69,8 +69,8 @@ export const base = {
       qrCodeDot: 'var(--wk-colors-text)',
       qrCodeBorder: 'var(--wk-colors-border)',
 
-      noWalletButtonBackgroundText: 'var(--wk-colors-text)',
-      noWalletButtonBackgroundTextHover: 'var(--wk-colors-text)',
+      noWalletButtonText: 'var(--wk-colors-text)',
+      noWalletButtonTextHover: 'var(--wk-colors-text)',
       noWalletButtonBackground: 'transparent',
       noWalletButtonBackgroundHover: 'var(--wk-colors-border)',
       noWalletButtonBorder: 'var(--wk-colors-border)',
@@ -136,8 +136,8 @@ export const base = {
       qrCodeDot: 'var(--wk-colors-text)',
       qrCodeBorder: 'var(--wk-colors-border)',
 
-      noWalletButtonBackgroundText: 'var(--wk-colors-text)',
-      noWalletButtonBackgroundTextHover: 'var(--wk-colors-text)',
+      noWalletButtonText: 'var(--wk-colors-text)',
+      noWalletButtonTextHover: 'var(--wk-colors-text)',
       noWalletButtonBackground: 'transparent',
       noWalletButtonBackgroundHover: 'var(--wk-colors-border)',
       noWalletButtonBorder: 'var(--wk-colors-border)',

diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
@@ -343,8 +343,8 @@ const customTheme = {
     qrCodeDot: 'var(--wk-colors-text)',
     qrCodeBorder: 'var(--wk-colors-border)',
 
-    noWalletButtonBackgroundText: 'var(--wk-colors-text)',
-    noWalletButtonBackgroundTextHover: 'var(--wk-colors-text)',
+    noWalletButtonText: 'var(--wk-colors-text)',
+    noWalletButtonTextHover: 'var(--wk-colors-text)',
     noWalletButtonBackground: 'transparent',
     noWalletButtonBackgroundHover: 'var(--wk-colors-border)',
     noWalletButtonBorder: 'var(--wk-colors-border)',