-
-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
569 additions
and
379 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,15 @@ | ||
| import './index.css' | ||
| // imd | ||
| import { Navbar, Welcome, Footer, Services, Transactions } from './components' | ||
|
|
||
| const App = () => { | ||
| return ( | ||
| <div className="min-h-screen"> | ||
| <div className="gradient-bg-welcome"> | ||
| <Navbar /> | ||
| <Welcome /> | ||
| </div> | ||
| <Services /> | ||
| <Transactions /> | ||
| <Footer /> | ||
| const App = () => ( | ||
| <div className="min-h-screen"> | ||
| <div className="gradient-bg-welcome"> | ||
| <Navbar /> | ||
| <Welcome /> | ||
| </div> | ||
| ) | ||
| } | ||
| <Services /> | ||
| <Transactions /> | ||
| <Footer /> | ||
| </div> | ||
| ) | ||
|
|
||
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,33 @@ | ||
| import React from 'react'; | ||
| import React from "react"; | ||
|
|
||
| const Footer = () => { | ||
| return <div>Footer</div>; | ||
| }; | ||
| import logo from "../../images/logo.png"; | ||
|
|
||
| const Footer = () => ( | ||
| <div className="w-full flex md:justify-center justify-between items-center flex-col p-4 gradient-bg-footer"> | ||
| <div className="w-full flex sm:flex-row flex-col justify-between items-center my-4"> | ||
| <div className="flex flex-[0.5] justify-center items-center"> | ||
| <img src={logo} alt="logo" className="w-32" /> | ||
| </div> | ||
| <div className="flex flex-1 justify-evenly items-center flex-wrap sm:mt-0 mt-5 w-full"> | ||
| <p className="text-white text-base text-center mx-2 cursor-pointer">Market</p> | ||
| <p className="text-white text-base text-center mx-2 cursor-pointer">Exchange</p> | ||
| <p className="text-white text-base text-center mx-2 cursor-pointer">Tutorials</p> | ||
| <p className="text-white text-base text-center mx-2 cursor-pointer">Wallets</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center items-center flex-col mt-5"> | ||
| <p className="text-white text-sm text-center">Come join us and hear for the unexpected miracle</p> | ||
| <p className="text-white text-sm text-center font-medium mt-2">[email protected]</p> | ||
| </div> | ||
|
|
||
| <div className="sm:w-[90%] w-full h-[0.25px] bg-gray-400 mt-5 " /> | ||
|
|
||
| <div className="sm:w-[90%] w-full flex justify-between items-center mt-3"> | ||
| <p className="text-white text-left text-xs">@kryptomastery2022</p> | ||
| <p className="text-white text-right text-xs">All rights reserved</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default Footer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,7 @@ | ||
| import React from 'react'; | ||
|
|
||
| // notice that here we have () with no return statement as we typically do for a component | ||
| const Loader = () => ( | ||
| <div className='flex justify-center items-center py-3'> | ||
| <div className='animate-spin rounded-full h-32 w-32 border-b-2 border-red-700' /> | ||
| </div> | ||
| <div className="flex justify-center items-center py-3"> | ||
| <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-red-700" /> | ||
| </div> | ||
| ); | ||
|
|
||
| export default Loader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,57 @@ | ||
| import React from 'react'; | ||
| import React from 'react' | ||
| import { BsShieldFillCheck } from 'react-icons/bs' | ||
| import { BiSearchAlt } from 'react-icons/bi' | ||
| import { RiHeart2Fill } from 'react-icons/ri' | ||
|
|
||
| const Services = () => { | ||
| return <div>Services</div>; | ||
| }; | ||
| const ServiceCard = ({ color, title, icon, subtitle }) => ( | ||
| <div className="flex flex-row justify-start items-start white-glassmorphism p-3 m-2 cursor-pointer hover:shadow-xl"> | ||
| <div className={`w-10 h-10 rounded-full flex justify-center items-center ${color}`}> | ||
| {icon} | ||
| </div> | ||
| <div className="ml-5 flex flex-col flex-1"> | ||
| <h3 className="mt-2 text-white text-lg">{title}</h3> | ||
| <p className="mt-1 text-white text-sm md:w-9/12">{subtitle}</p> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| export default Services; | ||
| const Services = () => ( | ||
| <div className="flex w-full justify-center items-center gradient-bg-services"> | ||
| <div className="flex mf:flex-row flex-col items-center justify-between md:p-20 py-12 px-4"> | ||
| <div className="flex-1 flex flex-col justify-start items-start"> | ||
| <h1 className="text-white text-3xl sm:text-5xl py-2 "> | ||
| Services that we | ||
| <br /> | ||
| continue to improve | ||
| </h1> | ||
| <p className="text-left my-2 text-white font-light md:w-9/12 w-11/12 text-base"> | ||
| The best choice for buying and selling your crypto assets, with the various | ||
| super friendly services we offer | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="flex-1 flex flex-col justify-start items-center"> | ||
| <ServiceCard | ||
| color="bg-[#2952E3]" | ||
| title="Security gurantee" | ||
| icon={<BsShieldFillCheck fontSize={21} className="text-white" />} | ||
| subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products" | ||
| /> | ||
| <ServiceCard | ||
| color="bg-[#8945F8]" | ||
| title="Best exchange rates" | ||
| icon={<BiSearchAlt fontSize={21} className="text-white" />} | ||
| subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products" | ||
| /> | ||
| <ServiceCard | ||
| color="bg-[#F84550]" | ||
| title="Fastest transactions" | ||
| icon={<RiHeart2Fill fontSize={21} className="text-white" />} | ||
| subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| export default Services |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,76 @@ | ||
| // .jsx just means that we will write React JSX code inside this file | ||
| import React from 'react'; | ||
| import React, { useContext } from "react"; | ||
|
|
||
| import { TransactionContext } from "../context/TransactionContext"; | ||
|
|
||
| import useFetch from "../hooks/useFetch"; | ||
| import dummyData from "../utils/dummyData"; | ||
| import { shortenAddress } from "../utils/shortenAddress"; | ||
|
|
||
| const TransactionsCard = ({ addressTo, addressFrom, timestamp, message, keyword, amount, url }) => { | ||
| const gifUrl = useFetch({ keyword }); | ||
|
|
||
| return ( | ||
| <div className="bg-[#181918] m-4 flex flex-1 | ||
| 2xl:min-w-[450px] | ||
| 2xl:max-w-[500px] | ||
| sm:min-w-[270px] | ||
| sm:max-w-[300px] | ||
| min-w-full | ||
| flex-col p-3 rounded-md hover:shadow-2xl" | ||
| > | ||
| <div className="flex flex-col items-center w-full mt-3"> | ||
| <div className="display-flex justify-start w-full mb-6 p-2"> | ||
| <a href={`https://ropsten.etherscan.io/address/${addressFrom}`} target="_blank" rel="noreferrer"> | ||
| <p className="text-white text-base">From: {shortenAddress(addressFrom)}</p> | ||
| </a> | ||
| <a href={`https://ropsten.etherscan.io/address/${addressTo}`} target="_blank" rel="noreferrer"> | ||
| <p className="text-white text-base">To: {shortenAddress(addressTo)}</p> | ||
| </a> | ||
| <p className="text-white text-base">Amount: {amount} ETH</p> | ||
| {message && ( | ||
| <> | ||
| <br /> | ||
| <p className="text-white text-base">Message: {message}</p> | ||
| </> | ||
| )} | ||
| </div> | ||
| <img | ||
| src={gifUrl || url} | ||
| alt="nature" | ||
| className="w-full h-64 2xl:h-96 rounded-md shadow-lg object-cover" | ||
| /> | ||
| <div className="bg-black p-3 px-5 w-max rounded-3xl -mt-5 shadow-2xl"> | ||
| <p className="text-[#37c7da] font-bold">{timestamp}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const Transactions = () => { | ||
| return <div>Transactions</div>; | ||
| const { transactions, currentAccount } = useContext(TransactionContext); | ||
|
|
||
| return ( | ||
| <div className="flex w-full justify-center items-center 2xl:px-20 gradient-bg-transactions"> | ||
| <div className="flex flex-col md:p-12 py-12 px-4"> | ||
| {currentAccount ? ( | ||
| <h3 className="text-white text-3xl text-center my-2"> | ||
| Latest Transactions | ||
| </h3> | ||
| ) : ( | ||
| <h3 className="text-white text-3xl text-center my-2"> | ||
| Connect your account to see the latest transactions | ||
| </h3> | ||
| )} | ||
|
|
||
| <div className="flex flex-wrap justify-center items-center mt-10"> | ||
| {[...dummyData, ...transactions].reverse().map((transaction, i) => ( | ||
| <TransactionsCard key={i} {...transaction} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Transactions; |
Oops, something went wrong.