Skip to content

Commit

Permalink
links and exchangeS
Browse files Browse the repository at this point in the history
  • Loading branch information
joshuef committed Feb 27, 2024
1 parent 9565b7d commit a3d5cad
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 84 deletions.
Binary file added src/assets/images/exchange_bitmart.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/assets/images/exchange_bittrex.png
Binary file not shown.
Binary file removed src/assets/images/exchange_hitbtc.png
Binary file not shown.
Binary file removed src/assets/images/exchange_p2pb2b.png
Binary file not shown.
Binary file added src/assets/images/exchange_uniswap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
186 changes: 107 additions & 79 deletions src/pages/Economy/Economy.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,32 @@
import React from 'react'
import React from "react";

import Button from 'components/Button'
import TextSnippet from 'components/TextSnippet'
import UnderlinedLink from 'components/UnderlinedLink'
import QASection from 'components/QASection'
import Banner from './Banner'
import BGVideo from 'components/BGVideo'
import { prefixClassName, genRandomKey, openLink } from 'utils'
import content from './content'
import CONSTANTS from 'constant'
import Button from "components/Button";
import TextSnippet from "components/TextSnippet";
import UnderlinedLink from "components/UnderlinedLink";
import QASection from "components/QASection";
import Banner from "./Banner";
import BGVideo from "components/BGVideo";
import { prefixClassName, genRandomKey, openLink } from "utils";
import content from "./content";
import CONSTANTS from "constant";

import sparkThin2 from 'assets/videos/spark_2_thin.mp4'
import sparkThin2Web from 'assets/videos/spark_2_thin.webm'
import sparkThin2 from "assets/videos/spark_2_thin.mp4";
import sparkThin2Web from "assets/videos/spark_2_thin.webm";

import Bittrex from 'assets/images/exchange_bittrex.png'
import Hitbtc from 'assets/images/exchange_hitbtc.png'
import P2PB2B from 'assets/images/exchange_p2pb2b.png'
import BCBitcoin from 'assets/images/brokers_bcbitcoin.jpg'
import BitMart from "assets/images/exchange_bitmart.png";
import UniSwap from "assets/images/exchange_uniswap.png";

import SafeCoinPoster from 'assets/images/earn-poster.jpg'
import SafeCoinPoster from "assets/images/earn-poster.jpg";

import './safeCoin.sass'
import "./safeCoin.sass";

const baseClassName = 'SafeCoin'
const cn = prefixClassName(baseClassName)
const baseClassName = "SafeCoin";
const cn = prefixClassName(baseClassName);

const EXCHANGE_IMGS = {
Bittrex: Bittrex,
HitBTC: Hitbtc,
P2PB2B: P2PB2B,
BCBitcoin: BCBitcoin
}
BitMart: BitMart,
UniSwap: UniSwap,
};

const SafeCoin = () => {
const {
Expand All @@ -43,92 +39,124 @@ const SafeCoin = () => {
textBlock6,
exchanges,
faqs,
video
} = content
video,
} = content;

const { sections: faqSections = [] } = faqs
const { sections: faqSections = [] } = faqs;

return (
<section className={baseClassName}>
<div className={cn('wrap')}>
<div className={cn("wrap")}>
<Banner content={banner} />
<div className={cn('textBlocks')}>
<div className={cn('textBlocksWrap')}>
<div className={cn('video')}>
<div className={cn("textBlocks")}>
<div className={cn("textBlocksWrap")}>
<div className={cn("video")}>
<figure>
<video
tabIndex="-1"
poster={SafeCoinPoster}
controls="controls">
<source src={CONSTANTS.videoLinks.security.mp4} type="video/mp4" />
<source src={CONSTANTS.videoLinks.security.ogv} type="video/ogg" />
<source src={CONSTANTS.videoLinks.security.webm} type="video/webm" />
controls="controls"
>
<source
src={CONSTANTS.videoLinks.security.mp4}
type="video/mp4"
/>
<source
src={CONSTANTS.videoLinks.security.ogv}
type="video/ogg"
/>
<source
src={CONSTANTS.videoLinks.security.webm}
type="video/webm"
/>
</video>
<figcaption>{video.caption}</figcaption>
</figure>
</div>
<div className={cn('textBlock1')}>
<TextSnippet title={textBlock1.title} titleSize="H2" text={textBlock1.para} />
<div className={cn("textBlock1")}>
<TextSnippet
title={textBlock1.title}
titleSize="H2"
text={textBlock1.para}
/>
</div>
<div className={cn('textBlock2')}>
<TextSnippet title={textBlock2.title} titleSize="H2" text={textBlock2.para} />
<div className={cn("textBlock2")}>
<TextSnippet
title={textBlock2.title}
titleSize="H2"
text={textBlock2.para}
/>
<div className="CTA">
<Button className="icon external" onClick={() => {
openLink(textBlock2.CTA.url, true)
}}>{textBlock2.CTA.name}</Button>
<Button
className="icon external"
onClick={() => {
openLink(textBlock2.CTA.url, true);
}}
>
{textBlock2.CTA.name}
</Button>
</div>
</div>
<div className={cn('textBlock3')}>
<div className={cn("textBlock3")}>
<TextSnippet title={textBlock3.title} text={textBlock3.para} />
</div>
<div className={cn('textBlock4')}>
<div className={cn("textBlock4")}>
<TextSnippet title={textBlock4.title} text={textBlock4.para} />
<UnderlinedLink url={textBlock4.CTA.url}>{textBlock4.CTA.name}</UnderlinedLink>
<UnderlinedLink url={textBlock4.CTA.url}>
{textBlock4.CTA.name}
</UnderlinedLink>
</div>
<div className={cn('textBlock5')}>
<TextSnippet title={textBlock5.title} titleSize="H2" text={textBlock5.para} />
<div className={cn("textBlock5")}>
<TextSnippet
title={textBlock5.title}
titleSize="H2"
text={textBlock5.para}
/>
</div>
<div className={cn('textBlock6')}>
<div className={cn("textBlock6")}>
<TextSnippet title={textBlock6.title} text={textBlock6.para} />
<div className={cn('exchange')}>
{
exchanges.map(ex => (
<div key={genRandomKey()} className={cn('exchangeItem')}>
<figure>
<a href={ex.url} target="_blank" rel="noreferrer">
<img src={EXCHANGE_IMGS[ex.name]} />
<figcaption>{ex.name}</figcaption>
</a>
</figure>
</div>
))
}
<div className={cn("exchange")}>
{exchanges.map((ex) => (
<div key={genRandomKey()} className={cn("exchangeItem")}>
<figure>
<a href={ex.url} target="_blank" rel="noreferrer">
<img src={EXCHANGE_IMGS[ex.name]} />
<figcaption>{ex.name}</figcaption>
</a>
</figure>
</div>
))}
</div>
</div>
<div className={cn('faq')}>
<div className={cn('faqWrap')}>
{
faqSections.map(section => <QASection key={genRandomKey()} content={section} />)
}
<div className={cn('more')}>
<div className={cn('cta')}>
<Button className="hollow" onClick={() => {
openLink(faqs.CTA.url)
}}>{faqs.CTA.name}</Button>
<div className={cn("faq")}>
<div className={cn("faqWrap")}>
{faqSections.map((section) => (
<QASection key={genRandomKey()} content={section} />
))}
<div className={cn("more")}>
<div className={cn("cta")}>
<Button
className="hollow"
onClick={() => {
openLink(faqs.CTA.url);
}}
>
{faqs.CTA.name}
</Button>
</div>
</div>
</div>
</div>
</div>
<div className={cn('bgVideo')}>
<BGVideo src={sparkThin2} webmSrc={sparkThin2Web} height={'30px'} />
<div className={cn("bgVideo")}>
<BGVideo src={sparkThin2} webmSrc={sparkThin2Web} height={"30px"} />
</div>
<div className={cn('bgDark')}></div>
<div className={cn('buySafeCoinBg')}></div>
<div className={cn("bgDark")}></div>
<div className={cn("buySafeCoinBg")}></div>
</div>
</div>
</section>
)
}
);
};

export default SafeCoin
export default SafeCoin;
14 changes: 9 additions & 5 deletions src/pages/Economy/content.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default {
textBlock6: {
title: "Buying MaidSafeCoin (EMAID)",
para: [
"MaidSafeCoin (EMAID) is available on the [Bitmart](https://www.bitmart.com/trade/en-US?symbol=EMAID_USDT) exchange and on [UniSwap V3]",
"MaidSafeCoin (EMAID) is available on the [Bitmart](https://www.bitmart.com/trade/en-US?symbol=EMAID_USDT) exchange and on [UniSwap V3](http://tinyurl.com/mrxd9y53)",
],
},
exchanges: [
Expand All @@ -64,7 +64,7 @@ export default {
},
{
name: "UniSwap V3",
url: "https://info.uniswap.org/pools/0x35593881b7723b39a5bdbcb421e55c1ff1953f4b",
url: "http://tinyurl.com/mrxd9y53",
},
],
faqs: {
Expand All @@ -77,8 +77,8 @@ export default {
answer: [
`Safe Network Tokens won’t be issued until the Network goes live so they cannot be purchased at the moment. Currently you can buy MaidSafeCoin which will be swapped on a 1-to-1 basis for Safe Network Tokens when released.`,
"You can buy MaidSafeCoin from:",
"Bitmart",
"UniSwap V3",
"[Bitmart](https://www.bitmart.com/trade/en-US?symbol=EMAID_USDT)",
"[UniSwap V3](http://tinyurl.com/mrxd9y53)",
],
},
{
Expand All @@ -91,7 +91,11 @@ export default {
},
{
question: "How do I buy MaidSafeCoin?",
answer: ["You can buy MaidSafeCoin from:", "Bitmart", "UniSwap V3"],
answer: [
"You can buy MaidSafeCoin from:",
"[Bitmart](https://www.bitmart.com/trade/en-US?symbol=EMAID_USDT)",
"[UniSwap V3](http://tinyurl.com/mrxd9y53)",
],
},

{
Expand Down

0 comments on commit a3d5cad

Please sign in to comment.