From a16f4b26006f5c16a97cd183216861b6c3fa029d Mon Sep 17 00:00:00 2001 From: Carson <104383295+codebycarson@users.noreply.github.com> Date: Tue, 28 Nov 2023 13:40:36 -0700 Subject: [PATCH 1/2] Styled Components (#101) --- .changeset/funny-pumas-sparkle.md | 5 + packages/react/README.md | 19 + packages/react/package.json | 3 +- .../WalletConnectButton.tsx | 78 ++-- .../components/WalletConnectButton/styles.css | 39 -- .../components/WalletConnectButton/styles.ts | 63 +++ .../components/WalletConnectButton/types.ts | 6 - .../WalletSelectModal/WalletSelectModal.tsx | 181 ++++----- .../components/WalletSelectModal/styles.css | 363 ------------------ .../components/WalletSelectModal/styles.ts | 327 ++++++++++++++++ .../lib/components/WalletSelectModal/types.ts | 4 + .../__tests__/WalletConnectButton.spec.tsx | 19 +- .../src/lib/utils/__tests__/colors.spec.ts | 25 ++ packages/react/src/lib/utils/colors.ts | 17 + yarn.lock | 105 +++++ 15 files changed, 693 insertions(+), 561 deletions(-) create mode 100644 .changeset/funny-pumas-sparkle.md delete mode 100644 packages/react/src/lib/components/WalletConnectButton/styles.css create mode 100644 packages/react/src/lib/components/WalletConnectButton/styles.ts delete mode 100644 packages/react/src/lib/components/WalletSelectModal/styles.css create mode 100644 packages/react/src/lib/components/WalletSelectModal/styles.ts create mode 100644 packages/react/src/lib/utils/__tests__/colors.spec.ts create mode 100644 packages/react/src/lib/utils/colors.ts diff --git a/.changeset/funny-pumas-sparkle.md b/.changeset/funny-pumas-sparkle.md new file mode 100644 index 00000000..01c55f71 --- /dev/null +++ b/.changeset/funny-pumas-sparkle.md @@ -0,0 +1,5 @@ +--- +'@sei-js/react': minor +--- + +Replaced css in /react package with styled components diff --git a/packages/react/README.md b/packages/react/README.md index 70233cbb..11e87f42 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -182,6 +182,25 @@ export default Component; ``` +## Styling +This package uses Styled Components and allows you to override the theme with a primaryColor, secondaryColor, and backgroundColor to tint the text and icons. + +```typescript jsx +import { ThemeProvider } from "styled-components"; + +// Define theme +export const theme = { + primaryColor: '#121212', + secondaryColor: '#8C8C8C', + backgroundColor: '#F1F1F1' +}; + +// Wrap your app in the theme provider + + + +``` + ### Other helpful packages - [@sei-js/core](https://www.npmjs.com/package/@sei-js/core) - TypeScript library containing helper functions for wallet connection, transaction sig diff --git a/packages/react/package.json b/packages/react/package.json index ed677a17..092dc24e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -32,7 +32,8 @@ "@react-icons/all-files": "^4.1.0", "@sei-js/core": "^3.1.1", "buffer": "^6.0.3", - "process": "^0.11.10" + "process": "^0.11.10", + "styled-components": "^6.1.1" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0", diff --git a/packages/react/src/lib/components/WalletConnectButton/WalletConnectButton.tsx b/packages/react/src/lib/components/WalletConnectButton/WalletConnectButton.tsx index 2740e000..eb67e7ed 100644 --- a/packages/react/src/lib/components/WalletConnectButton/WalletConnectButton.tsx +++ b/packages/react/src/lib/components/WalletConnectButton/WalletConnectButton.tsx @@ -1,31 +1,19 @@ -import React, { useContext, useEffect, useRef, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { WalletConnectButtonProps } from './types'; -import './styles.css'; import { IconContext } from '@react-icons/all-files'; -import { IoWalletOutline } from '@react-icons/all-files/io5/IoWalletOutline'; -import { IoLogOutOutline } from '@react-icons/all-files/io5/IoLogOutOutline'; -import { IoCopyOutline } from '@react-icons/all-files/io5/IoCopyOutline'; import { SeiWalletContext } from '../../provider'; -import { isValidCSSColor } from '../../utils'; +import * as Styles from './styles'; import { truncateAddress } from '../../utils/address'; -const WalletConnectButton = ({ buttonClassName, primaryColor, secondaryColor, backgroundColor }: WalletConnectButtonProps) => { +const WalletConnectButton = ({ buttonClassName }: WalletConnectButtonProps) => { const [showMenu, setShowMenu] = useState(false); const [recentlyCopied, setRecentlyCopied] = useState(false); const { connectedWallet, accounts, setTargetWallet, setShowConnectModal } = useContext(SeiWalletContext); - const componentRef = useRef(null); - const ignoreNextClickRef = useRef(false); - const handleClickOutside = (event: MouseEvent) => { - if (ignoreNextClickRef.current) { - ignoreNextClickRef.current = false; - return; - } - if (componentRef.current && !componentRef.current.contains(event.target as Node)) { - setShowMenu(false); - } + event.stopPropagation(); + setShowMenu(false); }; useEffect(() => { @@ -40,25 +28,6 @@ const WalletConnectButton = ({ buttonClassName, primaryColor, secondaryColor, ba }; }, [showMenu]); - useEffect(() => { - const color = primaryColor && isValidCSSColor(primaryColor) ? primaryColor : '#121212'; - document.documentElement.style.setProperty('--wallet-primary-color', color); - document.documentElement.style.setProperty('--wallet-primary-color-11', `${color}11`); - document.documentElement.style.setProperty('--wallet-primary-color-22', `${color}22`); - document.documentElement.style.setProperty('--wallet-primary-color-33', `${color}33`); - document.documentElement.style.setProperty('--wallet-primary-color-44', `${color}44`); - }, [primaryColor]); - - useEffect(() => { - const color = secondaryColor && isValidCSSColor(secondaryColor) ? secondaryColor : '#8C8C8C'; - document.documentElement.style.setProperty('--wallet-secondary-color', color); - }, [secondaryColor]); - - useEffect(() => { - const color = backgroundColor && isValidCSSColor(backgroundColor) ? backgroundColor : '#F1F1F1'; - document.documentElement.style.setProperty('--wallet-background-color', color); - }, [backgroundColor]); - const changeWallet = () => { setShowMenu(false); setShowConnectModal(true); @@ -88,43 +57,42 @@ const WalletConnectButton = ({ buttonClassName, primaryColor, secondaryColor, ba const accountLabel = accounts?.[0] === undefined ? 'connecting...' : truncateAddress(accounts[0].address); return ( -
+ {showMenu && ( -
+ {accounts && ( -
- + + {recentlyCopied ? 'copied' : 'copy address'} -
+ )} -
- + + change wallet -
-
- + + + disconnect -
-
+ + )} -
+ ); }; return ( - <> - {renderButton()} - - ); + {renderButton()} + +); }; export default WalletConnectButton; diff --git a/packages/react/src/lib/components/WalletConnectButton/styles.css b/packages/react/src/lib/components/WalletConnectButton/styles.css deleted file mode 100644 index 00d29f9b..00000000 --- a/packages/react/src/lib/components/WalletConnectButton/styles.css +++ /dev/null @@ -1,39 +0,0 @@ -.connect_wrapper { - position: relative; -} - -.wallet__menu { - position: absolute; - display: flex; - flex-direction: column; - top: 46px; - right: 0; - padding: 12px; - gap: 12px; - background-color: var(--wallet-background-color); - border-radius: 4px; - border: #2c2c2c22 solid 1px; -} - -.wallet__menu--item { - display: flex; - align-items: center; - gap: 12px; - font-weight: 500; - font-size: 1.15rem; - white-space: nowrap; - color: var(--wallet-primary-color); - cursor: pointer; - border-radius: 6px; - padding: 9px; -} - -.wallet__menu--item:hover { - background-color: var(--wallet-primary-color-44); -} - -.wallet__menu--item-icon { - width: 20px; - height: 20px; - color: var(--wallet-primary-color); -} diff --git a/packages/react/src/lib/components/WalletConnectButton/styles.ts b/packages/react/src/lib/components/WalletConnectButton/styles.ts new file mode 100644 index 00000000..77c856d2 --- /dev/null +++ b/packages/react/src/lib/components/WalletConnectButton/styles.ts @@ -0,0 +1,63 @@ +import styled from 'styled-components'; +import { IoWalletOutline } from '@react-icons/all-files/io5/IoWalletOutline'; +import { IoLogOutOutline } from '@react-icons/all-files/io5/IoLogOutOutline'; +import { IoCopyOutline } from '@react-icons/all-files/io5/IoCopyOutline'; +import { addOpacityToColor } from '../../utils/colors'; + +export const ConnectWrapper = styled.div` + position: relative; +`; + +export const WalletMenu = styled.div` + position: absolute; + display: flex; + flex-direction: column; + top: 46px; + right: 0; + padding: 12px; + gap: 12px; + background-color: ${(props) => props.theme.backgroundColor || '#F1F1F1'}; + border-radius: 4px; + border: #2c2c2c22 solid 1px; +`; + +export const WalletMenuItem = styled.div` + display: flex; + align-items: center; + gap: 12px; + font-weight: 500; + font-size: 1.15rem; + white-space: nowrap; + color: ${(props) => props.theme.primaryColor || '#121212'}; + cursor: pointer; + border-radius: 6px; + padding: 9px; + + &:hover { + background-color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.32)}; + } +`; + +export const WalletMenuItemChange = styled(IoWalletOutline)` + width: 20px; + height: 20px; + color: ${(props) => props.theme.primaryColor || '#121212'}; + fill: ${(props) => props.theme.primaryColor || '#121212'}; + stroke: ${(props) => props.theme.primaryColor || '#121212'}; +`; + +export const WalletMenuItemCopy = styled(IoCopyOutline)` + width: 20px; + height: 20px; + color: ${(props) => props.theme.primaryColor || '#121212'}; + fill: ${(props) => props.theme.primaryColor || '#121212'}; + stroke: ${(props) => props.theme.primaryColor || '#121212'}; +`; + +export const WalletMenuItemLogOut = styled(IoLogOutOutline)` + width: 20px; + height: 20px; + color: ${(props) => props.theme.primaryColor || '#121212'}; + fill: ${(props) => props.theme.primaryColor || '#121212'}; + stroke: ${(props) => props.theme.primaryColor || '#121212'}; +`; diff --git a/packages/react/src/lib/components/WalletConnectButton/types.ts b/packages/react/src/lib/components/WalletConnectButton/types.ts index 287cb2a8..9fe10f39 100644 --- a/packages/react/src/lib/components/WalletConnectButton/types.ts +++ b/packages/react/src/lib/components/WalletConnectButton/types.ts @@ -1,9 +1,3 @@ -import { SeiWallet } from '@sei-js/core'; - export type WalletConnectButtonProps = { buttonClassName?: string; - wallets?: SeiWallet[]; - primaryColor?: string; - secondaryColor?: string; - backgroundColor?: string; }; diff --git a/packages/react/src/lib/components/WalletSelectModal/WalletSelectModal.tsx b/packages/react/src/lib/components/WalletSelectModal/WalletSelectModal.tsx index c6e7d4cf..19ce2505 100644 --- a/packages/react/src/lib/components/WalletSelectModal/WalletSelectModal.tsx +++ b/packages/react/src/lib/components/WalletSelectModal/WalletSelectModal.tsx @@ -1,15 +1,10 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useMemo, useState } from 'react'; import { WalletSelectModalProps } from './types'; import { SeiWalletContext } from '../../provider'; -import './styles.css'; -import { AiFillCloseCircle } from '@react-icons/all-files/ai/AiFillCloseCircle'; -import { BiErrorAlt } from '@react-icons/all-files/bi/BiErrorAlt'; -import { BiError } from '@react-icons/all-files/bi/BiError'; -import { FaCheckCircle } from '@react-icons/all-files/fa/FaCheckCircle'; +import * as Styles from './styles'; import { SeiWallet } from '@sei-js/core'; -import { AiFillLeftCircle } from '@react-icons/all-files/ai/AiFillLeftCircle'; -const WalletSelectModal = ({ wallets: inputWallets }: WalletSelectModalProps) => { +const WalletSelectModal = ({ wallets: inputWallets, classNameOverrides }: WalletSelectModalProps) => { const { connectedWallet, setTargetWallet, wallets, connectionError, targetWallet, setConnectionError, showConnectModal, setShowConnectModal } = useContext(SeiWalletContext); @@ -34,7 +29,10 @@ const WalletSelectModal = ({ wallets: inputWallets }: WalletSelectModalProps) => return () => window.removeEventListener('resize', handleResize); }, []); - const isWalletInstalled: boolean = targetWallet !== undefined && window[targetWallet.walletInfo.windowKey as never] !== undefined; + const isWalletInstalled: boolean = useMemo(() => { + if (typeof window === 'undefined') return false; + return targetWallet !== undefined && window[targetWallet.walletInfo.windowKey as never] !== undefined; + }, [targetWallet]); const hasImportantInfo = connectionError || infoTitle; @@ -54,7 +52,7 @@ const WalletSelectModal = ({ wallets: inputWallets }: WalletSelectModalProps) => const isConnectedWallet = connectedWallet?.walletInfo.name === wallet.walletInfo.name; const renderConnection = () => { - if (isConnectedWallet) return ; + if (isConnectedWallet) return ; return null; }; @@ -65,110 +63,115 @@ const WalletSelectModal = ({ wallets: inputWallets }: WalletSelectModalProps) => setConnectionError(undefined); }; + const isWalletTargeted = targetWallet?.walletInfo?.windowKey === wallet.walletInfo.windowKey; + + let CalculatedItemComponent = Styles.WalletItem; + + if (isConnectedWallet) CalculatedItemComponent = Styles.WalletItemConnected; + if (isWalletTargeted) CalculatedItemComponent = Styles.WalletItemTargeted; + return ( -
-
- {wallet.walletInfo.name} -

{wallet.walletInfo.name}

-
+ + + + {wallet.walletInfo.name} + {renderConnection()} -
+ ); }; const renderAdditionalInfo = () => { if (isConnecting) { return ( -
- {targetWallet?.walletInfo.icon} -

Connecting to {targetWallet?.walletInfo.name}...

-
+ + + Connecting to {targetWallet?.walletInfo.name}... + ); } if (!isWalletInstalled && targetWallet) { return ( -
-
+ { setConnectionError(undefined); setTargetWallet(undefined); }}> - -

{targetWallet?.walletInfo?.name || 'Wallet'} not installed

-
-
- -

+ + {targetWallet?.walletInfo?.name || 'Wallet'} not installed + + + + Please ensure you open this webpage from within the {targetWallet?.walletInfo?.name || 'Wallet'} mobile app. -

-
+ + {targetWallet?.walletInfo.website && ( - + Download {targetWallet?.walletInfo.name} - + )} -
+ ); } if (connectionError) { return ( -
-
+ { setConnectionError(undefined); setTargetWallet(undefined); }}> - -

Connection error

-
-
- -

We couldn't connect to {targetWallet?.walletInfo?.name || 'your wallet'}

-
-
-

How to resolve this issue?

-

A pending action or a locked wallet can cause issues. Please open the extension manually and try again.

-
-
+ + Connection error + + + + We couldn't connect to {targetWallet?.walletInfo?.name || 'your wallet'} + + + How to resolve this issue? + + A pending action or a locked wallet can cause issues. Please open the extension manually and try again. + + + ); } if (connectedWallet && !hasImportantInfo) { return ( -
- {targetWallet?.walletInfo.icon} -

Connected to {targetWallet?.walletInfo.name}

-
+ + + Connected to {targetWallet?.walletInfo.name} + ); } if (!hasImportantInfo && isMobile) return null; return ( -
-
setInfoTitle(undefined)}> - setInfoTitle(undefined)} /> -

