@magiclabs/ui-components 1.38.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"),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":"+kCAqBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,WAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACK,IAAI,CACrB,MAAMC,EAAeH,GAAqB,CAACJ,EAC3C,OACEQ,
|
|
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 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:
|
|
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":"0rCAqBA,MAAMA,EAAYC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACK,IAAI,CACrB,MAAMC,EAAeH,GAAqB,CAACJ,EAC3C,OACEQ,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASJ,EAAW,MAAQ,IAAG,SAAA,CACtEG,EAACC,EAAM,CAAC,IAAK,EACV,SAAA,CAAAP,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAEDC,EACFV,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,
|
|
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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"}
|