chore: remove old class-based App component
This commit is contained in:
Ben Kremer
parent
22c0a7c456
commit
601f16b171
File diff suppressed because it is too large
Load Diff
@ -1,218 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { version } from "@walletconnect/client/package.json";
|
|
||||||
|
|
||||||
import Banner from "./components/Banner";
|
|
||||||
import Blockchain from "./components/Blockchain";
|
|
||||||
import Column from "./components/Column";
|
|
||||||
import Header from "./components/Header";
|
|
||||||
import Modal from "./components/Modal";
|
|
||||||
import { DEFAULT_MAIN_CHAINS, DEFAULT_TEST_CHAINS } from "./constants";
|
|
||||||
import { AccountAction, setInitialStateTestnet, getInitialStateTestnet } from "./helpers";
|
|
||||||
import Toggle from "./components/Toggle";
|
|
||||||
import RequestModal from "./modals/RequestModal";
|
|
||||||
import PairingModal from "./modals/PairingModal";
|
|
||||||
import PingModal from "./modals/PingModal";
|
|
||||||
import {
|
|
||||||
SAccounts,
|
|
||||||
SAccountsContainer,
|
|
||||||
SButtonContainer,
|
|
||||||
SConnectButton,
|
|
||||||
SContent,
|
|
||||||
SLanding,
|
|
||||||
SLayout,
|
|
||||||
SToggleContainer,
|
|
||||||
} from "./components/app";
|
|
||||||
import { useWalletConnectClient } from "./contexts/ClientContext";
|
|
||||||
import { useJsonRpc } from "./contexts/JsonRpcContext";
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const [isTestnet, setIsTestnet] = useState(getInitialStateTestnet());
|
|
||||||
|
|
||||||
const [modal, setModal] = useState("");
|
|
||||||
|
|
||||||
const closeModal = () => setModal("");
|
|
||||||
const openPairingModal = () => setModal("pairing");
|
|
||||||
const openPingModal = () => setModal("ping");
|
|
||||||
const openRequestModal = () => setModal("request");
|
|
||||||
|
|
||||||
const {
|
|
||||||
client,
|
|
||||||
session,
|
|
||||||
connect,
|
|
||||||
disconnect,
|
|
||||||
chains,
|
|
||||||
accounts,
|
|
||||||
balances,
|
|
||||||
fetching,
|
|
||||||
loading,
|
|
||||||
setChains,
|
|
||||||
} = useWalletConnectClient();
|
|
||||||
|
|
||||||
const { chainData, ping, ethereumRpc, cosmosRpc, isRpcRequestPending, rpcResult } = useJsonRpc();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Close the pairing modal after a session is established.
|
|
||||||
if (session && modal === "pairing") {
|
|
||||||
closeModal();
|
|
||||||
}
|
|
||||||
}, [session, modal]);
|
|
||||||
|
|
||||||
const onConnect = () => {
|
|
||||||
if (typeof client === "undefined") {
|
|
||||||
throw new Error("WalletConnect is not initialized");
|
|
||||||
}
|
|
||||||
if (client.pairing.topics.length) {
|
|
||||||
return openPairingModal();
|
|
||||||
}
|
|
||||||
connect();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onPing = async () => {
|
|
||||||
openPingModal();
|
|
||||||
await ping();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getEthereumActions = (): AccountAction[] => {
|
|
||||||
const onSendTransaction = async (chainId: string) => {
|
|
||||||
openRequestModal();
|
|
||||||
await ethereumRpc.testSendTransaction(chainId);
|
|
||||||
};
|
|
||||||
const onSignPersonalMessage = async (chainId: string) => {
|
|
||||||
openRequestModal();
|
|
||||||
await ethereumRpc.testSignPersonalMessage(chainId);
|
|
||||||
};
|
|
||||||
const onSignTypedData = async (chainId: string) => {
|
|
||||||
openRequestModal();
|
|
||||||
await ethereumRpc.testSignTypedData(chainId);
|
|
||||||
};
|
|
||||||
|
|
||||||
return [
|
|
||||||
{ method: "eth_sendTransaction", callback: onSendTransaction },
|
|
||||||
{ method: "personal_sign", callback: onSignPersonalMessage },
|
|
||||||
{ method: "eth_signTypedData", callback: onSignTypedData },
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getCosmosActions = (): AccountAction[] => {
|
|
||||||
const onSignDirect = async (chainId: string) => {
|
|
||||||
openRequestModal();
|
|
||||||
await cosmosRpc.testSignDirect(chainId);
|
|
||||||
};
|
|
||||||
const onSignAmino = async (chainId: string) => {
|
|
||||||
openRequestModal();
|
|
||||||
await cosmosRpc.testSignAmino(chainId);
|
|
||||||
};
|
|
||||||
return [
|
|
||||||
{ method: "cosmos_signDirect", callback: onSignDirect },
|
|
||||||
{ method: "cosmos_signAmino", callback: onSignAmino },
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getBlockchainActions = (chainId: string) => {
|
|
||||||
const [namespace] = chainId.split(":");
|
|
||||||
switch (namespace) {
|
|
||||||
case "eip155":
|
|
||||||
return getEthereumActions();
|
|
||||||
case "cosmos":
|
|
||||||
return getCosmosActions();
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleTestnets = () => {
|
|
||||||
const nextIsTestnetState = !isTestnet;
|
|
||||||
setIsTestnet(nextIsTestnetState);
|
|
||||||
// TODO: rename "setLocalStorage..."
|
|
||||||
setInitialStateTestnet(nextIsTestnetState);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChainSelectionClick = (chainId: string) => {
|
|
||||||
if (chains.includes(chainId)) {
|
|
||||||
setChains(chains.filter(chain => chain !== chainId));
|
|
||||||
} else {
|
|
||||||
setChains([...chains, chainId]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderModal = () => {
|
|
||||||
switch (modal) {
|
|
||||||
case "pairing":
|
|
||||||
if (typeof client === "undefined") {
|
|
||||||
throw new Error("WalletConnect is not initialized");
|
|
||||||
}
|
|
||||||
return <PairingModal pairings={client.pairing.values} connect={connect} />;
|
|
||||||
case "request":
|
|
||||||
return <RequestModal pending={isRpcRequestPending} result={rpcResult} />;
|
|
||||||
case "ping":
|
|
||||||
return <PingModal pending={isRpcRequestPending} result={rpcResult} />;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderContent = () => {
|
|
||||||
const chainOptions = isTestnet ? DEFAULT_TEST_CHAINS : DEFAULT_MAIN_CHAINS;
|
|
||||||
return !accounts.length && !Object.keys(balances).length ? (
|
|
||||||
<SLanding center>
|
|
||||||
<Banner />
|
|
||||||
<h6>
|
|
||||||
<span>{`Using v${version || "2.0.0-beta"}`}</span>
|
|
||||||
</h6>
|
|
||||||
<SButtonContainer>
|
|
||||||
<h6>Select chains:</h6>
|
|
||||||
<SToggleContainer>
|
|
||||||
<p>Testnets Only?</p>
|
|
||||||
<Toggle active={isTestnet} onClick={toggleTestnets} />
|
|
||||||
</SToggleContainer>
|
|
||||||
{chainOptions.map(chainId => (
|
|
||||||
<Blockchain
|
|
||||||
key={chainId}
|
|
||||||
chainId={chainId}
|
|
||||||
chainData={chainData}
|
|
||||||
onClick={handleChainSelectionClick}
|
|
||||||
active={chains.includes(chainId)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<SConnectButton left onClick={onConnect} fetching={fetching} disabled={!chains.length}>
|
|
||||||
{"Connect"}
|
|
||||||
</SConnectButton>
|
|
||||||
</SButtonContainer>
|
|
||||||
</SLanding>
|
|
||||||
) : (
|
|
||||||
<SAccountsContainer>
|
|
||||||
<h3>Accounts</h3>
|
|
||||||
<SAccounts>
|
|
||||||
{accounts.map(account => {
|
|
||||||
const [namespace, reference, address] = account.split(":");
|
|
||||||
const chainId = `${namespace}:${reference}`;
|
|
||||||
return (
|
|
||||||
<Blockchain
|
|
||||||
key={account}
|
|
||||||
active={true}
|
|
||||||
chainData={chainData}
|
|
||||||
fetching={fetching}
|
|
||||||
address={address}
|
|
||||||
chainId={chainId}
|
|
||||||
balances={balances}
|
|
||||||
actions={getBlockchainActions(chainId)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</SAccounts>
|
|
||||||
</SAccountsContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SLayout>
|
|
||||||
<Column maxWidth={1000} spanHeight>
|
|
||||||
<Header ping={onPing} disconnect={disconnect} session={session} />
|
|
||||||
<SContent>{loading ? "Loading..." : renderContent()}</SContent>
|
|
||||||
</Column>
|
|
||||||
<Modal show={!!modal} closeModal={closeModal}>
|
|
||||||
{renderModal()}
|
|
||||||
</Modal>
|
|
||||||
</SLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -4,7 +4,7 @@ import { createGlobalStyle } from "styled-components";
|
|||||||
import { ClientContextProvider } from "./contexts/ClientContext";
|
import { ClientContextProvider } from "./contexts/ClientContext";
|
||||||
import { JsonRpcContextProvider } from "./contexts/JsonRpcContext";
|
import { JsonRpcContextProvider } from "./contexts/JsonRpcContext";
|
||||||
|
|
||||||
import HooksApp from "./HooksApp";
|
import App from "./App";
|
||||||
import { globalStyle } from "./styles";
|
import { globalStyle } from "./styles";
|
||||||
const GlobalStyle = createGlobalStyle`
|
const GlobalStyle = createGlobalStyle`
|
||||||
${globalStyle}
|
${globalStyle}
|
||||||
@ -22,7 +22,7 @@ ReactDOM.render(
|
|||||||
<GlobalStyle />
|
<GlobalStyle />
|
||||||
<ClientContextProvider>
|
<ClientContextProvider>
|
||||||
<JsonRpcContextProvider>
|
<JsonRpcContextProvider>
|
||||||
<HooksApp />
|
<App />
|
||||||
</JsonRpcContextProvider>
|
</JsonRpcContextProvider>
|
||||||
</ClientContextProvider>
|
</ClientContextProvider>
|
||||||
</>,
|
</>,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user