Remove vanilla-extract dependency for integrators (WIP) (#36)

babel.config.js

@@ -1,21 +1,18 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', {
-      targets: {
-        esmodules: true
-      },
-      bugfixes: true,
-      loose: true,
-      exclude: [
-        '@babel/plugin-transform-async-to-generator',
-        '@babel/plugin-transform-regenerator'
-      ]
-    }],
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          esmodules: true
+        },
+        bugfixes: true,
+        loose: true,
+        exclude: ['@babel/plugin-transform-async-to-generator', '@babel/plugin-transform-regenerator']
+      }
+    ],
     '@babel/preset-typescript',
     '@babel/preset-react'
   ],
-  plugins: [
-    ['@babel/plugin-transform-class-properties', { loose: true }],
-    ["@vanilla-extract/babel-plugin", {}]
-  ]
+  plugins: [['@babel/plugin-transform-class-properties', { loose: true }]]
 }

examples/next/next.config.mjs

@@ -1,14 +1,9 @@
-import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
-
-const withVanillaExtract = createVanillaExtractPlugin()
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack: config => {
     config.externals.push('pino-pretty', 'encoding')
     return config
   }
-  // transpilePackages: ['@0xsequence/kit', '@0xsequence/kit-wallet', '@0xsequence/kit-connectors', '@0xsequence/checkout']
 }
 
-export default withVanillaExtract(nextConfig)
+export default nextConfig

examples/next/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@0xsequence/design-system": "^1.5.0",
+    "@0xsequence/design-system": "^1.6.0",
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",
@@ -26,11 +26,9 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vanilla-extract/next-plugin": "^2.4.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
-    "tailwindcss": "^3.4.3",
     "typescript": "^5"
   }
 }

examples/react/package.json

@@ -12,14 +12,13 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/design-system": "^1.5.0",
+    "@0xsequence/design-system": "^1.6.0",
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",
     "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/network": "^1.9.26",
     "@tanstack/react-query": "^5.32.0",
-    "@vanilla-extract/css": "^1.14.2",
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -31,7 +30,6 @@
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
-    "@vanilla-extract/vite-plugin": "^4.0.7",
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.2.10",
     "vite-plugin-node-polyfills": "^0.21.0",

examples/react/src/components/Footer.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
-import { Box, Image, Text, useMediaQuery } from '@0xsequence/design-system'
-import { useTheme } from '@0xsequence/design-system'
+import { Box, Image, Text, useMediaQuery, useTheme } from '@0xsequence/design-system'
 
 import { bottomPageLinks, socialLinks } from '../constants'
