diff --git a/package-lock.json b/package-lock.json index 8b4ece4..dd6ccb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "big.js": "^6.2.1", "copy-to-clipboard": "^3.3.3", + "crypto-js": "^4.2.0", "react": "^18.2.0", "react-chrome-extension-router": "^1.4.0", "react-dom": "^18.2.0", @@ -5951,6 +5952,11 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "node_modules/crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", @@ -21684,6 +21690,11 @@ "which": "^2.0.1" } }, + "crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", diff --git a/package.json b/package.json index daf9972..8697c9e 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "big.js": "^6.2.1", "copy-to-clipboard": "^3.3.3", + "crypto-js": "^4.2.0", "react": "^18.2.0", "react-chrome-extension-router": "^1.4.0", "react-dom": "^18.2.0", diff --git a/src/app/App.js b/src/app/App.js index 26488e6..63f8207 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -23,6 +23,8 @@ import { getZanoPrice } from "./api/coingecko"; import "./styles/App.scss"; import PasswordPage from "./components/PasswordPage/PasswordPage"; import PasswordCreatePage from "./components/PasswordCreatePage/PasswordCreatePage"; +import ConnectPage from "./components/ConnectPage/ConnectPage"; +import ConnectKeyUtils from "./utils/ConnectKeyUtils"; function App() { const { state, dispatch } = useContext(Store); @@ -219,6 +221,8 @@ function App() { }); }, [dispatch]); + const appConnected = !!(state.connectKey || ConnectKeyUtils.getConnectKeyEncrypted()); + return (
@@ -229,55 +233,58 @@ function App() { onClose={handleCancel} onConfirm={handleConfirm} /> - {/* {loggedIn &&
} */} -
+ {loggedIn &&
} + {/*
*/} -
+ {/*
-
+
*/} - {/* { - loggedIn - ? + {appConnected ? ( -
- - - - -
- ) - : - ( - creatingPassword ? - { - setPassword(password); - setLoggedIn(true); - setSessionLogIn(true); - }} - /> : - { - if (comparePasswords(password)) { + loggedIn + ? + ( +
+ + + + +
+ ) + : + ( + creatingPassword ? + { + setPassword(password); + if (state.connectKey) ConnectKeyUtils.setConnectKey(state.connectKey, password); setLoggedIn(true); setSessionLogIn(true); - } else { - setIncorrectPassword(true); - } - }} - /> - ) - } */} - + }} + /> : + { + if (comparePasswords(password)) { + setLoggedIn(true); + setSessionLogIn(true); + } else { + setIncorrectPassword(true); + } + }} + /> + ) + ) : + + } )}
diff --git a/src/app/components/ConnectPage/ConnectPage.jsx b/src/app/components/ConnectPage/ConnectPage.jsx new file mode 100644 index 0000000..970dd65 --- /dev/null +++ b/src/app/components/ConnectPage/ConnectPage.jsx @@ -0,0 +1,64 @@ +import Button from "../UI/Button/Button"; +import s from "./ConnectPage.module.scss"; +import logo from "../../assets/svg/logo.svg"; +import { useContext, useState } from "react"; +import MyInput from "../UI/MyInput/MyInput"; +import { fetchBackground } from "../../utils/utils"; +import { setConnectKey } from "../../store/actions"; +import { Store } from "../../store/store-reducer"; + +export default function ConnectPage() { + const { dispatch } = useContext(Store); + + // "start" | "code" + const [connectState, setConnectState] = useState("start"); + + const [keyValue, setKeyValue] = useState(""); + + async function connectClick() { + const response = await fetchBackground({ method: "CREATE_CONNECT_KEY" }); + if (response.success) setConnectState("code"); + } + + async function continueClick() { + const response = await fetchBackground({ method: "VALIDATE_CONNECT_KEY" }); + if (response.success) setConnectKey(dispatch, keyValue); + } + + return ( +
+ Zano +

{connectState === "start" ? "Connect wallet app to continue" : "Type connect key from app"}

+ { + (() => { + switch (connectState) { + case "code": { + return ( +
+ setKeyValue(event.currentTarget.value)} + /> + +
+ // <> + ) + } + default: { + return ( + <> + + + ) + } + } + })() + } +
+ ) +} \ No newline at end of file diff --git a/src/app/components/ConnectPage/ConnectPage.module.scss b/src/app/components/ConnectPage/ConnectPage.module.scss new file mode 100644 index 0000000..b34fc83 --- /dev/null +++ b/src/app/components/ConnectPage/ConnectPage.module.scss @@ -0,0 +1,28 @@ +.connect { + display: flex; + flex-direction: column; + align-items: center; + + .logoImage { + width: 175px; + } + + > p { + margin-top: 20px; + width: 300px; + text-align: center; + opacity: 0.7; + } + + > button { + margin-top: 150px; + width: 200px; + } + + .connectCodeContent { + margin-top: 130px; + display: flex; + flex-direction: column; + gap: 10px; + } +} \ No newline at end of file diff --git a/src/app/store/actions.js b/src/app/store/actions.js index 3bda1c5..cf92db8 100644 --- a/src/app/store/actions.js +++ b/src/app/store/actions.js @@ -67,3 +67,10 @@ export const updateTransactionStatus = (dispatch, state) => { payload: state, }); }; + +export const setConnectKey = (dispatch, state) => { + return dispatch({ + type: "SET_CONNECT_KEY", + payload: state + }); +}; diff --git a/src/app/store/store-reducer.js b/src/app/store/store-reducer.js index 0f9d803..1225360 100644 --- a/src/app/store/store-reducer.js +++ b/src/app/store/store-reducer.js @@ -108,6 +108,8 @@ const reducer = (state, action) => { return { ...state, confirmationModal: action.payload }; case "TRANSACTION_STATUS_UPDATED": return { ...state, transactionStatus: action.payload }; + case "SET_CONNECT_KEY": + return { ...state, connectKey: action.payload } default: return state; } diff --git a/src/app/utils/ConnectKeyUtils.js b/src/app/utils/ConnectKeyUtils.js new file mode 100644 index 0000000..103808f --- /dev/null +++ b/src/app/utils/ConnectKeyUtils.js @@ -0,0 +1,11 @@ +import CryptoJS from "crypto-js"; + +export default class ConnectKeyUtils { + static setConnectKey(key, extPass) { + localStorage.setItem("connectKey", CryptoJS.AES.encrypt(key, extPass).toString()); + } + + static getConnectKeyEncrypted() { + return localStorage.getItem("connectKey"); + } +} \ No newline at end of file diff --git a/src/background/background.js b/src/background/background.js index 1ffd0a4..35c3ba1 100644 --- a/src/background/background.js +++ b/src/background/background.js @@ -5,7 +5,9 @@ import { transfer, transferBridge, ionicSwap, - ionicSwapAccept + ionicSwapAccept, + createConnectKey, + validateConnectKey } from "./wallet"; // eslint-disable-next-line no-undef @@ -162,6 +164,20 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { break; } + case "CREATE_CONNECT_KEY": { + createConnectKey() + .then(() => sendResponse({ success: true })) + .catch(() => sendResponse({ error: "Internal error" })); + break; + } + + case "VALIDATE_CONNECT_KEY": { + validateConnectKey() + .then(() => sendResponse({ success: true })) + .catch(() => sendResponse({ error: "Internal error" })); + break; + } + default: console.error("Unknown message method:", request.method); sendResponse({ error: `Unknown method: ${request.method}` }); diff --git a/src/background/wallet.js b/src/background/wallet.js index d509612..4cfc0aa 100644 --- a/src/background/wallet.js +++ b/src/background/wallet.js @@ -337,3 +337,11 @@ export const transferBridge = async ( const data = await response.json(); return data; }; + +export const createConnectKey = async () => { + await fetch("http://localhost:12111/connect-api-consumer"); +} + +export const validateConnectKey = async () => { + await fetch("http://localhost:12111/validate-connect-key"); +} \ No newline at end of file