edsadapter 0.0.1

package/src/hooks/useToast.tsx

@@ -0,0 +1,163 @@
+import {
+  chakra,
+  Flex,
+  Box,
+  Text,
+  useToast as _useToast,
+  type UseToastOptions as _UseToastOptions,
+  Image,
+} from "@chakra-ui/react";
+import loadingIcon from "../assets/loading.png";
+import tickIcon from "../assets/svg/tick.svg?react";
+import closeIcon from "../assets/svg/close.svg?react";
+import { keyframes } from "@emotion/react";
+import { createStandaloneToast } from "@chakra-ui/react";
+import theme from "../theme";
+
+const { toast } = createStandaloneToast({ theme });
+
+interface UseToastOptions extends _UseToastOptions {
+  message?: string;
+}
+
+const _toast = (
+  option: UseToastOptions,
+  fn: (option: _UseToastOptions) => void,
+) => {
+  const {
+    title,
+    message,
+    duration = 3000,
+    status,
+    containerStyle = { m: "10px" },
+    ...rest
+  } = option;
+  fn({
+    title,
+    duration,
+    status,
+    containerStyle,
+    render: () => (
+      <Box overflow="hidden" pos="relative" borderRadius="10px">
+        <ToastBox
+          bg={
+            status === "success"
+              ? "rgba(49, 207, 46, 0.10)"
+              : "rgba(255, 79, 79, 0.10)"
+          }
+        >
+          {status && status !== "warning" && (
+            <IconBox>
+              {status === "loading" && <LoadingIcon />}
+              {status === "success" && <SuccessIcon />}
+              {status === "error" && <ErrorIcon />}
+            </IconBox>
+          )}
+
+          <Flex
+            flexDir="column"
+            gap="2px"
+            justify="center"
+            color={status === "success" ? "#000" : "#FF4F4F"}
+          >
+            <Text fontSize="14px" fontWeight={600} lineHeight="1.6em">
+              {title}
+            </Text>
+            <Text
+              fontSize="12px"
+              fontWeight={500}
+              color="b2"
+              lineHeight="1.6em"
+            >
+              {message}
+            </Text>
+          </Flex>
+        </ToastBox>
+      </Box>
+    ),
+    ...rest,
+  });
+};
+export const standaloneToast = (option: UseToastOptions) => {
+  _toast(option, toast);
+};
+
+export const useToast = () => {
+  const toast = _useToast();
+
+  return (option: UseToastOptions) => _toast(option, toast);
+};
+
+const ToastBox = chakra(Flex, {
+  baseStyle: {
+    gap: "16px",
+    p: "16px 45px 16px 24px",
+    align: "center",
+    borderRadius: "10px",
+    border: "1px solid rgba(255, 255, 255, 0.10)",
+    boxShadow: "0px 12px 36px 0px rgba(0, 0, 0, 0.80)",
+    backdropFilter: "blur(24px)",
+  },
+});
+
+const IconBox = chakra(Flex, {
+  baseStyle: {
+    boxSize: "40px",
+    minW: "40px",
+    justifyContent: "center",
+    alignItems: "center",
+    border: "1px solid rgba(133, 137, 167, 0.20)",
+    backdropFilter: "blur(8px)",
+    borderRadius: "50%",
+  },
+});
+
+const LoadingIcon = () => {
+  return (
+    <Image
+      src={loadingIcon}
+      boxSize="20px"
+      animation={`${rotateAnimation} 800ms linear infinite`}
+    />
+  );
+};
+
+const SuccessIcon = () => {
+  return (
+    <Flex
+      boxSize="24px"
+      bg="#0FD375"
+      borderRadius="50%"
+      align="center"
+      justify="center"
+    >
+      <TickIcon boxSize="18px" sx={{ "& rect": { fill: "white" } }} />
+    </Flex>
+  );
+};
+
+const ErrorIcon = () => {
+  return (
+    <Flex
+      boxSize="24px"
+      bg="#F34D4E"
+      borderRadius="50%"
+      align="center"
+      justify="center"
+    >
+      <CloseIcon boxSize="18px" sx={{ "& rect": { fill: "white" } }} />
+    </Flex>
+  );
+};
+
+const TickIcon = chakra(tickIcon);
+const CloseIcon = chakra(closeIcon);
+
+const rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;

package/src/hooks/useWallet.ts