New to using a wallet?

-
-
-

A Secure Hub for Digital Transactions

-

Wallets provide a secure environment for signing and sending transactions involving your tokens and NFTs.

-
-
-

A modern way to log in

-

Rather than generating new accounts and passwords for each website, simply link your wallet.

-
-
+ + setInfoTitle(undefined)}> + setInfoTitle(undefined)} /> + New to using a wallet? + + + A Secure Hub for Digital Transactions + + Wallets provide a secure environment for signing and sending transactions involving your tokens and NFTs. + + + + A modern way to log in + + Rather than generating new accounts and passwords for each website, simply link your wallet. + + + ); }; @@ -180,21 +183,21 @@ const WalletSelectModal = ({ wallets: inputWallets }: WalletSelectModalProps) => return ( <> {shouldShowHomeInfo && ( -
-

Connect a wallet

- -
+ + Connect a wallet + + )} -
+ {shouldShowHomeInfo && ( <> -
{visibleWallets.map(renderWallet)}
-
+ {visibleWallets.map(renderWallet)} + )} {renderAdditionalInfo()} -
+ ); }; @@ -205,21 +208,19 @@ const WalletSelectModal = ({ wallets: inputWallets }: WalletSelectModalProps) => const title = 'New to using a wallet?'; return ( -
-

setInfoTitle(title)}> - {title} -

