From 46adb601af7a8a17ebcc3b53d44a7268fe5c66ef Mon Sep 17 00:00:00 2001
From: dcodes05 <danutcodes@gmail.com>
Date: Sat, 9 Sep 2023 21:08:57 +0200
Subject: [PATCH] feat: history transaction icons

---
 .../components/TransactionIcon.stories.tsx    | 41 +++++++++++
 .../src/components/TransactionIcon.tsx        | 68 +++++++++++++++++++
 libs/shared/assets/files/Received.svg         | 14 ++++
 libs/shared/assets/files/Send.svg             | 14 ++++
 libs/shared/assets/files/Swap.svg             | 17 +++++
 libs/shared/assets/files/Yield.svg            | 17 +++++
 6 files changed, 171 insertions(+)
 create mode 100644 libs/oeth/history/src/components/TransactionIcon.stories.tsx
 create mode 100644 libs/oeth/history/src/components/TransactionIcon.tsx
 create mode 100644 libs/shared/assets/files/Received.svg
 create mode 100644 libs/shared/assets/files/Send.svg
 create mode 100644 libs/shared/assets/files/Swap.svg
 create mode 100644 libs/shared/assets/files/Yield.svg

diff --git a/libs/oeth/history/src/components/TransactionIcon.stories.tsx b/libs/oeth/history/src/components/TransactionIcon.stories.tsx
new file mode 100644
index 000000000..fc9191b1e
--- /dev/null
+++ b/libs/oeth/history/src/components/TransactionIcon.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TransactionIcon } from './TransactionIcon';
+
+const meta: Meta<typeof TransactionIcon> = {
+  component: TransactionIcon,
+  title: 'History/TransactionIcon',
+  args: {
+    type: 'yield',
+  },
+};
+
+export default meta;
+
+export const Yield: StoryObj<typeof TransactionIcon> = {};
+
+export const SmallScreen: StoryObj<typeof TransactionIcon> = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+};
+
+export const Sent: StoryObj<typeof TransactionIcon> = {
+  args: {
+    type: 'sent',
+  },
+};
+
+export const Received: StoryObj<typeof TransactionIcon> = {
+  args: {
+    type: 'received',
+  },
+};
+
+export const Swap: StoryObj<typeof TransactionIcon> = {
+  args: {
+    type: 'swap',
+    tokenIcon: 'https://app.oeth.com/images/currency/reth-icon-small.png',
+  },
+};
diff --git a/libs/oeth/history/src/components/TransactionIcon.tsx b/libs/oeth/history/src/components/TransactionIcon.tsx
new file mode 100644
index 000000000..29e0390e7
--- /dev/null
+++ b/libs/oeth/history/src/components/TransactionIcon.tsx
@@ -0,0 +1,68 @@
+import { Box } from '@mui/material';
+import React from 'react';
+
+type Props =
+  | {
+      type: 'sent' | 'received' | 'yield';
+    }
+  | { type: 'swap'; tokenIcon: string };
+
+export function TransactionIcon(props: Props) {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: { xs: '1.375rem', md: '2rem' },
+        height: { xs: '1.375rem', md: '2rem' },
+      }}
+    >
+      <Box
+        component="img"
+        src={props.type === 'yield' ? '/images/Yield.svg' : '/images/oeth.svg'}
+        sx={{
+          width: '100%',
+          height: '100%',
+        }}
+      ></Box>
+      <Box
+        sx={{
+          width: { xs: '0.75rem', md: '1rem' },
+          height: { xs: '0.75rem', md: '1rem' },
+          position: 'absolute',
+          right: '-0.4rem',
+          bottom: 0,
+          zIndex: 1,
+        }}
+        component="img"
+        src={
+          props.type === 'sent'
+            ? '/images/Send.svg'
+            : props.type === 'received' || props.type === 'yield'
+            ? '/images/Received.svg'
+            : '/images/Swap.svg'
+        }
+      ></Box>
+      {props.type === 'swap' && (
+        <Box
+          sx={{
+            position: 'absolute',
+            height: '100%',
+            width: '50%',
+            overflow: 'hidden',
+            top: 0,
+            left: 0,
+          }}
+        >
+          <Box
+            sx={{
+              width: { xs: '1.375rem', md: '2rem' },
+              height: { xs: '1.375rem', md: '2rem' },
+            }}
+            component="img"
+            src={props.tokenIcon}
+          ></Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/libs/shared/assets/files/Received.svg b/libs/shared/assets/files/Received.svg
new file mode 100644
index 000000000..a9664ed96
--- /dev/null
+++ b/libs/shared/assets/files/Received.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Sml Txn Icon / Received">
+<g clip-path="url(#clip0_2434_32050)">
+<circle id="Ellipse 87" cx="8" cy="8" r="8" fill="#1E1F25"/>
+<path id="Arrow 1" d="M11.5 8.5C11.7761 8.5 12 8.27614 12 8C12 7.72386 11.7761 7.5 11.5 7.5V8.5ZM4.14645 7.64645C3.95118 7.84171 3.95118 8.15829 4.14645 8.35355L7.32843 11.5355C7.52369 11.7308 7.84027 11.7308 8.03553 11.5355C8.2308 11.3403 8.2308 11.0237 8.03553 10.8284L5.20711 8L8.03553 5.17157C8.2308 4.97631 8.2308 4.65973 8.03553 4.46447C7.84027 4.2692 7.52369 4.2692 7.32843 4.46447L4.14645 7.64645ZM11.5 7.5L4.5 7.5V8.5H11.5V7.5Z" fill="white"/>
+</g>
+<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#1E1F25"/>
+</g>
+<defs>
+<clipPath id="clip0_2434_32050">
+<rect width="16" height="16" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/libs/shared/assets/files/Send.svg b/libs/shared/assets/files/Send.svg
new file mode 100644
index 000000000..34aca34c1
--- /dev/null
+++ b/libs/shared/assets/files/Send.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Sml Txn Icon / Send">
+<g clip-path="url(#clip0_2434_12122)">
+<circle id="Ellipse 87" cx="8" cy="8" r="8" fill="#1E1F25"/>
+<path id="Arrow 1" d="M4.5 8.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5V8.5ZM11.8536 7.64645C12.0488 7.84171 12.0488 8.15829 11.8536 8.35355L8.67157 11.5355C8.47631 11.7308 8.15973 11.7308 7.96447 11.5355C7.7692 11.3403 7.7692 11.0237 7.96447 10.8284L10.7929 8L7.96447 5.17157C7.7692 4.97631 7.7692 4.65973 7.96447 4.46447C8.15973 4.2692 8.47631 4.2692 8.67157 4.46447L11.8536 7.64645ZM4.5 7.5L11.5 7.5V8.5H4.5V7.5Z" fill="white"/>
+</g>
+<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#1E1F25"/>
+</g>
+<defs>
+<clipPath id="clip0_2434_12122">
+<rect width="16" height="16" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/libs/shared/assets/files/Swap.svg b/libs/shared/assets/files/Swap.svg
new file mode 100644
index 000000000..4a9983d31
--- /dev/null
+++ b/libs/shared/assets/files/Swap.svg
@@ -0,0 +1,17 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Sml Txn Icon / Received">
+<g clip-path="url(#clip0_2434_32222)">
+<ellipse id="Ellipse 87" cx="8" cy="8.99785" rx="8" ry="7.99931" fill="#1E1F25"/>
+<g id="Group 4107">
+<path id="Rectangle 765" d="M8.77908 8.88685H9.94575C10.5901 8.88685 11.1124 8.36456 11.1124 7.72028C11.1124 7.076 10.5901 6.55371 9.94575 6.55371H5.66797L7.22352 4.99829" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Rectangle 766" d="M7.22483 9.109H6.05816C5.41383 9.109 4.89149 9.63129 4.89149 10.2756C4.89149 10.9198 5.41383 11.4421 6.05816 11.4421H10.3359L8.78038 12.9976" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<rect x="0.5" y="1.49854" width="15" height="14.9986" rx="7.49931" stroke="#1E1F25"/>
+</g>
+<defs>
+<clipPath id="clip0_2434_32222">
+<rect y="0.998535" width="16" height="15.9986" rx="7.99931" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/libs/shared/assets/files/Yield.svg b/libs/shared/assets/files/Yield.svg
new file mode 100644
index 000000000..9d3263cc2
--- /dev/null
+++ b/libs/shared/assets/files/Yield.svg
@@ -0,0 +1,17 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Txn Icon / Yield">
+<g clip-path="url(#clip0_2434_12077)">
+<circle id="Ellipse 86" cx="16" cy="16" r="16" fill="#0074F0"/>
+<g id="Group 4068">
+<path id="Vector" d="M9.59752 21.2727L21.2623 9.60798C21.5746 9.29566 22.1403 9.35459 22.3937 9.60798C22.706 9.9203 22.706 10.4268 22.3937 10.7394L10.729 22.4042C10.4166 22.7165 9.8509 22.6576 9.59752 22.4042C9.2852 22.0918 9.2852 21.5854 9.59752 21.2727Z" fill="#FAFBFB"/>
+<path id="Vector_2" d="M20.2399 17.9045C19.6034 17.9045 18.9929 18.1574 18.543 18.6077C18.0927 19.0577 17.8398 19.6681 17.8398 20.3046C17.8398 20.9413 18.0927 21.5517 18.543 22.0017C18.993 22.4517 19.6034 22.7046 20.2399 22.7046C20.8766 22.7046 21.487 22.4517 21.937 22.0017C22.387 21.5517 22.6399 20.9412 22.6399 20.3046C22.6399 19.6681 22.387 19.0576 21.937 18.6077C21.487 18.1574 20.8765 17.9045 20.2399 17.9045Z" fill="#FAFBFB"/>
+<path id="Vector_3" d="M10.0313 10.0794C10.4812 9.62908 11.0917 9.37622 11.7281 9.37622C12.3648 9.37622 12.9753 9.62909 13.4253 10.0794C13.8753 10.5293 14.1282 11.1398 14.1282 11.7762C14.1282 12.4129 13.8753 13.0234 13.4253 13.4734C12.9753 13.9234 12.3648 14.1762 11.7281 14.1762C11.0917 14.1762 10.4813 13.9234 10.0313 13.4734C9.58098 13.0234 9.32812 12.4129 9.32812 11.7762C9.32812 11.1398 9.58099 10.5294 10.0313 10.0794Z" fill="#FAFBFB"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2434_12077">
+<rect width="32" height="32" rx="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>