@particle-network/connectkit 2.1.3 → 3.0.0-alpha.0

package/dist/captcha-ZHNUB76K.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/pages/captcha/index.tsx", "../src/components/codeInput/index.tsx", "../src/components/codeInput/styles.ts", "../src/components/reSend/index.tsx", "../src/components/loadingSpinner/styles.ts", "../src/components/loadingSpinner/index.tsx", "../src/components/reSend/styles.ts", "../src/pages/captcha/styles.ts"],
+  "sourcesContent": ["import { isEVMChain } from '@particle-network/connector-core';\nimport { useRef, useState } from 'react';\nimport { RoutePath } from '..';\nimport EmailIcon from '../../assets/icons/EmailIcon';\nimport PhoneIcon from '../../assets/icons/PhoneIcon';\nimport CircleSpinner from '../../components/circleSpinner';\nimport CodeInput from '../../components/codeInput';\nimport { PageContent } from '../../components/modal/styles';\nimport ReSend from '../../components/reSend';\nimport { useContext } from '../../context';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport useConnect from '../../hooks/useConnect';\nimport { useConnector } from '../../hooks/useConnectors';\nimport useLocales from '../../hooks/useLocales';\nimport { useModalError } from '../../hooks/useModalError';\nimport { useRouter } from '../../hooks/useRouter';\nimport { useWalletConnector } from '../../hooks/useWalletConnectors';\nimport { ConnectorType } from '../../types';\nimport { EmailCaptchaTip1, EmailCaptchaWrapper, EmailIconDiv, EmailInfo, EmailMainIcon, EmailText } from './styles';\n\ntype Params =\n  | {\n      code: string;\n      phone: string;\n    }\n  | {\n      code: string;\n      email: string;\n    };\n\nconst Page = ({ value, type }: { value: string; type: ConnectorType }) => {\n  const locales = useLocales();\n  const { config } = useContext();\n  const { error, showError } = useModalError();\n  const connector = useConnector(isEVMChain(config.chains[0]) ? 'particleEVM' : 'particleSolana');\n  const { connectAsync } = useConnect();\n  const { appearance } = useAppearance();\n\n  const [loading, setLoading] = useState(false);\n\n  const emailCaptchaWrapperRef = useRef<HTMLDivElement>(null);\n\n  const walletConnector = useWalletConnector('particleAuth');\n\n  const { navigate } = useRouter();\n\n  const loginHandler = async (params: Params) => {\n    await connectAsync({ connector, authParams: params });\n  };\n\n  const onCodeInputChange = async (code) => {\n    try {\n      if (loading) return;\n\n      if (code.length === 6) {\n        if (/![^0-9]/.test(code)) {\n          throw new Error(locales.incorrectCode);\n        } else {\n          setLoading(true);\n          // \u8BF7\u6C42\u63A5\u53E3\u5F00\u59CB\u767B\u5F55\n          const params = {\n            code,\n            ...(type === ConnectorType.Phone ? { phone: value } : { email: value }),\n          };\n          if (!params.code) {\n            throw new Error('Please enter the verification code');\n            // @ts-ignore\n          } else if (!params.phone && !params.email) {\n            throw new Error('Please enter the phone number or email');\n          }\n          // \u9A8C\u8BC1\u7801\u767B\u5F55\n          await loginHandler(params);\n        }\n      } else {\n        showError('');\n      }\n    } catch (error: any) {\n      let message = error?.extra?.[0] || error.message || (typeof error === 'string' ? error : locales.networkError);\n      if (message.includes('Invalid code')) {\n        message = locales.invalidCode;\n      } else if (message.includes('Code is deleted')) {\n        message = locales.codeDeleted;\n      } else if (message.includes('Network Error')) {\n        message = locales.networkError;\n      }\n      if (error.code === 4011) {\n        navigate(RoutePath.Signup);\n        setTimeout(() => showError(message));\n      } else {\n        showError(message);\n      }\n    }\n    setLoading(false);\n  };\n\n  const reSendCode = async () => {\n    let turnstileToken = '';\n    if (type === ConnectorType.Phone) {\n      turnstileToken = await walletConnector?.auth.getCloudflareTurnstileResponse({\n        // @ts-ignore\n        theme: appearance.mode || 'lgiht',\n        language: appearance.language || 'en',\n        getContainer: emailCaptchaWrapperRef.current as HTMLElement,\n      });\n    }\n    const params =\n      type === ConnectorType.Phone\n        ? {\n            phone: value,\n            // eslint-disable-next-line camelcase\n            cf_turnstile_response: turnstileToken,\n          }\n        : { email: value };\n\n    await walletConnector?.auth.getConnectCaptcha(params);\n  };\n\n  return (\n    <PageContent\n      style={{\n        padding: '12px 2px 8px',\n      }}\n     data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:119:5:PageContent\" >\n      <EmailCaptchaWrapper ref={emailCaptchaWrapperRef} data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:124:7:EmailCaptchaWrapper\" >\n        <EmailMainIcon data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:125:9:EmailMainIcon\">\n          {/* <EmailIconDiv>{type === 'phone' ? <PhoneIcon /> : <EmailIcon />}</EmailIconDiv> */}\n          {/* <Spin>\n            <LoadingIcon />\n          </Spin> */}\n          <CircleSpinner\n            width={70}\n            height={70}\n            inset={2}\n            logo={<EmailIconDiv data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:134:19:EmailIconDiv\">{type === 'phone' ? <PhoneIcon  data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:134:53:PhoneIcon\"/> : <EmailIcon  data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:134:69:EmailIcon\"/>}</EmailIconDiv>}\n           data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:130:11:CircleSpinner\" />\n        </EmailMainIcon>\n        <EmailInfo data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:137:9:EmailInfo\">\n          <EmailCaptchaTip1 data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:138:11:EmailCaptchaTip1\">{locales.verificationCode}</EmailCaptchaTip1>\n          <EmailText data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:139:11:EmailText\">{value}</EmailText>\n        </EmailInfo>\n        <CodeInput\n          allowedCharacters='numeric'\n          length={6}\n          placeholder={' '}\n          onChange={onCodeInputChange}\n          error={error || ''}\n         data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:141:9:CodeInput\" />\n        <ReSend reSendCode={reSendCode}  data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/pages/captcha/index.tsx:148:9:ReSend\" />\n      </EmailCaptchaWrapper>\n    </PageContent>\n  );\n};\n\nexport default Page;\n", "import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { CodeInputContainer, CodeInputMask, FocusBorder, StyleCodeInputItem } from './styles';\n\nconst allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;\n\nexport type AuthCodeProps = {\n  allowedCharacters?: (typeof allowedCharactersValues)[number];\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  isPassword?: boolean;\n  length?: number;\n  placeholder?: string;\n  error: string;\n  onChange: (res: string) => void;\n  code?: string;\n};\n\ntype InputMode = 'text' | 'numeric';\n\ntype InputType = 'text' | 'tel' | 'password';\n\ntype InputProps = {\n  type: InputType;\n  inputMode: InputMode;\n  pattern: string;\n  min?: string;\n  max?: string;\n};\n\nexport type AuthCodeRef = {\n  focus: () => void;\n  clear: () => void;\n};\n\nconst propsMap: { [key: string]: InputProps } = {\n  alpha: {\n    type: 'text',\n    inputMode: 'text',\n    pattern: '[a-zA-Z]{1}',\n  },\n\n  alphanumeric: {\n    type: 'text',\n    inputMode: 'text',\n    pattern: '[a-zA-Z0-9]{1}',\n  },\n\n  numeric: {\n    type: 'tel',\n    inputMode: 'numeric',\n    pattern: '[0-9]{1}',\n    min: '0',\n    max: '9',\n  },\n};\n\nconst CodeInput = forwardRef<AuthCodeRef, AuthCodeProps>(\n  (\n    {\n      allowedCharacters = 'alphanumeric',\n      ariaLabel,\n      autoFocus = true,\n      disabled,\n      isPassword = false,\n      length = 6,\n      placeholder,\n      onChange,\n      code = '',\n      error = '',\n    },\n    ref\n  ) => {\n    if (isNaN(length) || length < 1) {\n      throw new Error('Length should be a number and greater than 0');\n    }\n\n    if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {\n      throw new Error('Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric');\n    }\n\n    const [focusIndex, setFocusIndex] = React.useState<number>(0);\n    const [showFocusBorder, setShowFocusBorder] = React.useState<boolean>(false);\n\n    const inputsRef = useRef<Array<HTMLInputElement>>([]);\n    const inputProps = propsMap[allowedCharacters] as InputProps;\n    const codeInputContainerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        if (inputsRef.current) {\n          inputsRef.current[0]?.focus();\n        }\n      },\n      clear: () => {\n        if (inputsRef.current) {\n          for (let i = 0; i < inputsRef.current.length; i++) {\n            if (inputsRef.current?.[i]) {\n              (inputsRef.current[i] as HTMLInputElement).value = '';\n            }\n          }\n          (inputsRef.current[0] as HTMLInputElement).focus();\n        }\n        sendResult();\n      },\n    }));\n\n    // useEffect(() => {\n    //   if (autoFocus) {\n    //     (inputsRef.current[0] as HTMLInputElement).focus();\n    //   }\n    // }, []);\n\n    useEffect(() => {\n      if (code) {\n        for (let i = 0; i < inputsRef.current.length; i++) {\n          (inputsRef.current[i] as HTMLInputElement).value = '';\n        }\n        for (let i = 0; i < code.length; i++) {\n          if (inputsRef.current?.[i]) {\n            (inputsRef.current[i] as HTMLInputElement).value = code[i] || '';\n          }\n        }\n        sendResult();\n      }\n    }, [code]);\n\n    let oldValue = inputsRef.current.map((input) => input.value).join('') || '';\n\n    const sendResult = () => {\n      const res = inputsRef.current.map((input) => input.value).join('');\n      if (oldValue !== res) {\n        console.log('sendResult', res);\n\n        if (res.length === 6) {\n          setTimeout(() => {\n            inputsRef.current.forEach((input) => {\n              input.blur();\n            });\n          }, 400);\n        }\n\n        onChange && onChange(res);\n        oldValue = res;\n      }\n    };\n\n    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const {\n        target: { value, nextElementSibling },\n      } = e;\n\n      if (value.length == 1) {\n        if (value.match(inputProps.pattern)) {\n          if (nextElementSibling !== null) {\n            (nextElementSibling as HTMLInputElement).focus();\n          }\n        } else {\n          e.target.value = '';\n        }\n      } else if (value.length > 1) {\n        const pastedValue = value;\n        let currentInput: number = Number(e.target.getAttribute('data-index')) || 0;\n        for (let i = 0; i < pastedValue.length; i++) {\n          const pastedCharacter = pastedValue.charAt(i);\n          if (pastedCharacter.match(inputProps.pattern) && inputsRef.current?.[currentInput]) {\n            (inputsRef.current[currentInput] as HTMLInputElement).value = pastedCharacter;\n            if ((inputsRef.current[currentInput] as HTMLInputElement).nextElementSibling !== null) {\n              ((inputsRef.current[currentInput] as HTMLInputElement).nextElementSibling as HTMLInputElement).focus();\n              currentInput++;\n            }\n          }\n        }\n      }\n      setTimeout(() => {\n        sendResult();\n      });\n    };\n\n    const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { key } = e;\n      const target = e.target as HTMLInputElement;\n      if (key === 'Backspace') {\n        if (target.value === '') {\n          if (target.previousElementSibling !== null) {\n            const t = target.previousElementSibling as HTMLInputElement;\n            t.value = '';\n            t.focus();\n            e.preventDefault();\n          }\n        } else {\n          target.value = '';\n        }\n        setTimeout(() => {\n          sendResult();\n        });\n      }\n    };\n\n    const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    };\n\n    const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n      let pastedValue = e.clipboardData.getData('Text') ?? '';\n      pastedValue = pastedValue.replace(/\\s/g, '').substring(0, 6);\n\n      let currentInputIndex = focusIndex;\n\n      for (let i = 0; i < pastedValue.length; i++) {\n        const pastedCharacter = pastedValue.charAt(i);\n        const currentInput = inputsRef.current[currentInputIndex] as HTMLInputElement;\n        if (!currentInput) {\n          break;\n        }\n        const currentValue = currentInput?.value;\n        if (pastedCharacter.match(inputProps.pattern)) {\n          if (!currentValue) {\n            (inputsRef.current[currentInputIndex] as HTMLInputElement).value = pastedCharacter;\n            if ((inputsRef.current[currentInputIndex] as HTMLInputElement).nextElementSibling !== null) {\n              (\n                (inputsRef.current[currentInputIndex] as HTMLInputElement).nextElementSibling as HTMLInputElement\n              ).focus();\n              currentInputIndex++;\n            }\n          }\n        }\n      }\n      sendResult();\n\n      e.preventDefault();\n    };\n\n    return (\n      <CodeInputContainer ref={codeInputContainerRef} data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/codeInput/index.tsx:235:7:CodeInputContainer\" >\n        <FocusBorder $focusIndex={focusIndex} $showFocusBorder={showFocusBorder}  data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/codeInput/index.tsx:236:9:FocusBorder\" />\n        {new Array(6).fill(0).map((_, i) => {\n          return (\n            <StyleCodeInputItem\n              key={i}\n              data-index={i}\n              onChange={handleOnChange}\n              onKeyDown={handleOnKeyDown}\n              onFocus={(e) => {\n                setShowFocusBorder(true);\n                setFocusIndex(i);\n                handleOnFocus(e);\n              }}\n              autoFocus={autoFocus && i === 0}\n              onBlur={() => {\n                setShowFocusBorder(false);\n              }}\n              onPaste={handleOnPaste}\n              {...inputProps}\n              type={isPassword ? 'password' : inputProps.type}\n              ref={(el: HTMLInputElement) => {\n                inputsRef.current[i] = el;\n              }}\n              autoComplete={i === 0 ? 'one-time-code' : 'off'}\n              aria-label={ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`}\n              disabled={disabled}\n              placeholder={placeholder}\n              error={error}\n             data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/codeInput/index.tsx:239:13:StyleCodeInputItem\" />\n          );\n        })}\n        <CodeInputMask\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            for (let i = inputsRef.current.length - 1; i >= 0; i--) {\n              if (\n                (i > 0 &&\n                  !(inputsRef.current[i] as HTMLInputElement).value &&\n                  (inputsRef.current[i - 1] as HTMLInputElement).value) ||\n                (i === 0 && !(inputsRef.current[i] as HTMLInputElement).value) ||\n                (i == inputsRef.current.length - 1 && (inputsRef.current[i] as HTMLInputElement).value)\n              ) {\n                (inputsRef.current[i] as HTMLInputElement).focus();\n                (inputsRef.current[i] as HTMLInputElement).setSelectionRange(\n                  (inputsRef.current[i] as HTMLInputElement).value.length,\n                  (inputsRef.current[i] as HTMLInputElement).value.length\n                );\n                break;\n              }\n            }\n          }}\n         data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/codeInput/index.tsx:267:9:CodeInputMask\" />\n      </CodeInputContainer>\n    );\n  }\n);\n\nexport default CodeInput;\n", "import { styled } from 'styled-components';\n\ninterface StyledInputProps {\n  error?: string;\n}\n\nexport const CodeInputContainer = styled.div`\n  width: 100%;\n  max-width: 340px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  display: inline-block;\n  margin: auto;\n  width: auto;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  input:-webkit-autofill,\n  input:-webkit-autofill:hover,\n  input:-webkit-autofill:focus,\n  input:-webkit-autofill:active {\n    box-shadow: 0 0 0 60px var(--pcm-body-background) inset !important;\n    -webkit-text-fill-color: var(--pcm-body-color) !important;\n  }\n`;\n\nexport const CodeInputMask = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  cursor: pointer;\n`;\n\nexport const StyleCodeInputItem = styled.input<StyledInputProps>`\n  width: 42px;\n  height: 42px;\n  padding: 0;\n  margin-right: 5px;\n  margin-left: 5px;\n  border: transparent;\n  border-radius: var(--pcm-rounded-md);\n  font-size: 20px;\n  text-align: center;\n  text-transform: uppercase;\n  background-clip: padding-box;\n  caret-color: var(--pcm-primary-color);\n  color: ${({ error }) => (error ? 'var(--pcm-error-color)' : 'var(--pcm-body-color)')};\n  background-color: ${({ error }) => (error ? 'var(--pcm-error-background)' : 'var(--pcm-body-background-secondary)')};\n\n  border: none;\n  &:focus,\n  &:active,\n  &:hover,\n  &:visited,\n  &:focus-visible {\n    appearance: none;\n    outline: none !important;\n    border: none !important;\n  }\n\n  &:not(:placeholder-shown) {\n    appearance: none;\n    outline: 0;\n  }\n`;\n\nexport const FocusBorder = styled.div<{ $focusIndex: number; $showFocusBorder: boolean } & StyledInputProps>`\n  position: absolute;\n  top: 0;\n  opacity: ${({ $showFocusBorder }) => ($showFocusBorder ? 1 : 0)};\n  left: ${({ $focusIndex }) => 5 + $focusIndex * 52}px;\n  width: 42px;\n  height: 42px;\n  border: 1px solid var(--pcm-accent-color);\n  border-radius: var(--pcm-rounded-md);\n  transition:\n    left 0.3s ease,\n    opacity 0.2s ease;\n  pointer-events: none;\n  z-index: 2;\n`;\n", "import { useEffect, useRef, useState } from 'react';\nimport useLocales from '../../hooks/useLocales';\nimport { useModalError } from '../../hooks/useModalError';\nimport LoadingSpinner from '../loadingSpinner';\nimport { ReSendCodeDiv, ReSendCodeWrap } from './styles';\n\nenum DownTimeStatus {\n  /**\n   * Not started\n   */\n  NotStarted = 0,\n  /**\n   * In progress\n   */\n  InProgress = 1,\n  /**\n   * End\n   */\n  End = 2,\n  /**\n   * Stop\n   */\n  Stop = 3,\n}\n\nconst DownTime = 60;\n\nconst ReSend = ({ reSendCode }: { reSendCode: () => void }) => {\n  const locales = useLocales();\n\n  const [downTimeStatus, setDownTimeStatus] = useState(DownTimeStatus.NotStarted);\n  const { showError } = useModalError();\n  const [downTime, setDownTime] = useState(DownTime);\n  const [loading, setLoading] = useState(false);\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n\n  const downTimeCount = () => {\n    setDownTime(DownTime);\n    setDownTimeStatus(DownTimeStatus.InProgress);\n    timerRef.current = setInterval(() => {\n      setDownTime((val) => {\n        const newVal = val - 1;\n        if (newVal === 0) {\n          setDownTimeStatus(DownTimeStatus.End);\n          clearInterval(timerRef.current as NodeJS.Timeout);\n        }\n        return newVal;\n      });\n    }, 1000);\n  };\n\n  const reSendCodeHandler = async () => {\n    try {\n      if (loading) return;\n      setLoading(true);\n      if (downTimeStatus === DownTimeStatus.End) {\n        await reSendCode();\n        downTimeCount();\n      }\n    } catch (error: any) {\n      showError(error?.message || '');\n    }\n    setTimeout(() => {\n      setLoading(false);\n    }, 100);\n  };\n\n  useEffect(() => {\n    downTimeCount();\n    return () => {\n      clearInterval(timerRef.current as NodeJS.Timeout);\n    };\n  }, []);\n\n  return (\n    <ReSendCodeWrap data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/reSend/index.tsx:76:5:ReSendCodeWrap\">\n      {downTimeStatus !== DownTimeStatus.NotStarted && (\n        <div data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/reSend/index.tsx:78:9:div\">\n          {locales.didNotReceiveCode}\n          <ReSendCodeDiv $pointer={downTimeStatus === DownTimeStatus.End} data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/reSend/index.tsx:80:11:ReSendCodeDiv\" >\n            {downTimeStatus === DownTimeStatus.InProgress || downTimeStatus === DownTimeStatus.Stop ? (\n              `${downTime} s`\n            ) : downTimeStatus === DownTimeStatus.End ? (\n              <>\n                {loading && (\n                  <div\n                    style={{\n                      width: '24px',\n                      height: '24px',\n                      top: '1px',\n                      position: 'relative',\n                    }}\n                   data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/reSend/index.tsx:86:19:div\" >\n                    <LoadingSpinner spin={true} borderWidth={2} data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/reSend/index.tsx:94:21:LoadingSpinner\" ></LoadingSpinner>\n                  </div>\n                )}\n                <div onClick={reSendCodeHandler} data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/reSend/index.tsx:97:17:div\" >{locales.resendCode}</div>\n              </>\n            ) : (\n              ''\n            )}\n          </ReSendCodeDiv>\n        </div>\n      )}\n    </ReSendCodeWrap>\n  );\n};\n\nexport default ReSend;\n", "import { motion } from 'framer-motion';\nimport { styled } from 'styled-components';\n\ninterface StyledSpinnerContainerProps {\n  width: string;\n  height: string;\n}\n\nexport const StyledSpinnerContainer = styled(motion.div)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const StyledSpinnerCircle = styled(motion.div)<StyledSpinnerContainerProps>`\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n  margin: 6px;\n  border-style: solid;\n  border-radius: 50%;\n  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n`;\n", "import { StyledSpinnerCircle, StyledSpinnerContainer } from './styles';\n\ninterface StyledSpinnerContainerProps {\n  size?: string;\n  borderColor?: string;\n  borderWidth?: number;\n  children?: React.ReactNode;\n  spin: boolean;\n}\n\nconst LoadingSpinner = ({\n  size = '50%',\n  borderColor = '#a748ff',\n  borderWidth = 3,\n  spin = false,\n  children,\n}: StyledSpinnerContainerProps) => {\n  return (\n    <StyledSpinnerContainer initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/loadingSpinner/index.tsx:19:5:StyledSpinnerContainer\" >\n      {spin && (\n        <>\n          {[...Array(4)].map((_, index) => (\n            <StyledSpinnerCircle\n              key={index}\n              width={size}\n              height={size}\n              style={{\n                animationDelay: `-${index * 0.15}s`,\n                borderWidth,\n                borderColor: `${borderColor} transparent transparent transparent`,\n              }}\n             data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/loadingSpinner/index.tsx:23:13:StyledSpinnerCircle\" />\n          ))}\n        </>\n      )}\n      <div\n        style={{\n          opacity: spin ? 0.05 : 1,\n        }}\n       data-insp-path=\"/Users/chaichuanfa/work/WebProjects/particle-connect-modal/packages/connectkit/src/components/loadingSpinner/index.tsx:36:7:div\" >\n        {children}\n      </div>\n    </StyledSpinnerContainer>\n  );\n};\n\nexport default LoadingSpinner;\n", "import { styled } from 'styled-components';\n\ninterface ReSendCodeDivProps {\n  $pointer?: boolean;\n}\n\nexport const ReSendCodeWrap = styled.div`\n  text-align: center;\n  margin-top: 40px;\n  color: var(--pcm-body-color-secondary);\n  font-size: 14px;\n`;\n\nexport const ReSendCodeDiv = styled.div<ReSendCodeDivProps>`\n  color: var(--pcm-accent-color);\n  margin-top: 6px;\n  cursor: ${({ $pointer }) => ($pointer ? 'pointer' : 'default')};\n  display: flex;\n  gap: 0px;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  position: relative;\n  height: 24px;\n`;\n", "import { styled } from 'styled-components';\n\nexport const EmailCaptchaWrapper = styled.div`\n  position: relative;\n  padding-top: 10px;\n`;\n\nexport const EmailErrorContent = styled.div`\n  position: relative;\n  width: 96%;\n  left: 2%;\n  top: 0;\n  margin-bottom: 30px;\n`;\n\nexport const EmailError = styled.div`\n  background: var(--pcm-error-background);\n  border-radius: 28px;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  color: var(--pcm-error-color);\n  padding: 8px 8px;\n  line-height: 1.2;\n  display: flex;\n`;\n\nexport const EmailErrorLeft = styled.div`\n  min-width: 20px;\n  width: 20px;\n`;\n\nexport const EmailErrorRight = styled.div`\n  flex: 1;\n  font-size: 12px;\n`;\n\nexport const EmailCaptchaTip1 = styled.div`\n  font-size: 14px;\n`;\n\nexport const EmailText = styled.div`\n  font-size: 14px;\n  font-weight: bold;\n  margin-top: 4px;\n`;\n\nexport const EmailMainIcon = styled.div`\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  margin-bottom: 30px;\n  height: 80px;\n  position: relative;\n`;\n\nexport const EmailInfo = styled.div`\n  text-align: center;\n  margin-bottom: 30px;\n`;\n\nexport const EmailIconDiv = styled.div`\n  position: relative;\n  width: 70px;\n  height: 70px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const Spin = styled.div`\n  display: inline-block;\n  animation: spin 1.2s linear infinite;\n  position: absolute;\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n"],
+  "mappings": "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",
+  "names": ["useRef", "useState", "useEffect", "useRef", "styled", "jsx", "jsxs", "styled", "Fragment", "jsx", "jsxs", "useRef", "useEffect", "jsx", "jsxs", "Fragment", "styled", "jsx", "jsxs", "useState", "useRef", "error"]
+}

