aljaz/lightning-address
1
0
Fork 0
mirror of https://github.com/aljazceru/lightning-address.git synced 2025-12-17 05:14:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: finalize new community module

Browse Source
This commit is contained in:
Andre Neves
2021-08-26 15:04:22 -04:00
parent 0fdbe282fd
commit 0512647f0d
4 changed files with 200 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/benefits.js
View File

@@ -189,7 +189,7 @@ const BENEFITS = [
},
{
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.',
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'
},
{

184
components/community.js
View File

@@ -170,24 +170,18 @@ const ImageWrapper = styled.div`
`}
`;
const CommunityListWrapper = styled.ul`
list-style: none;
margin-bottom: 2rem;
`;
const CommunityListWrapper = styled.div`
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: row;
justify-content: center;
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;
}
${media.tablet`
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
`}
`;
const CommunitySectionTitle = styled.div`
@@ -197,35 +191,66 @@ const CommunitySectionTitle = styled.div`
max-width: 500px;
font-weight: 800;
line-height: 1.3;
text-align: left;
text-align: center;
${media.tablet`
padding: 0;
text-align: left;
font-size: 24px;
letter-spacing: -0.5px;
`}
`;
const Link = styled.a`
color: #222222;
cursor: pointer;
font-weight: 600;
color: #0070f3;
font-size: 14px;
line-height: 1.6;
font-weight: 500;
padding: 8px 12px;
border-radius: 7px;
text-decoration: none;
margin: 10px 10px 0 0;
background: rgba(0,118,255,0.1);
${media.tablet`
font-size: 14px;
max-width: 900px;
line-height: 1.6;
`}
&:hover {
color: #0070f3;
background: rgba(0,118,255,0.2);
}
`;
const LinkDescription = styled.span`
padding-left: 5px;
word-break: break-word;
const VerticalLink = styled.a`
color: #0070f3;
display: block;
font-size: 14px;
line-height: 1.6;
max-height: 22px;
font-weight: 500;
padding: 8px 12px;
border-radius: 7px;
text-decoration: none;
margin: 10px 10px 0 0;
background: rgba(0,118,255,0.1);
${media.tablet`
font-size: 14px;
line-height: 1.6;
`}
&:hover {
background: rgba(0,118,255,0.2);
}
`;
const CommunityDescriptionSmall = styled(CommunityDescription)`
text-align: left;
text-align: center;
${media.tablet`
text-align: left;
font-size: 18px;
`}
`;
@@ -247,7 +272,7 @@ const CTASecondary = styled.a`
cursor: pointer;
height: 2.81rem;
background: #fff;
width: 300px;
width: 280px;
text-align: center;
padding: 0;
margin: 10px 0 0 0;
@@ -266,36 +291,70 @@ const CTASecondary = styled.a`
`}
`;
const BRIDGE_SERVERS = [
const CommunityVerticalListWrapper = styled.div`
display: flex;
flex-direction: column;
`;
const VerticalLinkWrapper = styled.div`
display: flex;
padding: 0 20px;
padding-top: 10px;
align-items: center;
flex-direction: column;
${media.tablet`
flex-direction: row;
align-items: flex-start;
`}
`;
const VerticalLinkDescription = styled(CommunityDescriptionSmall)`
margin-top: 0;
font-size: 12px;
line-height: 1.4;
padding-top: 10px;
letter-spacing: 0;
padding-left: 10px;
${media.tablet`
font-size: 14px;
`}
`;
const SATDRESS_SERVERS = [
{
urlLink: 'https://payaddress.co',
urlText: 'PayAddress.co',
description: 'a something something',
urlText: '@payaddress.co',
},
{
urlLink: 'https://bitmia.com',
urlText: 'Bitmia.com',
description: 'a something something',
urlText: '@bitmia.com',
},
{
urlLink: 'https://tinytip.me',
urlText: 'TinyTip.me',
description: 'a something something',
urlText: '@tinytip.me',
},
{
urlLink: 'https://paymentlink.xyz',
urlText: 'PaymentLink.xyz',
description: 'a something something',
urlText: '@paymentlink.xyz',
},
{
urlLink: 'https://ln.fitti.io/',
urlText: 'LN.Fitti.io',
description: 'a something something',
urlText: '@ln.fitti.io',
},
];
const BRIDGE_SERVERS = [
{
urlLink: 'https://github.com/fiatjaf/satdress/',
urlText: 'Satdress',
description: 'Federated Lightning Address server anyone can self-host to receive Lightning payments at you@yourdomain.com noncustodially.',
},
{
urlLink: 'https://bridgeaddr.fiatjaf.com/',
urlText: 'BridgeAddr',
description: 'a server that allows you to receive payments at yourname@yourdomain.com noncustodially.',
description: 'Bridge Server that allows setting domain DNS configuration and receive payments at you@yourdomain.com noncustodially.',
},
];
@@ -324,20 +383,20 @@ const WALLETS = [
downloadText: 'Open LNBits',
url: 'https://lnbits.com/',
},
]
];
export const Community = () => (
<CommunityModule>
<CommunityIntro>Community Bridge Servers and Wallets</CommunityIntro>
<CommunityTitle>Community</CommunityTitle>
<CommunityModule id="community">
<CommunityIntro>Community Efforts & Tools</CommunityIntro>
<CommunityTitle>Noncustodial Bridge Servers</CommunityTitle>
<CommunityDescription>
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!
The Lightning Address standard continues to be adopted by community participants and companies in the industry. From mobile and desktop wallet support, to federated Lightning Address bridge servers anyone can self-host, it's never been easier to transact Bitcoin.
</CommunityDescription>
<CommunityInner>
<CommunityLeft>
<CommunitySectionTitle>Transact with a Lightning Address today!</CommunitySectionTitle>
<CommunityDescriptionSmall>
The Lightning Network wallets listed below have full support for transacting with Lightning Addresses. Download them to get started sending Bitcoin as easily as you send emails.
The wallets listed below already have support for transacting with Lightning Addresses. Download them to get started sending Bitcoin as easily as you send emails.
</CommunityDescriptionSmall>
{WALLETS.map(wallet => (
<CommunityCard key={wallet.name}>
@@ -349,28 +408,39 @@ export const Community = () => (
))}
<CTAWrapper>
<CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md#wallets" target="_blank">
View list of all supported Wallets
View list of supported Wallets
</CTASecondary>
</CTAWrapper>
</CommunityLeft>
<CommunityRight>
<CommunityRightInner>
<CommunitySectionTitle>Connect your Lightning Network node backend to a Lightning Address noncustodially!</CommunitySectionTitle>
<CommunitySectionTitle>Want a different domain for your Lightning Address?</CommunitySectionTitle>
<CommunityDescriptionSmall>
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!
Use one of the community-supported Lightning Address servers below to connect your Lightning backend to a Lightning Address noncustodially!
</CommunityDescriptionSmall>
<CommunityListWrapper>
{BRIDGE_SERVERS.map(item => (
<CommunityListItem key={item.urlText}>
<Link href={item.urlLink} target="_blank">
{item.urlText}
</Link>
<LinkDescription>
- {item.description}
</LinkDescription>
</CommunityListItem>
{SATDRESS_SERVERS.map(item => (
<Link key={item.urlText} href={item.urlLink} target="_blank">
{item.urlText}
</Link>
))}
</CommunityListWrapper>
<br />
<CommunityDescriptionSmall>
Additional resources for using and supporting Lightning Addresses:
</CommunityDescriptionSmall>
<CommunityVerticalListWrapper>
{BRIDGE_SERVERS.map(item => (
<VerticalLinkWrapper>
<VerticalLink key={item.urlText} href={item.urlLink} target="_blank">
{item.urlText}
</VerticalLink>
<VerticalLinkDescription>
{item.description}
</VerticalLinkDescription>
</VerticalLinkWrapper>
))}
</CommunityVerticalListWrapper>
</CommunityRightInner>
</CommunityRight>
</CommunityInner>

108
components/footer.js
View File

@@ -11,46 +11,54 @@ const FOOTER = [
title: 'Resources',
items: [
{
link: URL_INTERNET_IDENTIFIER,
title: 'Internet Identifier RFC'
link: 'https://github.com/andrerfneves/lightning-address/blob/master/README.md',
title: 'Dev Documentation'
},
{
link: 'https://github.com/andrerfneves/lightning-address',
title: 'Code Repository'
},
{
link: 'https://github.com/andrerfneves/lightning-address/blob/master/README.md',
title: 'Documentation'
link: 'https://lightningdecoder.com',
title: 'Lightning Address Decoder'
},
{
link: 'https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md',
title: 'License'
link: URL_INTERNET_IDENTIFIER,
title: 'Internet Identifier RFC'
},
]
},
{
title: 'LNURL Protocol',
items: [
{
link: 'https://github.com/fiatjaf/lnurl-rfc',
title: 'Specification'
},
{
link: 'https://github.com/fiatjaf/lnurl-rfc/blob/master/lnurl-pay.md',
title: 'LNURL Pay Specification'
},
{
link: 'https://github.com/fiatjaf/awesome-lnurl#wallets',
title: 'Wallets Supported'
},
{
link: 'https://github.com/fiatjaf/awesome-lnurl',
title: 'Awesome LNURL'
title: 'LNURL RFC'
},
]
},
{
title: 'Providers',
title: 'Sending',
items: [
{
link: 'https://blixtwallet.com/',
title: 'Blixt Wallet'
},
{
link: 'https://lightning-wallet.com/',
title: 'Simple Bitcoin Wallet'
},
{
link: 'https://lntxbot.fiatjaf.com/',
title: 'LNTXBOT Telegram Bot'
},
{
link: 'https://zebedee.io/wallet',
title: 'ZEBEDEE Wallet'
},
{
link: 'https://lnbits.com',
title: 'LNBits'
},
]
},
{
title: 'Receiving',
items: [
{
link: 'https://zebedee.io/wallet',
@@ -58,16 +66,16 @@ const FOOTER = [
},
{
link: 'https://lntxbot.fiatjaf.com/',
title: 'LNTXBOT Telegram'
},
{
link: 'https://lnbits.com',
title: 'LNBits'
title: 'LNTXBOT Telegram Bot'
},
{
link: 'https://coinos.io',
title: 'CoinOS'
},
{
link: 'https://github.com/fiatjaf/satdress',
title: 'Satdress'
},
]
},
];
@@ -81,13 +89,14 @@ const Wrapper = styled.div`
const InnerWrapper = styled.div`
display: flex;
margin: 0 auto;
padding: 20px 30px 30px 30px;
flex-direction: column;
padding: 20px 30px 30px 30px;
${media.tablet`
max-width: 900px;
flex-direction: row;
padding: 80px 0 100px 0;
justify-content: space-between;
`}
`;
@@ -96,7 +105,7 @@ const Column = styled.div`
flex-direction: column;
${media.tablet`
width: 200px;
width: 230px;
`}
`;
@@ -157,21 +166,32 @@ const BottomQR = styled.div`
border: 1px solid #ddd;
`;
const Menus = styled.div`
display: flex;
flex-direction: column;
${media.tablet`
flex-direction: row;
`}
`;
export const Footer = () => (
<Wrapper>
<InnerWrapper>
{(FOOTER || []).map(col => (
<Column key={col.title}>
<ColumnTitle>
{col.title}
</ColumnTitle>
{(col.items || []).map(item => (
<ColumnItem key={item.link} href={item.link} target="_blank">
{item.title}
</ColumnItem>
))}
</Column>
))}
<Menus>
{(FOOTER || []).map(col => (
<Column key={col.title}>
<ColumnTitle>
{col.title}
</ColumnTitle>
{(col.items || []).map(item => (
<ColumnItem key={item.link} href={item.link} target="_blank">
{item.title}
</ColumnItem>
))}
</Column>
))}
</Menus>
<Bottom>
<BottomInner>
<BottomQR>

13
components/paths.js
View File

@@ -152,15 +152,17 @@ const IMPLEMENTATIONS = [
image: '/images/data4.svg',
linkText: 'Get Started',
link: '#providers',
isSecondary: false
isSecondary: false,
isInternal: true,
},
{
title: 'Bridge Servers',
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',
isSecondary: true
link: '#community',
isSecondary: true,
isInternal: true,
},
{
title: 'Self-Hosted',
@@ -168,7 +170,8 @@ const IMPLEMENTATIONS = [
image: '/images/data2.svg',
linkText: 'Learn More',
link: 'https://github.com/andrerfneves/lightning-address/blob/master/DIY.md',
isSecondary: true
isSecondary: true,
isInternal: false,
},
];
@@ -189,7 +192,7 @@ export const Paths = () => (
<PathsCardDescription>
{benefit.description}
</PathsCardDescription>
<PathsCardButton target="_blank" href={benefit.link} isSecondary={benefit.isSecondary}>
<PathsCardButton target={benefit.isInternal ? '' : '_blank'} href={benefit.link} isSecondary={benefit.isSecondary}>
{benefit.linkText}
</PathsCardButton>
</PathsCard>