@matchain/matchid-sdk-react 0.1.53-alpha.9 → 0.1.55-alpha.0

package/dist/chunk-X5HGL3ZX.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ui/index.ts","../src/ui/Button/index.tsx","../src/ui/Overlay/index.tsx","../src/ui/Drawer/index.tsx","../src/ui/Field/index.tsx","../src/ui/HashPanel/index.tsx","../src/hooks/useLayout.tsx","../src/ui/Modal/index.tsx","../src/ui/ModalDrawer/index.tsx","../src/hooks/useHash.ts","../src/utils/matchlog.ts","../src/ui/Input/index.tsx","../src/ui/Popover/index.tsx","../src/ui/Switch/index.tsx","../src/ui/AlphaAvatar/index.tsx","../src/ui/Radio/index.tsx","../src/ui/Skeleton/index.tsx","../src/ui/Tabs/index.tsx"],"sourcesContent":["export {default as Button} from './Button';\nexport {default as Drawer} from './Drawer';\nexport {default as Field} from './Field';\nexport {default as HashPanel} from './HashPanel';\nexport {default as Input} from './Input';\nexport {default as Modal, ModalWithHeader} from './Modal';\nexport {default as ModalDrawer} from './ModalDrawer';\nexport {default as Overlay} from './Overlay';\nexport {default as Popover} from './Popover';\nexport {default as Switch} from './Switch';\nexport {default as AlphaAvatar} from './AlphaAvatar';\nexport {default as Radio} from './Radio';\nexport {default as Skeleton} from \"./Skeleton\"\nexport {default as Tabs} from \"./Tabs\"","import {LoadingIcon} from \"assets/icon\";\nimport {ButtonProps} from \"../../types/types\";\n\nexport default function Button({\n                                   size = \"df\",\n                                   disabled = false,\n                                   loading = false,\n                                   children,\n                                   onClick,\n                                   highlight = false,\n                                   block = false,\n                                   type = \"button\",\n                                   rounded = true,\n                                   className = '',\n                                   style = {}\n                               }: ButtonProps) {\n\n    const onAction = () => {\n        if (!disabled && !loading) {\n            onClick && onClick()\n        }\n    }\n    return <button\n        type={type}\n        className={`${className} matchid-btn ${'matchid-btn-' + size} ${highlight ? \"matchid-btn-highlight\" : ''} ${loading ? \"matchid-btn-loading\" : ''}  ${block ? \"matchid-btn-block\" : ''}  ${rounded ? \"matchid-btn-rounded\" : ''}`}\n        disabled={disabled || loading}\n        style={{\n            ...style\n        }}\n        onClick={onAction}\n    >\n        {\n            loading ?\n                <LoadingIcon className=\"matchid-btn-loading-icon\" color=\"var(--matchid-btn-loading-color)\"/> :\n                children\n        }\n    </button>\n}","import React, {PropsWithChildren, useEffect} from \"react\";\n\nexport default function Overlay({\n                                    isOpen = false,\n                                    children,\n                                    zIndex = 100,\n                                }: {\n    isOpen?: boolean\n    zIndex?: number\n} & PropsWithChildren) {\n    useEffect(() => {\n        if (isOpen) {\n            document.body.style.overflow = \"hidden\";\n        } else {\n            document.body.style.overflow = \"\";\n        }\n\n        return () => {\n            document.body.style.overflow = \"\";\n        };\n    }, [isOpen]);\n    return isOpen ? <div\n        className=\"matchid-overlay\"\n        style={{\n            zIndex\n        }}\n    >\n        {children}\n    </div> : <></>\n}","import React, {PropsWithChildren} from \"react\";\nimport Overlay from \"../Overlay\";\nimport {CloseRoundIcon} from \"assets/icon\";\nimport {DrawerProps} from \"../../types\";\nimport ArrowLeftIcon from \"../../assets/icon/ArrowLeftIcon\";\n\nexport default function Drawer({\n                                   children,\n                                   showClose = true,\n                                   onClose,\n                                   isOpen = false,\n                                   title,\n                                   zIndex = 100,\n                                    onBack\n                               }: DrawerProps) {\n\n    if (!isOpen) {\n        return <></>\n    }\n\n\n    return <Overlay isOpen={isOpen} zIndex={zIndex}>\n        <div className={\"matchid-drawer\"}>\n            <div className={`matchid-drawer-header matchid-flex`}>\n                <div className={`matchid-drawer-header-content matchid-flex`}>\n                    {onBack && <ArrowLeftIcon height={25} width={24} className=\"matchid-drawer-header-back\" onClick={onBack}/>}\n                    {title}\n                </div>\n                {\n                    showClose && <CloseRoundIcon className={\"matchid-drawer-header-close\"} onClick={onClose}/>\n                }\n            </div>\n\n            {children}\n        </div>\n    </Overlay>\n}","import {PropsWithChildren, ReactNode} from \"react\";\n\nexport default function Field({\n    label,\n    children,\n    error,\n    required,\n    className=''\n                              }:{\n    label: ReactNode,\n    error?: ReactNode,\n    required?: boolean\n    className?: string\n\n}&PropsWithChildren){\n    return <div className={`matchid-field-box ${className}`}>\n        <div className=\"matchid-field-label\">{required&&<span className={\"matchid-field-required\"}>*</span>}{label}</div>\n        {children}\n        {error && <div className=\"matchid-field-error\">{error}</div>}\n    </div>\n\n}","import {\n    http,\n    Hash,\n    createPublicClient, Chain,\n} from \"viem\";\nimport {useEffect, useState} from \"react\";\nimport {useQuery} from \"@tanstack/react-query\";\nimport ModalDrawer from \"../ModalDrawer\";\nimport Button from \"../Button\";\nimport ConfirmImg from \"assets/img/confirm.gif\"\nimport PendingImg from \"assets/img/pending.gif\"\nimport SuccessImg from \"assets/img/success.gif\"\nimport FailImg from \"assets/img/fail.gif\"\nimport matchlog from \"../../utils/matchlog\";\nimport useHash from \"../../hooks/useHash\";\n\ntype statusType = 'pending' | 'success' | 'fail' | 'confirm'\ntype HashPanelProps = {\n    hash?: Hash | null,\n    chain?: Chain | null,\n    isOpen: boolean,\n    onClose: () => void\n    zIndex?: number\n}\n\nfunction HashPanel({\n                       hash,\n                       chain,\n                       isOpen,\n                       onClose,\n                       zIndex,\n                   }: HashPanelProps) {\n    const [status, setStatus] = useState<statusType>('confirm')\n\n    const statusMaps: Record<statusType, {\n        icon: string;\n        text: string;\n        color: string\n    }> = {\n        'confirm': {\n            icon: ConfirmImg,\n            text: 'Confirming...',\n            color: '#FC802D'\n        },\n        'pending': {\n            icon: PendingImg,\n            text: 'Pending...',\n            color: '#FC802D'\n        },\n        'success': {\n            icon: SuccessImg,\n            text: 'Successful!',\n            color: '#2CBF68'\n        },\n        'fail': {\n            icon: FailImg,\n            text: 'Failed!',\n            color: '#F14141'\n        }\n    }\n\n    const statusValue = statusMaps[status]\n    const [shouldRefetch, setShouldRefetch] = useState(true)\n\n    useEffect(() => {\n        if (hash) {\n            setShouldRefetch(true)\n            setStatus('pending')\n        } else {\n            setStatus('confirm')\n        }\n    }, [hash])\n    const hashQuery = useHash({\n        hash,\n        chain,\n        refetchInterval: shouldRefetch ? 3000 : false\n    })\n    useEffect(() => {\n        if(hashQuery.data==1||hashQuery.data==-1){\n            setShouldRefetch(false)\n        }\n        if(hashQuery.data==1){\n            setStatus('success')\n        }else if(hashQuery.data==-1){\n            setStatus('fail')\n        }else if(hashQuery.data==0){\n            setStatus('pending')\n        }\n    }, [hashQuery.data]);\n\n    const link = chain ? `${chain?.blockExplorers?.default.url}/tx/${hash}` : '';\n\n    return <ModalDrawer isOpen={isOpen}\n                        showClose\n                        onClose={onClose}\n                        zIndex={zIndex}\n                        title={\n                            <div className={\"matchid-hashpanel-header\"}\n                                 style={{\n                                     color: statusValue.color\n                                 }}>{statusValue.text}</div>\n                        }\n    >\n        <div className=\"matchid-hashpanel-box\">\n            <div className=\"matchid-hashpanel-content\">\n                <div className={`matchid-hashpanel-status`} style={{\n                    color: statusValue.color\n                }}>{statusValue.text}</div>\n\n                <img src={statusValue.icon} alt={statusValue.text} className={`matchid-hashpanel-img`}/>\n\n                {hash && <div className=\"matchid-hashpanel-hash\">\n                    Hash:<a href={link} target=\"_blank\">{hash}</a>\n                </div>}\n            </div>\n            <Button onClick={onClose} size=\"lg\" block>Back</Button>\n        </div>\n    </ModalDrawer>\n}\n\nexport default function (props: HashPanelProps) {\n    return props.isOpen && <HashPanel {...props}/>\n\n}","import { useState ,useEffect} from \"react\";\n\nexport function useDownMd(): boolean {\n    const [isBelowMd, setIsBelowMd] = useState(window.matchMedia('(max-width: 767px)').matches);\n\n    useEffect(() => {\n        const handleResize = () => {\n            setIsBelowMd(window.matchMedia('(max-width: 767px)').matches);\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    return isBelowMd;\n}","import React, {useEffect} from \"react\";\nimport {ModalProps, ModalWithHeaderProps} from \"../../types\";\nimport ArrowLeftIcon from \"../../assets/icon/ArrowLeftIcon\";\nimport {CloseRoundIcon} from \"../../assets/icon\";\nimport {useDownMd} from \"../../hooks/useLayout\";\nimport Overlay from \"../Overlay\";\n\nexport default function Modal({\n                                  children,\n                                  isOpen,\n                                  width = 480,\n                                  zIndex = 100,\n                                  className = ''\n                              }: ModalProps) {\n\n    return <Overlay isOpen={isOpen} zIndex={zIndex}>\n        <div className={`matchid-modal ${className}`} style={{\n            width\n        }}>\n            <div className=\"matchid-modal-mobile-header\"></div>\n            {children}\n        </div>\n    </Overlay>\n}\n\nexport function ModalWithHeader({\n                                    children,\n                                    onBack,\n                                    onClose,\n                                    title,\n                                    showBorder = true,\n                                    showClose = true,\n                                    ...props\n\n                                }: ModalWithHeaderProps) {\n    const isDownMd = useDownMd()\n    return <Modal {...props}>\n        <div className={`matchid-modal-header ${showBorder ? 'matchid-modal-header-border' : ''}`}>\n            <div className=\"matchid-modal-header-content\">\n                {\n                    onBack &&\n                    <ArrowLeftIcon height={isDownMd ? 20 : 25} width={isDownMd ? 20 : 24} className=\"matchid-modal-header-back\" onClick={onBack}/>\n                }\n                <span className=\"matchid-modal-header-title\">{title}</span>\n            </div>\n            {onClose &&\n                <CloseRoundIcon size={isDownMd ? 24 : 30} className=\"matchid-modal-header-close\" onClick={onClose}/>}\n        </div>\n        {children}\n    </Modal>\n\n}","import {useDownMd} from \"hooks/useLayout\";\nimport {ModalWithHeader} from \"../Modal\";\nimport Drawer from \"../Drawer\";\nimport {WalletPanelProps} from \"../../types\";\n\nexport default function ModalDrawer({\n                                        title,\n                                        drawerTitleVisible=true,\n                                        ...props}:WalletPanelProps){\n\n    const isDownMd = useDownMd()\n    if(isDownMd){\n        return <ModalWithHeader {...props} title={title}/>\n    }\n    return <Drawer {...props} title={drawerTitleVisible ? title : null}/>\n}","import {useQuery} from \"@tanstack/react-query\";\nimport {Chain, createPublicClient, http} from \"viem\";\nimport matchlog from \"../utils/matchlog\";\n\nexport default function useHash({\n    hash,\n    chain,\n    refetchInterval,\n    enabled=true\n                                }:{\n    hash?: `0x${string}` | null,\n    chain?: Chain | null,\n    refetchInterval?:false|number\n    enabled?:boolean\n}){\n    return useQuery(\n        {\n            queryKey: ['txhash', hash, chain],\n            queryFn: async () => {\n                if (!chain || !hash) return false\n                const publicClient = createPublicClient({\n                    chain,\n                    transport: http(),\n                });\n                try {\n                    const receipt = await publicClient.getTransactionReceipt({hash});\n\n                    if (!receipt) {\n                        return 0\n                    }\n                    matchlog.log('getTransactionReceipt', receipt)\n                    if (receipt.status === 'success') {\n                        return 1\n                    }\n                    return -1\n\n                } catch (error) {\n                    console.error('getTransactionReceiptError', error)\n                }\n                return -99\n            },\n            enabled: !!chain && !!hash && enabled,\n            refetchInterval,\n            // refetchIntervalInBackground: false\n        }\n    );\n}","// src/utils/logger.ts\nconst matchDevExists = () => localStorage.getItem('matchid-sdk-react-debug') !== null;\n\nconst handler = {\n    get(target: any, prop: string) {\n        if (matchDevExists() && typeof target[prop] === 'function') {\n            return target[prop].bind(console);\n        }\n        return () => {};\n    }\n};\n\nconst matchlog = new Proxy(console, handler);\n\nexport default matchlog;","import {InputProps} from \"types/types\";\nimport {DeleteRoundIcon, CloseEyeIcon, OpenEyeIcon} from \"assets/icon\";\nimport {useState} from \"react\";\nimport {useDownMd} from \"../../hooks/useLayout\";\n\nexport default function Input({\n                                  onChange,\n                                  type,\n                                  after,\n                                  className = '',\n                                  ...props\n                              }: InputProps) {\n    const [inputType, setInputType] = useState(type)\n    const isDownMd = useDownMd()\n    return <div\n        className={`matchid-input-box ${props.value && props.value.length > 0 ? 'matchid-input-has-content' : ''} ${className}`}>\n        <input type={inputType} onChange={onChange} {...props} className=\"matchid-input-field\"/>\n        {\n            props.value && props.value.length > 0\n            && <div className=\"matchid-input-delete-icon\" onClick={(e) => {\n                if (onChange) {\n                    onChange({target: {value: ''}});\n                }\n            }}>\n                <DeleteRoundIcon height={isDownMd ? 16 : 21} width={isDownMd ? 16 : 20}\n                                 color=\"var(--matchid-input-delete-icon-color)\"/>\n            </div>\n        }\n        {\n            type === 'password' && <div className=\"matchid-input-eye-icon\" onClick={() => {\n                setInputType(inputType === 'password' ? 'text' : 'password')\n            }}>\n                {\n                    inputType === 'password' ? <CloseEyeIcon size={isDownMd ? 16 : 20}/> :\n                        <OpenEyeIcon size={isDownMd ? 16 : 20}/>\n                }\n            </div>\n        }\n        {\n            after\n        }\n    </div>\n\n}","import {useState} from \"react\";\nimport {PopoverProps} from \"../../types/types\";\n\nexport default function Popover({\n                                    children,\n                                    content,\n                                    position = \"right\",\n                                    type = \"hover\",\n                                    className = \"\",\n                                    gap = '20px'\n                                }: PopoverProps) {\n    const [active, setActive] = useState(false)\n    return children && <div\n        onClick={() => {\n            if (type == 'click') {\n                setActive(!active)\n            }\n        }}\n        className={`matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == 'click' && active ? 'matchid-popover-click-active' : ''}`}>\n        {children}\n        <div style={{\n            paddingTop: gap\n        }} className={`matchid-popover-area`}>\n            <div className={`matchid-popover-content`}>\n                {content}\n            </div>\n        </div>\n    </div>\n\n}","import {UIProps} from \"../../types\";\nimport {LoadingIcon} from \"../../assets/icon\";\n\nexport default function Switch({\n    size=\"default\",\n    checked=false,\n    loading=false,\n    onChange,\n    className,\n    disabled=false,\n    ...props\n                               }:{\n    size?:\"default\"|\"sm\",\n    checked?:boolean,\n    loading?:boolean,\n    disabled?:boolean,\n    onChange?:(checked:boolean)=>void,\n}&UIProps){\n    const onClick = ()=>{\n        if(!disabled && !loading){\n            onChange && onChange(!checked)\n        }\n    }\n    return <div onClick={onClick} className={`matchid-switch matchid-switch-${size} ${checked ? \"matchid-switch-checked\":\"\"} ${disabled ? \"matchid-switch-disabled\":\"\"} ${loading ? \"matchid-switch-loading\":\"\"}`} {...props}>\n\n        {\n            loading ?\n                <LoadingIcon className=\"matchid-switch-loading-icon\" size={size==\"default\"?24:18} color=\"var(--matchid-swicth-loading-color)\"/> :\n                <div className={\"matchid-switch-ball\"}></div>\n        }\n    </div>\n}","import { useMemo} from \"react\";\nimport {UIProps} from \"../../types\";\n\nexport default function AlphaAvatar({\n                                        name,\n                                        size = \"default\", className = '',style}: {\n    name: string,\n    size?: number|\"sm\"|\"default\"|\"lg\",\n}&UIProps) {\n\n    const avatar = useMemo(()=>{\n        if (name) {\n            const char = name[0].toUpperCase()\n            if (char.match(/[a-zA-Z0-9]/)) {\n                return char\n            }\n        }\n        return ''\n    },[name])\n\n    const numberSize = typeof size === 'number' ? size : size === 'sm' ? 24 : size === 'default' ? 40 : 64\n    return <div className={`matchid-alpha-avatar ${className}`} style={{\n        width: numberSize,\n        height: numberSize,\n        fontSize: Math.ceil(numberSize / 2),\n        ...style\n    }}>\n        {avatar}\n    </div>\n}","import {CSSProperties} from \"react\";\n\nexport default function Radio({\n                                  checked = false,\n                                  onChange,\n                                  size = 24,\n                                  color = \"#FC802D\",\n                                  className = \"\",\n                                  style = {}\n                              }: {\n    checked?: boolean,\n    onChange?: () => void\n    size?: number,\n    color?: string,\n    className?: string,\n    style?: CSSProperties\n}) {\n    return <div onClick={onChange} className={`matchid-radio ${className} ${checked ? 'matchid-radio-checked' :''}`} style={{\n        width: size,\n        height: size,\n        ...style,\n        // @ts-ignore\n        '--matchid-radio-checked': color\n    }}>\n        {checked && <div className={`matchid-radio-content`} style={{\n            width:Math.floor(size*0.7),\n            height:Math.floor(size*0.7),\n        }}></div>}\n    </div>\n}","import React from \"react\";\n\ninterface SkeletonProps {\n    style?: React.CSSProperties;\n    className?: string;\n    width?: string | number;\n    height?: string | number;\n    radius?: string | number;\n    loading?: boolean;\n    children?: React.ReactNode;\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n                                               style={},\n                                               className=\"\",\n                                               width = 40,\n                                               height = 40,\n                                               radius = 5,\n                                               loading = true,\n                                               children,\n                                           }) => {\n    if (!loading) {\n        return <>{children}</>;\n    }\n\n    const skeletonStyle: React.CSSProperties = {\n        width,\n        height,\n        borderRadius: radius,\n        ...style,\n    };\n\n    return (\n        <div\n            className={\"matchid-skeleton \"+className}\n            style={skeletonStyle}\n        ></div>\n    );\n};\n\nexport default Skeleton;","type TabsProps = {\n    tabs: string[]\n    activeTab: number\n    setActiveTab: (tab: number) => void\n}\nexport default function Tabs(props:TabsProps){\n\n    return <div className={`matchid-tabs`}>\n        {props.tabs.map((tab, index) => {\n            return <div key={index} onClick={() => props.setActiveTab(index)} className={`matchid-tab ${props.activeTab === index ? \"matchid-tab-active\" : \"\"}`}>\n                {tab}\n            </div>\n        })}\n\n    </div>\n}"],"mappings":"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","names":["jsx","Fragment","jsx","jsx","jsxs","useEffect","useState","useEffect","jsx","jsxs","jsx","jsx","jsxs","useState","useEffect","useState","jsx","jsxs","useState","useState","jsx","jsxs","jsx","jsx","jsx","Fragment","jsx","jsx"]}