package/dist/chunk-23ZCRZPB.js

@@ -0,0 +1,293 @@
+"use client";
+import {
+  SocialItem,
+  SocialLoginContainer,
+  ToggleContainer
+} from "./chunk-BD4WVCBW.js";
+import {
+  useWalletConnector
+} from "./chunk-K5CA63MD.js";
+import {
+  ForwardContainer,
+  WalletIconContainer,
+  WalletItem,
+  WalletLable,
+  WalletsContainer
+} from "./chunk-DEXEZZLU.js";
+import {
+  useConnectWithWallet
+} from "./chunk-7KPX575A.js";
+import {
+  button_default
+} from "./chunk-6YTDWXCU.js";
+import {
+  Forward_default
+} from "./chunk-4LG4G5FM.js";
+import {
+  Icons_default
+} from "./chunk-U4T5ORLN.js";
+import {
+  useLastConnectorId
+} from "./chunk-N3I53AXB.js";
+import {
+  useWalletProps,
+  useWalletsProps_default
+} from "./chunk-C4PG7BVE.js";
+import {
+  useAppearance,
+  useContext,
+  useLocales,
+  useRouter
+} from "./chunk-OWHSDWQK.js";
+
+// src/utils/social.ts
+var socialAuthTypes = [
+  "facebook",
+  "google",
+  "apple",
+  "twitter",
+  "discord",
+  "github",
+  "twitch",
+  "microsoft",
+  "linkedin"
+];
+var isSocialAuthType = (authType) => {
+  return socialAuthTypes.includes(authType);
+};
+
+// src/components/socialLogin/index.tsx
+import { isEVMChain } from "@particle-network/connector-core";
+import { Fragment, useMemo } from "react";
+
+// src/assets/toggle.tsx
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var ToggleIcon = () => {
+  return /* @__PURE__ */ jsx(motion.svg, { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.20833 10.4167C4.0625 10.4167 3.125 11.3542 3.125 12.5C3.125 13.6459 4.0625 14.5834 5.20833 14.5834C6.35417 14.5834 7.29167 13.6459 7.29167 12.5C7.29167 11.3542 6.35417 10.4167 5.20833 10.4167ZM19.7917 10.4167C18.6458 10.4167 17.7083 11.3542 17.7083 12.5C17.7083 13.6459 18.6458 14.5834 19.7917 14.5834C20.9375 14.5834 21.875 13.6459 21.875 12.5C21.875 11.3542 20.9375 10.4167 19.7917 10.4167ZM12.5 10.4167C11.3542 10.4167 10.4167 11.3542 10.4167 12.5C10.4167 13.6459 11.3542 14.5834 12.5 14.5834C13.6458 14.5834 14.5833 13.6459 14.5833 12.5C14.5833 11.3542 13.6458 10.4167 12.5 10.4167Z",
+      fill: "var(--pcm-body-action-color)"
+    }
+  ) });
+};
+var toggle_default = ToggleIcon;
+
+// src/components/socialLogin/index.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SocialLogin = ({ expandList }) => {
+  const { config } = useContext();
+  const { navigate } = useRouter();
+  const locales = useLocales();
+  const { appearance } = useAppearance();
+  const wallet = useWalletProps(isEVMChain(config.chains[0]) ? "particleEVM" : "particleSolana");
+  const walletConnector = useWalletConnector("particleAuth");
+  const evmWalletConnector = useWalletConnector("evmWallet");
+  const { lastConnectorId } = useLastConnectorId();
+  const connectWallet = useConnectWithWallet();
+  const recentConnectSocialAuthType = useMemo(() => {
+    if (lastConnectorId !== "particleSolana" && lastConnectorId !== "particleEVM") {
+      return lastConnectorId;
+    }
+    const lastAuthType = walletConnector.auth.getLatestAuthType();
+    return lastAuthType;
+  }, [lastConnectorId, walletConnector.auth]);
+  const authTypes = useMemo(() => {
+    if (!walletConnector) {
+      return [];
+    }
+    const hasPasskeyConnector = evmWalletConnector?.connectors.some(
+      (connector) => connector.id === "passkeySmartWallet"
+    );
+    const enablePasskey = Boolean(config.plugins.some((plugin) => plugin.id === "aa") && hasPasskeyConnector) && appearance.collapsePasskeyButton === "as-social";
+    if (enablePasskey) {
+      return walletConnector.supportAuthTypes.concat("passkeySmartWallet");
+    }
+    return walletConnector.supportAuthTypes;
+  }, [walletConnector, evmWalletConnector, appearance.collapsePasskeyButton, config.plugins]);
+  const socialAuthTypes2 = useMemo(() => {
+    return authTypes.filter((item) => isSocialAuthType(item) || item === "passkeySmartWallet");
+  }, [authTypes]);
+  const _expandList = useMemo(() => {
+    const evmConnector = config.getWalletConnector("evmWallet");
+    const solanaConnector = config.getWalletConnector("solanaWallet");
+    return expandList || !authTypes.includes("email") && !authTypes.includes("phone") && !evmConnector && !solanaConnector;
+  }, [expandList, authTypes, config]);
+  const renderAuthTypes = useMemo(() => {
+    if (_expandList) {
+      return socialAuthTypes2;
+    }
+    if (socialAuthTypes2.length > 5) {
+      return socialAuthTypes2.slice(0, 4);
+    }
+    return socialAuthTypes2;
+  }, [_expandList, socialAuthTypes2]);
+  const onSocialLogin = (authType) => {
+    if (wallet && isSocialAuthType(authType)) {
+      const name = authType.charAt(0).toUpperCase() + authType.slice(1);
+      connectWallet(
+        {
+          ...wallet,
+          name,
+          shortName: name,
+          iconShape: authType === "microsoft" || authType === "twitch" ? "squircle" : "circle",
+          icon: /* @__PURE__ */ jsx2(Icons_default, { authType })
+        },
+        {
+          authParams: {
+            socialType: authType,
+            prompt: "select_account"
+          }
+        }
+      );
+    } else if (authType === "passkeySmartWallet") {
+      navigate("login-passkey" /* LoginPasskey */);
+    }
+  };
+  const felxRow = useMemo(() => {
+    if (_expandList) {
+      return false;
+    }
+    return socialAuthTypes2.length > 3;
+  }, [_expandList, socialAuthTypes2]);
+  return /* @__PURE__ */ jsx2(SocialLoginContainer, { $felxRow: felxRow, children: renderAuthTypes.map((authType, index) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(SocialItem, { $felxRow: felxRow, onClick: () => onSocialLogin(authType), children: [
+        /* @__PURE__ */ jsx2(Icons_default, { authType }),
+        /* @__PURE__ */ jsx2("span", { children: authType === "passkeySmartWallet" ? "Passkey" : authType }),
+        !felxRow && /* @__PURE__ */ jsxs(Fragment2, { children: [
+          recentConnectSocialAuthType === authType && /* @__PURE__ */ jsx2(WalletLable, { children: locales.lastUsed }),
+          /* @__PURE__ */ jsx2(ForwardContainer, { children: /* @__PURE__ */ jsx2(Forward_default, {}) })
+        ] })
+      ] }),
+      !_expandList && index == 3 && socialAuthTypes2.length > 5 && /* @__PURE__ */ jsx2(ToggleContainer, { onClick: () => navigate("connectors" /* Connectors */, { type: "social" }), children: /* @__PURE__ */ jsx2(toggle_default, {}) })
+    ] }, authType);
+  }) });
+};
+var socialLogin_default = SocialLogin;
+
+// src/components/wallets/index.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Wallets = ({ expandList }) => {
+  const { navigate } = useRouter();
+  const wallets = useWalletsProps_default();
+  const locales = useLocales();
+  const { lastConnectorId } = useLastConnectorId();
+  const connectWallet = useConnectWithWallet();
+  const { appearance } = useAppearance();
+  const walletData = useMemo2(() => {
+    const _wallets = wallets.filter(
+      (wallet) => wallet.connector.type !== "particleAuth" && wallet.connector.id !== "passkeySmartWallet"
+    );
+    const datas = [];
+    for (const wallet of _wallets) {
+      const key = wallet.groupId || wallet.connector.id;
+      const itemData = datas.find((w) => w.key === key);
+      if (itemData) {
+        itemData.props.push(wallet);
+      } else {
+        datas.push({
+          key,
+          props: [wallet],
+          rankingWeight: 0
+        });
+      }
+    }
+    const recommendedWallets = appearance?.recommendedWallets || [];
+    datas.forEach((data) => {
+      const ids = data.key.split(",").map((id) => id.trim());
+      if (data.props.length > 1) {
+        data.lable = locales.multichain;
+      }
+      if (data.props.some((item) => item.isInstalled)) {
+        data.lable = locales.installed;
+        data.rankingWeight = 100;
+      }
+      const recommended = recommendedWallets.find((item) => ids.includes(item.walletId));
+      if (recommended) {
+        if (recommended.label !== "none") {
+          if (recommended.label?.toLowerCase() === "recommended") {
+            data.lable = locales.recommended;
+          } else if (recommended.label?.toLowerCase() === "popular") {
+            data.lable = locales.popular;
+          } else {
+            data.lable = recommended.label || locales.recommended;
+          }
+          data.customLable = true;
+        } else {
+          data.customLable = void 0;
+        }
+        const recommendedIndex = recommendedWallets.indexOf(recommended);
+        data.rankingWeight = 200 + (99 - recommendedIndex);
+      }
+      if (lastConnectorId && ids.includes(lastConnectorId)) {
+        data.lable = locales.lastUsed;
+        data.rankingWeight = 500;
+        data.customLable = void 0;
+      }
+    });
+    datas.sort((a, b) => {
+      if (a.rankingWeight > b.rankingWeight) {
+        return -1;
+      }
+      if (a.rankingWeight < b.rankingWeight) {
+        return 1;
+      }
+      return 0;
+    });
+    return datas;
+  }, [locales, wallets, appearance?.recommendedWallets, lastConnectorId]);
+  const renderWallets = useMemo2(() => {
+    if (expandList) {
+      return walletData;
+    }
+    if (appearance?.collapseWalletList) {
+      return [];
+    }
+    if (walletData.length > 3) {
+      return walletData.slice(0, 3);
+    }
+    return walletData;
+  }, [walletData, expandList, appearance?.collapseWalletList]);
+  const displayActionBtn = useMemo2(() => {
+    return !expandList && (appearance?.collapseWalletList || walletData.length > 3);
+  }, [expandList, appearance?.collapseWalletList, walletData]);
+  const onWalletClick = (data) => {
+    if (data.props.length > 1) {
+      navigate("select-chain" /* SelectChain */, { walletData: data });
+    } else {
+      const walletProps = data.props[0];
+      connectWallet(walletProps);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(WalletsContainer, { children: [
+    renderWallets.map((walletData2) => {
+      return /* @__PURE__ */ jsxs2(WalletItem, { onClick: () => onWalletClick(walletData2), children: [
+        /* @__PURE__ */ jsx3(WalletIconContainer, { children: walletData2.props[0].icon }),
+        walletData2.props[0].name,
+        walletData2.lable && /* @__PURE__ */ jsx3(WalletLable, { $customLable: walletData2.customLable, children: walletData2.lable }),
+        /* @__PURE__ */ jsx3(ForwardContainer, { children: /* @__PURE__ */ jsx3(Forward_default, {}) })
+      ] }, walletData2.key);
+    }),
+    displayActionBtn && /* @__PURE__ */ jsx3(
+      button_default,
+      {
+        onClick: () => {
+          navigate("connectors" /* Connectors */);
+        },
+        color: "secondary",
+        children: appearance?.collapseWalletList ? locales.continueWithWallet : locales.viewAllWallets
+      }
+    )
+  ] });
+};
+var wallets_default = Wallets;
+
+export {
+  isSocialAuthType,
+  socialLogin_default,
+  wallets_default
+};
+//# sourceMappingURL=chunk-23ZCRZPB.js.map

package/dist/chunk-23ZCRZPB.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utils/social.ts", "../src/components/socialLogin/index.tsx", "../src/assets/toggle.tsx", "../src/components/wallets/index.tsx"],
+  "sourcesContent": ["const socialAuthTypes = [\n  'facebook',\n  'google',\n  'apple',\n  'twitter',\n  'discord',\n  'github',\n  'twitch',\n  'microsoft',\n  'linkedin',\n] as const;\n\nexport type SocialAuthType = (typeof socialAuthTypes)[number];\n\nexport const isSocialAuthType = (authType: string): authType is SocialAuthType => {\n  return (socialAuthTypes as readonly string[]).includes(authType);\n};\n", "import { isEVMChain } from '@particle-network/connector-core';\nimport { Fragment, useMemo } from 'react';\nimport Forward from '../../assets/icons/Forward';\nimport ToggleIcon from '../../assets/toggle';\nimport { useContext } from '../../context';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useConnectWithWallet } from '../../hooks/useConnectWithWallet';\nimport { useLastConnectorId } from '../../hooks/useLastConnectorId';\nimport useLocales from '../../hooks/useLocales';\nimport { useRouter } from '../../hooks/useRouter';\nimport { useWalletConnector } from '../../hooks/useWalletConnectors';\nimport { useWalletProps } from '../../hooks/useWalletsProps';\nimport { RoutePath } from '../../pages';\nimport { isSocialAuthType } from '../../utils/social';\nimport { ForwardContainer, WalletLable } from '../wallets/styles';\nimport SocialIcon from './Icons';\nimport { SocialItem, SocialLoginContainer, ToggleContainer } from './styles';\n\nconst SocialLogin = ({ expandList }: { expandList?: boolean }) => {\n  const { config } = useContext();\n  const { navigate } = useRouter();\n  const locales = useLocales();\n  const { appearance } = useAppearance();\n  const wallet = useWalletProps(isEVMChain(config.chains[0]) ? 'particleEVM' : 'particleSolana');\n  const walletConnector = useWalletConnector('particleAuth');\n  const evmWalletConnector = useWalletConnector('evmWallet');\n\n  const { lastConnectorId } = useLastConnectorId();\n\n  const connectWallet = useConnectWithWallet();\n\n  const recentConnectSocialAuthType = useMemo(() => {\n    if (lastConnectorId !== 'particleSolana' && lastConnectorId !== 'particleEVM') {\n      return lastConnectorId;\n    }\n\n    const lastAuthType = walletConnector.auth.getLatestAuthType();\n    return lastAuthType;\n  }, [lastConnectorId, walletConnector.auth]);\n\n  const authTypes = useMemo(() => {\n    if (!walletConnector) {\n      return [];\n    }\n    const hasPasskeyConnector = evmWalletConnector?.connectors.some(\n      (connector) => connector.id === 'passkeySmartWallet'\n    );\n    const enablePasskey =\n      Boolean(config.plugins.some((plugin) => plugin.id === 'aa') && hasPasskeyConnector) &&\n      appearance.collapsePasskeyButton === 'as-social';\n    if (enablePasskey) {\n      return walletConnector.supportAuthTypes.concat('passkeySmartWallet');\n    }\n    return walletConnector.supportAuthTypes;\n  }, [walletConnector, evmWalletConnector, appearance.collapsePasskeyButton, config.plugins]);\n\n  const socialAuthTypes = useMemo(() => {\n    return authTypes.filter((item) => isSocialAuthType(item) || item === 'passkeySmartWallet');\n  }, [authTypes]);\n\n  const _expandList = useMemo(() => {\n    const evmConnector = config.getWalletConnector('evmWallet');\n    const solanaConnector = config.getWalletConnector('solanaWallet');\n    return (\n      expandList || (!authTypes.includes('email') && !authTypes.includes('phone') && !evmConnector && !solanaConnector)\n    );\n  }, [expandList, authTypes, config]);\n\n  const renderAuthTypes = useMemo(() => {\n    if (_expandList) {\n      return socialAuthTypes;\n    }\n\n    if (socialAuthTypes.length > 5) {\n      return socialAuthTypes.slice(0, 4);\n    }\n    return socialAuthTypes;\n  }, [_expandList, socialAuthTypes]);\n\n  const onSocialLogin = (authType: string) => {\n    if (wallet && isSocialAuthType(authType)) {\n      const name = authType.charAt(0).toUpperCase() + authType.slice(1);\n      connectWallet(\n        {\n          ...wallet,\n          name,\n          shortName: name,\n          iconShape: authType === 'microsoft' || authType === 'twitch' ? 'squircle' : 'circle',\n          icon: <SocialIcon authType={authType} />,\n        },\n        {\n          authParams: {\n            socialType: authType,\n            prompt: 'select_account',\n          },\n        }\n      );\n    } else if (authType === 'passkeySmartWallet') {\n      navigate(RoutePath.LoginPasskey);\n    }\n  };\n\n  const felxRow = useMemo(() => {\n    if (_expandList) {\n      return false;\n    }\n    return socialAuthTypes.length > 3;\n  }, [_expandList, socialAuthTypes]);\n\n  return (\n    <SocialLoginContainer $felxRow={felxRow}>\n      {renderAuthTypes.map((authType, index) => {\n        return (\n          <Fragment key={authType}>\n            <SocialItem $felxRow={felxRow} onClick={() => onSocialLogin(authType)}>\n              <SocialIcon authType={authType} />\n              <span>{authType === 'passkeySmartWallet' ? 'Passkey' : authType}</span>\n              {!felxRow && (\n                <>\n                  {recentConnectSocialAuthType === authType && <WalletLable>{locales.lastUsed}</WalletLable>}\n                  <ForwardContainer>\n                    <Forward />\n                  </ForwardContainer>\n                </>\n              )}\n            </SocialItem>\n            {!_expandList && index == 3 && socialAuthTypes.length > 5 && (\n              <ToggleContainer onClick={() => navigate(RoutePath.Connectors, { type: 'social' })}>\n                <ToggleIcon />\n              </ToggleContainer>\n            )}\n          </Fragment>\n        );\n      })}\n    </SocialLoginContainer>\n  );\n};\n\nexport default SocialLogin;\n", "import { motion } from 'framer-motion';\n\nconst ToggleIcon = () => {\n  return (\n    <motion.svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'>\n      <path\n        d='M5.20833 10.4167C4.0625 10.4167 3.125 11.3542 3.125 12.5C3.125 13.6459 4.0625 14.5834 5.20833 14.5834C6.35417 14.5834 7.29167 13.6459 7.29167 12.5C7.29167 11.3542 6.35417 10.4167 5.20833 10.4167ZM19.7917 10.4167C18.6458 10.4167 17.7083 11.3542 17.7083 12.5C17.7083 13.6459 18.6458 14.5834 19.7917 14.5834C20.9375 14.5834 21.875 13.6459 21.875 12.5C21.875 11.3542 20.9375 10.4167 19.7917 10.4167ZM12.5 10.4167C11.3542 10.4167 10.4167 11.3542 10.4167 12.5C10.4167 13.6459 11.3542 14.5834 12.5 14.5834C13.6458 14.5834 14.5833 13.6459 14.5833 12.5C14.5833 11.3542 13.6458 10.4167 12.5 10.4167Z'\n        fill='var(--pcm-body-action-color)'\n      />\n    </motion.svg>\n  );\n};\n\nexport default ToggleIcon;\n", "import { useMemo } from 'react';\nimport Forward from '../../assets/icons/Forward';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useConnectWithWallet } from '../../hooks/useConnectWithWallet';\nimport { useLastConnectorId } from '../../hooks/useLastConnectorId';\nimport useLocales from '../../hooks/useLocales';\nimport { useRouter } from '../../hooks/useRouter';\nimport useWalletsProps from '../../hooks/useWalletsProps';\nimport { RoutePath } from '../../pages';\nimport Button from '../button';\nimport { ForwardContainer, WalletIconContainer, WalletItem, WalletLable, WalletsContainer } from './styles';\nimport type { WalletData } from './types';\n\nconst Wallets = ({ expandList }: { expandList?: boolean }) => {\n  const { navigate } = useRouter();\n  const wallets = useWalletsProps();\n  const locales = useLocales();\n  const { lastConnectorId } = useLastConnectorId();\n  const connectWallet = useConnectWithWallet();\n  const { appearance } = useAppearance();\n\n  const walletData = useMemo(() => {\n    const _wallets = wallets.filter(\n      (wallet) => wallet.connector.type !== 'particleAuth' && wallet.connector.id !== 'passkeySmartWallet'\n    );\n    // merge wallet\n    const datas: WalletData[] = [];\n    for (const wallet of _wallets) {\n      const key = wallet.groupId || wallet.connector.id;\n      const itemData = datas.find((w) => w.key === key);\n      if (itemData) {\n        itemData.props.push(wallet);\n      } else {\n        datas.push({\n          key,\n          props: [wallet],\n          rankingWeight: 0,\n        });\n      }\n    }\n\n    // set lable\n    const recommendedWallets = appearance?.recommendedWallets || [];\n    datas.forEach((data) => {\n      const ids = data.key.split(',').map((id) => id.trim());\n      // multichain lable\n      if (data.props.length > 1) {\n        data.lable = locales.multichain;\n      }\n\n      // installed lable\n      if (data.props.some((item) => item.isInstalled)) {\n        data.lable = locales.installed;\n        data.rankingWeight = 100;\n      }\n\n      // custom lable\n      const recommended = recommendedWallets.find((item) => ids.includes(item.walletId));\n      if (recommended) {\n        if (recommended.label !== 'none') {\n          if (recommended.label?.toLowerCase() === 'recommended') {\n            data.lable = locales.recommended;\n          } else if (recommended.label?.toLowerCase() === 'popular') {\n            data.lable = locales.popular;\n          } else {\n            data.lable = recommended.label || locales.recommended;\n          }\n          data.customLable = true;\n        } else {\n          data.customLable = undefined;\n        }\n        const recommendedIndex = recommendedWallets.indexOf(recommended);\n        data.rankingWeight = 200 + (99 - recommendedIndex);\n      }\n\n      // last used lable\n      if (lastConnectorId && ids.includes(lastConnectorId)) {\n        data.lable = locales.lastUsed;\n        data.rankingWeight = 500;\n        data.customLable = undefined;\n      }\n    });\n\n    // sort items\n    datas.sort((a, b) => {\n      if (a.rankingWeight > b.rankingWeight) {\n        return -1;\n      }\n\n      if (a.rankingWeight < b.rankingWeight) {\n        return 1;\n      }\n\n      return 0;\n    });\n\n    return datas;\n  }, [locales, wallets, appearance?.recommendedWallets, lastConnectorId]);\n\n  const renderWallets = useMemo(() => {\n    if (expandList) {\n      return walletData;\n    }\n\n    if (appearance?.collapseWalletList) {\n      return [];\n    }\n\n    if (walletData.length > 3) {\n      return walletData.slice(0, 3);\n    }\n\n    return walletData;\n  }, [walletData, expandList, appearance?.collapseWalletList]);\n\n  const displayActionBtn = useMemo(() => {\n    return !expandList && (appearance?.collapseWalletList || walletData.length > 3);\n  }, [expandList, appearance?.collapseWalletList, walletData]);\n\n  const onWalletClick = (data: WalletData) => {\n    if (data.props.length > 1) {\n      // route to select chain\n      navigate(RoutePath.SelectChain, { walletData: data });\n    } else {\n      const walletProps = data.props[0];\n      connectWallet(walletProps);\n    }\n  };\n\n  return (\n    <WalletsContainer>\n      {renderWallets.map((walletData) => {\n        return (\n          <WalletItem key={walletData.key} onClick={() => onWalletClick(walletData)}>\n            <WalletIconContainer>{walletData.props[0].icon}</WalletIconContainer>\n            {walletData.props[0].name}\n            {walletData.lable && <WalletLable $customLable={walletData.customLable}>{walletData.lable}</WalletLable>}\n            <ForwardContainer>\n              <Forward />\n            </ForwardContainer>\n          </WalletItem>\n        );\n      })}\n\n      {displayActionBtn && (\n        <Button\n          onClick={() => {\n            navigate(RoutePath.Connectors);\n          }}\n          color='secondary'\n        >\n          {appearance?.collapseWalletList ? locales.continueWithWallet : locales.viewAllWallets}\n        </Button>\n      )}\n    </WalletsContainer>\n  );\n};\n\nexport default Wallets;\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "socialAuthTypes", "useMemo", "jsx", "jsxs", "useMemo", "walletData"]
+}

package/dist/chunk-2HFOMX3X.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  useIsMobile
+} from "./chunk-7U3THH6T.js";
+import {
+  useConnector
+} from "./chunk-Q6ASU7RJ.js";
+import {
+  hasPCDownloadUrl,
+  openMobileUrl,
+  useRouter
+} from "./chunk-LGU3FSI5.js";
+
+// src/hooks/useConnectWithWallet.ts
+var useConnectWithWallet = () => {
+  const { navigate } = useRouter();
+  const isMobile = useIsMobile();
+  const connector = useConnector("walletConnect");
+  const connectWallet = (walletProps, params) => {
+    if (walletProps.isInstalled) {
+      navigate("connecting" /* Connecting */, {
+        wallet: walletProps,
+        passkeyParams: params?.passkeyParams,
+        authParams: params?.authParams
+      });
+    } else if (walletProps.connector.id === "walletConnect") {
+      if (isMobile) {
+        navigate("connecting" /* Connecting */, { wallet: walletProps });
+      } else {
+        navigate("walletconnect" /* Walletconnect */, { wallet: walletProps });
+      }
+    } else if (walletProps.connector.chainType === "evm" && walletProps.getWalletConnectDeeplink && connector) {
+      if (isMobile) {
+        navigate("connecting" /* Connecting */, { wallet: walletProps });
+      } else {
+        navigate("walletconnect" /* Walletconnect */, { wallet: walletProps });
+      }
+    } else {
+      if (walletProps.getDAppBrowserDeeplink && isMobile) {
+        const url = walletProps.getDAppBrowserDeeplink(window.location.href);
+        openMobileUrl(url);
+      } else if (!isMobile && (hasPCDownloadUrl(walletProps) || walletProps.id === "braveWallet")) {
+        navigate("download-app" /* DownloadApp */, { wallet: walletProps });
+      } else {
+        navigate("connecting" /* Connecting */, { wallet: walletProps });
+      }
+    }
+  };
+  return connectWallet;
+};
+
+export {
+  useConnectWithWallet
+};
+//# sourceMappingURL=chunk-2HFOMX3X.js.map

