cerc-io/icns-frontend
10
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

Merge branch 'main' of https://github.com/interchain-name/icns-frontend into main

Browse Source
This commit is contained in:
delivan 2022-12-17 00:53:45 +09:00
commit 2efe20f0a0
7 changed files with 115 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
components/skeleton/skeleton-chain-list.tsx
View File

@ -27,8 +27,8 @@ import {
} from "../chain-list"; } from "../chain-list";
export const SkeletonChainList: FunctionComponent = () => ( export const SkeletonChainList: FunctionComponent = () => (
<SkeletonContainer> <ContentContainer>
<ContentContainer> <SkeletonContainer>
<ProfileContainer color={color.grey["700"]}> <ProfileContainer color={color.grey["700"]}>
<SkeletonCircle width="5.5rem" height="5.5rem" /> <SkeletonCircle width="5.5rem" height="5.5rem" />
@ -48,84 +48,85 @@ export const SkeletonChainList: FunctionComponent = () => (
<SkeletonText width="20rem" height="1rem" /> <SkeletonText width="20rem" height="1rem" />
</ProfileContentContainer> </ProfileContentContainer>
</ProfileContainer> </ProfileContainer>
</SkeletonContainer>
<ChainListTitleContainer> <ChainListTitleContainer>
<SkeletonTitle /> <SkeletonTitle />
</ChainListTitleContainer> </ChainListTitleContainer>
<ChainContainer color={color.grey["700"]}> <ChainContainer color={color.grey["700"]}>
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
<ChainItemContainer isLoading={true}> <ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem"> <ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer> </ChainInfoContainer>
</ChainItemContainer> </ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
</ChainContainer> </ChainContainer>
<SkeletonButtonContainer> <SkeletonButtonContainer>
<ButtonContainer> <ButtonContainer>
<SkeletonButton /> <SkeletonButton />
</ButtonContainer> </ButtonContainer>
</SkeletonButtonContainer> </SkeletonButtonContainer>
</ContentContainer> </ContentContainer>
</SkeletonContainer>
); );
const SkeletonContainer = styled.div` const SkeletonContainer = styled.div`
padding: 2.4rem 0; width: 100%;
padding-top: 2.4rem;
`; `;
const SkeletonTitle = styled.div` const SkeletonTitle = styled.div`

10
constants/icns.ts
View File

@ -2,13 +2,17 @@ export const MainChainId = "osmo-test-4";
export const REFERRAL_KEY = "icns-referral"; export const REFERRAL_KEY = "icns-referral";
export const RPC_URL = "https://rpc.testnet.osmosis.zone"; export const RPC_URL =
export const REST_URL = "https://lcd.testnet.osmosis.zone"; process.env.OSMOSIS_RPC_URL ?? "https://rpc.testnet.osmosis.zone";
export const REST_URL =
process.env.OSMOSIS_REST_URL ?? "https://lcd.testnet.osmosis.zone";
// TODO: .evn에 없으면 디폴트값 설정
export const NAME_NFT_ADDRESS = export const NAME_NFT_ADDRESS =
process.env.ICNS_NAME_NFT_CONTRACT_ADDRESS ??
"osmo1xahnjn872smah6xle8n3z5a5teqq390qr959l805mkuw0kcy8g5smtdagg"; "osmo1xahnjn872smah6xle8n3z5a5teqq390qr959l805mkuw0kcy8g5smtdagg";
export const REGISTRAR_ADDRESS = export const REGISTRAR_ADDRESS =
process.env.ICNS_REGISTRAR_CONTRACT_ADDRESS ??
"osmo1npn97g7hsgqlp70rw8nhd7c7vyvkukv9x0n25sn4fk5mgcjlz4gq9zlgf3"; "osmo1npn97g7hsgqlp70rw8nhd7c7vyvkukv9x0n25sn4fk5mgcjlz4gq9zlgf3";
export const RESOLVER_ADDRESS = export const RESOLVER_ADDRESS =
process.env.ICNS_RESOLVER_CONTRACT_ADDRESS ??
"osmo1002awr7frr9wk44lc3vfzt0d2w6vz5z03ql6fszjsjy8vdcvk0sskruz3c"; "osmo1002awr7frr9wk44lc3vfzt0d2w6vz5z03ql6fszjsjy8vdcvk0sskruz3c";

5
pages/_app.tsx
View File

@ -3,7 +3,6 @@ import { useRouter } from "next/router";
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { DefaultTheme, ThemeProvider } from "styled-components"; import { DefaultTheme, ThemeProvider } from "styled-components";
import ErrorBoundary from "../components/error-boundary"; import ErrorBoundary from "../components/error-boundary";
import { PageBackground } from "../styles/background";
import { GlobalStyle } from "../styles/global"; import { GlobalStyle } from "../styles/global";
@ -29,9 +28,7 @@ export default function App({ Component, pageProps }: AppProps) {
<React.Fragment> <React.Fragment>
<GlobalStyle /> <GlobalStyle />
<ErrorBoundary> <ErrorBoundary>
<PageBackground> <Component {...pageProps} />
<Component {...pageProps} />
</PageBackground>
</ErrorBoundary> </ErrorBoundary>
</React.Fragment> </React.Fragment>
</ThemeProvider> </ThemeProvider>

37
pages/_document.tsx
View File

@ -5,24 +5,39 @@ import Document, {
Main, Main,
NextScript, NextScript,
} from "next/document"; } from "next/document";
import { ServerStyleSheet } from "styled-components";
class MyDocument extends Document { class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) { static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage; const originalRenderPage = ctx.renderPage;
// Run the React rendering logic synchronously try {
ctx.renderPage = () => // Run the React rendering logic synchronously
originalRenderPage({ ctx.renderPage = () =>
// Useful for wrapping the whole react tree originalRenderPage({
enhanceApp: (App) => App, // Useful for wrapping the whole react tree
// Useful for wrapping in a per-page basis enhanceApp: (App) => (props) =>
enhanceComponent: (Component) => Component, sheet.collectStyles(<App {...props} />),
}); // Useful for wrapping in a per-page basis
enhanceComponent: (Component) => Component,
});
// Run the parent `getInitialProps`, it now includes the custom `renderPage` // Run the parent `getInitialProps`, it now includes the custom `renderPage`
const initialProps = await Document.getInitialProps(ctx); const initialProps = await Document.getInitialProps(ctx);
return initialProps; return {
...initialProps,
styles: (
<div>
{initialProps.styles}
{sheet.getStyleElement()}
</div>
),
};
} finally {
sheet.seal();
}
} }
render() { render() {

2
pages/api/icns-verification.ts
View File

@ -1,7 +1,7 @@
import { withIronSessionApiRoute } from "iron-session/next"; import { withIronSessionApiRoute } from "iron-session/next";
import type { NextApiRequest, NextApiResponse } from "next"; import type { NextApiRequest, NextApiResponse } from "next";
import { ironOptions } from "../../iron.config"; import { ironOptions } from "../../iron.config";
import { IcnsVerificationResponse } from "../../types/api-response"; import { IcnsVerificationResponse } from "../../types";
import { request } from "../../utils/url"; import { request } from "../../utils/url";
export default withIronSessionApiRoute(async function handler( export default withIronSessionApiRoute(async function handler(

10
pages/verification/index.tsx
View File

@ -136,6 +136,16 @@ export default function VerificationPage() {
init(); init();
}, []); }, []);
useEffect(() => {
setAllChains({
chainId: "all chains",
chainName: "all chains",
prefix: `all chains(${chainList.length})`,
address: chainList.map((chain) => chain.chainName).join(", "),
chainImageUrl: AllChainsIcon,
});
}, [chainList]);
useEffect(() => { useEffect(() => {
const disabledChainList = chainList.filter((chain) => { const disabledChainList = chainList.filter((chain) => {
for (const registeredChain of registeredChainList) { for (const registeredChain of registeredChainList) {

10
styles/global.ts
View File

@ -14,15 +14,13 @@ export const GlobalStyle = createGlobalStyle`
background-size: 5rem 5rem; background-size: 5rem 5rem;
background-position: top left; background-position: top left;
background-repeat: repeat; background-repeat: repeat;
background-image: linear-gradient( background-image: linear-gradient(${({ theme }) =>
${({ theme }) => theme.bgGridColor ?? color.grey[600]} 0.1rem, theme.bgGridColor ?? color.grey[600]} 0.1rem,
transparent 0.1rem transparent 0.1rem),
),
linear-gradient(90deg, ${({ theme }) => linear-gradient(90deg, ${({ theme }) =>
theme.bgGridColor ?? color.grey[600]} 0.1rem, transparent 0.1rem); theme.bgGridColor ?? color.grey[600]} 0.1rem, transparent 0.1rem);
} }
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }