Merge branch 'main' of github.com:sei-protocol/sei-js into feature/me…

…tamask-snap # Conflicts: # yarn.lock
sei-protocol · Nov 29, 2023 · 680fa8a · 680fa8a
2 parents 35bc76a + 15f0a37
commit 680fa8a
Show file tree

Hide file tree

Showing 15 changed files with 1,640 additions and 4,081 deletions.
diff --git 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/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
+<ThemeProvider theme={theme}>
+  <YOUR_APP/>
+</ThemeProvider>
+```
+
 ### 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
@@ -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",
@@ -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
@@ -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<boolean>(false);
 	const [recentlyCopied, setRecentlyCopied] = useState<boolean>(false);
 
 	const { connectedWallet, accounts, setTargetWallet, setShowConnectModal } = useContext(SeiWalletContext);
 
-	const componentRef = useRef<HTMLDivElement>(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 (
-			<div className='connect_wrapper'>
+			<Styles.ConnectWrapper>
 				<button
 					disabled={showMenu}
 					className={buttonClassName}
-					onClick={() => {
+					onClick={(e) => {
+						e.stopPropagation();
 						setShowMenu(true);
-						ignoreNextClickRef.current = true;
 					}}>
 					{accountLabel}
 				</button>
 				{showMenu && (
-					<div ref={componentRef} className='wallet__menu'>
+					<Styles.WalletMenu>
 						{accounts && (
-							<div data-testid='copy-address' className='wallet__menu--item' onClick={copyAddress}>
-								<IoCopyOutline className='wallet__menu--item-icon' />
+							<Styles.WalletMenuItem data-testid='copy-address' onClick={copyAddress}>
+								<Styles.WalletMenuItemCopy />
 								<span>{recentlyCopied ? 'copied' : 'copy address'}</span>
-							</div>
+							</Styles.WalletMenuItem>
 						)}
-						<div data-testid='change-wallet' className='wallet__menu--item' onClick={changeWallet}>
-							<IoWalletOutline className='wallet__menu--item-icon' />
+						<Styles.WalletMenuItem data-testid='change-wallet' onClick={changeWallet}>
+							<Styles.WalletMenuItemChange />
 							<span>change wallet</span>
-						</div>
-						<div data-testid='disconnect-button' className='wallet__menu--item' onClick={disconnect}>
-							<IoLogOutOutline className='wallet__menu--item-icon' />
+						</Styles.WalletMenuItem>
+						<Styles.WalletMenuItem data-testid='disconnect-button' onClick={disconnect}>
+							<Styles.WalletMenuItemLogOut />
 							<span>disconnect</span>
-						</div>
-					</div>
+						</Styles.WalletMenuItem>
+					</Styles.WalletMenu>
 				)}
-			</div>
+			</Styles.ConnectWrapper>
 		);
 	};
 
 	return (
-		<>
-			<IconContext.Provider value={{ color: 'var(--wallet-primary-color)', size: '50px' }}>{renderButton()}</IconContext.Provider>
-		</>
-	);
+	<IconContext.Provider value={{ color: '#121212', size: '50px' }}>{renderButton()}</IconContext.Provider>
+
+);
 };
 
 export default WalletConnectButton;
diff --git a/packages/react/src/lib/components/WalletConnectButton/styles.css b/packages/react/src/lib/components/WalletConnectButton/styles.css
diff --git a/packages/react/src/lib/components/WalletConnectButton/styles.ts 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
@@ -1,9 +1,3 @@
-import { SeiWallet } from '@sei-js/core';
-
 export type WalletConnectButtonProps = {
 	buttonClassName?: string;
-	wallets?: SeiWallet[];
-	primaryColor?: string;
-	secondaryColor?: string;
-	backgroundColor?: string;
 };