Merge branch 'feature/m' of https://github.com/solana-labs/oyster into feature/m

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

@@ -609,6 +609,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

@@ -195,3 +195,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%);
+}