-import * as sharedStyles from '../shared/styles.css'
 
 export const Footer = () => {
   const { theme } = useTheme()
@@ -19,7 +17,14 @@ export const Footer = () => {
     return (
       <Box flexDirection="row" gap="4">
         {bottomPageLinks.map((link, index) => (
-          <Box onClick={() => onClickLinkUrl(link.url)} className={sharedStyles.clickable} key={index} gap="4">
+          <Box
+            key={index}
+            onClick={() => onClickLinkUrl(link.url)}
+            opacity={{ hover: '80' }}
+            cursor="pointer"
+            userSelect="none"
+            gap="4"
+          >
             <Text fontWeight="normal" fontSize="small" color="text50">
               {link.label}
             </Text>
@@ -36,7 +41,9 @@ export const Footer = () => {
           return (
             <Box
               key={index}
-              className={sharedStyles.clickable}
+              opacity={{ hover: '80' }}
+              cursor="pointer"
+              userSelect="none"
               onClick={() => {
                 if (typeof window !== 'undefined') {
                   window.open(socialLink.url)

examples/react/vite.config.js

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import dns from 'dns'
 import react from '@vitejs/plugin-react'
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 import svgrPlugin from 'vite-plugin-svgr'
@@ -19,7 +18,6 @@ export default defineConfig(() => {
         }
       }),
       viteTsconfigPaths(),
-      vanillaExtractPlugin(),
       svgrPlugin()
     ],
     define: {

package.json

@@ -45,7 +45,8 @@
     "@types/react-dom": "^18.2.25",
     "@typescript-eslint/eslint-plugin": "^7.7.1",
     "@typescript-eslint/parser": "^7.7.1",
-    "@vanilla-extract/babel-plugin": "^1.2.0",
+    "@vanilla-extract/css": "^1.14.2",
+    "@vanilla-extract/recipes": "^0.5.2",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",

packages/checkout/package.json

@@ -23,22 +23,18 @@
     "react-copy-to-clipboard": "^5.1.0"
   },
   "peerDependencies": {
-    "@0xsequence/design-system": ">=1.5.0",
+    "@0xsequence/design-system": ">=1.6.0",
     "@0xsequence/kit": "workspace:*",
-    "@vanilla-extract/css": ">=1.9.3",
-    "@vanilla-extract/recipes": ">=0.3.0",
     "ethers": ">=5.7.2",
     "framer-motion": ">=8.5.2",
     "react": ">=17",
     "react-dom": ">=17",
     "wagmi": ">=2.0.0"
   },
   "devDependencies": {
-    "@0xsequence/design-system": "^1.5.0",
+    "@0xsequence/design-system": "^1.6.0",
     "@0xsequence/kit": "workspace:*",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@vanilla-extract/css": "^1.14.2",
-    "@vanilla-extract/recipes": "^0.5.2",
     "babel-plugin-module-resolver": "^5.0.2",
     "ethers": "^5.7.2",
     "framer-motion": "^8.5.2",

packages/checkout/src/shared/components/KitCheckoutProvider.tsx

@@ -9,7 +9,6 @@ import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelec
 import { History, Navigation, NavigationContextProvider, CheckoutModalContextProvider, CheckoutSettings } from '../../contexts'
 
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
-import * as sharedStyles from '../../shared/styles.css'
 
 import '@0xsequence/design-system/styles.css'
 
@@ -104,7 +103,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
                   backdropColor="backgroundBackdrop"
                   onClose={() => setOpenCheckoutModal(false)}
                 >
-                  <Box id="sequence-kit-checkout-content" className={sharedStyles.walletContent}>
+                  <Box id="sequence-kit-checkout-content">
                     {getHeader()}
                     {getContent()}
                   </Box>

packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Card, Image, Text } from '@0xsequence/design-system'
+import { Box, Card, Image, Text, Skeleton } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
 import { CoinIcon } from '../../../shared/components/CoinIcon'
-import { Skeleton } from '../../../shared/components/Skeleton'
 
 import { formatDisplay } from '../../../utils'
 
@@ -72,13 +71,13 @@ export const OrderSummarySkeleton = () => {
   return (
     <Card flexDirection="row" alignItems="flex-start" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="2">
-        <Skeleton height="80px" width="80px" />
+        <Skeleton style={{ width: '80px', height: '80px' }} />
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
-          <Skeleton width="100px" height="14px" />
-          <Skeleton width="180px" height="34px" />
+          <Skeleton style={{ width: '100px', height: '14px' }} />
+          <Skeleton style={{ width: '180px', height: '34px' }} />
         </Box>
       </Box>
-      <Skeleton height="14px" width="14px" />
+      <Skeleton style={{ width: '14px', height: '14px' }} />
     </Card>
   )
 }

packages/checkout/src/views/CheckoutSelection/index.tsx

@@ -1,25 +1,28 @@
 import React from 'react'
 import { ethers } from 'ethers'
-import { Box, Button, ChevronRightIcon, Divider, HelpIcon, Text, TooltipPrimitive, Tooltip, PaymentsIcon, vars } from '@0xsequence/design-system'
 import {
-  getNativeTokenInfoByChainId,
-  useBalances,
-  useContractInfo,
-  useTokenMetadata,
-  useProjectAccessKey
-} from '@0xsequence/kit'
+  Box,
+  Button,
+  ChevronRightIcon,
+  Divider,
+  HelpIcon,
+  Text,
+  Tooltip,
+  PaymentsIcon,
+  vars,
+  Skeleton
+} from '@0xsequence/design-system'
+import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
 
 import { useAccount, useConfig } from 'wagmi'
 
 import { OrderSummaryItem } from './component/OrderSummaryItem'
 
 import { fetchSardineClientToken, fetchSardineOrderStatus } from '../../api'
 import { CoinIcon } from '../../shared/components/CoinIcon'
-import { Skeleton } from '../../shared/components/Skeleton'
 import { HEADER_HEIGHT } from '../../constants'
 import { useNavigation, useCheckoutModal } from '../../hooks'
 import { compareAddress, formatDisplay } from '../../utils'
-import * as styles from './styles.css'
 
 export const CheckoutSelection = () => {
   const { chains } = useConfig()
@@ -35,7 +38,7 @@ export const CheckoutSelection = () => {
 
   const { data: contractInfoData, isLoading: isPendingContractInfo } = useContractInfo(
     cryptoCheckoutSettings?.chainId || 1,
-    cryptoCheckoutSettings?.coinQuantity?.contractAddress || '',
+    cryptoCheckoutSettings?.coinQuantity?.contractAddress || ''
   )
 
   const { data: balancesData, isPending: isPendingBalances } = useBalances({
@@ -123,7 +126,8 @@ export const CheckoutSelection = () => {
               side="bottom"
               message={
                 <>
-                  Please note that NFTs are digital assets<br/> ,and as such, cannot be delivered physically.
+                  Please note that NFTs are digital assets
+                  <br /> ,and as such, cannot be delivered physically.
                 </>
               }
             >
@@ -154,7 +158,7 @@ export const CheckoutSelection = () => {
             Total
           </Text>
           {isPending ? (
-            <Skeleton width="100px" height="17px" />
+            <Skeleton style={{ width: '100px', height: '17px' }} />
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
               <CoinIcon imageUrl={coinImageUrl} size={12} />
@@ -198,16 +202,15 @@ export const CheckoutSelection = () => {
         )}
         {displayCryptoCheckout && (isInsufficientBalance || isPending) && (
           <Button
-            className={styles.insufficientBalanceButton}
-            style={{
-              borderRadius: vars.radii.md,
-              height: '56px',
-              justifyContent: 'center'
-            }}
+            shape="square"
             width="full"
-            leftIcon={() => <CoinIcon size={20} imageUrl={coinImageUrl} />}
             variant="glass"
-            label={`Insufficient ${coinSymbol}`}
+            label={
+              <Box placeItems="center" gap="2">
+                <CoinIcon size={20} imageUrl={coinImageUrl} />
+                <Text>Insufficient ${coinSymbol}</Text>
+              </Box>
+            }
             onClick={onClickPayWithCrypto}
             disabled
           />
@@ -216,7 +219,7 @@ export const CheckoutSelection = () => {
       {displayCryptoCheckout && (
         <Box width="full" justifyContent="flex-end">
           {isPending ? (
-            <Skeleton width="102px" height="14px" />
+            <Skeleton style={{ width: '102px', height: '14px' }} />
           ) : (
             <Text fontWeight="bold" fontSize="small" color="text50">
               Balance: {`${formatDisplay(userBalance)} ${coinSymbol}`}