import"react";import r from"@emotion/styled";import{Box as i,Button as s,Flex as l,Text as p}from"@chakra-ui/react";var n="https://imagedelivery.net/6iczWBYEbx_1dYNU7ek_bA/49bcce28-c272-46c8-ebf8-6472a9c32e00/medium";import{jsx as e,jsxs as o}from"react/jsx-runtime";var c=r.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`,d=r(i)`
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
`,x=({onClickConnectWallet:a,clientConfig:m})=>{let{profile:t}=m,b=t==null?void 0:t.profileImage;return o(i,{bg:"background",children:[o(l,{justifyContent:"center",children:[e(d,{zIndex:1,children:e(c,{src:b||n,alt:"brand"})}),e(d,{marginLeft:"-10px",children:e(c,{src:n})})]}),o(i,{style:{textAlign:"center"},children:[e(p,{textAlign:"center",fontWeight:500,fontSize:12,marginY:"20px  !important",children:"Choose how you want to connect. There are several wallet providers."}),e(s,{variant:"primary",onClick:a,children:"Connect Wallet"})]})]})},W=x;export{W as default};
