Feat/stake gateway2.5 updates

packages/boba/gateway/src/components/dao/LinearProgress/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { ProgressBar, Line, Circle, Label, LabelContainer } from './style'
+import { LinearProgressProps } from './types'
+
+export const LinearProgress: React.FC<LinearProgressProps> = ({ A, B, C }) => {
+  const totalWidth = A + B + C
+  const forWidth = `${(A / totalWidth) * 100}%`
+  const againstWidth = `${(B / totalWidth) * 100}%`
+  const abstainWidth = `${(C / totalWidth) * 100}%`
+
+  return (
+    <>
+      <ProgressBar className="progress-bar">
+        <Line className="for" style={{ width: forWidth }} />
+        <Line className="against" style={{ width: againstWidth }} />
+        <Line className="abstain" style={{ width: abstainWidth }} />
+      </ProgressBar>
+      <LabelContainer>
+        <Label>
+          <Circle className="for" /> For: {A}
+        </Label>
+        <Label>
+          <Circle className="against" /> Against: {B}{' '}
+        </Label>
+        <Label>
+          <Circle className="abstain" /> Abstain: {C}
+        </Label>
+      </LabelContainer>
+    </>
+  )
+}

packages/boba/gateway/src/components/dao/LinearProgress/style.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+
+export const ProgressBar = styled.div`
+  display: flex;
+`
+export const Line = styled.div`
+  height: 6px;
+  &.for {
+    background: ${(props) => props.theme.colors.green[300]};
+  }
+  &.against {
+    background: rgba(255, 106, 85, 1);
+  }
+  &.abstain {
+    background: ${(props) => props.theme.colors.gray[300]};
+  }
+`
+
+export const Circle = styled.span`
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+  margin-right: 5px;
+  border-radius: 50%;
+  &.for {
+    background: ${(props) => props.theme.colors.green[300]};
+  }
+  &.against {
+    background: rgba(255, 106, 85, 1);
+  }
+  &.abstain {
+    background: ${(props) => props.theme.colors.gray[300]};
+  }
+`
+
+export const LabelContainer = styled.div`
+  display: flex;
+  padding: 10px 0px;
+  gap: 0px 25px;
+`
+
+export const Label = styled.p`
+  font-weight: 400;
+  font-size: ${(props) => props.theme.text.body2};
+`

packages/boba/gateway/src/components/dao/LinearProgress/types.ts

@@ -0,0 +1,5 @@
+export interface LinearProgressProps {
+  A: number
+  B: number
+  C: number
+}

packages/boba/gateway/src/components/dao/label/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { LabelContainer } from './styles'
+
+export const Label = (props: { status: string }) => {
+  return <LabelContainer state={props.status}>{props.status}</LabelContainer>
+}

packages/boba/gateway/src/components/dao/label/styles.ts

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components'
+
+export const LabelContainer = styled.div<{ state: string }>`
+  display: flex;
+  margin-left: auto;
+  font-size: ${(props) => props.theme.text.body3};
+  border-radius: 6px;
+  color: ${(props) => props.theme.colors.red[300]};
+  border: 1px solid ${(props) => props.theme.colors.red[300]};
+  padding: 4px 8px;
+
+  ${(props) =>
+    props.state === 'Active' &&
+    css`
+      color: ${props.theme.colors.green[300]};
+      border-color: ${props.theme.colors.green[300]};
+    `}
+
+  ${(props) =>
+    props.state === 'Pending' &&
+    css`
+      color: rgba(247, 195, 103, 1);
+      border-color: rgba(247, 195, 103, 1);
+    `}
+
+    ${(props) =>
+    props.state === 'Canceled' &&
+    css`
+      color: ${props.theme.colors.gray[100]};
+      border-color: ${props.theme.colors.gray[100]};
+    `}
+`

packages/boba/gateway/src/components/dao/preloader/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {
+  PreloaderContainer,
+  Preload,
+  Number,
+  Title,
+  Label,
+  Arrow,
+} from './styles'
+
+export const Preloader = () => {
+  const limit = 4
+
+  return (
+    <PreloaderContainer>
+      {Array.from({ length: limit }).map((_, index) => (
+        <Preload key={index}>
+          <Number />
+          <Title />
+          <Label />
+          <Arrow />
+        </Preload>
+      ))}
+    </PreloaderContainer>
+  )
+}

packages/boba/gateway/src/components/dao/preloader/styles.tsx

