Merge pull request #105 from etherspot/develop

Version 0.24.0 release

.gitignore

@@ -2,5 +2,6 @@ node_modules/
 dist/
 .idea
 .env
+types/
 
 .DS_Store

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "prettier.printWidth": 120,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

jest.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  preset: 'ts-jest',
+
+  // The root of your source code, typically /src
+  // `<rootDir>` is a token Jest substitutes
+  roots: ['<rootDir>/src'],
+
+  // Jest transformations -- this adds support for TypeScript
+  // using ts-jest
+  transform: {
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+
+  // Runs special logic, such as cleaning up components
+  // when using React Testing Library and adds special
+  // extended assertions to Jest
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+
+  // Test spec file resolution pattern
+  // Matches parent folder `__tests__` and filename
+  // should contain `test` or `spec`.
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  // transformIgnorePatterns: [`/node_modules/*`],
+  // Module file extensions for importing
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironment: 'jsdom',
+  verbose: true,
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etherspot/react-transaction-buidler",
-  "version": "0.23.8",
+  "version": "0.24.0",
   "description": "Etherspot React component.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -18,14 +18,17 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
-    "@types/jest": "^29.2.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.4.0",
     "@types/react": "^18.0.15",
     "@types/styled-components": "^5.1.25",
     "babel-loader": "^8.2.5",
     "chokidar": "^3.5.3",
     "cssnano": "^5.1.14",
     "dotenv": "^16.0.3",
-    "jest": "^29.3.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "postcss-cssnext": "^3.1.1",
     "postcss-nested": "^6.0.0",
     "postcss-simple-vars": "^7.0.0",
@@ -34,10 +37,12 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.7.4"
   },
   "scripts": {
     "test": "jest",
+    "test:watch": "jest --watch",
     "prepare": "npm run rollup:build",
     "postinstall": "rm -rf node_modules/react node_modules/react-dom",
     "rollup:build": "NODE_OPTIONS=--max-old-space-size=8192 rollup -c",

src/components/AccountSwitchInput/AccountSwitchInput.tsx

@@ -26,9 +26,7 @@ const AccountSwitchInput = ({
   hideKeyBased = false,
   showTotals = false,
 }: AccountSwitchInputProps) => {
-  let walletOptions = [
-    { title: 'Smart Wallet', value: DestinationWalletEnum.Contract},
-  ];
+  let walletOptions = [{ title: 'Smart Wallet', value: DestinationWalletEnum.Contract }];
 
   if (!hideKeyBased) {
     walletOptions = [{ title: 'Key based', value: DestinationWalletEnum.Key }, ...walletOptions];

src/components/Button/SecondaryButton.tsx

@@ -6,18 +6,14 @@ const SecondaryButton = styled.button<{
   marginTop?: number;
   fontSize?: number;
 }>`
-  font-family: "PTRootUIWebMedium", sans-serif;
+  font-family: 'PTRootUIWebMedium', sans-serif;
   border: none;
   background: transparent;
   font-size: 16px;
   padding: 0;
   ${({ marginTop }) => marginTop && `margin-top: ${marginTop}px`};
   color: ${({ color, theme }) => color || theme.color.text.buttonSecondary};
   cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
 `;
 
 export default SecondaryButton;

src/components/Image/EtherspotLogo.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface EtherspotLogoProps {
+  width?: number;
+  height?: number;
+  style?: React.CSSProperties;
+}
+
+const EtherspotLogo = ({ width, height, style }: EtherspotLogoProps) => (
+  <svg width={width} height={height} viewBox="0 0 43 54" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <path d="M12.5774 40.2469L21.1237 26.0747L29.67 40.2469L21.1237 45.3039L12.5774 40.2469Z" fill="currentColor" />
+    <path
+      d="M21.1237 20.4037C26.0155 20.4037 29.9811 16.4381 29.9811 11.5463C29.9811 6.65454 26.0155 2.68896 21.1237 2.68896C16.2319 2.68896 12.2664 6.65454 12.2664 11.5463C12.2664 16.4381 16.2319 20.4037 21.1237 20.4037Z"
+      fill="currentColor"
+    />
+    <path
+      d="M21.1237 9.80078C16.9772 9.80089 12.9225 11.0213 9.46481 13.3099C6.00714 15.5986 3.29949 18.8542 1.67932 22.671C0.0591475 26.4879 -0.401892 30.6972 0.353662 34.7742C1.10922 38.8513 3.04795 42.6158 5.92823 45.5986L21.1237 20.4038L36.3171 45.5986C39.1982 42.6163 41.1378 38.8519 41.894 34.7747C42.6501 30.6975 42.1894 26.4879 40.5694 22.6707C38.9493 18.8536 36.2414 15.5977 32.7835 13.3091C29.3255 11.0205 25.2704 9.80035 21.1237 9.80078ZM5.96096 33.5405C5.57028 33.5405 5.18838 33.4246 4.86357 33.2075C4.53875 32.9904 4.28562 32.6819 4.1362 32.3209C3.98679 31.9599 3.9478 31.5627 4.02417 31.1795C4.10054 30.7964 4.28883 30.4445 4.56523 30.1684C4.84163 29.8923 5.19371 29.7044 5.57694 29.6284C5.96017 29.5524 6.35732 29.5918 6.71814 29.7416C7.07897 29.8914 7.38727 30.1448 7.60403 30.4699C7.82079 30.7949 7.93627 31.177 7.93587 31.5676C7.93668 31.8275 7.88619 32.085 7.7873 32.3253C7.68841 32.5656 7.54308 32.784 7.35961 32.9681C7.17614 33.1521 6.95816 33.2981 6.71816 33.3978C6.47815 33.4974 6.22083 33.5487 5.96096 33.5487V33.5405ZM10.8072 25.6368C10.417 25.6368 10.0355 25.5211 9.71109 25.3043C9.38666 25.0875 9.13378 24.7794 8.98446 24.4189C8.83514 24.0584 8.79608 23.6618 8.87221 23.2791C8.94833 22.8964 9.13622 22.5448 9.41213 22.2689C9.68804 21.993 10.0396 21.8051 10.4223 21.729C10.805 21.6529 11.2016 21.6919 11.5621 21.8413C11.9226 21.9906 12.2307 22.2435 12.4475 22.5679C12.6643 22.8923 12.78 23.2738 12.78 23.664C12.7811 23.9237 12.7308 24.1811 12.6322 24.4214C12.5335 24.6617 12.3884 24.8802 12.2051 25.0642C12.0218 25.2483 11.8039 25.3944 11.564 25.494C11.3241 25.5937 11.0669 25.645 10.8072 25.645V25.6368ZM31.4464 25.6368C31.0562 25.6368 30.6747 25.5211 30.3503 25.3043C30.0259 25.0875 29.773 24.7794 29.6237 24.4189C29.4744 24.0584 29.4353 23.6618 29.5114 23.2791C29.5876 22.8964 29.7754 22.5448 30.0514 22.2689C30.3273 21.993 30.6788 21.8051 31.0615 21.729C31.4442 21.6529 31.8409 21.6919 32.2014 21.8413C32.5618 21.9906 32.87 22.2435 33.0867 22.5679C33.3035 22.8923 33.4192 23.2738 33.4192 23.664C33.42 23.9236 33.3696 24.1809 33.2709 24.4211C33.1721 24.6613 33.0269 24.8796 32.8437 25.0636C32.6604 25.2477 32.4427 25.3937 32.2029 25.4935C31.9632 25.5932 31.7061 25.6447 31.4464 25.645V25.6368ZM36.2905 33.5405C35.8997 33.5409 35.5176 33.4254 35.1925 33.2085C34.8675 32.9917 34.614 32.6832 34.4643 32.3223C34.3145 31.9613 34.2753 31.5641 34.3514 31.1808C34.4275 30.7975 34.6157 30.4454 34.892 30.1691C35.1683 29.8928 35.5204 29.7047 35.9037 29.6285C36.287 29.5524 36.6842 29.5917 37.0452 29.7414C37.4061 29.8911 37.7145 30.1446 37.9314 30.4697C38.1482 30.7947 38.2638 31.1769 38.2634 31.5676C38.2644 31.8274 38.2142 32.0848 38.1155 32.3251C38.0169 32.5654 37.8717 32.7839 37.6884 32.9679C37.5051 33.152 37.2873 33.2981 37.0474 33.3977C36.8075 33.4974 36.5503 33.5487 36.2905 33.5487V33.5405Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.7719 3.9457C12.3817 3.9457 12.0003 3.82999 11.6759 3.61321C11.3514 3.39643 11.0986 3.08831 10.9492 2.72782C10.7999 2.36733 10.7609 1.97066 10.837 1.58797C10.9131 1.20527 11.101 0.853753 11.3769 0.577845C11.6528 0.301936 12.0043 0.114031 12.387 0.037908C12.7697 -0.0382149 13.1664 0.000856708 13.5269 0.150177C13.8874 0.299498 14.1955 0.552371 14.4123 0.876804C14.6291 1.20124 14.7448 1.58267 14.7448 1.97287C14.745 2.23202 14.6942 2.48867 14.5952 2.72815C14.4961 2.96763 14.3508 3.18521 14.1675 3.36846C13.9843 3.55171 13.7667 3.69703 13.5272 3.79608C13.2877 3.89513 13.0311 3.94597 12.7719 3.9457Z"
+      fill="currentColor"
+    />
+    <path
+      d="M29.4715 3.9457C29.0814 3.94529 28.7002 3.82926 28.376 3.61224C28.0519 3.39521 27.7993 3.08695 27.6503 2.72642C27.5013 2.3659 27.4625 1.96928 27.5389 1.58672C27.6152 1.20416 27.8033 0.852823 28.0793 0.577119C28.3553 0.301416 28.7068 0.113715 29.0895 0.0377574C29.4721 -0.0381999 29.8687 0.000995853 30.229 0.150376C30.5894 0.299757 30.8974 0.552614 31.1141 0.877004C31.3308 1.20139 31.4464 1.58276 31.4464 1.97287C31.4464 2.23212 31.3953 2.48881 31.2961 2.7283C31.1968 2.96779 31.0513 3.18536 30.8679 3.36859C30.6845 3.55181 30.4667 3.6971 30.2271 3.79613C29.9875 3.89515 29.7308 3.94596 29.4715 3.9457Z"
+      fill="currentColor"
+    />
+    <path d="M12.5876 43.3291L21.1237 48.4597V53.9608L12.5876 43.3291Z" fill="currentColor" />
+    <path d="M29.6598 43.3291L21.1238 48.4597V53.9608L29.6598 43.3291Z" fill="currentColor" />
+  </svg>
+);
+
+EtherspotLogo.defaultProps = {
+  width: 24,
+  height: 24,
+};
+
+export default EtherspotLogo;

src/components/Menu/MenuItem.tsx

@@ -0,0 +1,30 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+
+interface MenuItemProps {
+  title: string;
+  icon: ReactElement;
+  onClick: Function;
+}
+
+const MenuItemStyled = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-right: 12px;
+  cursor: pointer;
+
+  :hover {
+    color: ${({ theme }) => theme.color.text.settingsIcon};
+  }
+`;
+
+const MenuItem = ({ title, icon, onClick }: MenuItemProps) => (
+  <MenuItemStyled onClick={(event) => onClick(event)}>
+    {!!icon && icon}
+    {title}
+  </MenuItemStyled>
+);
+
+export default MenuItem;

src/components/Menu/MenuItemAnchor.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+
+interface MenuItemAnchorProps {
+  link: string;
+  title: string;
+  icon?: ReactElement;
+}
+
+const MenuItemAnchorStyled = styled.a`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-right: 12px;
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.color.text.topMenu};;
+  
+  :visited {
+    color: ${({ theme }) => theme.color.text.topMenu};
+    text-decoration: none;
+  }
+
+  :hover {
+    color: ${({ theme }) => theme.color.text.settingsIcon};
+    text-decoration: none;
+  }
+`;
+
+const MenuItemAnchor = ({ link, title, icon }: MenuItemAnchorProps) => (
+  <MenuItemAnchorStyled href={link} title={title} target="_blank">
+    {!!icon && icon}
+    {title}
+  </MenuItemAnchorStyled>
+);
+
+export default MenuItemAnchor;

src/components/NetworkAssetSelectInput/NetworkAssetSelectInput.tsx

@@ -239,7 +239,7 @@ interface SelectInputProps {
   hideChainIds?: number[];
   walletAddress?: string | null;
   showQuickInputButtons?: boolean;
-  accountType: string;
+  accountType?: string;
 }
 
 const NetworkAssetSelectInput = ({

src/components/SettingMenu/SettingMenu.tsx

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react';
+import { BsClockHistory } from 'react-icons/bs';
+import { IoMdLogOut } from 'react-icons/io';
+import { MdOutlineSettings, MdOutlineDashboardCustomize } from 'react-icons/md';
+import styled, { useTheme } from 'styled-components';
+import { useTransactionBuilderModal } from '../../hooks';
+import useOnClickOutside from '../../hooks/useOnClickOutside';
+import { Theme } from '../../utils/theme';
+import History from '../History';
+import MenuItemAnchor from '../Menu/MenuItemAnchor';
+import MenuItem from '../Menu/MenuItem';
+import EtherspotLogo from '../Image/EtherspotLogo';
+
+const MenuWrapper = styled.div`
+  z-index: 10;
+  position: absolute;
+  top: 40px;
+  right: 15px;
+  background: ${({ theme }) => theme.color.background.topMenu};
+  color: ${({ theme }) => theme.color.text.topMenu};
+  border-radius: 5px;
+  padding: 12px 16px;
+  font-size: 14px;
+  text-align: left;
+  box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
+`;
+
+const MenuButton = styled(MdOutlineSettings)`
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.5;
+  }
+`;
+
+export interface SettingMenuProps {
+  showLogout?: boolean;
+  logout: Function;
+}
+
+const SettingMenu = ({ showLogout, logout }: SettingMenuProps) => {
+  const [showMenu, setShowMenu] = useState<boolean>(false);
+
+  const menuRef = useRef<null | HTMLDivElement>(null);
+  const theme: Theme = useTheme();
+  const { showModal } = useTransactionBuilderModal();
+
+  const hideMenu = () => setShowMenu(false);
+  useOnClickOutside(menuRef, hideMenu);
+
+  return (
+    <>
+      <MenuButton
+        data-testid="builder-setting-menu"
+        color={theme?.color?.background?.topMenuButton}
+        size={18}
+        onClick={() => setShowMenu(!showMenu)}
+      />
+      {showMenu && (
+        <MenuWrapper ref={menuRef}>
+          <MenuItemAnchor
+            title="Dashboard"
+            link="https://dashboard.etherspot.io"
+            icon={<MdOutlineDashboardCustomize size={16} style={{ marginRight: '12px' }} />}
+          />
+          <MenuItem
+            icon={<BsClockHistory size={16} style={{ marginRight: '12px' }} />}
+            title="History"
+            onClick={() => {
+              hideMenu();
+              showModal(<History />);
+            }}
+          />
+          <MenuItemAnchor
+            title="About Etherspot"
+            link="https://etherspot.io/"
+            icon={<EtherspotLogo width={16} height={16} style={{ marginRight: '12px' }} />}
+          />
+          {showLogout && (
+            <MenuItem
+              icon={<IoMdLogOut size={16} style={{ marginRight: '12px' }} />}
+              onClick={() => {
+                logout();
+              }}
+              title={'Logout'}
+            />
+          )}
+        </MenuWrapper>
+      )}
+    </>
+  );
+};
+
+export default SettingMenu;