From f4170a761cdf70c578931a3bf6e270cbaeb079c8 Mon Sep 17 00:00:00 2001 From: delivan Date: Mon, 19 Dec 2022 17:30:00 +0900 Subject: [PATCH] Handle svg files using svgr --- components/chain-list/all-chains-item.tsx | 13 +++-- .../connect-wallet-modal/wallet-item.tsx | 16 ++---- components/error-modal/index.tsx | 14 +----- components/final-check-modal/index.tsx | 11 ++--- components/logo/index.tsx | 11 +---- components/search-input/index.tsx | 4 +- constants/{wallet.ts => wallet.tsx} | 11 ++--- pages/complete/index.tsx | 4 +- pages/index.tsx | 49 +++---------------- public/images/svg/cosmostation-icon.svg | 2 +- public/images/svg/keplr-icon.svg | 2 +- 11 files changed, 37 insertions(+), 100 deletions(-) rename constants/{wallet.ts => wallet.tsx} (82%) diff --git a/components/chain-list/all-chains-item.tsx b/components/chain-list/all-chains-item.tsx index 890b882..f12d16f 100644 --- a/components/chain-list/all-chains-item.tsx +++ b/components/chain-list/all-chains-item.tsx @@ -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) => { checked={checked} onClick={checkHandler} > - + {`.all chains(${chainList.length})`} diff --git a/components/connect-wallet-modal/wallet-item.tsx b/components/connect-wallet-modal/wallet-item.tsx index 2aa699d..427ae0f 100644 --- a/components/connect-wallet-modal/wallet-item.tsx +++ b/components/connect-wallet-modal/wallet-item.tsx @@ -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) => { return ( - - wallet Icon - + + + {wallet.name} {wallet.isReady ? ( @@ -88,7 +82,7 @@ export const WalletItem: FunctionComponent = (props: Props) => { - arrow right icon + ); }; @@ -116,7 +110,7 @@ const WalleButton = styled.button` } `; -const WalletIcon = styled.div` +const WalletIconContainer = styled.div` position: relative; width: 3.75rem; diff --git a/components/error-modal/index.tsx b/components/error-modal/index.tsx index de154a8..e05929e 100644 --- a/components/error-modal/index.tsx +++ b/components/error-modal/index.tsx @@ -50,12 +50,7 @@ export const ErrorModal: FunctionComponent = (props) => { - error icon + Error @@ -65,12 +60,7 @@ export const ErrorModal: FunctionComponent = (props) => { {errorMessage?.path ? ( - back button icon + GO BACK TO HOME diff --git a/components/final-check-modal/index.tsx b/components/final-check-modal/index.tsx index 6960003..a269bff 100644 --- a/components/final-check-modal/index.tsx +++ b/components/final-check-modal/index.tsx @@ -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; diff --git a/components/logo/index.tsx b/components/logo/index.tsx index 9d22f2a..2eaf55f 100644 --- a/components/logo/index.tsx +++ b/components/logo/index.tsx @@ -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 ( - Home Logo + ); diff --git a/components/search-input/index.tsx b/components/search-input/index.tsx index 83e104a..d585012 100644 --- a/components/search-input/index.tsx +++ b/components/search-input/index.tsx @@ -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) => { return ( - search icon + ) => JSX.Element; } export const WalletList: WalletType[] = [ { name: "Keplr", - image: KeplrIcon, isReady: true, + IconComponent: KeplrIcon, }, { name: "Cosmostation", - image: CosmostationIcon, isReady: false, + IconComponent: CosmostationIcon, }, ]; diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx index a3e8b44..7b89148 100644 --- a/pages/complete/index.tsx +++ b/pages/complete/index.tsx @@ -115,7 +115,7 @@ export default function CompletePage() { - alert icon + If you want to make that name address with same twitter account, @@ -125,7 +125,7 @@ export default function CompletePage() { {/**/} {/* SHARE MY NAME*/} - {/* twitter icon*/} + {/* */} {/**/} diff --git a/pages/index.tsx b/pages/index.tsx index 148ca93..4411a3c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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() { - Star Icon - Star Icon + + - Main Title + @@ -97,32 +76,18 @@ export default function Home() { - - Check Icon - + Osmo is required for this transaction - - Check Icon - + More wallet support coming soon - Main Logo + @@ -158,7 +123,7 @@ const MainContainer = styled.div` margin-top: 15rem; margin-left: 10rem; - img.starIcon { + .starIcon { position: absolute; &.first { diff --git a/public/images/svg/cosmostation-icon.svg b/public/images/svg/cosmostation-icon.svg index f838e9e..a340c64 100644 --- a/public/images/svg/cosmostation-icon.svg +++ b/public/images/svg/cosmostation-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/public/images/svg/keplr-icon.svg b/public/images/svg/keplr-icon.svg index 4b39c2a..145f09e 100644 --- a/public/images/svg/keplr-icon.svg +++ b/public/images/svg/keplr-icon.svg @@ -1,4 +1,4 @@ - +