@@ -0,0 +1,66 @@
+import useConnectStore from '../store/connectStore';
+import { useCallback, useEffect } from 'react';
+import { getProvider } from '../web3';
+import { watchSolAccountChange } from '../web3/solana';
+import { WalletType, } from '../types/type';
+import { useSyncProviders } from './useSyncProvider';
+
+
+export const useWallet = () => {
+  const { clearAll, jssdk, address, walletType, chain, walletIcon, walletName, setChain, updateAddress } = useConnectStore()
+  const providers = useSyncProviders();
+
+  useEffect(() => {
+    watchWallet()
+  }, [walletType, chain, providers])
+
+  const watchWallet = async () => {
+    const ethProvider = providers?.find((wallet) => wallet.info.name === walletName)?.provider || null
+    const tronMessageHandle = (e: MessageEvent) => {
+      if (e.data.isTronLink) {
+      }
+      if (!e.data.isTronLink) return
+
+      if (e.data.message && e.data.message.action == 'disconnect') {
+        disconnect()
+      }
+
+      if (e.data.message && e.data.message.action == 'setNode') {
+        useConnectStore.getState().setChain(`tron:${e.data.message.data.node.chainId}`)
+      }
+      if (e.data.message && e.data.message.action === 'accountsChanged') {
+        useConnectStore.getState().updateAddress(e.data.message.data.address)
+      }
+    }
+    if (walletType === WalletType.TRONLINK) {
+      window.addEventListener('message', tronMessageHandle)
+    }
+    if (walletType === WalletType.PHANTOM) {
+      watchSolAccountChange(getProvider(walletType))
+    }
+    if (walletType !== WalletType.TRONLINK && ethProvider) {
+      ethProvider.on('chainChanged', (chainId: string) => {
+        setChain(`eip155:${Number(chainId)}`)
+      })
+      ethProvider.on('accountsChanged', (accounts: string[]) => {
+
+        updateAddress(accounts[0] || '')
+      })
+    }
+  }
+
+  const disconnect = useCallback(() => {
+    clearAll();
+    jssdk?.disconnect()
+  }, []);
+
+
+  return {
+    provider: address ? getProvider(walletType) : null,
+    account: address,
+    chainId: chain,
+    walletIcon: walletIcon,
+    disconnect,
+  };
+};
+

package/src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as Button } from './components/Button';
+export { default as ConnectProvider } from './components/ConnectModal';
+export { showDetailModal } from './components/ConnectModal';
+export { useWallet } from './hooks/useWallet';
+export { WalletEndNameEnum, WalletType } from './types/type';

package/src/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(<App />);

package/src/store/connectStore.ts

@@ -0,0 +1,87 @@
+import { WalletType } from '../types/type'
+import type { EndlessJsSdk } from '@endlesslab/endless-web3-sdk'
+import { BrowserProvider, ethers } from 'ethers'
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+export interface IWC {
+  address: string
+  chains: string[]
+  chain: string
+  walletChainId: string
+  walletProvider: BrowserProvider | undefined
+  walletType: WalletType
+  jssdk: EndlessJsSdk | null
+  network: string
+
+  // ethProvider: EIP1193Provider | undefined
+  walletName: string
+  walletIcon: string
+  updateAddress: (address: string) => void
+  setChain: (chain: string) => void
+  setWalletChainId: (walletChainId: string) => void
+  setWalletProvider: (walletProvider: ethers.BrowserProvider) => void
+  updateWalletType: (walletType: WalletType) => void
+  updateWalletName: (walletName: string) => void
+  updateWalletIcon: (walletIcon: string) => void
+  updateJsSDK: (jssdk: EndlessJsSdk | null) => void
+  setNetwork: (network: string) => void
+  clearAll: () => void
+
+  // updateEthProvider: (provider: EIP1193Provider) => void
+}
+
+const useConnectStore = create(
+  persist<IWC>(
+    (set, get) => ({
+      jssdk: null,
+      address: '',
+      chains: [],
+      chain: '0x1',
+      walletChainId: '',
+      walletProvider: undefined,
+      walletType: WalletType.ENDLESS,
+      walletName: '',
+      walletIcon: '',
+      risk: false,
+      network: 'dev',
+      // ethProvider: undefined,
+      updateAddress: (address: string) => set({ address }),
+
+      setChain: (chain: string) => set({ chain }),
+
+      setWalletChainId: (chainId: string) => set({ walletChainId: chainId }),
+
+      setWalletProvider: (walletProvider: ethers.BrowserProvider) => set({ walletProvider }),
+
+      updateWalletType: (walletType: WalletType) => set({ walletType }),
+
+      updateWalletName: (walletName: string) => set({ walletName }),
+
+      updateWalletIcon: (walletIcon: string) => set({ walletIcon }),
+
+      updateJsSDK: (jssdk: EndlessJsSdk | null) => {
+        set({ jssdk })
+      },
+      setNetwork: (network: string) => set({ network }),
+      clearAll: () => set({ address: '', chain: '', network: 'dev', walletType: WalletType.ENDLESS, walletName: '', walletIcon: '' }),
+
+      // updateEthProvider: (provider: EIP1193Provider) => set({ ethProvider: provider }),
+    }),
+    {
+      name: `connectInfo-connectAdapter`,
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) =>
+        ({
+          address: state.address,
+          chain: state.chain,
+          walletChainId: state.walletChainId,
+          network: state.network,
+          walletType: state.walletType,
+          walletName: state.walletName,
+          walletIcon: state.walletIcon,
+          // ethProvider: state.ethProvider,
+        }) as IWC,
+    },
+  ),
+)
+export default useConnectStore