@@ -0,0 +1,50 @@
+import styled, { css, keyframes } from 'styled-components'
+
+const pulseAnimation = keyframes`
+  0% {
+    background-color: rgba(255,255,255,0.1);
+  }
+  100% {
+    background-color: rgba(255,255,255,0.2);
+  }
+`
+const BasePreloader = styled.div`
+  height: 22px;
+  background: rgba(255, 255, 255, 0.2);
+  animation: ${css`
+    ${pulseAnimation} 0.65s infinite alternate
+  `};
+
+  width: 100%;
+`
+export const Number = styled(BasePreloader)`
+  width: 25px;
+`
+export const Title = styled(BasePreloader)`
+  width: 100%;
+`
+export const Label = styled(BasePreloader)`
+  width: 70px;
+`
+export const Arrow = styled(BasePreloader)`
+  width: 12px;
+`
+
+export const PreloaderContainer = styled.div`
+  width: 100%;
+  gap: 15px 0px;
+  padding-right: 15px;
+  display: flex;
+  flex-direction: column;
+`
+export const Preload = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.box.border};
+  border-radius: 12px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0px 10px;
+  padding: 20px;
+  background: ${(props) => props.theme.colors.box.background};
+`

packages/boba/gateway/src/components/global/background/styles.ts

@@ -14,7 +14,7 @@ const gradientColor = (theme: string) => {
   if (theme === 'light') {
     return 'radial-gradient(45% 45% at 50% 50%, rgba(174, 219, 1, 0.4) 19.79%, rgba(174, 219, 1, 0.125) 50%, rgba(174, 219, 1, 0) 70%);'
   } else {
-    return 'radial-gradient(45% 45% at 50% 50%, rgba(174, 219, 1, 0.32) 19.79%, rgba(174, 219, 1, 0.1) 50%, rgba(174, 219, 1, 0) 70%);'
+    return 'radial-gradient(55.87% 55.87% at 50.00% 50.00%, rgba(174, 219, 1, 0.24) 19.79%, rgba(174, 219, 1, 0.08) 62.50%, rgba(174, 219, 1, 0.00) 91.67%);'
   }
 }
 
@@ -37,10 +37,14 @@ export const GridBackground = styled.div`
 export const GridFade = styled.div<BackgroundProps>`
   width: 100%;
   height: 100%;
+  max-width: 1441px;
+  max-height: 870px;
   position: absolute;
   z-index: 1;
-  transform: translateY(-50vh);
-  will-change: translateY;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -100%);
+  will-change: translate;
   transition: transform 1s ease;
   background-image: ${(props) => gradientColor(props.theme.name)};
   background-clip: padding-box;
@@ -49,7 +53,7 @@ export const GridFade = styled.div<BackgroundProps>`
   ${({ position }) =>
     position === 'top' &&
     `
-    transform: translateY(-100vh);
+    transform:translate(-50%, -150%);
   `}
 `
 

packages/boba/gateway/src/components/global/button/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Button Default Button 1`] = `
 <DocumentFragment>
   <button
-    class="sc-bgqQcB iScuhT"
+    class="sc-bgqQcB dtFbmO"
     type="button"
   >
      Test Button
@@ -14,7 +14,7 @@ exports[`Button Default Button 1`] = `
 exports[`Button Disable Button 1`] = `
 <DocumentFragment>
   <button
-    class="sc-bgqQcB kJERur"
+    class="sc-bgqQcB ggCAzm"
     type="button"
   >
      Test Button
@@ -25,7 +25,7 @@ exports[`Button Disable Button 1`] = `
 exports[`Button Loading Button 1`] = `
 <DocumentFragment>
   <button
-    class="sc-bgqQcB ebQeRa"
+    class="sc-bgqQcB rbfxr"
     type="button"
   >
     <span
@@ -36,10 +36,21 @@ exports[`Button Loading Button 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Button Outline Button 1`] = `
+<DocumentFragment>
+  <button
+    class="sc-bgqQcB beNNKZ"
+    type="button"
+  >
+     Outline Button
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button Small Button 1`] = `
 <DocumentFragment>
   <button
-    class="sc-bgqQcB eyNniH"
+    class="sc-bgqQcB hWWaYy"
     type="button"
   >
      Test Button

packages/boba/gateway/src/components/global/button/index.stories.tsx

@@ -39,3 +39,12 @@ Small.args = {
   small: true,
   label: 'Default Button',
 }
+
+export const Outline = Template.bind({})
+Outline.args = {
+  disable: false,
+  loading: false,
+  small: false,
+  outline: true,
+  label: 'Default Button',
+}

packages/boba/gateway/src/components/global/button/index.test.tsx

@@ -52,4 +52,11 @@ describe('Button', () => {
     })
     expect(asFragment()).toMatchSnapshot()
   })
+  test('Outline Button', () => {
+    const { asFragment } = renderButton({
+      outline: true,
+      label: 'Outline Button',
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
 })

packages/boba/gateway/src/components/global/button/index.tsx

@@ -6,6 +6,9 @@ export const Button: FC<ButtonTypes> = ({
   disable = false,
   loading = false,
   small = false,
+  outline = false,
+  transparent = false,
+  className,
   label,
   onClick,
 }) => {
@@ -15,7 +18,10 @@ export const Button: FC<ButtonTypes> = ({
       disable={disable}
       loading={loading}
       onClick={onClick}
+      outline={outline}
+      transparent={transparent}
       small={small}
+      className={className}
     >
       {loading && <SpinLoader />} {label}
     </ButtonContainer>