1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9928],{95673:function(e,n,t){"use strict";t.r(n),t.d(n,{meta:function(){return s}});var a=t(52322),r=t(45392),o=t(95288);t(36679);var s={showOnThisPage:!0,showBreadcrumbs:!1,showPrev:!0,showNext:!0},i=function(e){var n=e.children;return(0,a.jsx)(o.Z,{meta:s,children:n})};function c(e){var n=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code",pre:"pre"},(0,r.ah)(),e.components),t=n.ENSAvatarExample,o=n.ParameterTable;return t||p("ENSAvatarExample",!0),o||p("ParameterTable",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{children:"More Components"}),"\n",(0,a.jsx)(n.p,{children:"As part of Standard Components we offer a set of additional convenience components that make it easier to display various elements you'd normally find in a Web3 app."}),"\n",(0,a.jsx)(n.h2,{children:"ENS Avatar"}),"\n",(0,a.jsxs)(n.p,{children:["Start by importing the ",(0,a.jsx)(n.code,{children:"Avatar"})," component. Then, pass in the ENS name you want to display as the ",(0,a.jsx)(n.code,{children:"name"})," prop."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:'import { Avatar } from "connectkit";\n\nexport const ExampleAvatar = () => {\n return (\n <>\n <Avatar name="lochie.eth" />\n <Avatar name="vitalik.eth" />\n </>\n );\n};\n'})}),"\n",(0,a.jsx)(n.p,{children:"And that's itâyour avatar should now be displayed like in the example below."}),"\n",(0,a.jsx)(t,{}),"\n",(0,a.jsx)(n.h2,{children:"ENS Avatar Props"}),"\n",(0,a.jsxs)(n.p,{children:["Below are the various props that can be passed to the ",(0,a.jsx)(n.code,{children:"ConnectorButton"})," component."]}),"\n",(0,a.jsx)(o,{slug:"ConnectorButton",properties:[{name:"address",type:"string",comment:"Wallet address that has an avatar to display"},{name:"name",type:"string",comment:"ENS name that has an avatar to display"},{name:"size",type:"number",comment:"Avatar size in pixels"},{name:"radius",type:"number",comment:"Avatar border radius in pixels"}]})]})}function p(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(i,Object.assign({},e,{children:(0,a.jsx)(c,e)}))}},41464:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/connectkit/components/ui-components",function(){return t(95673)}])}},function(e){e.O(0,[9774,8934,4379,5904,3724,5288,2888,179],function(){return e(e.s=41464)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.