From ef6e18a4946089877848b4490e68819d33981cd4 Mon Sep 17 00:00:00 2001
From: Lawson Kight <lawsonkight@users.noreply.github.com>
Date: Wed, 25 Sep 2024 15:34:10 -0700
Subject: [PATCH] bridge sdk animation

---
 docs/bridge/docs/01-About/index.md          |   3 +
 docs/bridge/docs/02-Bridge/02-SDK/index.md  |   7 +
 docs/bridge/src/components/BridgeFlow.tsx   | 305 ++++++++++++++++++++
 docs/bridge/src/css/custom.css              |  20 ++
 docs/bridge/static/img/synapse-animated.svg | 153 ++++++++++
 docs/bridge/static/img/synapse-mark.svg     |  13 +
 6 files changed, 501 insertions(+)
 create mode 100644 docs/bridge/src/components/BridgeFlow.tsx
 create mode 100644 docs/bridge/static/img/synapse-animated.svg
 create mode 100644 docs/bridge/static/img/synapse-mark.svg

diff --git a/docs/bridge/docs/01-About/index.md b/docs/bridge/docs/01-About/index.md
index 49b573588e..feea738693 100644
--- a/docs/bridge/docs/01-About/index.md
+++ b/docs/bridge/docs/01-About/index.md
@@ -1,6 +1,9 @@
 ---
 title: About
 ---
+<br />
+
+![Synapse mark](/img/synapse-mark.svg)
 
 # Use Synapse
 
diff --git a/docs/bridge/docs/02-Bridge/02-SDK/index.md b/docs/bridge/docs/02-Bridge/02-SDK/index.md
index d0e2ef796c..51442c223a 100644
--- a/docs/bridge/docs/02-Bridge/02-SDK/index.md
+++ b/docs/bridge/docs/02-Bridge/02-SDK/index.md
@@ -2,12 +2,19 @@
 title: SDK
 ---
 
+import { BridgeFlow } from '@site/src/components/BridgeFlow'
+
 # Bridge SDK
 
 The Synapse Bridge SDK is the easiest way to integrate cross-chain token & liquidity transfers into your application. It is fully isomorphic and can be used on both client and server sides.
 
 The Synapse Bridge SDK is built on top of the [Synapse Router](/docs/Routers/Synapse-Router) contract.
 
+<figure>
+<BridgeFlow />
+<caption>The SDK sends user assets to a bridge contract, which are moved to the destination chain, and then returned to the user.</caption>
+</figure>
+
 :::note requires Node v16+
 
 The SDK has only been fully tested on Node 16+ or greater. Earlier versions may experience errors. 
