feat: added colorizer

.eslintrc.js

@@ -4,30 +4,30 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'plugin:@next/next/recommended',
+    'plugin:@next/next/recommended'
   ],
   plugins: ['@typescript-eslint', 'import', 'react-hooks'],
   parserOptions: {
-    "warnOnUnsupportedTypeScriptVersion": false,
+    warnOnUnsupportedTypeScriptVersion: false,
     ecmaVersion: 6,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
-      modules: true,
+      modules: true
     },
-    project: ["./tsconfig.eslint.json", "./tsconfig.json"],
-    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.eslint.json', './tsconfig.json'],
+    tsconfigRootDir: __dirname
   },
   env: {
     browser: true,
     node: true,
     es6: true,
-    jest: true,
+    jest: true
   },
   settings: {
     react: {
-      version: 'detect',
-    },
+      version: 'detect'
+    }
   },
   rules: {
     'no-mixed-spaces-and-tabs': 'error',
@@ -49,13 +49,13 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'error',
     'padding-line-between-statements': [
       'error',
-      { blankLine: 'always', prev: '*', next: 'return' },
+      { blankLine: 'always', prev: '*', next: 'return' }
     ],
     'no-console': [
       'error',
       {
-        allow: ['warn', 'error'],
-      },
+        allow: ['warn', 'error']
+      }
     ],
     '@typescript-eslint/explicit-module-boundary-types': 0
   },
@@ -64,8 +64,8 @@ module.exports = {
       files: ['*.js'],
       rules: {
         '@typescript-eslint/no-var-requires': 'off',
-        '@typescript-eslint/explicit-function-return-type': 'off',
-      },
+        '@typescript-eslint/explicit-function-return-type': 'off'
+      }
     },
     {
       files: ['*.tsx', '*.ts'],
@@ -88,13 +88,13 @@ module.exports = {
             variables: false,
             enums: false,
             typedefs: false,
-            ignoreTypeReferences: false,
-          },
-        ],
-      },
-    },
+            ignoreTypeReferences: false
+          }
+        ]
+      }
+    }
   ],
   globals: {
-    nameof: 'readonly',
-  },
+    nameof: 'readonly'
+  }
 };

.prettierignore

@@ -1,7 +1,6 @@
 # Project
 node_modules/
-.*
-!.babelrc
+
 *.log
 *.sh
 *.tsbuildinfo
@@ -18,6 +17,3 @@ yarn.lock
 *.jpg
 *.png
 *.cur
-
-# markdown
-*.md

package.json

@@ -72,6 +72,7 @@
     "linaria": "^4.1.11",
     "near-api-js": "^1.1.0",
     "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.5"
   }

src/App.tsx

@@ -0,0 +1,81 @@
+import { styled } from 'linaria/react';
+import { ChangeEvent, useState } from 'react';
+import { RgbColorPicker } from 'react-colorful';
+import { Wallet } from './components';
+import { getKeys } from './utils';
+
+export const App = () => {
+  const [selectedColor, setSelectedColor] = useState<RgbColor>(initialColor);
+
+  const getOnInputChange =
+    (part: keyof RgbColor) => (event: ChangeEvent<HTMLInputElement>) => {
+      const newPartValue = event.target.value;
+      setSelectedColor((value) => ({ ...value, [part]: newPartValue }));
+    };
+
+  return (
+    <Page selectedColor={selectedColor}>
+      <Wallet />
+
+      <ColorRoot>
+        <RgbColorPicker color={selectedColor} onChange={setSelectedColor} />
+        <Inputs>
+          {getKeys(selectedColor).map((key) => (
+            <Input
+              key={key}
+              value={selectedColor[key]}
+              onChange={getOnInputChange(key)}
+            />
+          ))}
+        </Inputs>
+      </ColorRoot>
+    </Page>
+  );
+};
+
+const Page = styled.div<{ selectedColor: RgbColor }>`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+
+  background-color: ${({ selectedColor: { b, g, r } }) =>
+    `rgb(${r},${g},${b})`};
+`;
+
+const Input = styled.input`
+  border-radius: 5px;
+  height: 50px;
+  width: 50px;
+  text-align: center;
+  font-size: 30px;
+  border-color: #eee;
+`;
+
+const initialColor: RgbColor = {
+  r: 255,
+  g: 255,
+  b: 255
+};
+
+const Inputs = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+`;
+
+const ColorRoot = styled.div`
+  margin: 0 auto;
+  display: inline-block;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  border: 5px solid #444;
+  box-shadow: 0 0 69px -16px #fff;
+`;
+
+type RgbColor = {
+  r: number;
+  g: number;
+  b: number;
+};

src/global.css

@@ -0,0 +1,5 @@
+
+body {
+  margin: 0;
+  padding: 0;
+}

src/pages/_app.tsx

@@ -0,0 +1,18 @@
+import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import '../global.css';
+
+const App = ({ Component, pageProps }: AppProps) => {
+  return (
+    <>
+      <Head>
+        <title>Near frontend app</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <Component {...pageProps} />
+    </>
+  );
+};
+
+export default App;

src/pages/index.ts

@@ -0,0 +1 @@
+export { App as default } from '../App';

src/utils/getKeys.ts

@@ -0,0 +1,6 @@
+/** returns literal string instead of «string» for the concrete objects */
+export function getKeys<T extends Record<string | number, unknown>>(
+  object: T
+): (keyof T)[] {
+  return Object.keys(object) as (keyof T)[];
+}

src/utils/index.ts

@@ -1 +1,2 @@
+export { getKeys } from './getKeys';
 export { isClientSide } from './isClientSide';

yarn.lock

@@ -7780,6 +7780,11 @@ rc-virtual-list@^3.4.13, rc-virtual-list@^3.4.8:
     rc-resize-observer "^1.0.0"
     rc-util "^5.15.0"
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"