@magiclabs/ui-components 1.34.12 → 1.34.13
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 y=require("@styled/css"),c=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 d=require("../primitives/text.js"),u=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var j=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var m=require("create-slots");const
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var y=require("@styled/css"),c=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 d=require("../primitives/text.js"),u=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var j=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var m=require("create-slots");const g=m.createSlot(({children:t,...r})=>e.jsx(c.Center,{children:u.Children.map(t,i=>u.cloneElement(i,r))})),q=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:l,tokenBalanceFirst:s,disabled:o=!1})=>{const a=s||!r;return e.jsxs(c.HStack,{w:"full",justify:"space-between",opacity:o?"0.5":"1",children:[e.jsxs(c.HStack,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:l?e.jsx("img",{width:40,height:40,src:l,alt:`${t} logo`}):e.jsx(j.default,{width:40,height:40}),e.jsx(d.default,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:t})]}),e.jsxs(c.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(d.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:a?i:r}),e.jsx(d.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:a?r:i})]})]})},p=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:l,onPress:s,tokenBalanceFirst:o,disabled:a}=t,x=u.useRef(null),b=u.useCallback(()=>{s?.()},[s]);return m.createHost(t.children,k=>{const h=k.get(g);return s?e.jsx(f.ButtonContainer,{ref:x,className:y.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:b,disabled:a,children:e.jsx(q,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:h,logoUrl:l,tokenBalanceFirst:o,disabled:a})}):e.jsx(q,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:h,logoUrl:l,tokenBalanceFirst:o,disabled:a})})},B=Object.assign(p,{TokenIcon:g});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 { 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}\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}: 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 <Text size=\"sm\" styles={{ lineHeight: '1.5rem' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst, disabled } = 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 />\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 />\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","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"m1BAmBA,MAAMA,EAAYC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAS,SAAA,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,EACM,IAAI,CACrB,MAAMC,EAAeF,GAAqB,CAACJ,EAC3C,OACEO,
|
|
1
|
+
{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\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}\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}: 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 <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 </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst, disabled } = 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 />\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 />\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","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"m1BAmBA,MAAMA,EAAYC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,EAAS,SAAA,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,EACM,IAAI,CACrB,MAAMC,EAAeF,GAAqB,CAACJ,EAC3C,OACEO,EAACC,KAAAA,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASH,EAAW,MAAQ,IAAG,SAAA,CACtEE,EAAAA,KAACC,EAAAA,OAAM,CAAC,IAAK,EACV,SAAA,CAAAN,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAA,MAAA,CAAK,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,MAACgB,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzChB,MAACiB,UAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,cAChD,SAAAX,CACI,CAAA,CAAA,CAAA,CAAA,EAETQ,EAAAA,KAACI,SAAM,CAAC,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAlB,EAAAA,IAACiB,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SACjEJ,EAAeL,EAAyBD,IAE3CP,EAAAA,IAACiB,EAAAA,QAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SAC5FJ,EAAeN,EAAwBC,CAAsB,CAAA,CACzD,CACA,CAAA,CAAA,CAAA,CAAA,CAGf,EAEMW,EAA+DpB,GAAQ,CAC3E,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAU,EAAS,kBAAAT,EAAmB,SAAAC,CAAU,EAAGb,EAEzGsB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAY,YAAA,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAW1B,EAAM,SAAU2B,GAAQ,CACxC,MAAMjB,EAAYiB,EAAM,IAAI9B,CAAS,EAErC,OAAIwB,EAEApB,EAAAA,IAAC2B,kBACC,CAAA,IAAKN,EACL,UAAWO,MAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,GACP,EACD,aAAa,SACb,OAAM,GACN,QAAShB,EAAW,OAAYW,EAChC,SAAUX,EAEV,SAAAZ,MAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAEJ,CAAA,EAIpBZ,EAACK,IAAAA,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAGxB,CAAC,CACH,EAEaiB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAAvB,CAAS,CAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as s}from"react/jsx-runtime";import{ButtonContainer as k}from"../containers/button.js";import"../containers/card.js";import{css as u}from"@styled/css";import{Center as B,HStack as d,VStack as S}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 c from"../primitives/text.js";import{Children as x,cloneElement as W,useRef as I,useCallback as w}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import C from"../logos/icon-generic-token.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import{createSlot as F,createHost as H}from"create-slots";const h=F(({children:o,...e})=>t(B,{children:x.map(o,i=>W(i,e))})),g=({name:o,fiatBalanceWithSymbol:e,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:l,tokenBalanceFirst:a,disabled:m=!1})=>{const r=a||!e;return s(d,{w:"full",justify:"space-between",opacity:m?"0.5":"1",children:[s(d,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:l?t("img",{width:40,height:40,src:l,alt:`${o} logo`}):t(C,{width:40,height:40}),t(c,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:o})]}),s(S,{gap:0,alignItems:"flex-end",children:[t(c,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:r?i:e}),t(c,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:r?e:i})]})]})},j=o=>{const{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:l,onPress:a,tokenBalanceFirst:m,disabled:r}=o,f=I(null),b=w(()=>{a?.()},[a]);return H(o.children,y=>{const p=y.get(h);return a?t(k,{ref:f,className:u({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:r?void 0:b,disabled:r,children:t(g,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:p,logoUrl:l,tokenBalanceFirst:m,disabled:r})}):t(g,{name:e,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:p,logoUrl:l,tokenBalanceFirst:m,disabled:r})})},U=Object.assign(j,{TokenIcon:h});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 { 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}\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}: 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 <Text size=\"sm\" styles={{ lineHeight: '1.5rem' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst, disabled } = 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 />\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 />\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","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"w7BAmBA,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,EACM,IAAI,CACrB,MAAMC,EAAeF,GAAqB,CAACJ,EAC3C,OACEO,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASH,EAAW,MAAQ,IAAG,SAAA,CACtEE,EAACC,EAAM,CAAC,IAAK,EACV,SAAA,CAAAN,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,
|
|
1
|
+
{"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\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}\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}: 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 <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 </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress, tokenBalanceFirst, disabled } = 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 />\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 />\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","balanceFirst","_jsxs","HStack","IconGenericToken","Text","VStack","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","css","TokenListItem"],"mappings":"w7BAmBA,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,EACM,IAAI,CACrB,MAAMC,EAAeF,GAAqB,CAACJ,EAC3C,OACEO,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,gBAAgB,QAASH,EAAW,MAAQ,IAAG,SAAA,CACtEE,EAACC,EAAM,CAAC,IAAK,EACV,SAAA,CAAAN,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAA,MAAA,CAAK,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAO,CAAA,EAE7DN,EAACgB,EAAiB,CAAA,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzChB,EAACiB,EAAK,CAAA,WAAW,SAAS,OAAQ,CAAE,cAAe,cAChD,SAAAX,CACI,CAAA,CAAA,CAAA,CAAA,EAETQ,EAACI,EAAM,CAAC,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAlB,EAACiB,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SACjEJ,EAAeL,EAAyBD,IAE3CP,EAACiB,EAAI,CAAC,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAS,EAAA,SAC5FJ,EAAeN,EAAwBC,CAAsB,CAAA,CACzD,CACA,CAAA,CAAA,CAAA,CAAA,CAGf,EAEMW,EAA+DpB,GAAQ,CAC3E,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAU,EAAS,kBAAAT,EAAmB,SAAAC,CAAU,EAAGb,EAEzGsB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAW1B,EAAM,SAAU2B,GAAQ,CACxC,MAAMjB,EAAYiB,EAAM,IAAI9B,CAAS,EAErC,OAAIwB,EAEApB,EAAC2B,EACC,CAAA,IAAKN,EACL,UAAWO,EAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,GACP,EACD,aAAa,SACb,OAAM,GACN,QAAShB,EAAW,OAAYW,EAChC,SAAUX,EAEV,SAAAZ,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAEJ,CAAA,EAIpBZ,EAACK,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,CAAQ,CAAA,CAGxB,CAAC,CACH,EAEaiB,EAAgB,OAAO,OAAOV,EAAmB,CAAE,UAAAvB,CAAS,CAAE"}
|