Clean up SVG files (#1096)

* remove copyright * optimize icon importing * no svg -> ts conversion * remove unnecessary logo file
coinbase · Dec 8, 2023 · 9b768c0 · 9b768c0
1 parent 03f418d
commit 9b768c0
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 203 deletions.
diff --git a/packages/wallet-sdk/compile-assets.js b/packages/wallet-sdk/compile-assets.js
@@ -5,7 +5,6 @@
 const fs = require('fs');
 const glob = require('glob');
 const sass = require('sass');
-const { optimize } = require('svgo');
 
 async function main() {
   // compile SCSS
@@ -18,24 +17,6 @@ async function main() {
       mode: 0o644,
     });
   }
-  // compile SVG
-  const svgFiles = glob.sync(`${__dirname}/src/**/*.svg`);
-  for (const filePath of svgFiles) {
-    console.info(`Compiling ${filePath}...`);
-    const svg = fs.readFileSync(filePath, { encoding: 'utf8' });
-    const { data } = optimize(svg, {
-      path: filePath,
-      datauri: 'base64',
-      // datauri inlining won't happen until min size has been reached per
-      // https://github.com/svg/svgo/blob/b37d90e12a87312bba87a6c52780884e6e595e23/lib/svgo.js#L57-L68
-      // so we enable multipass for that to happen
-      multipass: true,
-    });
-    const ts = `export default \`${data}\``;
-    fs.writeFileSync(filePath.replace(/\.svg$/, '-svg.ts'), ts, {
-      mode: 0o644,
-    });
-  }
   console.info('DONE!');
 }
 

diff --git a/packages/wallet-sdk/package.json b/packages/wallet-sdk/package.json
@@ -64,7 +64,6 @@
     "jest-websocket-mock": "^2.4.0",
     "prettier": "^2.8.8",
     "sass": "^1.64.1",
-    "svgo": "^2.8.0",
     "ts-jest": "^27.1.5",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.0",

diff --git a/packages/wallet-sdk/src/relay/walletlink/ui/components/ConnectContent/ConnectContent.tsx b/packages/wallet-sdk/src/relay/walletlink/ui/components/ConnectContent/ConnectContent.tsx
@@ -7,9 +7,8 @@ import { h } from 'preact';
 import { createQrUrl } from '../../../../../core/util';
 import { LIB_VERSION } from '../../../../../version';
 import { CloseIcon } from '../icons/CloseIcon';
-import coinbaseWalletRound from '../icons/coinbase-wallet-round-svg';
+import { CoinbaseWalletRound } from '../icons/CoinbaseWalletRound';
 import { QRCodeIcon } from '../icons/QRCodeIcon';
-import walletLogo from '../icons/QRLogoWallet';
 import { QRCode } from '../QRCode';
 import { Spinner } from '../Spinner/Spinner';
 import { Theme } from '../types';
