diff --git a/package.json b/package.json index e077d06..60da302 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,16 @@ "astro": "astro" }, "dependencies": { - "@astrojs/node": "^8.3.3", - "@astrojs/starlight": "^0.26.1", + "@astrojs/node": "^8.3.4", + "@astrojs/starlight": "^0.28.3", "@interledger/docs-design-system": "^0.5.2", "@types/showdown": "^2.0.6", - "astro": "^4.14.5", + "astro": "^4.15.12", "html-to-text": "^9.0.5", "markdown-it": "^14.1.0", "node-html-parser": "^6.1.13", "sharp": "^0.33.5", "showdown": "^2.1.0", - "starlight-links-validator": "^0.10.1" + "starlight-links-validator": "^0.12.3" } } diff --git a/public/img/blog/2024-10-11/hover-effect.mp4 b/public/img/blog/2024-10-11/hover-effect.mp4 new file mode 100644 index 0000000..3819263 Binary files /dev/null and b/public/img/blog/2024-10-11/hover-effect.mp4 differ diff --git a/public/img/blog/2024-10-11/test-boutique-dark.png b/public/img/blog/2024-10-11/test-boutique-dark.png new file mode 100644 index 0000000..1094a09 Binary files /dev/null and b/public/img/blog/2024-10-11/test-boutique-dark.png differ diff --git a/public/img/blog/2024-10-11/test-boutique-light.png b/public/img/blog/2024-10-11/test-boutique-light.png new file mode 100644 index 0000000..3db1346 Binary files /dev/null and b/public/img/blog/2024-10-11/test-boutique-light.png differ diff --git a/public/img/blog/2024-10-11/test-wallet-dark.png b/public/img/blog/2024-10-11/test-wallet-dark.png new file mode 100644 index 0000000..ab2f1c7 Binary files /dev/null and b/public/img/blog/2024-10-11/test-wallet-dark.png differ diff --git a/public/img/blog/2024-10-11/test-wallet-light.png b/public/img/blog/2024-10-11/test-wallet-light.png new file mode 100644 index 0000000..84776a5 Binary files /dev/null and b/public/img/blog/2024-10-11/test-wallet-light.png differ diff --git a/public/img/blog/2024-10-11/url-change.png b/public/img/blog/2024-10-11/url-change.png new file mode 100644 index 0000000..29b3be2 Binary files /dev/null and b/public/img/blog/2024-10-11/url-change.png differ diff --git a/src/content/blog/2024-10-11-where-did-rafiki-money-go.mdx b/src/content/blog/2024-10-11-where-did-rafiki-money-go.mdx new file mode 100644 index 0000000..c2d322d --- /dev/null +++ b/src/content/blog/2024-10-11-where-did-rafiki-money-go.mdx @@ -0,0 +1,101 @@ +--- +layout: ../../layouts/BlogLayout.astro +title: "Where did rafiki.money go?" +description: "Or “The need for rebranding when something confuses people.”" +date: 2024-10-11 +slug: where-did-rafiki-money-go +authors: [Timea Nagy] +author_urls: [https://www.linkedin.com/in/nagy-timea-35483024] +tags: + - Test Network +--- + +In the past few months we have come to know and love rafiki.money. So why did it disappear? Where did it go? + +Fear not, rafiki.money is not gone. It just needed a facelift, a proper rebranding. Why, you may ask? We will answer everything, but first, let’s just do a quick recap: + +[Rafiki](https://github.com/interledger/rafiki) is open source software that allows an [Account Servicing Entity](https://rafiki.dev/resources/glossary/#account-servicing-entity-ase) to enable Interledger functionality on its users’ accounts. This includes sending and receiving money via [SPSP](https://interledger.org/developers/rfcs/simple-payment-setup-protocol/) and [Open Payments](https://openpayments.dev/) and allowing third-party access to initiate payments and view transactions. + +Rafiki.money was intended to be the Test Wallet application for our Test Network. It simulates an Account Servicing Entity that has integrated Rafiki. Users can sign up for an account, navigate a KYC flow (newly powered by our partner [GateHub](https://gatehub.net/)) and then hold a play-money balance to send and receive Interledger Payments. In short, it is basically a Rafiki playground. + +All of the above still stands, but the need for a rebranding became obvious when some community members confused Rafiki with rafiki.money: + +“I am using Rafiki, so what now?” + +“I have integrated Rafiki locally. What are the next steps?” + +These users were in fact **using rafiki.money** and they had **not integrated Rafiki locally**, but were using rafiki.money on their machine. + +In order to help differentiate Rafiki from rafiki.money we have begun discussing ways in which we could rebrand our Test Wallet. We decided on two major changes: domain name and design. And while we are at it, we also squeezed in the same rebranding for Test E-Commerce, our own rafiki.boutique. + +## Introducing wallet.interledger-test.dev and boutique.interledger-test.dev + +We sensed that the name rafiki.money was contributing to the confusion, so we decided to change the domain name to interledger-test.dev. You can still enjoy the same fantastic Rafiki playground, Test Wallet, at _wallet.interledger-test.dev_ and our new boutique can be found at _boutique.interledger-test.dev_. + + + +## New design + +For the new design, we wanted to distinguish the look and feel of Testnet from any of the other Interledger projects. By going with a more angular and flat style, reminiscent of 8-bit or pixel-based visuals, we are hoping to express the idea that Test Network showcases products or nodes that are not fully evolved yet. + +We decided to go with a dark background and neon highlights, and a monospace font with pixel-style decorative elements for the development code. We also wanted to include a light-theme version for presentation in more formal settings, or for people who prefer a light theme. For now, this will be our production enabled theme. + +Upon finalizing the visuals with our in-house illustrator, [Madalina Tantareanu](https://www.madalinatantareanu.com/), our handover was done via HTML mock-ups built with Astro instead of a static design file. You can even see the frontend mockups at https://testnet-mockup.surge.sh/wallet/. This allowed us to effectively check that the new design would be completely viable on a web page. + +We were also able to account for designing the interactions, like hover states, which commonly get missed out if a static design file is used. + + + +## Challenges we faced, interesting stuff we used + +One of the more personal challenges we faced was coming to terms with letting go of the old colorful design, which we had grown fond of and associated closely with rafiki.money and rafiki.boutique. The color scheme was too similar to Interledgers look and feel. Our aim with the new design was to entirely separate Test Wallet from the idea of Rafiki. This led to the introduction of the two new color schemes for light and dark mode. We were pleased to see that the images remained in the design, but with different color variations. + +Have you seen anything like the new design before? We kind of love it! + +## Tailwind CSS + +Now, let’s go into details on the more techy side of the design. + +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework, packed with useful classes that can be used to build any design. Test Network has already been using Tailwind CSS, as we have found that this framework meets our needs the best. We didn’t want it to be one of those websites that blinds people when they open it on their device in the middle of the night, so we fixed this by having a dark mode option to be enabled in the application. Currently, this is available only for development mode, you can check out the dark theme in our [public Github repo](https://github.com/interledger/testnet). + +Codewise it is quite easy, just throw a dark: in front of any color utility to apply it when dark mode is active. Works for background colors, text colors, borders and gradients. + +The production/light mode, and development/dark mode will look like this: + +