diff --git a/README.md b/README.md index 41e4381..a487d63 100644 --- a/README.md +++ b/README.md @@ -2,37 +2,71 @@ # Lightning Address -### **Like an email address, but for your money.** +### **Like an email address, but for your Bitcoin.** ## General Information +------------------------------------------------------------------------ The Lightning Address is an [Internet Identifier](https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1) that allows anyone to send you Bitcoin over the Lightning Network. No scanning of QR codes or pasting invoices necessary. For more information check out the website: [lightningaddress.com](https://lightningaddress.com) ## Developers +------------------------------------------------------------------------ If you are a developer aiming to introduce support for Lightning Addresses in your application, wallet, check the [DIY](./DIY.md) section. ## Bridge Servers +------------------------------------------------------------------------ If you don't want to roll out an entire HTTP / LNURL server on your own setup/infrastructure, but already have a Lightning node you want to use for your Lightning Address? You can use a Bridge Server to ensure your Lightning Node can properly receive payments from your Lightning Address. Check the [Bridge Server](./BRIDGE.md) instructions for a plug-n-play solution. +## Wallets Supported +------------------------------------------------------------------------ + +_Bitcoin Lightning wallets that support sending and receiving to **Lightning Addresses**_. + +| Wallet | Sending | Receiving | +| :--- | :-------: | :-----: | +| [Blixt](https://blixtwallet.github.io/) | ☑️ | ----- | +| [BlueWallet](https://bluewallet.io/) | | | +| [Breez](https://breez.technology/) | | | +| [coinos](https://coinos.io/) | WIP | WIP | +| [LNbits](https://lnbits.org/) | ☑️ | ---- | +| [@lntxbot](https://t.me/lntxbot) | ☑️ | ☑️ | +| [Muun](https://muun.com/) | | | +| [Phoenix](https://phoenix.acinq.co/) | | | +| [ThunderHub](https://github.com/apotdevin/thunderhub) | | | +| [Wallet of Satoshi](https://www.walletofsatoshi.com/) | | | +| [Zap](https://www.zaphq.io/) | | | +| [SBW](https://lightning-wallet.com/) | ☑️ | ---- | +| [ZEBEDEE](https://zebedee.io/wallet) (and [Bots](https://zebedee.io/bots/), and [Extensions](https://zebedee.io/wallet)) | ☑️ | ☑️ | +| [Zeus](https://github.com/ZeusLN/zeus) | WIP | ---- | + ## TLDR +------------------------------------------------------------------------ Here's a quick primer on how Lightning Address works and how it relies on the [LNURL Pay protocol](https://github.com/fiatjaf/lnurl-rfc/blob/master/lnurl-pay.md). ![](https://i.imgur.com/DIV5q8q.png) -## Diagrams +### Diagrams +------------------------------------------------------------------------ All illustrative and informative diagrams are available under the [DIAGRAMS](./diagrams/README.md) folder. +### Videos & Podcasts +------------------------------------------------------------------------ + +- [Introducing The Lightning Address]() - a recorded presentation on the explanations of why Lightning Address was created and the problems this protocol aims to solve + ## Contributions +------------------------------------------------------------------------ Contributions are welcome, for both the lightningaddress.com website as well as the Lightning Address protocol itself. Please submit a PR here or on the core [LNURL RFC repository](https://github.com/fiatjaf/lnurl-rfc). ## Donations +------------------------------------------------------------------------ If this project is important to you, consider donating to the contributors, creators, and developers pushing this initiative forward. diff --git a/components/benefits.js b/components/benefits.js index 04810fb..e065821 100644 --- a/components/benefits.js +++ b/components/benefits.js @@ -183,34 +183,19 @@ const CTAPrimary = styled.a` const BENEFITS = [ { - title: 'Skip QR codes', - description: () => <>Gone are the days that you needed to send your friend a Lightning invoice QR code in order to receive a payment. Now you can just text them to "pay me at user@domain.com" and go about your day., - image: '/images/qrcode.svg' - }, - { - title: 'Attach Comments', - description: 'Payments to your Lightning Address can also contain attached messages. Whether it is a donation message, a comment from a fan, or a friend\'s joke, messages always improve the experience.', - image: '/images/comments.svg' - }, - { - title: 'Open All Networks', - description: 'You can finally send money to that friend who uses that other app. From Service A to App B to User C to Platform D, Lightning Addresses set your money free -- a global boundless payment identifier for anyone and everyone.', - image: '/images/data.svg' - }, - { - title: 'Set Custom Properties', - description: 'Enjoy payments from anyone anywhere, for any amount, with or without attached comments. Set minimums-&-maximums, images, and descriptions. Properties can change, but your Lightning Address stays the same.', - image: '/images/bitcoin1.svg' - }, - { - title: 'Familiar Experience', - description: 'Like an email address but for your money! You can now have the exact same flow to send money as you have when sending an email message to a friend. A familiar user experience allowing everyone to participate.', + title: 'Easy and familiar', + description: 'No more requesting invoices and scanning QR codes to send your friends Bitcoin. If you can send an email, you can send a transaction to a Lightning Address.', image: '/images/bitcoin2.svg' }, { - title: 'Be Interoperable', - description: 'Lightning Address builds upon the LNURL Protocol which is widely adopted in Bitcoin Lightning-enabled services. The aim of LNURL is to improve user-experience around payments between apps and services.', - image: '/images/bitcoin3.svg' + title: 'Extended functionality', + description: 'Set minimum and maximum payment sizes to accept, add images and comments to your transactions and more features that weren\'t possible before.', + image: '/images/comments.svg' + }, + { + title: 'Sets your money free', + description: 'Your friend uses a different app or wallet? No problem! This is a new standard designed to break the barriers between Lightning providers. We all speak Bitcoin.', + image: '/images/data.svg' }, ]; @@ -218,7 +203,7 @@ export const Benefits = () => ( Users & Enthusiasts Why do I need a Lightning Address? - The Lightning Address makes it simple to send and receive money over the Bitcoin Lightning Network. No more scanning of QR codes, no more sharing of payment requests.
Send money like you send emails -- instantly and abundantly. + We created the Lightning Address protocol to empower everyone to send money like we send emails — instantly and abundantly. Coupled with the Lightning Network’s ability to send Bitcoin instantly and with (almost) no fees, we’re ushering in a new standard for how value moves around the world. {(BENEFITS || []).map((benefit) => ( @@ -237,7 +222,7 @@ export const Benefits = () => ( ))} - Get My Lightning Address + Get a Lightning Address ) diff --git a/components/community.js b/components/community.js new file mode 100644 index 0000000..072ae17 --- /dev/null +++ b/components/community.js @@ -0,0 +1,376 @@ +import styled from 'styled-components'; + +import { media } from '../utils'; + +const CommunityModule = styled.div` + display: flex; + background: #fff; + align-items: center; + flex-direction: column; + padding: 60px 0 60px 0; + justify-content: center; + border-top: 1px solid #eaeaea; + + ${media.tablet` + min-height: 700px; + padding: 120px 0 120px 0; + `} +`; + +const CommunityTitle = styled.div` + margin: 0 auto; + font-size: 30px; + padding: 0 30px; + max-width: 500px; + font-weight: 800; + line-height: 1.3; + text-align: center; + letter-spacing: -0.5px; + + ${media.tablet` + padding: 0; + font-size: 44px; + letter-spacing: -1px; + `} +`; + +const CommunityDescription = styled.div` + color: #666666; + font-size: 16px; + line-height: 1.4; + padding: 0 30px; + font-weight: 400; + max-width: 800px; + text-align: center; + letter-spacing: -1px; + margin: 20px auto 0 auto; + + ${media.tablet` + padding: 0; + font-size: 20px; + line-height: 1.6; + `} +`; + +const CommunityIntro = styled.p` + color: #f38800; + font-size: 14px; + line-height: 1.6; + max-width: 900px; + font-weight: 500; + padding: 8px 12px; + border-radius: 7px; + margin: 0 auto 20px auto; + background: rgba(255,97,0,0.1); + + ${media.tablet` + font-size: 18px; + `} +`; + +const CommunityInner = styled.div` + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + ${media.largeTablet` + max-width: 1000px; + flex-direction: row; + `} +`; + +const CommunityLeft = styled.div` + padding-bottom: 60px; + + ${media.largeTablet` + flex: 1; + padding-bottom: 0; + padding-right: 10px; + `} +`; + +const CommunityRight = styled.div` + ${media.largeTablet` + flex: 1; + `} +`; + +const CommunityRightInner = styled.div` + ${media.largeTablet` + padding-left: 100px; + `} +`; + +const CommunityCard = styled.div` + margin: 20px auto 20px auto; + display: flex; + padding: 16px; + min-height: 100px; + border-radius: 6px; + align-items: center; + flex-direction: column; + background-color: #fff; + justify-content: center; + box-shadow: 0px 30px 60px rgb(0 0 0 / 12%); + + ${media.tablet` + width: 425px; + height: 42px; + margin: 20px 0; + min-height: auto; + flex-direction: row; + justify-content: space-between; + `} +`; + +const CommunitySignUpButton = styled.a` + color: #fff; + width: 140px; + height: 2.81rem; + cursor: pointer; + min-width: 220px; + padding: 0 0.5rem; + text-align: center; + border-radius: 7px; + margin: 15px 0 0 0; + line-height: 2.8rem; + text-decoration: none; + background-color: #0070f3; + box-shadow: 0 4px 14px 0 rgb(0 118 255 / 39%); + opacity: ${({ isDisabled }) => isDisabled ? '0.5' : '1'}; + + &:hover { + background: ${({ isDisabled }) => isDisabled ? '#0070f3' : 'rgba(0,118,255,0.9)'}; + box-shadow: 0 6px 20px rgb(0 118 255 / 23%); + } + + ${media.tablet` + min-width: 220px; + margin: 0 15px 0 0; + `} +`; + +const Image = styled.img` + width: 130px; + align-self: center; +`; + +const ImageWrapper = styled.div` + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + flex: 1; + + ${media.tablet` + padding-right: 15px; + `} +`; + +const CommunityListWrapper = styled.ul` + list-style: none; + margin-bottom: 2rem; +`; + +const CommunityListItem = styled.li` + color: #666666; + font-size: 16px; + font-weight: 400; + margin-bottom: 0.35rem; + + &:before { + content: "-"; + color: #666666; + margin-left: -25px; + position: absolute; + display: inline-block; + } +`; + +const CommunitySectionTitle = styled.div` + margin: 0 auto; + font-size: 20px; + padding: 0 30px; + max-width: 500px; + font-weight: 800; + line-height: 1.3; + text-align: left; + + ${media.tablet` + padding: 0; + font-size: 24px; + letter-spacing: -0.5px; + `} +`; + +const Link = styled.a` + color: #222222; + cursor: pointer; + font-weight: 600; + text-decoration: none; + + &:hover { + color: #0070f3; + } +`; + +const LinkDescription = styled.span` + padding-left: 5px; + word-break: break-word; +`; + +const CommunityDescriptionSmall = styled(CommunityDescription)` + text-align: left; + + ${media.tablet` + font-size: 18px; + `} +`; + +const CTAWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 40px auto 20px auto; + + ${media.tablet` + margin: 40px auto 20px -40px; + `} +`; + +const CTASecondary = styled.a` + color: #696969; + cursor: pointer; + height: 2.81rem; + background: #fff; + width: 300px; + text-align: center; + padding: 0; + margin: 10px 0 0 0; + text-decoration: none; + line-height: 2.8rem; + border-radius: 7px; + box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%); + + &:hover { + background: rgba(255,255,255,0.9); + box-shadow: 0 6px 20px rgb(93 93 93 / 23%); + } + + ${media.tablet` + margin: 0 0 0 15px; + `} +`; + +const BRIDGE_SERVERS = [ + { + urlLink: 'https://payaddress.co', + urlText: 'PayAddress.co', + description: 'a something something', + }, + { + urlLink: 'https://bitmia.com', + urlText: 'Bitmia.com', + description: 'a something something', + }, + { + urlLink: 'https://tinytip.me', + urlText: 'TinyTip.me', + description: 'a something something', + }, + { + urlLink: 'https://paymentlink.xyz', + urlText: 'PaymentLink.xyz', + description: 'a something something', + }, + { + urlLink: 'https://ln.fitti.io/', + urlText: 'LN.Fitti.io', + description: 'a something something', + }, + { + urlLink: 'https://bridgeaddr.fiatjaf.com/', + urlText: 'BridgeAddr', + description: 'a server that allows you to receive payments at yourname@yourdomain.com noncustodially.', + }, +]; + +const WALLETS = [ + { + name: 'ZEBEDEE', + image: '/images/zebedee.svg', + downloadText: 'Download Wallet', + url: 'https://zebedee.io/wallet', + }, + { + name: 'SBW', + image: '/images/sbw.png', + downloadText: 'Download Wallet', + url: 'https://lightning-wallet.com', + }, + { + name: 'Blixt', + image: '/images/blixt.png', + downloadText: 'Download Wallet', + url: 'https://blixtwallet.github.io/', + }, + { + name: 'LNBits', + image: '/images/lnbits.png', + downloadText: 'Open LNBits', + url: 'https://lnbits.com/', + }, +] + +export const Community = () => ( + + Community Bridge Servers and Wallets + Integrates as fast as Lightning + + We’ve made it exceedingly straightforward to start supporting Lightning Addresses on your own domain or integrate them with the apps you’re building. Set up support for this new standard today and join the era of total Lightning interoperability! + + + + Get a Lightning Address now! + + Get your own Lightning Address now by using one of the apps and services that already support it. You’ll be set up in seconds! + + {WALLETS.map(wallet => ( + + + {wallet.name} + + {wallet.downloadText} + + ))} + + + View list of all supported Wallets + + + + + + Get a Lightning Address now! + + Get your own Lightning Address now by using one of the apps and services that already support it. You’ll be set up in seconds! + + + {BRIDGE_SERVERS.map(item => ( + + + {item.urlText} + + + - {item.description} + + + ))} + + + + + +) diff --git a/components/hero.js b/components/hero.js index fd387f3..9b3d0f5 100644 --- a/components/hero.js +++ b/components/hero.js @@ -69,8 +69,8 @@ const Description = styled.p` padding: 0; font-size: 20px; padding: 0 30px; - max-width: 800px; - line-height: 1.6; + max-width: 500px; + line-height: 1.4; letter-spacing: -1px; `} `; @@ -202,7 +202,11 @@ const LicenseLink = styled.a` `; const Bold = styled.span` + margin: 0; + padding: 0; + display: block; font-weight: 600; + padding-bottom: 5px; letter-spacing: -0.5px; `; @@ -238,23 +242,22 @@ export class Hero extends PureComponent { - Like an email address, but for your money! An Internet Identifier that lets anyone send you Bitcoin instantly over the Lightning Network. No scanning QR codes or pasting invoices. + Like an email address, but for your Bitcoin! A massively simpler way for anyone to send you Bitcoin instantly on the Lightning Network. you@ + your.domain zbd.gg lntxbot.com - your.domain zebedee.io - lnbits.com coinos.io - Get My Lightning Address + Get a Lightning Address Read Documentation diff --git a/components/paths.js b/components/paths.js index 0e9eea6..0302ab2 100644 --- a/components/paths.js +++ b/components/paths.js @@ -148,7 +148,7 @@ const PathsIntro = styled.p` const IMPLEMENTATIONS = [ { title: 'Apps & Services', - description: 'Create an account with one of the apps that support Lightning Address and get started immediately. Just like how Gmail is your email server, the app handles all of the payment infrastructure and is the easiest way to get a Lightning Address.', + description: 'Create an account with one of the apps or services that support Lightning Address and let them handle all the infrastructure. Like using an email server such as Gmail, but for your Bitcoin payments. Get started immediately!', image: '/images/data4.svg', linkText: 'Get Started', link: '#providers', @@ -156,7 +156,7 @@ const IMPLEMENTATIONS = [ }, { title: 'Bridge Servers', - description: 'If you already run a Bitcoin Lightning Network node and want a quick plug-n-play solution to getting your Lightning Address, this option is for you. Simply point some domain DNS settings to the Bridge Server, and you will be setup in minutes.', + description: 'If you already run a Bitcoin Lightning Network node and want a plug-n-play solution, this option is for you. Simply point some configuration settings to one of the growing list of community-supported Bridge Servers and get set up in minutes.', image: '/images/data3.svg', linkText: 'Quick Setup', link: 'https://github.com/andrerfneves/lightning-address/blob/master/BRIDGE.md', @@ -164,9 +164,9 @@ const IMPLEMENTATIONS = [ }, { title: 'Self-Hosted', - description: 'Lightning Address is just a set of simple protocol instructions, you can roll everything on your own. Whether you are a service provider looking to support Lightning Addresses or a user that wants to host your own setup, this option is for you.', + description: 'Lightning Address is just a set of simple protocol instructions. Whether you are a Bitcoin service provider or simply an enthusiast interested in running your own setup, this is where you get started supporting this new standard.', image: '/images/data2.svg', - linkText: 'Read More', + linkText: 'Learn More', link: 'https://github.com/andrerfneves/lightning-address/blob/master/DIY.md', isSecondary: true }, @@ -175,8 +175,10 @@ const IMPLEMENTATIONS = [ export const Paths = () => ( Developers & Shadowy Coders - How do Lightning Addresses work? - You can choose to sign up for a service just like an email server (Gmail or Outlook), which will take care of all the payments behind-the-scenes for you. You can roll your own server that handles the connection between your Lightning Address and your Lightning node. Or you can rely on a `Bridge` server that provides an easy plug-n-play solution. + Integrates as fast as Lightning + + We’ve made it exceedingly straightforward to start supporting Lightning Addresses on your own domain or integrate them with the apps you’re building. Set up support for this new standard today and join the era of total Lightning interoperability! + {(IMPLEMENTATIONS || []).map((benefit) => ( diff --git a/components/providers.js b/components/providers.js index 58ad1d9..04c3c0f 100644 --- a/components/providers.js +++ b/components/providers.js @@ -172,7 +172,8 @@ const ProviderSignUpButton = styled.a` width: 140px; height: 2.81rem; cursor: pointer; - padding: 0 3.5rem; + min-width: 220px; + padding: 0 0.5rem; text-align: center; border-radius: 7px; margin: 15px 0 0 0; @@ -188,7 +189,7 @@ const ProviderSignUpButton = styled.a` } ${media.tablet` - width: 120px; + min-width: 220px; margin: 0 15px 0 0; `} `; @@ -198,6 +199,11 @@ const ZEBEDEEImage = styled.img` align-self: center; `; +const BTCPayImage = styled.img` + width: 100px; + align-self: center; +`; + const Bold = styled.span` font-weight: 600; letter-spacing: -0.5px; @@ -228,14 +234,14 @@ export const Providers = () => ( Get a Lightning Address now! - Start receiving payments to you@address.com now. Choose from one of the apps and services that already support Lightning Address below and you'll be set up in seconds. + Get your own Lightning Address now by using one of the apps and services that already support it. You’ll be set up in seconds! you@zbd.gg - Download App + Download Wallet @@ -246,10 +252,10 @@ export const Providers = () => ( - - you@lnbits.com + + you@yourbtcpay.server - Create Account + Coming Soon @@ -263,12 +269,12 @@ export const Providers = () => ( Your app doesn't support Lightning Addresses yet? - If your favorite Bitcoin app doesn't yet support Lightning Address, get in touch with the developer company and ask them to learn about how the protocol can help their users. + If your favorite Bitcoin app doesn't support Lightning Addresses yet, get in touch with the developer company and ask them to learn about how the protocol can help their users.

