donate button v3 that only supports crypto #141

osdiab · 2021-04-17T15:19:32Z

Also implements compiled CSS in JS for styles to replace CSS modules + the style injector (#77) , and starts on #73 with a fresh options format that matches our terminology and is simpler. Also removes the docs/dist/dist folder, which i'm pretty certain is unused.

vercel · 2021-04-17T15:20:00Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/everydotorg/donate-button/CkLeQ8ZgaacjoccHwX8NGY1cw5ap
✅ Preview: https://donate-button-git-osdiab-donate-button-3-everydotorg.vercel.app

osdiab · 2021-04-17T15:31:40Z

packages/donate-button-beta/.babelrc

+        ]
+      }
+    ],
+    "@babel/preset-typescript"


mostly teh same as donate-button, but adds this line.

osdiab · 2021-04-17T15:32:47Z

packages/donate-button-beta/package.json

+    "xo": "^0.37.1"
+  },
+  "dependencies": {
+    "@compiled/react": "^0.6.10",


This is the new thing

osdiab · 2021-04-17T15:33:12Z

packages/donate-button-beta/preact.config.js

+		const {options: babelOptions, ...babelLoaderRule} = config.module.rules[0]; // Get the babel rule and options
+		config.module.rules[0] = {
+			...babelLoaderRule,
+			loader: undefined, // Disable the predefined babel-loader on the rule
+			use: [
+				{loader: 'babel-loader', options: babelOptions},
+				{loader: '@compiled/webpack-loader', options: {babelOptions}}
+			]
+		};


This block adds webpack support for compiled CSS in JS; the rest is same as donate-button

osdiab · 2021-04-17T15:33:43Z

packages/donate-button-beta/src/components/EmbedButton/index.tsx

+import constructEveryUrl from 'src/helpers/construct-every-url';
+import {EmbedButtonOptions} from 'src/helpers/options-types';
+
+const buttonCss = css`


osdiab · 2021-04-17T15:34:05Z

packages/donate-button-beta/src/declaration.d.ts

+declare module 'preact' {
+	interface Attributes {
+		css?: CSSProps;
+	}
+}


This is how we get the CSS prop to work.

osdiab · 2021-04-17T15:35:13Z

packages/donate-button-beta/src/helpers/options-types.ts

+export interface DonateButtonOptions {
+	/**
+	 * Identifier for nonprofit on Every.org; you can get it by going to the
+	 * nonprofit's profile on Every.org and looking at its URL
+	 *
+	 * @example
+	 * If the URL is https://www.every.org/givedirectly, the slug is givedirectly
+	 */
+	readonly nonprofitSlug: string;
+	/**
+	 * Whether or not to render Crypto donation flow instead of the normal
+	 * donation flow
+	 *
+	 * @default false
+	 * For now, only crypto is supported
+	 */
+	readonly crypto: boolean; // For now only this is supported
+}


This is nowhere near supporting the kinds of stuff we have in donate-button, but I wanted to keep it as minimal as possible since that one is huge. We can expand over time.

Also I cut out all the modal stuff, since for now the pressing concern is to get crypto donation embeds working, and this is the quickest way there.

osdiab · 2021-04-17T15:35:43Z

packages/donate-button-beta/src/helpers/options-types.ts

+	readonly crypto: boolean; // For now only this is supported
+}
+
+export interface EmbedButtonOptions extends DonateButtonOptions {


Renamed it from GenericButton since it's not a very descriptive name.

osdiab · 2021-04-17T15:36:11Z

packages/donate-button-beta/src/index.tsx

@@ -0,0 +1,40 @@
+import {render} from 'preact';


I just moved the logic for making the donate button into this file since it's so short.

osdiab · 2021-04-17T15:36:29Z

packages/donate-button-beta/src/index.tsx

+	everyDotOrgDonateButton?: GlobalExport;
+};
+
+window.everyDotOrgDonateButton = {


This is renamed since we don't call it everyMonth anymore.

osdiab · 2021-04-17T15:43:12Z

packages/donate-button-beta/src/public/index.html

+      window.addEventListener("load", function() {
+        everyDotOrgDonateButton.createButton({
+          selector: "#button-root",
+          nonprofitSlug: "everydotorg",
+          crypto: true
+        });
+      })


Very basic example of what an embed would look like; the ultimate embed script would be slightly more than this:

<div id="edo-donate-btn" /> <script src="https://assets.every.org/dist/donate-button/0.3/index.js" class="edo-donate-btn-js"></script> <script> (() => { const edoScript = document.querySelector(".edo-donate-btn-js") if (!edoScript) return; edoScript.onload = () => { everyDotOrgDonateButton.createButton({ selector: "#edo-donate-btn", nonprofitSlug: "everydotorg", crypto: true }); }) )(); </script>

LGTM! I think this is fine for getting something up and running quickly, but I also think we can learn from TikTok here is what they do

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@kyliejenner/video/6951976455400099077" data-video-id="6951976455400099077" style="max-width: 605px; min-width: 325px" > <section> <a target="_blank" title="@kyliejenner" href="https://www.tiktok.com/@kyliejenner" >@kyliejenner</a > <p>time goes too fast 😥😥🤍</p> <a target="_blank" title="♬ original sound - sam aldridge" href="https://www.tiktok.com/music/original-sound-6750691377606216453" >♬ original sound - sam aldridge</a > </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

Several nice things about this:

Script is async

Without Javascript, instantly has multiple links for PageRank - the video, the person, the music. In our case, would be great to instantly have href to the nonprofit's main page (not their donate crypto page) for pagerank purposes.

Devs instantly know how to adjust the width without reading any documentation

Metadata included entirely via html, makes it look a bit cleaner and more obvious what to if you have multiple embeds

If client does not have Javascript, at least they can still get to the persons profile. In our case, would be nice if they can still get to the /donate/crypto page (though admittedly that page would then fail, but perhaps someone would be willing to explicitly enable javascript for www.every.org and not less well-known domains)

Yeah the way I wrote the code the script can be async, I just forgot. Re the richer content I'll change it to by default not take a selector for where to make the element but attach a handler directly to a donate crypto link. Don't think we can add a whole lot more metadata though since this is supposed to be a single button, not a whole tweet or Tiktok post or something.

I made it so that the embed can be done like this:

<div class="edo-donate-btn"> <a href="https://www.every.org/givedirectly/donate/crypto">Donate Crypto</a> </div> <script async src="https://assets.every.org/dist/donate-button/0.3/index.js" class="edo-donate-btn-js"></script> <script> document.querySelector(".edo-donate-btn-js").onload = function() { everyDotOrgDonateButton.initButtons(); }; </script>

It can be copied into the page multiple times without causing issues. We can also make the text in the link to be replaced with the button be anything - so if we want it to be Donate Crypto for GiveDirectly or something that works too (it will be replaced with the generic "Donate Crypto" as soon as the script runs; this behavior can be changed if we want)

This new initButtons() function just looks for all elements with the class edo-donate-btn, and then looks for an a element inside it; parses the href value to extract the options to throw into the createButton() function from before, replacing the original contents of the div with the newly created button. In the future it can be made to not just read the href field but also anything else like data- attributes if we want to add more configuration in the future.

The explicit version above still works, though, for programmers who want more control.

We can trim down the copy paste code to remove needing to explicitly call initButtons() as well by automatically calling initButtons() in the downloaded script - im not in love with the automatic side effects, but it is simplest. that said if people just copy-paste this it's not that bad as is, and gives people an idea how this library can be used more flexibly, not just a magic script.

styling will not be as direct as just styling the underlying elemetns though, since they're in a Shadow DOM to provide encapsulation from the parent page's JS/CSS context - but it's not any worse than tik tok or twitter, who load their stuff in iframes, which prevent meddling even more. But we can allow for width styling by setting the width of the parent div, and the createButton() function already allows for a great deal of customization, including changing the text and colors and border radius.

markulrich

What is the bundle size for someone who wants to embed donate button on their site?

markulrich · 2021-04-18T15:30:35Z

packages/donate-button-beta/src/components/EmbedButton/index.tsx

+				</svg>
+			)}
+			<span css={verticalCenterTextCss}>
+				{label ? label : `Donate${donateOptions.crypto ? ' Crypto' : ''}`}


What text will this use? Ideally we want our Basis Grotesque - I'm guessing much faster for users to give them a single "[swirl] Donate Crypto" image than to download the entire Basis Grotesque font

This uses Basis Grotesque, and I just edited it so that the fallback fonts are used first before Basis is loaded, so users will see text immediately.

osdiab · 2021-04-19T08:43:31Z

I'll check but it should be less than like 5-6 kb gzipped, preact is tiny and compiled CSS in JS compiles any runtime component out of the resulting bundle.

osdiab · 2021-04-19T13:59:58Z

I replaced Compiled CSS in JS with cxs because I figured that extracing separate CSS files at all adds complexity to the build system, proper usage of the library, and doesn't really provide much value so long as the button doesn't get crazy complicated style-wise (it shouldn't). cxs is a dead simple and extremely tiny CSS in JS library (< .7KB), no compile phase and runs hella fast.

osdiab · 2021-04-19T14:00:29Z

After replacing with cxs as expected gzipped full bundle size is 6kb - tiny. But it's also really basic for now so i expect this to grow as this beta version supports the full donate modal experience (though can code-split it to make things remain tiny)

osdiab · 2021-04-19T14:01:56Z

getting late for me so i'll wrap testing this up and making the embed code for the main every.org site tomorrow

osdiab · 2021-04-19T14:10:58Z

me refreshing with no cache, showing the font transition on webfont load

Screen.Recording.2021-04-19.at.23.10.24.mov

osdiab · 2021-04-19T14:21:46Z

cc @martinbianchi that i've been doing this - we wanted to get a simple donate crypto button out, trying to leverage the existing infra we have for donate button and didn't want the crypto stuff to be separate from the rest of donate button codebase. I also wanted to tackle a number of tech debt issues while doing it - so switched out the CSS stuff to cxs, starting fresh with the options format to simplify it, and for now removed everything that isn't necessary for the donate crypto button.

if this turns out to be not a great approach - we can always hop over 0.3 and go straight to 0.4 :)

this can serve as a base for the new designs for the donate button once we're ready to implement them.

martinbianchi · 2021-05-11T11:30:41Z

I've just seen this! Amazing work @osdiab. I'll start with the new widget from here. Thanks!

osdiab added 7 commits April 17, 2021 15:52

init donate-button-beta as copy of donate-button repo with new version

e884f08

build donate button and beta on build

f25bdd8

remove dist/dist docs subfolder, hasnt been edited for a while

25e1ab0

add compiled CSS in JS, remove unused packages

faa3d47

remove unused micrbundle package

fd8ad4a

make webpack work with compiled webpack loader

0bed5dd

include preset typescript in babelrc

b0c88eb

vercel bot deployed to Preview April 17, 2021 15:20 View deployment

osdiab force-pushed the osdiab/donate-button-3 branch from b2e18bb to 2a6eadc Compare April 17, 2021 15:23

vercel bot deployed to Preview April 17, 2021 15:23 View deployment

remove everything not needed for crypto button, implement crypto button

41200d8

osdiab force-pushed the osdiab/donate-button-3 branch from 2a6eadc to 41200d8 Compare April 17, 2021 15:28

vercel bot deployed to Preview April 17, 2021 15:28 View deployment

osdiab commented Apr 17, 2021

View reviewed changes

What are these dump files? removed

b163bf7

vercel bot deployed to Preview April 17, 2021 15:32 View deployment

osdiab commented Apr 17, 2021

View reviewed changes

markulrich approved these changes Apr 18, 2021

View reviewed changes

markulrich reviewed Apr 18, 2021

View reviewed changes

init buttons export

40c94b2

osdiab added 4 commits April 19, 2021 22:50

remove compiled, use cxs

de9c906

remove compiled css in js webpack config

ac7fcf2

updtae code to use cxs

61e3d62

show fallback font before basis grotesque

52be984

vercel bot deployed to Preview April 19, 2021 13:52 View deployment

shorter class name

d985dba

vercel bot had a problem deploying to Preview April 19, 2021 14:05 Failure

osdiab requested a review from martinbianchi April 19, 2021 14:17

docs

ab75b94

vercel bot deployed to Preview April 20, 2021 01:34 View deployment

osdiab added 2 commits April 20, 2021 10:35

remove adler types

a31f1c5

rename embed button dir

f035228

vercel bot deployed to Preview April 20, 2021 01:36 View deployment

hover background color change

8cf7f52

vercel bot requested a deployment to Preview April 20, 2021 01:38 Pending

vercel bot deployed to Preview April 20, 2021 01:38 View deployment

osdiab added 2 commits April 20, 2021 10:40

edoBtn css prefix

bd5d9e8

update docs

bf39b2f

vercel bot deployed to Preview April 20, 2021 13:41 View deployment

use workspaces commands to simplify tasks

1805e38

vercel bot deployed to Preview April 20, 2021 13:46 View deployment

osdiab changed the title ~~WIP: donate button v3 that only supports crypto~~ donate button v3 that only supports crypto Apr 20, 2021

osdiab merged commit 239c05f into main Apr 20, 2021

osdiab deleted the osdiab/donate-button-3 branch April 20, 2021 13:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

donate button v3 that only supports crypto #141

donate button v3 that only supports crypto #141

osdiab commented Apr 17, 2021 •

edited

Loading

vercel bot commented Apr 17, 2021 •

edited

Loading

osdiab Apr 17, 2021

osdiab Apr 17, 2021

osdiab Apr 17, 2021 •

edited

Loading

osdiab Apr 17, 2021

osdiab Apr 17, 2021

osdiab Apr 17, 2021

osdiab Apr 17, 2021

osdiab Apr 17, 2021

osdiab Apr 17, 2021

osdiab Apr 17, 2021 •

edited

Loading

markulrich Apr 18, 2021

osdiab Apr 19, 2021

osdiab Apr 19, 2021 •

edited

Loading

osdiab Apr 19, 2021 •

edited

Loading

osdiab Apr 19, 2021 •

edited

Loading

markulrich left a comment

markulrich Apr 18, 2021

osdiab Apr 19, 2021

osdiab commented Apr 19, 2021

osdiab commented Apr 19, 2021

osdiab commented Apr 19, 2021 •

edited

Loading

osdiab commented Apr 19, 2021 •

edited

Loading

osdiab commented Apr 19, 2021 •

edited

Loading

osdiab commented Apr 19, 2021

martinbianchi commented May 11, 2021

donate button v3 that only supports crypto #141

donate button v3 that only supports crypto #141

Conversation

osdiab commented Apr 17, 2021 • edited Loading

vercel bot commented Apr 17, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

osdiab Apr 17, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

osdiab Apr 17, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

osdiab Apr 19, 2021 • edited Loading

Choose a reason for hiding this comment

osdiab Apr 19, 2021 • edited Loading

Choose a reason for hiding this comment

osdiab Apr 19, 2021 • edited Loading

Choose a reason for hiding this comment

markulrich left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

osdiab commented Apr 19, 2021

osdiab commented Apr 19, 2021

osdiab commented Apr 19, 2021 • edited Loading

osdiab commented Apr 19, 2021 • edited Loading

osdiab commented Apr 19, 2021 • edited Loading

osdiab commented Apr 19, 2021

martinbianchi commented May 11, 2021

osdiab commented Apr 17, 2021 •

edited

Loading

vercel bot commented Apr 17, 2021 •

edited

Loading

osdiab Apr 17, 2021 •

edited

Loading

osdiab Apr 17, 2021 •

edited

Loading

osdiab Apr 19, 2021 •

edited

Loading

osdiab Apr 19, 2021 •

edited

Loading

osdiab Apr 19, 2021 •

edited

Loading

osdiab commented Apr 19, 2021 •

edited

Loading

osdiab commented Apr 19, 2021 •

edited

Loading

osdiab commented Apr 19, 2021 •

edited

Loading