lthn/browser-extension
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add connect key page

Browse source
This commit is contained in:
andrewprog97 2024-02-16 02:22:57 +03:00
parent 1467c468b1
commit 94d0685aec
10 changed files with 195 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

85
src/app/App.js
View file

@ -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 (
<div className="App">
<AppPlug />
@ -229,55 +233,58 @@ function App() {
onClose={handleCancel}
onConfirm={handleConfirm}
/>
{/* {loggedIn && <Header />} */}
<Header/>
{loggedIn && <Header />}
{/* <Header/> */}
<AppLoader />
<div className="container">
{/* <div className="container">
<Router>
<Wallet />
<TokensTabs />
</Router>
</div>
</div> */}
{/* {
loggedIn
?
{appConnected ?
(
<div className="container">
<Router>
<Wallet />
<TokensTabs />
</Router>
</div>
)
:
(
creatingPassword ?
<PasswordCreatePage
incorrectPassword={incorrectPassword}
setIncorrectPassword={setIncorrectPassword}
onConfirm={(password) => {
setPassword(password);
setLoggedIn(true);
setSessionLogIn(true);
}}
/> :
<PasswordPage
incorrectPassword={incorrectPassword}
setIncorrectPassword={setIncorrectPassword}
onConfirm={(password) => {
if (comparePasswords(password)) {
loggedIn
?
(
<div className="container">
<Router>
<Wallet />
<TokensTabs />
</Router>
</div>
)
:
(
creatingPassword ?
<PasswordCreatePage
incorrectPassword={incorrectPassword}
setIncorrectPassword={setIncorrectPassword}
onConfirm={(password) => {
setPassword(password);
if (state.connectKey) ConnectKeyUtils.setConnectKey(state.connectKey, password);
setLoggedIn(true);
setSessionLogIn(true);
} else {
setIncorrectPassword(true);
}
}}
/>
)
} */}
}}
/> :
<PasswordPage
incorrectPassword={incorrectPassword}
setIncorrectPassword={setIncorrectPassword}
onConfirm={(password) => {
if (comparePasswords(password)) {
setLoggedIn(true);
setSessionLogIn(true);
} else {
setIncorrectPassword(true);
}
}}
/>
)
) :
<ConnectPage />
}
</>
)}
</div>

64
src/app/components/ConnectPage/ConnectPage.jsx Normal file
View file

@ -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 (
<div className={s.connect}>
<img
className={s.logoImage}
src={logo}
alt="Zano"
/>
<p>{connectState === "start" ? "Connect wallet app to continue" : "Type connect key from app"}</p>
{
(() => {
switch (connectState) {
case "code": {
return (
<div className={s.connectCodeContent}>
<MyInput
inputData={{ value: keyValue }}
label="Connect key"
onChange={event => setKeyValue(event.currentTarget.value)}
/>
<Button onClick={continueClick}>Continue</Button>
</div>
// <></>
)
}
default: {
return (
<>
<Button onClick={connectClick}>Connect</Button>
</>
)
}
}
})()
}
</div>
)
}

28
src/app/components/ConnectPage/ConnectPage.module.scss Normal file
View file

@ -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;
}
}

7
src/app/store/actions.js
View file

@ -67,3 +67,10 @@ export const updateTransactionStatus = (dispatch, state) => {
payload: state,
});
};
export const setConnectKey = (dispatch, state) => {
return dispatch({
type: "SET_CONNECT_KEY",
payload: state
});
};

2
src/app/store/store-reducer.js
View file

@ -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;
}

11
src/app/utils/ConnectKeyUtils.js Normal file
View file

@ -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");
}
}

18
src/background/background.js
View file

@ -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}` });

8
src/background/wallet.js
View file

@ -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");
}