To make things easier, we created an email template you can send with just a click. - window.open(`mailto:ENTER_DEVELOPER_EMAIL_HERE?subject=Introducing Lightning Address&body=Hi there,\n\n I just learnt about the Lightning Address protocol and how awesome it is for sending and receiving payments over the Bitcoin Lightning Network. I was hoping you would take a look at the lightningaddress.com website and possibly implement support for it? \n\n Lightning Addresses provide a familiar user experience with sending Lightning payments to other people online, similar to sending an email address. No more QR codes or invoices / addresses. "Just pay me at satoshi@website.com"\n\n Cheers!`)}> + window.open(`mailto:DEVELOPER_EMAIL_HERE?subject=Have you considered support for Lightning Address?&body=Hi there, I just learned about the Lightning Address protocol and how awesome it is for sending and receiving payments over the Bitcoin Lightning Network. I was hoping you would take a look at the lightningaddress.com website and possibly implement support for it? \n\n Lightning Addresses provide a familiar user experience with sending Lightning payments to other people online, similar to sending an email. No more QR codes or invoices / addresses. "Just pay me at satoshi@website.com"\n\n Cheers!`)}> Send Email diff --git a/pages/index.js b/pages/index.js index 16d34a8..67161da 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,7 @@ import styled from 'styled-components'; import Head from 'next/head'; +import { Community } from '../components/community'; import { Providers } from '../components/providers'; import { Benefits } from '../components/benefits'; import { Footer } from '../components/footer'; @@ -43,7 +44,7 @@ export default function Home() { - +