diff --git a/Gemfile.lock b/Gemfile.lock index 2df4ac5b4..21889aab7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -43,9 +43,6 @@ GEM image_optim_pack (0.7.0.20210206) fspath (>= 2.1, < 4) image_optim (~> 0.19) - image_optim_pack (0.7.0.20210206-x86_64-linux) - fspath (>= 2.1, < 4) - image_optim (~> 0.19) image_size (2.1.0) in_threads (1.5.4) jekyll (4.1.1) @@ -88,8 +85,6 @@ GEM nokogiri (1.11.2) mini_portile2 (~> 2.5.0) racc (~> 1.4) - nokogiri (1.11.2-x86_64-linux) - racc (~> 1.4) nokogumbo (2.0.5) nokogiri (~> 1.8, >= 1.8.4) parallel (1.20.1) @@ -102,7 +97,7 @@ GEM rb-fsevent (0.10.4) rb-inotify (0.10.1) ffi (~> 1.0) - rexml (3.2.5) + rexml (3.2.4) rouge (3.26.0) safe_yaml (1.0.5) sassc (2.4.0) @@ -117,7 +112,6 @@ GEM PLATFORMS ruby - x86_64-linux DEPENDENCIES html-proofer diff --git a/README.md b/README.md index 109b5ab6a..2f3e6e5f4 100644 --- a/README.md +++ b/README.md @@ -128,10 +128,3 @@ baseurl: "bitcoin-design-guide" ``` To test your HTML for errors, run the rake script via `rake test`. - -**Docker** -You can also run site locally with Docker. - -1. [Install docker](https://www.docker.com/products/docker-desktop) -2. `cd` into a directory, for example `cd Documents/Guide` -3. Run `docker-compose up` (you may need to wait for 5-10 minutes) diff --git a/_compress_images_cache.yml b/_compress_images_cache.yml index 60ddcdfa1..f09a45f30 100644 --- a/_compress_images_cache.yml +++ b/_compress_images_cache.yml @@ -655,3 +655,28 @@ assets/images/guide/getting-started/usage-life-cycle/dropoff@2x.png: dropoff@2x. assets/images/guide/payments/send/bitcoin-payments@2x.jpg: bitcoin-payments@2x.jpg assets/images/guide/payments/send/bitcoin-payments-mobile@2x.jpg: bitcoin-payments-mobile@2x.jpg assets/images/guide/payments/send/bitcoin-payments-social.jpg: bitcoin-payments-social.jpg +assets/images/guide/private-key-management/backups/paperbackup@2x.png: paperbackup@2x.png +assets/images/guide/private-key-management/backups/backups-mobile.jpg: backups-mobile.jpg +assets/images/guide/private-key-management/backups/backup-table.png: backup-table.png +assets/images/guide/private-key-management/backups/metalbackup.png: metalbackup.png +assets/images/guide/private-key-management/backups/backups.jpg: backups.jpg +assets/images/guide/private-key-management/backups/offline-discoveryprotection.png: offline-discoveryprotection.png +assets/images/guide/private-key-management/backups/metalbackup@2x.png: metalbackup@2x.png +assets/images/guide/private-key-management/backups/page-backups.jpg: page-backups.jpg +assets/images/guide/private-key-management/backups/backups@2x.jpg: backups@2x.jpg +assets/images/guide/private-key-management/backups/paperbackup.png: paperbackup.png +assets/images/guide/private-key-management/backups/offline-discoveryprotection@2x.png: offline-discoveryprotection@2x.png +assets/images/guide/private-key-management/backups/multi-continental@2x.png: multi-continental@2x.png +assets/images/guide/private-key-management/backups/backups-mobile@2x.jpg: backups-mobile@2x.jpg +assets/images/guide/private-key-management/backups/multiple-discoveryprotection.png: multiple-discoveryprotection.png +assets/images/guide/private-key-management/backups/cloudbackup@2x.png: cloudbackup@2x.png +assets/images/guide/private-key-management/backups/multi-continental.png: multi-continental.png +assets/images/guide/private-key-management/backups/backup-table@2x.png: backup-table@2x.png +assets/images/guide/private-key-management/backups/multiple-discoveryprotection@2x.png: multiple-discoveryprotection@2x.png +assets/images/guide/private-key-management/backups/cloudbackup.png: cloudbackup.png +assets/images/guide/getting-started/common-user-flows/sending-ui-complexity.jpg: sending-ui-complexity.jpg +assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding@2x.jpg: blockchain-com-onboarding@2x.jpg +assets/images/guide/getting-started/common-user-flows/receiving-ui-example.jpg: receiving-ui-example.jpg +assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding.jpg: blockchain-com-onboarding.jpg +assets/images/guide/getting-started/common-user-flows/receiving-ui-example@2x.jpg: receiving-ui-example@2x.jpg +assets/images/guide/getting-started/common-user-flows/sending-ui-complexity@2x.jpg: sending-ui-complexity@2x.jpg diff --git a/_config.yml b/_config.yml index 6638428af..c07513589 100644 --- a/_config.yml +++ b/_config.yml @@ -22,7 +22,7 @@ title: Bitcoin Design email: no-reply@bitcoindesign.org description: "Bitcoin Design aims to be a free open-source community resource that will help designers and developers working on bitcoin-products to create better experiences, faster." # baseurl: "Guide" # Only for gh-pages. Comment this line to run the website on localhost:4000 -url: "https://bitcoin.design" # the base hostname & protocol for your site, e.g. http://example.com +url: "" # the base hostname & protocol for your site, e.g. http://example.com twitter_username: jekyllrb github_username: jekyll diff --git a/_includes/dl/close.html b/_includes/dl/close.html deleted file mode 100644 index a74db2857..000000000 --- a/_includes/dl/close.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_includes/dl/item-close.html b/_includes/dl/item-close.html deleted file mode 100644 index 0fa1d01be..000000000 --- a/_includes/dl/item-close.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_includes/dl/item-middle.html b/_includes/dl/item-middle.html deleted file mode 100644 index c2f2d458d..000000000 --- a/_includes/dl/item-middle.html +++ /dev/null @@ -1,5 +0,0 @@ - -
- -
-
diff --git a/_includes/dl/item-open.html b/_includes/dl/item-open.html deleted file mode 100644 index e334459f6..000000000 --- a/_includes/dl/item-open.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/_includes/dl/item.html b/_includes/dl/item.html deleted file mode 100644 index 57c93a220..000000000 --- a/_includes/dl/item.html +++ /dev/null @@ -1,5 +0,0 @@ -
{{ include.term | default: "term" }}
-
- -
-
{{ include.details | default: "details" }}
diff --git a/_includes/dl/open.html b/_includes/dl/open.html deleted file mode 100644 index d62f17fb2..000000000 --- a/_includes/dl/open.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/_includes/do/close.html b/_includes/do/close.html deleted file mode 100644 index 3ed13b923..000000000 --- a/_includes/do/close.html +++ /dev/null @@ -1,2 +0,0 @@ -{% include do/single-close.html %} - diff --git a/_includes/do/middle.html b/_includes/do/middle.html deleted file mode 100644 index 8e6f84a21..000000000 --- a/_includes/do/middle.html +++ /dev/null @@ -1,2 +0,0 @@ -{% include do/single-close.html %} -{% include do/single-open.html label=include.label icon=include.icon color=include.color %} diff --git a/_includes/do/open.html b/_includes/do/open.html deleted file mode 100644 index c1f178f83..000000000 --- a/_includes/do/open.html +++ /dev/null @@ -1,2 +0,0 @@ -
- {% include do/single-open.html label=include.label icon=include.icon color=include.color %} diff --git a/_includes/do/single-close.html b/_includes/do/single-close.html deleted file mode 100644 index e04ad1b9c..000000000 --- a/_includes/do/single-close.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/_includes/do/single-open.html b/_includes/do/single-open.html deleted file mode 100644 index ee3a59864..000000000 --- a/_includes/do/single-open.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
- -
-
{{ include.label }}
-
diff --git a/_includes/fact/close.html b/_includes/fact-close.html similarity index 100% rename from _includes/fact/close.html rename to _includes/fact-close.html diff --git a/_includes/fact-cons.html b/_includes/fact-cons.html new file mode 100644 index 000000000..f3582e351 --- /dev/null +++ b/_includes/fact-cons.html @@ -0,0 +1 @@ +{% include fact-open.html color="red" label="Cons" icon="minus" %} \ No newline at end of file diff --git a/_includes/fact/open.html b/_includes/fact-open.html similarity index 100% rename from _includes/fact/open.html rename to _includes/fact-open.html diff --git a/_includes/fact-products.html b/_includes/fact-products.html new file mode 100644 index 000000000..00b06c450 --- /dev/null +++ b/_includes/fact-products.html @@ -0,0 +1 @@ +{% include fact-open.html color="blue" label="Products" icon="rectangle" %} \ No newline at end of file diff --git a/_includes/fact-pros.html b/_includes/fact-pros.html new file mode 100644 index 000000000..9705d4192 --- /dev/null +++ b/_includes/fact-pros.html @@ -0,0 +1 @@ +{% include fact-open.html color="green" label="Pros" icon="plus" %} \ No newline at end of file diff --git a/_includes/fact-variations.html b/_includes/fact-variations.html new file mode 100644 index 000000000..18f1424bb --- /dev/null +++ b/_includes/fact-variations.html @@ -0,0 +1 @@ +{% include fact-open.html color="blue" label="Variations" icon="triangle" %} \ No newline at end of file diff --git a/_includes/fact-when-not-to-use.html b/_includes/fact-when-not-to-use.html new file mode 100644 index 000000000..f33fd5092 --- /dev/null +++ b/_includes/fact-when-not-to-use.html @@ -0,0 +1 @@ +{% include fact-open.html color="red" label="When not to use" icon="forbid" %} \ No newline at end of file diff --git a/_includes/fact-when-to-use.html b/_includes/fact-when-to-use.html new file mode 100644 index 000000000..b7428880f --- /dev/null +++ b/_includes/fact-when-to-use.html @@ -0,0 +1 @@ +{% include fact-open.html color="green" label="When to use" icon="check" %} \ No newline at end of file diff --git a/_includes/fact/cons.html b/_includes/fact/cons.html deleted file mode 100644 index 992089a3b..000000000 --- a/_includes/fact/cons.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="red" label="Cons" icon="minus" %} diff --git a/_includes/fact/donts.html b/_includes/fact/donts.html deleted file mode 100644 index d22c5433a..000000000 --- a/_includes/fact/donts.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="red" label="Don'ts" icon="forbid" %} diff --git a/_includes/fact/dos.html b/_includes/fact/dos.html deleted file mode 100644 index 31fb3e505..000000000 --- a/_includes/fact/dos.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="green" label="Do's" icon="check" %} diff --git a/_includes/fact/products.html b/_includes/fact/products.html deleted file mode 100644 index bdfb88d88..000000000 --- a/_includes/fact/products.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="blue" label="Products" icon="rectangle" %} diff --git a/_includes/fact/pros.html b/_includes/fact/pros.html deleted file mode 100644 index ef6b496ee..000000000 --- a/_includes/fact/pros.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="green" label="Pros" icon="plus" %} diff --git a/_includes/fact/variations.html b/_includes/fact/variations.html deleted file mode 100644 index 7c31101db..000000000 --- a/_includes/fact/variations.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="blue" label="Variations" icon="triangle" %} diff --git a/_includes/fact/when-not-to-use.html b/_includes/fact/when-not-to-use.html deleted file mode 100644 index 4545d79ee..000000000 --- a/_includes/fact/when-not-to-use.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="red" label="When not to use" icon="forbid" %} diff --git a/_includes/fact/when-to-use.html b/_includes/fact/when-to-use.html deleted file mode 100644 index 35dfbd667..000000000 --- a/_includes/fact/when-to-use.html +++ /dev/null @@ -1 +0,0 @@ -{% include fact/open.html color="green" label="When to use" icon="check" %} diff --git a/_includes/head.html b/_includes/head.html index 195b7626a..79054e2bf 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -14,7 +14,7 @@ diff --git a/_includes/header.html b/_includes/header.html index 6318f485c..19dc2961f 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -21,7 +21,7 @@ {{ my_page.title | escape }} {%- if my_page.title contains 'Guide' -%} - {% include secondary-nav.html id="top" %} + {% include secondary-nav.html %} {% endif %} {%- endif -%} {% endif %} diff --git a/_includes/home-banner.html b/_includes/home-banner.html index b1fa4f76e..7749f2d89 100644 --- a/_includes/home-banner.html +++ b/_includes/home-banner.html @@ -19,7 +19,7 @@

-

Header design by Author

+

Header design by Author

Submit your own diff --git a/_includes/image.html b/_includes/image.html index a6e627762..e7d67a9f3 100644 --- a/_includes/image.html +++ b/_includes/image.html @@ -1,13 +1,13 @@ - {% if include.link-url %}{% endif %} + {{ include.alt-text }} - {% if include.link-url %}{% endif %} + {% if include.caption %}
{{ include.caption | markdownify }}
{% endif %} - + \ No newline at end of file diff --git a/_includes/tip/close.html b/_includes/rec-close.html similarity index 100% rename from _includes/tip/close.html rename to _includes/rec-close.html diff --git a/_includes/rec-open.html b/_includes/rec-open.html new file mode 100644 index 000000000..3ad5297bf --- /dev/null +++ b/_includes/rec-open.html @@ -0,0 +1,2 @@ +
+
Recommendation
\ No newline at end of file diff --git a/_includes/secondary-nav.html b/_includes/secondary-nav.html index 6d31fb883..db7705dca 100644 --- a/_includes/secondary-nav.html +++ b/_includes/secondary-nav.html @@ -23,31 +23,31 @@
  • {%- if page.parent == node.title or page.grand_parent == node.title -%} - {%- assign first_level_url = node.url | relative_url -%} + {%- assign first_level_url = node.url | absolute_url -%} {%- endif -%} {%- if node.has_children -%} {%- endif -%} - {%- if node.secondary_nav_title -%}{{ node.secondary_nav_title }}{%- else -%}{{ node.title }}{%- endif -%} + {%- if node.secondary_nav_title -%}{{ node.secondary_nav_title }}{%- else -%}{{ node.title }}{%- endif -%} {%- if node.has_children -%} {%- assign children_list = pages_list | where: "parent", node.title -%} -
      +
    • \ No newline at end of file diff --git a/_includes/tip-open.html b/_includes/tip-open.html new file mode 100644 index 000000000..b38a9d323 --- /dev/null +++ b/_includes/tip-open.html @@ -0,0 +1,2 @@ +
    +
    Tip
    \ No newline at end of file diff --git a/_includes/tip/open.html b/_includes/tip/open.html deleted file mode 100644 index 89d93544d..000000000 --- a/_includes/tip/open.html +++ /dev/null @@ -1,3 +0,0 @@ - -
    -
    {{ include.label | default: "Tip" }}
    diff --git a/_includes/tip/recommendation.html b/_includes/tip/recommendation.html deleted file mode 100644 index f9cffecfe..000000000 --- a/_includes/tip/recommendation.html +++ /dev/null @@ -1 +0,0 @@ -{% include tip/open.html color="orange" label="Recommendation" icon="star" %} diff --git a/_includes/tip/tip.html b/_includes/tip/tip.html deleted file mode 100644 index fa6d8a18d..000000000 --- a/_includes/tip/tip.html +++ /dev/null @@ -1 +0,0 @@ -{% include tip/open.html color="blue" label="Tip" icon="info" %} diff --git a/_layouts/default.html b/_layouts/default.html index 6f6488e9c..9fff7ddb7 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -28,7 +28,7 @@

    {%- if page.path contains 'guide' -%}
    {%- endif -%} diff --git a/_layouts/guide.html b/_layouts/guide.html index a15d6cec4..3cb48bdc6 100644 --- a/_layouts/guide.html +++ b/_layouts/guide.html @@ -3,5 +3,5 @@ ---
    {% capture prepared_content %}{{ content | replace: ' diff --git a/_layouts/home.html b/_layouts/home.html index b302ef2e2..eb6d21b4a 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,11 +1,11 @@ @@ -15,8 +15,8 @@ {%- include svgs.html -%} {%- include header.html -%} - -
    + +
    {%- include home-banner.html -%}
    diff --git a/_sass/minima/_article.scss b/_sass/minima/_article.scss index 14755a882..18a352619 100644 --- a/_sass/minima/_article.scss +++ b/_sass/minima/_article.scss @@ -5,26 +5,9 @@ article.guide { margin-top: 0; } - figure { - &.-background { - padding: $spacing-unit/3*2; - background-color: #f8f8f8; - display: flex; - flex-direction: column; - align-items: center; - } - - &.-shadow { - img { - filter: drop-shadow(0px 5px 15px rgba(#000000, 0.07)); - border-radius: 10px; - } - } - } - a.button { display: inline-block; - padding: 0 $spacing-unit/3*2; + padding: 0 20px; border-radius: 3px; color: white; line-height: 43px; @@ -48,10 +31,133 @@ article.guide { } } + .tip, + .recommendation { + margin-top: $spacing-unit; + padding: 25px 25px 20px 25px; + box-sizing: border-box; + + h6 { + margin: 0; + padding: 0; + font-size: 22px; + font-weight: 500; + + &:before { + display: none; + } + + svg { + display: inline-block; + margin-right: 10px; + background-color: $blue; + border-radius: 3px; + width: 24px; + height: 24px; + color: white; + vertical-align: middle; + transform: translateY(-2px); + } + } + + p { + margin: 10px 0 0 0; + } + } + + .tip { + background-color: rgba($blue, 0.1); + + h6 { + svg { + background-color: $blue; + } + } + } + + .recommendation { + background-color: rgba($bitcoin-yellow, 0.1); + + h6 { + svg { + background-color: $bitcoin-yellow; + } + } + } + + .fact { + margin-top: $spacing-unit; + display: flex; + border: 1px solid #DEDEDE; + align-items: stretch; + + .icon { + padding: 10px 20px; + border-right: 1px solid #DEDEDE; + flex-grow: 0; + display: flex; + align-items: center; + + &.-green { + svg { + background-color: $green; + } + } + + &.-red { + svg { + background-color: $red; + } + } + + svg { + display: inline-block; + background-color: $blue; + border-radius: 3px; + width: 24px; + height: 24px; + color: white; + vertical-align: middle; + transform: translateY(-2px); + } + } + + .copy { + padding: 20px; + flex-grow: 1; + + h6 { + margin: 0; + padding: 0; + font-size: 18px; + font-weight: 500; + + &:before { + display: none; + } + } + + ul, ol { + margin-left: 0; + + &:first-child { + margin-top: 5px; + } + } + + p { + margin: 5px 0 0 0; + } + } + + & + .fact { + margin-top: 0; + border-top: 0; + } + } + a.video-link, a.prototype-link { - margin-top: $spacing-unit; - display: block; position: relative; > svg { @@ -80,8 +186,8 @@ article.guide { box-shadow: 0 5px 15px -3px rgba(black, 0.25); > svg { - width: $spacing-unit; - height: $spacing-unit; + width: 30px; + height: 30px; margin-right: 3px; } } @@ -125,8 +231,8 @@ article.guide { } @include media-query(medium-down) { - padding-left: $spacing-unit/2; - padding-right: $spacing-unit/2; + padding-left: $spacing-unit / 2; + padding-right: $spacing-unit / 2; } @include media-query(large) { @@ -137,36 +243,22 @@ article.guide { & > .center { @include clearfix; - @include media-query(medium-down) { - > figure { - &:not(:first-child), - &.-float-left, - &.-float-right, - &.-float-left-mobile, - &.-float-right-mobile { - margin-top: $spacing-unit/5; - } - } - } - - @include media-query(large) { - > figure { - margin-top: 0; - } + > figure { + margin-top: 0; } } & > .-float-left, & > .center .-float-left { float: left; - margin-right: $spacing-unit/2; + margin-right: 15px; max-width: 50%; } & > .-float-right, & > .center .-float-right { float: right; - margin-left: $spacing-unit/2; + margin-left: 15px; max-width: 50%; } @@ -174,38 +266,26 @@ article.guide { & > .-float-left-desktop, & > .center .-float-left-desktop { float: left; - margin-right: $spacing-unit/2; + margin-right: 15px; max-width: 50%; } & > .-float-right-desktop, & > .center .-float-right-desktop { float: right; - margin-left: $spacing-unit/2; + margin-left: 15px; max-width: 50%; } } - & > .-float-right, - & > .center .-float-right { - @include media-query(large) { - margin-top: 0; - margin-bottom: 0; - float: right; - margin-left: $spacing-unit; - } - } - - // Full width images stretch all the way, up to 1600px width. - & > .-full-width { display: flex; flex-direction: column; align-items: center; @include media-query(medium-down) { - margin-left: -$spacing-unit/2; - margin-right: -$spacing-unit/2; + margin-left: -$spacing-unit / 2; + margin-right: -$spacing-unit / 2; } @include media-query(large) { @@ -214,21 +294,6 @@ article.guide { } } - figure.-full-width { - figcaption { - margin-left: $spacing-unit/2; - margin-right: $spacing-unit/2; - } - } - - // Width images can stretch beyond the regular content, but maintain padding left and right. - - & > .-wide { - display: flex; - flex-direction: column; - align-items: center; - } - & > iframe.-full-width { @include media-query(medium-down) { margin-left: 0; @@ -241,7 +306,7 @@ article.guide { } } - & > *:not(.-full-width, .-wide) { + & > *:not(.-full-width) { @include media-query(medium-down) { } @@ -253,8 +318,6 @@ article.guide { } } - // Other - li { margin-left: 18px; } @@ -276,14 +339,182 @@ article.guide { figure:not(.-float-left, .-float-right, :first-child), iframe { + margin-top: $spacing-unit; + margin-bottom: $spacing-unit; + @include media-query(medium-down) { - margin-top: $spacing-unit; - margin-bottom: $spacing-unit; + margin-top: $spacing-unit * 0.5; + margin-bottom: $spacing-unit * 0.5; } @include media-query(large) { - margin-top: $spacing-unit; - margin-bottom: $spacing-unit; + margin-top: $spacing-unit * 1; + margin-bottom: $spacing-unit * 1; + } + + } + + // & > .-float-left, + // & > .center .-float-left { + // @include media-query(large) { + // margin-top: $spacing-unit * 1; + // margin-bottom: $spacing-unit * 1; + // } + // } + + .image-gallery { + display: flex; + background-color: #f8f8f8; + justify-content: center; + max-width: none !important; + + figure { + img { + box-shadow: 0 20px 10px -8px rgba(black, 0.05); + border: 1px solid rgba(black, 0.1); + } + + margin-top: 0; + margin-bottom: 0; + float: left; + margin-right: 30px; + } + + @include media-query(small) { + flex-direction: column; + margin-left: -15px; + margin-right: -15px; + padding: 10px 15px; + } + + @include media-query(medium-up) { + margin-left: -30px; + margin-right: -30px; + padding: 30px 30px 15px 30px; + + figure { + & + figure { + margin-left: 40px; + } + } + } + } + + .image-slide-gallery { + margin-top: 30px; + margin-bottom: 30px; + background-color: #f8f8f8; + justify-content: left; + max-width: none !important; + display: flex; + overflow: hidden; + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + scroll-snap-type: x mandatory; + + figure { + flex-shrink: 0; + margin-top: 0; + margin-bottom: 0; + + img { + width: 100%; + height: auto; + } + + figcaption { + p { + margin-top: 0; + } + } + } + + &:before, + &:after { + display: block; + content: ''; + position: relative; + height: 20px; + flex-shrink: 0; + flex-grow: 1; + } + + @include media-query(small) { + padding: 30px 0; + + figure { + flex-basis: calc(100vw - 180px); + + & + figure { + margin-left: 30px; + } + } + + &:before, + &:after { + flex-basis: 30px; + } + } + + @include media-query(medium-down) { + margin-left: -15px; + margin-right: -15px; + } + + @include media-query(medium-up) { + padding: 30px 0 30px 0; + + figure { + & + figure { + margin-left: 30px; + } + } + + &:before, + &:after { + flex-basis: 30px; + } + } + + @include media-query(large) { + margin-left: -30px; + margin-right: -30px; + } + } + + & > .-float-right, + & > .center .-float-right { + @include media-query(large) { + margin-top: 0; + margin-bottom: 0; + float: right; + margin-left: 30px; + } + } +} + +.footnotes { + padding: 30px; + font-size: 0.8rem; + margin: 60px 0 0; + border: 1px solid rgba(var(--front), 0.05); + box-sizing: border-box; + background: #FDFDFD; + &::before { + content: "REFERENCES"; + display: block; + margin-bottom: 10px; + color: var(--frontHex); + letter-spacing: 1px; + } + ol { + margin: 0; + list-style-position: inside; + li { + margin-left: 0; + p { + display: inline; + } } } } diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index c63c5e253..161b51dab 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -55,12 +55,9 @@ ul, ol, dl, figure, hr { margin-top: $spacing-unit; - border: 1px solid rgba(var(--front), 0.1); + margin-bottom: $spacing-unit; + border: 1px solid rgba(var(--front), 0.05); border-width: 1px 0 0; - - & + p { - margin-top: $spacing-unit; - } } /** @@ -178,20 +175,13 @@ a { * Blockquotes */ blockquote { - background: #f8f8f8; - padding: 24px; - text-align: center; - border: none; - font-style: normal; - font-weight: 400; + color: $brand-color; + border-left: 4px solid $border-color-01; + padding-left: $spacing-unit / 2; + @include relative-font-size(1.125); + font-style: italic; box-sizing: border-box; - cite { - display: inline-block; - @include responsive('font-size', 16, 22); - font-style: normal; - } - > :last-child { margin-bottom: 0; } @@ -201,13 +191,6 @@ blockquote { } } -blockquote, -blockquote > p { - @include responsive('font-size', 22, 28); - line-height: 1.4; - color: #474747; -} - /** @@ -259,8 +242,8 @@ pre { max-width: calc(#{$content-width} - (#{$spacing-unit})); margin-right: auto; margin-left: auto; - // padding-right: $spacing-unit / 3 * 2; - // padding-left: $spacing-unit / 3 * 2; + padding-right: $spacing-unit / 3 * 2; + padding-left: $spacing-unit / 3 * 2; @include clearfix; @include media-query(large) { @@ -313,7 +296,6 @@ pre { * Tables */ table { - margin-top: $spacing-unit; margin-bottom: $spacing-unit; width: 100%; text-align: $table-text-align; @@ -353,4 +335,4 @@ ul.task-list { margin: 0 1rem 0 0; } } -} +} \ No newline at end of file diff --git a/_sass/minima/_home-banner.scss b/_sass/minima/_home-banner.scss index 45641fa31..98dd85b33 100644 --- a/_sass/minima/_home-banner.scss +++ b/_sass/minima/_home-banner.scss @@ -6,16 +6,6 @@ max-width: 1680px; margin-left: auto; margin-right: auto; - background-color: var(--banner-background-color); - background-image: var(--banner-background-path-mobile); - background-size: cover; - background-repeat: no-repeat; - background-position: center top; - transition: background-color 150ms $ease; - - @include retina() { - background-image: var(--banner-background-path-mobile-retina); - } .home-banner-copy-wrapper { background-color: var(--copy-background-color); @@ -88,15 +78,15 @@ .home-banner-image { width: 100%; padding-bottom: 100%; - background-color: var(--banner-image-color); - background-image: var(--banner-image-path-mobile); + background-color: var(--background-image-color); + background-image: var(--background-image-path-mobile); background-size: cover; background-repeat: no-repeat; - background-position: center center; + background-position: center center; transition: background-color 150ms $ease; @include retina() { - background-image: var(--banner-image-path-mobile-retina); + background-image: var(--background-image-path-mobile-retina); } } @@ -122,18 +112,12 @@ display: flex; flex-direction: row; align-items: stretch; - background-image: var(--banner-background-path); - background-position: center center; - - @include retina() { - background-image: var(--banner-background-path-retina); - } .home-banner-image { - background-image: var(--banner-image-path); + background-image: var(--background-image-path); @include retina() { - background-image: var(--banner-image-path-retina); + background-image: var(--background-image-path-retina); } } @@ -172,7 +156,6 @@ padding: 5px 15px; position: relative; z-index: 1; - box-sizing: border-box; .home-banner-info-wrapper { width: 100%; diff --git a/_sass/minima/_home-page.scss b/_sass/minima/_home-page.scss deleted file mode 100644 index aeb1533cf..000000000 --- a/_sass/minima/_home-page.scss +++ /dev/null @@ -1,13 +0,0 @@ -.home-page { - article { - padding-top: $spacing-unit; - } - - @include media-query(small) { - padding-bottom: $spacing-unit; - } - - @include media-query(medium-up) { - padding-bottom: $spacing-unit*2; - } -} diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss index 77648153a..017ff7ba3 100644 --- a/_sass/minima/_layout.scss +++ b/_sass/minima/_layout.scss @@ -5,7 +5,6 @@ .page-content { flex: 1 0 auto; - @include media-query(large) { > .page-content-wrapper { display: flex; @@ -13,7 +12,7 @@ & > .side-bar { flex-shrink: 0; - flex-basis: 380px; + flex-basis: 300px; } & > .main.sidebar { @@ -130,9 +129,9 @@ @include relative-font-size(0.8); @include media-query(medium-down) { - margin-top: $spacing-unit/2; - margin-left: $spacing-unit/2; - margin-right: $spacing-unit/2; + margin-top: $spacing-unit / 2; + margin-left: $spacing-unit / 2; + margin-right: $spacing-unit / 2; } @include media-query(large) { @@ -140,29 +139,18 @@ } } + /** * Posts */ .main { - &.sidebar { - @include media-query(small) { - padding-bottom: $spacing-unit*2; - } - - @include media-query(medium-up) { - padding-bottom: $spacing-unit * 6; - } + @include media-query(small) { + padding-bottom: $spacing-unit * 2; } - &:not(.sidebar) { - @include media-query(small) { - padding-bottom: $spacing-unit; - } - - @include media-query(medium-up) { - padding-bottom: $spacing-unit*3; - } + @include media-query(medium-up) { + padding-bottom: $spacing-unit * 6; } &:not(.-no-top-padding) { @@ -171,16 +159,14 @@ } @include media-query(medium-up) { - padding-top: $spacing-unit*4; + padding-top: $spacing-unit * 4; } } } .post-title, .post-content h1, -article.guide h1, -.post-content .h1, -article.guide .h1 { +article.guide h1 { @include relative-font-size(2.625); letter-spacing: -1px; line-height: 1.15; @@ -192,8 +178,7 @@ article.guide .h1 { .post-content, article.guide { - h1, - .h1 { + h1 { margin-top: $spacing-unit * 1; @include media-query(medium-up) { @@ -201,8 +186,7 @@ article.guide { } } - h2, h3, h4, h5, h6, - .h2, .h3, .h4, .h5, .h6 { + h2, h3, h4, h5, h6 { margin-top: 0; &::before { @@ -216,8 +200,7 @@ article.guide { } } - h2, h3, - .h2, .h3 { + h2, h3 { &::before { height: $spacing-unit * 1; } @@ -230,8 +213,7 @@ article.guide { } } - h4, h5, h6, - .h4, .h5, .h6 { + h4, h5, h6 { &::before { height: $spacing-unit * 1.5; margin-top: -$spacing-unit 1.5; @@ -244,7 +226,7 @@ article.guide { } } - h2, .h2 { + h2 { @include relative-font-size(1.75); @include media-query(large) { @@ -252,7 +234,7 @@ article.guide { } } - h3, .h3 { + h3 { @include relative-font-size(1.375); @include media-query(large) { @@ -260,15 +242,15 @@ article.guide { } } - h4, .h4 { + h4 { @include relative-font-size(1.25); } - h5, .h5 { + h5 { @include relative-font-size(1.125); } - h6, .h6 { + h6 { @include relative-font-size(1.0625); } } @@ -285,9 +267,7 @@ article.guide { float: left; margin: 5px 10px 5px 0; - &:last-of-type { - margin-right: 0 - } + &:last-of-type { margin-right: 0 } a { display: block; @@ -296,14 +276,12 @@ article.guide { &:hover { border-color: $border-color-02 } } } - li { a, div { min-width: 41px; text-align: center; box-sizing: border-box; } - div { display: block; padding: $spacing-unit / 4; diff --git a/_sass/minima/_nav-list.scss b/_sass/minima/_nav-list.scss index 102663de6..7ba007bc6 100644 --- a/_sass/minima/_nav-list.scss +++ b/_sass/minima/_nav-list.scss @@ -66,7 +66,6 @@ &:focus { border-width: 0; outline: none; - background-color: rgba($primary-color, 0.1); } &:hover { @@ -78,7 +77,7 @@ } & + .nav-list-link { - + } } diff --git a/_sass/minima/_side-bar.scss b/_sass/minima/_side-bar.scss index 1d4303631..cf82b6271 100644 --- a/_sass/minima/_side-bar.scss +++ b/_sass/minima/_side-bar.scss @@ -3,15 +3,11 @@ flex-wrap: nowrap; position: sticky; top: 60px; - width: 380px; + width: 300px; height: 100%; flex-direction: column; align-items: flex-end; padding: 30px 40px; - max-height: calc(100vh - 61px); - overflow: hidden; - overflow-y: scroll; - box-sizing: border-box; @include media-query(medium-down) { display: none; @@ -20,4 +16,4 @@ @include media-query(large) { width: 228px; } -} +} \ No newline at end of file diff --git a/_sass/minima/_site-footer.scss b/_sass/minima/_site-footer.scss index da190a464..fccd61f67 100644 --- a/_sass/minima/_site-footer.scss +++ b/_sass/minima/_site-footer.scss @@ -3,7 +3,7 @@ * Site footer */ .site-footer { - padding: $spacing-unit/2 $spacing-unit/2 $spacing-unit*2 $spacing-unit/2; + padding: 20px 20px $spacing-unit * 2 20px; .wrapper { display: flex; @@ -144,7 +144,7 @@ margin-right: auto; order: 1; } - + .edit-license { display: flex; border-right: 1px solid black; @@ -184,4 +184,4 @@ body.sidebar { padding-top: 30px; border-top: 1px solid rgba(var(--front), 0.1); } -} +} \ No newline at end of file diff --git a/_sass/minima/_variables.scss b/_sass/minima/_variables.scss index 8c49bea97..9855812ed 100644 --- a/_sass/minima/_variables.scss +++ b/_sass/minima/_variables.scss @@ -29,7 +29,7 @@ $huge_width: 1440px; -$yellow: #FFF75C; + $bitcoin-yellow: #F7931A; $blue: #6490E3; $green: #6FCF97; diff --git a/_sass/minima/article/_dl.scss b/_sass/minima/article/_dl.scss deleted file mode 100644 index 75382ebbc..000000000 --- a/_sass/minima/article/_dl.scss +++ /dev/null @@ -1,93 +0,0 @@ -article.guide { - dl { - display: flex; - flex-wrap: wrap; - align-items: stretch; - - dt, - dd { - display: flex; - padding: $spacing-unit/3*2 $spacing-unit; - background-color: rgba($blue, 0.1); - - p { - margin: 0; - } - - &.-green { - background-color: rgba($green, 0.1); - } - - &.-red { - background-color: rgba($red, 0.1); - } - - &.-blue { - background-color: rgba($blue, 0.1); - } - - &.-orange { - background-color: rgba($bitcoin-yellow, 0.1); - } - - &.-yellow { - background-color: rgba($yellow, 0.1); - } - } - - .icon { - display: flex; - align-items: center; - justify-content: center; - - svg { - width: $spacing-unit; - height: $spacing-unit; - } - } - - @include media-query(small) { - dt, - dd, - .icon { - flex-basis: 100%; - } - - dd { - & + dt { - margin-top: $spacing-unit/3*2; - } - } - - .icon { - height: $spacing-unit * 2; - - svg { - transform: rotate(90deg); - } - } - } - - @include media-query(medium-up) { - dt, - dd { - flex-basis: 30%; - flex-grow: 1; - margin-top: $spacing-unit/3*2; - - &:first-of-type { - margin-top: 0; - } - } - - .icon { - width: $spacing-unit*2; - margin-top: $spacing-unit/3*2; - - &:first-of-type { - margin-top: 0; - } - } - } - } -} diff --git a/_sass/minima/article/_do.scss b/_sass/minima/article/_do.scss deleted file mode 100644 index 517d83b37..000000000 --- a/_sass/minima/article/_do.scss +++ /dev/null @@ -1,91 +0,0 @@ -article.guide { - .do { - margin-top: $spacing-unit; - display: flex; - flex-wrap: wrap; - background-color: #f8f8f8; - @include responsive('padding', 20, 30); - - .icon { - flex-grow: 0; - display: flex; - align-items: center; - padding-top: 2px; - - &.-green { - svg { - background-color: $green; - } - } - - &.-red { - svg { - background-color: $red; - } - } - - svg { - display: block; - background-color: $blue; - border-radius: 3px; - width: 24px; - height: 24px; - color: white; - vertical-align: middle; - transform: translateY(-2px); - } - } - - h6 { - margin: 0 0 0 $spacing-unit/3; - padding: 0px 0 0 0; - font-size: 18px; - font-weight: 500; - flex-grow: 1; - flex-basis: 50%; - - &:before { - display: none; - } - } - - .copy { - p { - & + figure { - margin-top: $spacing-unit/3; - } - } - - figure { - &:last-child { - margin-bottom: 0; - } - } - } - } - - .dos { - display: flex; - - @include media-query(small) { - flex-direction: column; - - .do { - & + .do { - margin-top: $spacing-unit/3*2; - } - } - } - - @include media-query(medium-up) { - .do { - flex-basis: 30%; - flex-grow: 1; - - & + .do { - margin-left: $spacing-unit/3*4; - } - } - } - } -} diff --git a/_sass/minima/article/_fact.scss b/_sass/minima/article/_fact.scss deleted file mode 100644 index 56b2e141b..000000000 --- a/_sass/minima/article/_fact.scss +++ /dev/null @@ -1,72 +0,0 @@ -article.guide { - .fact { - margin-top: $spacing-unit; - display: flex; - border: 1px solid #DEDEDE; - align-items: stretch; - - .icon { - padding: $spacing-unit/3 $spacing-unit/3*2; - border-right: 1px solid #DEDEDE; - flex-grow: 0; - display: flex; - align-items: center; - - &.-green { - svg { - background-color: $green; - } - } - - &.-red { - svg { - background-color: $red; - } - } - - svg { - display: inline-block; - background-color: $blue; - border-radius: 3px; - width: 24px; - height: 24px; - color: white; - vertical-align: middle; - transform: translateY(-2px); - } - } - - .copy { - padding: $spacing-unit/3*2; - flex-grow: 1; - - h6 { - margin: 0; - padding: 0; - font-size: 18px; - font-weight: 500; - - &:before { - display: none; - } - } - - ul, ol { - margin-left: 0; - - &:first-child { - margin-top: 5px; - } - } - - p { - margin: 5px 0 0 0; - } - } - - & + .fact { - margin-top: 0; - border-top: 0; - } - } -} diff --git a/_sass/minima/article/_footnotes.scss b/_sass/minima/article/_footnotes.scss deleted file mode 100644 index 9fcf11d09..000000000 --- a/_sass/minima/article/_footnotes.scss +++ /dev/null @@ -1,30 +0,0 @@ -article.guide { - .footnotes { - padding: $spacing-unit; - font-size: 0.8rem; - margin-top: $spacing-unit*2; - border: 1px solid rgba(var(--front), 0.05); - box-sizing: border-box; - background: #FDFDFD; - - &::before { - content: "REFERENCES"; - display: block; - margin-bottom: $spacing-unit/3; - color: var(--frontHex); - letter-spacing: 1px; - } - - ol { - margin: 0; - list-style-position: inside; - - li { - margin-left: 0; - p { - display: inline; - } - } - } - } -} diff --git a/_sass/minima/article/_image-gallery.scss b/_sass/minima/article/_image-gallery.scss deleted file mode 100644 index d63e21b96..000000000 --- a/_sass/minima/article/_image-gallery.scss +++ /dev/null @@ -1,49 +0,0 @@ -article.guide { - .image-gallery { - display: flex; - margin-top: $spacing-unit; - background-color: #f8f8f8; - justify-content: center; - max-width: none !important; - - figure { - margin-top: 0; - margin-bottom: 0; - float: left; - // margin-right: $spacing-unit; - - img { - box-shadow: 0 20px 10px -8px rgba(black, 0.05); - border: 1px solid rgba(black, 0.1); - } - } - - @include media-query(small) { - flex-direction: column; - align-items: center; - margin-left: -$spacing-unit / 2; - margin-right: -$spacing-unit / 2; - padding: $spacing-unit $spacing-unit/2; - - figure { - margin: 0; - - & + figure { - margin-top: $spacing-unit; - } - } - } - - @include media-query(medium-up) { - margin-left: -$spacing-unit; - margin-right: -$spacing-unit; - padding: $spacing-unit; - - figure { - & + figure { - margin-left: $spacing-unit/3*4; - } - } - } - } -} diff --git a/_sass/minima/article/_image-slide-gallery.scss b/_sass/minima/article/_image-slide-gallery.scss deleted file mode 100644 index f1527d887..000000000 --- a/_sass/minima/article/_image-slide-gallery.scss +++ /dev/null @@ -1,94 +0,0 @@ -article.guide { - .image-slide-gallery { - margin-top: $spacing-unit; - margin-bottom: $spacing-unit; - background-color: #f8f8f8; - justify-content: left; - max-width: none !important; - display: flex; - overflow: hidden; - overflow-x: scroll; - -webkit-overflow-scrolling: touch; - scroll-snap-type: x mandatory; - - figure { - flex-shrink: 0; - margin-top: 0; - margin-bottom: 0; - width: min-content; - - img { - max-width: none; - height: auto; - } - - figcaption { - p { - margin-top: 0; - } - } - } - - &:before, - &:after { - display: block; - content: ''; - position: relative; - height: $spacing-unit/3*2; - flex-shrink: 0; - flex-grow: 1; - } - - @include media-query(small) { - padding: $spacing-unit 0; - - figure { - flex-basis: calc(100vw - $spacing-unit*6); - - & + figure { - margin-left: $spacing-unit; - } - } - - &:before, - &:after { - flex-basis: $spacing-unit; - } - } - - @include media-query(medium-down) { - margin-left: -$spacing-unit/2; - margin-right: -$spacing-unit/2; - } - - @include media-query(medium-up) { - padding: $spacing-unit 0 $spacing-unit 0; - - figure { - & + figure { - margin-left: $spacing-unit; - } - } - - &:before, - &:after { - flex-basis: $spacing-unit; - } - } - - @include media-query(large) { - margin-left: -$spacing-unit; - margin-right: -$spacing-unit; - } - } - - & > .-float-right, - & > .center .-float-right { - @include media-query(large) { - margin-top: 0; - margin-bottom: 0; - float: right; - margin-left: $spacing-unit; - } - } -} diff --git a/_sass/minima/article/_tip.scss b/_sass/minima/article/_tip.scss deleted file mode 100644 index 68ddec596..000000000 --- a/_sass/minima/article/_tip.scss +++ /dev/null @@ -1,105 +0,0 @@ -article.guide { - .tip, - .recommendation { - margin-top: $spacing-unit; - padding: $spacing-unit/6*5 $spacing-unit/6*5 $spacing-unit/3*2 $spacing-unit/6*5; - box-sizing: border-box; - - h6 { - margin: 0; - padding: 0; - font-size: 22px; - font-weight: 500; - - &:before { - display: none; - } - - svg { - display: inline-block; - margin-right: 10px; - background-color: $blue; - border-radius: 3px; - width: 24px; - height: 24px; - color: white; - vertical-align: middle; - transform: translateY(-2px); - } - } - - p { - margin: 10px 0 0 0; - } - - &.-red { - background-color: rgba($red, 0.1); - - h6 { - svg { - background-color: $red; - } - } - } - - &.-green { - background-color: rgba($green, 0.1); - - h6 { - svg { - background-color: $green; - } - } - } - - &.-blue { - background-color: rgba($blue, 0.1); - - h6 { - svg { - background-color: $blue; - } - } - } - - &.-orange { - background-color: rgba($bitcoin-yellow, 0.1); - - h6 { - svg { - background-color: $bitcoin-yellow; - } - } - } - - &.-yellow { - background-color: rgba($yellow, 0.1); - - h6 { - svg { - background-color: $yellow; - } - } - } - } - - .tip { - background-color: rgba($blue, 0.1); - - h6 { - svg { - background-color: $blue; - } - } - } - - .recommendation { - background-color: rgba($bitcoin-yellow, 0.1); - - h6 { - svg { - background-color: $bitcoin-yellow; - } - } - } -} diff --git a/_sass/minima/initialize.scss b/_sass/minima/initialize.scss index 8f8c9fcf1..a10f3fb4c 100644 --- a/_sass/minima/initialize.scss +++ b/_sass/minima/initialize.scss @@ -11,14 +11,6 @@ "minima/side-bar", // Side bar for guide pages "minima/nav-list", // Navigation list for guide page side bar and mobile menu guide sub nav "minima/article", // Formatting for all article pages (guide, post, page) - "minima/article/_dl", - "minima/article/_do", - "minima/article/_fact", - "minima/article/_footnotes", - "minima/article/_image-gallery", - "minima/article/_image-slide-gallery", - "minima/article/_tip", - "minima/home-page", // Formatting for the home page "minima/search-page", // Formatting for the search page "minima/projects-page", // Formatting for the projects page "minima/glossary-page", // Formatting for the glossary page diff --git a/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding.jpg b/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding.jpg new file mode 100644 index 000000000..c43dd8b35 Binary files /dev/null and b/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding.jpg differ diff --git a/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding@2x.jpg b/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding@2x.jpg new file mode 100644 index 000000000..be17b17d0 Binary files /dev/null and b/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding@2x.jpg differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1.png deleted file mode 100644 index 3705614e6..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10.png deleted file mode 100644 index 40da8163d..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10@2x.png deleted file mode 100644 index 7455cd653..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1@2x.png deleted file mode 100644 index ab743bcfd..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2.png deleted file mode 100644 index 873e7b848..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2@2x.png deleted file mode 100644 index 6e24e3a73..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3.png deleted file mode 100644 index 8db934651..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3@2x.png deleted file mode 100644 index a902869f3..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4.png deleted file mode 100644 index 1ce3ce526..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4@2x.png deleted file mode 100644 index d254f126f..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5.png deleted file mode 100644 index e975b3578..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5@2x.png deleted file mode 100644 index f4b86ef7f..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6.png deleted file mode 100644 index 60b18a0f2..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6@2x.png deleted file mode 100644 index 254b9b33b..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7.png deleted file mode 100644 index 88f655ded..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7@2x.png deleted file mode 100644 index c9892f9f7..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8.png deleted file mode 100644 index e3c88dde4..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8@2x.png deleted file mode 100644 index d6812d4e9..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9.png deleted file mode 100644 index 5c11625ec..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9@2x.png b/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9@2x.png deleted file mode 100644 index a062e6afa..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info.png b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info.png deleted file mode 100644 index d0e3a2802..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info@2x.png b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info@2x.png deleted file mode 100644 index eca0befed..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request.png b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request.png deleted file mode 100644 index d5f44387d..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request@2x.png b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request@2x.png deleted file mode 100644 index 3f62b57ff..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example.jpg b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example.jpg new file mode 100644 index 000000000..a29203c08 Binary files /dev/null and b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example.jpg differ diff --git a/assets/images/guide/getting-started/common-user-flows/receiving-ui-example@2x.jpg b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example@2x.jpg new file mode 100644 index 000000000..fc43bdf66 Binary files /dev/null and b/assets/images/guide/getting-started/common-user-flows/receiving-ui-example@2x.jpg differ diff --git a/assets/images/guide/getting-started/common-user-flows/sending-ui-basic.png b/assets/images/guide/getting-started/common-user-flows/sending-ui-basic.png deleted file mode 100644 index 9653822c3..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/sending-ui-basic.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/sending-ui-basic@2x.png b/assets/images/guide/getting-started/common-user-flows/sending-ui-basic@2x.png deleted file mode 100644 index f5e01ac22..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/sending-ui-basic@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/sending-ui-complex.png b/assets/images/guide/getting-started/common-user-flows/sending-ui-complex.png deleted file mode 100644 index b75550f2a..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/sending-ui-complex.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/sending-ui-complex@2x.png b/assets/images/guide/getting-started/common-user-flows/sending-ui-complex@2x.png deleted file mode 100644 index 60ddee174..000000000 Binary files a/assets/images/guide/getting-started/common-user-flows/sending-ui-complex@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity.jpg b/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity.jpg new file mode 100644 index 000000000..b8e7181d0 Binary files /dev/null and b/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity.jpg differ diff --git a/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity@2x.jpg b/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity@2x.jpg new file mode 100644 index 000000000..38dfc426a Binary files /dev/null and b/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity@2x.jpg differ diff --git a/assets/images/guide/getting-started/technology/blueprint-mobile.jpg b/assets/images/guide/getting-started/technology/blueprint-mobile.jpg new file mode 100644 index 000000000..c45c85857 Binary files /dev/null and b/assets/images/guide/getting-started/technology/blueprint-mobile.jpg differ diff --git a/assets/images/guide/getting-started/technology/blueprint-mobile.png b/assets/images/guide/getting-started/technology/blueprint-mobile.png deleted file mode 100644 index 3ad09519b..000000000 Binary files a/assets/images/guide/getting-started/technology/blueprint-mobile.png and /dev/null differ diff --git a/assets/images/guide/getting-started/technology/blueprint-mobile@2x.jpg b/assets/images/guide/getting-started/technology/blueprint-mobile@2x.jpg new file mode 100644 index 000000000..41f21ed94 Binary files /dev/null and b/assets/images/guide/getting-started/technology/blueprint-mobile@2x.jpg differ diff --git a/assets/images/guide/getting-started/technology/blueprint-mobile@2x.png b/assets/images/guide/getting-started/technology/blueprint-mobile@2x.png deleted file mode 100644 index d2d87ce01..000000000 Binary files a/assets/images/guide/getting-started/technology/blueprint-mobile@2x.png and /dev/null differ diff --git a/assets/images/guide/getting-started/technology/blueprint.jpg b/assets/images/guide/getting-started/technology/blueprint.jpg new file mode 100644 index 000000000..6589ae44a Binary files /dev/null and b/assets/images/guide/getting-started/technology/blueprint.jpg differ diff --git a/assets/images/guide/getting-started/technology/blueprint.png b/assets/images/guide/getting-started/technology/blueprint.png deleted file mode 100644 index 527b2faa5..000000000 Binary files a/assets/images/guide/getting-started/technology/blueprint.png and /dev/null differ diff --git a/assets/images/guide/getting-started/technology/blueprint@2x.jpg b/assets/images/guide/getting-started/technology/blueprint@2x.jpg new file mode 100644 index 000000000..594bd5365 Binary files /dev/null and b/assets/images/guide/getting-started/technology/blueprint@2x.jpg differ diff --git a/assets/images/guide/getting-started/technology/blueprint@2x.png b/assets/images/guide/getting-started/technology/blueprint@2x.png deleted file mode 100644 index a1827a32e..000000000 Binary files a/assets/images/guide/getting-started/technology/blueprint@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen.png b/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen.png deleted file mode 100644 index d2567af39..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen@2x.png b/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen@2x.png deleted file mode 100644 index 50494655d..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1.png b/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1.png deleted file mode 100644 index 46ad3c026..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1@2x.png b/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1@2x.png deleted file mode 100644 index 8b10627ec..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2.png b/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2.png deleted file mode 100644 index ab254a4ac..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2@2x.png b/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2@2x.png deleted file mode 100644 index 74f73a22d..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3.png b/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3.png deleted file mode 100644 index d373f31bb..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3.png and /dev/null differ diff --git a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3@2x.png b/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3@2x.png deleted file mode 100644 index 6334af0f2..000000000 Binary files a/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/getting-to-know-your-users-mobile.jpeg b/assets/images/guide/onboarding/getting-to-know-your-users-mobile.jpeg new file mode 100644 index 000000000..7ed813606 Binary files /dev/null and b/assets/images/guide/onboarding/getting-to-know-your-users-mobile.jpeg differ diff --git a/assets/images/guide/onboarding/getting-to-know-your-users-mobile@2x.jpeg b/assets/images/guide/onboarding/getting-to-know-your-users-mobile@2x.jpeg new file mode 100644 index 000000000..b12dd6713 Binary files /dev/null and b/assets/images/guide/onboarding/getting-to-know-your-users-mobile@2x.jpeg differ diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/banner.jpeg b/assets/images/guide/onboarding/getting-to-know-your-users.jpeg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/banner.jpeg rename to assets/images/guide/onboarding/getting-to-know-your-users.jpeg diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile.jpeg b/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile.jpeg deleted file mode 100644 index 42e607b88..000000000 Binary files a/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile.jpeg and /dev/null differ diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile@2x.jpeg b/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile@2x.jpeg deleted file mode 100644 index ed8194445..000000000 Binary files a/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile@2x.jpeg and /dev/null differ diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/banner@2x.jpeg b/assets/images/guide/onboarding/getting-to-know-your-users@2x.jpeg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/banner@2x.jpeg rename to assets/images/guide/onboarding/getting-to-know-your-users@2x.jpeg diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/highest-motivator-battery.svg b/assets/images/guide/onboarding/highest-motivator-battery.svg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/highest-motivator-battery.svg rename to assets/images/guide/onboarding/highest-motivator-battery.svg diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/lowest-barrier-battery.svg b/assets/images/guide/onboarding/lowest-barrier-battery.svg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/lowest-barrier-battery.svg rename to assets/images/guide/onboarding/lowest-barrier-battery.svg diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/lowest-motivator-battery.svg b/assets/images/guide/onboarding/lowest-motivator-battery.svg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/lowest-motivator-battery.svg rename to assets/images/guide/onboarding/lowest-motivator-battery.svg diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/neutral-barrier-battery.svg b/assets/images/guide/onboarding/neutral-barrier-battery.svg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/neutral-barrier-battery.svg rename to assets/images/guide/onboarding/neutral-barrier-battery.svg diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/neutral-motivator-battery.svg b/assets/images/guide/onboarding/neutral-motivator-battery.svg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/neutral-motivator-battery.svg rename to assets/images/guide/onboarding/neutral-motivator-battery.svg diff --git a/assets/images/guide/onboarding/onboarding-mobile.png b/assets/images/guide/onboarding/onboarding-mobile.png deleted file mode 100644 index 354487fab..000000000 Binary files a/assets/images/guide/onboarding/onboarding-mobile.png and /dev/null differ diff --git a/assets/images/guide/onboarding/onboarding-mobile@2x.png b/assets/images/guide/onboarding/onboarding-mobile@2x.png deleted file mode 100644 index d54b40b97..000000000 Binary files a/assets/images/guide/onboarding/onboarding-mobile@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/onboarding-preview.png b/assets/images/guide/onboarding/onboarding-preview.png deleted file mode 100644 index c046a47ce..000000000 Binary files a/assets/images/guide/onboarding/onboarding-preview.png and /dev/null differ diff --git a/assets/images/guide/onboarding/onboarding.png b/assets/images/guide/onboarding/onboarding.png deleted file mode 100644 index 5faedb634..000000000 Binary files a/assets/images/guide/onboarding/onboarding.png and /dev/null differ diff --git a/assets/images/guide/onboarding/banner.svg b/assets/images/guide/onboarding/onboarding.svg similarity index 100% rename from assets/images/guide/onboarding/banner.svg rename to assets/images/guide/onboarding/onboarding.svg diff --git a/assets/images/guide/onboarding/onboarding@2x.png b/assets/images/guide/onboarding/onboarding@2x.png deleted file mode 100644 index d9af4f539..000000000 Binary files a/assets/images/guide/onboarding/onboarding@2x.png and /dev/null differ diff --git a/assets/images/guide/onboarding/getting-to-know-your-users/strongest-barrier-battery.svg b/assets/images/guide/onboarding/strongest-barrier-battery.svg similarity index 100% rename from assets/images/guide/onboarding/getting-to-know-your-users/strongest-barrier-battery.svg rename to assets/images/guide/onboarding/strongest-barrier-battery.svg diff --git a/assets/images/guide/payments/send/bitcoin-payments-mobile.jpg b/assets/images/guide/payments/send/bitcoin-payments-mobile.jpg deleted file mode 100644 index edd46dcd0..000000000 Binary files a/assets/images/guide/payments/send/bitcoin-payments-mobile.jpg and /dev/null differ diff --git a/assets/images/guide/payments/send/bitcoin-payments-mobile@2x.jpg b/assets/images/guide/payments/send/bitcoin-payments-mobile@2x.jpg deleted file mode 100644 index dd5aa9837..000000000 Binary files a/assets/images/guide/payments/send/bitcoin-payments-mobile@2x.jpg and /dev/null differ diff --git a/assets/images/guide/payments/send/bitcoin-payments-social.jpg b/assets/images/guide/payments/send/bitcoin-payments-social.jpg deleted file mode 100644 index e7dfab93b..000000000 Binary files a/assets/images/guide/payments/send/bitcoin-payments-social.jpg and /dev/null differ diff --git a/assets/images/guide/payments/send/bitcoin-payments.jpg b/assets/images/guide/payments/send/bitcoin-payments.jpg deleted file mode 100644 index 7122bd275..000000000 Binary files a/assets/images/guide/payments/send/bitcoin-payments.jpg and /dev/null differ diff --git a/assets/images/guide/payments/send/bitcoin-payments@2x.jpg b/assets/images/guide/payments/send/bitcoin-payments@2x.jpg deleted file mode 100644 index b72f0cabd..000000000 Binary files a/assets/images/guide/payments/send/bitcoin-payments@2x.jpg and /dev/null differ diff --git a/assets/images/guide/payments/send/first-confirmation-mobile.png b/assets/images/guide/payments/send/first-confirmation-mobile.png deleted file mode 100644 index 9906712ee..000000000 Binary files a/assets/images/guide/payments/send/first-confirmation-mobile.png and /dev/null differ diff --git a/assets/images/guide/payments/send/first-confirmation-mobile@2x.png b/assets/images/guide/payments/send/first-confirmation-mobile@2x.png deleted file mode 100644 index b2ea6e9de..000000000 Binary files a/assets/images/guide/payments/send/first-confirmation-mobile@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/send/first-confirmation.png b/assets/images/guide/payments/send/first-confirmation.png deleted file mode 100644 index 64396ddec..000000000 Binary files a/assets/images/guide/payments/send/first-confirmation.png and /dev/null differ diff --git a/assets/images/guide/payments/send/first-confirmation.svg b/assets/images/guide/payments/send/first-confirmation.svg new file mode 100644 index 000000000..4ac73a115 --- /dev/null +++ b/assets/images/guide/payments/send/first-confirmation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/guide/payments/send/first-confirmation@2x.png b/assets/images/guide/payments/send/first-confirmation@2x.png deleted file mode 100644 index 3d0596332..000000000 Binary files a/assets/images/guide/payments/send/first-confirmation@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/send/get-recipient-address.png b/assets/images/guide/payments/send/get-recipient-address.png deleted file mode 100644 index dddd4e6d9..000000000 Binary files a/assets/images/guide/payments/send/get-recipient-address.png and /dev/null differ diff --git a/assets/images/guide/payments/send/get-recipient-address.svg b/assets/images/guide/payments/send/get-recipient-address.svg new file mode 100644 index 000000000..b1c8a7feb --- /dev/null +++ b/assets/images/guide/payments/send/get-recipient-address.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/guide/payments/send/get-recipient-address@2x.png b/assets/images/guide/payments/send/get-recipient-address@2x.png deleted file mode 100644 index 0d54a4b94..000000000 Binary files a/assets/images/guide/payments/send/get-recipient-address@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/send/input-address.png b/assets/images/guide/payments/send/input-address.png deleted file mode 100644 index b62e94c26..000000000 Binary files a/assets/images/guide/payments/send/input-address.png and /dev/null differ diff --git a/assets/images/guide/payments/send/input-address.svg b/assets/images/guide/payments/send/input-address.svg new file mode 100644 index 000000000..829b402f6 --- /dev/null +++ b/assets/images/guide/payments/send/input-address.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/guide/payments/send/input-address@2x.png b/assets/images/guide/payments/send/input-address@2x.png deleted file mode 100644 index dc7bb0734..000000000 Binary files a/assets/images/guide/payments/send/input-address@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/send/input-amount.png b/assets/images/guide/payments/send/input-amount.png deleted file mode 100644 index 1d250bd62..000000000 Binary files a/assets/images/guide/payments/send/input-amount.png and /dev/null differ diff --git a/assets/images/guide/payments/send/input-amount.svg b/assets/images/guide/payments/send/input-amount.svg new file mode 100644 index 000000000..60701b45d --- /dev/null +++ b/assets/images/guide/payments/send/input-amount.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/guide/payments/send/input-amount@2x.png b/assets/images/guide/payments/send/input-amount@2x.png deleted file mode 100644 index 8890ccb80..000000000 Binary files a/assets/images/guide/payments/send/input-amount@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/send/review-payment.png b/assets/images/guide/payments/send/review-payment.png deleted file mode 100644 index 7382d39bd..000000000 Binary files a/assets/images/guide/payments/send/review-payment.png and /dev/null differ diff --git a/assets/images/guide/payments/send/review-payment.svg b/assets/images/guide/payments/send/review-payment.svg new file mode 100644 index 000000000..f480d3a93 --- /dev/null +++ b/assets/images/guide/payments/send/review-payment.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/guide/payments/send/review-payment@2x.png b/assets/images/guide/payments/send/review-payment@2x.png deleted file mode 100644 index ae950d27a..000000000 Binary files a/assets/images/guide/payments/send/review-payment@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/send/select-fee-rate.png b/assets/images/guide/payments/send/select-fee-rate.png deleted file mode 100644 index 97c27fea0..000000000 Binary files a/assets/images/guide/payments/send/select-fee-rate.png and /dev/null differ diff --git a/assets/images/guide/payments/send/select-fee-rate.svg b/assets/images/guide/payments/send/select-fee-rate.svg new file mode 100644 index 000000000..b92cafd9a --- /dev/null +++ b/assets/images/guide/payments/send/select-fee-rate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/guide/payments/send/select-fee-rate@2x.png b/assets/images/guide/payments/send/select-fee-rate@2x.png deleted file mode 100644 index 9d0870084..000000000 Binary files a/assets/images/guide/payments/send/select-fee-rate@2x.png and /dev/null differ diff --git a/assets/images/guide/payments/transactions/inputs-and-outputs-mobile.svg b/assets/images/guide/payments/transactions/inputs-and-outputs-mobile.svg deleted file mode 100644 index b9aa96fad..000000000 --- a/assets/images/guide/payments/transactions/inputs-and-outputs-mobile.svg +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/guide/payments/transactions/inputs-and-outputs.svg b/assets/images/guide/payments/transactions/inputs-and-outputs.svg deleted file mode 100644 index ec969df1f..000000000 --- a/assets/images/guide/payments/transactions/inputs-and-outputs.svg +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/guide/payments/transactions/transactions-desktop.jpg b/assets/images/guide/payments/transactions/transactions-desktop.jpg deleted file mode 100644 index e4f2a9b7f..000000000 Binary files a/assets/images/guide/payments/transactions/transactions-desktop.jpg and /dev/null differ diff --git a/assets/images/guide/payments/transactions/transactions-desktop.png b/assets/images/guide/payments/transactions/transactions-desktop.png new file mode 100644 index 000000000..e2d324306 Binary files /dev/null and b/assets/images/guide/payments/transactions/transactions-desktop.png differ diff --git a/assets/images/guide/payments/transactions/transactions-desktop@2x.jpg b/assets/images/guide/payments/transactions/transactions-desktop@2x.jpg deleted file mode 100644 index ecfc0c4e7..000000000 Binary files a/assets/images/guide/payments/transactions/transactions-desktop@2x.jpg and /dev/null differ diff --git a/assets/images/guide/payments/transactions/transactions-desktop@2x.png b/assets/images/guide/payments/transactions/transactions-desktop@2x.png new file mode 100644 index 000000000..fdbdd5e76 Binary files /dev/null and b/assets/images/guide/payments/transactions/transactions-desktop@2x.png differ diff --git a/assets/images/guide/payments/transactions/transactions-mobile.jpg b/assets/images/guide/payments/transactions/transactions-mobile.jpg deleted file mode 100644 index 5d197a8b3..000000000 Binary files a/assets/images/guide/payments/transactions/transactions-mobile.jpg and /dev/null differ diff --git a/assets/images/guide/payments/transactions/transactions-mobile.png b/assets/images/guide/payments/transactions/transactions-mobile.png new file mode 100644 index 000000000..2acfba5cd Binary files /dev/null and b/assets/images/guide/payments/transactions/transactions-mobile.png differ diff --git a/assets/images/guide/payments/transactions/transactions-mobile@2x.jpg b/assets/images/guide/payments/transactions/transactions-mobile@2x.jpg deleted file mode 100644 index 672fede3d..000000000 Binary files a/assets/images/guide/payments/transactions/transactions-mobile@2x.jpg and /dev/null differ diff --git a/assets/images/guide/payments/transactions/transactions-mobile@2x.png b/assets/images/guide/payments/transactions/transactions-mobile@2x.png new file mode 100644 index 000000000..af652bf42 Binary files /dev/null and b/assets/images/guide/payments/transactions/transactions-mobile@2x.png differ diff --git a/assets/images/guide/payments/transactions/tx-preview.jpg b/assets/images/guide/payments/transactions/tx-preview.jpg index b3f509664..befba330e 100644 Binary files a/assets/images/guide/payments/transactions/tx-preview.jpg and b/assets/images/guide/payments/transactions/tx-preview.jpg differ diff --git a/assets/images/guide/private-key-management/backups/backup-table.png b/assets/images/guide/private-key-management/backups/backup-table.png new file mode 100644 index 000000000..955f5fb84 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/backup-table.png differ diff --git a/assets/images/guide/private-key-management/backups/backup-table@2x.png b/assets/images/guide/private-key-management/backups/backup-table@2x.png new file mode 100644 index 000000000..6fd50c901 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/backup-table@2x.png differ diff --git a/assets/images/guide/private-key-management/backups/backups-mobile.jpg b/assets/images/guide/private-key-management/backups/backups-mobile.jpg new file mode 100644 index 000000000..c792c955c Binary files /dev/null and b/assets/images/guide/private-key-management/backups/backups-mobile.jpg differ diff --git a/assets/images/guide/private-key-management/backups/backups-mobile@2x.jpg b/assets/images/guide/private-key-management/backups/backups-mobile@2x.jpg new file mode 100644 index 000000000..9eaa83cdf Binary files /dev/null and b/assets/images/guide/private-key-management/backups/backups-mobile@2x.jpg differ diff --git a/assets/images/guide/private-key-management/backups/backups.jpg b/assets/images/guide/private-key-management/backups/backups.jpg new file mode 100644 index 000000000..546a8b624 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/backups.jpg differ diff --git a/assets/images/guide/private-key-management/backups/backups@2x.jpg b/assets/images/guide/private-key-management/backups/backups@2x.jpg new file mode 100644 index 000000000..8081111c0 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/backups@2x.jpg differ diff --git a/assets/images/guide/private-key-management/backups/cloudbackup.png b/assets/images/guide/private-key-management/backups/cloudbackup.png new file mode 100644 index 000000000..0eee37e6c Binary files /dev/null and b/assets/images/guide/private-key-management/backups/cloudbackup.png differ diff --git a/assets/images/guide/private-key-management/backups/cloudbackup@2x.png b/assets/images/guide/private-key-management/backups/cloudbackup@2x.png new file mode 100644 index 000000000..83d4274c1 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/cloudbackup@2x.png differ diff --git a/assets/images/guide/private-key-management/backups/metalbackup.png b/assets/images/guide/private-key-management/backups/metalbackup.png new file mode 100644 index 000000000..e369b6d46 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/metalbackup.png differ diff --git a/assets/images/guide/private-key-management/backups/metalbackup@2x.png b/assets/images/guide/private-key-management/backups/metalbackup@2x.png new file mode 100644 index 000000000..7366598a0 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/metalbackup@2x.png differ diff --git a/assets/images/guide/private-key-management/backups/multi-continental.png b/assets/images/guide/private-key-management/backups/multi-continental.png new file mode 100644 index 000000000..821d6280e Binary files /dev/null and b/assets/images/guide/private-key-management/backups/multi-continental.png differ diff --git a/assets/images/guide/private-key-management/backups/multi-continental@2x.png b/assets/images/guide/private-key-management/backups/multi-continental@2x.png new file mode 100644 index 000000000..0250673ba Binary files /dev/null and b/assets/images/guide/private-key-management/backups/multi-continental@2x.png differ diff --git a/assets/images/guide/private-key-management/backups/multiple-discoveryprotection.png b/assets/images/guide/private-key-management/backups/multiple-discoveryprotection.png new file mode 100644 index 000000000..6278d1154 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/multiple-discoveryprotection.png differ diff --git a/assets/images/guide/private-key-management/backups/multiple-discoveryprotection@2x.png b/assets/images/guide/private-key-management/backups/multiple-discoveryprotection@2x.png new file mode 100644 index 000000000..96d645207 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/multiple-discoveryprotection@2x.png differ diff --git a/assets/images/guide/private-key-management/backups/offline-discoveryprotection.png b/assets/images/guide/private-key-management/backups/offline-discoveryprotection.png new file mode 100644 index 000000000..c67b31408 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/offline-discoveryprotection.png differ diff --git a/assets/images/guide/private-key-management/backups/offline-discoveryprotection@2x.png b/assets/images/guide/private-key-management/backups/offline-discoveryprotection@2x.png new file mode 100644 index 000000000..2cff48cba Binary files /dev/null and b/assets/images/guide/private-key-management/backups/offline-discoveryprotection@2x.png differ diff --git a/assets/images/guide/private-key-management/backups/page-backups.jpg b/assets/images/guide/private-key-management/backups/page-backups.jpg new file mode 100644 index 000000000..1eb880ccf Binary files /dev/null and b/assets/images/guide/private-key-management/backups/page-backups.jpg differ diff --git a/assets/images/guide/private-key-management/backups/paperbackup.png b/assets/images/guide/private-key-management/backups/paperbackup.png new file mode 100644 index 000000000..ea5ece541 Binary files /dev/null and b/assets/images/guide/private-key-management/backups/paperbackup.png differ diff --git a/assets/images/guide/private-key-management/backups/paperbackup@2x.png b/assets/images/guide/private-key-management/backups/paperbackup@2x.png new file mode 100644 index 000000000..7fd50b8ce Binary files /dev/null and b/assets/images/guide/private-key-management/backups/paperbackup@2x.png differ diff --git a/assets/images/home/banner/figma-preview-mobile.png b/assets/images/home/banner/figma-preview-mobile.png index 811d780ab..ac36aa073 100644 Binary files a/assets/images/home/banner/figma-preview-mobile.png and b/assets/images/home/banner/figma-preview-mobile.png differ diff --git a/assets/images/home/banner/figma-preview-mobile@2x.png b/assets/images/home/banner/figma-preview-mobile@2x.png index 4df75461e..9df58d15d 100644 Binary files a/assets/images/home/banner/figma-preview-mobile@2x.png and b/assets/images/home/banner/figma-preview-mobile@2x.png differ diff --git a/assets/images/home/banner/figma-preview.png b/assets/images/home/banner/figma-preview.png index 4df75461e..84c391062 100644 Binary files a/assets/images/home/banner/figma-preview.png and b/assets/images/home/banner/figma-preview.png differ diff --git a/assets/images/home/banner/figma-preview@2x.png b/assets/images/home/banner/figma-preview@2x.png index 6f52694dd..b59127c07 100644 Binary files a/assets/images/home/banner/figma-preview@2x.png and b/assets/images/home/banner/figma-preview@2x.png differ diff --git a/assets/images/home/banner/template-overview-mobile.jpg b/assets/images/home/banner/template-overview-mobile.jpg index d059721c4..eb1c00420 100644 Binary files a/assets/images/home/banner/template-overview-mobile.jpg and b/assets/images/home/banner/template-overview-mobile.jpg differ diff --git a/assets/images/home/banner/template-overview-mobile@2x.jpg b/assets/images/home/banner/template-overview-mobile@2x.jpg index 3f8e0b5d4..f2569f8a3 100644 Binary files a/assets/images/home/banner/template-overview-mobile@2x.jpg and b/assets/images/home/banner/template-overview-mobile@2x.jpg differ diff --git a/assets/images/home/banner/the-meta-future-mobile.jpg b/assets/images/home/banner/the-meta-future-mobile.jpg deleted file mode 100644 index 38ad53598..000000000 Binary files a/assets/images/home/banner/the-meta-future-mobile.jpg and /dev/null differ diff --git a/assets/images/home/banner/the-meta-future-mobile@2x.jpg b/assets/images/home/banner/the-meta-future-mobile@2x.jpg deleted file mode 100644 index e419b3b80..000000000 Binary files a/assets/images/home/banner/the-meta-future-mobile@2x.jpg and /dev/null differ diff --git a/assets/images/home/banner/the-meta-future.jpg b/assets/images/home/banner/the-meta-future.jpg deleted file mode 100644 index 0d241ed64..000000000 Binary files a/assets/images/home/banner/the-meta-future.jpg and /dev/null differ diff --git a/assets/images/home/banner/the-meta-future@2x.jpg b/assets/images/home/banner/the-meta-future@2x.jpg deleted file mode 100644 index 07a45ba19..000000000 Binary files a/assets/images/home/banner/the-meta-future@2x.jpg and /dev/null differ diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index da489da06..000000000 --- a/docker-compose.yml +++ /dev/null @@ -1,9 +0,0 @@ -version: '3.8' -services: - jekyll: - image: jekyll/jekyll:4 - ports: - - '4000:4000' - volumes: - - '.:/srv/jekyll' - command: jekyll serve \ No newline at end of file diff --git a/guide/case-studies/introduction.md b/guide/case-studies/introduction.md index 3bd56cc0f..1107edfe9 100644 --- a/guide/case-studies/introduction.md +++ b/guide/case-studies/introduction.md @@ -32,24 +32,24 @@ This section provides practical explorations of common user experiences with wir --- -### [Cash account / Daily spending]({{ '/guide/case-studies/cloud-backup/' | relative_url }}) +**[Cash account / Daily spending]({{ '/guide/case-studies/cloud-backup/' | relative_url }})** Explores a simple mobile wallet design that relies on automated cloud backup to store private keys. A common use case for this technique are wallets for daily spending on-the-go. --- -### [Checking account]({{ '/guide/case-studies/multisig-wallet/' | relative_url }}) +**[Checking account]({{ '/guide/case-studies/multisig-wallet/' | relative_url }})** An example user flow for setting up a 2-of-3 multsig wallet in a mobile application. --- -### [Upgradeable account]({{ '/guide/case-studies/upgradeable-wallet/' | relative_url }}) +**[Upgradeable account]({{ '/guide/case-studies/upgradeable-wallet/' | relative_url }})** A mobile experience that starts users off with a simple cloud backup solution and allows them to upgrade the security model progressively as their needs change. --- -### [Shared account]({{ '/guide/case-studies/shared-account/' | relative_url }}) +**[Shared account]({{ '/guide/case-studies/shared-account/' | relative_url }})** An onboarding experience for a mobile wallet shared by a couple who want to access and manage funds together. diff --git a/guide/contribute/content-guidelines.md b/guide/contribute/content-guidelines.md index f01298bf4..9780ceea0 100644 --- a/guide/contribute/content-guidelines.md +++ b/guide/contribute/content-guidelines.md @@ -27,7 +27,7 @@ The Bitcoin Design Guide is the work of many authors with different backgrounds, ### Know your reader -This guide is crafted for anyone interested in building an effective Bitcoin application. A large part of this group are designers and creatives, but also front-end developers, project managers, and others who actively shape the end-user experience. Consider their perspectives and needs first and avoid going into topics that are not relevant to these readers' goals. +This guide is crafted for anyone interested in building an effective Bitcoin application. To understand who you are writing for, familiarize yourself with our [Target audience](https://github.com/BitcoinDesign/Guide/issues/51). ### Speak to the reader diff --git a/guide/contribute/contribute.md b/guide/contribute/contribute.md index fca397d19..bb0bf1ce0 100644 --- a/guide/contribute/contribute.md +++ b/guide/contribute/contribute.md @@ -22,51 +22,53 @@ image: https://bitcoin.design/assets/images/guide/contribute/contribute-preview. # Contribute to the Guide -Join our open community and help us improve the Bitcoin Design Guide. Here’s where you can get involved and contribute. +People from around the internet build and shape the Bitcoin Design Guide every day. You are invited to join our open community and help us improve these resources! ---- +This section shows you how to get involved and start contributing. -### [Slack channel]({{ site.slack_invite_url }}) +--- -Head over to the Bitcoin [Bitcoin Design Slack community]({{ site.slack_invite_url }}) and join the #bitcoin-design-guide channel. If you don’t have Slack, you can [download it here](https://slack.com/intl/en-rs/downloads) or on the App Store. +**[Slack channel]({{ site.slack_invite_url }})** +We use the #bitcoin-design-guide channel in the [Bitcoin Design Slack community]({{ site.slack_invite_url }}) to communicate and discuss work on guide. To hear what is going on, see what you can help with, or suggest new contributions please come and say hi. --- -### [GitHub](https://github.com/BitcoinDesign/Guide) +**[GitHub](https://github.com/BitcoinDesign/Guide)** -The Bitcoin Design Guide is hosted on GitHub, an open-source collaboration platform. This is where you can view outstanding [issues](https://github.com/BitcoinDesign/Guide/issues), propose changes, see what needs to be done, and see who’s working alongside you. +We use Github to host the content of the guide. [Issues](https://github.com/BitcoinDesign/Guide/issues) are used to post ideas for improvements, and proposed changes are posted as [Pull Requests](https://github.com/BitcoinDesign/Guide/pulls). +For questions and ideas we use [Discussions](https://github.com/BitcoinDesign/Guide/discussions). --- -### [Proposing changes]({{ '/guide/contribute/propose-a-change/' | relative_url }}) +**[Proposing changes]({{ '/guide/contribute/propose-a-change/' | relative_url }})** -Learn the basics of collaborating on GitHub so that when you’re ready to make your first pull request, you’ll know how. +Learn the basics of GitHub, an open-source collaboration platform, and propose a change by creating your first pull request. --- -### [Become a reviewer]({{ '/guide/contribute/review/' | relative_url }}) +**[Become a reviewer]({{ '/guide/contribute/review/' | relative_url }})** -Get involved in the Bitcoin Design Guide review process. Reviewers are essential to improving the quality and usefulness of the guide. +Get involved in the review process. It's a fantastic entry-point for new contributors and essential for improving the quality and usefulness of the guide. --- -### [Content guidelines]({{ '/guide/contribute/content-guidelines/' | relative_url }}) +**[Content guidelines]({{ '/guide/contribute/content-guidelines/' | relative_url }})** Tips on how to write for the guide. The goal is to achieve a consistent tone across all pages for the benefit of readers. --- -### [Illustration guidelines]({{ '/guide/contribute/illustration-guidelines/' | relative_url }}) +**[Illustration guidelines]({{ '/guide/contribute/illustration-guidelines/' | relative_url }})** -Creating visuals for the Bitcoin Design Guide? We recommend following these best practices for file naming, image sizing, and on. +Notes on how to prepare visuals for use in the guide. We encourage diverse creative expressions, so this page focuses mostly on basics like file names and image sizes. --- -### [Formatting]({{ '/guide/contribute/formatting/' | relative_url }}) +**[Formatting]({{ '/guide/contribute/formatting/' | relative_url }})** -Layout and formatting options from headers and blockquotes to images and embeds. +Layout and formatting options available for content pages, from headers and blockquotes to images and embeds. --- -These contribution guidelines are for the Bitcoin Design Guide project. To get involved with the broader Bitcoin Design Community and projects, check out [general contribution guidelines]({{ '/contribute/' | relative_url }}). +These contribution guidelines are for the Bitcoin Design Guide project. To get involved with the broader Bitcoin Design community and projects, check out [general contribution guidelines]({{ '/contribute/' | relative_url }}). diff --git a/guide/contribute/formatting.md b/guide/contribute/formatting.md index 652e67245..86842848e 100644 --- a/guide/contribute/formatting.md +++ b/guide/contribute/formatting.md @@ -37,9 +37,9 @@ The design source file is a public Figma community file you can find [here](http - [Code](#code-embedding) - [YouTube videos](#youtube-video-embed) - [Prototypes](#prototypes) -- [Tips & recommendations](#tips--recommendations) +- [Recommendations](#recommendations) +- [Tips](#tips) - [Facts](#facts) -- [Do's and don'ts](#dos-and-donts) - [Footnotes](#footnotes) ## Basic markdown formatting @@ -76,15 +76,12 @@ There should be whitespace between paragraphs. ###### h6 header ### Blockquote + ```markdown -> The details are not the details. They make the design. -> -> By Charles Eames +> This is a blockquote text. ``` -> The details are not the details. They make the design. -> -> By Charles Eames +> This is a blockquote text. ### Links @@ -270,7 +267,7 @@ A horizontal slide show of images. When the content is too wide for the screen, image = "/assets/images/guide/contribute/formatting/example-image-mobile-screen.png" retina = "/assets/images/guide/contribute/formatting/example-image-mobile-screen@2x.png" alt-text = "Example image" - caption = "Sed in lacus vitae turpis lobortis ultrices. Aenean hendrerit nec elit in sagittis. Nulla mi ante, luctus vitae tincidunt ut, rhoncus ac ex. Morbi sit amet mauris est." + caption = "Example text" width = 250 height = 541 %} @@ -420,81 +417,30 @@ Breaking down content into lists is useful for readability. Here are examples of - [ ] Hello, this is another TODO item - [x] Goodbye, this item is done -#### Definition list - -Typically used for lists of terms and descriptions. - -{% raw %} -```liquid -{% include dl/open.html %} - -{% include dl/item-open.html color="red" %} - -“You will be shown your recovery phrase on the next screen” - -{% include dl/item-middle.html color="red" %} - -Prepares a user for what they are about to **see**. - -{% include dl/item-close.html %} - -{% include dl/close.html %} -``` -{% endraw %} - -{% include dl/open.html %} - -{% include dl/item-open.html color="red" %} - -“You will be shown your recovery phrase on the next screen” - -{% include dl/item-middle.html color="red" %} - -Prepares a user for what they are about to **see**. - -{% include dl/item-close.html %} - -{% include dl/item-open.html color="orange" %} - -“Your recovery phrase is a group of 12 random words” - -{% include dl/item-middle.html color="orange" %} - -Explains to users what a recovery phrase **is**. - -{% include dl/item-close.html %} - -{% include dl/item-open.html color="yellow" %} - -“Your recovery phrase is the only way to acess your wallet if your phone is lost or stolen.” - -{% include dl/item-middle.html color="yellow" %} +#### Definition with HTML syntax. -Explains to users what the **purpose** of a recovery phrase is and why it’s important. - -{% include dl/item-close.html %} - -{% include dl/item-open.html color="green" %} - -“If you lose your recovery phrase, you will no longer be able to access your wallet. Never share your recovery phrase with anyone. Anyone who has it can access your funds.” - -{% include dl/item-middle.html color="green" %} - -Explains to users what the **consequences** of their behavior is, and how it can affect the safety of their funds. - -{% include dl/item-close.html %} - -{% include dl/item-open.html %} - -“We recommend writing these words down in order on a piece of paper and storing it somewhere safe that you will remember.” - -{% include dl/item-middle.html %} - -Guides and gives users actionable items on how to safely **handle** their recovery phrase. - -{% include dl/item-close.html %} - -{% include dl/close.html %} +```markdown +
    +
    Name
    +
    Godzilla
    +
    Born
    +
    1952
    +
    Birthplace
    +
    Japan
    +
    Color
    +
    Green
    +
    +``` +
    +
    Name
    +
    Godzilla
    +
    Born
    +
    1952
    +
    Birthplace
    +
    Japan
    +
    Color
    +
    Green
    +
    ### Tables @@ -592,190 +538,102 @@ Ensure that your images provide a good overview of the prototype content, so use height = 500 %} -### Tips & recommendations - -For additional information that is useful, but does not fit into the main flow of the content. This component has two presets, but can also be customized. Here are the presets: - -#### Tips - -{% raw %} -```liquid -{% include tip/tip.html %} - -Sed in lacus vitae turpis lobortis ultrices. Aenean hendrerit nec elit in sagittis. Nulla mi ante, luctus vitae tincidunt ut, rhoncus ac ex. Morbi sit amet mauris est. - -{% include tip/close.html %} -``` -{% endraw %} - -{% include tip/tip.html %} - -Sed in lacus vitae turpis lobortis ultrices. Aenean hendrerit nec elit in sagittis. Nulla mi ante, luctus vitae tincidunt ut, rhoncus ac ex. Morbi sit amet mauris est. - -{% include tip/close.html %} - -#### Recommendations +### Recommendations For highlighting moments when we think there is a particular approach or solution that the reader should strongly connsider following. {% raw %} ```liquid -{% include tip/recommendation.html %} +{% include rec-open.html %} Most bitcoin products should use HD Wallets with Native Segwit addresses (unless focusing on maximum backwards compatibility). -{% include tip/close.html %} +{% include rec-close.html %} ``` {% endraw %} -{% include tip/recommendation.html %} +{% include rec-open.html %} Most bitcoin products should use HD Wallets with Native Segwit addresses (unless focusing on maximum backwards compatibility). -{% include tip/close.html %} +{% include rec-close.html %} -#### Custom use +### Tips -You can also customize which color, title and icon the component should display with the following template. Available colors are red, orange, yellow, green, and blue. +For additional information that is useful, but does not fit into the main flow of the content. {% raw %} ```liquid -{% include tip/open.html color="green" icon="check" label="My title" %} +{% include fact-pros.html %} -Most bitcoin products should use HD Wallets with Native Segwit addresses (unless focusing on maximum backwards compatibility). +Sed in lacus vitae turpis lobortis ultrices. Aenean hendrerit nec elit in sagittis. Nulla mi ante, luctus vitae tincidunt ut, rhoncus ac ex. Morbi sit amet mauris est. -{% include tip/close.html %} +{% include fact-close.html %} ``` {% endraw %} -{% include tip/open.html color="green" icon="check" label="Do this" %} - -Most bitcoin products should use HD Wallets with Native Segwit addresses (unless focusing on maximum backwards compatibility). +{% include tip-open.html %} -{% include tip/close.html %} - -{% include tip/open.html color="red" icon="forbid" label="Don't do this" %} - -Most bitcoin products should use HD Wallets with Native Segwit addresses (unless focusing on maximum backwards compatibility). +Sed in lacus vitae turpis lobortis ultrices. Aenean hendrerit nec elit in sagittis. Nulla mi ante, luctus vitae tincidunt ut, rhoncus ac ex. Morbi sit amet mauris est. -{% include tip/close.html %} +{% include tip-close.html %} ### Facts A table that provides specific descriptions based on standardized properties. Variations available are: -- fact/pros.html -- fact/cons.html -- fact/dos.html -- fact/donts.html -- fact/variations.html -- fact/products.html +- fact-pros.html +- fact-cons.html +- fact-when-to-use.html +- fact-when-not-to-use.html +- fact-variations.html +- fact-products.html {% raw %} ```liquid -{% include fact/pros.html %} +{% include fact-pros.html %} Can provide higher resistance to loss from theft and negligence. -{% include fact/close.html %} +{% include fact-close.html %} ``` {% endraw %} -{% include fact/pros.html %} +{% include fact-pros.html %} Can provide higher resistance to loss from theft and negligence. -{% include fact/close.html %} +{% include fact-close.html %} -{% include fact/cons.html %} +{% include fact-cons.html %} Require precise coordination of key-shares when signing, few advantages over multi-key setups with Schnorr signatures, individual implementations not interoperable. -{% include fact/close.html %} +{% include fact-close.html %} -{% include fact/dos.html %} +{% include fact-when-to-use.html %} When target audience is knowledgeable and risk of theft is higher than negligance. -{% include fact/close.html %} +{% include fact-close.html %} -{% include fact/donts.html %} +{% include fact-when-not-to-use.html %} When Schnorr signatures are available enabling multi-key setups. -{% include fact/close.html %} +{% include fact-close.html %} -{% include fact/variations.html %} +{% include fact-variations.html %} Number of signatures required, location and distribution of pieces, signing procedure. -{% include fact/close.html %} +{% include fact-close.html %} -{% include fact/products.html %} +{% include fact-products.html %} [Bitcoin wallet](https://bitcoin.design/), [BTC wallet](https://bitcoin.design/), [BeeTeeCee Wallet](https://bitcoin.design/) -{% include fact/close.html %} - -### Do's and don'ts - -This component allows for visual display and comparison of good and bad design implementations. The component consists of open, middle and close tags, between which regular markdown can be used. - -{% raw %} -```liquid -{% include do/open.html label="Do" icon="check" color="green" %} - -Provide clear error messages that tell users how to solve the problem. - -{% include image.html - image = "/assets/images/guide/contribute/formatting/example-image-square.jpg" - retina = "/assets/images/guide/contribute/formatting/example-image-square@2x.jpg" - alt-text = "Example image" - width = 400 - height = 400 -%} - -{% include do/middle.html label="Don't" icon="forbid" color="red" %} - -Write overly complex error messages that require deep technical knowledge. - -{% include image.html - image = "/assets/images/guide/contribute/formatting/example-image-square.jpg" - retina = "/assets/images/guide/contribute/formatting/example-image-square@2x.jpg" - alt-text = "Example image" - width = 400 - height = 400 -%} - -{% include do/close.html %} -``` -{% endraw %} - -{% include do/open.html label="Do" icon="check" color="green" %} - -Provide clear error messages that tell users how to solve the problem. - -{% include image.html - image = "/assets/images/guide/contribute/formatting/example-image-square.jpg" - retina = "/assets/images/guide/contribute/formatting/example-image-square@2x.jpg" - alt-text = "Example image" - width = 400 - height = 400 -%} - -{% include do/middle.html label="Don't" icon="forbid" color="red" %} - -Write overly complex error messages that require deep technical knowledge. - -{% include image.html - image = "/assets/images/guide/contribute/formatting/example-image-square.jpg" - retina = "/assets/images/guide/contribute/formatting/example-image-square@2x.jpg" - alt-text = "Example image" - width = 400 - height = 400 -%} - -{% include do/close.html %} +{% include fact-close.html %} ### Footnotes diff --git a/guide/foundations/foundations.md b/guide/foundations/foundations.md index 6a9d8ea75..a1900d236 100644 --- a/guide/foundations/foundations.md +++ b/guide/foundations/foundations.md @@ -14,12 +14,12 @@ Learn about some of the basics to keep in mind when designing Bitcoin applicatio --- -### [Bitcoin design principles]({{ '/guide/foundations/principles/' | relative_url }}) +**[Bitcoin design principles]({{ '/guide/foundations/principles/' | relative_url }})** -Core bitcoin design principles recommended by the Bitcoin Design Community. +Principles that the Bitcoin Design Community have identified and stand behind. Although every use case and product is different, applications should strive to follow these principles. --- -### [Wallet interoperability]({{ '/guide/foundations/wallet-interoperability/' | relative_url }}) +**[Wallet interoperability]({{ '/guide/foundations/wallet-interoperability/' | relative_url }})** -Get to know the points of interaction and overlap connecting payment links, wallet recovery, node configurations, and more. +An overview of important interaction points between Bitcoin applications and user experiences, from payment links and wallet recovery to node configuration. diff --git a/guide/foundations/principles.md b/guide/foundations/principles.md index 696752f7c..def48d13f 100644 --- a/guide/foundations/principles.md +++ b/guide/foundations/principles.md @@ -21,7 +21,7 @@ The key principles of designing for Bitcoin image = "/assets/images/guide/foundations/principles/principles.jpg" retina = "/assets/images/guide/foundations/principles/principles@2x.jpg" mobile = "/assets/images/guide/foundations/principles/principles-mobile.jpg" - mobileRetina = "/assets/images/guide/foundations/principles/principles-mobile@2x.jpg" + mobileRetina = "/assets/images/foundations/principles/principles-mobile@2x.jpg" alt-text = "Principles header illustration, five white circles in a horizontal line on black background" width = 1600 height = 600 diff --git a/guide/foundations/wallet-interoperability.md b/guide/foundations/wallet-interoperability.md index dbb196112..aa99e07ca 100644 --- a/guide/foundations/wallet-interoperability.md +++ b/guide/foundations/wallet-interoperability.md @@ -176,7 +176,7 @@ Per definition, multi signature wallets require interaction between all cosigner layout = "float-right-desktop" %} -While it is extremely convenient when applications provide their own node connections, it is recommended to allow users to have a choice, and potentially even encourage them to set up their own node. This results in better [decentralization](/guide/foundations/principles/#decentralization), and also has privacy and [security](/guide/foundations/principles/#security) benefits. +While it is extremely convenient when applications provide their own node connections, it is recommended to allow users to have a choice, and potentially even encourage them to set up their own node. This results in better decentralization, and also has privacy and security benefits.

    diff --git a/guide/getting-started/common-user-flows.md b/guide/getting-started/common-user-flows.md index 4c5f0a01b..9b0261216 100644 --- a/guide/getting-started/common-user-flows.md +++ b/guide/getting-started/common-user-flows.md @@ -70,7 +70,7 @@ Mobile app stores do a good job at providing previews of what using an app will Here are two different examples of webpages for downloading bitcoin wallet software. Which one allows users to better understand what using the software will be like? Which one builds more trust? -
    +
    {% include image.html image = "/assets/images/guide/getting-started/common-user-flows/app-store-bluewallet.jpg" @@ -79,7 +79,6 @@ Here are two different examples of webpages for downloading bitcoin wallet softw caption = 'BlueWallet landing page on the App Store' width = 400 height = 480 - layout = "shadow" %} {% include image.html @@ -89,7 +88,6 @@ Here are two different examples of webpages for downloading bitcoin wallet softw caption = 'bitcoincore.org' width = 400 height = 480 - layout = "shadow" %}
    @@ -113,123 +111,26 @@ Bitcoin is complex, and so it is recommended to think through and carefully shap Onboarding may be purely informational based on the content, but it also includes an initial setup that helps personalize the software towards the users' specific needs and context. After onboarding, users are mostly on their own, so the goal is to leave users with a clear idea of achieving what they came for. -The example screens below from the [Muun](https://muun.com/) iOS wallet (taken January 2021) use several different methods: +The example below shows a series of approaches: -1. Guide the user through information and setup one step at a time -1. Offer carousels of information users can choose to read (or skip) -1. Provide simple prompts of key actions -1. Confirm users are aware of their responsibilities - -You can find more screenshots [here](https://www.figma.com/file/rPyJ0Y8xg0kN4FrHFCeDRg/Muun-wallet?node-id=1%3A40). +1. Guide the user through forms one small step at a time +1. Offer a slideshow of information users can choose to read through +1. Provide a guided tour of the interface to orient users in the product +1. Offer prompts to primary actions and use cases
    - -
    - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-1@2x.png" - alt-text = "Muun iOS app cover screen" - caption = "Cover screen for new users." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-2@2x.png" - alt-text = "Pin entry screen" - caption = "Choosing a PIN for security." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-3@2x.png" - alt-text = "Confirmation screen that a wallet was created" - caption = "Letting users know that a wallet was successfully created." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-4@2x.png" - alt-text = "Home screen" - caption = "The home screen with a prompt to back up the wallet." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-5@2x.png" - alt-text = "Security center" - caption = "The security center guides users through different backup options." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-6@2x.png" - alt-text = "Information about the emergency kit backup option" - caption = "An instructional screen to inform users about the security option they are about to set up." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-7@2x.png" - alt-text = "Starting the backup process" - caption = "Another informational screen for the manual backup option." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-8@2x.png" - alt-text = "Asking users to write down their recovery code" - caption = "A screen that requests users to copy their recovery code." - width = 250 - height = 541 - layout = "shadow" -%} - -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-9@2x.png" - alt-text = "Ensuring users understand their responsibility in the security mechanisms of the application" - caption = "Confirming that users understand their responsibility in the security mechanisms of the app." - width = 250 - height = 541 - layout = "shadow" +{% include image.html + image = "/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding.jpg" + retina = "/assets/images/guide/getting-started/common-user-flows/blockchain-com-onboarding@2x.jpg" + alt-text = "Screenshots of the first-time user experience of the blockchain.com bitcoin wallet" + caption = 'Onboarding screens of the blockchain.com wallet as of September 2020' + width = 1024 + height = 630 + layout = "full-width" %} -{% include picture.html - image = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10.png" - retina = "/assets/images/guide/getting-started/common-user-flows/muun-onboarding-10@2x.png" - alt-text = "Success screen" - caption = "Giving users confirmation that the app is set up properly." - width = 250 - height = 541 - layout = "shadow" -%} - -
    - -See the [onboarding section](/guide/onboarding/introduction/) to learn more on this topic. +A whole section about onboarding is in development for this guide, stay tuned for more. ## Creating a new wallet @@ -303,31 +204,16 @@ While we all prefer to receive bitcoin, there are times when we need to send the
    -
    - {% include image.html - image = "/assets/images/guide/getting-started/common-user-flows/sending-ui-basic.png" - retina = "/assets/images/guide/getting-started/common-user-flows/sending-ui-basic@2x.png" - alt-text = "Example of a basic send screen" - caption = "A UI for sending bitcoin with just the basic information ([source](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1374%3A33577))." - width = 400 - height = 243 - layout = "shadow" + image = "/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity.jpg" + retina = "/assets/images/guide/getting-started/common-user-flows/sending-ui-complexity@2x.jpg" + alt-text = "Interface design examples of two send screens with different levels of complexity" + caption = "A bitcoin transaction can be extremely simple, but can also be finely tuned for users with specific needs." + width = 800 + height = 656 %} -{% include image.html - image = "/assets/images/guide/getting-started/common-user-flows/sending-ui-complex.png" - retina = "/assets/images/guide/getting-started/common-user-flows/sending-ui-complex@2x.png" - alt-text = "Example of a complex send screen" - caption = "An overly complex interface with advanced send options ([source](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1374%3A33792))." - width = 400 - height = 690 - layout = "shadow" -%} - -
    - -Once a transaction has been broadcast, the bitcoin network starts processing it. Users may want to stay informed about this progress, particularly when a transaction takes longer than expected. In extreme cases, it is possible to retroactively increase the transaction fee to get validated faster with a Replace-by-Fee technique. To find out more, visit the [Sending bitcoin](/guide/payments/send/) page. +Once a transaction has been broadcast, the bitcoin network starts processing it. Users may want to stay informed about this progress, particularly when a transaction takes longer than expected. In extreme cases, it is possible to retroactively increase the transaction fee to get validated faster with a Replace-by-Fee technique. ## Requesting bitcoin @@ -345,30 +231,15 @@ Once a transaction has been broadcast, the bitcoin network starts processing it. Equivalent to creating an invoice, requesting bitcoin involves entering information about this specific transaction and forwarding it to the payer. Overall, there is less complexity involved in this process than sending, but there are a few things for designers to consider.
    -
    - -{% include image.html - image = "/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info.png" - retina = "/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-enter-info@2x.png" - alt-text = "Example interface for entering payment request information." - caption = "A payment request starts with entering invoice information." - width = 400 - height = 276 - layout = "shadow" -%} - {% include image.html - image = "/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request.png" - retina = "/assets/images/guide/getting-started/common-user-flows/receiving-ui-example-share-request@2x.png" - alt-text = "Example interface for sharing a payment request." - caption = "Then the payment request needs to be shared with the payer." - width = 400 - height = 260 - layout = "shadow" + image = "/assets/images/guide/getting-started/common-user-flows/receiving-ui-example.jpg" + retina = "/assets/images/guide/getting-started/common-user-flows/receiving-ui-example@2x.jpg" + alt-text = "Interface design examples of two send screens with different levels of complexity" + caption = "A basic example of the information a user needs to add when requesting bitcoin." + width = 800 + height = 336 %} -
    - While it is initially intuitive to re-use the same receiving address repeatedly, this practice is highly discouraged. Anyone with this address can easily see what other payments are being made and how the bitcoins are spent. The UI should encourage users to create new addresses for each invoice. This also makes it easier for the software to understand when a specific payment has been received. The most important consideration is around how this request is securely shared and received. When transmitting this information, there is a risk that a third party can intercept it and tamper with it. This can result in Bitcoin getting sent to an attacker's address instead. So it is good to consider offering ways for both payee and payer to verify the accuracy of the information (for example, by allowing them to share the information via two different channels). diff --git a/guide/getting-started/getting-started.md b/guide/getting-started/getting-started.md index 328e25143..839339fbd 100644 --- a/guide/getting-started/getting-started.md +++ b/guide/getting-started/getting-started.md @@ -38,66 +38,66 @@ Welcome to the Bitcoin Design Guide! You’re in for an adventure. This chapter --- -### [Why Bitcoin is unique]({{ '/guide/getting-started/why-bitcoin-is-unique/' | relative_url }}) +**[Why Bitcoin is unique]({{ '/guide/getting-started/why-bitcoin-is-unique/' | relative_url }})** The internet has opened an infinite design space for information and communication. Bitcoin adds the new dimension of transferring value that could bring similar change as previous waves of innovation. --- -### [Why design for Bitcoin]({{ '/guide/getting-started/why-design-for-bitcoin/' | relative_url }}) +**[Why design for Bitcoin]({{ '/guide/getting-started/why-design-for-bitcoin/' | relative_url }})** Bitcoin is fundamentally open and participatory and allows designers and creators to explore and shape experiences for users around the globe. --- -### [Open design]({{ '/guide/getting-started/open-design/' | relative_url }}) +**[Open design]({{ '/guide/getting-started/open-design/' | relative_url }})** Open design is about global collaboration that balances the free exchange of design information, the independence of individual designers and the collective power of collaboration. --- -### [The visual language of Bitcoin]({{ '/guide/getting-started/visual-language/' | relative_url }}) +**[The visual language of Bitcoin]({{ '/guide/getting-started/visual-language/' | relative_url }})** As an open and public protocol, Bitcoin does not have a strictly defined brand. Yet there is a recognizable symbol that has evolved and remixed endlessly. --- -### [User research]({{ '/guide/getting-started/user-research/' | relative_url }}) +**[User research]({{ '/guide/getting-started/user-research/' | relative_url }})** All products begin with user needs and end in those same users hands. User research is a fundamental activity that helps us focus on things people care about. --- -### [Personal finance]({{ '/guide/getting-started/personal-finance/' | relative_url }}) +**[Personal finance]({{ '/guide/getting-started/personal-finance/' | relative_url }})** If we consider Bitcoin money, we need to consider how Bitcoin users think about their finances. This page provides a simple framework that can serve as a starting point, deriving bitcoin software and hardware setups from common budgeting categories. --- -### [Usage life cycle]({{ '/guide/getting-started/usage-life-cycle/' | relative_url }}) +**[Usage life cycle]({{ '/guide/getting-started/usage-life-cycle/' | relative_url }})** All users start without any knowledge of Bitcoin or your particular product. As we learn more, our understanding and needs change. As designers, it is essential to guide users through this experience. --- -### [Common user flows]({{ '/guide/getting-started/common-user-flows/' | relative_url }}) +**[Common user flows]({{ '/guide/getting-started/common-user-flows/' | relative_url }})** Most Bitcoin applications share certain user activities, from initial setup to making a transaction. It is vital to follow users' expected patterns and behaviors to reduce mistakes and enable seamless switching between products. --- -### [Technology primer]({{ '/guide/getting-started/technology-primer/' | relative_url }}) +**[Technology primer]({{ '/guide/getting-started/technology-primer/' | relative_url }})** Learn the basics behind the technologies that make Bitcoin work, from what a Bitcoin is to how transactions are confirmed. --- -### [Software overview]({{ '/guide/getting-started/software/' | relative_url }}) +**[Software overview]({{ '/guide/getting-started/software/' | relative_url }})** Bitcoin applications roughly fall into a defined set of categories, from consumer-friendly wallets, to merchant tools, and more. --- -### [Hardware overview]({{ '/guide/getting-started/hardware/' | relative_url }}) +**[Hardware overview]({{ '/guide/getting-started/hardware/' | relative_url }})** Whether it's for security or participating in the network, Bitcoin hardware is an essential part of the ecosystem and user experience. diff --git a/guide/getting-started/personal-finance.md b/guide/getting-started/personal-finance.md index dbb3c2683..90ead14d6 100644 --- a/guide/getting-started/personal-finance.md +++ b/guide/getting-started/personal-finance.md @@ -44,7 +44,7 @@ It still is possible to create simplified mental models that help us better unde This section uses the traditional personal finance lens to think about what type of bitcoin products we may need. Because of bitcoin's unique properties, we cannot imitate conventional financial products and assume that the same solutions apply. And even if we could, this might be an excellent opportunity to take a fresh look and design new solutions for today's world. Bitcoin is also global by nature, so consider the unique circumstances of your users' lives. -Let's take a look at six different categories of how somebody may want to organize their finances. Note that the following examples always assume that a user wants to keep as much [self-custody](/guide/foundations/principles/#self-custody) as reasonable while balancing [security](/guide/foundations/principles/#security) and [privacy](/guide/foundations/principles/#privacy). +Let's take a look at six different categories of how somebody may want to organize their finances. Note that the following examples always assume that a user wants to keep as much self-custody as reasonable while balancing security and privacy. 1. Table of contents {:toc} @@ -203,7 +203,7 @@ For example, [Glacier Protocol](https://glacierprotocol.org){:target="_blank"} i height = 800 %} -Many people don’t self-cusody their long-term savings. They rely on banks and financial service providers to provide security and help manage and invest those savings. Savings accounts and related products may also incentivize customers with low-interest rates that may or may not be high enough to keep up with inflation. +Many people don’t personally custody their long-term savings. They rely on banks and financial service providers to provide security and help manage and invest those savings. Savings accounts and related products may also incentivize customers with low-interest rates that may or may not be high enough to keep up with inflation. ## Investing diff --git a/guide/getting-started/software.md b/guide/getting-started/software.md index 9c4867a47..8875ddf01 100644 --- a/guide/getting-started/software.md +++ b/guide/getting-started/software.md @@ -86,7 +86,7 @@ Explorers often also provide insight into activity on the bitcoin network, like Wallet provide easy-to-use graphical interfaces for a wide audience. Wallets many times don't offer all functionality that can be found in a CLI, but instead focus on general use cases like making payments and browsing transactions. -Due to the nature of open-source, wallets can be developed by anyone with the technical knowledge, and many code libraries are available to simplify this task. +Due to the nature of open-source, wallets can be developed by anyone with the technical knowledge, and many code libraries are available to simplify this task.
    Features can vary by application but always include wallet setup, viewing balances and transactions, and sending and receiving bitcoin. The range of additional features wallets may support is broad, from security and privacy to transaction management, currency exchange, accounting, and interoperability to accessibility and localization. Which features to include should be based on the specific use cases and user needs of your product. @@ -94,8 +94,6 @@ Some of these features come with highly complex technical challenges and can be Another reason is that standards are still evolving as some of the technology is still maturing. Even fundamental aspects like address formats and how keys are generated can be implemented in incompatible ways. -

    - ## Payment processors
    diff --git a/guide/getting-started/technology-primer.md b/guide/getting-started/technology-primer.md index 17e6d1004..2eb0f7b3e 100644 --- a/guide/getting-started/technology-primer.md +++ b/guide/getting-started/technology-primer.md @@ -27,10 +27,10 @@ Illustration sources --> {% include picture.html - image = "/assets/images/guide/getting-started/technology/blueprint.png" - retina = "/assets/images/guide/getting-started/technology/blueprint@2x.png" - mobile = "/assets/images/guide/getting-started/technology/blueprint-mobile.png" - mobileRetina = "/assets/images/guide/getting-started/technology/blueprint-mobile@2x.png" + image = "/assets/images/guide/getting-started/technology/blueprint.jpg" + retina = "/assets/images/guide/getting-started/technology/blueprint@2x.jpg" + mobile = "/assets/images/guide/getting-started/technology/blueprint-mobile.jpg" + mobileRetina = "/assets/images/guide/getting-started/technology/blueprint-mobile@2x.jpg" alt-text = "Blueprint illustration of a bitcoin symbol" width = 1600 height = 800 diff --git a/guide/getting-started/user-research.md b/guide/getting-started/user-research.md index 5d6911087..16a9c89e1 100644 --- a/guide/getting-started/user-research.md +++ b/guide/getting-started/user-research.md @@ -132,7 +132,7 @@ While we cannot know who is directly responsible for the activity, we can analyz New technologies can take decades to reach adoption by mainstream audiences. Bitcoin is still early in the adoption curve, which affects research in multiple ways. Early adopters have different use cases and needs than users who will discover Bitcoin in the future. Products designed for today's user base may be inappropriate soon. -Secondly, as the technology is maturing, its capabilities evolve as well. Scaling and performance improvements make complex transactions more affordable, better privacy, and security properties allow individuals to [self-custody](/guide/foundations/principles/#self-custody) more comfortably and much more. There is an interplay between the size of the user base and the maturity of the technology. +Secondly, as the technology is maturing, its capabilities evolve as well. Scaling and performance improvements make complex transactions more affordable, better privacy, and security properties allow individuals to self-custody more comfortably and much more. There is an interplay between the size of the user base and the maturity of the technology. For user research, this means that findings may become outdated quicker as they are closely linked to a specific point in time. diff --git a/guide/getting-started/why-bitcoin-is-unique.md b/guide/getting-started/why-bitcoin-is-unique.md index 09f0941d7..4eb299bb2 100644 --- a/guide/getting-started/why-bitcoin-is-unique.md +++ b/guide/getting-started/why-bitcoin-is-unique.md @@ -35,7 +35,16 @@ Illustration sources # Why Bitcoin is unique -The Internet lets people anywhere instantly exchange ideas and information with people everywhere. Bitcoin takes this further by giving everyone a built-in method for storing and transferring value online. +The internet has changed the world. Barriers to global communication and the exchange of information are reduced to almost nothing. Bitcoin adds another important dimension to this and brings us a natively digital method for storing and transferring value. + + ## It's money, but digital @@ -51,36 +60,19 @@ The Internet lets people anywhere instantly exchange ideas and information with layout = "float-right-desktop" %} -Historically, in order to be considered money, it must be usable as each of the following: +The economic definition of money typically involves three specific [functions](https://en.wikipedia.org/wiki/Money#Functions) (medium of exchange, unit of account, store of value) and five [properties](https://en.wikipedia.org/wiki/Money#Properties) (durability, portability, fungibility, scarcity, divisibility, recognizability). Although bitcoin is a new breed of money, it still satisfies all of these requirements. Instead of relying on physical properties (like gold and silver) or trust in central authorities (like traditional currencies), bitcoin relies on a network of thousands of computers to enforce its mathematically defined ruleset. -1. A medium of exchange -2. A unit of account -3. A store of value - -In addition, six fundamental properties define whether or not a currency can actually function as money. Those [properties](https://en.wikipedia.org/wiki/Money#Properties) are: - -1. Durability -2. Portability -3. Fungibility -4. Scarcity -5. Divisibility -6. Recognizability - -Although bitcoin is purely digital, it meets every classical definition of what makes something money. Instead of relying on physical properties (like gold and silver) or central authorities (like government-issued fiat currencies), bitcoin relies on the world’s most powerful computer network to mathematically enforce the rules that make it the first truly digital form of cash.
    ## You own it -When you take cash out of your bank account, it becomes your responsibility. If you lose it, it’s lost. If you transact with it, no middleman can block the transaction. Either way, you are its custodian—this is bitcoin in a nutshell. It’s digital, self-custodial cash. - - -Bitcoin combines the custodial benefits of physical cash with the convenience of online banking and payment processing. But unlike your bank, bitcoin has never been hacked. So as long as you responsibly manage your private keys, not only do you own your bitcoin, no one can take them away. +When we carry cash, we are entirely in control of its value. When we purchase something and give the cash away, it is gone. Online banking and payments rely on third parties that hold our money for us and allow us to access it through their websites and applications. Bitcoin manages to combine the benefits of cash as a bearer instrument with online banking convenience. When you control your bitcoin private keys, nobody in the world can take your bitcoin. ## Global by default -If you can access the Internet, you can access bitcoin. As of 2019, roughly [53.6% of the world’s population](https://en.wikipedia.org/wiki/Global_Internet_usage) was online. That means 53.6% of the world already has access to bitcoin. This makes bitcoin the first currency of any kind entirely unbound by national borders. It also makes it the first currency to completely cut out middlemen like currency exchanges, local payment services, and banks. +Bitcoin can be used by anyone with an internet connection, which is available to around [53.6% of the world population](https://en.wikipedia.org/wiki/Global_Internet_usage), a number that is growing quickly. Some aspects of bitcoin, like key and address generation, even work without being online. This makes it the first truly globally available form of money that is unbound by country borders. People from around the world can freely transact without having to rely on middlemen like currency exchanges and local payment services. -## Equal treatment for all +## All participants are treated equally
    @@ -94,21 +86,18 @@ If you can access the Internet, you can access bitcoin. As of 2019, roughly [53. layout = "float-right-desktop" %} -Bitcoin uses scrambled, pseudonymous strings of letters and numbers in place of personal information, real-life identities, and even usernames. It treats everyone from individuals to corporations and governments the same. No group has the power to censor transactions, shut others out of the network, or confiscate another’s bitcoin. While certain services might discriminate or request personal information, the Bitcoin network not only won’t, but can’t. +Bitcoin as a technical protocol relies on addresses and does not work with persons' concepts, real-life identities, or even user names. Individuals, companies, governments, and anyone else interact with it on a level playing field with the same rights and benefits. No group can shut another group out at a fundamental level, censor transactions, or confiscate bitcoin. This naturally only applies to bitcoin itself, and services built on bitcoin may enforce identity verification and discriminate between users.
    -## Bitcoin complements existing financial systems - -Globally, around [1.7 billion adults](https://globalfindex.worldbank.org/sites/globalfindex/files/chapters/2017%20Findex%20full%20report_chapter2.pdf) have no access to banking services, including [55 million US citizens](https://en.wikipedia.org/wiki/Unbanked#The_unbanked_in_the_United_States). -Geographical distance, lack of access to dependable institutions, and exclusion based on legal, social, and financial status are just some of the factors that contribute to this disparity. +## It complements existing financial systems -However, because bitcoin is unbiased, open, and public, it can serve communities that conventional financial institutions overlook, helping grow economies and creating economic mobility where it never existed. +Around [1.7 billion adults](https://globalfindex.worldbank.org/sites/globalfindex/files/chapters/2017%20Findex%20full%20report_chapter2.pdf) do not have access to banking services, including roughly [55 million US citizens](https://en.wikipedia.org/wiki/Unbanked#The_unbanked_in_the_United_States). Reasons may include that lack of availability of financial services, lack of trustworthy institutions, or exclusion of certain parts of the population due to their legal, social or financial status. Bitcoin has the potential to serve these individuals, as it is an unbiased, open, and public network. This can be an incredibly equalizing force for many people and use cases and opens up new economic opportunities. ## It is open-source -It's only appropriate that the bitcoin ecosystem is being developed by teams and individuals worldwide. Not many financial institutions allow anyone to participate and contribute to them. So it’s fitting that bitcoin almost exclusively relies on collaboration between volunteers from around the world to keep it running and evolving. +How many currencies and payment networks allow anyone to show up, participate and contribute? This has traditionally not been possible since those systems rely on central authorities to function. Bitcoin relies on thousands of volunteer contributors to collaboratively keep the system running, evolve it, and build services on top of it. This community of passionate contributors creates the free software that keeps Bitcoin running and allows everyone to interact with it as they desire. --- -Wondering why you should [design for bitcoin?]({{ '/guide/getting-started/why-design-for-bitcoin/' | relative_url }}) Read on. +Continue on and find out why you should [design for bitcoin]({{ '/guide/getting-started/why-design-for-bitcoin/' | relative_url }}). diff --git a/guide/getting-started/why-design-for-bitcoin.md b/guide/getting-started/why-design-for-bitcoin.md index fad87681f..6eb77cfa3 100644 --- a/guide/getting-started/why-design-for-bitcoin.md +++ b/guide/getting-started/why-design-for-bitcoin.md @@ -37,37 +37,35 @@ Illustration sources # Why design for bitcoin -Bitcoin lets designers seeking the next big challenge build a new kind of money and how we send, spend, save, and store that money. Since Bitcoin’s brand has no owner to set it in stone, you can still have a big impact on Bitcoin even if you aren’t a product designer. And that’s just for starters. +At first, Bitcoin may sound like a complex technical innovation. A closer inspection reveals exciting new opportunities for designers to shape user experiences that can make a fundamental difference for people worldwide. So much of our lives is tied to money and financial systems, yet we sometimes have so little control or influence. Bitcoin has the potential to balance this, and it's up to us to make it a reality. -## It’s the internet of money +## Be on the cutting edge -Even though it was released in 2008, Bitcoin is still in its infancy. Working on Bitcoin today is like working on the Internet in its early days—many of the biggest and most exciting problems have yet to be solved or even discovered. +The Bitcoin white paper was released in 2008. Over a decade later, it is still a young and maturing technology full of potential. Like working early on the internet, there are big and exciting questions to be discussed and design decisions to be made. Designing for bitcoin is a fantastic and rewarding challenge. -## Build what you want +## Permissionless -Bitcoin is permissionless; this means that there are no individual, corporate, or governmental gatekeepers deciding what’s allowed, so anything that you build has the potential to grow beyond what even the most well-funded can imagine. +The idea that there are no gatekeepers is baked into the foundation of Bitcoin and its ecosystem. A Bitcoin wallet designed by you is as official as one created by a big corporation. -## Blaze trails one pixel at a time +## Blaze the trail -Few open designers currently work full-time on Bitcoin. Most have 9–5 jobs, and like most of Bitcoin’s open-source developers, contribute when they can. As the ecosystem grows, more opportunities to be among the first full-time Bitcoin designers are bound to open up. - -So if you’re looking for the next big thing in design, you found it. +There are still very few dedicated designers working in the Bitcoin ecosystem. As we have seen with the evolution of the internet, it takes time to adopt new technology. If you are curious and excited about new challenges, here's your chance. ## Design for your needs -Many design projects start by identifying an unmet need then designing something that meets it. Unlike traditional finance, the barriers to entry into Bitcoin are shallow. So if you feel like your needs aren’t being met by your bank or service provider, here’s your chance to shape something better. +Many bitcoin projects start by identifying an unmet need. Unlike traditional finance, the barriers to entry are shallow. So if you were ever unhappy with the service of your bank or financial provider, here's your chance to shape something better. ## Work in public -Bitcoin development is open-source. Designing for Bitcoin is no different. It lets you learn, grow, and exchange ideas in the same open and collaborative way. Learn out more about the [open design]({{ '/guide/getting-started/open-design/' | relative_url }}) philosophy. +Bitcoin is open-source, and designing for Bitcoin allows you also work on the same ideas of publicly sharing and collaborating on design information. Free from agencies and corporations' structures, open collaboration allows every participant to have a voice and shape the way they work based on their interests and preferences. Find out more about [open design]({{ '/guide/getting-started/open-design/' | relative_url }}). ## Design money -Central authorities tightly control Government-issued currencies. This means that they are anything but open and experimental. At every level, Bitcoin places a great deal of value on openness and experimentation, letting designers build the future of money in their own way. The emergence of thousands of “alternative” coins, hundreds of wallets, and countless Bitcoin businesses signify just how open this space is. +Money is a powerful force and therefore heavily regulated and controlled. The composition of bitcoin allows us to trust in its value and availability while also providing vast freedom to experiment and build on top of it. The emergence of thousands of so-called alternative coins, hundreds of wallets, and the many bitcoin businesses are the most apparent signifier of just how open this space is. ## Join a global community -Design and build experiences with friends and strangers. Participate in or even help lead one of the fastest growing design ecosystems in the world. +The doors are wide open, and Bitcoin design is discussed publicly online and any social media service you can think of. Design and build with friends and strangers, participate in the various communities and help shape an ecosystem for design and creativity. --- diff --git a/guide/glossary.md b/guide/glossary.md index d341094ca..96bbce971 100644 --- a/guide/glossary.md +++ b/guide/glossary.md @@ -39,7 +39,7 @@ https://www.figma.com/file/qzvCvqhSRx3Jq8aywaSjlr/Bitcoin-Design-Guide-Illustrat --- -### Address +## Address An identifier of 26-35 alphanumeric characters that is used to receive bitcoin. There are [several address formats](https://en.bitcoin.it/wiki/List_of_address_prefixes) based on different specifications. Users need to know this information during backup for future recovery so applications should inform users which format it uses as support varies across applications. @@ -71,7 +71,7 @@ For example: `bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq` **Change address**
    When the output of a transaction is used as the input of another transaction, it must be spent in its entirety. Sometimes the value of the output is higher than what the user wishes to pay. In this case, the bitcoin client generates a new Bitcoin address, and sends the difference back to this address. This is known as *change address*. -### Account +## Account Just like wallet, the term account can also be used for very different things. In bitcoin wallets that follow the hierarchy described in [BIP44](https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki), a bitcoin wallet can have multiple accounts, with each one having its own addresses. However, account is also oftentimes used for accounts with third-party service providers. @@ -80,19 +80,19 @@ Differentiate between - Bitcoin wallet account - Service account -### Bitcoin / bitcoin +## Bitcoin / bitcoin Bitcoin with a capital *B* is typically associated with Bitcoin the protocol and payment network. It is also often used to refer to as the ecosystem as a whole when writing about it in general terms. Bitcoin with a lowercase “b” written as “bitcoin” is usually associated specifically with bitcoin as the currency. -### Bitcoin Client +## Bitcoin Client -What is considered a Bitcoin client? I'd suggest it's a software package comprising node / base layer wallet features. [Several other](https://coin.dance/nodes) clients exist besides Bitcoin Core. -Bosch -### Bitcoin Core +## Bitcoin Core An open source Bitcoin project that maintains and releases Bitcoin client also referred to as "Bitcoin Core." Bitcoin Core is often considered as the *reference implementation* and serves as the specification of the Bitcoin protocol. It is the continuation of Satoshi Nakamoto's original bitcoin client released on 9th January 2009. More on the [Bitcoin Wiki](https://en.bitcoin.it/wiki/Bitcoin_Core) and [Bitcoin Core website](https://bitcoincore.org/). -### BIP - Bitcoin improvement proposal +## BIP - Bitcoin improvement proposal A standardized technical document format for suggesting improvements to Bitcoin. They are hosted on Github [here](https://github.com/bitcoin/bips). Some important proposals to be aware of: @@ -104,7 +104,7 @@ A standardized technical document format for suggesting improvements to Bitcoin. - [BIP173](https://github.com/bitcoin/bips/blob/master/bip-0173.mediawiki): *Bech32* standard for native SegWit addresses - [BIP174](https://github.com/bitcoin/bips/blob/master/bip-0174.mediawiki): Partially Signed Bitcoin Transaction Format -### Coin control +## Coin control
    @@ -125,7 +125,7 @@ As it is possible to trace the history of coins and see how they were previously
    -### CoinJoin +## CoinJoin
    @@ -143,7 +143,7 @@ As it is possible to trace the history of coins and see how they were previously
    -### Derivation path +## Derivation path There are several standards for how to notate the path to a key and corresponding address in [HD wallets](#hd-wallet). It is important to know which ones are used and supported by a wallet-application when importing and exporting a wallet. The most common are: @@ -152,45 +152,44 @@ There are several standards for how to notate the path to a key and correspondin - [BIP49](https://github.com/bitcoin/bips/blob/master/bip-0049.mediawiki): multi-account, for script addresses with nested-SegWit - [BIP84](https://github.com/bitcoin/bips/blob/master/bip-0084.mediawiki): multi-account, for SegWit addresses -BIP44 introduced the following structure, which BIP49 and BIP84 follow:
    +BIP44 instroduced the following structure, which BIP49 and BIP84 follow:
    `m / purpose / coin_type / account / change / index` The path to the first address in a bitcoin-wallet using BIP84 will look like this:
    `m/84h/0h/0h/0/0` -For full [interoperability](/guide/foundations/principles/#interoperability) a wallet should support all of these standards. More information can be found [here](/guide/foundations/wallet-interoperability/#wallet-import-and-export) and [here](https://learnmeabitcoin.com/technical/derivation-paths). +For full interoperability a wallet should support all of these standards. More information can be found [here](https://learnmeabitcoin.com/technical/derivation-paths). -### Extended private key (XPRIV) +## Extended private key (XPRIV) In a hierarchical deterministic wallet, all addresses and their matching private keys are derived from this extended private key. -### Extended public key (XPUB, YPUB, ZPUB) +## Extended public key (XPUB, YPUB, ZPUB) The master public key of a bitcoin account. All public addresses are generated from it. _ToDo: Explain how this is used for multisig and view-only wallets._ -#### YPUB +### YPUB Same as XPUB however the Y denotes that this xpub belongs to a wallet that is following the [BIP49](https://github.com/bitcoin/bips/blob/master/bip-0049.mediawiki) standard that details the derivation scheme for wrapped-segwit addresses (P2WPKH-nested-in-P2SH). -#### ZPUB +### ZPUB Same as YPUB though the Z denotes it is an extended public key from a segregated witness enabled wallet following [BIP84](https://github.com/bitcoin/bips/blob/master/bip-0084.mediawiki). -### Initial block download (IBD) +## Initial block download (IBD) To fully verify that all transactions on the bitcoin network are valid, a full node needs to download and examine all previous block-data. This is called the initial block download, after which the node has caught up with the latest transaction activity. This can take several hours, and only after it is complete can wallets linked to the node be used. -### Input +## Input When an address receives bitcoin from another address, this is called an input. Transactions can include multiple inputs. -### Keys - +## Keys Bitcoin wallets and addresses are have both [public](#public-key) and [private keys](#private-key) associated to them. The private key controls access to funds and the ability to sign (approve) transactions. -### Miniscript +## Miniscript A language for writing certain types of Bitcoin Scripts in a structured way. Miniscript is easier to read by developers, and also allows for various build-tools to help ensure that scripts are safe, valid, and efficient. @@ -199,39 +198,36 @@ A language for writing certain types of Bitcoin Scripts in a structured way. Min - [Bitcoin Optech](https://bitcoinops.org/en/topics/miniscript/) - [Introduction](https://medium.com/blockstream/miniscript-bitcoin-scripting-3aeff3853620) by Blockstream -### Multi-signature wallet (Multisig) - +## Multi-signature wallet (Multisig) Multi-signature wallets are bitcoin wallets that are controlled by more than one keypair. They can be defined by bitcoin scripts and use P2SH addresses. Common usecases and setups include *2-of-3*, or *3-of-5* multi-signature wallets that require a subset of the controlling keypairs to sign a transaction. -### MuSig - +## MuSig A standard for multi-signature that uses Schnorr signatures. Previously, the more signers participated in a transaction, the size of the transaction got larger and took more time to verify. It was also possible to see the number of signers in the final transaction. MuSig addresses both issues. It hides the number of signers for better privacy. MuSig also improves scalability by reducing the size of transactions and being more efficient to verify. The [original paper that describes MuSig](https://eprint.iacr.org/2018/068). **References:** - [Proposal](https://eprint.iacr.org/2018/068) in the Cryptology ePrint archive -### Node +## Node Node refers to [software]({{ '/guide/getting-started/software/#nodes' | relative_url }}) that participates in the bitcoin network. It exchanges transaction data with other nodes, stores some or all of it, and verifies that transactions are valid. There is also dedicated [node hardware]({{ '/guide/getting-started/hardware/#hardware-wallets' | relative_url }}). -#### Full node +### Full node A node that fully verifies all transactions and rules of the Bitcoin network. -#### Pruned full node +### Pruned full node A node that fully verifies all of the rules of the Bitcoin network with a much smaller storage capacity because it only stores transactions relevant to the users wallet. -#### Archival node +### Archival node A full node that has not only verified all data, but also stores and provides it to other nodes on the network. -### Output - +## Output The opposite of an input, an output is when an address sends bitcoin to another address. Transactions can include multiple outputs. -### Output script descriptor +## Output script descriptor A small piece of data that has all the information needed to generate a specific set of addresses or keys. Bundling this data in a standardized format has several benefits. It is harder to forget important configuration details, and it is more efficient than transmitting a long list of addresses or keys. @@ -245,8 +241,7 @@ A small piece of data that has all the information needed to generate a specific height = 400 %} -### Private key - +## Private key Every bitcoin address has a public key and a corresponding private key, together they are called a keypair. If you have access to both the public and private key, you effectively control the funds in the address. As with HD Wallets there are also keypairs that control *branches* in the hierarchical tree of the wallet, and at the very top is the extended keypair (x-pub and x-prv for short) that control all the addresses in the wallet. The private key is a 64 hexadecimal (or 256 if described in binary 1’s and 0’s) character string generated by the encryption algorithm. They look something like this in hexadecimal form: @@ -257,15 +252,13 @@ Or for the extended private key: `xprv9zrji5mK3nb4RbuR2ZYFtyzK3gn78KnEzkNP4ZxwwPPwcgQQVZqnjTMAGxmmM3jpmfsthQUtfD9iYPvnaqwejCjcyEswLqEhX4LPKNFUXT5` -### Public key - +## Public key A bitcoin address' public key can be derived from the private key. The address itself is a hash of the public key. -### Replace-by-fee (RBF) - +## Replace-by-fee (RBF) A node policy that allows an unconfirmed transaction to be replaced with a different transaction that spends at least one of the same inputs and which pays a higher transaction fee. This can sometimes be useful if a transaction has got *stuck* during times of higher-than-normal network-fees. -### Recovery phrase +## Recovery phrase _Also referred to as Seed, Mnemonic, and Backup phrase._ @@ -275,8 +268,7 @@ Many wallet-applications work with HD Wallets and recovery phrases, and are inte **Technicalities** - Recovery of multisig-wallets needs both the extended public key and the recovery phrase of all paticipating keys as well as the master key fingerprint as defined by BIP32 concatenated with the derivation path of the public key. The derivation path is represented as 32-bit little endian unsigned integer indexes concatenated with each other. The number of 32 bit unsigned integer indexes must match the depth provided in the extended public key. -### Simplified payment verification (SPV) - +## Simplified payment verification (SPV) It is possible to verify bitcoin payments without running a full network node. This is called simplified payment verification, or SPV. A user’s bitcoin spv wallet only needs a copy of the block headers of the longest chain, which are available by querying network nodes until it is apparent that the longest chain has been obtained. SPV lets you validate your transactions without having to worry about anybody else’s transactions. It ensures your transactions are in a block, and it provides confirmations that additional blocks are being added to the chain. An SPV wallet is a type of bitcoin wallet that works this way. **References:** @@ -284,11 +276,11 @@ Many wallet-applications work with HD Wallets and recovery phrases, and are inte - [WabiSabi](https://github.com/zkSNACKs/WabiSabi/blob/master/explainer.md) - [Bitcoin wiki](https://en.bitcoin.it/wiki/CoinJoin) -### PayJoin (P2EP) +## PayJoin (P2EP) A type of [CoinJoin](#coinjoin) for direct transactions between two parties that makes it harder to understand the ownership of the inputs included in the transaction. The sender creates a partial transaction that the recipient adds another input to. Then the sender broadcasts the transaction. The same amount of bitcoin is transferred as in a simple bitcoin transaction. However, the additional input from the recipient makes it harder to analyze from the outside what happened in the transaction. -### Schnorr signature +## Schnorr signature An algorithm to generate cryptographic signatures. One of the benefits is that the size of multi signature transactions can be reduced, resulting in lower fees, and that multisignature transactions will appear equal to single signature, increasing privacy (see [MuSig](#musig)). The code for this improvement was merged in Bitcoin Core in September 2020. @@ -298,32 +290,31 @@ An algorithm to generate cryptographic signatures. One of the benefits is that t - [Bitcoin wiki]() - [BIP340]() -### Segregated witness (SegWit) - +## Segregated witness (SegWit) Segregated Witness, or SegWit, is the name for a soft fork change in the transaction format of Bitcoin. It was described in [BIP141](https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki). It was intended to mitigate a blockchain size limitation problem that reduces bitcoin transaction speed. It does this by splitting the transaction into two segments, removing the unlocking signature (*witness* data) from the original portion and appending it as a separate structure at the end. The original section hold the sender and receiver data, and the new *witness* structure contain scripts and signatures. -### Taproot +## Taproot A technique that makes complex multisig transactions look the same as standard transactions on the blockchain. This improves both efficiency and privacy, as multiple signatures are combined into a single one. -### Transaction +## Transaction *ToDo* -### Unspent transaction output (UTXO) +## Unspent transaction output (UTXO) An output that has not been sent to another address. The bitcoin wallet balance is calculated from adding up unspent outputs. -### Partially signed bitcoin transaction (PSBT) +## Partially signed bitcoin transaction (PSBT) A file format for bitcoin transactions that are not fully signed yet. Allows for passing around a transaction to other applications or devices for signing, for example in a multi signature wallet setup. **References:** - [BIP174](https://github.com/bitcoin/bips/blob/master/bip-0174.mediawiki): Partially Signed Bitcoin Transaction Format -### Vault +## Vault A term sometimes used for multi-signature wallets. -### Wallet +## Wallet
    @@ -340,25 +331,25 @@ This term is often used interchangeably for very different things. A user can *d
    -#### Bitcoin wallet +### Bitcoin wallet All bitcoin-related data derived from and associated with a single recovery phrase. Most modern bitcoin wallets are HD wallets. -#### HD wallet +### HD wallet Hierarchical Deterministic wallets, or HD wallets, can create infinite keypairs organized in a tree-structure (hierarchical) from a single (deterministic) controlling keypair. They were introduced and defined in [BIP32](https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki) and then expanded with [BIP44](https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki) which added the ability to handle multiple *accounts* in one wallet. **Technicalities** - There are different bitcoin address formats (see [address](#address)). They have to be held in different branches of the HD wallet but can be controlled by the same recovery phrase. -#### Hardware wallet +### Hardware wallet A hardware device used to manage a bitcoin wallet. More on the [Hardware overview]({{ '/guide/getting-started/hardware/#hardware-wallets' | relative_url }}) page. -#### Wallet application +### Wallet application A software application used to manage a bitcoin wallet. More on the [Hardware overview]({{ '/guide/getting-started/software/#wallets' | relative_url }}) page. -#### Non-custodial / Custodial wallet +### Non-custodial / Custodial wallet _Also known as unhosted / self-hosted / hosted wallet._ @@ -366,14 +357,14 @@ A non-custodial wallet-application implies that the private key and/or recovery With a custodial wallet-application, the users are not exposed to and in charge of securing the recovery phrase. Often custodial wallet-applications require users to sign in with their email and password. Users have to trust the wallet-application makers to secure their recovery phrase and bitcoin. With a custodial wallet-application, the makers of it are technically in control of their users' funds. Most exchanges give users custodial wallets. -#### Hot / Cold wallet +### Hot / Cold wallet *Hot* and *cold* describe a wallet in terms of being connected to the internet. Where a hot wallet is connected to the internet, a cold wallet is not. The idea is that a cold wallet is less susceptible to third-party theft over the internet. Most software wallet-application would be seen as hot (although some can be used just for signing on a device not connected to the internet) and most hardware wallet-application would be seen as cold (although they are sometimes connected for signing purposes). -### Additional resources +## Additional resources - [Bitcoin.org](https://bitcoin.org/en/vocabulary) - [Bitcoin Q + A glossary](https://www.bitcoinqna.com/glossary) - [Bitcoin Wiki](https://en.bitcoin.it/wiki/Main_Page) - [Bitcoin Optech style guide](https://github.com/bitcoinops/bitcoinops.github.io/blob/master/STYLE.md) -- [Bitcoin Optech topics](https://bitcoinops.org/en/topics/) \ No newline at end of file +- [Bitcoin Optech topics](https://bitcoinops.org/en/topics/) diff --git a/guide/onboarding/creating-a-new-wallet.md b/guide/onboarding/creating-a-new-wallet.md deleted file mode 100644 index d53b615a9..000000000 --- a/guide/onboarding/creating-a-new-wallet.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -layout: guide -title: Creating a new wallet -description: Steps to take when creating a new wallet -parent: Onboarding -nav_order: 2 -permalink: /guide/onboarding/creating-a-new-wallet/ -main_classes: -no-top-padding ---- - -# Creating a new wallet - -First, bitcoin [wallets]({{ 'guide/glossary/#wallet' | relative_url }}) are not analogous to their namesakes. Physical wallets are places to store physical currency, credit cards, IDs, and so on. Bitcoin wallets don't store bitcoin. However, the [self custodial]({{ 'guide/glossary/#self-custody' | relative_url }}) nature of bitcoin wallets gives users full control of what they do with their bitcoin. - -Instead, a Bitcoin wallet contains the "private keys" to a users bitcoin. The bitcoin is located on the Bitcoin network that contains a public ledger similar in many ways to a spreadsheet with a record of everyone's transactions and balances. Private keys let users access bitcoin associated with those keys. A more suitable analogy for a Bitcoin wallet would be a keychain. - - Like regular keys on a keychain, Bitcoin private keys can be copied. For example, if you gave someone a copy of your house keys, they can unlock the door to your home. Likewise, if someone has a copy of your private key, they can access your bitcoin. This makes [private key management]({{ '/guide/private-key-management/introduction' | relative_url }}) one of the most important considerations of any bitcoin owner. - - Most bitcoin wallets will automatically generate users' private keys during onboarding, and is not usually something a user controls. We will look at practical design solutions for guiding users through this process in this chapter. This page explains how we can help get a user comfortable with the idea of a self-custodial wallet. - -A few different types of wallets let you send, receive, store, and manage bitcoin. For this page, we focus on regular single-key wallets, which are the ones most commonly used. - -
    - -{% include image.html - image = "/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen.png" - retina = "/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen@2x.png" - width = 250 - height = 250 - alt-text = "Onboarding welcome screen" - layout = "float-left-desktop -background -shadow" -%} - -Most wallets will begin the onboarding process by creating a new or restoring an existing wallet. New users to Bitcoin will usually be going through the flow of creating a new wallet. - -Once an individual selects “create a new wallet”, you might present informational carousels that provide a high-level overview of the implications, benefits, and responsibility that comes with having a [self-custodial]({{ '/guide/glossary/#self-custody' | relative_url }}) wallet. Here you can explain to your user that access to the wallet will not require collecting any sensitive information such as usernames and passwords, which is often the case with traditional financial products. - -Rather, the user can directly access their funds as long as they have access to the private key or recovery phrase. You should help your users understand that your team do not have the ability to recover their funds in the event they lose their private key. A self custodial wallet often means the user will have to take on greater responsibilty to safely protect their private key so they can always access their funds. - -
    - -{% include /tip/open.html label="Tip: Break onboarding up" icon="info" color="blue" %} - -Wallet creation during onboarding is an excellent opportunity to educate your users. For example, using several screens when generating a [recovery phrase]({{ '/guide/glossary/#recovery-phrase' | relative_url }}) to emphasize its importance. This allows users to focus on one task at a time, reducing the possibility of getting overwhelmed or making mistakes. - -{% include /tip/close.html %} - - -While this may sound daunting to first-time users, these caveats mustn't be hidden. Doing so may severely compromise their funds' safety, as their default assumptions and behaviors could potentially mimic how they typically use centralized applications (for example, feeling like it is OK if they forget their account information because they can contact customer support to help them recover it). - -Some studies suggest that users struggled greatly with technical terminology and feeling as though they had a lack of guidance during wallet setup. By walking users through single steps that clearly frame the features of self-custody Bitcoin wallets, users will feel well-equipped to navigate and use the wallet confidently. - -> Users reported that they often felt like they lacked guidance and understanding during wallet setup -> -> As researched by Eskandari et al - -Below is an example of some carousel screens that might be useful in helping a user understand what to expect from this wallet. For this example, we have opted to backup up the users' recovery phrase to a cloud provider but other alternatives exist. - -
    - -{% include picture.html - image = "/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1.png" - retina = "/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-1@2x.png" - alt-text = "Introduction screen explaining ownership" - caption = "Talk about ownership" - width = 250 - height = 541 -%} - -{% include picture.html - image = "/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2.png" - retina = "/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-2@2x.png" - alt-text = "Introduction screen explaining recovery" - caption = "Talk about recovery" - width = 250 - height = 541 -%} - -{% include picture.html - image = "/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3.png" - retina = "/assets/images/guide/onboarding/creating-a-new-wallet/product-intro-3@2x.png" - alt-text = "Introduction screen explaining security" - caption = "Talk about security" - width = 250 - height = 541 -%} - -
    - - These screens explicitly lay out/guide users on the unique features of self-custodial wallets to make sure they understand these caveats. These screens suggest talking about ownership, explicitly stating the recovery mechanism that the respective wallet uses, and security measures that they should take to protect their wallet. - ---- - -Ok, now let's look at backing up a recovery phrase (coming soon) diff --git a/guide/onboarding/getting-to-know-your-users.md b/guide/onboarding/getting-to-know-your-users.md index c0bd4480d..2646f26e2 100644 --- a/guide/onboarding/getting-to-know-your-users.md +++ b/guide/onboarding/getting-to-know-your-users.md @@ -9,10 +9,10 @@ main_classes: -no-top-padding --- {% include picture.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/banner.jpeg" - retina = "/assets/images/guide/onboarding/getting-to-know-your-users/banner@2x.jpeg" - mobile = "/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile.jpeg" - mobileRetina = "/assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile@2x.jpeg" + image = "/assets/images/guide/onboarding/getting-to-know-your-users.jpeg" + retina = "/assets/images/guide/onboarding/getting-to-know-your-users@2x.jpeg" + mobile = "/assets/images/guide/onboarding/getting-to-know-your-users-mobile.jpeg" + mobileRetina = "/assets/images/guide/onboarding/getting-to-know-your-users-mobile@2x.jpeg" alt-text = "Getting to know your users chapter illustration" width = 1600 height = 600 @@ -23,6 +23,7 @@ main_classes: -no-top-padding When building onboarding experiences, it is important to understand and develop knowledge about your users upfront. Within the Bitcoin ecosystem, there is a wide range in the level of expertise. Identifying who you are building for is crucial, as these user groups value and understand varying characteristics of coin and key management tools. For example, “rookies” often favor convenient, easy-to-use wallets, while well-versed bitcoin owners tend to prioritize security[^1]. +--- ## Observe your potential users This observation could take the form of [user research]({{ 'guide/getting-started/user-research/' | relative_url }}), user interviews and surveys aimed at a range of participants to observe and identify what they do, how they think, and what they want. Let's consider some things you might want to ask yourself when improving the onboarding experience for new users: @@ -35,10 +36,11 @@ This observation could take the form of [user research]({{ 'guide/getting-starte * How did they hear about my application? Word of mouth? App store search? * Do first-time users have specific needs or goals? -Perhaps after research, you identify your users as "cypherpunks" with sound knowledge of Bitcoin, but they are new to your app. You might build an experience that preserves as much of their [privacy](/guide/foundations/principles/#privacy) as possible and is super customizable from the outset. +Perhaps after research, you identify your users as "cypherpunks" with sound knowledge of Bitcoin, but they are new to your app. You might build an experience that preserves as much of their privacy as possible and is super customizable from the outset. Aim to gather as much information and observations as possible in order to empathize with your users. +--- ## Identify barriers and motivators they have You can then use this research to identify where potential problems may exist. This will then allow you to highlight opportunities for innovation. @@ -62,7 +64,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    {% include image.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/strongest-barrier-battery.svg" + image = "/assets/images/guide/onboarding/strongest-barrier-battery.svg" alt-text = "strongest barrier" width = 100 height = 100 @@ -78,7 +80,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    {% include image.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/neutral-barrier-battery.svg" + image = "/assets/images/guide/onboarding/neutral-barrier-battery.svg" alt-text = "neutral barrier" width = 100 height = 100 @@ -94,7 +96,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    {% include image.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/lowest-barrier-battery.svg" + image = "/assets/images/guide/onboarding/lowest-barrier-battery.svg" alt-text = "neutral barrier" width = 100 height = 100 @@ -113,7 +115,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    {% include image.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/highest-motivator-battery.svg" + image = "/assets/images/guide/onboarding/highest-motivator-battery.svg" alt-text = "neutral barrier" width = 100 height = 100 @@ -129,7 +131,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    {% include image.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/neutral-motivator-battery.svg" + image = "/assets/images/guide/onboarding/neutral-motivator-battery.svg" alt-text = "neutral barrier" width = 100 height = 100 @@ -145,7 +147,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    {% include image.html - image = "/assets/images/guide/onboarding/getting-to-know-your-users/lowest-motivator-battery.svg" + image = "/assets/images/guide/onboarding/lowest-motivator-battery.svg" alt-text = "neutral barrier" width = 100 height = 100 @@ -156,6 +158,7 @@ Motivators are specific user wants that are driving the user to seek out Bitcoin
    +--- ## Brainstorm solutions with your team With this information, you can craft solutions based on these barriers and motivators to create the best experience for a user like Josh. @@ -171,6 +174,7 @@ This is a good opportunity to circle back and find out deeper things about a use It's important to allow you and your team to be as free and creative about how you might solve these unmet needs. No idea is too "out there". Gather as many ideas as possible and build upon each other's ideas as you move along. Also, look for existing research and findings to compare against what you have found and check for any similarities. +--- ## Prototype & Test Next, you can think about prototyping a subset of these ideas and understanding your ideas' feasibility through feedback on these prototypes. Put your prototypes in front of real users and test to verify the solution meets the users' needs. diff --git a/guide/payments/introduction.md b/guide/payments/introduction.md index 616257dcb..11e0c63b4 100644 --- a/guide/payments/introduction.md +++ b/guide/payments/introduction.md @@ -27,30 +27,30 @@ We have already established that [Bitcoin is money](https://bitcoin.design/guide --- -### [Transactions overview](/guide/payments/transactions/) +**[Transactions overview](/guide/payments/transactions/)** An overview of Bitcoin payments, common concepts and the transaction lifecycle. --- -### [Sending bitcoin](/guide/payments/send/) +**[Sending bitcoin](/guide/payments/send/)** An introduction to how sending bitcoin works. --- -### Receiving bitcoin (coming soon) +**Receiving bitcoin (coming soon)** An introduction to how receiving and requesting bitcoin works. --- -### Transaction privacy (coming soon) +**Transaction privacy (coming soon)** An overview of how to help users maintain their financial privacy while using Bitcoin. --- -### Managing funds (coming soon) +**Managing funds (coming soon)** How to help users organize and manage their transaction data and holdings. diff --git a/guide/payments/send.md b/guide/payments/send.md index 816f46bea..ff91433ee 100644 --- a/guide/payments/send.md +++ b/guide/payments/send.md @@ -6,35 +6,9 @@ nav_order: 2 parent: Payments permalink: /guide/payments/send/ main_classes: -no-top-padding -image: /assets/images/guide/payments/send/bitcoin-payments-social.jpg +# image: /assets/images/guide/payments/send/header.svg --- - - -{% include picture.html -image = "/assets/images/guide/payments/send/bitcoin-payments.jpg" -retina = "/assets/images/guide/payments/send/bitcoin-payments@2x.jpg" -mobile = "/assets/images/guide/payments/send/bitcoin-payments-mobile.jpg" -mobileRetina = "/assets/images/guide/payments/send/bitcoin-payments-mobile@2x.jpg" -alt-text = "Illustration of a man and woman exchanging a bitcoin" -width = 1600 -height = 600 -layout = "full-width" -%} - # Sending bitcoin Sending bitcoin can be a very straightforward or complex flow in a Bitcoin application. People may be sending bitcoin to a known contact, moving it between their wallets on different devices, or making a purchase through a [payment processor]({{ '/guide/getting-started/software/#payment-processors' | relative_url }}). @@ -52,8 +26,7 @@ You do not need to follow the order below. Feel free to tailor the configuration
    {% include image.html - image = "/assets/images/guide/payments/send/get-recipient-address.png" - retina = "/assets/images/guide/payments/send/get-recipient-address@2x.png" + image = "/assets/images/guide/payments/send/get-recipient-address.svg" alt-text = "Graphic showing chat messages between the sender and receiver. The sender sends a bitcoin address and the receiver agrees to pay." width = 400 height = 400 @@ -69,11 +42,10 @@ The receiver does this by generating a new address in their wallet application,
    {% include image.html - image = "/assets/images/guide/payments/send/input-address.png" - retina = "/assets/images/guide/payments/send/input-address@2x.png" + image = "/assets/images/guide/payments/send/input-address.svg" alt-text = "Address input field prompting the sender to paste the address" width = 400 - height = 219 + height = 400 layout = "float-right-desktop" %} @@ -93,17 +65,16 @@ Once you have gotten the address, it's time to enter the payment details. Bitcoi **Don'ts** -- Make it possible that a transaction is sent if the address is invalid +- Prevent the transaction to be sent if the address is invalid -## Inputting an amount +## Inputing an amount
    {% include image.html - image = "/assets/images/guide/payments/send/input-amount.png" - retina = "/assets/images/guide/payments/send/input-amount@2x.png" + image = "/assets/images/guide/payments/send/input-amount.svg" alt-text = "Amount input field with bitcoin, local currency and selections for fractions of the total wallet balance" width = 400 - height = 222 + height = 400 layout = "float-right-desktop" %} @@ -124,8 +95,7 @@ Applications sometimes also allow the sender to select fractions of their total
    {% include image.html - image = "/assets/images/guide/payments/send/select-fee-rate.png" - retina = "/assets/images/guide/payments/send/select-fee-rate@2x.png" + image = "/assets/images/guide/payments/send/select-fee-rate.svg" alt-text = "Fee selection component with high, medium, low urgency options" width = 400 height = 400 @@ -136,7 +106,7 @@ The application can automatically estimate a fee and set it for the sender. This When allowing the sender to set fees, it is essential to communicate the estimated cost in their preferred currency and the estimated time until first confirmation. Be mindful that the way Bitcoin fees get calculated may not map to the sender's traditional financial experience. If you allow adjustment of fees, consider providing details on how it gets calculated. -Human error with fee selection can lead to costly mistakes, and fee estimations are imperfect. Carefully consider if and how you expose transaction fee selection to senders. +Human error with fee selection can lead to costly mistakes, and fee estimations are imperfect. Carefully consider if and how you expose transaction fees to senders.
    **Variations** @@ -154,15 +124,14 @@ Human error with fee selection can lead to costly mistakes, and fee estimations
    {% include image.html - image = "/assets/images/guide/payments/send/review-payment.png" - retina = "/assets/images/guide/payments/send/review-payment@2x.png" + image = "/assets/images/guide/payments/send/review-payment.svg" alt-text = "Approval screen with details of the transaction and confirmation button" width = 400 height = 400 layout = "float-right-desktop" %} -A valid transaction that is broadcast to the network cannot be reversed, so it is critical that the sender is given a chance to double check the payment details (amount, recipient address, total fee, etc) before submitting the transaction. +A valid transaction that is broadcasted to the network cannot be reversed, so it is critical that the sender is given a chance to double check the payment details (amount, recipient address, total fee, etc) before submitting the transaction. If your application allows setting spending limits, and the current transaction exceeds it, make sure they go through some security check (biometric, enter PIN, 2FA password, etc). This technique can also be employed if the transaction is attempting to use the max wallet balance.
    @@ -175,22 +144,19 @@ If your application allows setting spending limits, and the current transaction ## Transaction processing and confirmation {% include image.html - image = "/assets/images/guide/payments/send/first-confirmation.png" - retina = "/assets/images/guide/payments/send/first-confirmation@2x.png" - mobile = "/assets/images/guide/payments/send/first-confirmation-mobile.png" - mobileRetina = "/assets/images/guide/payments/send/first-confirmation-mobile@2x.png" - alt-text = "Notifications after the transaction is broadcast" - width = 800 - height = 270 + image = "/assets/images/guide/payments/send/first-confirmation.svg" + alt-text = "Notifications after the transaction is broadcasted" + width = 1600 + height = 800 %} -Let us look at how we communicate to the sender about the [processing of a transaction]({{ '/guide/payments/transactions/#transaction-lifecycle' | relative_url }}) after it has been broadcast. There are three main states that you would want to inform or notify the sender of: +Let us look at how we communicate to the sender about the [processing of a transaction]({{ '/guide/payments/transactions/#transaction-lifecycle' | relative_url }}) after it has been broadcasted. There are three main states that you would want to inform or notify the sender of: -**Pending/Unconfirmed** -- The transaction is successfully in the nodes' memory pool and is being propagated throughout the network. The fee market can sometimes be volatile, and the "time until the first confirmation" may change from what was estimated when they had initially broadcast the transaction. While pending, inform the sender of when they can expect the first transaction confirmation. +**Pending/Unconfirmed** -- The transaction is successfully in the nodes' memory pool and is being propagated throughout the network. The fee market can sometimes be volatile, and the "time until the first confirmation" may change from what was estimated when they had initially broadcasted the transaction. While pending, inform the sender of when they can expect the first transaction confirmation. -**First confirmation** -- The transaction has been selected by miners and included in a block. Since a reorganization can still happen, a transaction with one confirmation can also be considered a pending state by the receiver. This is a good point to notify the sender. +**1 confirmation** -- The transaction has been selected by miners and included in a block. Since a reorganization can still happen, a transaction with one confirmation can also be considered a pending state by the receiver. This is a good point to notify the sender. -**Sixth confirmation** -- Commonly regarded as when the final settlement of the payment happens. Merchants, for example, would only be willing to release the product or service at this point. +**6 confirmations** -- Commonly regarded as when the final settlement of the payment happens. Merchants, for example, would only be willing to release the product or service at this point. **Do's** - Clearly indicate the state of the outgoing transaction diff --git a/guide/payments/transactions.md b/guide/payments/transactions.md index 2de7f1fc2..a00100e1b 100644 --- a/guide/payments/transactions.md +++ b/guide/payments/transactions.md @@ -10,10 +10,10 @@ image: /assets/images/guide/payments/transactions/tx-preview.jpg --- {% include picture.html - image = "/assets/images/guide/payments/transactions/transactions-desktop.jpg" - retina = "/assets/images/guide/payments/transactions/transactions-desktop@2x.jpg" - mobile = "/assets/images/guide/payments/transactions/transactions-mobile.jpg" - mobileRetina = "/assets/images/guide/payments/transactions/transactions-mobile@2x.jpg" + image = "/assets/images/guide/payments/transactions/transactions-desktop.png" + retina = "/assets/images/guide/payments/transactions/transactions-desktop@2x.png" + mobile = "/assets/images/guide/payments/transactions/transactions-mobile.png" + mobileRetina = "/assets/images/guide/payments/transactions/transactions-mobile@2x.png" alt-text = "Process of transaction being mined, and new payments being made, mixed and sent to multiple other wallets" caption = '3D payments and transaction lifecycle illustration by [Alexa Aker](https://alexaaker.com){:target="_blank" rel="nofollow"}' width = 1600 @@ -21,20 +21,6 @@ image: /assets/images/guide/payments/transactions/tx-preview.jpg layout = "full-width" %} - - # Transactions overview This page is meant to help you with understanding how bitcoin transactions get created and processed by the Bitcoin network. Bitcoin is a peer-to-peer push-payment system. This means that you can send, or push, bitcoin to any address at your will, at any time, without passing through a trusted third party. @@ -100,24 +86,10 @@ The principal properties are: In a Bitcoin wallet, funds are often not held in a single address, but more commonly in one address per transaction where you previously received bitcoin. When you are creating a transaction you need to specify which of your addresses you would like to use to fund it. If you need to spend more than what a single address holds, you can specify several. These are called *inputs* to the transaction. -Likewise, you need to specify the destination address or addresses for the transaction. These are called *outputs*. Should there be more bitcoin in the inputs than are needed for the payment, a new address will be created in your wallet for the remaining change, often called a *change output*. - -{% include picture.html -image = "/assets/images/guide/payments/transactions/inputs-and-outputs.svg" -mobile = "/assets/images/guide/payments/transactions/inputs-and-outputs-mobile.svg" -alt-text = "A flow chart depicting outputs beings used as the inputs to new transactions, which in turn have their own outputs." -width = 1630 -height = 454 -layout = "full-width" -%} - -The above image is an example of how transaction outputs become the inputs to new transactions. In this example, the sender wants to send 4 bitcoin to another wallet. -In the sender's wallet, there are two unspent transaction outputs, one containing 3 bitcoin (represented in blue) and another containing 2 bitcoin (represented in green). -The sender's wallet uses both of these as inputs in the transaction, meaning that the transaction involves 5 bitcoin total. -4 bitcoin goes to a payment output in the receiver's wallet (represented in orange), and 1 bitcoin goes to a change output in the sender's wallet (represented in purple). +Likewise, you need to specify the destination address or addresses for the transaction. These are called *outputs*. should there be more bitcoin in the inputs than are needed for the payment, a new address will be created in your wallet for the remaining change, often called a *change output*. ### Transaction fee Every transaction needs to pay a fee to incentivize miners to include it in a block. There is no fixed fee for making a transaction as it depends on the amount of data it includes, the amount of other transactions that are trying to get verified, and how much each submitter is prepared to pay. Miners typically pick the transactions that will earn them the highest reward to include in a block. -Blocks are also limited in size and new ones are created every 10 minutes on average. This means that if you want a transaction to be confirmed in the next block you might have to pay a relatively high price. +Blocks are also limited in size and new ones are created every 10 minutes on average. This means that if you want a transaction to be confirmed in the next block you might have to pay a relatively high price. \ No newline at end of file diff --git a/guide/private-key-management/backups.md b/guide/private-key-management/backups.md new file mode 100644 index 000000000..e49441aa7 --- /dev/null +++ b/guide/private-key-management/backups.md @@ -0,0 +1,256 @@ +--- +layout: guide +title: Bitcoin backups +description: A beginner's guide to Bitcoin backups. +nav_order: 4 +parent: Private key management +permalink: /guide/private-key-management/backups/ +main_classes: -no-top-padding +image: https://bitcoin.design/assets/images/guide/private-key-management/backups/page-backups.jpg +--- + + + +{% include picture.html + image = "/assets/images/guide/private-key-management/backups/backups.jpg" + retina = "/assets/images/guide/private-key-management/backups/backups@2x.jpg" + mobile = "/assets/images/guide/private-key-management/backups/backups-mobile.jpg" + mobileRetina = "/assets/images/guide/private-key-management/backups/backups-mobile@2x.jpg" + alt-text = "Several devices exchanging data" + width = 1600 + height = 700 + layout = "full-width" +%} + +# Bitcoin backups + +The self-custody of bitcoin is an important right, but also a financial responsibility that can scale from pocket money to life savings, and take practice getting used to. + +This guide is a straightforward starting point for simple bitcoin backups, aimed at users of bitcoin products. + +If you are a designer or developer, make sure you offer guidance to your users so they can secure their bitcoin with an appropriate backup. + + +## What are backups? + +When we talk about backups, we mean saving the information needed to restore access to a wallet outside of the application that created the private keys. Often, this will just be the [recovery phrase]({{ '/guide/glossary/#recovery-phrase' | relative_url }}) of 12 or 24 words, but can also include other information like a *pass-phrase* and [derivation path]({{ '/guide/glossary/#derivation-path' | relative_url }}). + +The main risks that backups need to protect against are: + +- Loss of wallet - you lost the device and application holding the private key +- Remote theft - your backup got discovered online by a bad actor +- Physical damage - your backup got destroyed +- Theft on discovery - your backup got discovered in person by a bad actor +- Catastrophic events - your backup location got destroyed +- Inheritance loss - next-of-kin were unable to access your wallet + + +## Backup levels, basic to advanced + +A basic backup can be done in a few minutes, while more advanced setups can require more time and effort, like the purchase of dedicated material. + +Let’s look at some real life examples of backup methods for single-key wallets and what they protect against. + +
    + +{% include image.html + image = "/assets/images/guide/private-key-management/backups/backup-table.png" + retina = "/assets/images/guide/private-key-management/backups/backup-table@2x.png" + alt-text = "Table of backup levels" + width = 904 + height = 625 + layout = "full-width" +%} + +{% include rec-open.html %} + +Level 0 and 1 are good when getting started, and require very little effort. + +Level 2, 3 or 4 are recommended for storing larger amounts. + +{% include rec-close.html %} + +
    + +#### Level 0 +## Encrypted cloud backup + +By storing the recovery-phrase in an online location that is encrypted (not in plain text) and hard to access by anyone other than yourself, you are protected against *loss of wallet*. This is the absolute minimum you should do and only takes a few minutes. + +{% include image.html + image = "/assets/images/guide/private-key-management/backups/cloudbackup.png" + retina = "/assets/images/guide/private-key-management/backups/cloudbackup@2x.png" + alt-text = "Encrypted cloud backup" +%} + +**Do** +- Use an encrypted password manager like 1Password, LastPass, iCloud Keychain +- Alternatively, use a wallet application with automatic cloud backup + +**Don’t** +- Screenshot the recovery-phrase and save it in Google Photos, iCloud photos +- Write down the recovery-phrase in plain text on your device, Google Docs etc. + +**Suitable for** +- For small amounts (less than a months salary) +- When you can't wait to set up a new wallet until you are at home + +
    + +#### Level 1 +## Single paper backup + +By storing the recovery-phrase written down on paper in your own home you have protected against *loss of wallet* and *remote theft*. + + +{% include image.html + image = "/assets/images/guide/private-key-management/backups/paperbackup.png" + retina = "/assets/images/guide/private-key-management/backups/paperbackup@2x.png" + alt-text = "24 word paper backup" +%} + + +**Do** +- Write the recovery-phrase with the words numbered, using permanent ink on card +- Store it in a location where it is unlikely to be found by a bad actor +- Document or tell next-of-kin where the backup can be found + +**Don’t** +- Scribble the recovery-phrase on a scrap of paper using a pencil +- Stick it on the fridge, or other visible locations + +**Suitable** +- For small amounts (less than a months salary) +- When you are setting up a new wallet at home + +
    + +#### Level 2 +## Single metal backup + +By storing the recovery-phrase on metal in your own home you have protected against *loss of wallet*, *remote theft* and *physical damage*. + +The best metal backup solutions are resistant to most physical damage, including fire, acid and high pressure. + + +{% include image.html + image = "/assets/images/guide/private-key-management/backups/metalbackup.png" + retina = "/assets/images/guide/private-key-management/backups/metalbackup@2x.png" + alt-text = "Metal backup" +%} + + +**Do** +- Order a dedicated metal backup product, recommendations can be found [here](https://jlopp.github.io/metal-bitcoin-storage-reviews/) +- Follow the instructions and make sure the phrase is indented, etched, engraved or set properly +- Store it in a location where it is unlikely to be found by a bad actor +- Document or tell next-of-kin where the backup can be found + +**Don’t** +- Skip ordering a dedicated product, invent your own metal backup solution + +**Suitable for** +- Amounts above your monthly salary, but less than half your annual salary + +
    + +#### Level 3 +## Single backup with discovery protection +The previous offline backups have one flaw in common - if discovered by a bad actor, your funds can be stolen. + +To protect against this *theft on discovery* risk, a *pass-phrase* can be added to the recovery-phrase. This pass-phrase is sometimes called an extra word, or the 13th/25th word. + +While this level provides more protection, it also adds complexity to your backup setup. For most beginners storing small amounts it might not be worth the effort from the start and can be a later consideration should the funds grow. + +Technically, all recovery-phrases have a pass-phrase. If it's not set by the user, an empty string (“”) will be used by default. This means that using the recovery-phrase with or without the user-defined pass-phrase will recover two DIFFERENT wallets. + +If a bad actor discovers only the recovery-phrase, they will find an empty wallet. Alternatively, one can deliberately leave a small amount of bitcoin in this wallet as a honey-pot, and monitor it for any withdrawals to know if it has been discovered. + +To provide protection against *theft on discovery*, the pass-phrase should be stored separate from the recovery-phrase. + +Since adding a pass-phrase will generate a different wallet, it is best to add it when first creating the wallet, and before storing any bitcoin in its addresses. + +It's worth noting that most hardware wallets support pass-phrases, while most software wallet applications do not. + +{% include image.html + image = "/assets/images/guide/private-key-management/backups/offline-discoveryprotection.png" + retina = "/assets/images/guide/private-key-management/backups/offline-discoveryprotection@2x.png" + alt-text = "Offline backup with discovery protection" +%} + + +**Do** +- Use a secure pass-phrase, it is case sensitive and can include numbers and special characters +- Have redundant and secure backups of both the recovery-phrase and the pass-phrase, they are equally important for successful wallet recovery +- Understand you now have two distinct wallets, (one each from the recovery-phrase with or without the pass-phrase), this can be useful to fool a bad actor, or a risk if next-of-kin is unaware of the pass-phrase + +**Don’t** +- Store the recovery-phrase and pass-phrase together +- Forget to document your setup for next-of-kin + +**Suitable for** +- Large amounts +- Situations where the backup can be discovered by bad actors + +**Alternative** + +Set up a hardware wallet from the recovery and pass-phrase that uses a PIN to protect usage. The PIN now becomes the protection against theft on discovery and should be saved somewhere safe just like the pass-phrase. + +
    + +#### Level 4 +## Multiple backups with discovery protection +One remaining flaw with the single offline backup levels is that severe damage to the one location where they are stored, could lead to the backup not being usable. This could be a fire, flood, earthquake or similar, all more or less likely depending on where you live. + +To protect against such a *catastrophic event* we can create multiple backups, and distribute them to other locations. This could be a second home, trusted family and friends or a safe deposit box. + +As the risk of discovery increases with the multiplying backups, it's best to maintain the protection against theft on discovery with a pass-phrase, or hardware wallets with a PIN. + +{% include image.html + image = "/assets/images/guide/private-key-management/backups/multiple-discoveryprotection.png" + retina = "/assets/images/guide/private-key-management/backups/multiple-discoveryprotection@2x.png" + alt-text = "Multiple offline backups with discovery protection" +%} + +**Do** +- Make sure you have reduntant copies of all parts of the backup in several locations +- Document your setup well for next-of-kin now that complexity has increased + +**Don’t** +- Forget to safely store the pass-phrases or PINs + +**Suitable for** +- Large amounts +- In locations where catastrophic events are common, or likely to cause severe damage + +
    + +# Inheritance instructions +For any backup setup, sufficient information and understandable instructions for recovering the wallet should be available to next-of-kin. + +Even though it might feel uncomfortable (or unnecessary if you are young and single), it is never too early to document your wallets. If you don’t, there is a very high chance that next-of-kin will not be able to inherit your funds. + +At a minimum, document each wallet with a given name (Bob’s Bitcoin wallet 1), how to recover it, when it was created and what application was used to create the wallet. Ideally this document has all the instructions required to recover the wallet, but not the information itself (*recovery-phrase*, *pass-phrase* etc.), as that might expose you to theft on discovery risks. + +**Do** +- Make next-of-kin aware of the existence of any wallets +- Explain clearly how to recover the setup, and how to access the required information + + +**Don’t** +- Store any required information ONLY in locations that will not be accessible to next-of-kin (password managers, single user accounts etc.) + + +**Suitable for** +- Any amount + diff --git a/guide/private-key-management/introduction.md b/guide/private-key-management/introduction.md index 3d4c4ca33..fad880e0d 100644 --- a/guide/private-key-management/introduction.md +++ b/guide/private-key-management/introduction.md @@ -55,4 +55,10 @@ An introduction to some of the common private key management schemes for shared --- +### [Bitcoin backups]({{ '/guide/private-key-management/backups/' | relative_url }}) + +A straightforward guide to safe manual backups. + +--- + Start at the top with [private key schemes]({{ '/guide/private-key-management/schemes/' | relative_url }}). diff --git a/guide/private-key-management/multi-user-schemes.md b/guide/private-key-management/multi-user-schemes.md index 2a23bc765..53777b227 100644 --- a/guide/private-key-management/multi-user-schemes.md +++ b/guide/private-key-management/multi-user-schemes.md @@ -38,7 +38,7 @@ The use cases for shared schemes include spouses managing a joint account, group As we saw with multi-key setups for personal use, a multi-key wallet has several controlling keypairs attached, or what is often called co-signers. The number of keys and required co-signers will depend on the use case. With spouses sharing a *joint account*, a simple 1-of-2 multi-key setup might suffice, meaning there are two keys but only one is required to sign for a transaction to be valid. At the other end of a spectrum a company might require a more complex 3-of-5 setup, requiring three of the five co-signers to approve any transaction. -Just like with personal schemes, external signing devices can be used to hold one or several of the keys used for a shared multi-key setup. While this can increase [security](guide/foundations/principles/#security) if managed correctly, the same caveat applies in terms of adding significant complexity. +Just like with personal schemes, external signing devices can be used to hold one or several of the keys used for a shared multi-key setup. While this can increase security if managed correctly, the same caveat applies in terms of adding significant complexity. {% include image.html image = "/assets/images/guide/private-key-management/schemes/shared-multi-key.jpg" @@ -87,4 +87,4 @@ Few tailor-made products exist for shared wallets, but any wallet application th --- -OK, let's have a look at some [case studies]({{ '/guide/case-studies/' | relative_url }}). +OK, to end this chapter let's have a look at how to do safe [Bitcoin backups]({{ '/guide/private-key-management/backups/' | relative_url }}). diff --git a/guide/private-key-management/schemes.md b/guide/private-key-management/schemes.md index ecf055b1e..d8941a868 100644 --- a/guide/private-key-management/schemes.md +++ b/guide/private-key-management/schemes.md @@ -35,7 +35,7 @@ Important aspects to consider when choosing a private key management scheme is w * **Target audience** - Are your users completely new to bitcoin and its concepts, or well versed in all the technological underpinnings? -* **Use case** - Are you building a [personal finance]({{ '/guide/getting-started/personal-finance/' | relative_url }}) product for daily payments, or a long-term life-saving storage solution? +* **Use case** - Are you building a product for daily payments, or a long-term life-saving storage solution? * **Value stored** - While we always strive for no loss of funds, how critical to their financial situation would it be if your user lost access to their funds? diff --git a/guide/private-key-management/single-user-schemes.md b/guide/private-key-management/single-user-schemes.md index 5aaca93b2..c59acb018 100644 --- a/guide/private-key-management/single-user-schemes.md +++ b/guide/private-key-management/single-user-schemes.md @@ -74,20 +74,29 @@ With most implementations so far, the location will be the keychain or a user-sp This makes the backup accessible by the user on a new device, should they lose the original, but only accessible by someone that can log into the user’s Apple or Google account. -{% include fact/pros.html %} +{% include fact-pros.html %} - Low onboarding friction - Low risk of self-inflicted loss due to the automatic nature -{% include fact/close.html %} +{% include fact-close.html %} -{% include fact/cons.html %} +{% include fact-cons.html %} - Private key in cloud storage increases risk of malicious third party access - User needs to trust their OS and cloud storage provider - Unless the backup includes the recovery phrase users will not be able to export their wallet to another product -{% include fact/close.html %} +{% include fact-close.html %} + +#### Pros +- Low onboarding friction +- Low risk of self-inflicted loss due to the automatic nature + +#### Cons +- Private key in cloud storage increases risk of malicious third party access +- User needs to trust their OS and cloud storage provider +- Unless the backup includes the recovery phrase users will not be able to export their wallet to another product ### Best practice @@ -132,24 +141,18 @@ This scheme is suitable for users who are already familiar with bitcoin and proc ### How it works The wallet application will generate a 12 or 24 word phrase (seed / [recovery phrase]({{ '/guide/glossary/#recovery-phrase' | relative_url }})) from which all the wallet’s [keys]({{ '/guide/glossary/#keys' | relative_url }}) can be derived. This means the user can have access to the wallet from any compatible wallet application with the phrase, even if they lose the device or software. -This can be an effective way to reduce the risk of loss from theft if the backup is offline in a safe place, but puts more of the op-sec burden on the individual user. The security and risk will only be as good as how they backup the recovery phrase. You need to take resistance to physical theft, fire and other destructive events into account. To get the best security out of recovery phrases they should be kept on several dedicated [metal storage pieces](https://jlopp.github.io/metal-bitcoin-storage-reviews/) in secure places offline. A fair amount of effort and knowledge is required for this. - -A full guide to manual backup best practices for users is out of scope for this chapter but the [Do's and Dont's](https://blog.keys.casa/the-dos-and-donts-of-bitcoin-key-management/) of Bitcoin key management is a good starting point. +This can be an effective way to reduce the risk of loss from theft if the backup is offline in a safe place, but puts more of the burden on the individual user. The security and risk will only be as good as how they backup the recovery phrase. -{% include fact/pros.html %} +Safe backups can be made fairly simple, take a look at our [Bitcoin backups](https://blog.keys.casa/the-dos-and-donts-of-bitcoin-key-management/) guide as good starting point. +#### Pros - Manual backups done well can provide very high security - Good interoperability -{% include fact/close.html %} - -{% include fact/cons.html %} - +#### Cons - Requires significant effort from users to achieve safe backups - High onboarding friction -{% include fact/close.html %} - ### Best practice **When to use** @@ -201,21 +204,15 @@ The external device can generate and store a keypair offline. Therefore, the pri When a transaction needs to be signed, the software submits a partially signed bitcoin transaction (PSBT, defined in [BIP174](https://github.com/bitcoin/bips/blob/master/bip-0174.mediawiki)) to the device. The user confirms on the device and the PSBT state of the transaction returned to the software wallet application is now fully signed and can be transmitted to the blockchain. This process can also happen fully air gapped by using memory cards instead of cables or wireless connections, to keep the device offline at all times. -{% include fact/pros.html %} - +#### Pros - Removes private key from online devices - Can provide very high security if used correctly -{% include fact/close.html %} - -{% include fact/cons.html %} - +#### Cons - Purchase of specialized hardware required - Requires further effort and knowledge to setup correctly - Still requires a good manual backup for redundancy -{% include fact/close.html %} - ### Best practice **When to use** @@ -263,21 +260,15 @@ Some benefits over a multikey setup include greater privacy, as a transaction us ### How it works A single private key is split into n key-shares that are distributed to several parties, devices or locations. When signing a transaction the required number of shares need to be coordinated into one valid signature. This relies on a cryptographic algorithm called [Shamir's Secret Sharing](https://en.wikipedia.org/wiki/Shamir's_Secret_Sharing) after its creator. -{% include fact/pros.html %} - +#### Pros - Can provide higher resistance to loss from theft - Transactions look identical and have same cost as single key wallets on chain -{% include fact/close.html %} - -{% include fact/cons.html %} - +#### Cons - Requires precise coordination of key-shares when signing - Few advantages over multi-key setups with Schnorr signatures - Individual product implementations not interoperable -{% include fact/close.html %} - ### Best practice **When to use** @@ -319,18 +310,12 @@ Multi-key schemes can raise the security, since anyone needs access to more than ### How it works A software wallet application or coordination software initiates a multi-sig wallet, choosing the number of total keys, and the number required to sign transactions. The user then adds private keys from other wallets generated elsewhere to the multisig after which the software wallet can complete the creation process. For any future transaction from the multi-sig wallet the required amount of co-signers need to sign (using Partially Signed Bitcoin Transactions - PSBT from [BIP174](https://github.com/bitcoin/bips/blob/master/bip-0174.mediawiki)) before any transaction is valid. -{% include fact/pros.html %} - +#### Pros - Significantly increases security against theft -{% include fact/close.html %} - -{% include fact/cons.html %} - +#### Cons - Adds complexity and op-sec burden for multiple private keys -{% include fact/close.html %} - ### Best practice **When to use** diff --git a/index.md b/index.md index a757e0875..c75e59f6b 100644 --- a/index.md +++ b/index.md @@ -3,7 +3,6 @@ # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults layout: home -permalink: / --- ## We are helping make [bitcoin](https://bitcoin.org) more intuitive and accessible. @@ -19,4 +18,4 @@ Everyone is welcome to join and participate. Our first community project, the [Bitcoin Design Guide]({{ '/guide' | relative_url }}) is a free, open-source repository for anyone building non-custodial bitcoin products. The guide will eventually cover consumer wallets, merchant interactions, financial applications, and much more. -If you’d like to help by providing feedback, submitting ideas, or creating content, check out the list of current [issues](https://github.com/BitcoinDesign/Guide/issues) or join us on Slack. +If you’d like to help by providing feedback, submitting ideas, or creating content, check out the list of current [issues](https://github.com/BitcoinDesign/Guide/issues) or join us on Slack. \ No newline at end of file diff --git a/js/themes.js b/js/themes.js index b4c3cd83b..1c4f42a43 100644 --- a/js/themes.js +++ b/js/themes.js @@ -1,191 +1,75 @@ let themes = [ { // Template - logo: { - path: "/assets/banner-bitcoin-logo.svg", - fillColor: "", - outlineColor: "#000" - }, - title: { - fillColor: "#FFF", - outlineColor: "#000" - }, - description: { - fillColor: "#000" - }, - button1: { - fillColor: "", - outlineColor: "#000", - labelFillColor: "#000" - }, - button2: { - fillColor: "", - outlineColor: "#000", - labelFillColor: "#000" - }, - background: { - path: '', - pathRetina: '', - pathMobile: '', - pathMobileRetina: '', - backgroundColor: '' - }, - copy: { - backgroundColor: "" - }, - image: { - path: 'url("/assets/images/home/banner/template.jpg")', - pathRetina: 'url("/assets/images/home/banner/template@2x.jpg")', - pathMobile: 'url("/assets/images/home/banner/template-mobile.jpg")', - pathMobileRetina: 'url("/assets/images/home/banner/template-mobile@2x.jpg")', - backgroundColor: "#fbfbfb" - }, + copyBackgroundColor: "", + bitcoinLogoPath: "/assets/banner-bitcoin-logo.svg", + bitcoinLogoFillColor: "", + bitcoinLogoOutlineColor: "#000", + titleFillColor: "#FFF", + titleOutlineColor: "#000", + descriptionFillColor: "#000", + button1FillColor: "", + button1OutlineColor: "#000", + button1LabelFillColor: "#000", + button2FillColor: "", + button2OutlineColor: "#000", + button2LabelFillColor: "#000", + backgroundImagePath: 'url("/assets/images/home/banner/template.jpg")', + backgroundImagePathRetina: 'url("/assets/images/home/banner/template@2x.jpg")', + backgroundImagePathMobile: 'url("/assets/images/home/banner/template-mobile.jpg")', + backgroundImagePathMobileRetina: 'url("/assets/images/home/banner/template-mobile@2x.jpg")', + backgroundImageColor: "#fbfbfb", flipLayoutOnMobile: false, - author: { - name: "Template", - link: "https://github.com/BitcoinDesign/Guide/pull/27" - } + author: "Template", + authorLink: "https://github.com/BitcoinDesign/Guide/pull/27" }, { // Bridging bitcoin - logo: { - path: "/assets/banner-bitcoin-logo.svg", - fillColor: "#000", - outlineColor: "" - }, - title: { - fillColor: "#000", - outlineColor: "transparent" - }, - description: { - fillColor: "#000" - }, - button1: { - fillColor: "#FFF", - outlineColor: "#000", - labelFillColor: "#000" - }, - button2: { - fillColor: "", - outlineColor: "#000", - labelFillColor: "#000" - }, - background: { - path: '', - pathRetina: '', - pathMobile: '', - pathMobileRetina: '', - backgroundColor: '' - }, - copy: { - backgroundColor: "#F7931A" - }, - image: { - path: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin.png")', - pathRetina: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin@2x.png")', - pathMobile: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin-mobile.png")', - pathMobileRetina: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin-mobile@2x.png")', - backgroundColor: "#F7931A" - }, + copyBackgroundColor: "#F7931A", + bitcoinLogoPath: "/assets/banner-bitcoin-logo.svg", + bitcoinLogoFillColor: "#000", + bitcoinLogoOutlineColor: "", + titleFillColor: "#000", + titleOutlineColor: "", + descriptionFillColor: "#000", + button1FillColor: "#FFF", + button1OutlineColor: "#000", + button1LabelFillColor: "#000", + button2FillColor: "", + button2OutlineColor: "#000", + button2LabelFillColor: "#000", + backgroundImagePath: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin.png")', + backgroundImagePathRetina: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin@2x.png")', + backgroundImagePathMobile: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin-mobile.png")', + backgroundImagePathMobileRetina: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin-mobile@2x.png")', + backgroundImageColor: "#F7931A", flipLayoutOnMobile: false, - author: { - name: "Alexa Aker", - link: "https://github.com/BitcoinDesign/Guide/issues/45" - } + author: "Alexa Aker", + authorLink: "https://github.com/BitcoinDesign/Guide/issues/45" }, { // 3D abstract - logo: { - path: "/assets/banner-bitcoin-logo.svg", - fillColor: "#F7931A", - outlineColor: "" - }, - title: { - fillColor: "#F7931A", - outlineColor: "#F7931A" - }, - description: { - fillColor: "#000" - }, - button1: { - fillColor: "#F7931A", - outlineColor: "#F7931A", - labelFillColor: "#FFF" - }, - button2: { - fillColor: "#F7931A", - outlineColor: "#F7931A", - labelFillColor: "#FFF" - }, - background: { - path: '', - pathRetina: '', - pathMobile: '', - pathMobileRetina: '', - backgroundColor: '' - }, - copy: { - backgroundColor: "#64EBFC" - }, - image: { - path: 'url("/assets/images/home/banner/header-theme-2-3d-abstract.png")', - pathRetina: 'url("/assets/images/home/banner/header-theme-2-3d-abstract@2x.png")', - pathMobile: 'url("/assets/images/home/banner/header-theme-2-3d-abstract-mobile.png")', - pathMobileRetina: 'url("/assets/images/home/banner/header-theme-2-3d-abstract-mobile@2x.png")', - backgroundColor: "#64EBFC" - }, - flipLayoutOnMobile: false, - author: { - name: "Gabor Magyar", - link: "https://github.com/BitcoinDesign/Guide/issues/143" - } - }, - { - // The Meta-Future - logo: { - path: "/assets/banner-bitcoin-logo.svg", - fillColor: "#F7931A", - outlineColor: "" - }, - title: { - fillColor: "#000", - outlineColor: "transparent" - }, - description: { - fillColor: "#000" - }, - button1: { - fillColor: "#F7931A", - outlineColor: "#000", - labelFillColor: "#000" - }, - button2: { - fillColor: "#FFF", - outlineColor: "#000", - labelFillColor: "#000" - }, - background: { - path: 'url("/assets/images/home/banner/the-meta-future.jpg")', - pathRetina: 'url("/assets/images/home/banner/the-meta-future@2x.jpg")', - pathMobile: 'url("/assets/images/home/banner/the-meta-future-mobile.jpg")', - pathMobileRetina: 'url("/assets/images/home/banner/the-meta-future-mobile@2x.jpg")', - backgroundColor: "#D0E8E1" - }, - copy: { - backgroundColor: "" - }, - image: { - path: '', - pathRetina: '', - pathMobile: '', - pathMobileRetina: '', - backgroundColor: "" - }, + copyBackgroundColor: "#64EBFC", + bitcoinLogoPath: "/assets/banner-bitcoin-logo.svg", + bitcoinLogoFillColor: "#F7931A", + bitcoinLogoOutlineColor: "", + titleFillColor: "#F7931A", + titleOutlineColor: "#F7931A", + descriptionFillColor: "#000", + button1FillColor: "#F7931A", + button1OutlineColor: "#F7931A", + button1LabelFillColor: "#FFF", + button2FillColor: "#F7931A", + button2OutlineColor: "#F7931A", + button2LabelFillColor: "#FFF", + backgroundImagePath: 'url("/assets/images/home/banner/header-theme-2-3d-abstract.png")', + backgroundImagePathRetina: 'url("/assets/images/home/banner/header-theme-2-3d-abstract@2x.png")', + backgroundImagePathMobile: 'url("/assets/images/home/banner/header-theme-2-3d-abstract-mobile.png")', + backgroundImagePathMobileRetina: 'url("/assets/images/home/banner/header-theme-2-3d-abstract-mobile@2x.png")', + backgroundImageColor: "#64EBFC", flipLayoutOnMobile: false, - author: { - name: "Rama Krushna", - link: "https://github.com/BitcoinDesign/Guide/issues/272" - } + author: "Gabor Magyar", + authorLink: "https://github.com/BitcoinDesign/Guide/issues/143" } ]; @@ -212,77 +96,33 @@ var applyNextTheme = function() { applyTheme(currentThemeIndex); } -var getProperty = function(thing, find, fallback) { - if(!thing) { - return fallback ? fallback : null; - } - - if(!find) { - return fallback ? fallback : null; - } - - var result = thing; - var bits = find.split('.'); - var i=0, length=bits.length, bit; - for(; i