fix build

components/OnDrapDropFrame.tsx

@@ -117,7 +117,7 @@ function _OnDrapDropFrame(p: Props) {
   );
 }
 
-export const OnDrapDropFrame = React.memo<Props>(styled(_OnDrapDropFrame)`
+export const OnDrapDropFrame = React.memo<Props>(styled(_OnDrapDropFrame as any)`
   position: fixed;
   width: 100vw;
   height: 100vh;

components/texts/links.ts

@@ -1,34 +1,34 @@
 import styled from "styled-components";
 
-export const TextLink = styled.a.attrs({ target: '_blank' })`
-    cursor: pointer;
-    text-decoration: underline;
+export const TextLink = styled.a.attrs({ target: "_blank" })`
+  cursor: pointer;
+  text-decoration: underline;
 
-    &.link1 {
-        color: var(--primary-color);
-        text-decoration-color: var(--primary-color);
-    }
-    &.link2 {
-        color: var(--primary-color3);
-        text-decoration-color: var(--primary-color3);
-    }
-`
+  &.link1 {
+    color: var(--primary-color);
+    text-decoration-color: var(--primary-color);
+  }
+  &.link2 {
+    color: var(--primary-color3);
+    text-decoration-color: var(--primary-color3);
+  }
+`;
 
-const subscanAttrs = (p: { account: string }) => ({ target: '_blank', href: `https://crust.subscan.io/account/${p.account}` })
-export const SubscanAddress = styled.a.attrs(subscanAttrs) <{ account: string }>`
-    cursor: pointer;
-    color: inherit !important;
-`
+const subscanAttrs = (p: { account: string }) => ({ target: "_blank", href: `https://crust.subscan.io/account/${p.account}` });
+export const SubscanAddress = styled.a.attrs<{ account: string }>(subscanAttrs)<{ account: string }>`
+  cursor: pointer;
+  color: inherit !important;
+`;
 
-const subscanBlockAttrs = (p: { block: number | string }) => ({ target: '_blank', href: `https://crust.subscan.io/block/${p.block}` })
-export const SubscanBlock = styled.a.attrs(subscanBlockAttrs) <{ block: number | string }>`
-    cursor: pointer;
-    color: inherit !important;
-    text-decoration: underline;
-`
+const subscanBlockAttrs = (p: { block: number | string }) => ({ target: "_blank", href: `https://crust.subscan.io/block/${p.block}` });
+export const SubscanBlock = styled.a.attrs<{ block: number | string }>(subscanBlockAttrs)<{ block: number | string }>`
+  cursor: pointer;
+  color: inherit !important;
+  text-decoration: underline;
+`;
 
-const subscanHashAttrs = (p: { hash: string }) => ({ target: '_blank', href: `https://crust.subscan.io/extrinsic/${p.hash}` })
-export const SubscanHash = styled.a.attrs(subscanHashAttrs) <{ hash: string }>`
-    cursor: pointer;
-    color: inherit !important;
-`
+const subscanHashAttrs = (p: { hash: string }) => ({ target: "_blank", href: `https://crust.subscan.io/extrinsic/${p.hash}` });
+export const SubscanHash = styled.a.attrs<{ hash: string }>(subscanHashAttrs)<{ hash: string }>`
+  cursor: pointer;
+  color: inherit !important;
+`;

components/texts/spans.ts

@@ -1,17 +1,13 @@
 import styled from "styled-components";
 
-export type Colors =
-    '--primary-color' |
-    '--primary-color2' |
-    '--primary-color3' |
-    '--primary-color4'
+export type Colors = "--primary-color" | "--primary-color2" | "--primary-color3" | "--primary-color4";
 
-export const ColorSpan = styled.span.attrs((p: { color?: Colors }) => ({ color: p.color || '--primary-color' }))`
-    color: var(${prop => prop.color});
-    &.btn {
-        cursor: pointer;
-        &:disabled{
-            cursor: not-allowed;
-        }
+export const ColorSpan = styled.span.attrs<{ color?: Colors }>((p: { color?: Colors }) => ({ color: p.color || "--primary-color" }))`
+  color: var(${(prop) => prop.color});
+  &.btn {
+    cursor: pointer;
+    &:disabled {
+      cursor: not-allowed;
     }
-`
+  }
+`;