Add net gif over map (#501)

Resolves: #493 

<img width="1728" alt="493_1"
src="https://github.com/tahowallet/dapp/assets/28560653/cbcba15f-80d9-4569-9e2e-19d9e9d6c88d">
<img width="1724" alt="493_2"
src="https://github.com/tahowallet/dapp/assets/28560653/79dee43e-9000-4d58-bc90-80479df03e6b">

src/env.d.ts

@@ -15,6 +15,11 @@ declare module "*.webp" {
   export = value
 }
 
+declare module "*.gif" {
+  const value: string
+  export = value
+}
+
 declare module "*.woff2" {
   const value: string
   export = value

src/ui/Island/Gif.tsx

@@ -1,17 +1,20 @@
-import React, { useEffect, useMemo, useRef } from "react"
+import React, { memo, useEffect, useMemo, useRef } from "react"
 import { Image } from "react-konva"
 import type Konva from "konva"
 import "gifler"
 import { isBrowser } from "shared/utils"
 
 type GifProps = {
   src: string
+  width: number
+  height: number
   x?: number
   y?: number
+  scaleY?: number
 }
 
-export default function Gif(props: GifProps) {
-  const { src, x = 0, y = 0 } = props
+function Gif(props: GifProps) {
+  const { src, x = 0, y = 0, width, height, scaleY } = props
   const imageRef = useRef<Konva.Image | null>(null)
   const canvas = useMemo(() => document.createElement("canvas"), [])
 
@@ -30,5 +33,17 @@ export default function Gif(props: GifProps) {
     return () => anim?.stop()
   }, [src, canvas])
 
-  return <Image x={x} y={y} image={canvas} ref={imageRef} />
+  return (
+    <Image
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      scaleY={scaleY}
+      image={canvas}
+      ref={imageRef}
+    />
+  )
 }
+
+export default memo(Gif)

src/ui/Island/InteractiveIsland.tsx

@@ -27,6 +27,7 @@ import Background from "./Background"
 import Realms from "./IslandRealms"
 import RealmPin from "./RealmPin"
 import Clouds from "./Clouds"
+import NetOverlay from "./NetOverlay"
 
 function InteractiveIsland() {
   const settingsRef = useRef({ minScale: 0 })
@@ -165,6 +166,7 @@ function InteractiveIsland() {
         <Layer>
           <Background overlay={overlay} />
           <Realms />
+          <NetOverlay />
           <Clouds />
           <RealmPin />
         </Layer>

src/ui/Island/NetOverlay.tsx

@@ -0,0 +1,37 @@
+import React, { memo } from "react"
+import { Group } from "react-konva"
+import netGif from "shared/assets/island-overlay-net.gif"
+import { FIGMA_FACTOR } from "shared/constants"
+import Gif from "./Gif"
+
+function NetOverlay() {
+  return (
+    <Group listening={false} opacity={0.3}>
+      <Gif
+        src={netGif}
+        width={700 * FIGMA_FACTOR.X}
+        height={197 * FIGMA_FACTOR.Y}
+        x={600 * FIGMA_FACTOR.X}
+        y={-20 * FIGMA_FACTOR.Y}
+      />
+      <Gif
+        src={netGif}
+        width={700 * FIGMA_FACTOR.X}
+        height={197 * FIGMA_FACTOR.Y}
+        x={-30 * FIGMA_FACTOR.X}
+        y={1150 * FIGMA_FACTOR.Y}
+        scaleY={-1}
+      />
+      <Gif
+        src={netGif}
+        width={700 * FIGMA_FACTOR.X}
+        height={197 * FIGMA_FACTOR.Y}
+        x={1150 * FIGMA_FACTOR.X}
+        y={1200 * FIGMA_FACTOR.Y}
+        scaleY={-1}
+      />
+    </Group>
+  )
+}
+
+export default memo(NetOverlay)