Add dots animation

safe-global · Oct 23, 2023 · f2f3dd0 · f2f3dd0
1 parent 48a7a76
commit f2f3dd0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/components/walletconnect/WcConnectionState/index.tsx b/src/components/walletconnect/WcConnectionState/index.tsx
@@ -14,14 +14,17 @@ const WcConnectionState = ({ metadata, isDelete }: { metadata?: CoreTypes.Metada
     <div className={css.container}>
       <div>
         <SafeLogo alt="Safe logo" width="28px" height="28px" />
+
         <SvgIcon
           component={ConnectionDots}
           inheritViewBox
           sx={{ mx: 2 }}
-          className={classNames({ [css.errorDots]: isDelete })}
+          className={classNames(css.dots, { [css.errorDots]: isDelete })}
         />
+
         <SafeAppIconCard src={icon} width={28} height={28} alt={`${name} logo`} />
       </div>
+
       <Typography variant="h5" mt={3}>
         {isDelete ? `${name} disconnected` : `${name} successfully connected!`}
       </Typography>

diff --git a/src/components/walletconnect/WcConnectionState/styles.module.css b/src/components/walletconnect/WcConnectionState/styles.module.css
@@ -19,3 +19,29 @@
 .errorDots circle:nth-of-type(4) {
   fill: var(--color-error-light);
 }
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  100% {
+    transform: 1;
+  }
+}
+
+.dots circle {
+  animation: blink 1.5s ease-in-out infinite;
+}
+
+.dots circle:nth-of-type(1) {
+  animation-delay: 0;
+}
+.dots circle:nth-of-type(2),
+.dots circle:nth-of-type(5) {
+  animation-delay: 0.2s;
+}
+
+.dots circle:nth-of-type(3),
+.dots circle:nth-of-type(4) {
+  animation-delay: 0.3s;
+}