onbloc · jinoosss · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/packages/adena-extension/index.css b/packages/adena-extension/index.css
@@ -1,6 +1,6 @@
-@import url("https://cdn.jsdelivr.net/npm/[email protected]/reset.css");
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
+@import url('https://cdn.jsdelivr.net/npm/[email protected]/reset.css');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 * {
   box-sizing: border-box;
 }
@@ -11,7 +11,7 @@ body {
   height: 540px;
   padding: 0;
   margin: 0;
-  font-family: "Poppins", sans-serif;
+  font-family: 'Poppins', sans-serif;
 
   position: relative;
 }
@@ -30,7 +30,7 @@ a {
   position: relative;
 }
 
-#root[aria-hidden="true"] .MuiOutlinedInput-root {
+#root[aria-hidden='true'] .MuiOutlinedInput-root {
   border-color: #0059ff;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -44,8 +44,8 @@ main {
   padding: 0 20px;
 }
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

diff --git a/packages/adena-extension/package.json b/packages/adena-extension/package.json
@@ -84,7 +84,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
     "html-loader": "^4.1.0",
-    "lottie-web": "5.9.6",
+    "lottie-web": "5.12.2",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",

diff --git a/packages/adena-extension/public/manifest.json b/packages/adena-extension/public/manifest.json
@@ -27,6 +27,6 @@
     }
   ],
   "content_security_policy": {
-    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; default-src 'self'; img-src 'self' https: data:; font-src https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; connect-src 'self' data: *; frame-src *;"
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; default-src 'self'; img-src 'self' https: data:; font-src data: https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; connect-src 'self' data: *; frame-src *;"
   }
 }
diff --git a/packages/adena-extension/public/web.html b/packages/adena-extension/public/web.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>Adena</title>
+    <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/resources/fonts/inter.css" rel="stylesheet" type="text/css" />
+  </head>
 
