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>
node-real · Dec 15, 2023 · ebae213 · ebae213
1 parent 82e3521
commit ebae213
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 4 deletions.
diff --git a/.changeset/afraid-crabs-pump.md b/.changeset/afraid-crabs-pump.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed theme configuration naming error issue
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
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed TrustWallet will automatically reconnect after reloading the page.
diff --git a/.changeset/happy-hounds-complain.md b/.changeset/happy-hounds-complain.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+refactor: update the `installed` field that detect whether wallet is installed to a function
diff --git a/.changeset/honest-numbers-hug.md b/.changeset/honest-numbers-hug.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed multiple wallets conficts resulting in undetectable issues.
diff --git a/.changeset/late-birds-compare.md b/.changeset/late-birds-compare.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed `WalletConnect` automatic connection issue in the follow scenario: connect the WalletConnect -> close browser -> reopen browser -> disconnect -> select WalletConnect, will automatically connect.
diff --git a/.changeset/lovely-months-argue.md b/.changeset/lovely-months-argue.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed trustwallet losing account status after refreshing
diff --git a/.changeset/modern-comics-smell.md b/.changeset/modern-comics-smell.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed conflict issue between trustwallet and metaMask.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,19 @@
+{
+  "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"
+  ]
+}
diff --git a/.changeset/pretty-flowers-rhyme.md b/.changeset/pretty-flowers-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network.
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/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;