@@ -30,7 +29,6 @@ type ConnectContentProps = {
 const wallet = {
   title: 'Coinbase Wallet app',
   description: 'Connect with your self-custody wallet',
-  icon: coinbaseWalletRound,
   steps: CoinbaseWalletSteps,
 };
 
@@ -67,27 +65,11 @@ export function ConnectContent(props: ConnectContentProps) {
       </div>
       <div className="-cbwsdk-connect-content-layout">
         <div className="-cbwsdk-connect-content-column-left">
-          <ConnectItem
-            title={wallet.title}
-            description={wallet.description}
-            icon={wallet.icon}
-            theme={theme}
-          />
+          <ConnectItem title={wallet.title} description={wallet.description} theme={theme} />
         </div>
         <div className="-cbwsdk-connect-content-column-right">
           <div className="-cbwsdk-connect-content-qr-wrapper">
-            <QRCode
-              content={qrUrl}
-              width={200}
-              height={200}
-              fgColor="#000"
-              bgColor="transparent"
-              image={{
-                svg: walletLogo,
-                width: 25,
-                height: 25,
-              }}
-            />
+            <QRCode content={qrUrl} width={200} height={200} fgColor="#000" bgColor="transparent" />
             <input type="hidden" name="cbw-cbwsdk-version" value={LIB_VERSION} />
             <input type="hidden" value={qrUrl} />
           </div>
@@ -110,15 +92,14 @@ export function ConnectContent(props: ConnectContentProps) {
 type ConnectItemProps = {
   title: string;
   description: string;
-  icon: string;
   theme: Theme;
 };
 
-export function ConnectItem({ title, description, icon, theme }: ConnectItemProps) {
+function ConnectItem({ title, description, theme }: ConnectItemProps) {
   return (
     <div className={clsx('-cbwsdk-connect-item', theme)}>
       <div>
-        <img src={icon} alt={title} />
+        <CoinbaseWalletRound />
       </div>
       <div className="-cbwsdk-connect-item-copy-wrapper">
         <h3 className="-cbwsdk-connect-item-title">{title}</h3>

diff --git a/packages/wallet-sdk/src/relay/walletlink/ui/components/icons/CoinbaseWalletRound.tsx b/packages/wallet-sdk/src/relay/walletlink/ui/components/icons/CoinbaseWalletRound.tsx
@@ -0,0 +1,24 @@
+import { h } from 'preact';
+
+export function CoinbaseWalletRound(props: h.JSX.SVGAttributes<SVGSVGElement>) {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="14" cy="14" r="14" fill="#0052FF" />
+      <path
+        d="M23.8521 14.0003C23.8521 19.455 19.455 23.8521 14.0003 23.8521C8.54559 23.8521 4.14844 19.455 4.14844 14.0003C4.14844 8.54559 8.54559 4.14844 14.0003 4.14844C19.455 4.14844 23.8521 8.54559 23.8521 14.0003Z"
+        fill="white"
+      />
+      <path
+        d="M11.1855 12.5042C11.1855 12.0477 11.1855 11.7942 11.2835 11.642C11.3814 11.4899 11.4793 11.3377 11.6261 11.287C11.8219 11.1855 12.0178 11.1855 12.5073 11.1855H15.4934C15.983 11.1855 16.1788 11.1855 16.3746 11.287C16.5215 11.3884 16.6683 11.4899 16.7173 11.642C16.8152 11.8449 16.8152 12.0477 16.8152 12.5042V15.4965C16.8152 15.953 16.8152 16.2066 16.7173 16.3587C16.6194 16.5109 16.5215 16.663 16.3746 16.7137C16.1788 16.8152 15.983 16.8152 15.4934 16.8152H12.5073C12.0178 16.8152 11.8219 16.8152 11.6261 16.7137C11.4793 16.6123 11.3324 16.5109 11.2835 16.3587C11.1855 16.1558 11.1855 15.953 11.1855 15.4965V12.5042Z"
+        fill="#0052FF"
+      />
+    </svg>
+  );
+}
diff --git a/packages/wallet-sdk/src/relay/walletlink/ui/components/icons/QRLogoWallet.ts b/packages/wallet-sdk/src/relay/walletlink/ui/components/icons/QRLogoWallet.ts
diff --git a/...s/wallet-sdk/src/relay/walletlink/ui/components/icons/coinbase-wallet-round.svg b/...s/wallet-sdk/src/relay/walletlink/ui/components/icons/coinbase-wallet-round.svg
diff --git a/yarn.lock b/yarn.lock
@@ -2840,7 +2840,6 @@ __metadata:
     prettier: ^2.8.8
     sass: ^1.64.1
     sha.js: ^2.4.11
-    svgo: ^2.8.0
     ts-jest: ^27.1.5
     ts-node: ^10.9.1
     tslib: ^2.6.0
@@ -3997,13 +3996,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@trysound/sax@npm:0.2.0":
-  version: 0.2.0
-  resolution: "@trysound/sax@npm:0.2.0"
-  checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c
-  languageName: node
-  linkType: hard
-
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.9
   resolution: "@tsconfig/node10@npm:1.0.9"
@@ -5158,13 +5150,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"boolbase@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "boolbase@npm:1.0.0"
-  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
-  languageName: node
-  linkType: hard
-
 "borsh@npm:^0.7.0":
   version: 0.7.0
   resolution: "borsh@npm:0.7.0"
@@ -5579,13 +5564,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "commander@npm:7.2.0"
-  checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc
-  languageName: node
-  linkType: hard
-
 "compute-scroll-into-view@npm:1.0.20":
   version: 1.0.20
   resolution: "compute-scroll-into-view@npm:1.0.20"
@@ -5688,52 +5666,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-select@npm:^4.1.3":
-  version: 4.3.0
-  resolution: "css-select@npm:4.3.0"
-  dependencies:
-    boolbase: ^1.0.0
-    css-what: ^6.0.1
-    domhandler: ^4.3.1
-    domutils: ^2.8.0
-    nth-check: ^2.0.1
-  checksum: d6202736839194dd7f910320032e7cfc40372f025e4bf21ca5bf6eb0a33264f322f50ba9c0adc35dadd342d3d6fae5ca244779a4873afbfa76561e343f2058e0
-  languageName: node
-  linkType: hard
-
-"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "css-tree@npm:1.1.3"
-  dependencies:
-    mdn-data: 2.0.14
-    source-map: ^0.6.1
-  checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f
-  languageName: node
-  linkType: hard
-
-"css-what@npm:^6.0.1":
-  version: 6.1.0
-  resolution: "css-what@npm:6.1.0"
-  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
-  languageName: node
-  linkType: hard
-
 "css.escape@npm:^1.5.1":
   version: 1.5.1
   resolution: "css.escape@npm:1.5.1"
   checksum: f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
   languageName: node
   linkType: hard
 
-"csso@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "csso@npm:4.2.0"
-  dependencies:
-    css-tree: ^1.1.2
-  checksum: 380ba9663da3bcea58dee358a0d8c4468bb6539be3c439dc266ac41c047217f52fd698fb7e4b6b6ccdfb8cf53ef4ceed8cc8ceccb8dfca2aa628319826b5b998
-  languageName: node
-  linkType: hard
-
 "cssom@npm:^0.4.4":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -5976,24 +5915,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-serializer@npm:^1.0.1":
-  version: 1.4.1
-  resolution: "dom-serializer@npm:1.4.1"
-  dependencies:
-    domelementtype: ^2.0.1
-    domhandler: ^4.2.0
-    entities: ^2.0.0
-  checksum: fbb0b01f87a8a2d18e6e5a388ad0f7ec4a5c05c06d219377da1abc7bb0f674d804f4a8a94e3f71ff15f6cb7dcfc75704a54b261db672b9b3ab03da6b758b0b22
-  languageName: node
-  linkType: hard
-
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
-  version: 2.3.0
-  resolution: "domelementtype@npm:2.3.0"
-  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
-  languageName: node
-  linkType: hard
-
 "domexception@npm:^2.0.1":
   version: 2.0.1
   resolution: "domexception@npm:2.0.1"
@@ -6003,26 +5924,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domhandler@npm:^4.2.0, domhandler@npm:^4.3.1":
-  version: 4.3.1
-  resolution: "domhandler@npm:4.3.1"
-  dependencies:
-    domelementtype: ^2.2.0
-  checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa
-  languageName: node
-  linkType: hard
-
-"domutils@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "domutils@npm:2.8.0"
-  dependencies:
-    dom-serializer: ^1.0.1
-    domelementtype: ^2.2.0
-    domhandler: ^4.2.0
-  checksum: abf7434315283e9aadc2a24bac0e00eab07ae4313b40cc239f89d84d7315ebdfd2fb1b5bf750a96bc1b4403d7237c7b2ebf60459be394d625ead4ca89b934391
-  languageName: node
-  linkType: hard
-
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -6067,13 +5968,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "entities@npm:2.2.0"
-  checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3
-  languageName: node
-  linkType: hard
-
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -8830,13 +8724,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.14":
-  version: 2.0.14
-  resolution: "mdn-data@npm:2.0.14"
-  checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16
-  languageName: node
-  linkType: hard
-
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -9250,15 +9137,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nth-check@npm:^2.0.1":
-  version: 2.1.1
-  resolution: "nth-check@npm:2.1.1"
-  dependencies:
-    boolbase: ^1.0.0
-  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
-  languageName: node
-  linkType: hard
-
 "nwsapi@npm:^2.2.0":
   version: 2.2.7
   resolution: "nwsapi@npm:2.2.7"
@@ -10447,13 +10325,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stable@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "stable@npm:0.1.8"
-  checksum: 2ff482bb100285d16dd75cd8f7c60ab652570e8952c0bfa91828a2b5f646a0ff533f14596ea4eabd48bb7f4aeea408dce8f8515812b975d958a4cc4fa6b9dfeb
-  languageName: node
-  linkType: hard
-
 "stack-utils@npm:^2.0.3":
   version: 2.0.6
   resolution: "stack-utils@npm:2.0.6"
@@ -10715,23 +10586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svgo@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "svgo@npm:2.8.0"
-  dependencies:
-    "@trysound/sax": 0.2.0
-    commander: ^7.2.0
-    css-select: ^4.1.3
-    css-tree: ^1.1.3
-    csso: ^4.2.0
-    picocolors: ^1.0.0
-    stable: ^0.1.8
-  bin:
-    svgo: bin/svgo
-  checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420
-  languageName: node
-  linkType: hard
-
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"