Add tx history icons (#8180)

* Add tx history icons

* Make size `isRequired`

* Use classnames

* Include keyframes

ui/app/components/ui/button/button.component.js

@@ -44,11 +44,7 @@ Button.propTypes = {
   submit: PropTypes.bool,
   large: PropTypes.bool,
   className: PropTypes.string,
-  children: PropTypes.oneOfType([
+  children: PropTypes.node,
-    PropTypes.string,
-    PropTypes.array,
-    PropTypes.element,
-  ]),
 }
 
 Button.defaultProps = {

ui/app/components/ui/icon/approve-icon.component.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Approve = ({
+  className,
+  size,
+  color,
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z"
+      stroke={color}
+    />
+    <path
+      d="M5.34426 16.0923C5.15708 16.2694 5.15656 16.5672 5.34311 16.745L9.49708 20.7032C9.67134 20.8692 9.94541 20.8687 10.1191 20.7021L10.682 20.1619C10.867 19.9844 10.8665 19.6883 10.6808 19.5114L6.53084 15.557C6.35747 15.3918 6.08509 15.3914 5.91113 15.556L5.34426 16.0923ZM24.0891 10.2959C23.9152 10.1303 23.6419 10.1303 23.4681 10.2961L14.9882 18.3839C14.8143 18.5498 14.5407 18.5497 14.3668 18.3837L11.4072 15.5567C11.2343 15.3916 10.9625 15.3905 10.7882 15.5542L10.2154 16.0924C10.0272 16.2692 10.0261 16.5679 10.2131 16.7461L14.367 20.7042C14.5408 20.8698 14.814 20.8698 14.9878 20.7042L24.6581 11.4897C24.8442 11.3124 24.8442 11.0155 24.6581 10.8382L24.0891 10.2959ZM19.7905 11.4886C19.9761 11.3117 19.9767 11.0156 19.7916 10.8381L19.2288 10.2979C19.0551 10.1313 18.781 10.1308 18.6068 10.2968L13.799 14.878C13.6125 15.0557 13.613 15.3535 13.8002 15.5306L14.367 16.067C14.541 16.2316 14.8134 16.2311 14.9868 16.0659L19.7905 11.4886Z"
+      fill={color}
+    />
+  </svg>
+)
+
+Approve.defaultProps = {
+  className: undefined,
+}
+
+Approve.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+
+export default Approve

ui/app/components/ui/icon/copy-icon.component.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Copy = ({
+  className,
+  size,
+  color,
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 11 11"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z"
+      fill={color}
+    />
+  </svg>
+)
+
+Copy.defaultProps = {
+  className: undefined,
+}
+
+Copy.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+
+export default Copy

ui/app/components/ui/icon/icon.stories.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import Approve from './approve-icon.component'
+import Copy from './copy-icon.component'
+import Interaction from './interaction-icon.component'
+import Preloader from './preloader'
+import Receive from './receive-icon.component'
+import Send from './send-icon.component'
+import { color, number } from '@storybook/addon-knobs/react'
+
+export default {
+  title: 'Icon',
+}
+
+export const copy = () => (
+  <Copy
+    size={number('size', 40)}
+    color={color('color', '#2F80ED')}
+  />
+)
+
+export const send = () => (
+  <Send
+    size={number('size', 40)}
+    color={color('color', '#2F80ED')}
+  />
+)
+
+export const receive = () => (
+  <Receive
+    size={number('size', 40)}
+    color={color('color', '#2F80ED')}
+  />
+)
+
+export const siteInteraction = () => (
+  <Interaction
+    size={number('size', 40)}
+    color={color('color', '#2F80ED')}
+  />
+)
+
+export const approveSpendLimit = () => (
+  <Approve
+    size={number('size', 40)}
+    color={color('color', '#2F80ED')}
+  />
+)
+
+export const preloader = () => (
+  <Preloader
+    size={number('size', 40)}
+  />
+)

ui/app/components/ui/icon/interaction-icon.component.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Interaction = ({
+  className,
+  size,
+  color,
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z"
+      stroke={color}
+    />
+    <path
+      d="M18.8889 18.65C18.8889 18.8433 18.7322 19 18.5389 19H11.4611C11.2678 19 11.1111 18.8433 11.1111 18.65V17.4621C11.1111 17.1479 10.7292 16.9928 10.5102 17.2181L8.2372 19.556C8.10513 19.6919 8.10513 19.9081 8.2372 20.044L10.5102 22.3819C10.7292 22.6072 11.1111 22.4521 11.1111 22.1379V20.95C11.1111 20.7567 11.2678 20.6 11.4611 20.6H20.0944C20.2877 20.6 20.4444 20.4433 20.4444 20.25V16.15C20.4444 15.9567 20.2877 15.8 20.0944 15.8H19.2389C19.0456 15.8 18.8889 15.9567 18.8889 16.15V18.65ZM11.1111 12.35C11.1111 12.1567 11.2678 12 11.4611 12H18.5389C18.7322 12 18.8889 12.1567 18.8889 12.35V13.5379C18.8889 13.8521 19.2708 14.0072 19.4898 13.7819L21.7628 11.444C21.8949 11.3081 21.8949 11.0919 21.7628 10.956L19.4898 8.61812C19.2708 8.39284 18.8889 8.5479 18.8889 8.8621V10.05C18.8889 10.2433 18.7322 10.4 18.5389 10.4H9.90556C9.71226 10.4 9.55556 10.5567 9.55556 10.75V14.85C9.55556 15.0433 9.71226 15.2 9.90556 15.2H10.7611C10.9544 15.2 11.1111 15.0433 11.1111 14.85V12.35Z"
+      fill={color}
+    />
+  </svg>
+)
+
+Interaction.defaultProps = {
+  className: undefined,
+}
+
+Interaction.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+
+export default Interaction

ui/app/components/ui/icon/preloader/index.js

@@ -0,0 +1,3 @@
+import preloader from './preloader-icon.component'
+
+export default preloader

ui/app/components/ui/icon/preloader/index.scss

@@ -0,0 +1,15 @@
+.preloader__icon {
+  animation-name: spin;
+  animation-duration: 500ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from {
+    transform:rotate(0deg);
+  }
+  to {
+    transform:rotate(360deg);
+  }
+}

ui/app/components/ui/icon/preloader/preloader-icon.component.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const Preloader = ({
+  className,
+  size,
+}) => (
+  <svg
+    className={classnames('preloader__icon', className)}
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+      fill="#C1DAEC"
+    />
+    <mask
+      id="mask0"
+      mask-type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="16"
+      height="16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+        fill="#037DD6"
+      />
+    </mask>
+    <g mask="url(#mask0)">
+      <path
+        d="M6.85718 17.9999V11.4285V8.28564H-4.85711V17.9999H6.85718Z"
+        fill="#037DD6"
+      />
+    </g>
+  </svg>
+)
+
+Preloader.defaultProps = {
+  className: undefined,
+}
+
+Preloader.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+}
+
+export default Preloader

ui/app/components/ui/icon/receive-icon.component.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Receive = ({
+  className,
+  size,
+  color,
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.5"
+      y="0.5"
+      width="27"
+      height="27"
+      rx="13.5"
+      stroke={color}
+    />
+    <path
+      d="M14.3465 17.3611C14.3661 17.3402 14.3846 17.3181 14.4018 17.2952L17.597 14.0999C17.7961 13.9063 17.8756 13.6206 17.805 13.352C17.7344 13.0834 17.5246 12.8737 17.2561 12.8031C16.9875 12.7325 16.7017 12.812 16.5082 13.0111L14.5559 14.9633L14.5559 7.25598C14.5616 6.97721 14.4161 6.71715 14.1756 6.5761C13.9351 6.43505 13.6371 6.43505 13.3966 6.5761C13.1561 6.71715 13.0106 6.97721 13.0163 7.25598L13.0163 14.9633L11.064 13.0111C10.8705 12.812 10.5847 12.7325 10.3161 12.8031C10.0476 12.8737 9.83782 13.0834 9.76721 13.352C9.69661 13.6206 9.77608 13.9063 9.97519 14.0999L13.1726 17.2973C13.3093 17.4779 13.5186 17.5891 13.7447 17.6014C13.9709 17.6137 14.191 17.5258 14.3465 17.3611Z"
+      fill={color}
+    />
+    <rect
+      x="7.875"
+      y="19.25"
+      width="12.25"
+      height="1.75"
+      rx="0.875"
+      fill={color}
+    />
+  </svg>
+)
+
+Receive.defaultProps = {
+  className: undefined,
+}
+
+Receive.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+
+export default Receive

ui/app/components/ui/icon/send-icon.component.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Send = ({
+  className,
+  size,
+  color,
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.5"
+      y="0.5"
+      width="29"
+      height="29"
+      rx="14.5"
+      stroke={color}
+    />
+    <path
+      d="M18.5851 9.88921C18.5586 9.89005 18.5321 9.89238 18.5057 9.89618H14.3207C14.0635 9.89254 13.8243 10.0276 13.6947 10.2497C13.565 10.4719 13.565 10.7466 13.6947 10.9687C13.8243 11.1908 14.0635 11.3259 14.3207 11.3222H16.8777L9.53811 18.6614C9.35182 18.8402 9.27679 19.1058 9.34193 19.3557C9.40707 19.6056 9.60222 19.8007 9.85211 19.8658C10.102 19.931 10.3676 19.8559 10.5464 19.6697L17.886 12.3305V14.8874C17.8823 15.1445 18.0175 15.3837 18.2396 15.5133C18.4617 15.643 18.7364 15.643 18.9585 15.5133C19.1806 15.3837 19.3158 15.1445 19.3121 14.8874V10.6997C19.3409 10.4919 19.2767 10.282 19.1366 10.1259C18.9965 9.96973 18.7948 9.88316 18.5851 9.88921Z"
+      fill={color}
+    />
+  </svg>
+)
+
+Send.defaultProps = {
+  className: undefined,
+}
+
+Send.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+
+export default Send

ui/app/css/itcss/components/index.scss

@@ -1,6 +1,7 @@
 @import '../../../components/ui/button/buttons';
 @import '../../../components/ui/dialog/dialog';
 @import '../../../components/ui/snackbar/index';
+@import '../../../components/ui/icon/preloader/index';
 
 @import './footer.scss';
 

ui/app/css/itcss/settings/variables.scss

@@ -267,4 +267,4 @@ $xxlarge-spacing: 64px;
 %content-text {
   @extend %font;
   font-size: 14px;
-}
+}