-
+ + setInfoTitle(title)}>{title} + ); }; return ( -
-
e.stopPropagation()} className='modal__card'> + + e.stopPropagation()}> {renderContent()} {renderMobileHelper()} -
-
+ + ); }; diff --git a/packages/react/src/lib/components/WalletSelectModal/styles.css b/packages/react/src/lib/components/WalletSelectModal/styles.css deleted file mode 100644 index b7f241b0..00000000 --- a/packages/react/src/lib/components/WalletSelectModal/styles.css +++ /dev/null @@ -1,363 +0,0 @@ -@keyframes walletFadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -:root { - --wallet-primary-color: #121212; - --wallet-primary-color-11: #12121211; - --wallet-primary-color-22: #12121222; - --wallet-primary-color-33: #12121233; - --wallet-primary-color-44: #12121244; - --wallet-secondary-color: #8C8C8C; - --wallet-background-color: #F1F1F1; -} - -.modal__background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - backdrop-filter: blur(3px); - background-color: #f1f1f133; - z-index: 2; - padding: 2rem; -} - -.modal__background * { - display: flex; - flex-direction: row; - margin: 0; - box-sizing: border-box; -} - -.modal__card { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: var(--wallet-background-color); - border-radius: 1rem; - z-index: 10; - padding: 2rem; - max-height: 100%; - width: 100%; - max-width: 720px; - min-height: 440px; - box-shadow: rgba(14, 15, 16, 0.1) 3px 9px 24px; - overflow-x: hidden; - gap: 2rem; - -} - -.card__header { - display: flex; - min-height: 2rem; - width: 100%; - justify-content: space-between; -} - -.card__header--title { - color: var(--wallet-primary-color); -} - -.card__header--close { - transition: 70ms all ease-out; - color: var(--wallet-primary-color); - width: 2rem; - height: 2rem; - cursor: pointer; -} - -.card__header--close:hover { - transform: scale(1.2); -} - -.card__header--close:active { - opacity: 0.75; -} - -.card__content { - display: flex; - flex-direction: row; - flex: 1; - gap: 2rem; - width: 100%; -} - -.card__content--wallets { - display: flex; - flex-direction: column; - gap: 1rem; - width: 280px; - max-width: 280px; - min-width: 280px; - height: fit-content; -} - -.card__content--separator { - height: 100%; - width: 2px; - border-radius: 2px; - background-color: var(--wallet-primary-color-22); -} - -.card__right { - display: flex; - flex-direction: column; - gap: 2rem; - align-items: center; - width: 100%; - padding: 0; -} - -.card__right-centered { - display: flex; - flex-direction: column; - justify-content: center; - gap: 2rem; - align-items: center; - width: 100%; - padding: 0 3rem 0 2rem; - opacity: 0; - animation: walletFadeIn 0.15s 0.3s forwards; -} - -.card__right--item { - display: flex; - flex-direction: column; - gap: 3px; - max-width: 300px; -} - -.card__content--mobile-helper { - display: none; -} - -.card__right--item-title { - color: var(--wallet-primary-color); - font-weight: 600; -} - -.card__right--item-description { - color: var(--wallet-secondary-color); -} - -.card__right--icon { - display: none; -} - -.mobile-only { - display: none; -} - -.desktop-only { - display: unset; -} - -.card__right--error{ - flex-direction: column; - align-items: center; - gap: 2rem; -} - -.card__right--error-icon{ - align-items: center; - justify-content: center; - color: var(--wallet-primary-color); - width: 72px; - height: 72px; -} - -.card__right--error-description{ - color: var(--wallet-secondary-color); - text-align: center; -} - -.card__right--title { - color: var(--wallet-primary-color); - text-align: center; - font-weight: 600; - font-size: 1.25rem; - width: 100%; - gap: 1rem; -} - -.card__right--title-mobile { - color: #8c8c8c; - text-align: center; - width: 100%; -} - -.card__right--download { - padding: 0.5rem 1rem; - border-radius: 30px; - background-color: var(--wallet-primary-color); - color: var(--wallet-background-color); - font-weight: 700; - transition: 50ms all ease-out; -} - -.card__right--download:hover { - opacity: 0.8; -} - -.card__right--download:active { - opacity: 1; -} - -.card__right--connecting-icon { - width: 48px; - height: 48px; - max-width: 48px; - max-height: 48px; - min-width: 48px; - min-height: 48px; - border-radius: 1rem; -} - -.wallet__item { - padding: 0 1rem; - justify-content: space-between; - align-items: center; - border-radius: 0.5rem; - border: transparent solid 2px; - transition: 50ms all ease-out; - user-select: none; -} - -.wallet__item:active { - opacity: 0.75; -} - -.wallet__item:hover { - background-color: var(--wallet-primary-color-11); - cursor: pointer; -} - -.wallet__item-connected { - background-color: var(--wallet-primary-color-11); -} - -.wallet__item-targeted { - border: var(--wallet-primary-color-33) solid 2px !important; -} - -.wallet__item--info { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - padding: 0.5rem; -} - -.wallet__item--info-icon { - border-radius: 50%; - width: 2rem; - height: 2rem; -} - -.wallet__item--info-name { - color: var(--wallet-primary-color); - text-transform: uppercase; - font-size: 1.25rem; -} - -.wallet__item--info-icon { - color: var(--wallet-primary-color-44); - height: 18px; - width: 18px; -} - -.card__right-desktop { - width: 100%; -} - -.card__right--header { - flex-direction: column; - align-items: center; - gap: 2rem; -} - -@media (max-width: 480px) { - .card__right { - justify-content: flex-start; - gap: 0; - flex: 1; - height: fit-content; - } - - .card__right--error { - margin-bottom: 1rem; - } - - .card__content--separator { - display: none; - } - - .card__right-centered { - margin: 2rem 0; - display: none; - } - - .modal__card { - flex-direction: column; - gap: 2rem; - min-height: 224px; - } - - .card__content { - margin: 0; - } - - .card__content--mobile-helper { - display: flex; - } - - .card__right { - padding: 0; - justify-content: flex-start; - margin: 0; - gap: 1rem; - } - - .card__right-desktop { - display: none; - } - - .card__right--header { - flex-direction: row; - align-items: center; - width: 100%; - gap: 1rem; - margin-bottom: 1rem; - } - - .card__right--icon { - display: unset; - width: 2rem; - height: 2rem; - } - - .card__right--title { - font-size: 1.15rem; - width: 100%; - } - - .mobile-only { - display: flex; - } - - .desktop-only { - display: none; - } -} diff --git a/packages/react/src/lib/components/WalletSelectModal/styles.ts b/packages/react/src/lib/components/WalletSelectModal/styles.ts new file mode 100644 index 00000000..beba77cb --- /dev/null +++ b/packages/react/src/lib/components/WalletSelectModal/styles.ts @@ -0,0 +1,327 @@ +import styled, { keyframes } from 'styled-components'; +import { AiFillCloseCircle } from '@react-icons/all-files/ai/AiFillCloseCircle'; +import { BiErrorAlt } from '@react-icons/all-files/bi/BiErrorAlt'; +import { FaCheckCircle } from '@react-icons/all-files/fa/FaCheckCircle'; +import { AiFillLeftCircle } from '@react-icons/all-files/ai/AiFillLeftCircle'; +import { addOpacityToColor } from '../../utils/colors'; + +export const walletFadeIn = keyframes` + 0% { opacity: 0; } + 100% { opacity: 1; } +`; + +export const ModalBackground = styled.div` + display: flex; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + flex-direction: column; + justify-content: center; + align-items: center; + backdrop-filter: blur(3px); + background-color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#f1f1f1', 0.24)}; + z-index: 2; + padding: 2rem; + + & > * { + display: flex; + flex-direction: row; + margin: 0; + box-sizing: border-box; + } +`; + +export const ModalCard = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: ${(props) => props.theme.backgroundColor || '#F1F1F1'}; + border-radius: 1rem; + z-index: 10; + padding: 2rem; + max-height: 100%; + width: 100%; + max-width: 720px; + min-height: 440px; + box-shadow: rgba(14, 15, 16, 0.1) 3px 9px 24px; + overflow-x: hidden; + gap: 2rem; + + @media (max-width: 480px) { + flex-direction: column; + gap: 2rem; + min-height: 224px; + } +`; + +export const CardHeader = styled.div` + display: flex; + min-height: 2rem; + width: 100%; + justify-content: space-between; +`; + +export const CardHeaderTitle = styled.h2` + color: ${(props) => props.theme.primaryColor || '#121212'}; + margin: 0; +`; + +export const CardHeaderClose = styled(AiFillCloseCircle)` + transition: 70ms all ease-out; + color: ${(props) => props.theme.primaryColor || '#121212'}; + width: 2rem; + height: 2rem; + cursor: pointer; + + &:hover { + transform: scale(1.2); + } + + &:active { + opacity: 0.75; + } +`; + +export const CardContent = styled.div` + display: flex; + flex-direction: row; + flex: 1; + gap: 2rem; + width: 100%; + margin: 0; +`; + +export const CardContentWallets = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + width: 280px; + max-width: 280px; + min-width: 280px; + height: fit-content; +`; + +export const CardContentSeparator = styled.div` + display: flex; + height: 100%; + width: 2px; + border-radius: 2px; + background-color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.16)}; + + @media (max-width: 480px) { + display: none; + } +`; + +export const CardRight = styled.div` + display: flex; + flex-direction: column; + gap: 2rem; + align-items: center; + width: 100%; + padding: 0; + + @media (max-width: 480px) { + padding: 0; + justify-content: flex-start; + margin: 0; + gap: 1rem; + flex: 1; + height: fit-content; + } +`; + +export const CardRightCentered = styled.div` + animation: ${walletFadeIn} 0.15s 0.3s forwards; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2rem; + align-items: center; + width: 100%; + padding: 0 3rem 0 2rem; + opacity: 0; + + @media (max-width: 480px) { + margin: 2rem 0; + display: none; + } +`; + +export const CardRightItem = styled.div` + display: flex; + flex-direction: column; + gap: 3px; + max-width: 300px; +`; + +export const CardContentMobileHelper = styled.div` + display: none; + + @media (max-width: 480px) { + display: flex; + } +`; + +export const CardRightItemTitle = styled.p` + color: ${(props) => props.theme.primaryColor || '#121212'}; + font-weight: 600; + margin: 0; +`; + +export const CardRightItemDescription = styled.p` + color: ${(props) => props.theme.secondaryColor || '#8C8C8C'}; + margin: 0; +`; + +export const CardRightIcon = styled(AiFillLeftCircle)` + display: none; + + @media (max-width: 480px) { + display: unset; + width: 2rem; + height: 2rem; + } +`; + +export const CardRightError = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + + @media (max-width: 480px) { + margin-bottom: 1rem; + } +`; + +export const CardRightErrorIcon = styled(BiErrorAlt)` + align-items: center; + justify-content: center; + color: ${(props) => props.theme.primaryColor || '#121212'}; + width: 72px; + height: 72px; +`; + +export const CardRightErrorDescription = styled.p` + color: ${(props) => props.theme.secondaryColor || '#8C8C8C'}; + text-align: center; + margin: 0; +`; + +export const CardRightTitle = styled.p` + color: ${(props) => props.theme.primaryColor || '#121212'}; + text-align: center; + font-weight: 600; + font-size: 1.25rem; + margin: 0; + width: 100%; + gap: 1rem; + + @media (max-width: 480px) { + font-size: 1.15rem; + width: 100%; + } +`; + +export const CardRightDownload = styled.a` + padding: 0.5rem 1rem; + border-radius: 30px; + background-color: ${(props) => props.theme.primaryColor || '#121212'}; + color: ${(props) => props.theme.backgroundColor || '#F1F1F1'}; + font-weight: 700; + transition: 50ms all ease-out; + + &:hover { + opacity: 0.8; + } + + &:active { + opacity: 1; + } +`; + +export const CardRightConnectingIcon = styled.img` + width: 48px; + height: 48px; + max-width: 48px; + max-height: 48px; + min-width: 48px; + min-height: 48px; + border-radius: 1rem; +`; + +export const WalletItem = styled.div` + display: flex; + padding: 0.25rem 0.5rem; + justify-content: space-between; + align-items: center; + border-radius: 0.5rem; + border: transparent solid 2px; + transition: 50ms all ease-out; + user-select: none; + + &:hover { + background-color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.08)}; + cursor: pointer; + } + + &:active { + opacity: 0.75; + } +`; + +export const WalletItemConnected = styled(WalletItem)` + background-color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.08)}; +`; + +export const WalletItemTargeted = styled(WalletItem)` + border: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.24)} solid 2px !important; +`; + +export const WalletItemInfo = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + padding: 0.5rem; +`; + +export const WalletItemInfoName = styled.p` + color: ${(props) => props.theme.primaryColor || '#121212'}; + text-transform: uppercase; + font-size: 1.25rem; + margin: 0; +`; + +export const WalletItemInfoImage = styled.img` + color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.32)}; + border-radius: 50%; + width: 2rem; + height: 2rem; +`; + +export const WalletItemInfoIcon = styled(FaCheckCircle)` + color: ${(props) => addOpacityToColor(props.theme.primaryColor || '#121212', 0.32)}; + border-radius: 50%; + width: 1.25rem; + height: 1.25rem; +`; + +export const CardRightHeader = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + + @media (max-width: 480px) { + flex-direction: row; + align-items: center; + width: 100%; + gap: 1rem; + margin-bottom: 1rem; + } +`; diff --git a/packages/react/src/lib/components/WalletSelectModal/types.ts b/packages/react/src/lib/components/WalletSelectModal/types.ts index 0073fa14..328e312e 100644 --- a/packages/react/src/lib/components/WalletSelectModal/types.ts +++ b/packages/react/src/lib/components/WalletSelectModal/types.ts @@ -2,4 +2,8 @@ import { SeiWallet } from '@sei-js/core'; export type WalletSelectModalProps = { wallets?: SeiWallet[]; + classNameOverrides?: { + background?: string; + card?: string; + }; }; diff --git a/packages/react/src/lib/components/__tests__/WalletConnectButton.spec.tsx b/packages/react/src/lib/components/__tests__/WalletConnectButton.spec.tsx index 231e4dca..143cc5cf 100644 --- a/packages/react/src/lib/components/__tests__/WalletConnectButton.spec.tsx +++ b/packages/react/src/lib/components/__tests__/WalletConnectButton.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; import { WalletConnectButton } from '../WalletConnectButton'; @@ -18,13 +18,7 @@ if (!global.navigator.clipboard) { }; } -const writeTextMock = jest.spyOn(navigator.clipboard, 'writeText'); - describe('WalletConnectButton', () => { - afterEach(() => { - writeTextMock.mockRestore(); - }); - test('renders connect wallet button when not connected', () => { const { getByText } = render( @@ -58,6 +52,8 @@ describe('WalletConnectButton', () => { const connectButton = queryByTestId('connect-wallet'); if (!connectButton) return; + const writeTextMock = jest.spyOn(navigator.clipboard, 'writeText'); + fireEvent.click(connectButton); const copyButton = queryByTestId('copy-address'); @@ -65,5 +61,14 @@ describe('WalletConnectButton', () => { fireEvent.click(copyButton); expect(writeTextMock).toHaveBeenCalled(); + + expect(copyButton.textContent).toContain('copied'); + + jest.advanceTimersByTime(1500); + + // Verify state reverts back after timeout + waitFor(() => { + expect(copyButton.textContent).not.toContain('copied'); + }); }); }); diff --git a/packages/react/src/lib/utils/__tests__/colors.spec.ts b/packages/react/src/lib/utils/__tests__/colors.spec.ts new file mode 100644 index 00000000..82ecf9c5 --- /dev/null +++ b/packages/react/src/lib/utils/__tests__/colors.spec.ts @@ -0,0 +1,25 @@ +import { addOpacityToColor } from '../colors'; + +describe('addOpacityToColor', () => { + it('converts hex color to RGBA', () => { + expect(addOpacityToColor('#ff5733', 0.5)).toBe('rgba(255, 87, 51, 0.5)'); + }); + + it('handles full opacity', () => { + expect(addOpacityToColor('#00ff00', 1)).toBe('rgba(0, 255, 0, 1)'); + }); + + it('handles zero opacity', () => { + expect(addOpacityToColor('#0000ff', 0)).toBe('rgba(0, 0, 255, 0)'); + }); + + it('handles invalid hex color', () => { + expect(() => addOpacityToColor('#xyz', 0.5)).toThrow('Invalid hex color'); + expect(() => addOpacityToColor('123456', 0.5)).toThrow('Invalid hex color'); + }); + + it('handles invalid opacity values', () => { + expect(() => addOpacityToColor('#ff5733', -1)).toThrow('Invalid opacity value'); + expect(() => addOpacityToColor('#ff5733', 2)).toThrow('Invalid opacity value'); + }); +}); diff --git a/packages/react/src/lib/utils/colors.ts b/packages/react/src/lib/utils/colors.ts new file mode 100644 index 00000000..94893ad8 --- /dev/null +++ b/packages/react/src/lib/utils/colors.ts @@ -0,0 +1,17 @@ +export const addOpacityToColor = (color: string, opacity: number) => { + // Check if the hex color is valid + if (!/^#[0-9A-Fa-f]{6}$/.test(color)) { + throw new Error('Invalid hex color'); + } + + // Check if the opacity is a valid number between 0 and 1 + if (opacity < 0 || opacity > 1) { + throw new Error('Invalid opacity value'); + } + + const r = parseInt(color.substring(1, 3), 16); + const g = parseInt(color.substring(3, 5), 16); + const b = parseInt(color.substring(5, 7), 16); + + return `rgba(${r}, ${g}, ${b}, ${opacity})`; +}; diff --git a/yarn.lock b/yarn.lock index e935a41b..a2db2eb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3032,6 +3032,23 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" +"@emotion/is-prop-valid@^1.2.1": + version "1.2.1" + resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" + integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== + dependencies: + "@emotion/memoize" "^0.8.1" + +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/unitless@^0.8.0": + version "0.8.1" + resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + "@eslint/eslintrc@^2.0.0": version "2.0.0" resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz#943309d8697c52fc82c076e90c1c74fbbe69dbff" @@ -4238,6 +4255,11 @@ resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/stylis@^4.0.2": + version "4.2.4" + resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz#14b61f022e832d87d442ae1795e0f0f0b7daa879" + integrity sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ== + "@types/tough-cookie@*": version "4.0.2" resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397" @@ -5034,6 +5056,11 @@ camelcase@^6.2.0: resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001449: version "1.0.30001458" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz#871e35866b4654a7d25eccca86864f411825540c" @@ -5143,6 +5170,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== +classnames@^2.3.2: + version "2.3.2" + resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + cli-color@^2.0.2: version "2.0.3" resolved "https://registry.npmjs.org/cli-color/-/cli-color-2.0.3.tgz#73769ba969080629670f3f2ef69a4bf4e7cc1879" @@ -5405,6 +5437,20 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + +css-to-react-native@^3.2.0: + version "3.2.0" + resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css.escape@^1.5.1: version "1.5.1" resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" @@ -5432,6 +5478,11 @@ csstype@^3.0.2: resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== +csstype@^3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" + integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + csv-generate@^3.4.3: version "3.4.3" resolved "https://registry.npmjs.org/csv-generate/-/csv-generate-3.4.3.tgz#bc42d943b45aea52afa896874291da4b9108ffff" @@ -8323,6 +8374,11 @@ mz@^2.7.0: object-assign "^4.0.1" thenify-all "^1.0.0" +nanoid@^3.3.6: + version "3.3.7" + resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" + integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== + natural-compare-lite@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4" @@ -8747,6 +8803,20 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" +postcss-value-parser@^4.0.2: + version "4.2.0" + resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + +postcss@^8.4.31: + version "8.4.31" + resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== + dependencies: + nanoid "^3.3.6" + picocolors "^1.0.0" + source-map-js "^1.0.2" + preferred-pm@^3.0.0: version "3.0.3" resolved "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.0.3.tgz#1b6338000371e3edbce52ef2e4f65eb2e73586d6" @@ -9301,6 +9371,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -9380,6 +9455,11 @@ smartwrap@^2.0.2: wcwidth "^1.0.1" yargs "^15.1.0" +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map-support@0.5.13: version "0.5.13" resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932" @@ -9626,6 +9706,26 @@ strong-log-transformer@^2.1.0: minimist "^1.2.0" through "^2.3.4" +styled-components@^6.1.1: + version "6.1.1" + resolved "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz#a5414ada07fb1c17b96a26a05369daa4e2ad55e5" + integrity sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ== + dependencies: + "@emotion/is-prop-valid" "^1.2.1" + "@emotion/unitless" "^0.8.0" + "@types/stylis" "^4.0.2" + css-to-react-native "^3.2.0" + csstype "^3.1.2" + postcss "^8.4.31" + shallowequal "^1.1.0" + stylis "^4.3.0" + tslib "^2.5.0" + +stylis@^4.3.0: + version "4.3.0" + resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c" + integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ== + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" @@ -9851,6 +9951,11 @@ tslib@^2.3.0, tslib@^2.4.0: resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== +tslib@^2.5.0: + version "2.6.2" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" From 15f0a375a556a95d234e6c376c665056be06dd2f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 28 Nov 2023 14:42:03 -0700 Subject: [PATCH 2/2] Version Packages (#102) Co-authored-by: github-actions[bot] --- .changeset/funny-pumas-sparkle.md | 5 ----- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/funny-pumas-sparkle.md diff --git a/.changeset/funny-pumas-sparkle.md b/.changeset/funny-pumas-sparkle.md deleted file mode 100644 index 01c55f71..00000000 --- a/.changeset/funny-pumas-sparkle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sei-js/react': minor ---- - -Replaced css in /react package with styled components diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index df037427..5490bf81 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 3.2.0 + +### Minor Changes + +- a16f4b2: Replaced css in /react package with styled components + ## 3.1.1 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 092dc24e..710fc89b 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@sei-js/react", - "version": "3.1.1", + "version": "3.2.0", "description": "React library for front end integrations with Sei", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js",