Merge remote-tracking branch 'origin/main' into implicitly-existential

tahowallet · Oct 15, 2021 · ff7679e · ff7679e
2 parents 91561bd + 1b9c65f
commit ff7679e
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 35 deletions.
diff --git a/ui/components/Overview/OverviewAssetsTable.tsx b/ui/components/Overview/OverviewAssetsTable.tsx
@@ -24,7 +24,11 @@ export default function OverviewAssetsTable(props: Props): ReactElement {
           <tr>
             <td>
               <div className="asset_descriptor">
-                <SharedAssetIcon size="small" />
+                <SharedAssetIcon
+                  size="small"
+                  logoURL={asset?.asset?.metadata?.logoURL}
+                  symbol={asset?.asset?.symbol}
+                />
                 <span className="asset_name">{asset.asset.symbol}</span>
               </div>
             </td>

diff --git a/ui/components/Shared/SharedAssetIcon.tsx b/ui/components/Shared/SharedAssetIcon.tsx
@@ -3,26 +3,51 @@ import React, { ReactElement } from "react"
 interface Props {
   size?: "small" | "medium" | "large"
   logoURL?: string
+  symbol?: string
 }
 
 export default function SharedAssetIcon(props: Props): ReactElement {
-  const { logoURL, size } = props
+  const { size, logoURL, symbol } = props
+
+  const hardcodedIcons = ["ETH"]
+  const hasHardcodedIcon = hardcodedIcons.includes(symbol)
+
+  // Checks to see if it's an http(s) address because I've seen
+  // strings get here like ipfs://QmYNz8J1h5yefkaAw6tZwUYoJyBTWmBXgAY28ZWZ5rPsLR
+  // which won't load. Of if we have a hardcoded backup image
+  const hasValidImage =
+    (logoURL && logoURL.includes("http")) || hasHardcodedIcon
 
   return (
     <div className={`token_icon_wrap ${size}`}>
-      <span className="icon_eth" />
-
+      {hasValidImage ? (
+        <div className="token_icon" />
+      ) : (
+        <div className={`token_icon_fallback ${size}`}>
+          {symbol.slice(0)[0]}
+        </div>
+      )}
       <style jsx>
         {`
           .token_icon_wrap {
             width: 40px;
             height: 40px;
-            background-color: var(--castle-black);
             border-radius: 80px;
+            overflow: hidden;
+            background-color: var(--castle-black);
+          }
+          .token_icon_fallback {
+            width: 100%;
+            height: 100%;
+            color: var(--green-60);
+            font-weight: 900;
             display: flex;
             align-items: center;
             justify-content: center;
           }
+          .medium .token_icon_fallback {
+            margin-top: 1px;
+          }
           .small {
             width: 32px;
             height: 32px;
@@ -37,22 +62,27 @@ export default function SharedAssetIcon(props: Props): ReactElement {
           }
         `}
       </style>
-      <style jsx>
-        {`
-          .icon_eth {
-            background: url("${logoURL || "./images/eth@2x.png"}");
-            background-size: cover;
-            width: ${logoURL ? "32px" : "18px"};
-            height: ${logoURL ? "32px" : "29px"};
-            height: 32px;
-          }
-        `}
-      </style>
+      <style jsx>{`
+        .token_icon {
+          width: 100%;
+          height: 100%;
+          background-color: var(--castle-black);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          ${hasHardcodedIcon
+            ? `background: url("${`./images/${symbol}@2x.png`}") center no-repeat;
+            background-size: 45% auto;`
+            : `background: url("${logoURL}");
+            background-size: cover;`}
+        }
+      `}</style>
     </div>
   )
 }
 
 SharedAssetIcon.defaultProps = {
   size: "medium",
-  logoURL: undefined,
+  logoURL: null,
+  symbol: "ETH",
 }
diff --git a/ui/components/Wallet/WalletAssetListItem.tsx b/ui/components/Wallet/WalletAssetListItem.tsx
@@ -27,16 +27,10 @@ export default function WalletAssetListItem(props: Props): ReactElement {
       >
         <div className="list_item standard_width">
           <div className="left">
-            {assetAmount?.asset?.metadata?.logoURL ? (
-              <img
-                width="40px"
-                src={assetAmount?.asset?.metadata?.logoURL}
-                alt=""
-              />
-            ) : (
-              <SharedAssetIcon />
-            )}
-
+            <SharedAssetIcon
+              logoURL={assetAmount?.asset?.metadata?.logoURL}
+              symbol={assetAmount?.asset?.symbol}
+            />
             <div className="left_content">
               <div className="amount">
                 <span className="bold_amount_count">

diff --git a/ui/pages/Onboarding/OnboardingCreatePassword.tsx b/ui/pages/Onboarding/OnboardingCreatePassword.tsx
@@ -15,8 +15,10 @@ export default function OnboardingCreatePassword(props: Props): ReactElement {
       <div className="full_logo" />
       <h1 className="serif_header">Good hunting.</h1>
       <div className="subtitle">The decentralized web awaits.</div>
-      <SharedInput placeholder="Password" />
-      <div className="repeat_password_wrap">
+      <div className="input_wrap">
+        <SharedInput placeholder="Password" />
+      </div>
+      <div className="input_wrap repeat_password_wrap">
         <SharedInput placeholder="Repeat Password" />
       </div>
       <SharedButton type="primary" size="large" onClick={triggerNextStep}>
@@ -37,6 +39,9 @@ export default function OnboardingCreatePassword(props: Props): ReactElement {
             height: 120px;
             margin-bottom: 17px;
           }
+          .input_wrap {
+            width: 211px;
+          }
           .repeat_password_wrap {
             margin-top: 19px;
             margin-bottom: 24px;

diff --git a/ui/pages/SingleAsset.tsx b/ui/pages/SingleAsset.tsx
@@ -30,13 +30,14 @@ export default function SingleAsset(): ReactElement {
         <div className="header standard_width_padded">
           <div className="left">
             <div className="asset_wrap">
-              <SharedAssetIcon />
+              <SharedAssetIcon
+                logoURL={filteredAsset?.asset?.metadata?.logoURL}
+                symbol={filteredAsset?.asset?.symbol}
+              />
               <span className="asset_name">{symbol}</span>
             </div>
             <div className="balance">{filteredAsset.localizedDecimalValue}</div>
-            <div className="usd_value">
-              (${filteredAsset.localizedUserValue})
-            </div>
+            <div className="usd_value">${filteredAsset.localizedUserValue}</div>
           </div>
           <div className="right">
             <SharedButton
@@ -117,7 +118,6 @@ export default function SingleAsset(): ReactElement {
             font-size: 16px;
             font-weight: 600;
             line-height: 24px;
-            text-align: center;
           }
           .label_light {
             color: var(--green-40);

diff --git a/ui/pages/Swap.tsx b/ui/pages/Swap.tsx
@@ -118,7 +118,7 @@ export default function Swap(): ReactElement {
             border-radius: 70%;
             margin: 0 auto;
             margin-top: -5px;
-            margin-bottom: -26px;
+            margin-bottom: -32px;
             position: relative;
           }
           .settings_wrap {