diff --git a/apps/dcellar-web-ui/CHANGELOG.json b/apps/dcellar-web-ui/CHANGELOG.json index ab7475be..3e308ef8 100644 --- a/apps/dcellar-web-ui/CHANGELOG.json +++ b/apps/dcellar-web-ui/CHANGELOG.json @@ -1,6 +1,18 @@ { "name": "dcellar-web-ui", "entries": [ + { + "version": "0.6.0", + "tag": "dcellar-web-ui_v0.6.0", + "date": "Wed, 17 Apr 2024 03:19:45 GMT", + "comments": { + "minor": [ + { + "comment": "Add connect-wallet page & tutorial card" + } + ] + } + }, { "version": "0.5.0", "tag": "dcellar-web-ui_v0.5.0", diff --git a/apps/dcellar-web-ui/CHANGELOG.md b/apps/dcellar-web-ui/CHANGELOG.md index c2f1caf3..0f98df18 100644 --- a/apps/dcellar-web-ui/CHANGELOG.md +++ b/apps/dcellar-web-ui/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - dcellar-web-ui -This log was last generated on Thu, 11 Apr 2024 02:29:47 GMT and should not be manually modified. +This log was last generated on Wed, 17 Apr 2024 03:19:45 GMT and should not be manually modified. + +## 0.6.0 +Wed, 17 Apr 2024 03:19:45 GMT + +### Minor changes + +- Add connect-wallet page & tutorial card ## 0.5.0 Thu, 11 Apr 2024 02:29:47 GMT diff --git a/apps/dcellar-web-ui/package.json b/apps/dcellar-web-ui/package.json index 24c4bcf7..6314dcb9 100644 --- a/apps/dcellar-web-ui/package.json +++ b/apps/dcellar-web-ui/package.json @@ -1,6 +1,6 @@ { "name": "dcellar-web-ui", - "version": "0.5.0", + "version": "0.6.0", "private": false, "scripts": { "dev": "node ./scripts/dev.js -p 3200", @@ -25,7 +25,7 @@ "@next/bundle-analyzer": "^13.1.6", "@node-real/icons": "~2.20.3", "@node-real/uikit": "~2.54.8", - "@node-real/walletkit": "1.0.10-alpha.1", + "@node-real/walletkit": "1.0.12-alpha.1", "axios": "^1.3.2", "axios-retry": "^3.4.0", "bignumber.js": "^9.1.1", diff --git a/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-bottom.svg b/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-bottom.svg new file mode 100644 index 00000000..bb22c97a --- /dev/null +++ b/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-bottom.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-left.svg b/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-left.svg new file mode 100644 index 00000000..292f5399 --- /dev/null +++ b/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-left.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-right.svg b/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-right.svg new file mode 100644 index 00000000..424f078a --- /dev/null +++ b/apps/dcellar-web-ui/public/images/connect-wallet/icon-cw-right.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/dcellar-web-ui/public/js/iconfont_v0.7.min.js b/apps/dcellar-web-ui/public/js/iconfont_v0.9.min.js similarity index 94% rename from apps/dcellar-web-ui/public/js/iconfont_v0.7.min.js rename to apps/dcellar-web-ui/public/js/iconfont_v0.9.min.js index 5c742dd6..87a55e3c 100644 --- a/apps/dcellar-web-ui/public/js/iconfont_v0.7.min.js +++ b/apps/dcellar-web-ui/public/js/iconfont_v0.9.min.js @@ -1 +1 @@ -!function(e){var t,n,d,o,i,a,r='';function c(){i||(i=!0,d())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=r,r=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?["complete","loaded","interactive"].indexOf(document.readyState)>-1?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(d=t,o=e.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}(window); \ No newline at end of file +!function(e){var t,n,d,o,i,a,r='';function c(){i||(i=!0,d())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=r,r=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?["complete","loaded","interactive"].indexOf(document.readyState)>-1?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(d=t,o=e.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}(window); \ No newline at end of file diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx index 0c6b93f7..73778dba 100644 --- a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx +++ b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx @@ -6,7 +6,7 @@ import { ssrLandingRoutes } from '@/pages/_app'; import { useAppDispatch } from '@/store'; import { checkOffChainDataAvailable, setLoginAccount } from '@/store/slices/persist'; import { Text } from '@node-real/uikit'; -import { useModal } from '@node-real/walletkit'; +import { WalletKitEmbeddedModal, useModal } from '@node-real/walletkit'; import { useAsyncEffect } from 'ahooks'; import { useRouter } from 'next/router'; import { ReactElement, memo, useState } from 'react'; @@ -15,13 +15,14 @@ import { useAccount, useDisconnect } from 'wagmi'; interface ConnectWalletProps extends DCButtonProps { icon?: ReactElement; text?: string; + displayType?: 'button' | 'embeddedModal'; } // for multi connect button in one page let eventTriggerTime = Date.now(); export const ConnectWallet = memo>(function ConnectButton(props) { - const { icon, text, ...restProps } = props; + const { icon, text, displayType = 'button', ...restProps } = props; const router = useRouter(); const dispatch = useAppDispatch(); const { onOpen, onClose } = useModal(); @@ -39,7 +40,6 @@ export const ConnectWallet = memo>(function ConnectB }; // connector may be undefined when wallet throw '(index):7 Error in event handler: Error: write after end'; - const openModal = () => { eventTriggerTime = Date.now(); setTrustEvent(eventTriggerTime); @@ -56,7 +56,14 @@ export const ConnectWallet = memo>(function ConnectB }; useAsyncEffect(async () => { - if (trustEvent !== eventTriggerTime || isAuthPending || !address || !isConnected) return; + if ( + (displayType === 'button' && trustEvent !== eventTriggerTime) || + isAuthPending || + !address || + !isConnected + ) { + return; + } const isAvailable = await dispatch(checkOffChainDataAvailable(address)); @@ -83,26 +90,32 @@ export const ConnectWallet = memo>(function ConnectB }, [address, trustEvent, isAuthPending, router]); return ( - - {icon ? icon : ''} - {text ? text : 'Connect Wallet'} - + <> + {displayType === 'embeddedModal' ? ( + + ) : ( + + {icon ? icon : ''} + {text ? text : 'Connect Wallet'} + + )} + ); }); diff --git a/apps/dcellar-web-ui/src/components/layout/Header/index.tsx b/apps/dcellar-web-ui/src/components/layout/Header/index.tsx index b06df644..241965dc 100644 --- a/apps/dcellar-web-ui/src/components/layout/Header/index.tsx +++ b/apps/dcellar-web-ui/src/components/layout/Header/index.tsx @@ -19,7 +19,7 @@ export const Header = memo(function Header({ taskManagement = true - + {runtimeEnv === 'testnet' && {networkTag(runtimeEnv)}} diff --git a/apps/dcellar-web-ui/src/components/layout/Logo/index.tsx b/apps/dcellar-web-ui/src/components/layout/Logo/index.tsx index cea6440b..9b150a96 100644 --- a/apps/dcellar-web-ui/src/components/layout/Logo/index.tsx +++ b/apps/dcellar-web-ui/src/components/layout/Logo/index.tsx @@ -14,7 +14,7 @@ interface ILogo extends BoxProps { export const Logo: React.FC = (props) => { const { href, target = '', title = '', ...restProps } = props; const { basePath } = useRouter(); - const logo = ; + const logo = ; return ( diff --git a/apps/dcellar-web-ui/src/context/GlobalContext/PageProtect.tsx b/apps/dcellar-web-ui/src/context/GlobalContext/PageProtect.tsx index 96435e65..b74984db 100644 --- a/apps/dcellar-web-ui/src/context/GlobalContext/PageProtect.tsx +++ b/apps/dcellar-web-ui/src/context/GlobalContext/PageProtect.tsx @@ -9,7 +9,7 @@ import { isRightChain } from '@/modules/wallet/utils/isRightChain'; // protect: GNFD chain, GNFD & BSC chain and no protect. const protectGNFDPaths = ['/buckets', '/buckets/[...path]', '/groups', '/accounts']; -const noProtectPaths = ['/', '/terms', '/pricing-calculator', '/tool-box']; +const noProtectPaths = ['/', '/terms', '/pricing-calculator', '/connect-wallet']; // TODO unify the wallet page protect export const PageProtect: React.FC = ({ children }) => { diff --git a/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts b/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts index 6e035ea0..ddbcc183 100644 --- a/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts +++ b/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts @@ -1,5 +1,6 @@ import { InternalRoutePaths } from '@/constants/paths'; import { ssrLandingRoutes } from '@/pages/_app'; +import { useAppSelector } from '@/store'; import { useMount } from 'ahooks'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; @@ -7,7 +8,7 @@ import { useAccount } from 'wagmi'; export function useLoginGuard(inline: boolean) { const { address } = useAccount(); - + const { loginAccount } = useAppSelector((root) => root.persist); const router = useRouter(); const { pathname, asPath } = router; @@ -19,7 +20,7 @@ export function useLoginGuard(inline: boolean) { }); useEffect(() => { - if (!address) { + if (!address || !loginAccount) { if (inline) { setPass(true); } else if (pathname.length > 0 && pathname !== '/') { @@ -36,13 +37,13 @@ export function useLoginGuard(inline: boolean) { if (router?.query?.originAsPath && router?.query.originAsPath.length > 0) { const originPathname = decodeURIComponent(router.query.originAsPath as string); router.replace(originPathname, undefined, { shallow: true }); - } else if (pathname && pathname === '/') { + } else if (pathname && (pathname === '/' || pathname === '/connect-wallet')) { router.replace(InternalRoutePaths.dashboard, undefined, { shallow: true }); } else { setPass(true); } } - }, [address, asPath, pathname, router, inline]); + }, [address, asPath, pathname, router, inline, loginAccount]); return { pass: (!mounted && inline) || pass, diff --git a/apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx b/apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx index ce583ade..9227abec 100644 --- a/apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx +++ b/apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx @@ -3,7 +3,7 @@ import { customTheme } from '@/base/theme/wallet'; import { DCLink } from '@/components/common/DCLink'; import { bscChain, greenFieldChain } from '@/context/WalletConnectContext/chains'; import { reportEvent } from '@/utils/gtag'; -import { Text } from '@node-real/uikit'; +import { Text, useMediaQuery } from '@node-real/uikit'; import { WalletKitOptions, WalletKitProvider, getDefaultConfig } from '@node-real/walletkit'; import '@node-real/walletkit/styles.css'; import { metaMask, trustWallet, walletConnect } from '@node-real/walletkit/wallets'; @@ -11,6 +11,7 @@ import * as Sentry from '@sentry/nextjs'; import * as process from 'process'; import { ReactNode } from 'react'; import { WagmiConfig, createConfig } from 'wagmi'; +import { useRouter } from 'next/router'; const config = createConfig( getDefaultConfig({ @@ -62,11 +63,14 @@ export interface WalletConnectProviderProps { export function WalletConnectProvider(props: WalletConnectProviderProps) { const { children } = props; + const router = useRouter(); + const [isMobile] = useMediaQuery('(max-width: 767px)'); + const isInnerModal = router.pathname === '/connect-wallet' && !isMobile; return ( { + const [isMobile] = useMediaQuery('(max-width: 767px)'); + const bg = isMobile ? `${leftBg}, ${rightBg}` : `${leftBg}, ${rightBg}, ${bottomBg}`; + const bodyHeight = isMobile ? 'calc(100vh - 67px)' : 'calc(100vh - 50px)'; + + return ( + <> + + + + + + + + + + + + BNB Greenfield Storage Console + + + Empower developers to quickly get started with BNB Greenfield decentralized + storage and assist in the development process. + + {isMobile && ( + } + /> + )} + + + + {!isMobile && ( + + + + )} + +