@magiclabs/ui-components 1.34.16 → 1.34.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/layouts/wallet-page/connection-menu.js +1 -1
- package/dist/cjs/components/layouts/wallet-page/connection-menu.js.map +1 -1
- package/dist/es/components/layouts/wallet-page/connection-menu.js +1 -1
- package/dist/es/components/layouts/wallet-page/connection-menu.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),j=require("../../icons/ico-globe.js"),f=require("../../icons/ico-remove.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@styled/tokens"),j=require("../../icons/ico-globe.js"),f=require("../../icons/ico-remove.js"),a=require("../../primitives/button.js");require("../../primitives/checkbox.js"),require("../../primitives/dropdown-selector.js");var i=require("../../primitives/popover.js");require("../../primitives/radio.js"),require("../../primitives/segmented-control.js"),require("../../primitives/switch.js");var o=require("../../primitives/text.js"),q=require("@styled/jsx"),l=require("react");const g=({connected:n,connectedLabel:d="Connected",disconnectLabel:c,disconnectedLabel:u="Not connected",domain:x,logoUrl:t,onDisconnect:h})=>{const[v,s]=l.useState(!1);return l.useEffect(()=>{s(!1)},[t]),e.jsxs(i.Popover,{iconSize:28,variant:"text",children:[e.jsx(i.Popover.LeadingIcon,{color:r.token("colors.text.tertiary"),children:t&&!v?e.jsx("img",{style:{borderRadius:"50%"},src:t,alt:"app logo",onError:()=>s(!0)}):e.jsxs("svg",{width:"28",height:"28",children:[e.jsx("circle",{cx:"14",cy:"14",r:"14",fill:r.token("colors.surface.secondary")}),e.jsx(j.default,{color:r.token("colors.neutral.primary"),x:6,y:6,height:16,width:16})]})}),e.jsxs(i.Popover.Content,{children:[n?e.jsx(o.default,{size:"xs",variant:"success",children:d}):e.jsx(o.default,{fontColor:"text.tertiary",size:"xs",children:u}),e.jsx(o.default,{size:"sm",children:x}),n&&c&&e.jsxs(e.Fragment,{children:[e.jsx(q.Divider,{color:"surface.quaternary",my:3}),e.jsx(a.default,{label:c,size:"sm",textStyle:"negative",variant:"text",onPress:h,children:e.jsx(a.default.LeadingIcon,{children:e.jsxs("svg",{width:"20",height:"20",children:[e.jsx("circle",{cx:"8",cy:"8",r:"8",fill:r.token("colors.surface.primary"),opacity:.5}),e.jsx(f.default,{color:r.token("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};exports.ConnectionMenu=g;
|
|
2
2
|
//# sourceMappingURL=connection-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { Divider } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n connected?: boolean;\n connectedLabel?: string;\n disconnectLabel?: string;\n disconnectedLabel?: string;\n domain: string;\n logoUrl?: string;\n onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n connected,\n connectedLabel = 'Connected',\n disconnectLabel
|
|
1
|
+
{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { Divider } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n connected?: boolean;\n connectedLabel?: string;\n disconnectLabel?: string;\n disconnectedLabel?: string;\n domain: string;\n logoUrl?: string;\n onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n connected,\n connectedLabel = 'Connected',\n disconnectLabel,\n disconnectedLabel = 'Not connected',\n domain,\n logoUrl,\n onDisconnect,\n}: ConnectionMenuProps) => {\n const [error, setError] = useState(false);\n\n useEffect(() => {\n setError(false);\n }, [logoUrl]);\n\n return (\n <Popover iconSize={28} variant=\"text\">\n <Popover.LeadingIcon color={token('colors.text.tertiary')}>\n {logoUrl && !error ? (\n <img style={{ borderRadius: '50%' }} src={logoUrl} alt=\"app logo\" onError={() => setError(true)} />\n ) : (\n <svg width=\"28\" height=\"28\">\n <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.secondary')} />\n <IcoGlobe color={token('colors.neutral.primary')} x={6} y={6} height={16} width={16} />\n </svg>\n )}\n </Popover.LeadingIcon>\n <Popover.Content>\n {!connected ? (\n <Text fontColor=\"text.tertiary\" size=\"xs\">\n {disconnectedLabel}\n </Text>\n ) : (\n <Text size=\"xs\" variant=\"success\">\n {connectedLabel}\n </Text>\n )}\n <Text size=\"sm\">{domain}</Text>\n {connected && disconnectLabel && (\n <>\n <Divider color=\"surface.quaternary\" my={3} />\n <Button label={disconnectLabel} size=\"sm\" textStyle=\"negative\" variant=\"text\" onPress={onDisconnect}>\n <Button.LeadingIcon>\n <svg width=\"20\" height=\"20\">\n <circle cx=\"8\" cy=\"8\" r=\"8\" fill={token('colors.surface.primary')} opacity={0.5} />\n <IcoRemove color={token('colors.negative.base')} x={3} y={3} height={10} width={10} />\n </svg>\n </Button.LeadingIcon>\n </Button>\n </>\n )}\n </Popover.Content>\n </Popover>\n );\n};\n"],"names":["ConnectionMenu","connected","connectedLabel","disconnectLabel","disconnectedLabel","domain","logoUrl","onDisconnect","error","setError","useState","useEffect","_jsxs","Popover","_jsx","token","IcoGlobe","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"yhBAgBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EACA,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,WAAS,EAAK,EAExC,OAAAC,YAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,EAAAA,KAACC,UAAO,CAAC,SAAU,GAAI,QAAQ,OAC7B,SAAA,CAAAC,EAAAA,IAACD,UAAQ,YAAY,CAAA,MAAOE,QAAM,sBAAsB,EACrD,SAAAT,GAAW,CAACE,EACXM,EAAAA,WAAK,MAAO,CAAE,aAAc,KAAO,EAAE,IAAKR,EAAS,IAAI,WAAW,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/FG,cAAK,MAAM,KAAK,OAAO,KACrB,SAAA,CAAAE,EAAAA,IAAA,SAAA,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAAA,MAAM,0BAA0B,CAAK,CAAA,EAC1ED,EAAAA,IAACE,WAAS,MAAOD,EAAM,MAAA,wBAAwB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CACnF,CAAA,CAEY,CAAA,EACtBH,EAACC,KAAAA,UAAQ,QAAO,CAAA,SAAA,CACZZ,EAKAa,EAAAA,IAACG,EAAAA,QAAK,CAAA,KAAK,KAAK,QAAQ,UAAS,SAC9Bf,CAAc,CAAA,EALjBY,EAAAA,IAACG,EAAI,QAAA,CAAC,UAAU,gBAAgB,KAAK,KAAI,SACtCb,CAAiB,CAAA,EAOtBU,EAAAA,IAACG,WAAK,KAAK,KAAI,SAAEZ,CAAc,CAAA,EAC9BJ,GAAaE,GACZS,OACEM,EAAAA,SAAA,CAAA,SAAA,CAAAJ,MAACK,EAAO,QAAA,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CL,EAAAA,IAACM,EAAAA,SAAO,MAAOjB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EACrF,SAAAO,EAAAA,IAACM,EAAAA,QAAO,YAAW,CAAA,SACjBR,EAAAA,KAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,MAAQ,SAAA,CAAA,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,QAAM,wBAAwB,EAAG,QAAS,EAAG,CAAA,EAC/ED,EAACO,IAAAA,EAAAA,QAAS,CAAC,MAAON,EAAAA,MAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CAClF,CAAA,CAAA,CAAA,GAED,CACR,CAAA,CACJ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r,Fragment as g}from"react/jsx-runtime";import{token as o}from"@styled/tokens";import x from"../../icons/ico-globe.js";import y from"../../icons/ico-remove.js";import
|
|
1
|
+
import{jsxs as e,jsx as r,Fragment as g}from"react/jsx-runtime";import{token as o}from"@styled/tokens";import x from"../../icons/ico-globe.js";import y from"../../icons/ico-remove.js";import a from"../../primitives/button.js";import"../../primitives/checkbox.js";import"../../primitives/dropdown-selector.js";import{Popover as i}from"../../primitives/popover.js";import"../../primitives/radio.js";import"../../primitives/segmented-control.js";import"../../primitives/switch.js";import c from"../../primitives/text.js";import{Divider as u}from"@styled/jsx";import{useState as v,useEffect as b}from"react";const z=({connected:n,connectedLabel:m="Connected",disconnectLabel:l,disconnectedLabel:d="Not connected",domain:h,logoUrl:t,onDisconnect:p})=>{const[f,s]=v(!1);return b(()=>{s(!1)},[t]),e(i,{iconSize:28,variant:"text",children:[r(i.LeadingIcon,{color:o("colors.text.tertiary"),children:t&&!f?r("img",{style:{borderRadius:"50%"},src:t,alt:"app logo",onError:()=>s(!0)}):e("svg",{width:"28",height:"28",children:[r("circle",{cx:"14",cy:"14",r:"14",fill:o("colors.surface.secondary")}),r(x,{color:o("colors.neutral.primary"),x:6,y:6,height:16,width:16})]})}),e(i.Content,{children:[n?r(c,{size:"xs",variant:"success",children:m}):r(c,{fontColor:"text.tertiary",size:"xs",children:d}),r(c,{size:"sm",children:h}),n&&l&&e(g,{children:[r(u,{color:"surface.quaternary",my:3}),r(a,{label:l,size:"sm",textStyle:"negative",variant:"text",onPress:p,children:r(a.LeadingIcon,{children:e("svg",{width:"20",height:"20",children:[r("circle",{cx:"8",cy:"8",r:"8",fill:o("colors.surface.primary"),opacity:.5}),r(y,{color:o("colors.negative.base"),x:3,y:3,height:10,width:10})]})})})]})]})]})};export{z as ConnectionMenu};
|
|
2
2
|
//# sourceMappingURL=connection-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { Divider } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n connected?: boolean;\n connectedLabel?: string;\n disconnectLabel?: string;\n disconnectedLabel?: string;\n domain: string;\n logoUrl?: string;\n onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n connected,\n connectedLabel = 'Connected',\n disconnectLabel
|
|
1
|
+
{"version":3,"file":"connection-menu.js","sources":["../../../../../src/components/layouts/wallet-page/connection-menu.tsx"],"sourcesContent":["import { IcoGlobe, IcoRemove } from '@components/icons';\nimport { Button, Popover, Text } from '@components/primitives';\nimport { Divider } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useEffect, useState } from 'react';\n\nexport interface ConnectionMenuProps {\n connected?: boolean;\n connectedLabel?: string;\n disconnectLabel?: string;\n disconnectedLabel?: string;\n domain: string;\n logoUrl?: string;\n onDisconnect?: () => void;\n}\n\nexport const ConnectionMenu = ({\n connected,\n connectedLabel = 'Connected',\n disconnectLabel,\n disconnectedLabel = 'Not connected',\n domain,\n logoUrl,\n onDisconnect,\n}: ConnectionMenuProps) => {\n const [error, setError] = useState(false);\n\n useEffect(() => {\n setError(false);\n }, [logoUrl]);\n\n return (\n <Popover iconSize={28} variant=\"text\">\n <Popover.LeadingIcon color={token('colors.text.tertiary')}>\n {logoUrl && !error ? (\n <img style={{ borderRadius: '50%' }} src={logoUrl} alt=\"app logo\" onError={() => setError(true)} />\n ) : (\n <svg width=\"28\" height=\"28\">\n <circle cx=\"14\" cy=\"14\" r=\"14\" fill={token('colors.surface.secondary')} />\n <IcoGlobe color={token('colors.neutral.primary')} x={6} y={6} height={16} width={16} />\n </svg>\n )}\n </Popover.LeadingIcon>\n <Popover.Content>\n {!connected ? (\n <Text fontColor=\"text.tertiary\" size=\"xs\">\n {disconnectedLabel}\n </Text>\n ) : (\n <Text size=\"xs\" variant=\"success\">\n {connectedLabel}\n </Text>\n )}\n <Text size=\"sm\">{domain}</Text>\n {connected && disconnectLabel && (\n <>\n <Divider color=\"surface.quaternary\" my={3} />\n <Button label={disconnectLabel} size=\"sm\" textStyle=\"negative\" variant=\"text\" onPress={onDisconnect}>\n <Button.LeadingIcon>\n <svg width=\"20\" height=\"20\">\n <circle cx=\"8\" cy=\"8\" r=\"8\" fill={token('colors.surface.primary')} opacity={0.5} />\n <IcoRemove color={token('colors.negative.base')} x={3} y={3} height={10} width={10} />\n </svg>\n </Button.LeadingIcon>\n </Button>\n </>\n )}\n </Popover.Content>\n </Popover>\n );\n};\n"],"names":["ConnectionMenu","connected","connectedLabel","disconnectLabel","disconnectedLabel","domain","logoUrl","onDisconnect","error","setError","useState","useEffect","_jsxs","Popover","_jsx","token","IcoGlobe","Text","_Fragment","Divider","Button","IcoRemove"],"mappings":"4lBAgBa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,eAAAC,EAAiB,YACjB,gBAAAC,EACA,kBAAAC,EAAoB,gBACpB,OAAAC,EACA,QAAAC,EACA,aAAAC,CACoB,IAAI,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAS,EAAK,EAExC,OAAAC,EAAU,IAAK,CACbF,EAAS,EAAK,CAChB,EAAG,CAACH,CAAO,CAAC,EAGVM,EAACC,EAAO,CAAC,SAAU,GAAI,QAAQ,OAC7B,SAAA,CAAAC,EAACD,EAAQ,YAAY,CAAA,MAAOE,EAAM,sBAAsB,EACrD,SAAAT,GAAW,CAACE,EACXM,SAAK,MAAO,CAAE,aAAc,KAAO,EAAE,IAAKR,EAAS,IAAI,WAAW,QAAS,IAAMG,EAAS,EAAI,CAAC,CAAA,EAE/FG,SAAK,MAAM,KAAK,OAAO,KACrB,SAAA,CAAAE,EAAA,SAAA,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAMC,EAAM,0BAA0B,CAAK,CAAA,EAC1ED,EAACE,GAAS,MAAOD,EAAM,wBAAwB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CACnF,CAAA,CAEY,CAAA,EACtBH,EAACC,EAAQ,QAAO,CAAA,SAAA,CACZZ,EAKAa,EAACG,EAAK,CAAA,KAAK,KAAK,QAAQ,UAAS,SAC9Bf,CAAc,CAAA,EALjBY,EAACG,EAAI,CAAC,UAAU,gBAAgB,KAAK,KAAI,SACtCb,CAAiB,CAAA,EAOtBU,EAACG,GAAK,KAAK,KAAI,SAAEZ,CAAc,CAAA,EAC9BJ,GAAaE,GACZS,EACEM,EAAA,CAAA,SAAA,CAAAJ,EAACK,EAAO,CAAC,MAAM,qBAAqB,GAAI,CAAK,CAAA,EAC7CL,EAACM,GAAO,MAAOjB,EAAiB,KAAK,KAAK,UAAU,WAAW,QAAQ,OAAO,QAASI,EACrF,SAAAO,EAACM,EAAO,YAAW,CAAA,SACjBR,EAAK,MAAA,CAAA,MAAM,KAAK,OAAO,KAAI,SAAA,CACzBE,EAAQ,SAAA,CAAA,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAMC,EAAM,wBAAwB,EAAG,QAAS,EAAG,CAAA,EAC/ED,EAACO,EAAS,CAAC,MAAON,EAAM,sBAAsB,EAAG,EAAG,EAAG,EAAG,EAAG,OAAQ,GAAI,MAAO,EAAE,CAAA,CAAI,CAClF,CAAA,CAAA,CAAA,GAED,CACR,CAAA,CACJ,CACe,CAAA,CAAA,CAAA,CAAA,CAGxB"}
|