@magiclabs/ui-components 1.37.0 → 1.38.1

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.
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime");require("../containers/button.js"),require("../containers/card.js"),require("@styled/css");var l=require("@styled/jsx"),m=require("../containers/drawer.js"),V=require("react");require("../utils/client-asset-logo.js");var v=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var A=require("../icons/ico-caret-left.js"),w=require("../icons/ico-magic.js"),G=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var S=require("../containers/menu.js"),I=require("../containers/modal.js");require("../containers/overlay.js"),require("../info/copy-button.js"),require("../info/email-wbr.js"),require("../info/security-otp.js"),require("../info/text-box.js");var L=require("../info/wallet-address.js"),n=require("../primitives/button.js"),f=require("../primitives/popover.js"),j=require("../primitives/text.js"),a=require("create-slots");const C=a.createSlot(({children:r})=>V.Children.map(r,t=>e.jsx(n.default,{expand:!0,...t.props}))),b=a.createSlot(n.default),P=a.createSlot(n.default),y=a.createSlot(({children:r})=>e.jsxs(f.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(f.Popover.TrailingIcon,{children:e.jsx(G.default,{})}),e.jsx(f.Popover.Content,{children:r})]})),k=a.createSlot(({branding:r,title:t})=>t?e.jsx(j.default,{size:"sm",fontColor:"text.secondary",children:t}):e.jsx(w.default,{color:v.token(r==="light"?"colors.text.primary":"colors.neutral.primary")})),B=a.createSlot(({children:r,height:t="auto",flexGrow:s=0})=>e.jsx(l.VStack,{w:"full",justify:"center",height:t,flexGrow:s,children:r})),H=a.createSlot(S.Menu),z=a.createSlot(m.Drawer),M=a.createSlot(({children:r})=>e.jsx(l.Center,{pt:3,w:"full",children:r})),D=a.createSlot(({children:r,domain:t,name:s,logoUrl:o})=>e.jsxs(l.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[o?e.jsx("img",{src:o,alt:s,width:24,height:24}):e.jsx(w.default,{color:v.token("colors.brand.base"),height:24,width:24}),e.jsx(j.default,{size:"sm",fontWeight:"semibold",children:s}),t&&e.jsx(j.default,{size:"sm",fontColor:"text.tertiary",children:t}),r]})),K=({actionDirection:r="row",address:t,children:s,onBack:o,onCancel:d,hideHeader:F=!1,...W})=>a.createHost(s,i=>{const c=i.getProps(b),u=i.getProps(P),p=i.getProps(z),x=i.getProps(H),g=i.get(C),q=i.get(y),T=i.get(k),h=r==="row";return e.jsxs(I.Modal,{...W,fullscreen:!0,paddingType:"none",gap:0,children:[!F&&e.jsxs(l.VStack,{gap:0,width:"full",children:[e.jsxs(l.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[o&&e.jsx(n.default,{onPress:o,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(n.default.LeadingIcon,{children:e.jsx(A.default,{})})}),d&&e.jsx(n.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(o||d)&&e.jsx(l.Box,{w:6}),T,t||q||x?e.jsxs(l.HStack,{children:[t&&e.jsx(L.default,{address:t}),q,x&&e.jsx(S.Menu,{...x})]}):e.jsx(l.Box,{w:6})]}),i.get(D)]}),e.jsxs(l.VStack,{h:"full",w:"full",justify:"space-between",p:6,maxW:393,children:[i.get(B),e.jsxs(l.VStack,{w:"full",gap:3,children:[i.get(M),(c||u)&&e.jsxs(l.Flex,{direction:h?"row":"column-reverse",gap:h?4:3,width:"full",children:[c&&e.jsx(n.default,{expand:!0,label:"Cancel",variant:"neutral",...c}),u&&e.jsx(n.default,{expand:!0,label:"Confirm",variant:"inverse",...u})]}),g&&e.jsx(l.Flex,{direction:r,gap:h?4:3,width:"full",children:g})]})]}),p&&e.jsx(m.Drawer,{...p})]})}),O=Object.assign(K,{Actions:C,Cancel:b,Confirm:P,Content:B,Menu:H,Drawer:z,Footer:M,Header:D,Info:y,Title:k});exports.PassportPage=O;
1
+ "use strict";var e=require("react/jsx-runtime");require("../containers/button.js"),require("../containers/card.js"),require("@styled/css");var l=require("@styled/jsx"),m=require("../containers/drawer.js"),V=require("react");require("../utils/client-asset-logo.js");var v=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var A=require("../icons/ico-caret-left.js"),w=require("../icons/ico-newton.js"),G=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var S=require("../containers/menu.js"),I=require("../containers/modal.js");require("../containers/overlay.js"),require("../info/copy-button.js"),require("../info/email-wbr.js"),require("../info/security-otp.js"),require("../info/text-box.js");var L=require("../info/wallet-address.js"),n=require("../primitives/button.js"),f=require("../primitives/popover.js"),j=require("../primitives/text.js"),a=require("create-slots");const C=a.createSlot(({children:r})=>V.Children.map(r,t=>e.jsx(n.default,{expand:!0,...t.props}))),b=a.createSlot(n.default),P=a.createSlot(n.default),y=a.createSlot(({children:r})=>e.jsxs(f.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(f.Popover.TrailingIcon,{children:e.jsx(G.default,{})}),e.jsx(f.Popover.Content,{children:r})]})),k=a.createSlot(({branding:r,title:t})=>t?e.jsx(j.default,{size:"sm",fontColor:"text.secondary",children:t}):e.jsx(w.default,{color:v.token(r==="light"?"colors.text.primary":"colors.neutral.primary")})),B=a.createSlot(({children:r,height:t="auto",flexGrow:s=0})=>e.jsx(l.VStack,{w:"full",justify:"center",height:t,flexGrow:s,children:r})),H=a.createSlot(S.Menu),z=a.createSlot(m.Drawer),D=a.createSlot(({children:r})=>e.jsx(l.Center,{pt:3,w:"full",children:r})),F=a.createSlot(({children:r,domain:t,name:s,logoUrl:o})=>e.jsxs(l.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[o?e.jsx("img",{src:o,alt:s,width:24,height:24}):e.jsx(w.default,{color:v.token("colors.brand.base"),height:24,width:24}),e.jsx(j.default,{size:"sm",fontWeight:"semibold",children:s}),t&&e.jsx(j.default,{size:"sm",fontColor:"text.tertiary",children:t}),r]})),J=({actionDirection:r="row",address:t,children:s,onBack:o,onCancel:d,hideHeader:M=!1,...W})=>a.createHost(s,i=>{const c=i.getProps(b),u=i.getProps(P),p=i.getProps(z),x=i.getProps(H),g=i.get(C),q=i.get(y),T=i.get(k),h=r==="row";return e.jsxs(I.Modal,{...W,fullscreen:!0,paddingType:"none",gap:0,children:[!M&&e.jsxs(l.VStack,{gap:0,width:"full",children:[e.jsxs(l.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[o&&e.jsx(n.default,{onPress:o,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(n.default.LeadingIcon,{children:e.jsx(A.default,{})})}),d&&e.jsx(n.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(o||d)&&e.jsx(l.Box,{w:6}),T,t||q||x?e.jsxs(l.HStack,{children:[t&&e.jsx(L.default,{address:t}),q,x&&e.jsx(S.Menu,{...x})]}):e.jsx(l.Box,{w:6})]}),i.get(F)]}),e.jsxs(l.VStack,{h:"full",w:"full",justify:"space-between",p:6,maxW:393,children:[i.get(B),e.jsxs(l.VStack,{w:"full",gap:3,children:[i.get(D),(c||u)&&e.jsxs(l.Flex,{direction:h?"row":"column-reverse",gap:h?4:3,width:"full",children:[c&&e.jsx(n.default,{expand:!0,label:"Cancel",variant:"neutral",...c}),u&&e.jsx(n.default,{expand:!0,label:"Confirm",variant:"inverse",...u})]}),g&&e.jsx(l.Flex,{direction:r,gap:h?4:3,width:"full",children:g})]})]}),p&&e.jsx(m.Drawer,{...p})]})}),N=Object.assign(J,{Actions:C,Cancel:b,Confirm:P,Content:B,Menu:H,Drawer:z,Footer:D,Header:F,Info:y,Title:k});exports.PassportPage=N;
2
2
  //# sourceMappingURL=passport-page.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n hideHeader?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children, height = 'auto', flexGrow = 0 }) => (\n <VStack w=\"full\" justify=\"center\" height={height} flexGrow={flexGrow}>\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({\n actionDirection = 'row',\n address,\n children,\n onBack,\n onCancel,\n hideHeader = false,\n ...props\n}: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n {!hideHeader && (\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n )}\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6} maxW={393}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {slots.get(PageFooter)}\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoMagic","token","PageContent","height","flexGrow","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PageHost","actionDirection","address","onBack","onCancel","hideHeader","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","Box","WalletAddress","Flex","PassportPage"],"mappings":"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"}