package/src/theme/components/Button.ts

@@ -0,0 +1,100 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react";
+
+const base = defineStyle({
+  w: "100%",
+  display: 'flex',
+  // flexGrow: 1,
+  borderRadius: "1rem",
+  h: ".4rem",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "a4",
+  fontSize: ".14rem",
+  fontWeight: "500",
+  cursor: "pointer",
+  bg: "#7534FF",
+  _hover: {
+    bg: "#7534FF",
+  },
+  _disabled: {
+    _hover: {
+      bg: '#7534FF !important',
+    }
+  }
+});
+
+const add = defineStyle({
+  w: "80px",
+  // flexGrow: "1",
+  borderRadius: "4px",
+  h: "32px",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "a4",
+  fontSize: "14px",
+  px: '16px',
+  fontWeight: "500",
+  cursor: "pointer",
+  bg: "b1",
+  _hover: {
+    bg: "a6",
+  },
+  _disabled: {
+    _hover: {
+      bg: 'a6 !important',
+    }
+  }
+
+});
+const submit = defineStyle({
+  w: "200px",
+  // flexGrow: "1",
+  borderRadius: "4px",
+  h: "44px",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "a4",
+  fontSize: "16px",
+  px: '16px',
+  fontWeight: "600",
+  cursor: "pointer",
+  bg: "b6",
+  _hover: {
+    bg: "#A69AFF",
+  },
+  _disabled: {
+    opacity: '1',
+    bg: '#E7E7E7',
+    color: 'b1',
+    _hover: {
+      bg: 'c8 !important'
+    }
+  }
+
+});
+
+const close = defineStyle({
+  w: "240px",
+  borderRadius: "4px",
+  h: "44px",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "b1",
+  fontSize: "14px",
+  px: '16px',
+  fontWeight: "600",
+  cursor: "pointer",
+  bg: "#E7E7E7",
+  _hover: {
+    bg: "c8",
+  },
+});
+
+export const buttonTheme = defineStyleConfig({
+  variants: {
+    base: base,
+    add,
+    submit,
+    close,
+  },
+});

package/src/theme/components/Checkbox.tsx

@@ -0,0 +1,24 @@
+import { checkboxAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(checkboxAnatomy.keys)
+
+const coinDexTheme = definePartsStyle({
+  control: {
+    boxSize: '12px',
+    border: '1px solid',
+    '& svg': {
+      w: '10px',
+    },
+  },
+  label: {
+    fontSize: '12px',
+    ml: '4px',
+  },
+})
+
+export const checkboxTheme = defineMultiStyleConfig({
+  variants: {
+    coinDex: coinDexTheme,
+  },
+})

package/src/theme/components/Drawer.ts

@@ -0,0 +1,60 @@
+import { drawerAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(drawerAnatomy.keys)
+const coinDex = definePartsStyle({
+  overlay: {
+    opacity: '0.7 !important',
+    bg: '#030407',
+  },
+  dialog: {
+    bg: 'a4',
+    borderRadius: '12px 12px 0 0',
+  },
+  header: {
+    borderBottom: 'none',
+    p: '16px',
+    textAlign: 'center',
+    fontSize: '16px',
+    lineHeight: 1,
+    fontWeight: 500,
+  },
+  body: {
+    p: '15px 16px 25px',
+  },
+  footer: {
+    p: '0 16px 16px',
+  },
+})
+
+const base = definePartsStyle({
+  overlay: {
+    opacity: '0.8 !important',
+    bg: '#000',
+  },
+  dialog: {
+    bg: '#0E0E0E',
+    borderRadius: '12px 12px 0 0',
+  },
+  header: {
+    borderBottom: 'none',
+    p: '16px',
+    textAlign: 'center',
+    fontSize: '16px',
+    lineHeight: 1,
+    fontWeight: 600,
+  },
+  body: {
+    p: '15px 16px 25px',
+  },
+  footer: {
+    p: '0 16px 16px',
+  },
+})
+
+export const drawerTheme = defineMultiStyleConfig({
+  variants: {
+    coinDex,
+    base,
+  },
+})