32 feat react component basic implementation

apps/sample-react-app/src/Screens/components/Welcome.tsx

@@ -1,7 +1,6 @@
 import { Button, Heading, HStack, Link, Text, VStack } from '@chakra-ui/react';
 import type { JSX } from 'react';
 import { StyledCard } from '../../Components/shared';
-import { SwitchWalletButton } from '../../Components';
 
 export const Welcome = (): JSX.Element => {
     return (
@@ -18,7 +17,6 @@ export const Welcome = (): JSX.Element => {
                     w="full"
                     wrap="wrap"
                 >
-                    <SwitchWalletButton />
                     <Link
                         href="https://github.com/vechainfoundation/veworld-dapp"
                         isExternal

packages/react-wallet-kit/assets/fonts/fonts.ts

@@ -0,0 +1,113 @@
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle`
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyfMZs.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZs.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZs.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZs.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZs.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZs.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB
+    `;

packages/react-wallet-kit/global.d.ts

@@ -0,0 +1 @@
+declare module '*.ttf';

packages/react-wallet-kit/package.json

@@ -14,14 +14,16 @@
         "purge": "yarn clean && rm -rf node_modules"
     },
     "dependencies": {
-        "@chakra-ui/react": "^2.8.1",
         "@heroicons/react": "^2.0.18",
+        "@lit/react": "^1.0.1",
         "@vechain/connex": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
         "@vechain/picasso": "^2.1.1",
         "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-connect": "*",
         "@vechain/wallet-kit": "*",
+        "react-icons": "^4.11.0",
+        "styled-components": "^6.1.0",
         "thor-devkit": "^2.0.9"
     },
     "devDependencies": {

packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx

@@ -0,0 +1,76 @@
+import 'react';
+import { ConnectModalWithButtonWrapped } from './Wrapped/ConnectModalWithButtonWrapped';
+import { useCallback, useContext, useState } from 'react';
+import { ThemeContext } from '../../provider/ThemeProvider';
+import { WalletSource } from '@vechain/wallet-kit';
+import { useWallet } from '../../ConnexProvider';
+import { SourceInfo } from '@vechain/vanilla-wallet-kit';
+
+interface ConnectButtonWithModalProps {
+    onClose?: () => void;
+}
+export const ConnectButtonWithModal = ({
+    onClose,
+}: ConnectButtonWithModalProps) => {
+    const { theme } = useContext(ThemeContext);
+
+    const handleSourceClick = (e: SourceInfo) => {
+        _connect(e.id);
+    };
+
+    const { setAccount, connect, setSource } = useWallet();
+
+    const [connectionLoading, setConnectionLoading] = useState(false);
+    const [connectionError, setConnectionError] = useState('');
+
+    const connectHandler = useCallback(
+        async (source: WalletSource) => {
+            try {
+                setSource(source);
+                setConnectionError('');
+                setConnectionLoading(true);
+
+                const { account } = await connect();
+                setAccount(account);
+
+                onClose?.();
+            } catch (e) {
+                if (e instanceof Error) {
+                    setConnectionError(e.message);
+                } else {
+                    setConnectionError('Failed to connect to wallet');
+                }
+            } finally {
+                setConnectionLoading(false);
+            }
+        },
+        [
+            connect,
+            onClose,
+            setAccount,
+            setConnectionError,
+            setConnectionLoading,
+            setSource,
+        ],
+    );
+
+    const _connect = useCallback(
+        (source: WalletSource) => {
+            connectHandler(source).catch(() => {
+                // do nothing
+            });
+        },
+        [connectHandler],
+    );
+
+    return (
+        <>
+            <ConnectModalWithButtonWrapped
+                mode={theme.mode}
+                onSourceClick={handleSourceClick}
+            />
+            {connectionError}
+            {connectionLoading}
+        </>
+    );
+};