-<head>
-  <title>Adena</title>
-  <meta charset="utf-8" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
-    rel="stylesheet" />
-</head>
-
-<body>
-  <div id="web"></div>
-</body>
-
-</html>
+  <body>
+    <div id="web"></div>
+  </body>
+</html>
diff --git a/packages/adena-extension/src/assets/fonts/Inter-Medium.ttf b/packages/adena-extension/src/assets/fonts/Inter-Medium.ttf
diff --git a/packages/adena-extension/src/assets/fonts/Inter-Regular.ttf b/packages/adena-extension/src/assets/fonts/Inter-Regular.ttf
diff --git a/packages/adena-extension/src/assets/fonts/Inter-SemiBold.ttf b/packages/adena-extension/src/assets/fonts/Inter-SemiBold.ttf
diff --git a/packages/adena-extension/src/assets/web/lottie/you-are-all-set.json b/packages/adena-extension/src/assets/web/lottie/you-are-all-set.json
diff --git a/packages/adena-extension/src/components/atoms/lottie/index.tsx b/packages/adena-extension/src/components/atoms/lottie/index.tsx
@@ -38,19 +38,18 @@ const Lottie: React.FC<LottieProps> = ({
     if (!animationContainer.current) {
       return;
     }
-    const animationOptions: AnimationConfigWithData<'svg'> = {
+    const animationOptions: AnimationConfigWithData<'canvas'> = {
       container: animationContainer.current,
-      renderer: 'svg' as const,
+      renderer: 'canvas' as const,
       loop,
       autoplay,
       animationData,
       rendererSettings: {
         className: 'lottie-player',
-        preserveAspectRatio: 'xMidYMid slice',
       },
     };
 
-    const animation = LottieWeb.loadAnimation<'svg'>(animationOptions);
+    const animation = LottieWeb.loadAnimation<'canvas'>(animationOptions);
     setAnimationInstance(animation);
 
     return () => {

diff --git a/packages/adena-extension/src/components/atoms/web-button/index.tsx b/packages/adena-extension/src/components/atoms/web-button/index.tsx
@@ -29,7 +29,7 @@ const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small'; fixed
   display: flex;
   flex-direction: row;
   width: ${({ size }): string => (size === 'full' ? '100%' : 'auto')};
-  height: ${({ size }): string => (size === 'small' ? '44px' : 'auto')};
+  height: 44px;
   justify-content: center;
   align-items: center;
   ${({ fixed }): FlattenSimpleInterpolation | string => fixed ? css`flex-shrink: 0;` : ''};
@@ -107,6 +107,35 @@ const StyledButtonTertiary = styled(StyledButtonBase)`
   `: ''}
 `;
 
+const StyledButtonTertiarySmall = styled(StyledButtonTertiary)`
+  color: ${getTheme('webNeutral', '_300')};
+  padding: 8px 36px;
+  border-radius: 12px;
+  border: 1px solid rgba(188, 197, 214, 0.16);
+  background: rgba(188, 197, 214, 0.08);
+
+  svg * {
+    fill: ${getTheme('webNeutral', '_300')};
+  }
+
+  ${({ disabled, theme }): FlattenSimpleInterpolation | string => !disabled ? css`
+    :hover {
+      color: ${theme.webNeutral._100};
+      box-shadow: 0 0 0 1px rgba(188, 197, 214, 0.16) inset;
+      svg * {
+        fill: ${theme.webNeutral._100};
+      }
+    }
+    :active {
+      color: ${theme.webNeutral._100};
+      box-shadow: 0 0 0 1px rgba(188, 197, 214, 0.16) inset;
+      svg * {
+        fill: ${theme.webNeutral._100};
+      }
+    }
+  `: ''}
+`;
+
 const StyledButtonQuaternary = styled(StyledButtonBase)`
   outline: 1px solid rgba(188, 197, 214, 0.16);
   background: rgba(188, 197, 214, 0.04);
@@ -137,7 +166,11 @@ export const WebButton = ({
       StyledComponent = StyledButtonSecondary;
       break;
     case 'tertiary':
-      StyledComponent = StyledButtonTertiary;
+      if (rest.size === 'small') {
+        StyledComponent = StyledButtonTertiarySmall;
+      } else {
+        StyledComponent = StyledButtonTertiary;
+      }
       break;
     case 'quaternary':
       StyledComponent = StyledButtonQuaternary;
@@ -159,7 +192,7 @@ export const WebButton = ({
           {isRightButton && (
             <View style={{ width: 12 }} />
           )}
-          <WebText type={textType}>
+          <WebText type={textType} color={'inherit'}>
             {rest.text}
           </WebText>
           {isRightButton && (

diff --git a/packages/adena-extension/src/components/atoms/web-input/index.tsx b/packages/adena-extension/src/components/atoms/web-input/index.tsx
@@ -24,11 +24,13 @@ export const WebInput = styled.input<InputProps>`
   ::placeholder {
     color: ${getTheme('webNeutral', '_700')};
   }
+
   :focus {
     background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webInput._100)};
     box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
       0px 1px 2px 0px rgba(0, 0, 0, 0.06);
   }
+
   :focus-visible {
     outline: none;
     box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

diff --git a/packages/adena-extension/src/components/atoms/web-seed-input-item/index.tsx b/packages/adena-extension/src/components/atoms/web-seed-input-item/index.tsx
@@ -0,0 +1,132 @@
+import { webFonts } from '@styles/theme';
+import React, { useCallback, useMemo, useState } from 'react';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import { Row, View } from '../base';
+
+interface StyleProps {
+  hover?: boolean;
+  focus?: boolean;
+  filled?: boolean;
+  error: boolean;
+}
+
+const StyledContainer = styled(Row) <StyleProps & { type: string; }>`
+  width: 100%;
+  height: 40px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid ${({ theme }): string => theme.webNeutral._800};
+  ${webFonts.body4}
+
+  ${({ theme, hover, focus, filled }): FlattenSimpleInterpolation | string => (hover || focus || filled) ?
+    css`
+    border-color: ${theme.webNeutral._600};
+  `: ''}
+
+  ${({ filled }): FlattenSimpleInterpolation | string => filled ?
+    css`
+    box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  `: ''}
+
+  ${({ theme, error }): FlattenSimpleInterpolation | string => error ?
+    css`
+    background: #E0517014;
+    border-color: ${theme.webError._200};
+    box-shadow: 0px 0px 0px 3px rgba(235, 84, 94, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  `: ''}
+`;
+
+const StyledTitle = styled(View) <StyleProps>`
+  width: 40px;
+  height: 100%;
+  background: ${({ theme }): string => theme.webInput._100};
+  border-right: 1px solid ${({ theme }): string => theme.webNeutral._800};
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }): string => theme.webNeutral._500};
+
+  ${({ theme, hover, focus }): FlattenSimpleInterpolation | string => (hover || focus) ?
+    css`
+    border-color: ${theme.webNeutral._600};
+  `: ''}
+
+  ${({ theme, error }): FlattenSimpleInterpolation | string => error ?
+    css`
+    color: ${theme.webError._100};
+    background: rgba(224, 81, 112, 0.08);
+    border-color: ${theme.webError._200};
+  `: ''}
+`;
+
+const StyledInput = styled.input <StyleProps>`
+  flex: 1;
+  width: 100%;
+  height: 40px;
+  padding: 12px;
+  border-radius: 0;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webNeutral._900)};
+  color: ${({ theme }): string => theme.webNeutral._100};
+`;
+
+interface WebSeedInputItemProps {
+  type: string;
+  index: number;
+  value: string;
+  error: boolean;
+  onChange: (value: string) => void;
+}
+
+export const WebSeedInputItem: React.FC<WebSeedInputItemProps> = ({
+  type,
+  index,
+  value,
+  error,
+  onChange,
+}) => {
+  const [hover, setHover] = useState(false);
+  const [focus, setFocus] = useState(false);
+
+  const filled = useMemo(() => {
+    return value.length > 0;
+  }, [value]);
+
+  const onChangeInput = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    onChange(value);
+  }, [onChange]);
+
+  return (
+    <StyledContainer
+      type={type}
+      hover={hover}
+      focus={focus}
+      filled={filled}
+      error={error}
+      onMouseOver={(): void => setHover(true)}
+      onMouseOut={(): void => setHover(false)}
+    >
+      <StyledTitle
+        hover={hover}
+        focus={focus}
+        filled={filled}
+        error={error}
+      >
+        {index}
+      </StyledTitle>
+      <StyledInput
+        hover={hover}
+        focus={focus}
+        filled={filled}
+        value={value}
+        onFocus={(): void => setFocus(true)}
+        onBlur={(): void => setFocus(false)}
+        onChange={onChangeInput}
+        error={error}
+      />
+    </StyledContainer>
+  )
+}
diff --git a/packages/adena-extension/src/components/atoms/web-seed-input-item/web-seed-input.stories.tsx b/packages/adena-extension/src/components/atoms/web-seed-input-item/web-seed-input.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { WebSeedInputItem } from '.';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'components/atoms/WebSeedInputItem',
+  component: WebSeedInputItem,
+} as Meta<typeof WebSeedInputItem>;
+
+export const Default: StoryObj<typeof WebSeedInputItem> = {
+  args: {
+    index: 1,
+    value: '',
+    error: false,
+    onChange: action('onChange'),
+  },
+};
diff --git a/packages/adena-extension/src/components/atoms/web-textarea/index.tsx b/packages/adena-extension/src/components/atoms/web-textarea/index.tsx
@@ -0,0 +1,46 @@
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+
+import { webFonts, getTheme } from '@styles/theme';
+
+interface InputProps {
+  width?: string;
+  error?: boolean;
+}
+
+export const WebTextarea = styled.textarea<InputProps>`
+  ${webFonts.body5};
+  width: ${({ width }): string => width ?? 'auto'};
+  color: ${getTheme('webNeutral', '_100')};
+  border-radius: 12px;
+  border: 1px solid;
+  padding: 16px;
+  border-color: ${({ theme }): string => theme.webNeutral._800};
+  background-color: ${({ theme }): string => theme.webInput._100};
+  outline: none;
+  resize: none;
+
+  :placeholder-shown {
+    background-color: ${({ theme }): string => theme.webNeutral._900};
+  }
+
+  ::placeholder {
+    color: ${getTheme('webNeutral', '_700')};
+  }
+
+  :focus-visible {
+    box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+    background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webInput._100)};
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+    background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webInput._100)};
+  }
+
+  ${({ theme, error }): FlattenSimpleInterpolation | string => error ?
+    css`
+    border-color: ${theme.webError._200};
+    background-color: ${theme.webError._300};
+    box-shadow: 0px 0px 0px 3px rgba(235, 84, 94, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  `: ''}
+`;