package/example/src/pages/Contact/index.tsx

@@ -1,90 +0,0 @@
-import {ContactList,ContactCard} from "@matchain/matchid-sdk-react/components"
-import {Field, Input, Button, Radio} from "@matchain/matchid-sdk-react/ui"
-import {Api,Icon} from "@matchain/matchid-sdk-react"
-import React, {useCallback, useEffect, useState} from "react";
-import {debounce} from "lodash";
-import {useToast} from "@matchain/matchid-sdk-react/hooks";
-
-const {contact} = Api
-
-function ContactSearch() {
-    const [value, setValue] = useState("")
-    const [searchValue, setSearchValue] = useState("")
-    const [loading,setLoading] = useState(false)
-    const [searching,setSearching] = useState(false)
-    const toast = useToast()
-    const debouncedSetKeyword = useCallback(
-        debounce((newKeyword) => {
-            setSearchValue(newKeyword);
-        }, 1500),
-        []
-    );
-
-    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(e.target.value);
-        debouncedSetKeyword(e.target.value);
-        setSearching(true)
-    }
-
-    const searchQuery = contact.useContactSearch(searchValue)
-
-    useEffect(() => {
-        if(searchQuery.isFetched){
-            setSearching(false)
-        }
-    }, [searchQuery.isFetched]);
-
-
-    const onAdd = async()=>{
-        if(!searchQuery.data){
-            return
-        }
-        setLoading(true)
-        try{
-            await contact.addContact(searchQuery.data)
-            toast.success("Add Success")
-        }catch(error:any){
-            toast.success(error.message)
-            console.error(error)
-        }finally {
-            setLoading(false)
-        }
-    }
-    return <div className={`flex gap-4 flex-col`}>
-        <Field label={"Search"}>
-            <Input placeholder={"Input address or MatchID"} value={value} onChange={onChange}/>
-        </Field>
-        {(searchQuery.data || searching )&& <div className={"break-all"}>
-            <ContactCard loading={searching} data={!searching ?(searchQuery.data||undefined) : undefined}
-                action={()=>{
-                    return searchQuery.data && <Button size="sm" onClick={onAdd} disabled={!searchQuery.data} loading={loading}>Add</Button>
-                }}
-            />
-        </div>}
-    </div>
-}
-
-export default function Contact() {
-    const [contactType, setContactType] = useState<"Friend" | "Requests">("Friend")
-
-    return <div className={`grid md:grid-cols-2 gap-4`}>
-        <div>
-            <Field label={"Type"}>
-                <div className={`flex gap-4`}>
-                    <div onClick={() => setContactType("Friend")}
-                         className={`flex gap-2 items-center cursor-pointer`}>
-                        <Radio checked={contactType == "Friend"}/>
-                        Friend
-                    </div>
-                    <div onClick={() => setContactType("Requests")}
-                         className={`flex gap-2 items-center cursor-pointer`}>
-                        <Radio checked={contactType == "Requests"}/>
-                        Requests
-                    </div>
-                </div>
-            </Field>
-            <ContactList type={contactType}/>
-        </div>
-        <ContactSearch/>
-    </div>
-}