From d6a8fcda9c8ee761320bdbe9752507b3d0caf09a Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 1 Mar 2022 20:51:42 +0000
Subject: [PATCH] start svg based vesting timeline

---
 nym-wallet/src/svg-icons/vesting-timeline.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 nym-wallet/src/svg-icons/vesting-timeline.tsx

diff --git a/nym-wallet/src/svg-icons/vesting-timeline.tsx b/nym-wallet/src/svg-icons/vesting-timeline.tsx
new file mode 100644
index 0000000000..2271d521ec
--- /dev/null
+++ b/nym-wallet/src/svg-icons/vesting-timeline.tsx
@@ -0,0 +1,18 @@
+import React, { useContext } from 'react'
+import { ClientContext } from '../context/main'
+
+export const VestingTimeline: React.FC = () => {
+  const { userBalance } = useContext(ClientContext)
+
+  const arr = new Array(userBalance.originalVesting?.number_of_periods).fill(undefined)
+  return (
+    <svg width="250" height="20" viewBox="0 0 250 8">
+      <rect y="2" width="242px" height="8" rx="0" fill="#E6E6E6" />
+      <rect y="2" width={25} height="8" rx="0" fill="#121726" />
+      <rect width="4" height="12" rx="1" fill="#121726" />
+      {arr.map((e, i) => (
+        <rect x={(i + 1) * 30} width="4" height="12" rx="1" fill="#B9B9B9" />
+      ))}
+    </svg>
+  )
+}