package/dist/chunk-2HFOMX3X.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/hooks/useConnectWithWallet.ts"],
+  "sourcesContent": ["import type { AuthConnectParams, PasskeyParams } from '../actions/connect';\nimport { RoutePath } from '../pages';\nimport { hasPCDownloadUrl, openMobileUrl } from '../utils';\nimport { useConnector } from './useConnectors';\nimport useIsMobile from './useIsMobile';\nimport { useRouter } from './useRouter';\nimport type { WalletProps } from './useWalletsProps';\n\nexport const useConnectWithWallet = () => {\n  const { navigate } = useRouter();\n  const isMobile = useIsMobile();\n  const connector = useConnector('walletConnect');\n\n  const connectWallet = (\n    walletProps: WalletProps,\n    params?: { passkeyParams?: PasskeyParams; authParams?: AuthConnectParams }\n  ) => {\n    console.log(`connect wallet, id: ${walletProps.connector.id}, isInstalled: ${walletProps.isInstalled}`);\n    if (walletProps.isInstalled) {\n      navigate(RoutePath.Connecting, {\n        wallet: walletProps,\n        passkeyParams: params?.passkeyParams,\n        authParams: params?.authParams,\n      });\n    } else if (walletProps.connector.id === 'walletConnect') {\n      if (isMobile) {\n        // loading, show w3m and close modal\n        navigate(RoutePath.Connecting, { wallet: walletProps });\n      } else {\n        // walletconnect, show qrcode.\n        navigate(RoutePath.Walletconnect, { wallet: walletProps });\n      }\n    } else if (walletProps.connector.chainType === 'evm' && walletProps.getWalletConnectDeeplink && connector) {\n      if (isMobile) {\n        // \u8DF3\u8F6Cloading\uFF0C \u83B7\u53D6\u5230uri\u540E\u8DF3\u8F6C\n        navigate(RoutePath.Connecting, { wallet: walletProps });\n      } else {\n        // show qrcode.\n        navigate(RoutePath.Walletconnect, { wallet: walletProps });\n      }\n    } else {\n      // solana/evm wallets, unsupport walletconnect.\n      if (walletProps.getDAppBrowserDeeplink && isMobile) {\n        // deeplink -> dapp browser\n        const url = walletProps.getDAppBrowserDeeplink(window.location.href);\n        openMobileUrl(url);\n      } else if (!isMobile && (hasPCDownloadUrl(walletProps) || walletProps.id === 'braveWallet')) {\n        // download\n        navigate(RoutePath.DownloadApp, { wallet: walletProps });\n      } else {\n        // unavailable, need to download wallet if has url.\n        navigate(RoutePath.Connecting, { wallet: walletProps });\n      }\n    }\n  };\n\n  return connectWallet;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;AAQO,IAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,SAAS,IAAI,UAAU;AAC/B,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa,eAAe;AAE9C,QAAM,gBAAgB,CACpB,aACA,WACG;AAEH,QAAI,YAAY,aAAa;AAC3B,8CAA+B;AAAA,QAC7B,QAAQ;AAAA,QACR,eAAe,QAAQ;AAAA,QACvB,YAAY,QAAQ;AAAA,MACtB,CAAC;AAAA,IACH,WAAW,YAAY,UAAU,OAAO,iBAAiB;AACvD,UAAI,UAAU;AAEZ,gDAA+B,EAAE,QAAQ,YAAY,CAAC;AAAA,MACxD,OAAO;AAEL,sDAAkC,EAAE,QAAQ,YAAY,CAAC;AAAA,MAC3D;AAAA,IACF,WAAW,YAAY,UAAU,cAAc,SAAS,YAAY,4BAA4B,WAAW;AACzG,UAAI,UAAU;AAEZ,gDAA+B,EAAE,QAAQ,YAAY,CAAC;AAAA,MACxD,OAAO;AAEL,sDAAkC,EAAE,QAAQ,YAAY,CAAC;AAAA,MAC3D;AAAA,IACF,OAAO;AAEL,UAAI,YAAY,0BAA0B,UAAU;AAElD,cAAM,MAAM,YAAY,uBAAuB,OAAO,SAAS,IAAI;AACnE,sBAAc,GAAG;AAAA,MACnB,WAAW,CAAC,aAAa,iBAAiB,WAAW,KAAK,YAAY,OAAO,gBAAgB;AAE3F,mDAAgC,EAAE,QAAQ,YAAY,CAAC;AAAA,MACzD,OAAO;AAEL,gDAA+B,EAAE,QAAQ,YAAY,CAAC;AAAA,MACxD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/chunk-2JVS6HCC.js

@@ -0,0 +1,33 @@
+"use client";
+
+// src/assets/icons/ButtonLoadingIcon.tsx
+import { motion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ButtonLoadingIcon = ({ ...props }) => /* @__PURE__ */ jsxs(
+  motion.svg,
+  {
+    fill: "none",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    animate: { rotate: 360 },
+    transition: { repeat: Infinity, duration: 1, ease: "linear" },
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", opacity: 0.25 }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          opacity: 0.75,
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+var ButtonLoadingIcon_default = ButtonLoadingIcon;
+
+export {
+  ButtonLoadingIcon_default
+};
+//# sourceMappingURL=chunk-2JVS6HCC.js.map

package/dist/chunk-2JVS6HCC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/assets/icons/ButtonLoadingIcon.tsx"],
+  "sourcesContent": ["import { motion } from 'framer-motion';\n\nconst ButtonLoadingIcon = ({ ...props }) => (\n  <motion.svg\n    fill='none'\n    viewBox='0 0 24 24'\n    xmlns='http://www.w3.org/2000/svg'\n    {...props}\n    animate={{ rotate: 360 }}\n    transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}\n  >\n    <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' opacity={0.25}></circle>\n    <path\n      opacity={0.75}\n      d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'\n      fill='currentColor'\n    />\n  </motion.svg>\n);\n\nexport default ButtonLoadingIcon;\n"],
+  "mappings": ";;;AAAA,SAAS,cAAc;AAGrB,SAQE,KARF;AADF,IAAM,oBAAoB,CAAC,KAAK,MAAM,MACpC;AAAA,EAAC,OAAO;AAAA,EAAP;AAAA,IACC,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,OAAM;AAAA,IACL,GAAG;AAAA,IACJ,SAAS,EAAE,QAAQ,IAAI;AAAA,IACvB,YAAY,EAAE,QAAQ,UAAU,UAAU,GAAG,MAAM,SAAS;AAAA,IAE5D;AAAA,0BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI,SAAS,MAAM;AAAA,MACpF;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA;AACF;AAGF,IAAO,4BAAQ;",
+  "names": []
+}

package/dist/chunk-2NGOQYF3.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  useIconColor_default
+} from "./chunk-QGLI6C7V.js";
+
+// src/assets/social/apple.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Apple = () => {
+  const { background } = useIconColor_default();
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 31 31", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M23.2154 16.3638C23.2404 14.2641 24.402 12.3195 26.2756 11.21C25.089 9.58753 23.1654 8.59733 21.092 8.53768C18.9062 8.32293 16.7953 9.77841 15.6837 9.77841C14.572 9.77841 12.8359 8.54961 10.9998 8.5854C8.57664 8.65698 6.36583 9.94543 5.19173 11.9735C2.68116 16.1252 4.55472 22.2334 6.96537 25.5858C8.16445 27.2322 9.57587 29.0694 11.412 28.9978C13.2106 28.9262 13.8851 27.9003 16.0584 27.9003C18.2317 27.9003 18.8438 28.9978 20.7173 28.962C22.6533 28.9262 23.8649 27.3157 25.0265 25.6455C25.8884 24.4763 26.5628 23.1759 27 21.804C24.7018 20.8734 23.2154 18.726 23.2029 16.3519L23.2154 16.3638Z",
+        fill: background
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M19.6679 6.33057C20.7171 5.12563 21.2417 3.56278 21.1168 1.99994C19.5055 2.16696 18.0191 2.8947 16.945 4.06385C15.8958 5.20914 15.3587 6.71233 15.4586 8.23939C17.0948 8.25132 18.6437 7.55937 19.6679 6.3425V6.33057Z",
+        fill: background
+      }
+    )
+  ] });
+};
+var apple_default = Apple;
+
+export {
+  apple_default
+};
+//# sourceMappingURL=chunk-2NGOQYF3.js.map

