-
- = ({
+ item,
+ valuation,
+ setValuation
+}) => {
+ const setActiveValuation = (e: MouseEvent) => {
+ setValuation({
+ img: item.img,
+ title: item.title
+ })
+ }
-export const PopupConverter: FC = (
- {
- item,
- valuation,
- setValuation,
- }
-) => {
-
- const setActiveValuation = (e: MouseEvent) => {
- setValuation({
- img: item.img,
- title: item.title
- })
- }
-
- return (
- , handler:Function) {
- useEffect(
- () => {
- const listener = (event:MouseEvent|TouchEvent) => {
- if (!ref.current || ref.current.contains(event.target)) {
- return;
- }
- handler(event);
- };
- document.addEventListener("mousedown", listener);
- document.addEventListener("touchstart", listener);
- return () => {
- document.removeEventListener("mousedown", listener);
- document.removeEventListener("touchstart", listener);
- };
- },
- [ref, handler]
- );
-}
\ No newline at end of file
+export default function useOnClickOutside(
+ ref: React.RefObject,
+ handler: Function
+) {
+ useEffect(() => {
+ const listener = (event: MouseEvent | TouchEvent) => {
+ if (!ref.current || ref.current.contains(event.target)) {
+ return
+ }
+ handler(event)
+ }
+ document.addEventListener('mousedown', listener)
+ document.addEventListener('touchstart', listener)
+ return () => {
+ document.removeEventListener('mousedown', listener)
+ document.removeEventListener('touchstart', listener)
+ }
+ }, [ref, handler])
+}
diff --git a/src/http/index.ts b/src/http/index.ts
index 97a92c6..2e3f57e 100644
--- a/src/http/index.ts
+++ b/src/http/index.ts
@@ -1,5 +1,5 @@
-import axios from "axios"
+import axios from 'axios'
export const API_URL = 'https://testnet.binancefuture.com'
-export const $api = axios.create({ baseURL: API_URL })
\ No newline at end of file
+export const $api = axios.create({ baseURL: API_URL })
diff --git a/src/index.tsx b/src/index.tsx
index 42a9dd0..3e8d34f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,34 +1,31 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-const CryptoConvert = require("crypto-convert").default;
+const CryptoConvert = require('crypto-convert').default
export const convert = new CryptoConvert({
- cryptoInterval: 20000, //Crypto prices update interval in ms (default 5 seconds on Node.js & 15 seconds on Browsers)
- fiatInterval: (60 * 1e3 * 60), //Fiat prices update interval (default every 1 hour)
- calculateAverage: true, //Calculate the average crypto price from exchanges
- binance: true, //Use binance rates
- bitfinex: true, //Use bitfinex rates
- coinbase: true, //Use coinbase rates
- kraken: true, //Use kraken rates
- HTTPAgent: null //HTTP Agent for server-side proxies (Node.js only)
-});
+ cryptoInterval: 20000, //Crypto prices update interval in ms (default 5 seconds on Node.js & 15 seconds on Browsers)
+ fiatInterval: 60 * 1e3 * 60, //Fiat prices update interval (default every 1 hour)
+ calculateAverage: true, //Calculate the average crypto price from exchanges
+ binance: true, //Use binance rates
+ bitfinex: true, //Use bitfinex rates
+ coinbase: true, //Use coinbase rates
+ kraken: true, //Use kraken rates
+ HTTPAgent: null //HTTP Agent for server-side proxies (Node.js only)
+})
-const root = ReactDOM.createRoot(
- document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
const queryClient = new QueryClient()
root.render(
-
+
-);
+)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/models/IListValutionsName.ts b/src/models/IListValutionsName.ts
index e2f7b55..8ed0f5b 100644
--- a/src/models/IListValutionsName.ts
+++ b/src/models/IListValutionsName.ts
@@ -1,8 +1,8 @@
-import { Dispatch } from "react";
-import { IValutions } from "./IValutions";
+import { Dispatch } from 'react'
+import { IValutions } from './IValutions'
export interface IListValuationsName {
- item: IValutions,
- setValuation: Dispatch,
- valuation: string
-}
\ No newline at end of file
+ item: IValutions
+ setValuation: Dispatch
+ valuation: string
+}
diff --git a/src/models/IValutions.ts b/src/models/IValutions.ts
index c36267d..0a24c76 100644
--- a/src/models/IValutions.ts
+++ b/src/models/IValutions.ts
@@ -1,5 +1,5 @@
export interface IValutions {
- title: string,
- img: string,
- alt?: string
+ title: string
+ img: string
+ alt?: string
}
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
index 49a2a16..57a24a2 100644
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from 'web-vitals'
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
+ getCLS(onPerfEntry)
+ getFID(onPerfEntry)
+ getFCP(onPerfEntry)
+ getLCP(onPerfEntry)
+ getTTFB(onPerfEntry)
+ })
}
-};
+}
-export default reportWebVitals;
+export default reportWebVitals
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 8f2609b..52aaef1 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
-
-
-
-
- 
- {firstValuation.title}
-
-
-
-
-
- {showFirstValuation &&
- {valuations.map((item, index) =>
-
- }
-
-
-
-
-
-
-
+ return (
+
- 
- {secondValuation.title}
-
-
-
-
-
- {showSecondValuation &&
- {valuations.map((item, index) =>
-
- }
-
+
+ )
}
-export default App;
-
+export default App
diff --git a/src/Components/popup-converter/Popup-converter.scss b/src/Components/popup-converter/Popup-converter.scss
index 34d563e..73d84a2 100644
--- a/src/Components/popup-converter/Popup-converter.scss
+++ b/src/Components/popup-converter/Popup-converter.scss
@@ -1,42 +1,42 @@
-.popup-converter{
+.popup-converter {
position: absolute;
z-index: 2;
inset: 75px auto auto 0;
width: 100%;
- box-shadow: 0 4px 24px rgba(0,0,0,.25);
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
background: #fff;
display: flex;
flex-direction: column;
padding: 10px 0;
border-radius: 5px;
- &__container{
+ &__container {
padding: 4px 12px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
- &:hover{
+ &:hover {
background: #ffeca1;
}
}
- &__check{
+ &__check {
display: flex;
flex: 0 0 16px;
}
- &__body{
+ &__body {
display: flex;
align-items: center;
}
- &__img{
+ &__img {
flex: 0 0 20px;
height: 20px;
- img{
+ img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
- &__button{
+ &__button {
background: transparent;
transition: 0.3s all ease;
// padding: 10px;
@@ -44,11 +44,11 @@
font-weight: 700;
cursor: pointer;
border: none;
- span{
+ span {
margin: 0 4px;
font-size: 16px;
line-height: 24px;
- color: rgba(84,96,122,.68);
+ color: rgba(84, 96, 122, 0.68);
}
}
-}
\ No newline at end of file
+}
diff --git a/src/Components/popup-converter/Popup-converter.tsx b/src/Components/popup-converter/Popup-converter.tsx
index a3fe188..e949c21 100644
--- a/src/Components/popup-converter/Popup-converter.tsx
+++ b/src/Components/popup-converter/Popup-converter.tsx
@@ -1,42 +1,43 @@
-import {Dispatch, FC, MouseEvent} from "react"
-import {IListValuationsName} from "../../models/IListValutionsName"
+import { FC, MouseEvent } from 'react'
+import { IListValuationsName } from '../../models/IListValutionsName'
import './Popup-converter.scss'
+export const PopupConverter: FC
+
+
+
+
+
+
- );
+
+
+ {firstValuation.title}
-
+
+
+
+
+ {showFirstValuation && (
+
+ {valuations.map((item, index) => (
+
+ )}
+
+
+
+
+
+
+
+
+ {secondValuation.title}
+
+
+
+
+
+ {showSecondValuation && (
+
+ {valuations.map((item, index) => (
+
+ )}
+
-
-
- )
+ return (
+
- {valuation === item.title &&
- }
-
-
- 
-
-
-
-
-
+
+ )
}
-
diff --git a/src/hooks/useOnClickOutside.tsx b/src/hooks/useOnClickOutside.tsx
index f0aba68..30e7b5e 100644
--- a/src/hooks/useOnClickOutside.tsx
+++ b/src/hooks/useOnClickOutside.tsx
@@ -1,22 +1,21 @@
-import { useEffect } from 'react';
+import { useEffect } from 'react'
-
-export default function useOnClickOutside(ref:React.RefObject
+ {valuation === item.title && (
+
+ )}
+
+
+
+
+
+