Merge pull request #20 from terra-money/dev/add-wallet-connection

Dev/add wallet connection
terra-money · Dec 11, 2023 · 708f9b3 · 708f9b3
2 parents 78f5c8d + e645cfc
commit 708f9b3
Show file tree

Hide file tree

Showing 71 changed files with 2,735 additions and 288 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/allianceIcon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Alliance DAO NFT</title>
   </head>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@mdx-js/rollup": "^3.0.0",
+    "@tanstack/react-query": "^5.13.4",
+    "@tanstack/react-query-devtools": "^5.13.5",
     "@terra-money/feather.js": "^1.2.1",
     "@terra-money/wallet-kit": "^1.0.15",
     "buffer": "^6.0.3",

diff --git a/frontend/public/allianceIcon.svg b/frontend/public/allianceIcon.svg
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.module.scss b/frontend/src/App.module.scss
@@ -1,9 +1,13 @@
+html {
+  background: #DCD7CF;
+}
 
 .main__container {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 100vh;
+  padding-bottom: 16px;
 
   background: linear-gradient(180deg, #F1EEE9 0%, #DCD7CF 100%);
 

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,21 +1,28 @@
-import { useState } from 'react';
-import classNames from 'classnames/bind';
-import Navigation from './components/navigations/Navigation';
-import { useNav } from './config/routes';
-import styles from './App.module.scss';
+import { useState } from "react"
+import classNames from "classnames/bind"
+import Navigation from "./components/navigations/Navigation"
+import { useNav } from "./config/routes"
+import styles from "./App.module.scss"
 
-const cx = classNames.bind(styles);
+const cx = classNames.bind(styles)
 
 const App = () => {
-  const { element: routes } = useNav();
-  const [isMobileNavOpen, setMobileNavOpen] = useState(false);
+  const { element: routes } = useNav()
+  const [isMobileNavOpen, setMobileNavOpen] = useState(false)
 
   return (
-    <div className={cx(styles.main__container, { [styles.mobile__nav__open]: isMobileNavOpen })}>
-      <Navigation isMobileNavOpen={isMobileNavOpen} setMobileNavOpen={setMobileNavOpen} />
+    <div
+      className={cx(styles.main__container, {
+        [styles.mobile__nav__open]: isMobileNavOpen,
+      })}
+    >
+      <Navigation
+        isMobileNavOpen={isMobileNavOpen}
+        setMobileNavOpen={setMobileNavOpen}
+      />
       {routes}
     </div>
-  );
-};
+  )
+}
 
-export default App;
+export default App
diff --git a/frontend/src/assets/CircleClear.svg b/frontend/src/assets/CircleClear.svg
diff --git a/frontend/src/assets/DropdownArrow.svg b/frontend/src/assets/DropdownArrow.svg
diff --git a/frontend/src/assets/ExternalLink.svg b/frontend/src/assets/ExternalLink.svg
diff --git a/frontend/src/assets/Filter.svg b/frontend/src/assets/Filter.svg
diff --git a/frontend/src/assets/Search.svg b/frontend/src/assets/Search.svg
diff --git a/frontend/src/assets/socials/Medium.svg b/frontend/src/assets/socials/Medium.svg
diff --git a/frontend/src/assets/socials/Telegram.svg b/frontend/src/assets/socials/Telegram.svg
diff --git a/frontend/src/assets/socials/Twitter.svg b/frontend/src/assets/socials/Twitter.svg
diff --git a/frontend/src/components/Connect.module.scss b/frontend/src/components/Connect.module.scss
diff --git a/frontend/src/components/Connect.tsx b/frontend/src/components/Connect.tsx
diff --git a/frontend/src/components/checkbox/checkbox.module.scss b/frontend/src/components/checkbox/checkbox.module.scss
@@ -0,0 +1,58 @@
+// @import 'scss/font_mixins';
+
+.checkbox {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+  gap: 8px;
+  user-select: none;
+
+  &.checked .indicator {
+    opacity: 1;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .text {
+    flex: 1;
+    // @include Small;
+    color: var(--token-dark-500);
+  }
+
+  &.checked {
+    .track {
+      border: solid 1px var(--token-primary-400);
+    }
+
+    .text {
+      color: var(--token-light-white);
+      transition: color 100ms;
+    }
+  }
+}
+
+.track {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: solid 1px var(--token-dark-500);
+  border-radius: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.indicator {
+  background: var(--token-primary-500);
+  border-radius: 2px;
+  width: 8px;
+  height: 8px;
+
+  opacity: 0;
+  transition: opacity 100ms;
+}
diff --git a/frontend/src/components/checkbox/checkbox.tsx b/frontend/src/components/checkbox/checkbox.tsx
@@ -0,0 +1,30 @@
+import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import classNames from 'classnames/bind';
+import styles from './checkbox.module.scss';
+
+const cx = classNames.bind(styles);
+
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string
+  checked?: boolean
+}
+
+const Checkbox = forwardRef(
+  (
+    { className, label, checked, ...attrs }: CheckboxProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    const { disabled } = attrs;
+    return (
+      <label className={cx(styles.checkbox, { checked, disabled }, className)}>
+        <input {...attrs} type='checkbox' hidden ref={ref} />
+        <span className={styles.track}>
+          <span className={styles.indicator} />
+        </span>
+        <span className={styles.text}>{label}</span>
+      </label>
+    );
+  },
+);
+
+export default Checkbox;