deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: clean up client init

Browse Source
This commit is contained in:
Ben Kremer 2022-02-08 11:26:21 +01:00
parent 067aca31b8
commit 95751d6efb
1 changed files with 73 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
dapps/react-dapp-v2/src/contexts/ClientContext.tsx
View File

@ -60,53 +60,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
const [accounts, setAccounts] = useState<string[]>([]);
const [chains, setChains] = useState<string[]>([]);
const subscribeToEvents = async (_client: Client) => {
if (typeof _client === "undefined") {
throw new Error("WalletConnect is not initialized");
}
let _session = {} as SessionTypes.Settled;
if (_client.session.topics.length) {
_session = await _client.session.get(_client.session.topics[0]);
}
_client.on(CLIENT_EVENTS.pairing.proposal, async (proposal: PairingTypes.Proposal) => {
const { uri } = proposal.signal.params;
console.log("EVENT", "QR Code Modal open");
QRCodeModal.open(uri, () => {
console.log("EVENT", "QR Code Modal closed");
});
});
_client.on(CLIENT_EVENTS.pairing.created, async (proposal: PairingTypes.Settled) => {
if (typeof client === "undefined") return;
setPairings(client.pairing.topics);
});
_client.on(CLIENT_EVENTS.session.deleted, (deletedSession: SessionTypes.Settled) => {
if (deletedSession.topic !== _session?.topic) return;
console.log("EVENT", "session_deleted");
// TODO:
// this.resetApp();
window.location.reload();
});
};
const checkPersistedState = async (_client: Client) => {
if (typeof _client === "undefined") {
throw new Error("WalletConnect is not initialized");
}
// populates existing pairings to state
setPairings(_client.pairing.topics);
if (typeof session !== "undefined") return;
// populates existing session to state (assume only the top one)
if (_client.session.topics.length) {
const _session = await _client.session.get(_client.session.topics[0]);
onSessionConnected(_session);
}
};
const onSessionConnected = useCallback(async (incomingSession: SessionTypes.Settled) => {
setSession(incomingSession);
setChains(incomingSession.permissions.blockchain.chains);
@ -203,8 +156,60 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
}
};
useEffect(() => {
const init = async () => {
const subscribeToEvents = useCallback(
async (_client: Client) => {
if (typeof _client === "undefined") {
throw new Error("WalletConnect is not initialized");
}
let _session = {} as SessionTypes.Settled;
if (_client.session.topics.length) {
_session = await _client.session.get(_client.session.topics[0]);
}
_client.on(CLIENT_EVENTS.pairing.proposal, async (proposal: PairingTypes.Proposal) => {
const { uri } = proposal.signal.params;
console.log("EVENT", "QR Code Modal open");
QRCodeModal.open(uri, () => {
console.log("EVENT", "QR Code Modal closed");
});
});
_client.on(CLIENT_EVENTS.pairing.created, async (proposal: PairingTypes.Settled) => {
if (typeof client === "undefined") return;
setPairings(client.pairing.topics);
});
_client.on(CLIENT_EVENTS.session.deleted, (deletedSession: SessionTypes.Settled) => {
if (deletedSession.topic !== _session?.topic) return;
console.log("EVENT", "session_deleted");
// TODO:
// this.resetApp();
window.location.reload();
});
},
[client],
);
const checkPersistedState = useCallback(
async (_client: Client) => {
if (typeof _client === "undefined") {
throw new Error("WalletConnect is not initialized");
}
// populates existing pairings to state
setPairings(_client.pairing.topics);
if (typeof session !== "undefined") return;
// populates existing session to state (assume only the top one)
if (_client.session.topics.length) {
const _session = await _client.session.get(_client.session.topics[0]);
onSessionConnected(_session);
}
},
[session, onSessionConnected],
);
const createClient = useCallback(async () => {
try {
const _client = await Client.init({
logger: DEFAULT_LOGGER,
@ -219,10 +224,13 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
} finally {
setLoading(false);
}
};
}, [checkPersistedState, subscribeToEvents]);
init();
}, []);
useEffect(() => {
if (!client) {
createClient();
}
}, [client, createClient]);
const value = useMemo(
() => ({