Merge pull request #649 from wanderwallet/staging

Wander 1.24.1

.github/CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Contributing to ArConnect
+# Contributing to Wander
 
-Thank you for your interest in contributing to the ArConnect extension! Below are the guidelines to help you get started.
+Thank you for your interest in contributing to the Wander extension! Below are the guidelines to help you get started.
 
 > **Important:** Always work from the "development" branch when making contributions. This ensures your changes are based on the latest development version.
 

.github/README.md

@@ -1,18 +1,18 @@
-# ArConnect
+# Wander
 
-ArConnect is a browser extension allowing Arweave wallet holders to interact with dApps securely and easily.
+Wander is a browser extension allowing Arweave wallet holders to interact with dApps securely and easily.
 
 ## API
 
-You can interact with basic ArConnect functionalities using [`arweave-js`](https://npmjs.com/arweave). To create a transaction, you just don't pass in the user's wallet instance:
+You can interact with basic Wander functionalities using [`arweave-js`](https://npmjs.com/arweave). To create a transaction, you just don't pass in the user's wallet instance:
 
 ```ts
 const tx = await arweave.createTransaction({
   /* config */
 });
 ```
 
-Than, you can use ArConnect to add the users wallet to the transaction and sign it (as before, you don't pass in the user's wallet instance, that is done by ArConnect):
+Than, you can use Wander to add the users wallet to the transaction and sign it (as before, you don't pass in the user's wallet instance, that is done by Wander):
 
 ```ts
 await arweave.transactions.sign(tx);
@@ -22,21 +22,21 @@ Done! Now you can post the transaction.
 
 ## Events
 
-ArConnect has some useful custom events.
+Wander has some useful custom events.
 
 ### `arweaveWalletLoaded`
 
-Triggers when the ArConnect global object (`window.arweaveWallet`) is injected into the page. It can be useful when executing functions on page load.
+Triggers when the Wander global object (`window.arweaveWallet`) is injected into the page. It can be useful when executing functions on page load.
 
 ```ts
 window.addEventListener("arweaveWalletLoaded", () => {
-  /** Handle ArConnect load event **/
+  /** Handle Wander load event **/
 });
 ```
 
 ### `walletSwitch`
 
-Triggers, when the user switches their wallet in the ArConnect extension popup.
+Triggers, when the user switches their wallet in the Wander extension popup.
 
 ```ts
 window.addEventListener("walletSwitch", (e) => {
@@ -49,13 +49,13 @@ Requires the `ACCESS_ADDRESS` and the `ACCESS_ALL_ADDRESSES` [permissions](#perm
 
 ## Other supported functions
 
-ArConnect supports much more with it's powerful API. These features are not integrated into arweave-js right now, but please let us know if you would like to see them added or not. You can access all of these using the global `window.arweaveWallet` object (`window.arweaveWallet.getActiveAddress()`, etc.).
+Wander supports much more with it's powerful API. These features are not integrated into arweave-js right now, but please let us know if you would like to see them added or not. You can access all of these using the global `window.arweaveWallet` object (`window.arweaveWallet.getActiveAddress()`, etc.).
 
 All of these functions are asynchronous, so you will need to `await` them. If you are using Typescript, read [this](#typescript-types) for type declarations.
 
 ### `connect(permissions, appInfo?, gateway?)`
 
-Connect to ArConnect and request permissions. This function can always be called again if you want to request more permissions for your site. See the available permissions [here](#permissions).
+Connect to Wander and request permissions. This function can always be called again if you want to request more permissions for your site. See the available permissions [here](#permissions).
 
 - `permissions`: An array of [permissions](#permissions)
 - `appInfo`: Optional information about your application (see the [format](#app-info))
@@ -82,7 +82,7 @@ Connect to ArConnect and request permissions. This function can always be called
 
 ### `disconnect()`
 
-Disconnect from ArConnect. Removes all permissions from your site.
+Disconnect from Wander. Removes all permissions from your site.
 
 ### `getActiveAddress(): Promise<string>`
 
@@ -102,7 +102,7 @@ Requires the `ACCESS_PUBLIC_KEY` [permission](#permissions).
 
 ### `getAllAddresses(): Promise<string[]>`
 
-Get all addresses added to the ArConnect extension
+Get all addresses added to the Wander extension
 
 - `returns`: A list of the added wallets' addresses.
 
@@ -163,7 +163,7 @@ Requires the `DECRYPT` [permission](#permissions).
 
 ### ~~`signature(data, options): Promise<Uint8Array>`~~
 
-> ⚠️ **Deprecation warning:** The `signature()` function is deprecated in ArConnect 1.0.0. Read about the alternatives below.
+> ⚠️ **Deprecation warning:** The `signature()` function is deprecated in Wander 1.0.0. Read about the alternatives below.
 
 #### Alternatives
 
@@ -215,7 +215,7 @@ Requires the `SIGNATURE` [permission](#permissions).
 
 #### Options
 
-ArConnect allows you to customize the hash algorithm (`SHA-256` by default):
+Wander allows you to customize the hash algorithm (`SHA-256` by default):
 
 ```ts
 export interface SignMessageOptions {
@@ -229,7 +229,7 @@ Verify validity of a cryptographic signature for a given piece of data
 
 - `data`: `ArrayBuffer` data to verify against the signature
 - `signature`: `ArrayBuffer | string` Signature to validate
-- `publicKey?`: `string` Arweave wallet `JWK.n` field, tx owner field or [public key from ArConnect](#getactivepublickey-promisestring)
+- `publicKey?`: `string` Arweave wallet `JWK.n` field, tx owner field or [public key from Wander](#getactivepublickey-promisestring)
 - `options`: [`SignMessageOptions`](#options) Configuration for the signature
   <br />
 - `returns`: `Boolean` Validity of the signature
@@ -252,19 +252,19 @@ Requires the `ACCESS_ARWEAVE_CONFIG` [permission](#permissions).
 
 ### `addToken(id, type?, gateway?)`
 
-Add a token to the user's wallet (ArConnect). The token will show up in ArConnect assets / collectibles.
+Add a token to the user's wallet (Wander). The token will show up in Wander assets / collectibles.
 
 > **Note:** You do not need to be connected in order to add a token
 
 - `id`: ID of the token to add
 - `type`: Optional token type (`asset` or `collectible`)
 - `gateway`: Optional gateway to fetch the token from (see the [format](#arweave-config))
 
-> **Warning:** If the gateway is defined, ArConnect will not use the default Warp Mainnet Gateway, but the custom one. This might slow down evaluation!
+> **Warning:** If the gateway is defined, Wander will not use the default Warp Mainnet Gateway, but the custom one. This might slow down evaluation!
 
 ### `isTokenAdded(id)`
 
-Check if a token has been added to the user's wallet (ArConnect).
+Check if a token has been added to the user's wallet (Wander).
 
 - `id`: ID of the token to add
   <br />
@@ -277,13 +277,13 @@ There are 8 permissions currently available. When calling `connect`, you need to
 The permissions:
 
 - `ACCESS_ADDRESS`:
-  Access the current address selected in ArConnect
+  Access the current address selected in Wander
 
 - `ACCESS_PUBLIC_KEY`
-  Access the public key of the current address selected in ArConnect
+  Access the public key of the current address selected in Wander
 
 - `ACCESS_ALL_ADDRESSES`:
-  Access all addresses added to ArConnect
+  Access all addresses added to Wander
 
 - `SIGN_TRANSACTION`:
   Sign a transaction
@@ -317,7 +317,7 @@ The user can set a custom Arweave config in the extension. It implements the fol
 
 ## Typescript types
 
-To support ArConnect types, you can install the npm package `arconnect`, like this:
+To support Wander types, you can install the npm package `arconnect`, like this:
 
 ```sh
 npm i -D arconnect

src/components/auth/Message.tsx

@@ -77,8 +77,10 @@ const EncodingSelect = styled.select`
   background-color: transparent;
 `;
 
-const MessageText = styled(Text).attrs({
-  noMargin: true
-})`
+const MessageText = styled.div`
   font-size: 0.9rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  height: 200px;
+  overflow-y: auto;
 `;

src/components/hardware/HardwareWalletTheme.tsx

@@ -22,7 +22,7 @@ import {
 function hardwareThemeModifier(theme: ArconnectTheme): ArconnectTheme {
   return {
     ...theme,
-    theme: "154, 184, 255",
+    theme: "#9AB8FF",
     primary: "#9AB8FF",
     primaryBtnHover: "#6F93E1"
   };

src/components/popup/list/TokenListItem.tsx

@@ -94,6 +94,7 @@ const DivDescriptionWrapper = styled.div`
 const DivTitleWrapper = styled.div`
   font-size: 1rem;
   font-weight: 600;
+  color: ${(props) => props.theme.primaryText};
 `;
 
 const DivListItem = styled.div`
@@ -122,7 +123,7 @@ const ImgTokenLogo = styled.img.attrs({
 const SpanTokenType = styled.span`
   padding: 0.08rem 0.2rem;
   background-color: rgb(${(props) => props.theme.theme});
-  color: #fff;
+  color: ${(props) => props.theme.primaryText};
   font-weight: 500;
   font-size: 0.5rem;
   text-transform: uppercase;

src/lib/coingecko.ts

@@ -3,6 +3,7 @@ import BigNumber from "bignumber.js";
 import { useState, useCallback, useEffect } from "react";
 import redstone from "redstone-api";
 import { retryWithDelay } from "~utils/promises/retry";
+import { ExtensionStorage } from "~utils/storage";
 
 /**
  * Compare two currencies
@@ -30,15 +31,7 @@ export async function getArPrice(currency: string) {
   try {
     return await getPrice("arweave", currency.toLowerCase());
   } catch (error) {
-    console.error(error, "redirecting to redstone");
-
-    const res = await redstone.getPrice("AR");
-
-    if (!res.value) {
-      return 0;
-    }
-
-    return res.source.coingecko;
+    throw new Error("Failed to fetch AR price");
   }
 }
 
@@ -52,8 +45,20 @@ export function useArPrice(currency: string) {
     queryKey: ["arPrice", currency],
     queryFn: async () => {
       if (!currency) return "0";
-      const result = await getArPrice(currency);
-      return String(result || "0");
+
+      try {
+        const result = await getArPrice(currency);
+        if (result) {
+          await ExtensionStorage.set("last_saved_price", String(result));
+          return String(result);
+        }
+      } catch (error) {
+        const lastPrice = await ExtensionStorage.get<string>(
+          "last_saved_price"
+        );
+        if (lastPrice) return lastPrice;
+      }
+      return "0";
     },
     select: (data) => data || "0",
     retry: 3,

src/routes/popup/purchase.tsx

@@ -3,10 +3,13 @@ import {
   ListItem,
   ButtonV2,
   Loading,
-  useToasts,
   ListItemIcon
 } from "@arconnect/components";
-import { Input as InputV2, useInput } from "@arconnect/components-rebrand";
+import {
+  Input as InputV2,
+  useInput,
+  useToasts
+} from "@arconnect/components-rebrand";
 import browser from "webextension-polyfill";
 import { Bank, BankNote01, ChevronDown } from "@untitled-ui/icons-react";
 import switchIcon from "url:/assets/ecosystem/switch-vertical.svg";
@@ -26,6 +29,7 @@ import arLogo from "url:/assets/ecosystem/ar-logo.svg";
 import CommonImage from "~components/common/Image";
 import getSymbolFromCurrency from "currency-symbol-map";
 import { useStorage } from "@plasmohq/storage/hook";
+import { WarningIcon } from "~components/popup/Token";
 
 export function PurchaseView() {
   const { navigate } = useLocation();
@@ -42,6 +46,8 @@ export function PurchaseView() {
   const [quote, setQuote] = useState<Quote | null>();
   const [exchangeRate, setExchangeRate] = useState<number>(0);
   const [payInputValue, setpayInputValue] = useState<string>("");
+  const [unavailableQuote, setUnavailableQuote] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
   const { setToast } = useToasts();
   const theme = useTheme();
 
@@ -70,6 +76,10 @@ export function PurchaseView() {
     if (quote) {
       const rate = quote.fiatAmount / quote.cryptoAmount;
       setExchangeRate(rate);
+      setUnavailableQuote(false);
+    } else {
+      setExchangeRate(0);
+      setUnavailableQuote(true);
     }
     setQuote(quote);
     setLoading(false);
@@ -144,11 +154,14 @@ export function PurchaseView() {
           try {
             const resJson = await response.json();
             if (resJson?.error?.message) {
-              setToast({
-                type: "error",
-                content: resJson?.error?.message,
-                duration: 2400
-              });
+              // TODO: decide whether to notify errors by toast or warning styled component
+              // to make it consistent with mobile app
+              // setToast({
+              //   type: "error",
+              //   content: resJson?.error?.message,
+              //   duration: 2400
+              // });
+              setError(resJson?.error?.message);
             } else {
               throw new Error("Network response was not ok");
             }
@@ -172,12 +185,15 @@ export function PurchaseView() {
       fetchQuote();
     } else {
       setQuote(null);
+      setExchangeRate(0);
+      setUnavailableQuote(false);
     }
   }, [debouncedYouPayInput, selectedCurrency, paymentMethod, arConversion]);
 
   useEffect(() => {
     youPayInput.setState("");
     setExchangeRate(0);
+    setUnavailableQuote(false);
   }, [selectedCurrency]);
 
   const buyAR = async () => {
@@ -212,6 +228,13 @@ export function PurchaseView() {
       <HeadV2 title="Buy" />
       <Wrapper>
         <Top>
+          {unavailableQuote && (
+            <WarningWrapper>
+              <WarningContent>
+                <WarningIcon /> {error}
+              </WarningContent>
+            </WarningWrapper>
+          )}
           <InputV2
             stacked
             sizeVariant="large"
@@ -369,7 +392,7 @@ export function PurchaseView() {
           )}
           <Line />
           <InputButton
-            style={{ background: "#242426" }}
+            style={{ background: theme.surfaceTertiary }}
             label={browser.i18n.getMessage("buy_screen_payment_method_label")}
             onClick={() => setShowPaymentSelector(true)}
             disabled={!paymentMethod}
@@ -688,3 +711,23 @@ export const TokenLogo = styled(CommonImage).attrs({
   display: block;
   vertical-align: middle;
 `;
+
+const WarningWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 10px;
+`;
+
+const WarningContent = styled.span`
+  font-size: 16px;
+  border: 1px solid ${(props) => props.theme.surfaceTertiary};
+  border-radius: 30px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: ${(props) => props.theme.primaryTextv2};
+`;