Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract p2p client #194

Open
wants to merge 8 commits into
base: extract-wallet-to-context
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions components/Banner.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { Cross1Icon } from "@radix-ui/react-icons";
import { useAppDispatch, useAppState } from "../context/state";
import { useState } from "react";

type props = {
children: React.ReactNode;
};

const Banner = ({ children }: props) => {
const state = useAppState();
const dispatch = useAppDispatch();
const [hasBanner, setHasBanner] = useState(true);

return state.hasBanner ? (
return hasBanner ? (
<div className="fixed top-0 z-50 flex h-12 w-full items-center justify-between bg-primary px-4 text-xs text-white md:text-base">
<div>{children}</div>
<button onClick={() => dispatch({ type: "setBanner", payload: false })}>
<button onClick={() => setHasBanner(false)}>
<Cross1Icon className="h-full" />
</button>
</div>
Expand Down
31 changes: 3 additions & 28 deletions components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { LocalStorage, NetworkType } from "@airgap/beacon-sdk";
import { NetworkType } from "@airgap/beacon-sdk";
import { ArrowRightIcon } from "@radix-ui/react-icons";
import { validateAddress, ValidationResult } from "@taquito/utils";
import { AppProps } from "next/app";
import { usePathname } from "next/navigation";
import router, { useRouter } from "next/router";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import P2PClient from "../context/P2PClient";
import { PREFERED_NETWORK } from "../context/config";
import { init, useAppDispatch, useAppState } from "../context/state";
import { useAppDispatch, useAppState } from "../context/state";
import { useTezosToolkit } from "../context/tezos-toolkit";
import { useWallet } from "../context/wallet";
import { contractStorage } from "../types/Proposal0_3_1";
import { fetchContract } from "../utils/fetchContract";
import Banner from "./Banner";
Expand All @@ -27,7 +25,6 @@ export default function Layout({
const state = useAppState();
const dispatch = useAppDispatch();
const { tezos } = useTezosToolkit();
const { wallet } = useWallet();

const [data, setData] = useState<undefined | string>();
const [hasSidebar, setHasSidebar] = useState(false);
Expand Down Expand Up @@ -149,28 +146,6 @@ export default function Layout({
tezos,
state.contracts,
]);
useEffect(() => {
(async () => {
const p2pClient = new P2PClient({
name: "TzSafe",
storage: new LocalStorage("P2P"),
});

await p2pClient.init();
await p2pClient.connect(p2pClient.handleMessages);

// Connect stored peers
Object.entries(state.connectedDapps).forEach(async ([address, dapps]) => {
Object.values(dapps).forEach(data => {
p2pClient
.addPeer(data)
.catch(_ => console.log("Failed to connect to peer", data));
});
});

dispatch!({ type: "p2pConnect", payload: p2pClient });
})();
}, [wallet]);

useEffect(() => {
setHasSidebar(false);
Expand Down
43 changes: 17 additions & 26 deletions components/LoginModal.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { useEffect, useMemo, useState } from "react";
import { Event } from "../context/P2PClient";
import { useAppDispatch, useAppState } from "../context/state";
import { useDapps, useP2PClient } from "../context/dapps";
import { useAppState } from "../context/state";
import { useWallet } from "../context/wallet";
import { decodeData } from "../pages/[walletAddress]/beacon";
import { P2pData } from "../types/app";
import { signers } from "../versioned/apis";
import { p2pData } from "../versioned/interface";
import { hasTzip27Support } from "../versioned/util";
import Select from "./Select";
import Spinner from "./Spinner";
Expand All @@ -20,9 +21,10 @@ enum State {

const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
const state = useAppState();
const dispatch = useAppDispatch();
const p2pClient = useP2PClient();
const { addDapp } = useDapps();

const [parsedData, setParsedData] = useState<undefined | p2pData>();
const [parsedData, setParsedData] = useState<undefined | P2pData>();
const [error, setError] = useState<undefined | string>();

const { userAddress, wallet, connectWallet } = useWallet();
Expand Down Expand Up @@ -52,14 +54,12 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
const [currentState, setCurrentState] = useState(() => State.LOADING);

useEffect(() => {
if (!state.p2pClient) return;

try {
const decoded = decodeData(data);

setParsedData(decoded);

state.p2pClient!.on(Event.PERMISSION_REQUEST, () => {
p2pClient.on(Event.PERMISSION_REQUEST, () => {
if (!userAddress) {
setCurrentState(State.LOGIN);
} else if (
Expand All @@ -73,12 +73,12 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
}
});

state.p2pClient!.addPeer(decoded);
p2pClient.addPeer(decoded);
} catch (e) {
setError((e as Error).message);
setCurrentState(State.ERROR);
}
}, [data, state.p2pClient]);
}, [data, p2pClient]);

useEffect(() => {
if (currentState === State.LOGIN && !!userAddress) {
Expand Down Expand Up @@ -118,7 +118,7 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
<button
className="rounded bg-primary px-4 py-2 font-medium text-white hover:bg-red-500 hover:outline-none focus:bg-red-500"
onClick={() => {
state.p2pClient?.refusePermission();
p2pClient?.refusePermission();
onEnd();
}}
>
Expand Down Expand Up @@ -156,10 +156,9 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
onClick={async e => {
e.preventDefault();

if (!state.p2pClient!.hasReceivedPermissionRequest())
return;
if (!p2pClient.hasReceivedPermissionRequest()) return;

await state.p2pClient!.refusePermission();
await p2pClient.refusePermission();
setCurrentState(State.REFUSED);
}}
>
Expand All @@ -175,23 +174,15 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {

if (
!parsedData ||
!state.p2pClient!.hasReceivedPermissionRequest() ||
!p2pClient.hasReceivedPermissionRequest() ||
!selectedWallet
)
return;

setCurrentState(State.LOADING);
await state.p2pClient!.approvePermission(
selectedWallet.value
);
await p2pClient.approvePermission(selectedWallet.value);
setCurrentState(State.AUTHORIZED);
dispatch({
type: "addDapp",
payload: {
data: parsedData,
address: selectedWallet.value,
},
});
addDapp(selectedWallet.value, parsedData);
}}
>
Authorize
Expand Down Expand Up @@ -248,7 +239,7 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
<button
className="rounded border bg-transparent px-4 py-2 font-medium text-white "
onClick={() => {
state.p2pClient?.refusePermission();
p2pClient?.refusePermission();
onEnd();
}}
>
Expand All @@ -275,7 +266,7 @@ const LoginModal = ({ data, onEnd }: { data: string; onEnd: () => void }) => {
<button
className="rounded bg-primary px-4 py-2 font-medium text-white hover:bg-red-500 hover:outline-none focus:bg-red-500"
onClick={async () => {
await state.p2pClient?.refusePermission();
await p2pClient?.refusePermission();
onEnd();
}}
>
Expand Down
Loading