From e245c4e6332edb4acd3aa653d62922c3e8c67848 Mon Sep 17 00:00:00 2001 From: Darren Kelly Date: Tue, 28 Nov 2023 16:31:08 +0000 Subject: [PATCH 1/2] fix: extension wasn't working unless running without ssr --- .github/workflows/publish-wallet-kit.yaml | 28 +++++++-- apps/sample-next-app/src/app/layout.tsx | 33 +---------- apps/sample-next-app/src/app/page.tsx | 22 +++---- .../src/app/pages/homepage.tsx | 58 +++++++++++++++++++ 4 files changed, 89 insertions(+), 52 deletions(-) create mode 100644 apps/sample-next-app/src/app/pages/homepage.tsx diff --git a/.github/workflows/publish-wallet-kit.yaml b/.github/workflows/publish-wallet-kit.yaml index 073e18eb..9a5dbddd 100644 --- a/.github/workflows/publish-wallet-kit.yaml +++ b/.github/workflows/publish-wallet-kit.yaml @@ -15,20 +15,36 @@ jobs: permissions: contents: read packages: write - strategy: - matrix: - package: [ dapp-kit, dapp-kit-ui, dapp-kit-react ] steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 registry-url: https://npm.pkg.github.com/ + - run: yarn install:all - - run: yarn build - - run: | - cd packages/${{ matrix.package }} + + - name: Publish DApp-Kit + run: | + cd packages/dapp-kit + yarn version --no-git-tag-version --new-version ${{ github.ref_name }} + yarn publish + env: + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + + - name: Publish DApp-Kit-UI + run: | + cd packages/dapp-kit-ui yarn version --no-git-tag-version --new-version ${{ github.ref_name }} yarn publish env: NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + + - name: Publish DApp-Kit-React + run: | + cd packages/dapp-kit-react + yarn version --no-git-tag-version --new-version ${{ github.ref_name }} + yarn publish + env: + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + diff --git a/apps/sample-next-app/src/app/layout.tsx b/apps/sample-next-app/src/app/layout.tsx index 5eaaaaa2..b41cacdb 100644 --- a/apps/sample-next-app/src/app/layout.tsx +++ b/apps/sample-next-app/src/app/layout.tsx @@ -3,28 +3,6 @@ import { Inter } from 'next/font/google'; import './globals.css'; -import type { Options } from '@vechain/connex'; -import { ConnexProvider } from '@vechainfoundation/dapp-kit-react'; -import type { WalletConnectOptions } from '@vechainfoundation/dapp-kit'; - -const nodeOptions: Omit = { - node: 'https://testnet.vechain.org/', - network: 'test', -}; - -const walletConnectOptions: WalletConnectOptions = { - projectId: 'a0b855ceaf109dbc8426479a4c3d38d8', - metadata: { - name: 'Sample VeChain dApp', - description: 'A sample VeChain dApp', - url: typeof window !== 'undefined' ? window.location.origin : '', - icons: [ - typeof window !== 'undefined' - ? `${window.location.origin}/images/logo/my-dapp.png` - : '', - ], - }, -}; const inter = Inter({ subsets: ['latin'] }); @@ -36,16 +14,7 @@ export default function RootLayout({ }): React.ReactElement { return ( - - - {children} - - + {children} ); } diff --git a/apps/sample-next-app/src/app/page.tsx b/apps/sample-next-app/src/app/page.tsx index 3e232d78..de684f70 100644 --- a/apps/sample-next-app/src/app/page.tsx +++ b/apps/sample-next-app/src/app/page.tsx @@ -1,23 +1,17 @@ 'use client'; // This is a client component -import { - ConnectWalletButtonWithModal, - useWallet, -} from '@vechainfoundation/dapp-kit-react'; -import React, { useEffect } from 'react'; +import React from 'react'; +import dynamic from 'next/dynamic'; -// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, import/no-default-export -export default function Home() { - const { account } = useWallet(); - - useEffect(() => { - // eslint-disable-next-line no-console - console.log('account', account); - }, [account]); +const ConnectWalletButton = dynamic(() => import('./pages/homepage'), { + ssr: false, +}); +// eslint-disable-next-line import/no-default-export +export default function Page() { return (
- +
); } diff --git a/apps/sample-next-app/src/app/pages/homepage.tsx b/apps/sample-next-app/src/app/pages/homepage.tsx new file mode 100644 index 00000000..dd12f319 --- /dev/null +++ b/apps/sample-next-app/src/app/pages/homepage.tsx @@ -0,0 +1,58 @@ +import { + ConnectWalletButtonWithModal, + ConnexProvider, + useWallet, +} from '@vechainfoundation/dapp-kit-react'; +import type { Options } from '@vechain/connex'; +import type { WalletConnectOptions } from '@vechainfoundation/dapp-kit'; +import { useEffect } from 'react'; + +const nodeOptions: Omit = { + node: 'https://testnet.vechain.org/', + network: 'test', +}; + +const walletConnectOptions: WalletConnectOptions = { + projectId: 'a0b855ceaf109dbc8426479a4c3d38d8', + metadata: { + name: 'Sample VeChain dApp', + description: 'A sample VeChain dApp', + url: typeof window !== 'undefined' ? window.location.origin : '', + icons: [ + typeof window !== 'undefined' + ? `${window.location.origin}/images/logo/my-dapp.png` + : '', + ], + }, +}; + +// eslint-disable-next-line func-style +function ConnectWallet() { + const { account } = useWallet(); + + useEffect(() => { + if (account) { + // eslint-disable-next-line no-console + console.log('account', account); + } + }, [account]); + + return ; +} + +// eslint-disable-next-line func-style +function HomePage() { + return ( + + + + ); +} + +// eslint-disable-next-line import/no-default-export +export default HomePage; From 3e8c62dd41e6afc17dae3395add1ff7dc6b4ee94 Mon Sep 17 00:00:00 2001 From: Darren Kelly Date: Tue, 28 Nov 2023 17:15:02 +0000 Subject: [PATCH 2/2] feat: add modal only component --- .../ConnectWalletModal/ConnectWalletModal.tsx | 16 ++++++++++++++++ .../src/Components/ConnectWalletModal/index.ts | 1 + packages/dapp-kit-react/src/Components/index.ts | 1 + 3 files changed, 18 insertions(+) create mode 100644 packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx create mode 100644 packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx new file mode 100644 index 00000000..3382da16 --- /dev/null +++ b/packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx @@ -0,0 +1,16 @@ +import React, { useMemo } from 'react'; +import { createComponent } from '@lit/react'; +import { ConnectModal } from '@vechainfoundation/dapp-kit-ui'; + +export const createButtonWithModal = () => + createComponent({ + tagName: 'vwk-connect-modal', + elementClass: ConnectModal, + react: React, + }); + +export const ConnectWalletModal: React.FC = () => { + const Modal = useMemo(() => createButtonWithModal(), []); + + return ; +}; diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts b/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts new file mode 100644 index 00000000..423a5eae --- /dev/null +++ b/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts @@ -0,0 +1 @@ +export * from './ConnectWalletModal'; diff --git a/packages/dapp-kit-react/src/Components/index.ts b/packages/dapp-kit-react/src/Components/index.ts index 590adc22..2c610c67 100644 --- a/packages/dapp-kit-react/src/Components/index.ts +++ b/packages/dapp-kit-react/src/Components/index.ts @@ -1 +1,2 @@ export * from './ConnectWalletButtonWithModal'; +export * from './ConnectWalletModal';