@rango-dev/widget-embedded 0.17.1-next.30 → 0.17.1-next.31

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -1,10 +1,12 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, styled } from '@rango-dev/ui';
+
+export const groupStyles = css();
 
 export const Group = styled('div', {
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
-  '.group-title': {
+  [`& .${groupStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral700',

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { limitDecimalPlaces } from '../../utils/numbers';
 
-import { Group, SwapList, Time } from './SwapsGroup.styles';
+import { Group, groupStyles, SwapList, Time } from './SwapsGroup.styles';
 
 export function SwapsGroup(props: PropTypes) {
   const { list, onSwapClick, groupBy, isLoading } = props;
@@ -34,7 +34,7 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  className="group-title">
+                  className={groupStyles()}>
                   {i18n.t(group.title)}
                 </Typography>
               </Time>
@@ -67,7 +67,7 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  className="group-title">
+                  className={groupStyles()}>
                   {i18n.t(group.title)}
                 </Typography>
               </Time>

package/src/components/TokenList/TokenList.styles.ts

@@ -1,4 +1,47 @@
-import { darkTheme, styled, Typography } from '@rango-dev/ui';
+import {
+  css,
+  darkTheme,
+  ImageContainer,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
+
+export const tokenNameStyles = css({
+  position: 'absolute',
+  transform: 'none',
+  transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: 100,
+  overflow: 'hidden',
+});
+export const descriptionStyles = css({
+  position: 'relative',
+  height: 12,
+  width: 150,
+});
+export const tokenTitleStyles = css({
+  position: 'absolute',
+  transform: 'none',
+  transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  bottom: '-8px',
+});
+export const tokenAddressStyles = css({
+  transform: 'translateY(12px)',
+  visibility: 'hidden',
+  '& a': {
+    fontSize: '$12',
+    lineHeight: '$16',
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+    textDecoration: 'none',
+  },
+});
+export const tokenWithoutNameStyles = css({});
+export const usdValueStyles = css();
 
 export const Container = styled('div', {
   display: 'flex',
@@ -23,58 +66,25 @@ export const List = styled('ul', {
   listStyle: 'none',
   '& li': {
     alignItems: 'none',
-    '.description': {
-      position: 'relative',
-      height: 12,
-      width: 150,
-      '.token-title': {
-        position: 'absolute',
-        transform: 'none',
-        transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-        bottom: '-8px',
-      },
 
-      '.token-address': {
-        transform: 'translateY(12px)',
-        visibility: 'hidden',
-        '& a': {
-          fontSize: '$12',
-          lineHeight: '$16',
-          $$color: '$colors$neutral600',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral700',
-          },
-          color: '$$color',
-          textDecoration: 'none',
-        },
-      },
-      '.token-name': {
-        position: 'absolute',
-        transform: 'none',
-        transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxWidth: 100,
-        overflow: 'hidden',
-      },
-    },
     '&:hover': {
-      '.description': {
-        '.token-address': {
+      [`& .${descriptionStyles}`]: {
+        [`& .${tokenAddressStyles}`]: {
           position: 'absolute',
           transform: 'none',
           transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
           visibility: 'visible',
         },
-        '.token-address-without-name': {
+
+        [`& .${tokenWithoutNameStyles}`]: {
           bottom: '-15px',
         },
-        '.token-name': {
+        [`& .${tokenNameStyles}`]: {
           position: 'absolute',
           transform: 'translateY(-12px)',
           visibility: 'hidden',
         },
-        '.token-title': {
+        [`& .${tokenTitleStyles}`]: {
           position: 'absolute',
           transform: 'translateY(-12px)',
           bottom: '-10px',
@@ -96,8 +106,7 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
-
-  '.usd-value': {
+  [`& .${usdValueStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral700',
@@ -118,7 +127,7 @@ export const Description = styled('div', {
 });
 export const ImageSection = styled('div', {
   position: 'relative',
-  '.image-container': {
+  [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

package/src/components/TokenList/TokenList.tsx

@@ -27,6 +27,7 @@ import { LoadingTokenList } from './LoadingTokenList';
 import {
   BalanceContainer,
   Container,
+  descriptionStyles,
   End,
   ImageSection,
   List,
@@ -34,6 +35,11 @@ import {
   Tag,
   TagTitle,
   Title,
+  tokenAddressStyles,
+  tokenNameStyles,
+  tokenTitleStyles,
+  tokenWithoutNameStyles,
+  usdValueStyles,
 } from './TokenList.styles';
 
 const PAGE_SIZE = 20;
@@ -44,11 +50,11 @@ const renderDesc = (props: RenderDescProps) => {
   const length = address.length;
 
   return (
-    <div className="description">
+    <div className={descriptionStyles()}>
       {name ? (
-        <div className="token-name">{name}</div>
+        <div className={tokenNameStyles()}>{name}</div>
       ) : (
-        <Title className="token-title">
+        <Title className={tokenTitleStyles()}>
           <Typography variant="title" size="xmedium">
             {token.symbol}
           </Typography>
@@ -63,7 +69,9 @@ const renderDesc = (props: RenderDescProps) => {
 
       {!!address && (
         <div
-          className={`token-address ${!name && 'token-address-without-name'}`}>
+          className={`${tokenAddressStyles()} ${
+            !name && tokenWithoutNameStyles()
+          }`}>
           <a
             href={url}
             target="_blank"
@@ -236,7 +244,7 @@ export function TokenList(props: PropTypes) {
                         {tokenBalance.usdValue && (
                           <Typography
                             variant="body"
-                            className="usd-value"
+                            className={usdValueStyles()}
                             size="xsmall">
                             {`$${tokenBalance.usdValue}`}
                           </Typography>

package/src/pages/ConfirmSwapPage.tsx

@@ -9,6 +9,7 @@ import { useManager } from '@rango-dev/queue-manager-react';
 import {
   Alert,
   Button,
+  css,
   Divider,
   IconButton,
   RefreshIcon,
@@ -40,18 +41,7 @@ import { getContainer } from '../utils/common';
 const Container = styled('div', {
   position: 'relative',
   width: '100%',
-  '& .description': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  '& .icon': {
-    width: '$24',
-    height: '$24',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+
   '& .quote-update__alert': {
     paddingTop: '$10',
   },
@@ -61,16 +51,31 @@ const Buttons = styled('div', {
   width: '100%',
   display: 'flex',
   justifyContent: 'space-between',
-  '& .confirm-button': {
-    flexGrow: 1,
-    paddingRight: '$10',
-  },
   [`& ${IconButton}`]: {
     width: '$48',
     height: '$48',
   },
 });
 
+const confirmBtnStyles = css({
+  flexGrow: 1,
+  paddingRight: '$10',
+});
+
+const iconStyles = css({
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const descriptionStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
 export function ConfirmSwapPage() {
   //TODO: move component's logics to a custom hook
   const {
@@ -282,7 +287,7 @@ export function ConfirmSwapPage() {
       }}
       footer={
         <Buttons>
-          <div className="confirm-button">
+          <div className={confirmBtnStyles()}>
             <Button
               variant="contained"
               type="primary"
@@ -315,7 +320,7 @@ export function ConfirmSwapPage() {
       )}
 
       <Container>
-        <div className="description">
+        <div className={descriptionStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('You get')}
           </Typography>
@@ -324,7 +329,7 @@ export function ConfirmSwapPage() {
             variant="ghost"
             disabled={fetchingConfirmationQuote}
             onClick={onRefresh}>
-            <div className="icon">
+            <div className={iconStyles()}>
               <RefreshIcon size={16} />
             </div>
           </Button>