diff --git a/docs/bridge/src/components/BridgeFlow.tsx b/docs/bridge/src/components/BridgeFlow.tsx
new file mode 100644
index 0000000000..bb1713eca1
--- /dev/null
+++ b/docs/bridge/src/components/BridgeFlow.tsx
@@ -0,0 +1,305 @@
+export const BridgeFlow = () => {
+  return (
+    <svg
+      width="100%"
+      viewBox="-240 0 480 164"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentcolor" fillOpacity=".05">
+        <rect x="-50%" rx="4" y="0" width="100%" height="48" />
+        <rect x="-50%" rx="4" y="56" width="100%" height="48" />
+        <rect x="-50%" rx="4" y="112" width="100%" height="48" />
+
+        <rect x="-50%" rx="4" y="0%" width="33.3%" height="100%" />
+        <rect x="16.7%" rx="4" y="0%" width="33.3%" height="100%" />
+      </g>
+      <set
+        id="bridgeFlowTimer"
+        attributeName="visibility"
+        begin="0s; bridgeFlowTimerOut.end + 2s"
+      />
+      <line
+        x1="-50%"
+        y1="100%"
+        x2="-50%"
+        y2="100%"
+        stroke="currentcolor"
+        strokeWidth="4"
+        strokeOpacity=".25"
+      >
+        <set attributeName="x1" to="-50%" begin="bridgeFlowTimer.begin" />
+        <set attributeName="x2" to="-50%" begin="bridgeFlowTimer.begin" />
+        <animate
+          attributeName="x2"
+          values="-50%; 50%"
+          begin="bridgeFlowSend.begin"
+          dur="4s"
+          calcMode="linear"
+          keyTimes="0; 1"
+          keySplines=".5 0 1 1"
+          fill="freeze"
+        />
+        <animate
+          id="bridgeFlowTimerOut"
+          attributeName="x1"
+          values="-50%; 50%"
+          begin="bridgeFlowReceive.end + 1s"
+          dur=".75s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+      </line>
+      {/* <line
+        x1="-16.7%"
+        y1="47"
+        x2="16.7%"
+        y2="47"
+        stroke="var(--synapse-green-secondary)"
+        strokeWidth="2"
+      >
+        <animate
+          attributeName="x2"
+          values="-16.7%; 16.7%"
+          begin="0s; bridgeFlowSign.begin"
+          dur="8s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+      </line>
+      <line
+        x1="-16.7%"
+        y1="103"
+        x2="16.7%"
+        y2="103"
+        stroke="var(--synapse-green-secondary)"
+        strokeWidth="2"
+      >
+        <set attributeName="x2" to="-16.7%" begin="bridgeFlowTimer.begin" />
+        <animate
+          attributeName="x2"
+          values="-16.7%; 0%"
+          begin="bridgeFlowSend.begin"
+          dur="1s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+        <animate
+          attributeName="x2"
+          values="0%; 16.7%"
+          begin="bridgeFlowReceive.begin"
+          dur="1s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+      </line>
+      <line
+        x1="-16.7%"
+        y1="159"
+        x2="16.7%"
+        y2="159"
+        stroke="var(--synapse-green-secondary)"
+        strokeWidth="2"
+      >
+        <set attributeName="x2" to="-16.7%" begin="bridgeFlowTimer.begin" />
+        <animate
+          attributeName="x2"
+          values="-16.7%; 16.7%"
+          begin="bridgeFlowMint.begin"
+          dur="2.5s"
+          calcMode="linear"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+      </line> */}
+      <g fill="currentcolor" textAnchor="middle" dominantBaseline="middle">
+        <text x="-33%" y="24">
+          originChain
+        </text>
+        <text x="33%" y="24">
+          destChain
+        </text>
+        <text y="24">App / SDK</text>
+        <text y="80">Wallet</text>
+        <text y="136">Bridge</text>
+      </g>
+      <circle r="12" cx="-21%" cy="136" fill="hsl(285deg 100% 50%)">
+        <set attributeName="opacity" to="1" begin="bridgeFlowTimer.begin" />
+        <animate
+          attributeName="opacity"
+          values="1; 0"
+          dur=".1s"
+          begin="bridgeFlowBurn.begin"
+          repeatCount="3"
+          fill="freeze"
+        />
+      </circle>
+      <circle r="12" fill="hsl(211deg 67% 50%)">
+        <set attributeName="cy" to="80" begin="bridgeFlowTimer.begin" />
+        <set attributeName="cx" to="-33%" begin="bridgeFlowTimer.begin" />
+        <animate
+          id="bridgeFlowSign"
+          attributeName="opacity"
+          values=".5; 1"
+          dur=".1s"
+          repeatCount="3"
+          begin="bridgeFlowTimer.begin + 1s"
+          fill="freeze"
+        />
+        <animate
+          id="bridgeFlowSend"
+          attributeName="cy"
+          to="136"
+          dur=".5s"
+          begin="bridgeFlowSign.end + 2s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+        <animate
+          attributeName="cx"
+          to="-24.5%"
+          dur=".5s"
+          begin="bridgeFlowSend.begin + .5s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+        <animate
+          id="bridgeFlowBurn"
+          attributeName="cx"
+          to="-21%"
+          dur=".5s"
+          begin="bridgeFlowSend.begin + 2s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+      </circle>
+      <circle r="12" cx="21%" cy="136" fill="hsl(285deg 100% 50%)">
+        <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+        <animate
+          attributeName="opacity"
+          values="0; 1"
+          dur=".1s"
+          begin="bridgeFlowBurn.begin"
+          repeatCount="3"
+          fill="freeze"
+        />
+      </circle>
+      <circle r="12" cx="30%" cy="136" fill="hsl(164deg 37% 50%)">
+        <set attributeName="cy" to="136" begin="bridgeFlowTimer.begin" />
+        <set attributeName="cx" to="21%" begin="bridgeFlowTimer.begin" />
+        <animate
+          id="bridgeFlowMint"
+          attributeName="cx"
+          to="24%"
+          dur=".5s"
+          begin="bridgeFlowBurn.begin + .1s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+        <animate
+          id="bridgeFlowReceive"
+          attributeName="cx"
+          to="33%"
+          dur=".5s"
+          begin="bridgeFlowMint.end + 1s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+        <animate
+          attributeName="cy"
+          to="80"
+          dur=".5s"
+          begin="bridgeFlowReceive.begin + .3s"
+          calcMode="spline"
+          keyTimes="0; 1"
+          keySplines=".5 0 .2 1"
+          fill="freeze"
+        />
+      </circle>
+      <circle
+        r="11"
+        cx="33%"
+        cy="80"
+        stroke="hsl(164deg 37% 50%)"
+        fill="none"
+        opacity="0"
+        strokeDasharray="2 3"
+      >
+        <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+        <animate
+          attributeName="opacity"
+          values="0; .3; 0; .5; 0; .7; 0; 1"
+          dur=".4s"
+          begin="bridgeFlowSign.begin"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dashoffset"
+          by="5"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </circle>
+      {/* <g fill="var(--synapse-green-secondary)">
+        <circle r="3" cx="-14%" cy="24">
+          <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+          <set
+            attributeName="opacity"
+            to="1"
+            begin="bridgeFlowTimer.begin + .25s"
+          />
+        </circle>
+        <circle r="3" cx="-14%" cy="80">
+          <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+          <set attributeName="opacity" to="1" begin="bridgeFlowSend.end" />
+        </circle>
+        <circle r="3" cx="-14%" cy="136">
+          <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+          <set
+            attributeName="opacity"
+            to="1"
+            begin="bridgeFlowSend.end + .5s"
+          />
+        </circle>
+        <circle r="3" cx="14%" cy="136">
+          <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+          <set
+            attributeName="opacity"
+            to="1"
+            begin="bridgeFlowBurn.end + .2s"
+          />
+        </circle>
+        <circle r="3" cx="14%" cy="80">
+          <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+          <set attributeName="opacity" to="1" begin="bridgeFlowReceive.end" />
+        </circle>
+        <circle r="3" cx="14%" cy="24">
+          <set attributeName="opacity" to="0" begin="bridgeFlowTimer.begin" />
+          <set
+            attributeName="opacity"
+            to="1"
+            begin="bridgeFlowReceive.end + .5s"
+          />
+        </circle>
+      </g> */}
+    </svg>
+  )
+}
diff --git a/docs/bridge/src/css/custom.css b/docs/bridge/src/css/custom.css
index c545be10e2..165cec8522 100644
--- a/docs/bridge/src/css/custom.css
+++ b/docs/bridge/src/css/custom.css
@@ -92,3 +92,23 @@ table thead tr {
   text-align: left;
   border: none;
 }
