Merge pull request #227 from NethermindEth/feature/version-labels

feat: add version labels
NethermindEth · Jan 16, 2024 · 3b5825a · 3b5825a
2 parents cf83273 + c69ea64
commit 3b5825a
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 2 deletions.
diff --git a/plugin/src/features/Footer/index.tsx b/plugin/src/features/Footer/index.tsx
@@ -1,11 +1,20 @@
 import React from 'react'
 import Nethermind from '../../components/NM'
 import './style.css'
+import { useAtomValue } from 'jotai'
+import { cairoVersionAtom } from '../../atoms/cairoVersion'
 
 const Footer: React.FC = () => {
+  const version = useAtomValue(cairoVersionAtom)
+
   return (
     <div className="version-wrapper">
-      <div></div>
+      <div>
+        <label className="version-left">
+          <span>Using Cairo: </span>
+          <span>{version}</span>
+        </label>
+      </div>
       <div className="version-right">
         <label className="nethermind-powered">
           <span>Powered by: </span>

diff --git a/plugin/src/features/Footer/style.css b/plugin/src/features/Footer/style.css
@@ -8,11 +8,18 @@
 }
 
 .version-right {
-    justify-self: end; /* This line ensures that .version-right aligns to the right */
+    justify-self: end;
     display: flex;
     flex-direction: column;
 }
 
+.version-left {
+    justify-self: end;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
 .nethermind-powered {
     align-self: end;
     display: flex;

diff --git a/plugin/src/features/Plugin/index.tsx b/plugin/src/features/Plugin/index.tsx
@@ -64,6 +64,9 @@ const Plugin: React.FC = () => {
   const [getVersions, setVersions] = useAtom(versionsAtom)
   const { remixClient } = useRemixClient()
 
+  const envViteVersion: string | undefined = import.meta.env.VITE_VERSION
+  const pluginVersion = envViteVersion !== undefined ? `v${envViteVersion}` : 'v0.2.5'
+
   useEffect(() => {
     const fetchCairoVersions = async (): Promise<void> => {
       try {
@@ -189,6 +192,14 @@ const Plugin: React.FC = () => {
     <StarknetProvider>
       <div className='plugin-wrapper'>
         <div className='plugin-main-wrapper'>
+          <div className={'plugin-version-wrapper'}>
+            <div className={'plugin-version-label'}>
+              ALPHA
+            </div>
+            <div className={'plugin-version'}>
+              Using {pluginVersion}
+            </div>
+          </div>
           <div>
             <Environment />
           </div>

diff --git a/plugin/src/features/Plugin/styles.css b/plugin/src/features/Plugin/styles.css
@@ -49,3 +49,42 @@
 .blank-placeholder {
   min-height: 150px;
 }
+
+.plugin-version {
+  border: none;
+
+/*  make uppercase */
+
+  /* XS Body-Regular */
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px; /* 150% */
+
+  margin: 0;
+}
+
+.plugin-version-wrapper {
+  display: flex;
+  flex-direction: row;
+  margin: 0 16px;
+  padding-top: 3px;
+  border-top: 1px solid var(--light);
+
+  gap: 8px;
+}
+
+.plugin-version-label {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px; /* 180% */
+  letter-spacing: 0.6px;
+
+  background-color: var(--light);
+  padding: 2px;
+
+  border-radius: 3px;
+
+  margin: 0;
+}