diff --git a/web/e.cash/pages/build.js b/web/e.cash/pages/build.js index c8c097bee..f44799cf9 100644 --- a/web/e.cash/pages/build.js +++ b/web/e.cash/pages/build.js @@ -1,144 +1,159 @@ -// Copyright (c) 2023 The Bitcoin developers +// Copyright (c) 2024 The Bitcoin developers // Distributed under the MIT software license, see the accompanying // file COPYING or http://www.opensource.org/licenses/mit-license.php. import Layout from '/components/layout'; import SubPageHero from '/components/sub-page-hero'; import H3 from '/components/h3'; -import Link from 'next/link'; import { Container, GradientSpacer } from '/components/atoms'; +import ExternalLink from '/components/external-link'; import coinupdown from '/public/animations/coin-up-down.json'; +import { + LinkSection, + BuildLinkCtn, + InnerBuildLinkCtn, + LinkArrow, +} from '/styles/pages/build.js'; -function Build(props) { +const devLinks = [ + { + sectionTitle: 'How to contribute', + anchor: 'contributions', + links: [ + { + title: 'Contributions guide', + description: + 'Learn more about contributing to the Bitcoin ABC repo', + link: 'https://github.com/Bitcoin-ABC/bitcoin-abc/blob/master/CONTRIBUTING.md', + }, + ], + }, + { + sectionTitle: 'Libraries', + anchor: 'libraries', + links: [ + { + title: 'chronik-client', + description: + 'Interact with the eCash blockchain through the chronik indexer', + link: 'https://www.npmjs.com/package/chronik-client', + }, + { + title: 'BitGo utxo-lib', + description: + 'Create a wallet, build eCash transactions, manage utxos', + link: 'https://www.npmjs.com/package/@bitgo/utxo-lib', + }, + { + title: 'ecashaddrjs', + description: 'Tools for working with eCash addresses', + link: 'https://www.npmjs.com/package/ecashaddrjs', + }, + { + title: 'ecash-script', + description: 'Tools for parsing OP_RETURN transactions', + link: 'https://www.npmjs.com/package/ecash-script', + }, + ], + }, + { + sectionTitle: 'Examples', + anchor: 'examples', + links: [ + { + title: 'App dev examples', + description: + 'Series of example code to serve as a reference guide for app developers', + link: 'https://github.com/Bitcoin-ABC/bitcoin-abc/tree/master/apps/examples', + }, + { + title: 'Cashtab codebase', + description: 'Public repo for the CashTab wallet', + link: 'https://github.com/Bitcoin-ABC/bitcoin-abc/tree/master/cashtab', + }, + ], + }, + { + sectionTitle: 'DevHub', + anchor: 'devhub', + links: [ + { + title: 'eCash Devs and Builders', + description: + 'Telegram group for more info, and to connect with other developers', + link: 'https://t.me/eCashBuilders', + }, + ], + }, +]; + +function Build() { return ( +

+ The eCash blockchain is instantly accessible to app + developers with simple, powerful, open-source libraries. + Developers can build feature-dense apps that send and + receive money instantly. Rapid prototyping is a key strength + of the eCash network and its dev tools --- MVP apps can be + built and deployed in minutes. +

+ + + +

“Building” is one of the great filters in cryptocurrency. In eCash, it's also uniquely accessible. You can start right away, and make meaningful contributions in days.

There are many good reasons to start creating software. Leverage is one of the best. A single app written by a single dev can reach millions of customers overnight.

A good strategy to make an app successful is to go though a process of trial, error, feedback, and iteration. Reducing the cycle time of this process is critical. This is called rapid prototyping.

-

- eCash has some of the most impressive rapid prototyping on - the market. Today, interested developers can build powerful - apps that send and receive money instantly. It can take less - than a few hours to get an MVP online and available to - users. -

- - - -

-
    -
  • - - Contributions guide - -
    • -
-

-
    -
  • - - chronik-client - - , interact with the eCash blockchain through the chronik - indexer -
    • -
  • - - BitGo utxo-lib - - , create a wallet, build eCash transactions, manage - utxos -
    • -
  • - - ecashaddrjs - - , tools for working with eCash addresses -
    • -
  • - - ecash-script - - , tools for parsing OP_RETURN transactions -
    • -
-

-
    -
  • - - App dev examples - -
    • -
  • - - Cashtab codebase - -
    • -
-

-
    -
  • - Join the{' '} - - eCash Devs and Builders - {' '} - Telegram group for more info, and to connect with other - developers. -
    • -
+ {devLinks.map((item, index) => ( + +

+ {item.links.map((link, i) => ( + + + +

{link.title}

+

{link.description}

+ +

+ + + + + ))} + + ))} + + +

+ + +

ecash-lib

+

Full-feature ecash native tx building

+ + + ); } export default Build; diff --git a/web/e.cash/styles/pages/build.js b/web/e.cash/styles/pages/build.js new file mode 100644 index 000000000..b9638d3de --- /dev/null +++ b/web/e.cash/styles/pages/build.js @@ -0,0 +1,94 @@ +// Copyright (c) 2024 The Bitcoin developers +// Distributed under the MIT software license, see the accompanying +// file COPYING or http://www.opensource.org/licenses/mit-license.php. +import styled from 'styled-components'; + +export const LinkSection = styled.div` + margin-top: 60px; + :last-child { + margin-bottom: 200px; + } +`; + +export const LinkArrow = styled.div` + position: absolute; + right: 40px; + top: 0; + bottom: 0; + display: flex; + align-items: center; + transition: all ease-in-out 200ms; + h3 { + margin: 0; + font-size: 45px; + ${props => props.theme.breakpoint.medium} { + font-size: 25px; + } + } +`; + +export const InnerBuildLinkCtn = styled.div` + background-color: ${props => props.theme.colors.darkBlue}; + display: flex; + justify-content: center; + flex-direction: column; + color: ${props => props.theme.colors.contrast}; + padding: 10px 60px 10px 20px; + width: auto; + height: 100%; + clip-path: polygon( + 100% 0, + 100% calc(100% - 16px), + calc(100% - 20px) 100%, + 0 100%, + 0 0 + ); + h4 { + margin: 0; + font-size: 24px; + transition: all ease-in-out 200ms; + ${props => props.theme.breakpoint.medium} { + font-size: 18px; + } + } + p { + opacity: 0.6; + margin: 0; + transition: all ease-in-out 200ms; + ${props => props.theme.breakpoint.medium} { + font-size: 16px; + } + } +`; + +export const BuildLinkCtn = styled.div` + width: 100%; + position: relative; + background-color: ${props => props.theme.colors.primary}; + padding: 2px; + margin-bottom: 15px; + clip-path: polygon( + 100% 0, + 100% calc(100% - 16px), + calc(100% - 20px) 100%, + 0 100%, + 0 0 + ); + :hover { + background-color: ${props => props.theme.colors.accent}; + ${LinkArrow} { + h3 { + color: ${props => props.theme.colors.accent}; + } + transform: translateX(10px); + } + ${InnerBuildLinkCtn} { + h4 { + color: ${props => props.theme.colors.accent}; + } + p { + opacity: 1; + } + } + } +`;