edsadapter 0.0.1

package/src/components/ConnectModal/modal.tsx

@@ -0,0 +1,261 @@
+import React, { useCallback, useEffect } from "react";
+import {
+  Flex,
+  useDisclosure,
+  ChakraProvider,
+  Box,
+  Button,
+} from "@chakra-ui/react";
+import Modal, { Body, Content, CloseButton, Header } from "../Modal";
+import theme from "../../theme";
+import { walletList } from "../../config/wallets";
+import { Img, LeftBox, LeftDesc, RightBox, Title, WalletName } from "./styles";
+import {
+  isLuffa,
+  isLuffaMiniProgramWebview,
+} from "@luffalab/luffa-endless-sdk";
+import { WalletEndNameEnum, WalletLink, WalletType } from "../../types/type";
+import useConnectStore from "../../store/connectStore";
+import { UserResponseStatus } from "@endlesslab/endless-web3-sdk";
+import { getPublicKey } from "../../web3/solana";
+import { getAddress } from "../../web3/tron";
+import { useIsMobile } from "../../hooks/useIsMobile";
+import { useSyncProviders } from "../../hooks/useSyncProvider";
+import { handleEvmConnect } from "../../web3/ethereum";
+
+export interface IConnectModal {
+  remove: () => void;
+  logo: string;
+  chain: string;
+  walletType: WalletType;
+}
+
+export const ConnectModal: React.FC<IConnectModal> = ({
+  remove,
+  logo,
+  chain,
+  walletType,
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const isMobile = useIsMobile();
+  const providers = useSyncProviders();
+  const {
+    jssdk,
+    updateAddress,
+    updateWalletName,
+    setChain,
+    updateWalletIcon,
+    updateWalletType,
+  } = useConnectStore();
+  useEffect(() => {
+    onOpen();
+  }, []);
+
+  const _onClose = async () => {
+    onClose();
+    remove();
+  };
+
+  const isDisabled = useCallback(
+    (chains: string[]) => {
+      return (
+        !!chain && chain !== "0x1" && !chains.includes(chain.split(":")[0])
+      );
+    },
+    [chain],
+  );
+
+  const connectHandle = async (type: WalletType, name: string, img: string) => {
+    updateWalletName(name);
+    if (
+      (type === WalletType.ENDLESS ||
+        (type === WalletType.LUFFA &&
+          (isLuffa() || isLuffaMiniProgramWebview()))) &&
+      jssdk
+    ) {
+      const connectRes = await jssdk.connect();
+      if (connectRes.status === UserResponseStatus.APPROVED) {
+        const walletAddress = connectRes.args.account;
+        updateAddress(walletAddress);
+        updateWalletType(WalletType.ENDLESS);
+        updateWalletIcon(img);
+        const chainArg = await jssdk.getNetwork();
+        if (chainArg.status === UserResponseStatus.APPROVED && chainArg.args) {
+          setChain(chainArg.args.chainId.toString());
+        }
+      }
+      await updateWalletType(type);
+      onClose();
+    } else if (
+      type === WalletType.LUFFA &&
+      !isLuffa() &&
+      !isLuffaMiniProgramWebview()
+    ) {
+      const linkUrl = window.location.href;
+      // showQrCodeModal(linkUrl);
+      return onClose();
+    } else if (type === WalletType.PHANTOM) {
+      await updateWalletType(type);
+      getPublicKey(img);
+      onClose();
+    } else if (type === WalletType.TRONLINK) {
+      await updateWalletType(type);
+      getAddress(img);
+      onClose();
+    } else {
+      await updateWalletType(type);
+      const currentType = type as unknown as keyof typeof WalletType;
+      const method = WalletType[currentType];
+      const curProvider = providers.find((wallet) => wallet.info.name === name);
+
+      if (isMobile && !window.ethereum) {
+        if (name === WalletEndNameEnum.OKX) {
+          const currentURl = window.location.href;
+          return (window.location.href =
+            "https://www.okx.com/download?deeplink=" +
+            encodeURIComponent(
+              "okx://wallet/dapp/url?dappUrl=" + encodeURIComponent(currentURl),
+            ));
+        }
+
+        if (name === WalletEndNameEnum.BITGET) {
+          const currentURl = window.location.href;
+          const url = `https://bkcode.vip?action=dapp&url=${encodeURIComponent(currentURl)}`;
+          return (window.location.href = url);
+        }
+        if (name === WalletEndNameEnum.METAMASK) {
+          const currentURl = window.location.href;
+          window.location.href = `https://metamask.app.link/dapp/${currentURl}`;
+          return;
+        }
+        if (name === WalletEndNameEnum.COINBASE) {
+          const currentURl = window.location.href;
+          const isAndroid = /Android/i.test(navigator.userAgent);
+          const url = isAndroid
+            ? `cbwallet://dapp?url=${encodeURIComponent(currentURl)}`
+            : `https://go.cb-w.com/dapp?cb_url=${encodeURIComponent(currentURl)}`;
+          window.location.href = url;
+        }
+      }
+      if (curProvider) {
+        handleEvmConnect(curProvider, img);
+      } else {
+        window.open(
+          WalletLink[method as unknown as keyof typeof WalletLink],
+          "_blank",
+        );
+      }
+      onClose();
+    }
+  };
+
+  return (
+    <ChakraProvider theme={theme}>
+      <Modal isOpen={isOpen} onClose={_onClose}>
+        <Content
+          w={{ sm: "100%", xl: "800px" }}
+          maxW={{ sm: "100%", xl: "700px" }}
+          color="a4"
+        >
+          <CloseButton top="10px" right="10px" />
+          <Header borderBottom="none" fontSize="18px">
+            Connect Wallet
+          </Header>
+          <Body maxH="600px">
+            <Flex flexDir="column" w="100%" gap="12px">
+              <Flex hideBelow="xl" p={{ sm: "0.2rem 0.1rem", xl: "0px 0px" }}>
+                <LeftBox>
+                  <Img src={logo} boxSize="36px" />
+                  <Title>Connect Wallet</Title>
+                  <LeftDesc>
+                    Please select a wallet to link, and keep your private key
+                    and seed phrase safe.
+                  </LeftDesc>
+                </LeftBox>
+                <RightBox>
+                  <Title mt="4px">Popular</Title>
+                  <Box
+                    mt="14px"
+                    display="flex"
+                    alignItems="center"
+                    flexWrap="wrap"
+                  >
+                    {walletList
+                      .filter((item) =>
+                        isLuffa() || isLuffaMiniProgramWebview()
+                          ? item.walletName !== WalletEndNameEnum.ENDLESS &&
+                            item.show
+                          : item.show,
+                      )
+                      .map((item, index) => {
+                        return item.type === walletType ? (
+                          <Button
+                            justifyContent="flex-start"
+                            textAlign="left"
+                            key={item.type}
+                            w="205px"
+                            color="#000"
+                            h="48px"
+                            ml={(index + 2) % 2 !== 0 ? "16px" : "0px"}
+                            mt={index > 1 ? "16px" : "0px"}
+                            bg="#F5F5F5"
+                            border="1px solid #E5E5E5"
+                            onClick={() => {
+                              connectHandle(
+                                item.type,
+                                item.walletName,
+                                item.imgUrl,
+                              );
+                            }}
+                            isDisabled={isDisabled(item.chains)}
+                            _hover={{
+                              bg: "#F5F5F5",
+                              border: "1px solid #222",
+                            }}
+                          >
+                            {item.img}
+                            <WalletName ml="12px">{item.walletName}</WalletName>
+                          </Button>
+                        ) : (
+                          <Button
+                            color="#000"
+                            w="205px"
+                            bg="#F5F5F5"
+                            border="1px solid #E5E5E5"
+                            key={item.type}
+                            h="48px"
+                            mt={index > 1 ? "16px" : "0px"}
+                            ml={(index + 2) % 2 !== 0 ? "16px" : "0px"}
+                            justifyContent="flex-start"
+                            _hover={{
+                              bg: "#F5F5F5",
+                              border: "1px solid #222",
+                            }}
+                            onClick={() => {
+                              if (item.type === WalletType.ENDLESS) {
+                                _onClose();
+                              }
+
+                              connectHandle(
+                                item.type,
+                                item.walletName,
+                                item.imgUrl,
+                              );
+                            }}
+                            isDisabled={isDisabled(item.chains)}
+                          >
+                            {item.img}
+                            <WalletName ml="12px">{item.walletName}</WalletName>
+                          </Button>
+                        );
+                      })}
+                  </Box>
+                </RightBox>
+              </Flex>
+            </Flex>
+          </Body>
+        </Content>
+      </Modal>
+    </ChakraProvider>
+  );
+};

package/src/components/ConnectModal/showConnectModal.tsx

@@ -0,0 +1,20 @@
+import { createRoot } from "react-dom/client";
+import { ConnectModal, type IConnectModal } from "./modal";
+
+export const showDetailModal = (props?: Omit<IConnectModal, "remove">) => {
+  const domNode = document.createElement("div");
+  document.body.append(domNode);
+
+  const root = createRoot(domNode);
+
+  const remove = () => {
+    root.unmount();
+    domNode.remove();
+  };
+
+  root.render(<ConnectModal remove={remove} {...(props as any)} />);
+
+  return {
+    remove,
+  };
+};

package/src/components/ConnectModal/styles.ts

@@ -0,0 +1,46 @@
+import { Box, chakra } from "@chakra-ui/react";
+
+export const LeftBox = chakra(Box, {
+    baseStyle: {
+        p: '24px',
+        bg: '#000',
+        h: '400px',
+        w: '234px',
+    },
+})
+
+export const WalletName = chakra(Box, {
+    baseStyle: {
+        fontSize: '14px',
+        fontWeight: '600',
+        lineHeight: '14px' /* 16px */,
+    },
+})
+
+export const RightBox = chakra(Box, {
+    baseStyle: {
+        p: '24px',
+        w: '600px',
+    },
+})
+
+export const Title = chakra(Box, {
+  baseStyle: {
+    fontSize: '16px',
+    fontWeight: '600',
+    lineHeight: '16px' /* 16px */,
+    mt: '24px',
+  },
+})
+
+export const LeftDesc = chakra(Box, {
+  baseStyle: {
+    color: '#999',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '1.4em' /* 16px */,
+    mt: '8px',
+  },
+})
+
+export const Img = chakra('img')

package/src/components/Modal.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import {
+  type ChakraProps,
+  Modal as ChakraModal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Drawer,
+  DrawerOverlay,
+  DrawerHeader,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerBody,
+  DrawerFooter,
+  type ModalProps as ChakraModalProps,
+  type DrawerProps as ChakraDrawerProps,
+  type DrawerProps,
+ type  ModalBodyProps,
+} from '@chakra-ui/react'
+import { useIsMobile } from '../hooks/useIsMobile'
+import ModalContextProvider, { useModalContext } from '../contexts/Modal'
+
+interface ModalProps {
+  isOpen: boolean
+  isModal?: boolean
+  variant?: string
+  onClose: () => void
+  children: React.ReactNode
+}
+const Modal = (props: ModalProps & ChakraModalProps & ChakraDrawerProps & DrawerProps) => {
+  const { isModal = false, variant = 'base', isOpen, onClose, children, ...rest } = props
+  const isMobile = useIsMobile()
+  const _isModal = isModal || !isMobile
+
+  return (
+    <ModalContextProvider isModal={_isModal}>
+      {_isModal ? (
+        <ChakraModal
+          variant={variant}
+          trapFocus={false}
+          isOpen={isOpen}
+          onClose={onClose}
+          autoFocus={false}
+          isCentered
+          {...rest}
+        >
+          <ModalOverlay />
+          {children}
+        </ChakraModal>
+      ) : (
+        <Drawer
+          variant={variant}
+          trapFocus={false}
+          placement="bottom"
+          onClose={onClose}
+          isOpen={isOpen}
+          autoFocus={false}
+          {...rest}
+        >
+          <DrawerOverlay />
+          {children}
+        </Drawer>
+      )}
+    </ModalContextProvider>
+  )
+}
+
+interface Props {
+  children: React.ReactNode
+}
+
+export const Content = (props: Props & ChakraProps) => {
+  const { children, ...rest } = props
+  const { isModal } = useModalContext()
+
+  // const [show, setShow] = useState(false)
+  // useEffect(() => {
+  //   const timer = setTimeout(() => {
+  //     setShow(true)
+  //   }, 0)
+
+  //   return () => clearTimeout(timer)
+  // }, [isModal])
+
+  // if (!show) return null
+
+  return isModal ? (
+    <ModalContent {...rest}>{children}</ModalContent>
+  ) : (
+    <DrawerContent minH="70vh" {...rest}>
+      {children}
+    </DrawerContent>
+  )
+}
+
+export const Header = (props: Props & ChakraProps) => {
+  const { children, ...rest } = props
+  const { isModal } = useModalContext()
+  return isModal ? <ModalHeader {...rest}>{children}</ModalHeader> : <DrawerHeader {...rest}>{children}</DrawerHeader>
+}
+
+export const Body = (props: Props & ChakraProps & ModalBodyProps) => {
+  const { children, ...rest } = props
+  const { isModal } = useModalContext()
+  return isModal ? <ModalBody {...rest}>{children}</ModalBody> : <DrawerBody {...rest}>{children}</DrawerBody>
+}
+
+export const Footer = (props: Props & ChakraProps) => {
+  const { children, ...rest } = props
+  const { isModal } = useModalContext()
+  return isModal ? <ModalFooter {...rest}>{children}</ModalFooter> : <DrawerFooter {...rest}>{children}</DrawerFooter>
+}
+
+export const CloseButton = (props: ChakraProps) => {
+  const { isModal } = useModalContext()
+  return isModal ? <ModalCloseButton {...props} /> : <DrawerCloseButton {...props} />
+}
+
+export default React.memo(Modal)

package/src/config/wallets.ts

@@ -0,0 +1,98 @@
+import React from 'react'
+import Luffa from '../assets/wallet/luffa.png'
+import Endless from '../assets/wallet/endless.png'
+import Metamask from '../assets/wallet/metamask.png'
+import okx from '../assets/wallet/okx.png'
+import tron from '../assets/wallet/tron.png'
+import phantom from '../assets/wallet/phantom.png'
+import bitget from '../assets/wallet/bitget.png'
+import coinbase from '../assets/wallet/coinbase.png'
+import walletconnect from '../assets/wallet/walletConnect.png'
+import { WalletEndNameEnum, WalletType } from '../types/type'
+import { chakra } from '@chakra-ui/react'
+
+const Img = chakra('img')
+
+export const walletList = [
+  {
+    walletName: WalletEndNameEnum.ENDLESS,
+    type: WalletType.ENDLESS,
+    chains: ['endless', 'eds'],
+    token_symbol: 'Endless-',
+    imgUrl: Endless,
+    img: React.createElement(Img, { src: Endless, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.LUFFA,
+    type: WalletType.LUFFA,
+    chains: ['endless', 'eds'],
+    token_symbol: 'Endless-',
+    imgUrl: Luffa,
+    img: React.createElement(Img, { src: Luffa, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.METAMASK,
+    type: WalletType.METAMASK,
+    token_symbol: 'Ethereum-',
+    chains: ['eip155'],
+    imgUrl: Metamask,
+    img: React.createElement(Img, { src: Metamask, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.PHANTOM,
+    type: WalletType.PHANTOM,
+    chains: ['solana'],
+    token_symbol: 'Solana-',
+    imgUrl: phantom,
+    img: React.createElement(Img, { src: phantom, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.OKX,
+    type: WalletType.OKX,
+    token_symbol: 'Ethereum-',
+    chains: ['eip155'],
+    imgUrl: okx,
+    img: React.createElement(Img, { src: okx, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.TRONLINK,
+    type: WalletType.TRONLINK,
+    token_symbol: 'Tron-',
+    chains: ['tron'],
+    imgUrl: tron,
+    img: React.createElement(Img, { src: tron, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.WC,
+    type: WalletType.WC,
+    token_symbol: 'Ethereum-',
+    chains: ['eip155'],
+    imgUrl: walletconnect,
+    img: React.createElement(Img, { src: walletconnect, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.COINBASE,
+    type: WalletType.COINBASE,
+    token_symbol: 'Ethereum-',
+    chains: ['eip155'],
+    imgUrl: coinbase,
+    img: React.createElement(Img, { src: coinbase, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+  {
+    walletName: WalletEndNameEnum.BITGET,
+    type: WalletType.BITGET,
+    chains: ['eip155'],
+    token_symbol: 'Ethereum-',
+    imgUrl: bitget,
+    img: React.createElement(Img, { src: bitget, boxSize: { sm: '.29rem', xl: '24px' }, borderRadius: '50%' }),
+    show: true,
+  },
+]

package/src/contexts/Modal.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react'
+
+interface ModalContextProps {
+  isModal: boolean
+}
+
+const ModalContext = createContext<ModalContextProps>(null!)
+
+interface ModalContextProviderProps {
+  children: React.ReactNode
+  isModal: boolean
+}
+const ModalContextProvider: React.FC<ModalContextProviderProps> = ({ children, isModal }) => {
+  return (
+    <ModalContext.Provider
+      value={{
+        isModal,
+      }}
+    >
+      {children}
+    </ModalContext.Provider>
+  )
+}
+
+export function useModalContext() {
+  const ctx = useContext(ModalContext)
+  if (ctx === undefined) {
+    throw new Error('useModalContext must be used within ModalContextProviderƒ')
+  }
+  return ctx
+}
+
+export default ModalContextProvider

package/src/contexts/Tables.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from 'react'
+
+interface ModalContextProviderProps {
+  children: React.ReactNode
+  list: any[]
+  isLoading: boolean
+}
+
+const TablesContext = createContext<Omit<ModalContextProviderProps, 'children'>>(null!)
+
+const TablesContextProvider: React.FC<ModalContextProviderProps> = ({ children, list, isLoading }) => {
+  return (
+    <TablesContext.Provider
+      value={{
+        list,
+        isLoading,
+      }}
+    >
+      {children}
+    </TablesContext.Provider>
+  )
+}
+
+export function useTablesContext() {
+  const ctx = useContext(TablesContext)
+  if (ctx === undefined) {
+    throw new Error('useTablesContext must be used within TablesContextProvider')
+  }
+  return ctx
+}
+
+export default TablesContextProvider

package/src/hooks/store.ts

@@ -0,0 +1,30 @@
+import type { EIP6963ProviderDetail, EIP6963AnnounceProviderEvent } from "../types/type"
+
+declare global {
+  interface WindowEventMap {
+    'eip6963:announceProvider': CustomEvent
+  }
+}
+
+// An array to store the detected wallet providers.
+let providers: EIP6963ProviderDetail[] = []
+
+export const store = {
+  value: () => providers,
+  subscribe: (callback: () => void) => {
+    function onAnnouncement(event: EIP6963AnnounceProviderEvent) {
+      if (providers.map((p) => p.info.uuid).includes(event.detail.info.uuid)) return
+      providers = [...providers, event.detail]
+      callback()
+    }
+
+    // Listen for eip6963:announceProvider and call onAnnouncement when the event is triggered.
+    window.addEventListener('eip6963:announceProvider', onAnnouncement)
+
+    // Dispatch the event, which triggers the event listener in the MetaMask wallet.
+    window.dispatchEvent(new Event('eip6963:requestProvider'))
+
+    // Return a function that removes the event listern.
+    return () => window.removeEventListener('eip6963:announceProvider', onAnnouncement)
+  },
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,10 @@
+import { useMediaQuery } from '@chakra-ui/react'
+
+export const useIsMobile = (): boolean => {
+  let [isMobile] = useMediaQuery('(max-width: 890px)', {
+    ssr: true,
+    fallback: false,
+  })
+
+  return isMobile
+}

package/src/hooks/useSyncProvider.ts

@@ -0,0 +1,4 @@
+import { useSyncExternalStore } from 'react'
+import { store } from './store'
+
+export const useSyncProviders = () => useSyncExternalStore(store.subscribe, store.value, store.value)