diff --git a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
index a81fc0d57..07f7f22b8 100644
--- a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
+++ b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
@@ -61,7 +61,9 @@ export const AccountOverview = (): JSX.Element => {
{showSidebar &&
(maspEnabled ?
-
+
: )}
diff --git a/apps/namadillo/src/App/Assets/ShieldedParty.svg b/apps/namadillo/src/App/Assets/ShieldedParty.svg
new file mode 100644
index 000000000..cec1470c6
--- /dev/null
+++ b/apps/namadillo/src/App/Assets/ShieldedParty.svg
@@ -0,0 +1,290 @@
+
+
diff --git a/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx b/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx
index c26d0e96b..3d228cbd8 100644
--- a/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx
+++ b/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx
@@ -1,8 +1,13 @@
import { ActionButton } from "@namada/components";
+import svgImg from "App/Assets/ShieldedParty.svg";
import TransferRoutes from "App/Transfer/routes";
+import { useState } from "react";
+import { Link } from "react-router-dom";
import { twMerge } from "tailwind-merge";
export const ShieldAllBanner = (): JSX.Element => {
+ const [isAnimating, setIsAnimating] = useState(false);
+
return (
{
"p-3"
)}
>
-
img
-
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+ // https://gist.github.com/LeaVerou/5198257
+ src={`${svgImg}${isAnimating ? "#hover " : ""}`}
+ />
+ setIsAnimating(true)}
+ onMouseLeave={() => setIsAnimating(false)}
>
- Shield All Assets
-
+
+ Shield All Assets
+
+
);
};