1
+ {"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoNewton, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n hideHeader?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoNewton color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children, height = 'auto', flexGrow = 0 }) => (\n <VStack w=\"full\" justify=\"center\" height={height} flexGrow={flexGrow}>\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoNewton color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({\n actionDirection = 'row',\n address,\n children,\n onBack,\n onCancel,\n hideHeader = false,\n ...props\n}: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n {!hideHeader && (\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n )}\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6} maxW={393}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {slots.get(PageFooter)}\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoNewton","token","PageContent","height","flexGrow","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PageHost","actionDirection","address","onBack","onCancel","hideHeader","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","Box","WalletAddress","Flex","PassportPage"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var p=require("@styled/css"),u=require("@styled/jsx");require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var S=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var g=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var q=require("create-slots");const x=q.createSlot(({children:t,...r})=>e.jsx(u.Center,{children:d.Children.map(t,i=>d.cloneElement(i,r))})),k=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:s,tokenBalanceFirst:l,disabled:c=!1,isLoading:a=!1})=>{const o=l||!r;return e.jsxs(u.HStack,{w:"full",justify:"space-between",opacity:c?"0.5":"1",children:[e.jsxs(u.HStack,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:s?e.jsx("img",{width:40,height:40,src:s,alt:`${t} logo`}):e.jsx(S.default,{width:40,height:40}),e.jsx(h.default,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:t})]}),e.jsx(u.VStack,{gap:0,alignItems:"flex-end",children:a?e.jsxs(e.Fragment,{children:[e.jsx(g.Skeleton,{height:"1rem",width:"6rem"}),i&&r&&e.jsx("div",{style:{marginTop:"4px"},children:e.jsx(g.Skeleton,{height:"1rem",width:"4rem"})})]}):e.jsxs(e.Fragment,{children:[e.jsx(h.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?i:r}),e.jsx(h.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?r:i})]})})]})},v=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:s,onPress:l,tokenBalanceFirst:c,disabled:a,isLoading:o}=t,b=d.useRef(null),j=d.useCallback(()=>{l?.()},[l]);return q.createHost(t.children,y=>{const m=y.get(x);return l?e.jsx(f.ButtonContainer,{ref:b,className:p.css({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:a?void 0:j,disabled:a,children:e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})}):e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})})},B=Object.assign(v,{TokenIcon:x});exports.TokenListItem=B;
1
+ "use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var p=require("@styled/css"),u=require("@styled/jsx");require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var S=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var g=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var q=require("create-slots");const x=q.createSlot(({children:t,...r})=>e.jsx(u.Center,{children:d.Children.map(t,i=>d.cloneElement(i,r))})),k=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:s,tokenBalanceFirst:l,disabled:c=!1,isLoading:a=!1})=>{const o=l||!r;return e.jsxs(u.HStack,{w:"full",justify:"space-between",opacity:c?"0.5":"1",children:[e.jsxs(u.HStack,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:s?e.jsx("img",{width:40,height:40,src:s,alt:`${t} logo`}):e.jsx(S.default,{width:40,height:40}),e.jsx(h.default,{fontWeight:"medium",styles:{textTransform:"capitalize",textAlign:"left"},children:t})]}),e.jsx(u.VStack,{gap:0,alignItems:"flex-end",children:a?e.jsxs(e.Fragment,{children:[e.jsx(g.Skeleton,{height:"1rem",width:"6rem"}),i&&r&&e.jsx("div",{style:{marginTop:"4px"},children:e.jsx(g.Skeleton,{height:"1rem",width:"4rem"})})]}):e.jsxs(e.Fragment,{children:[e.jsx(h.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?i:r}),e.jsx(h.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?r:i})]})})]})},v=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:s,onPress:l,tokenBalanceFirst:c,disabled:a,isLoading:o}=t,b=d.useRef(null),j=d.useCallback(()=>{l?.()},[l]);return q.createHost(t.children,y=>{const m=y.get(x);return l?e.jsx(f.ButtonContainer,{ref:b,className:p.css({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:a?void 0:j,disabled:a,children:e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})}):e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})})},B=Object.assign(v,{TokenIcon:x});exports.TokenListItem=B;
2
2
  //# sourceMappingURL=token-list-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, FC, PropsWithChildren, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol?: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n disabled = false,\n isLoading = false,\n}: ListContentProps) => {\n const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n return (\n <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\n <HStack gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n {name}\n </Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n {isLoading ? (\n <>\n <Skeleton height={'1rem'} width={'6rem'} />\n {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n <div style={{ marginTop: '4px' }}>\n <Skeleton height={'1rem'} width={'4rem'} />\n </div>\n )}\n </>\n ) : (\n <>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </>\n )}\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const {\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n logoUrl,\n onPress,\n tokenBalanceFirst,\n disabled,\n isLoading,\n } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className={css({\n _dark: { bg: 'surface.tertiary' },\n _hover: { bg: 'neutral.secondary' },\n bg: 'neutral.quaternary',\n px: 4,\n py: 2,\n minH: 16,\n })}\n borderRadius=\"0.5rem\"\n expand\n onPress={disabled ? undefined : handlePress}\n disabled={disabled}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","disabled","isLoading","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"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"}
