- ;
+
+export const isConnectedAuro = "isConnectedAuro";
+
+interface IUseGlobal extends WalletStore.IWalletData {
+ actions: {
+ setWalletData: (
+ payload: WalletStore.IWalletData
+ ) => PayloadAction;
+ onConnectWallet: () => Promise;
+ onDisconnectWallet: () => Promise;
+ setConnectMessage: (value: string | null) => void;
+ };
+}
+
+export default function useWallet(): IUseGlobal {
+ const [account, setAccount] = useLocalStorage('account');
+
+ const [walletData, setWalletData] = useState(null);
+ const [, setIsConnectedAuro] = useLocalStorage(isConnectedAuro);
+console.log(account);
+console.log(walletData);
+useEffect(() => {
+ !!account && setWalletData(JSON.parse(account))
+}, [])
+
+ const setConnectMessage = (connectMessage) =>
+ setWalletData({ ...walletData, connectMessage: connectMessage });
+
+ const minaAdapter = typeof window !== "undefined" && window["mina"];
+
+ const onConnectWallet = async (): Promise => {
+ if (!minaAdapter) {
+ console.warn("No provider was found Auro Wallet");
+ } else {
+ setWalletData({
+ ...walletData,
+ connectMessage: "Onboarding in progress",
+ });
+
+ const data = await minaAdapter.requestAccounts().catch((err) => err);
+ if (data.message) {
+ setWalletData({ ...walletData, connectMessage: data.message });
+ } else {
+ setWalletData({
+ ...walletData,
+ accountId: data,
+ connectMessage: "Connected",
+ });
+ setIsConnectedAuro(true);
+ setAccount(JSON.stringify({
+ ...walletData,
+ accountId: data,
+ connectMessage: "Connected",
+ }));
+ }
+ }
+ };
+
+ const onDisconnectWallet = async (): Promise => {
+ setWalletData(null);
+ setIsConnectedAuro(false);
+ setAccount(null)
+ };
+ return {
+ ...walletData,
+ actions: {
+ setWalletData,
+ onConnectWallet,
+ onDisconnectWallet,
+ setConnectMessage,
+ },
+ };
+}
diff --git a/ui/store/index.ts b/ui/store/index.ts
new file mode 100644
index 0000000..28d08fb
--- /dev/null
+++ b/ui/store/index.ts
@@ -0,0 +1,38 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+
+import { walletService } from "./wallet/walletService";
+
+import walletReducer from "./wallet/walletSlice";
+
+export const rootReducer = combineReducers({
+ wallet: walletReducer,
+ [walletService.reducerPath]: walletService.reducer,
+});
+
+export const createStore = (_initialValue = {}) => {
+ const store = configureStore({
+ reducer: rootReducer,
+ preloadedState: { ..._initialValue },
+ //@ts-ignore
+ middleware: (getDefaultMiddleware) => {
+ const middlewares = [walletService.middleware];
+ return getDefaultMiddleware({
+ thunk: true,
+ serializableCheck: false,
+ immutableCheck: false,
+ }).concat(middlewares);
+ },
+ devTools: true,
+ });
+
+ return store;
+};
+
+export type RootState = ReturnType;
+export type AppStore = ReturnType;
+export type AppDispatch = AppStore["dispatch"];
+
+export const useAppDispatch = (): AppDispatch => useDispatch();
+
+export const useAppSelector: TypedUseSelectorHook = useSelector;
diff --git a/ui/store/wallet/walletService.ts b/ui/store/wallet/walletService.ts
new file mode 100644
index 0000000..3e9e827
--- /dev/null
+++ b/ui/store/wallet/walletService.ts
@@ -0,0 +1,23 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { PUBLIC_APP_BASE_URL } from '../../comman/constants';
+
+export const walletService = createApi({
+ reducerPath: 'walletService',
+ baseQuery: fetchBaseQuery({
+ baseUrl: PUBLIC_APP_BASE_URL,
+ fetchFn: fetch,
+ }),
+ endpoints: (builder) => ({
+ getWalletBalance: builder.query({
+ query: (address) => {
+ return {
+ url: `/qanet/api//api/core/accounts/${address}/balance`,
+ method: 'GET',
+ };
+ },
+ }),
+ }),
+});
+
+export const { getWalletBalance } = walletService.endpoints;
+export const { useGetWalletBalanceQuery } = walletService;
diff --git a/ui/store/wallet/walletSlice.ts b/ui/store/wallet/walletSlice.ts
new file mode 100644
index 0000000..c4a1262
--- /dev/null
+++ b/ui/store/wallet/walletSlice.ts
@@ -0,0 +1,36 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { getWalletBalance } from './walletService';
+
+
+export type IWalletData = {
+ accountId: string[];
+ connectMessage: string;
+ balance: { balance: number; balanceUsd: number };
+};
+
+const initialState: IWalletData = {
+ balance: { balance: 0, balanceUsd: 0 },
+ connectMessage: '',
+ accountId: ['']
+};
+
+export const walletSlice = createSlice({
+ name: 'wallet',
+ initialState,
+ reducers: {
+ setWalletData: (_, action: PayloadAction) => {
+ return {
+ ...action.payload,
+ };
+ },
+ },
+ // @ts-ignore
+ extraReducers: (builder) => {
+ builder.addMatcher(getWalletBalance.matchFulfilled, (state, { payload }) => {
+ state.balance = payload;
+ });
+ },
+});
+
+export const { setWalletData } = walletSlice.actions;
+export default walletSlice.reducer;
diff --git a/ui/styles/globals.css b/ui/styles/globals.css
index f4bd77c..eb2e3d9 100644
--- a/ui/styles/globals.css
+++ b/ui/styles/globals.css
@@ -1,107 +1,288 @@
-:root {
- --max-width: 1100px;
- --border-radius: 12px;
- --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
- "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
- "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-
- --primary-glow: conic-gradient(
- from 180deg at 50% 50%,
- #16abff33 0deg,
- #0885ff33 55deg,
- #54d6ff33 120deg,
- #0071ff33 160deg,
- transparent 360deg
- );
- --secondary-glow: radial-gradient(
- rgba(255, 255, 255, 1),
- rgba(255, 255, 255, 0)
- );
+html,
+body {
+ margin: 0;
+ padding: 0;
+ font-family: var(--ff--inter-regular);
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 133%;
+ color: var(--col--dark);
+}
- --tile-start-rgb: 239, 245, 249;
- --tile-end-rgb: 228, 232, 233;
- --tile-border: conic-gradient(
- #00000080,
- #00000040,
- #00000030,
- #00000020,
- #00000010,
- #00000010,
- #00000080
+* {
+ box-sizing: border-box !important;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+#root {
+ height: 100vh;
+}
+
+#main {
+ margin: auto;
+ min-height: 100vh;
+ background: linear-gradient(
+ 97deg,
+ #efeff8 8.46%,
+ #ffe1e5 47.23%,
+ #fefcff 60.11%,
+ #fffaef 67.04%,
+ #d7d9ff 74.27%,
+ #efeff8 100.19%
);
+}
- --callout-rgb: 238, 240, 241;
- --callout-border-rgb: 172, 175, 176;
- --card-rgb: 180, 185, 188;
- --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
-
- --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
- --secondary-glow: linear-gradient(
- to bottom right,
- rgba(1, 65, 255, 0),
- rgba(1, 65, 255, 0),
- rgba(1, 65, 255, 0.3)
- );
-
- --tile-start-rgb: 2, 13, 46;
- --tile-end-rgb: 2, 5, 19;
- --tile-border: conic-gradient(
- #ffffff80,
- #ffffff40,
- #ffffff30,
- #ffffff20,
- #ffffff10,
- #ffffff10,
- #ffffff80
- );
-
- --callout-rgb: 20, 20, 20;
- --callout-border-rgb: 108, 108, 108;
- --card-rgb: 100, 100, 100;
- --card-border-rgb: 200, 200, 200;
- }
+#main footer {
+ margin-top: auto;
}
-* {
- box-sizing: border-box;
- padding: 0;
+.sticky-top {
+ position: -webkit-sticky;
+ /* Safari */
+ position: sticky;
+ top: 0;
+ z-index: 999;
+}
+
+.web-nav {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 85px;
+ background-color: var(--col--dark);
+ color: white;
+}
+
+.links {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.richText > * {
+ list-style: none;
+ padding: 0px;
+}
+
+.menu-item-subcategory {
+ color: var(--col--primary1);
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
margin: 0;
}
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
+/* Firefox */
+input[type="number"] {
+ -moz-appearance: textfield;
}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+/** Typography */
+
+p {
+ margin: 0;
}
-a {
- color: inherit;
- text-decoration: none;
+/** Lists */
+ul {
+ list-style: none;
}
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
+ul li {
+ position: relative;
+ padding-left: 1em;
+}
+
+ul li::before {
+ content: "\2022";
+ color: var(--col--primary1);
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ position: absolute;
+ left: 0;
+ width: 1em;
+}
+
+ol {
+ list-style: none;
+ counter-reset: li;
+}
+
+ol li {
+ counter-increment: li;
+ position: relative;
+ padding-left: 1em;
+}
+
+ol li::before {
+ content: counter(li);
+ color: var(--col--primary1);
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ position: absolute;
+ left: 0;
+ width: 1em;
+}
+
+ul li,
+ol li {
+ font-size: var(--li-md-size, 16px);
+ line-height: var(--li-md-line-height, 24px);
+}
+
+@media screen and (min-width: 960px) {
+ ul li,
+ ol li {
+ font-size: var(--li-lg-size, 18px);
+ line-height: var(--li-lf-line-height, 28px);
+ }
+}
+
+/** Links */
+
+.link-secondary-active,
+.link-primary-active {
+ font-family: var(--ff--link);
+ font-style: normal;
+ font-weight: normal;
+ text-decoration-line: underline;
+ text-transform: uppercase;
+ cursor: pointer;
+}
+
+.link-secondary-active {
+ font-size: 14px;
+ line-height: 18px;
+}
+
+.link-primary-active {
+ font-size: 18px;
+ line-height: 22px;
+}
+
+@media screen and (max-width: 960px) {
+ .link-primary-active {
+ font-size: 14px;
+ line-height: 18px;
+ }
+}
+
+/* Truncate */
+
+/* single line */
+.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* multi line */
+.truncate-at-2,
+.truncate-at-3,
+.truncate-at-4,
+.truncate-at-5 {
+ display: block;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.truncate-at-2 {
+ -webkit-line-clamp: 2;
+}
+
+.truncate-at-3 {
+ -webkit-line-clamp: 3;
+}
+
+.truncate-at-4 {
+ -webkit-line-clamp: 4;
+}
+
+.truncate-at-5 {
+ -webkit-line-clamp: 5;
+}
+
+_:-ms-fullscreen,
+:root .truncate-at-2,
+.truncate-at-3,
+.truncate-at-4,
+.truncate-at-5 {
+ white-space: nowrap;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+.container {
+ width: 100%;
+ margin: 0 auto;
+}
+
+@media (max-width: 576px) {
+ .container {
+ padding: 0 16px;
+ max-width: 575px;
+ }
+}
+
+@media (min-width: 577px) {
+ .container {
+ max-width: 540px;
+ }
+}
+
+@media (min-width: 769px) {
+ .container {
+ max-width: 720px;
}
}
+
+@media (min-width: 993px) {
+ .container {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1201px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+
+@media (min-width: 1401px) {
+ .container {
+ max-width: 1320px;
+ }
+}
+
+.app {
+ max-width: var(--desktop-width);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ min-height: var(--app-height);
+}
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 649790e..ebfabe3 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,21 +1,27 @@
{
+ "ts-node": {
+ "compilerOptions": {
+ "module": "CommonJS"
+ }
+ },
"compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "bundler",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "incremental": true,
- "paths": {
- "@/*": ["./*"]
- }
+ "target": "es2017",
+ "lib": ["dom", "dom.iterable", "esnext", "es2019.array"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "strictNullChecks": false,
+ "incremental": true
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "exclude": ["node_modules"],
+ "include": ["@types/**/*.d.ts", "**/*.ts", "**/*.tsx", "src/configs/env.js"]
}
- Get started by editing
- pages/index.tsx
-
-
- By{" "}
-
+
+
);
}
diff --git a/ui/public/fonts.css b/ui/public/fonts.css
new file mode 100644
index 0000000..2eb7173
--- /dev/null
+++ b/ui/public/fonts.css
@@ -0,0 +1,68 @@
+@font-face {
+ font-family: 'Inter';
+ src: url('./fonts/Inter.ttf') format('truetype');
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter Bold';
+ src: url('./fonts/Inter.ttf') format('truetype');
+ font-weight: 700;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter Medium';
+ src: url('./fonts/Inter.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter Semi Bold';
+ src: url('./fonts/Inter.ttf') format('truetype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Robot Mono';
+ src: url('./fonts/RobotoMono.ttf') format('truetype');
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Robot Mono Medium';
+ src: url('./fonts/RobotoMono.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Robot Mono Semi Bold';
+ src: url('./fonts/RobotoMono.ttf') format('truetype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Robot Mono Bold';
+ src: url('./fonts/RobotoMono.ttf') format('truetype');
+ font-weight: 700;
+ font-style: normal;
+}
+
+:root {
+ --ff--replacement-font: Arial, sans-serif;
+ --ff--inter-regular: Inter, var(--ff--replacement-font);
+ --ff--inter-bold: Inter Bold, var(--ff--replacement-font);
+ --ff--inter-medium: Inter Medium, var(--ff--replacement-font);
+ --ff--inter-semi-bold: Inter Semi Bold, var(--ff--replacement-font);
+
+ --ff--robot-regular: Robot Mono, var(--ff--replacement-font);
+ --ff--robot-medium: Robot Mono Medium, var(--ff--replacement-font);
+ --ff--robot-semi-bold: Robot Mono Semi Bold, var(--ff--replacement-font);
+ --ff--robot-bold: Robot Mono Bold, var(--ff--replacement-font);
+}
diff --git a/ui/public/fonts/Inter.ttf b/ui/public/fonts/Inter.ttf
new file mode 100644
index 0000000..e724708
Binary files /dev/null and b/ui/public/fonts/Inter.ttf differ
diff --git a/ui/public/fonts/RobotoMono.ttf b/ui/public/fonts/RobotoMono.ttf
new file mode 100644
index 0000000..6df2b25
Binary files /dev/null and b/ui/public/fonts/RobotoMono.ttf differ
diff --git a/ui/public/normalize.css b/ui/public/normalize.css
new file mode 100755
index 0000000..5d8c1e3
--- /dev/null
+++ b/ui/public/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/ui/public/theme.css b/ui/public/theme.css
new file mode 100644
index 0000000..f3c6ba2
--- /dev/null
+++ b/ui/public/theme.css
@@ -0,0 +1,70 @@
+body {
+ --col--dark: rgba(0, 0, 0, 0.87);
+ --col--link: #3963ff;
+ --col--light: #ffffff;
+ --col--gray4: rgba(0, 0, 0, 0.3);
+ --col--gray8: rgba(0, 0, 0, 0.05);
+ --col--gray9: #969799;
+ --link-active-color: #7e9bfc;
+ --link-active-hover-color: #587efc;
+ --link-inactive-color: #636465;
+ --link-inactive-hover-color: #636465;
+ --col--dark2: rgba(0, 0, 0, 0.8);
+ --col--gray1: rgba(0, 0, 0, 0.6);
+ --col--gray2: rgba(247, 248, 250, 1);
+ /* rgba(249, 249, 249, 1) */
+ --col--gray3: #f9f9f9;
+ --col--gray4: rgba(0, 0, 0, 0.3);
+ /* rgba(246, 248, 250, 1) */
+ --col--gray5: #f6f8fa;
+ --col--gray6: rgba(43, 45, 51, 0.8);
+ --col--gray7: rgba(43, 45, 51, 0.6);
+ --col--gray8: rgba(0,0,0,.05);
+ /* rgba(150, 151, 153, 1) */
+ --col--gray9: #969799;
+ /* rgba(248, 250, 253, 1)*/
+ --col--secondary1: #73604b;
+ --col--secondary2: #faf6f3;
+ --col--secondary3: #faf3f3;
+ /* #597FFFCC */
+ --col--secondary4: #7c5b56;
+ --col--secondary5: rgb(125, 211, 161);
+ --col--secondary6: rgba(229, 103, 103, 0.87);
+ /* rgba(255, 239, 238, 1) */
+ --col--secondary7: #ffefee;
+ --col--secondary8: rgba(57, 99, 255, 0.5);
+
+ /* BUTTON */
+ /* rgba(52, 89, 231, 1) */
+ --col--button2: #3459e7;
+ /* rgba(56, 97, 251, 0.30) */
+ --col--button3: #3861fb4d;
+ /* #3963FF4D */
+ --col--button4: rgba(57, 99, 255, 0.3);
+ /* rgba(232, 236, 250, 1) */
+ --col--button5: #e8ecfa;
+ /* #D7DFFA */
+ --col--button6: rgba(215, 223, 250, 1);
+ /* #F0F3FF */
+ --col--button7: rgba(240, 243, 255, 1);
+ /* rgba(251, 226, 227, 1) */
+ --col--button8: #fbe2e3;
+ /* #EA3943 */
+ --col--button9: rgba(234, 57, 67, 1);
+ /* rgba(245, 215, 217, 1) */
+ --col--button10: #f5d7d9;
+ /* #F0CDCF */
+ --col--button11: rgba(240, 205, 207, 1);
+ /* rgba(251, 215, 217, 1) */
+ --col--button12: #fbd7d9;
+ /* rgba(234, 57, 67, 0.3) */
+ --col--button13: #ea39434d;
+ /* rgba(221, 224, 235, 1) */
+ --col--button14: #dde0eb;
+ /* rgba(245, 247, 249, 1) */
+ --col--button15: #f5f7f9;
+ /* rgba(237, 241, 245, 1) */
+ --col--button16: #edf1f5;
+ /* #5E62714D */
+ --col--button17: rgba(94, 98, 113, 0.3);
+}
diff --git a/ui/public/typography.css b/ui/public/typography.css
new file mode 100644
index 0000000..ba55b0b
--- /dev/null
+++ b/ui/public/typography.css
@@ -0,0 +1,68 @@
+/* desktop */
+.t-inter-regular {
+ font-family: var(--ff--inter-regular);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 400;
+ color: var(--col--dark);
+}
+
+.t-inter-medium {
+ font-family: var(--ff--inter-medium);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 500;
+ color: var(--col--dark);
+}
+
+.t-inter-semi-bold {
+ font-family: var(--ff--inter-semi-bold);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 600;
+ color: var(--col--dark);
+}
+
+.t-inter-bold {
+ font-family: var(--ff--inter-bold);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 700;
+ color: var(--col--dark);
+}
+
+.t-link {
+ color: var(--col--link);
+}
+
+.t-robot-regular {
+ font-family: var(--ff--robot-regular);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 400;
+ color: var(--col--dark);
+}
+
+.t-robot-medium {
+ font-family: var(--ff--robot-medium);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 500;
+ color: var(--col--dark);
+}
+
+.t-robot-semi-bold {
+ font-family: var(--ff--robot-semi-bold);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 600;
+ color: var(--col--dark);
+}
+
+.t-robot-bold {
+ font-family: var(--ff--robot-bold);
+ font-size: 14px;
+ line-height: 133%;
+ font-weight: 700;
+ color: var(--col--dark);
+}
diff --git a/ui/public/variables.css b/ui/public/variables.css
new file mode 100644
index 0000000..894f9b5
--- /dev/null
+++ b/ui/public/variables.css
@@ -0,0 +1,5 @@
+:root {
+ --border-color: #edece8;
+ --desktop-width: 1920px;
+ --app-height: 100%;
+}
diff --git a/ui/store/hooks/useWallet.ts b/ui/store/hooks/useWallet.ts
new file mode 100644
index 0000000..83ab1c8
--- /dev/null
+++ b/ui/store/hooks/useWallet.ts
@@ -0,0 +1,90 @@
+import { PayloadAction } from "@reduxjs/toolkit";
+
+import * as WalletStore from "../wallet/walletSlice";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
+import { useEffect, useState } from "react";
+export type SendPaymentresponse = {
+ hash?: string;
+ message?: string;
+ code?: number;
+};
+
+export type OnSend = (
+ amount: number,
+ to: string,
+ fee: number,
+ memo: string
+) => Promise
+
-
-
-
+
-
- Reveal Your True Self
+A creative ID that showcases your personality
+ setValue(e.target.value)} + variant={InputVariant.search} /> + {resultContent.isShow &&
-
-
-
+ - Docs -> -
-- Find in-depth information about Next.js features and API. -
- - - -- Learn -> -
-- Learn about Next.js in an interactive course with quizzes! -
- - - -- Templates -> -
-- Discover and deploy boilerplate example Next.js projects. -
- - - -- Deploy -> -
-- Instantly deploy your Next.js site to a shareable URL - with Vercel. -
- -