+
+svg text {
+  font-family: monospace;
+}
+
+figure {
+  margin: 2rem 0;
+  text-align: center;
+  display: grid;
+  gap: 1rem;
+  justify-items: center;
+
+  & caption {
+    text-align: center;
+    width: 100%;
+    font-style: italic;
+    opacity: .67;
+
+  }
+}
\ No newline at end of file
diff --git a/docs/bridge/static/img/synapse-animated.svg b/docs/bridge/static/img/synapse-animated.svg
new file mode 100644
index 0000000000..7e015f3bb8
--- /dev/null
+++ b/docs/bridge/static/img/synapse-animated.svg
@@ -0,0 +1,153 @@
+<svg width="64" height="64" viewBox="-24 -24 48 48" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="synapse-gradient">
+            <stop offset="0%" stop-color="hsl(300deg 60% 50%)" />
+            <stop offset="100%" stop-color="hsl(270deg 85% 75%)" />
+        </linearGradient>
+    </defs>
+    <g stroke="url(#synapse-gradient)" stroke-width="5.5" opacity=".5" fill="none">
+        <line y1="18" x2="18">
+            <animate
+                attributeName="x2"
+                values="0; 18"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+            <animate
+                attributeName="y2"
+                values="18; 0"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </line>
+        <line x1="18" y1=".1" x2="18" y2="-.1">
+            <animate
+                attributeName="x2"
+                values="18; -18"
+                begin=".25s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </line>
+        <line x1="-18" x2="-18">
+            <animate
+                attributeName="x2"
+                values="-18; 0"
+                begin=".5s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+            <animate
+                attributeName="y2"
+                values="0; -18"
+                begin=".5s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </line>
+        <!-- <path d="m0 18 18 -18 h-36 l18 -18" /> -->
+    </g>
+    <g fill="url(#synapse-gradient)">
+        <circle cy="18" r="0" opacity="0">
+            <animate
+                attributeName="opacity"
+                values="0; 1"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+            <animate
+                attributeName="r"
+                values="0; 6"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </circle>
+        <circle cx="18" r="0" opacity="0">
+            <animate
+                attributeName="opacity"
+                values="0; 1"
+                begin=".25s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+            <animate
+                attributeName="r"
+                values="0; 6"
+                begin=".25s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </circle>
+        <circle cx="-18" r="0" opacity="0">
+            <animate
+                attributeName="opacity"
+                values="0; 1"
+                begin=".5s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+            <animate
+                attributeName="r"
+                values="0; 6"
+                begin=".5s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </circle>
+        <circle cy="-18" r="0" opacity="0">
+            <animate
+                attributeName="opacity"
+                values="0; 1"
+                begin=".625s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+            <animate
+                attributeName="r"
+                values="0; 6"
+                begin=".625s"
+                dur=".25s"
+                calcMode="linear"
+                keyTimes="0; 1"
+                keySplines=".5 0 .2 1"
+                fill="freeze"
+            />
+        </circle>
+    </g>
+</svg>
diff --git a/docs/bridge/static/img/synapse-mark.svg b/docs/bridge/static/img/synapse-mark.svg
new file mode 100644
index 0000000000..6b3008d4e1
--- /dev/null
+++ b/docs/bridge/static/img/synapse-mark.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="64" fill="url(#synGrad)" viewBox="-24 -24 48 48" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="synGrad">
+            <stop offset="0%" stop-color="hsl(300deg 60% 50%)" />
+            <stop offset="100%" stop-color="hsl(270deg 85% 75%)" />
+        </linearGradient>
+    </defs>
+    <path d="M0 18 18 0 H-18 L0 -18" stroke="url(#synGrad)" stroke-width="5.5" stroke-linejoin="bevel" opacity=".5" fill="none" />
+    <circle cy="18" r="6" />
+    <circle cx="18" r="6" />
+    <circle cx="-18" r="6" />
+    <circle cy="-18" r="6" />
+</svg>