1
+ {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, FC, PropsWithChildren, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol?: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n disabled = false,\n isLoading = false,\n}: ListContentProps) => {\n const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n return (\n <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\n <HStack gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize', textAlign: 'left' }}>\n {name}\n </Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n {isLoading ? (\n <>\n <Skeleton height={'1rem'} width={'6rem'} />\n {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n <div style={{ marginTop: '4px' }}>\n <Skeleton height={'1rem'} width={'4rem'} />\n </div>\n )}\n </>\n ) : (\n <>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </>\n )}\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const {\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n logoUrl,\n onPress,\n tokenBalanceFirst,\n disabled,\n isLoading,\n } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className={css({\n _dark: { bg: 'surface.tertiary' },\n _hover: { bg: 'neutral.secondary' },\n bg: 'neutral.quaternary',\n px: 4,\n py: 2,\n minH: 16,\n })}\n borderRadius=\"0.5rem\"\n expand\n onPress={disabled ? undefined : handlePress}\n disabled={disabled}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","disabled","isLoading","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as O,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as U}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import V from"../icons/ico-caret-left.js";import j from"../icons/ico-magic.js";import q from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as E}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import J from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import x from"../primitives/text.js";import{createSlot as i,createHost as N}from"create-slots";const S=i(({children:e})=>U.map(e,t=>r(l,{expand:!0,...t.props}))),H=i(l),W=i(l),k=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(q,{})}),r(u.Content,{children:e})]})),D=i(({branding:e,title:t})=>t?r(x,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),M=i(({children:e,height:t="auto",flexGrow:m=0})=>r(d,{w:"full",justify:"center",height:t,flexGrow:m,children:e})),T=i(z),F=i(v),G=i(({children:e})=>r(O,{pt:3,w:"full",children:e})),I=i(({children:e,domain:t,name:m,logoUrl:a})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[a?r("img",{src:a,alt:m,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(x,{size:"sm",fontWeight:"semibold",children:m}),t&&r(x,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),Q=({actionDirection:e="row",address:t,children:m,onBack:a,onCancel:c,hideHeader:A=!1,...K})=>N(m,o=>{const p=o.getProps(H),s=o.getProps(W),w=o.getProps(F),h=o.getProps(T),C=o.get(S),b=o.get(k),L=o.get(D),f=e==="row";return n(E,{...K,fullscreen:!0,paddingType:"none",gap:0,children:[!A&&n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[a&&r(l,{onPress:a,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(V,{})})}),c&&r(l,{onPress:c,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(a||c)&&r(y,{w:6}),L,t||b||h?n(g,{children:[t&&r(J,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(I)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,maxW:393,children:[o.get(M),n(d,{w:"full",gap:3,children:[o.get(G),(p||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[p&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...p}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),w&&r(v,{...w})]})}),R=Object.assign(Q,{Actions:S,Cancel:H,Confirm:W,Content:M,Menu:T,Drawer:F,Footer:G,Header:I,Info:k,Title:D});export{R as PassportPage};
1
+ import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as K,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as O}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import U from"../icons/ico-caret-left.js";import j from"../icons/ico-newton.js";import V from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as q}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import E from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import x from"../primitives/text.js";import{createSlot as i,createHost as N}from"create-slots";const S=i(({children:e})=>O.map(e,t=>r(l,{expand:!0,...t.props}))),H=i(l),W=i(l),k=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(V,{})}),r(u.Content,{children:e})]})),D=i(({branding:e,title:t})=>t?r(x,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),M=i(({children:e,height:t="auto",flexGrow:m=0})=>r(d,{w:"full",justify:"center",height:t,flexGrow:m,children:e})),T=i(z),F=i(v),G=i(({children:e})=>r(K,{pt:3,w:"full",children:e})),I=i(({children:e,domain:t,name:m,logoUrl:a})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[a?r("img",{src:a,alt:m,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(x,{size:"sm",fontWeight:"semibold",children:m}),t&&r(x,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),Q=({actionDirection:e="row",address:t,children:m,onBack:a,onCancel:p,hideHeader:A=!1,...L})=>N(m,o=>{const c=o.getProps(H),s=o.getProps(W),w=o.getProps(F),h=o.getProps(T),C=o.get(S),b=o.get(k),J=o.get(D),f=e==="row";return n(q,{...L,fullscreen:!0,paddingType:"none",gap:0,children:[!A&&n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[a&&r(l,{onPress:a,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(U,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(a||p)&&r(y,{w:6}),J,t||b||h?n(g,{children:[t&&r(E,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(I)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,maxW:393,children:[o.get(M),n(d,{w:"full",gap:3,children:[o.get(G),(c||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[c&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...c}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),w&&r(v,{...w})]})}),R=Object.assign(Q,{Actions:S,Cancel:H,Confirm:W,Content:M,Menu:T,Drawer:F,Footer:G,Header:I,Info:k,Title:D});export{R as PassportPage};
2
2
  //# sourceMappingURL=passport-page.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n hideHeader?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children, height = 'auto', flexGrow = 0 }) => (\n <VStack w=\"full\" justify=\"center\" height={height} flexGrow={flexGrow}>\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({\n actionDirection = 'row',\n address,\n children,\n onBack,\n onCancel,\n hideHeader = false,\n ...props\n}: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n {!hideHeader && (\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n )}\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6} maxW={393}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {slots.get(PageFooter)}\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoMagic","token","PageContent","height","flexGrow","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PageHost","actionDirection","address","onBack","onCancel","hideHeader","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","Box","WalletAddress","Flex","PassportPage"],"mappings":"4iCAoCA,MAAMA,EAAUC,EAAW,CAAC,CAAE,SAAAC,CAAU,IAAKC,EAAS,IAAID,EAAUE,GAASC,EAACC,EAAO,CAAA,OAAW,GAAA,GAAAF,EAAM,KAAS,CAAA,CAAA,CAAC,EAC1GG,EAASN,EAAWK,CAAM,EAC1BE,EAAUP,EAAWK,CAAM,EAC3BG,EAAOR,EAAW,CAAC,CAAE,SAAAC,CAAU,IACnCQ,EAACC,EAAO,CAAC,UAAU,SAAS,QAAQ,OAClC,SAAA,CAAAN,EAACM,EAAQ,uBACPN,EAACO,KACoB,CAAA,EACvBP,EAACM,EAAQ,QAAS,CAAA,SAAAT,GAA2B,CACrC,CAAA,CACX,EACKW,EAAQZ,EAAW,CAAC,CAAE,SAAAa,EAAU,MAAAC,CAAmB,IAChDA,EACLV,EAACW,GAAK,KAAK,KAAK,UAAU,iBAAgB,SACvCD,CACI,CAAA,EAEPV,EAACY,GAAS,MAAOC,EAAMJ,IAAa,QAAU,sBAAwB,wBAAwB,CAAC,CAAA,CAElG,EAEKK,EAAclB,EAAW,CAAC,CAAE,SAAAC,EAAU,OAAAkB,EAAS,OAAQ,SAAAC,EAAW,KACtEhB,EAACiB,EAAO,CAAA,EAAE,OAAO,QAAQ,SAAS,OAAQF,EAAQ,SAAUC,EAAQ,SACjEnB,CACM,CAAA,CACV,EACKqB,EAAWtB,EAAWuB,CAAI,EAC1BC,EAAaxB,EAAWyB,CAAM,EAC9BC,EAAa1B,EAAW,CAAC,CAAE,SAAAC,CAAU,IACzCG,EAACuB,EAAM,CAAC,GAAI,EAAG,EAAE,OAAM,SACpB1B,CAAQ,CAAA,CAEZ,EACK2B,EAAa5B,EAAW,CAAC,CAAE,SAAAC,EAAU,OAAA4B,EAAQ,KAAAC,EAAM,QAAAC,CAAsB,IAC7EtB,EAACuB,EAAM,CAAC,kBAAkB,kBAAkB,kBAAkB,MAAM,EAAG,EAAG,MAAM,OAC7E,SAAA,CAAAD,EACC3B,EAAK,MAAA,CAAA,IAAK2B,EAAS,IAAKD,EAAM,MAAO,GAAI,OAAQ,EAAM,CAAA,EAEvD1B,EAACY,EAAQ,CAAC,MAAOC,EAAM,mBAAmB,EAAG,OAAQ,GAAI,MAAO,EAAM,CAAA,EAExEb,EAACW,EAAI,CAAC,KAAK,KAAK,WAAW,WACxB,SAAAe,CACI,CAAA,EACND,GACCzB,EAACW,EAAI,CAAC,KAAK,KAAK,UAAU,gBAAe,SACtCc,CAAM,CAAA,EAGV5B,CAAQ,CAAA,CAAA,CAEZ,EAEKgC,EAAW,CAAC,CAChB,gBAAAC,EAAkB,MAClB,QAAAC,EACA,SAAAlC,EACA,OAAAmC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,GAAGC,CACe,IACXC,EAAWvC,EAAUwC,GAAQ,CAClC,MAAMC,EAAcD,EAAM,SAASnC,CAAM,EACnCqC,EAAeF,EAAM,SAASlC,CAAO,EACrCqC,EAAcH,EAAM,SAASjB,CAAU,EACvCqB,EAAYJ,EAAM,SAASnB,CAAQ,EAEnCwB,EAAUL,EAAM,IAAI1C,CAAO,EAC3BgD,EAAON,EAAM,IAAIjC,CAAI,EACrBM,EAAQ2B,EAAM,IAAI7B,CAAK,EAEvBoC,EAAiBd,IAAoB,MAE3C,OACEzB,EAACwC,MAAUV,EAAO,WAAW,GAAA,YAAY,OAAO,IAAK,EAClD,SAAA,CAAA,CAACD,GACA7B,EAACY,GAAO,IAAK,EAAG,MAAM,OAAM,SAAA,CAC1BZ,EAACuB,GACC,kBAAkB,kBAClB,kBAAkB,MAClB,eAAe,gBACf,EAAG,EACH,MAAM,OAEL,SAAA,CAAAI,GACChC,EAACC,EAAO,CAAA,QAAS+B,EAAQ,KAAK,KAAK,UAAU,UAAU,QAAQ,gBAC7DhC,EAACC,EAAO,YAAW,CAAA,SACjBD,EAAC8C,EAAY,CAAA,CAAA,GAER,CAAA,EAEVb,GAAYjC,EAACC,GAAO,QAASgC,EAAU,MAAM,SAAS,KAAK,KAAK,UAAU,UAAU,QAAQ,MAAS,CAAA,EACrG,EAAED,GAAUC,IAAajC,EAAC+C,EAAI,CAAA,EAAG,CAAC,CAAA,EAClCrC,EACAqB,GAAWY,GAAQF,EAClBpC,EAACuB,EACE,CAAA,SAAA,CAAAG,GAAW/B,EAACgD,GAAc,QAASjB,CAAW,CAAA,EAC9CY,EACAF,GAAazC,EAACmB,EAAS,CAAA,GAAAsB,GAAa,CAC9B,CAAA,EAETzC,EAAC+C,GAAI,EAAG,CAAK,CAAA,CACd,CACM,CAAA,EACRV,EAAM,IAAIb,CAAU,CAAC,IAG1BnB,EAACY,GAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,gBAAgB,EAAG,EAAG,KAAM,IAC3D,SAAA,CAAAoB,EAAM,IAAIvB,CAAW,EACtBT,EAACY,EAAM,CAAC,EAAE,OAAO,IAAK,EAAC,SAAA,CACpBoB,EAAM,IAAIf,CAAU,GACnBgB,GAAeC,IACflC,EAAC4C,GAAK,UAAWL,EAAiB,MAAQ,iBAAkB,IAAKA,EAAiB,EAAI,EAAG,MAAM,OAAM,SAAA,CAClGN,GAAetC,EAACC,EAAM,CAAC,OAAO,GAAA,MAAM,SAAS,QAAQ,UAAc,GAAAqC,IACnEC,GAAgBvC,EAACC,GAAO,OAAM,GAAC,MAAM,UAAU,QAAQ,UAAS,GAAKsC,CAAgB,CAAA,CAAA,CAAA,CAAA,EAGzFG,GACC1C,EAACiD,EAAI,CAAC,UAAWnB,EAAiB,IAAKc,EAAiB,EAAI,EAAG,MAAM,gBAClEF,CAAO,CAAA,CAEX,CACM,CAAA,CAAA,CAAA,CAAA,EAEVF,GAAexC,EAACqB,EAAM,CAAA,GAAKmB,CAAe,CAAA,CAAA,CAAA,CAAA,CAGjD,CAAC,EAGUU,EAAe,OAAO,OAAOrB,EAAU,CAClD,QAAAlC,EACA,OAAAO,EACA,QAAAC,EACA,QAASW,EACT,KAAMI,EACN,OAAQE,EACR,OAAQE,EACR,OAAQE,EACR,KAAApB,EACA,MAAAI,CACD,CAAA"}
1
+ {"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoNewton, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n hideHeader?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoNewton color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children, height = 'auto', flexGrow = 0 }) => (\n <VStack w=\"full\" justify=\"center\" height={height} flexGrow={flexGrow}>\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoNewton color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({\n actionDirection = 'row',\n address,\n children,\n onBack,\n onCancel,\n hideHeader = false,\n ...props\n}: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n {!hideHeader && (\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n )}\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6} maxW={393}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {slots.get(PageFooter)}\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoNewton","token","PageContent","height","flexGrow","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PageHost","actionDirection","address","onBack","onCancel","hideHeader","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","Box","WalletAddress","Flex","PassportPage"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{jsx as t,jsxs as c,Fragment as d}from"react/jsx-runtime";import{ButtonContainer as x}from"../containers/button.js";import"../containers/card.js";import{css as S}from"@styled/css";import{Center as W,HStack as g,VStack as w}from"@styled/jsx";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import p from"../primitives/text.js";import{Children as I,cloneElement as C,useRef as F,useCallback as H}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import L from"../logos/icon-generic-token.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import"../feedback/callout.js";import"../feedback/progress-bar.js";import{Skeleton as f}from"../feedback/skeleton.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{createSlot as j,createHost as v}from"create-slots";const b=j(({children:o,...e})=>t(W,{children:I.map(o,i=>C(i,e))})),k=({name:o,fiatBalanceWithSymbol:e,tokenBalanceWithSymbol:i,tokenIcon:r,logoUrl:l,tokenBalanceFirst:a,disabled:s=!1,isLoading:n=!1})=>{const m=a||!e;return c(g,{w:"full",justify:"space-between",opacity:s?"0.5":"1",children:[c(g,{gap:4,children:[r?{...r,props:{...r.props,width:40,height:40}}:l?t("img",{width:40,height:40,src:l,alt:`${o} logo`}):t(L,{width:40,height:40}),t(p,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:o})]}),t(w,{gap:0,alignItems:"flex-end",children:n?c(d,{children:[t(f,{height:"1rem",width:"6rem"}),i&&e&&t("div",{style:{marginTop:"4px"},children:t(f,{height:"1rem",width:"4rem"})})]}):c(d,{children:[t(p,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:m?i:e}),t(p,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:m?e:i})]})})]})},T=o=>{const{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,logoUrl:l,onPress:a,tokenBalanceFirst:s,disabled:n,isLoading:m}=o,y=F(null),u=H(()=>{a?.()},[a]);return v(o.children,B=>{const h=B.get(b);return a?t(x,{ref:y,className:S({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:n?void 0:u,disabled:n,children:t(k,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,tokenIcon:h,logoUrl:l,tokenBalanceFirst:s,disabled:n,isLoading:m})}):t(k,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,tokenIcon:h,logoUrl:l,tokenBalanceFirst:s,disabled:n,isLoading:m})})},U=Object.assign(T,{TokenIcon:b});export{U as TokenListItem};
1
+ import{jsx as t,jsxs as c,Fragment as d}from"react/jsx-runtime";import{ButtonContainer as x}from"../containers/button.js";import"../containers/card.js";import{css as S}from"@styled/css";import{Center as W,HStack as g,VStack as w}from"@styled/jsx";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import p from"../primitives/text.js";import{Children as I,cloneElement as C,useRef as F,useCallback as H}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import L from"../logos/icon-generic-token.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import"../feedback/callout.js";import"../feedback/progress-bar.js";import{Skeleton as f}from"../feedback/skeleton.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{createSlot as j,createHost as v}from"create-slots";const b=j(({children:o,...e})=>t(W,{children:I.map(o,i=>C(i,e))})),k=({name:o,fiatBalanceWithSymbol:e,tokenBalanceWithSymbol:i,tokenIcon:r,logoUrl:a,tokenBalanceFirst:l,disabled:s=!1,isLoading:n=!1})=>{const m=l||!e;return c(g,{w:"full",justify:"space-between",opacity:s?"0.5":"1",children:[c(g,{gap:4,children:[r?{...r,props:{...r.props,width:40,height:40}}:a?t("img",{width:40,height:40,src:a,alt:`${o} logo`}):t(L,{width:40,height:40}),t(p,{fontWeight:"medium",styles:{textTransform:"capitalize",textAlign:"left"},children:o})]}),t(w,{gap:0,alignItems:"flex-end",children:n?c(d,{children:[t(f,{height:"1rem",width:"6rem"}),i&&e&&t("div",{style:{marginTop:"4px"},children:t(f,{height:"1rem",width:"4rem"})})]}):c(d,{children:[t(p,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:m?i:e}),t(p,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:m?e:i})]})})]})},T=o=>{const{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,logoUrl:a,onPress:l,tokenBalanceFirst:s,disabled:n,isLoading:m}=o,y=F(null),u=H(()=>{l?.()},[l]);return v(o.children,B=>{const h=B.get(b);return l?t(x,{ref:y,className:S({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:n?void 0:u,disabled:n,children:t(k,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,tokenIcon:h,logoUrl:a,tokenBalanceFirst:s,disabled:n,isLoading:m})}):t(k,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:r,tokenIcon:h,logoUrl:a,tokenBalanceFirst:s,disabled:n,isLoading:m})})},U=Object.assign(T,{TokenIcon:b});export{U as TokenListItem};
2
2
  //# sourceMappingURL=token-list-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, FC, PropsWithChildren, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol?: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n disabled = false,\n isLoading = false,\n}: ListContentProps) => {\n const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n return (\n <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\n <HStack gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize' }}>\n {name}\n </Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n {isLoading ? (\n <>\n <Skeleton height={'1rem'} width={'6rem'} />\n {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n <div style={{ marginTop: '4px' }}>\n <Skeleton height={'1rem'} width={'4rem'} />\n </div>\n )}\n </>\n ) : (\n <>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </>\n )}\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const {\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n logoUrl,\n onPress,\n tokenBalanceFirst,\n disabled,\n isLoading,\n } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className={css({\n _dark: { bg: 'surface.tertiary' },\n _hover: { bg: 'neutral.secondary' },\n bg: 'neutral.quaternary',\n px: 4,\n py: 2,\n minH: 16,\n })}\n borderRadius=\"0.5rem\"\n expand\n onPress={disabled ? undefined : handlePress}\n disabled={disabled}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","disabled","isLoading","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"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"}
1
+ {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, FC, PropsWithChildren, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol?: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n disabled = false,\n isLoading = false,\n}: ListContentProps) => {\n const balanceFirst = tokenBalanceFirst || !fiatBalanceWithSymbol;\n return (\n <HStack w=\"full\" justify=\"space-between\" opacity={disabled ? '0.5' : '1'}>\n <HStack gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize', textAlign: 'left' }}>\n {name}\n </Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n {isLoading ? (\n <>\n <Skeleton height={'1rem'} width={'6rem'} />\n {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n <div style={{ marginTop: '4px' }}>\n <Skeleton height={'1rem'} width={'4rem'} />\n </div>\n )}\n </>\n ) : (\n <>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </>\n )}\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const {\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n logoUrl,\n onPress,\n tokenBalanceFirst,\n disabled,\n isLoading,\n } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className={css({\n _dark: { bg: 'surface.tertiary' },\n _hover: { bg: 'neutral.secondary' },\n bg: 'neutral.quaternary',\n px: 4,\n py: 2,\n minH: 16,\n })}\n borderRadius=\"0.5rem\"\n expand\n onPress={disabled ? undefined : handlePress}\n disabled={disabled}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","disabled","isLoading","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.37.0",
3
+ "version": "1.38.1",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {