Skip to content

Commit

Permalink
Merge pull request #152 from ethersphere/staging
Browse files Browse the repository at this point in the history
Add cowswap widget, change blogpost section
  • Loading branch information
GasperX93 authored Sep 11, 2024
2 parents 455f8b0 + 0f0c1ca commit 19577fe
Show file tree
Hide file tree
Showing 42 changed files with 1,180 additions and 880 deletions.
5 changes: 0 additions & 5 deletions components/common/FeatureBridges.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@ const items = [
url: "https://bridge.gnosischain.com/",
icon: Icons.GnosisIcon,
},
{
label: "Juniper",
url: "https://jumper.exchange/exchange?fromChain=1&fromToken=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&toChain=100&toToken=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
icon: Icons.JuniperIcon,
},
];

const FeatureBridges: React.FC<Props> = () => {
Expand Down
50 changes: 50 additions & 0 deletions components/common/FeatureCentralisedExchanges.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import * as React from "react";
import Icons from "@/icons/components/index";
import { cx } from "utils";

type Props = {};

const items = [
{
label: "CoinMarketCap",
url: "https://coinmarketcap.com/currencies/ethereum-swarm/markets/",
icon: Icons.CoinMarketCapIcon,
},
{
label: "CoinGecko",
url: "https://www.coingecko.com/en/coins/swarm#markets",
icon: Icons.CoinGeckoIcon,
},
{
label: "Messari",
url: "https://messari.io/project/swarm",
icon: Icons.MessariIcon,
},
];

const FeatureCentralisedExchanges: React.FC<Props> = () => {
return (
<div className="grid grid-cols-2 gap-5 mt-10 xl:grid-cols-3">
{items.map(({ label, url, icon }, index) => {
const IconTag: any = icon ?? false;
return (
<a
key={index}
href={url}
target="_blank"
rel="noreferrer"
className={cx(
"flex flex-col text-center items-center border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 px-2 py-5 text-sm sm:text-base hover:bg-[#1F2831]/40 font-bold duration-200 group"
)}
>
<IconTag className="flex-shrink-0 w-6 max-h-6" />

<span className="mt-4">{label}</span>
</a>
);
})}
</div>
);
};

export default FeatureCentralisedExchanges;
51 changes: 26 additions & 25 deletions components/common/FeatureExchanges.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from "react";
import { ArrowIcon } from "@/icons/components/index";
import Icons from "@/icons/components/index";
import { cx } from "utils";

Expand All @@ -12,38 +11,40 @@ const items = [
icon: Icons.UniswapIcon,
},
{
label: "SushiSwap (xDAI)",
url: "https://www.sushi.com/swap?chainId=100&token0=NATIVE&token1=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
icon: Icons.SushiSwapIcon,
label: "CoW Swap (xDAI)",
url: "https://swap.cow.fi/#/1/swap/WETH/BZZ",
icon: Icons.CowSwapIcon,
},
{
label: "Honeyswap (xDAI)",
url: "https://honeyswap.1hive.eth.limo/#/swap?chain=xdai&outputCurrency=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
icon: Icons.HoneyswapIcon,
label: "Jumper (any)",
url: "https://jumper.exchange/exchange?fromChain=1&fromToken=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&toChain=100&toToken=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
icon: Icons.JumperIcon,
},
];

const FeatureExchanges: React.FC<Props> = () => {
return (
<div className="grid grid-cols-2 gap-5 mt-10 xl:grid-cols-3">
{items.map(({ label, url, icon }, index) => {
const IconTag: any = icon ?? false;
return (
<a
key={index}
href={url}
target="_blank"
rel="noreferrer"
className={cx(
"flex flex-col text-center items-center border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 px-4 py-5 text-sm sm:text-[17px] font-bold duration-200 group"
)}
>
<IconTag className="flex-shrink-0 w-6 max-h-6" />
<div>
<div className="grid grid-cols-2 gap-5 mt-10 mb-10 xl:grid-cols-3">
{items.map(({ label, url, icon }, index) => {
const IconTag: any = icon ?? false;
return (
<a
key={index}
href={url}
target="_blank"
rel="noreferrer"
className={cx(
"flex flex-col text-center items-center border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 px-2 py-5 text-sm sm:text-base font-bold group hover:bg-[#1F2831]/40 duration-200"
)}
>
<IconTag className="flex-shrink-0 w-6 max-h-6" />

<span className="mt-4">{label}</span>
</a>
);
})}
<span className="mt-4">{label}</span>
</a>
);
})}
</div>
</div>
);
};
Expand Down
106 changes: 106 additions & 0 deletions components/common/FeatureSwap.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import * as React from "react";
import Icons from "@/icons/components/index";
import {
CowSwapWidget,
// CowSwapWidgetParams,
// TradeType,
} from "@cowprotocol/widget-react";

type Props = {};

const items = [
{
label: "Uniswap (ETH)",
url: "https://app.uniswap.org/#/swap?chain=ethereum&inputCurrency=ETH&outputCurrency=0x19062190B1925b5b6689D7073fDfC8c2976EF8Cb",
icon: Icons.UniswapIcon,
},
{
label: "CoW Swap (xDAI)",
url: "https://swap.cow.fi/#/1/swap/WETH/BZZ",
icon: Icons.CowSwapIcon,
},
{
label: "Jumper (any)",
url: "https://jumper.exchange/exchange?fromChain=1&fromToken=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&toChain=100&toToken=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
icon: Icons.JumperIcon,
},
];

const params = {
appCode: "Ethswarm", // Name of your app (max 50 characters)
width: "100%", // Width in pixels (or 100% to use all available space)
height: "640px",
chainId: 1, // 1 (Mainnet), 100 (Gnosis), 11155111 (Sepolia)
tokenLists: [
// All default enabled token lists. Also see https://tokenlists.org
"https://files.cow.fi/tokens/CoinGecko.json",
"https://files.cow.fi/tokens/CowSwap.json",
],
// Types not working, comment out to disable
// tradeType: TradeType.SWAP, // TradeType.SWAP, TradeType.LIMIT or TradeType.ADVANCED
sell: {
// Sell token. Optionally add amount for sell orders
asset: "usdt",
amount: "500",
},
buy: {
asset: "bzz",
amount: "0",
},
enabledTradeTypes: [
// Types not working, comment out to disable
// TradeType.SWAP, TradeType.LIMIT and/or TradeType.ADVANCED
// TradeType.SWAP,
// TradeType.LIMIT,
// TradeType.ADVANCED,
],
theme: {
baseTheme: "dark",
primary: "#e97e2f",
paper: "#1b2129",
text: "#f6f7f9",
},
standaloneMode: true,
disableToastMessages: false,
disableProgressBar: false,
images: {},
sounds: {},
customTokens: [],
partnerFee: {
bps: 100, // 1%
recipient: "0x6cb2075bd6e93691FF69Ad2187Fc3E9038503064", // Fee destination address
},
};

const FeatureSwap: React.FC<{ className?: string }> = ({ className = "" }) => {
return (
<div className={className}>
<div className="border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 pb-5">
<CowSwapWidget params={params} />
<div className="text-[13px] text-[#F6F7F9]/40 px-4 max-w-lg mx-auto">
Please note that the quoting system in CowSwap is in beta and may not
provide accurate predictions. To determine the exact final price, you
can calculate it from the different pools (
<a
href="https://app.uniswap.org/explore/pools/ethereum/0x5696C2c2FcB7e304A5B9fAaEc9cd37d369C9D067"
target="_blank"
className="underline hover:text-[#F6F7F9]"
>
Ethereum
</a>
,{" "}
<a
href="https://balancer.fi/pools/gnosis/cow/0x8Db38b15ccAbd9D7f62c77E22a57D979501404d9"
target="_blank"
className="underline hover:text-[#F6F7F9]"
>
GnosisChain
</a>
)
</div>
</div>
</div>
);
};

export default FeatureSwap;
11 changes: 10 additions & 1 deletion components/sections/ContentContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { cx } from "utils";
import CodeBlock from "./Develop/CodeBlock";
import GridContainer from "../common/GridContainer";
import FeatureBridges from "../common/FeatureBridges";
import FeatureCentralisedExchanges from "../common/FeatureCentralisedExchanges";
import FeatureSwap from "../common/FeatureSwap";

type ContentContainerProps = {
title: string;
Expand Down Expand Up @@ -106,12 +108,19 @@ const ContentContainer: React.FC<ContentContainerProps> = ({
)}
>
{block.exchanges && <FeatureExchanges />}
{block.centralisedExchanges && (
<FeatureCentralisedExchanges />
)}
{block.bridges && <FeatureBridges />}
</ContentBlock>
))}

{blocks.swap && (
<FeatureSwap className="col-span-12 md:col-span-6 md:col-start-4 lg:col-start-4" />
)}

{blocks.bzzPrice && (
<FeatureBzzPrice className="row-start-4 mt-5 md:row-auto md:mt-10 " />
<FeatureBzzPrice className="row-start-4 mt-5 md:row-auto md:mt-10" />
)}
{blocks.bzzPot && (
<FeatureBzzPot className="mt-5 md:mt-10 md:col-start-7 lg:col-start-7" />
Expand Down
24 changes: 10 additions & 14 deletions content/pages/get-bzz.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,39 +30,30 @@ sections:
columns: two
bzzPrice: true
bzzPot: true
features:
- template: feature
title: Write and persist data
content: BZZ is used by publishers to write data to the Swarm network and have it stored securely for extended periods of time.
- template: feature
title: Participate as a storage provider
content: The BZZ tokens which publishers pay to upload and store data on the Swarm network are redistributed to full node operators in exchange for the data storage services which they provide.
title: Uses
features: []
title: ""
content: ""
image: ""
ctas: []
code: ""
- template: section_item

blocks:
type: large
columns: two
swap: true
features:
- template: feature
title: Decentralised exchanges (DEXs)
exchanges: true
content: Make certain to check you are connected to the correct blockchain in your browser extension wallet (such as Metamask) when using any of these DEXes.
- template: feature
title: Centralised exchanges (CEXs)
centralisedExchanges: true
content:
An updated list of centralised exchanges can be found listed on
price-tracking websites such as [Coingecko](https://www.coingecko.com/en/coins/swarm#markets)
or [Coinmarketcap](https://coinmarketcap.com/currencies/ethereum-swarm/markets/)
under their ‘markets’ tab.
- template: feature
title: Bridges
bridges: true
content: For purchasing BZZ from one chain to another, you can use the following bridges
title: How to get BZZ
id: "how-to-get-bzz"
content: |-
Expand Down Expand Up @@ -107,7 +98,12 @@ sections:
title: Start Building ->
href: /build
title: How to use BZZ
content: ""
content: |-
## Write and persist data
BZZ is used by publishers to write data to the Swarm network and have it stored securely for extended periods of time.
## Participate as a storage provider
The BZZ tokens which publishers pay to upload and store data on the Swarm network are redistributed to full node operators in exchange for the data storage services which they provide.
image: ""
ctas: []
code: ""
Expand Down
36 changes: 18 additions & 18 deletions data/pages/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -188,48 +188,48 @@
"content": "An open-source, censorship-resistant blog hosted on Swarm.",
"cards": [
{
"href": "https://blog.ethswarm.org/foundation/2024/state-of-the-network-june-2024/",
"href": "https://blog.ethswarm.org/foundation/2024/bee-2-2-pre-release/",
"image": {
"src": "https://blog.ethswarm.org/uploads/ens_blog.jpeg",
"alt": "State of the Network: June"
"src": "https://blog.ethswarm.org/uploads/2-2-0-one-week-notice.png",
"alt": "Bee Version 2.2.0 - One Week Notice"
},
"title": "State of the Network: June",
"content": "This report provides a detailed analysis of various Swarm network metrics for June 2024",
"title": "Bee Version 2.2.0 - One Week Notice",
"content": "This article provides an overview of the major changes in Bee version 2.2.0",
"cta": {
"title": "Read more ->",
"href": "https://blog.ethswarm.org/foundation/2024/state-of-the-network-june-2024/",
"href": "https://blog.ethswarm.org/foundation/2024/bee-2-2-pre-release/",
"background": "transparent",
"color": "white",
"arrow": true
}
},
{
"href": "https://blog.ethswarm.org/foundation/2024/monthly-development-update-may-2024/",
"href": "https://blog.ethswarm.org/foundation/2024/monthly-development-update-august-2024/",
"image": {
"src": "https://blog.ethswarm.org/uploads/dev-update-may.png",
"alt": "Monthly Development Update – May 2024"
"src": "https://blog.ethswarm.org/uploads/DevUpdate-aug.jpeg",
"alt": "Monthly Development Update – August 2024"
},
"title": "Monthly Development Update – May 2024",
"content": "Bee 2.1 is out and live. Key changes include improved stability, performance and limits to the number of freezes per round..",
"title": "Monthly Development Update – August 2024",
"content": "In August, the Bee Track deployed the Bee 2.2 release on the public testnet. Expect a final release soon.",
"cta": {
"title": "Read more ->",
"href": "https://blog.ethswarm.org/foundation/2024/monthly-development-update-may-2024",
"href": "https://blog.ethswarm.org/foundation/2024/monthly-development-update-august-2024/",
"background": "transparent",
"color": "white",
"arrow": true
}
},
{
"href": "https://blog.ethswarm.org/foundation/2024/swarm-summit-2024-upload-the-future-recap//",
"href": "https://blog.ethswarm.org/foundation/2024/swarm-community-call-29-august-recap/",
"image": {
"src": "https://blog.ethswarm.org/uploads/summit-recap.png",
"alt": "Swarm Summit 2024: Upload the future - RECAP"
"src": "https://blog.ethswarm.org/uploads/scc-recap-august-2024.jpg",
"alt": "Swarm Community Call, 29 August – Recap"
},
"title": "Swarm Summit 2024: Upload the future - RECAP",
"content": "On 20-21 June 2024, the developer of decentralised data storage and distribution technology Swarm held its sixth annual summit which was also Swarm’s first IRL summit in five years.",
"title": "Swarm Community Call, 29 August – Recap",
"content": "During the August call, Niki Papadatou took the audience through the new features that are packed in the upcoming Bee 2.2",
"cta": {
"title": "Read more ->",
"href": "https://blog.ethswarm.org/foundation/2024/swarm-summit-2024-upload-the-future-recap/",
"href": "https://blog.ethswarm.org/foundation/2024/swarm-community-call-29-august-recap/",
"background": "transparent",
"color": "white",
"arrow": true
Expand Down
3 changes: 3 additions & 0 deletions icons/components/CoinGeckoIcon.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import * as React from 'react';
declare function CoinGeckoIcon(props: React.ComponentProps<'svg'>): JSX.Element;
export default CoinGeckoIcon;
Loading

0 comments on commit 19577fe

Please sign in to comment.