package/dist/chunk-2NGOQYF3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/assets/social/apple.tsx"],
+  "sourcesContent": ["import useIconColor from '../../hooks/useIconColor';\n\nconst Apple = () => {\n  const { background } = useIconColor();\n\n  return (\n    <svg width='24' height='24' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M23.2154 16.3638C23.2404 14.2641 24.402 12.3195 26.2756 11.21C25.089 9.58753 23.1654 8.59733 21.092 8.53768C18.9062 8.32293 16.7953 9.77841 15.6837 9.77841C14.572 9.77841 12.8359 8.54961 10.9998 8.5854C8.57664 8.65698 6.36583 9.94543 5.19173 11.9735C2.68116 16.1252 4.55472 22.2334 6.96537 25.5858C8.16445 27.2322 9.57587 29.0694 11.412 28.9978C13.2106 28.9262 13.8851 27.9003 16.0584 27.9003C18.2317 27.9003 18.8438 28.9978 20.7173 28.962C22.6533 28.9262 23.8649 27.3157 25.0265 25.6455C25.8884 24.4763 26.5628 23.1759 27 21.804C24.7018 20.8734 23.2154 18.726 23.2029 16.3519L23.2154 16.3638Z'\n        fill={background}\n      />\n      <path\n        d='M19.6679 6.33057C20.7171 5.12563 21.2417 3.56278 21.1168 1.99994C19.5055 2.16696 18.0191 2.8947 16.945 4.06385C15.8958 5.20914 15.3587 6.71233 15.4586 8.23939C17.0948 8.25132 18.6437 7.55937 19.6679 6.3425V6.33057Z'\n        fill={background}\n      />\n    </svg>\n  );\n};\n\nexport default Apple;\n"],
+  "mappings": ";;;;;;AAMI,SACE,KADF;AAJJ,IAAM,QAAQ,MAAM;AAClB,QAAM,EAAE,WAAW,IAAI,qBAAa;AAEpC,SACE,qBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA;AAAA,IACR;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA;AAAA,IACR;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;",
+  "names": []
+}