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

Handle svg files using svgr

Browse Source
This commit is contained in:
delivan 2022-12-19 17:30:00 +09:00
parent 4ccffda192
commit f4170a761c
11 changed files with 37 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/chain-list/all-chains-item.tsx
View File

@ -1,4 +1,3 @@
import { ChainItemType } from "../../types";
import {
Dispatch,
FunctionComponent,
@ -6,19 +5,19 @@ import {
useEffect,
useState,
} from "react";
import { ChainItemType } from "../../types";
import { ChainImage } from "./chain-image";
import styled from "styled-components";
import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg";
import color from "../../styles/color";
import { Flex1 } from "../../styles/flex-1";
import { Checkbox } from "../checkbox";
import {
ChainInfoContainer,
ChainItemContainer,
ChainName,
WalletAddress,
} from "./chain-item";
import color from "../../styles/color";
import styled from "styled-components";
import { Checkbox } from "../checkbox";
import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg";
interface Props {
chainList: ChainItemType[];
@ -55,7 +54,7 @@ export const AllChainsItem: FunctionComponent<Props> = (props) => {
checked={checked}
onClick={checkHandler}
>
<ChainImage src={AllChainsIcon} fill={true} alt={`all chain images`} />
<AllChainsIcon />
<ChainInfoContainer>
<ChainName>{`.all chains(${chainList.length})`}</ChainName>
<WalletAddress>

16
components/connect-wallet-modal/wallet-item.tsx
View File

@ -3,7 +3,6 @@ import ArrowRightIcon from "../../public/images/svg/arrow-right.svg";
import color from "../../styles/color";
import { Flex1 } from "../../styles/flex-1";
import styled from "styled-components";
import Image from "next/image";
import {
MINIMUM_VERSION,
SELECTED_WALLET_KEY,
@ -67,14 +66,9 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
return (
<WalleButton disabled={!wallet.isReady} onClick={onClickWalletItem}>
<WalletIcon>
<Image
src={wallet.image}
fill={true}
sizes="3.75rem"
alt="wallet Icon"
/>
</WalletIcon>
<WalletIconContainer>
<wallet.IconComponent width="60" height="60" />
</WalletIconContainer>
<WalletContentContainer>
<WalletName>{wallet.name}</WalletName>
{wallet.isReady ? (
@ -88,7 +82,7 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
<Flex1 />
<Image src={ArrowRightIcon} alt="arrow right icon" />
<ArrowRightIcon />
</WalleButton>
);
};
@ -116,7 +110,7 @@ const WalleButton = styled.button`
}
`;
const WalletIcon = styled.div`
const WalletIconContainer = styled.div`
position: relative;
width: 3.75rem;

14
components/error-modal/index.tsx
View File

@ -50,12 +50,7 @@ export const ErrorModal: FunctionComponent<Props> = (props) => {
<ModalContainer>
<ErrorTitleContainer>
<ErrorImageContainer>
<Image
src={ErrorIcon}
fill={true}
sizes="2.5rem"
alt="error icon"
/>
<ErrorIcon />
</ErrorImageContainer>
Error
</ErrorTitleContainer>
@ -65,12 +60,7 @@ export const ErrorModal: FunctionComponent<Props> = (props) => {
{errorMessage?.path ? (
<ErrorBackButton onClick={onClose}>
<ErrorBackIconContainer>
<Image
src={ArrowLeftIcon}
fill={true}
sizes="1.5rem"
alt="back button icon"
/>
<ArrowLeftIcon />
</ErrorBackIconContainer>
GO BACK TO HOME
</ErrorBackButton>

11
components/final-check-modal/index.tsx
View File

@ -1,14 +1,13 @@
import { Bech32Address } from "@keplr-wallet/cosmos";
import Image from "next/image";
import { useRouter } from "next/router";
import { FunctionComponent } from "react";
import color from "../../styles/color";
import ReactModal from "react-modal";
import styled from "styled-components";
import TwitterIcon from "../../public/images/svg/twitter-modal-icon.svg";
import Image from "next/image";
import { MINIMUM_OSMO_FEE } from "../../constants/wallet";
import color from "../../styles/color";
import { PrimaryButton } from "../primary-button";
import { SecondaryButton } from "../secondary-button";
import { MINIMUM_OSMO_FEE } from "../../constants/wallet";
import { useRouter } from "next/router";
import { Bech32Address } from "@keplr-wallet/cosmos";
interface Props {
twitterUserName: string | undefined;

11
components/logo/index.tsx
View File

@ -1,25 +1,18 @@
// NextJs
import Image from "next/image";
import Link from "next/link";
// Image Assets
import LogoIcon from "../../public/images/svg/logo.svg";
// Styles
import styled from "styled-components";
import { FunctionComponent } from "react";
import styled from "styled-components";
export const Logo: FunctionComponent = () => {
return (
<Link href="/">
<LogoContainer>
<Image
src={LogoIcon}
fill={true}
sizes="10rem"
alt="Home Logo"
priority
/>
<LogoIcon />
</LogoContainer>
</Link>
);

4
components/search-input/index.tsx
View File

@ -1,7 +1,5 @@
import { Dispatch, FunctionComponent, SetStateAction } from "react";
import Image from "next/image";
import styled from "styled-components";
import color from "../../styles/color";
@ -18,7 +16,7 @@ export const SearchInput: FunctionComponent<Props> = (props) => {
return (
<SearchContainer>
<SearchIconContainer>
<Image src={SearchIcon} fill={true} sizes="1.3rem" alt="search icon" />
<SearchIcon />
</SearchIconContainer>
<SearchText

11
constants/wallet.ts → constants/wallet.tsx
View File

@ -1,7 +1,6 @@
import { StaticImageData } from "next/image";
import KeplrIcon from "../public/images/svg/keplr-icon.svg";
import { SVGProps } from "react";
import CosmostationIcon from "../public/images/svg/cosmostation-icon.svg";
import KeplrIcon from "../public/images/svg/keplr-icon.svg";
export const WALLET_INSTALL_URL =
"https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap";
@ -13,20 +12,20 @@ export const MINIMUM_OSMO_FEE = process.env.MINIMUM_OSMO_FEE ?? "0.5 OSMO";
export type WalletName = "Keplr" | "Cosmostation";
export interface WalletType {
name: WalletName;
image: StaticImageData;
isReady: boolean;
IconComponent: (props: SVGProps<SVGSVGElement>) => JSX.Element;
}
export const WalletList: WalletType[] = [
{
name: "Keplr",
image: KeplrIcon,
isReady: true,
IconComponent: KeplrIcon,
},
{
name: "Cosmostation",
image: CosmostationIcon,
isReady: false,
IconComponent: CosmostationIcon,
},
];

4
pages/complete/index.tsx
View File

@ -115,7 +115,7 @@ export default function CompletePage() {
<DescriptionContainer>
<AlertIcon>
<Image src={AlertCircleOutlineIcon} fill={true} alt="alert icon" />
<AlertCircleOutlineIcon />
</AlertIcon>
<DescriptionText>
If you want to make that name address with same twitter account,
@ -125,7 +125,7 @@ export default function CompletePage() {
{/*<ShareButtonContainer onClick={onClickShareButton}>*/}
{/* <ShareButtonText>SHARE MY NAME</ShareButtonText>*/}
{/* <Image src={TwitterIcon} alt="twitter icon" />*/}
{/* <TwitterIcon /> */}
{/*</ShareButtonContainer>*/}
</MainContainer>
</Container>

49
pages/index.tsx
View File

@ -1,8 +1,5 @@
import * as amplitude from "@amplitude/analytics-browser";
// NextJs
import Image from "next/image";
// Styles
import styled from "styled-components";
import color from "../styles/color";
@ -52,28 +49,10 @@ export default function Home() {
<MainContainer>
<MainTitleContainer>
<MainTitleImageBackground>
<Image
src={StarIcon}
width={50}
height={50}
alt="Star Icon"
className="starIcon first"
/>
<Image
src={StarIcon}
width={50}
height={50}
alt="Star Icon"
className="starIcon last"
/>
<StarIcon className="starIcon first" />
<StarIcon className="starIcon last" />
<MainTitleImageContainer>
<Image
src={MainTitle}
fill={true}
sizes="60rem"
alt="Main Title"
priority
/>
<MainTitle />
</MainTitleImageContainer>
</MainTitleImageBackground>
@ -97,32 +76,18 @@ export default function Home() {
</CTAContainer>
<SubContainer>
<CheckContainer>
<CheckIconContainer>
<Image
src={CheckIcon}
fill={true}
sizes="1.6rem"
alt="Check Icon"
/>
</CheckIconContainer>
<CheckIcon />
Osmo is required for this transaction
</CheckContainer>
<CheckContainer>
<CheckIconContainer>
<Image
src={CheckIcon}
fill={true}
sizes="1.6rem"
alt="Check Icon"
/>
</CheckIconContainer>
<CheckIcon />
More wallet support coming soon
</CheckContainer>
</SubContainer>
</MainTitleContainer>
<MainLogoContainer>
<Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
<MainLogo />
</MainLogoContainer>
</MainContainer>
@ -158,7 +123,7 @@ const MainContainer = styled.div`
margin-top: 15rem;
margin-left: 10rem;
img.starIcon {
.starIcon {
position: absolute;
&.first {

2
public/images/svg/cosmostation-icon.svg
View File

@ -1,4 +1,4 @@
<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="current" height="current" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.25" width="80" height="80" rx="20" fill="#1B1B21"/>
<g clip-path="url(#clip0_249_4007)">
<path d="M30.5465 56.0417L19.3466 37.1577C18.779 36.2007 18.779 35.0167 19.3466 34.0597L30.5465 15.1855C31.1141 14.2285 32.1682 13.6365 33.3034 13.6365H55.7032C56.8384 13.6365 57.8925 14.2285 58.4601 15.1855L69.6598 34.0696L64.1562 37.1676L53.8583 19.8325H35.1278L25.7624 35.6186L36.04 52.9538L30.5363 56.0516L30.5465 56.0417Z" fill="#9C6CFF"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

2
public/images/svg/keplr-icon.svg
View File

@ -1,4 +1,4 @@
<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="current" height="current" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M46.3636 0.5H13.6364C6.10521 0.5 0 6.60521 0 14.1364V46.8636C0 54.3948 6.10521 60.5 13.6364 60.5H46.3636C53.8948 60.5 60 54.3948 60 46.8636V14.1364C60 6.60521 53.8948 0.5 46.3636 0.5Z" fill="url(#pattern0)"/>
<path d="M24.3786 46.1818V32.2906L37.6296 46.1818H45.0001V45.8213L29.7604 30.0064L43.8246 14.9984V14.8181H36.4066L24.3786 28.0798V14.8181H18.4092V46.1818H24.3786Z" fill="white"/>
<defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 148 KiB