Metavinci: Conffeti (#65)

* MainAuctionCard

* trending auctions

* fix scroll, reduce padding

* fixing errors/warnings and formatting

* formatting & sold auctions

* artists cards

* initial presale banner. move sample data to own file

* new home layout

* presale banner image fix

* countdown implementation

* initial artwork implementation

* getCountdown

* presale card

* fix presale banner image

* fix width. show preview. load only 1 file

* remove preview/keep filename. url id for steps

* slider > input number

* upload step for every category

* fix file handling

* hashrouter

* waiting view

* congrats buttons

* conffeti 🎉

* randomize conffeti rotation and size

Co-authored-by: B <264380+bartosz-lipinski@users.noreply.github.com>

packages/metavinci/src/views/artCreate/index.tsx

@@ -602,6 +602,58 @@ const WaitingStep = (props: {
 
 const Congrats = () => {
   return <>
-    Congrats!
+    <div style={{ marginTop: 70 }}>
+      <div className="waiting-title">
+        Congratulations! Your creation is now live.
+      </div>
+      <div className="congrats-button-container">
+        <Button className="congrats-button"><span>Share it on Twitter</span><span>&gt;</span></Button>
+        <Button className="congrats-button"><span>See it in your collection</span><span>&gt;</span></Button>
+        <Button className="congrats-button"><span>Sell it via auction</span><span>&gt;</span></Button>
+      </div>
+    </div>
+    <Conffeti />
   </>
 }
+
+interface Particle {
+  top: number,
+  left: number,
+  speed: number,
+  angle: number,
+  angle_speed: number,
+  size: number,
+}
+
+const Conffeti = () => {
+  const [particles, setParticles] = useState<Array<Particle>>(Array.from({ length: 30 }).map(_ => ({
+    top: -Math.random() * 100,
+    left: Math.random() * 100,
+    speed: Math.random() * 1 + 3,
+    angle: 0,
+    angle_speed: Math.random() * 10 + 5,
+    size: Math.floor(Math.random() * 8 + 12),
+  })))
+
+  useEffect(() => {
+    setInterval(() => {
+      setParticles(parts => parts.map(part => ({
+        ...part,
+        top: (part.top > 130 ? -30 : part.top + part.speed),
+        angle: (part.angle > 360 ? 0 : part.angle + part.angle_speed),
+      })))
+    }, 40)
+  }, [])
+
+  const getStyle = (particle: Particle) => ({
+    top: `${particle.top}%`,
+    left: `${particle.left}%`,
+    transform: `rotate(${particle.angle}deg)`,
+    width: particle.size,
+    height: particle.size,
+  })
+
+  return <div>
+    {particles.map((particle, idx) => <span key={idx} className="particle" style={getStyle(particle)}></span>)}
+  </div>
+}

packages/metavinci/src/views/artCreate/styles.less

@@ -192,3 +192,30 @@
   color: rgba(255, 255, 255, 0.7);
   margin-top: 20px;
 }
+
+.congrats-button-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 100px;
+}
+
+.congrats-button {
+  display: flex;
+  justify-content: space-between;
+  height: 50px;
+  width: 460px;
+  align-items: center;
+
+  margin: 5px auto;
+  background: linear-gradient(270deg, #616774 7.29%, #403F4C 100%);
+  border-radius: 8px;
+
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.particle {
+  position: absolute;
+  opacity: 0.9;
+  background: linear-gradient(180deg, #D329FC 0%, #8F6DDE 49.48%, #19E6AD 100%);
+}