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

refactor: separates App styled-components into own file

Browse Source
This commit is contained in:
Ben Kremer 2022-02-04 11:56:39 +01:00
parent 940d59fc00
commit 273ef2f9dc
2 changed files with 83 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
dapps/react-dapp-v2/src/HooksApp.tsx
View File

@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import styled from "styled-components";
import Client, { CLIENT_EVENTS } from "@walletconnect/client"; import Client, { CLIENT_EVENTS } from "@walletconnect/client";
import QRCodeModal from "@walletconnect/legacy-modal"; import QRCodeModal from "@walletconnect/legacy-modal";
@ -12,11 +11,9 @@ import { BigNumber } from "ethers";
import Banner from "./components/Banner"; import Banner from "./components/Banner";
import Blockchain from "./components/Blockchain"; import Blockchain from "./components/Blockchain";
import Button from "./components/Button";
import Column from "./components/Column"; import Column from "./components/Column";
import Header from "./components/Header"; import Header from "./components/Header";
import Modal from "./components/Modal"; import Modal from "./components/Modal";
import Wrapper from "./components/Wrapper";
import { import {
DEFAULT_APP_METADATA, DEFAULT_APP_METADATA,
DEFAULT_MAIN_CHAINS, DEFAULT_MAIN_CHAINS,
@ -41,79 +38,20 @@ import {
getInitialStateTestnet, getInitialStateTestnet,
getAllChainNamespaces, getAllChainNamespaces,
} from "./helpers"; } from "./helpers";
import { fonts } from "./styles";
import Toggle from "./components/Toggle"; import Toggle from "./components/Toggle";
import RequestModal from "./modals/RequestModal"; import RequestModal from "./modals/RequestModal";
import PairingModal from "./modals/PairingModal"; import PairingModal from "./modals/PairingModal";
import PingModal from "./modals/PingModal"; import PingModal from "./modals/PingModal";
import {
const SLayout = styled.div` SAccounts,
position: relative; SAccountsContainer,
width: 100%; SButtonContainer,
min-height: 100vh; SConnectButton,
text-align: center; SContent,
`; SLanding,
SLayout,
const SContent = styled(Wrapper as any)` SToggleContainer,
width: 100%; } from "./components/app";
height: 100%;
padding: 0 16px;
`;
const SLanding = styled(Column as any)`
/* height: 600px; */
`;
const SButtonContainer = styled(Column as any)`
width: 250px;
margin: 50px 0;
`;
const SConnectButton = styled(Button as any)`
border-radius: 8px;
font-size: ${fonts.size.medium};
height: 44px;
width: 100%;
margin: 12px 0;
`;
const SAccountsContainer = styled(SLanding as any)`
height: 100%;
padding-bottom: 30px;
& h3 {
padding-top: 30px;
}
`;
const SToggleContainer = styled.div`
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
& > p {
margin-right: 10px;
}
`;
const SFullWidthContainer = styled.div`
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
`;
const SAccounts = styled(SFullWidthContainer)`
justify-content: space-between;
& > div {
margin: 12px 0;
flex: 1 0 100%;
@media (min-width: 648px) {
flex: 0 1 48%;
}
}
`;
export default function App() { export default function App() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);

73
dapps/react-dapp-v2/src/components/app/index.tsx Normal file
View File

@ -0,0 +1,73 @@
import styled from "styled-components";
import { fonts } from "../../styles";
import Button from "../Button";
import Column from "../Column";
import Wrapper from "../Wrapper";
export const SLayout = styled.div`
position: relative;
width: 100%;
min-height: 100vh;
text-align: center;
`;
export const SContent = styled(Wrapper as any)`
width: 100%;
height: 100%;
padding: 0 16px;
`;
export const SLanding = styled(Column as any)`
/* height: 600px; */
`;
export const SButtonContainer = styled(Column as any)`
width: 250px;
margin: 50px 0;
`;
export const SConnectButton = styled(Button as any)`
border-radius: 8px;
font-size: ${fonts.size.medium};
height: 44px;
width: 100%;
margin: 12px 0;
`;
export const SAccountsContainer = styled(SLanding as any)`
height: 100%;
padding-bottom: 30px;
& h3 {
padding-top: 30px;
}
`;
export const SToggleContainer = styled.div`
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
& > p {
margin-right: 10px;
}
`;
export const SFullWidthContainer = styled.div`
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
`;
export const SAccounts = styled(SFullWidthContainer)`
justify-content: space-between;
& > div {
margin: 12px 0;
flex: 1 0 100%;
@media (min-width: 648px) {
flex: 0 1 48%;
}
}
`;