Merge pull request #171 from blocknative/enhancement/svg-icon-files

Move all wallet icons in to wallet-icon folder.

Closes #170

Author: lnbc1QWFyb24

src/components/SelectedWallet.svelte

@@ -28,6 +28,7 @@
   <IconDisplay
     iconSrc={selectedWalletModule.iconSrc}
     iconSrcSet={selectedWalletModule.iconSrcSet}
+    svg={selectedWalletModule.svg}
     text={selectedWalletModule.name} />
 
   {#if installMessage}

src/elements/IconDisplay.svelte

@@ -2,6 +2,7 @@
   export let iconSrc: string
   export let iconSrcSet: string
   export let text: string
+  export let svg: string
 </script>
 
 <style>
@@ -36,6 +37,10 @@
 </style>
 
 <div class="bn-onboard-custom bn-onboard-icon-display">
-  <img src={iconSrc} srcset={iconSrcSet} alt={text} />
+  {#if svg}
+    {@html svg}
+  {:else}
+    <img src={iconSrc} srcset={iconSrcSet} alt={text} />
+  {/if}
   <span>{text}</span>
 </div>

src/modules/select/wallet-icons/authereum.png renamed to src/modules/select/wallet-icons/icon-authereum.png

@@ -0,0 +1,15 @@
+const fortmaticIcon = `
+  <svg 
+    height="40" 
+    viewBox="0 0 40 40" 
+    width="40" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m2744.99995 1155h9.99997 10.00008v9.98139h-10.00008-9.99997-9.99998v9.9814.64001 9.28323.05815 9.9234h-9.99997v-9.9234-.05815-9.28323-.64001-9.9814-9.98139h9.99997zm9.99961 29.88552h-9.94167v-9.92324h19.93595v10.27235c0 2.55359-1.01622 5.00299-2.82437 6.80909-1.80867 1.8061-4.26182 2.82181-6.82018 2.82335h-.34973z" 
+      fill="#617bff" 
+      fill-rule="evenodd" 
+      transform="translate(-2725 -1155)"/>
+  </svg>
+`
+
+export default fortmaticIcon

src/modules/select/wallet-icons/icon-fortmatic.ts

@@ -0,0 +1,5 @@
+const portisIcon = `
+  <svg height="40" viewBox="0 0 26 40" width="26" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="m.38447675 22.9277905.93812327-.4094678 11.54391448-5.0174216 12.4724258 5.4268894-4.6829268 9.6753574-11.46701915 1.6205695-8.60843446-9.3004926z" fill="#133444"/><path d="m22.7456446 16.9549441c-2.0594671-2.4810138-4.9778453-4.095319-8.1739757-4.5214466l-.2037727-.0269133c-.9972573-.1211147-2.0055061-.1211147-3.0027634 0l-.2056951.024991c-3.19683486.4253443-6.11569177 2.0406007-8.17397573 4.5233689l-.51904361.861228-.86315031 1.4340982-.63054187 1.0496216c0 .024991-.02499099.0595939-.03460291.0845849v.0173014l1.38988346.8285474 8.84296527 5.2288838 1.7070768 1.0073291v-12.4954944l-1.7070768.7689535v-1.8647122l1.7070768-.7689535 1.7051544.7689535 8.6776402 3.9504986z" fill="#c42370"/><path d="m25.7234381 26.0324402c-.0248538 4.0988643-1.872927 7.97397-5.0424337 10.5731107-1.2054271.9911619-2.5812108 1.7546176-4.0600744 2.2530337-1.2073828.3962299-2.4702232.5974018-3.7409588.5959469-7.11281993 0-12.8799712-6.3227281-12.8799712-13.4220913.00397806-1.0496754.13304725-2.0951358.38447675-3.1142617l12.47242585 7.3800313 12.4743482-7.3800313c.2623236 1.017244.3941046 2.0637403.3921873 3.1142617z" fill="#1c4d6b"/><path d="m11.3651328 12.4161961 1.5013817.6747567-1.7070768.7747206v-1.5436741z" fill="#000"/><path d="m11.1594377 15.7438424 1.7070768-.7766431v12.4993392l-1.7070768-1.0073291z" fill="#000"/><path d="m12.8665145 14.9671993v12.4993392l11.9533822-7.0647603z" fill="#1d4259"/><path d="m12.8665145.56470023v14.40249907l11.9533822 5.4345789z" fill="#4b6b9a"/><path d="m12.8665145 14.9671993v12.4954944l-1.7070768-1.007329-10.22900396-6.0535865h-.01730146.02499099c0-.024991.02691338-.0595939.03460291-.0845849l1.49369218-2.4837198 8.69301934-3.9408867v1.8589451z" fill="#343535"/><path d="m12.8665145 14.9671993v12.4993392l-1.7070768-1.0073291-10.23861588-6.0478193-.00768954-.0096119.01730146-.0173014 10.22900396-4.6406344z" fill="#3e5578"/><path d="m12.8665145.56470023v14.40249907l-11.95338222 5.4345789z" fill="#6db2d8"/><g fill="#335f8a"><path d="m8.02787456 38.4298931c.18070408.0768953.35948577.1537907.53826746.2210741-.17878169-.0672834-.35756338-.1441788-.53826746-.2210741z"/><path d="m8.56614202 38.6509672c.17878169.0692058.36717529.1384116.55364652.1922384-.18647123-.0538268-.37486483-.1153431-.55364652-.1922384z"/><path d="m9.59077256 39.000841c.14417878.0442149.28066803.0768954.42484684.1114983-.13648928-.0346029-.28066806-.0768953-.42484684-.1114983z"/></g><path d="m.38447675 22.9277905 12.47242585 7.3800312c-.1695149 1.1206915-.4701886 2.2175699-.8958309 3.2680524-1.0034843 2.4222035-3.01045293 4.9751291-6.91865911 3.0277544-3.17007392-2.5978633-5.0183503-6.4726906-5.04241259-10.5711883.00728258-1.0462943.13630945-2.0881863.38447675-3.1046497z" fill="#6db2d8"/><path d="m20.6733149 36.6036285-.0346029.0269134c-.0672834.0499819-.1287997.1018863-.1922384.1537907l-.0173014.015379c-.0672835.0595939-.1441788.1114983-.2133846.1634027-.0758242.0613437-.1554406.1178457-.2383756.1691697-.0828404.0521651-.1624447.1093005-.2383756.1710922-.0768953.0595939-.1461012.0941968-.2133846.1461012l-.0442148.0249909c-.074973.0519044-.1518683.0941968-.2210742.1441788 0 0-.0173014 0-.0249909.0173015-.0768954.0519043-.1537907.0941968-.2306861.1461011-.0768953.0519044-.1710921.0941968-.255677.1441788s-.1710922.0941968-.2556771.1364893h-.0096119l-.255677.1268773c-.0845849.0422924-.1710922.0865073-.265289.1287997-.0941968.0422925-.1787817.0845849-.2633666.1191878-.1787816.0768954-.3594857.1537907-.5382674.2210741-.1787817.0672835-.3671753.1364893-.5536465.1922384-.0729076.0274308-.147369.0505395-.2229965.0692058l-.2460652.0768954c-.1461011.0422924-.2825904.0768953-.4267692.1114982-.0519043.0153791-.1114982.024991-.1634026.0422925l-.0922744.0173014-.2306861.049982c-.0768953.0173015-.1364892.0269134-.2133846.0422924-.0632285.0158437-.1274537.0274043-.1922383.034603-.0692058.0096119-.1461012.0269133-.2133846.0346029-.0346029 0-.0692058 0-.1018864.0173014l-.1634026.0173015h-.0845849c-.0590384.0105165-.1188222.016302-.1787817.0173014-.0738847.010539-.1483704.0163181-.2229965.0173015-.0595939 0-.1095758 0-.1710921 0s-.1018864.0096119-.1518683.0096119c-.0595939 0-.1191878 0-.1710922 0s-.1614802 0-.2383756 0h-.5113541c-.0800209.0050111-.160277.0050111-.2402979 0-.0595939 0-.1191878 0-.1787817 0-.0519044 0-.1018864-.0096119-.1537907-.0096119-.0519044 0-.1114983 0-.1710922 0-.0733428-.0095846-.1471332-.0153595-.2210741-.0173015-.0595939 0-.1191878 0-.1787817-.0173014h-.0865073c-.0532121-.0105119-.1072489-.0163015-.1614802-.0173015-.0345121-.0018508-.0686979-.0076559-.1018863-.0173014-.0718302-.0066855-.1431228-.0182465-.2133846-.0346029-.0692059 0-.1287997-.024991-.1922384-.034603-.0718469-.0101919-.1430817-.0243105-.2133846-.0422924-.0692058-.0173014-.1537907-.0326805-.2306861-.049982l-.0941968-.0173014c-.0593497-.0042617-.1184021-.0119642-.17685927-.0230686-.14610116-.0346029-.29027995-.0768954-.42676919-.1114983l-.25567704-.0768953c-.07689535-.024991-.1537907-.0422925-.22299652-.0692059-.19223837-.0595938-.3671753-.1268773-.55364652-.1922383-.18647122-.0653611-.3671753-.1441788-.53826745-.2210742-.08458489-.0422924-.17878169-.0768953-.26528896-.1191878l-.26336657-.1287997-.25567704-.1268773c-.08458489-.0422924-.16916977-.0941968-.25567704-.1364892-.08650727-.0422925-.17109216-.0941968-.25567704-.1441788-.08458489-.049982-.1537907-.0941968-.23068605-.1461012l-.02499099-.0173014c-.07756662-.0428621-.1520765-.0910366-.22299652-.1441788l-.04229244-.024991c-.06728343-.0422925-.14417878-.0941968-.2133846-.1461012-.06920581-.0519043-.16148023-.1095759-.23837558-.1710921-.07689535-.0615163-.16148024-.1095759-.23837559-.1691698l-.2133846-.1634026-.01730145-.0153791c-.06920582-.0519044-.12879971-.1038087-.19223838-.1537907l-.0346029-.0269134c3.89859425 1.9454524 5.92094194-.6132404 6.92058154-3.0200648.4259299-1.0505261.7272373-2.1473626.8977532-3.2680524.1691803 1.1238755.4698526 2.2239751.8958308 3.2776643 1.0111739 2.3779887 3.0258321 4.9386038 6.9244263 2.9912291z" fill="#529bba"/><path d="m15.7077977 39.1123393c.1441788-.0346029.2902799-.0768953.4267692-.1114983-.1364893.034603-.2825904.0768954-.4267692.1114983z" fill="#335f8a"/><path d="m16.611318 38.8489727c.1922384-.0595939.3671753-.1287997.5555689-.1922383-.180704.0711281-.3671753.1326444-.5555689.1922383z" fill="#335f8a"/><path d="m17.1668869 38.6509672c.1787817-.0672834.3575634-.1441788.5363451-.2210741-.1787817.0768953-.3575634.1537907-.5363451.2210741z" fill="#335f8a"/><path d="m25.723417 26.0324402c-.0248327 4.0988643-1.8729059 7.97397-5.0424126 10.5731107-3.8985942 1.9454523-5.9209419-.6151628-6.9205815-3.0200649-.4250714-1.0506755-.7257265-2.1474858-.8958308-3.2680524l12.4724258-7.3800312c.2564764 1.0116964.3862701 2.0513377.3863991 3.0950378z" fill="#4b6b9a"/></g></svg>
+`
+
+export default portisIcon

src/modules/select/wallet-icons/icon-portis.ts

@@ -0,0 +1,14 @@
+const sqlkIcon = `
+  <svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Identity" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="Artboard" transform="translate(-11.000000, -220.000000)">
+          <g id="Group" transform="translate(11.508925, 220.556971)">
+              <circle id="Oval" fill="#313D53" cx="43.4910749" cy="43.4910749" r="43.4910749"></circle>
+              <path d="M26.9807751,53.5120539 L26.9807751,56.7049531 C26.9807751,58.9140921 28.7716361,60.7049531 30.9807751,60.7049531 L56.0422363,60.7049531 C58.2513753,60.7049531 60.0422363,58.9140921 60.0422363,56.7049531 L60.0422363,30.2473297 C60.0422363,28.0381907 58.2513753,26.2473297 56.0422363,26.2473297 L26.9807751,26.2473297 L26.9807751,47.8897807 L26.9807751,53.5120539 Z M20.4910749,20.4430293 L56.4910749,20.4430293 C62.0139224,20.4430293 66.4910749,24.9201818 66.4910749,30.4430293 L66.4910749,56.5391205 C66.4910749,62.061968 62.0139224,66.5391205 56.4910749,66.5391205 L30.4910749,66.5391205 C24.9682274,66.5391205 20.4910749,62.061968 20.4910749,56.5391205 L20.4910749,20.4430293 Z M33.9720552,26.2473297 L40.419051,26.2473297 L40.419051,41.0316245 L40.419051,49.5120539 C40.419051,51.7211929 38.62819,53.5120539 36.419051,53.5120539 L26.9807751,53.5120539 L26.9807751,47.8897807 L33.9720552,47.8897807 L33.9720552,26.2473297 Z M33.9720552,26.2473297 L40.419051,26.2473297 L33.9720552,26.2473297 Z M53.0509562,60.7049531 L46.6039605,60.7049531 L46.6039605,45.9206584 L46.6039605,37.4402289 C46.6039605,35.2310899 48.3948215,33.4402289 50.6039605,33.4402289 L60.0422363,33.4402289 L60.0422363,39.0625021 L53.0509562,39.0625021 L53.0509562,60.7049531 Z M46.6039605,60.7049531 L53.0509562,60.7049531 L46.6039605,60.7049531 Z M60.0422363,39.0625021 L60.0422363,33.4402289 L60.0422363,39.0625021 Z" id="Icon-Blue" fill="#E8EEFF"></path>
+          </g>
+      </g>
+  </g>
+  </svg>
+`
+
+export default sqlkIcon

src/modules/select/wallet-icons/icon-squarelink.ts

@@ -0,0 +1,7 @@
+const statusIcon = `
+<svg width="40" height="40" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.7 0C24.7 0 0.400024 24.3 0.400024 54.3C0.400024 84.3 24.7 108.6 54.7 108.6C84.7 108.6 109 84.3 109 54.3C108.9 24.3 84.6 0 54.7 0ZM47.3 77.6C40.4 78 33.4 74 33.1 67.5C32.7 61.1 37.9 56.8 46.5 56.4C49.7 56.2 52.3 56.5 54.8 56.7C57.4 57 60 57.2 63.1 57C64.6 56.9 66.2 56.7 67.8 56.4C67 67.4 58.6 77 47.3 77.6ZM65.3 52.3C61.9 52.5 59.2 52.2 56.5 51.9C53.8 51.6 51 51.3 47.7 51.5C46.1 51.6 44.4 51.8 42.8 52.2C43.8 40.2 52.6 29.7 64.5 29.1C71.8 28.7 79.1 33.1 79.5 40.2C79.9 47.2 74.4 51.8 65.3 52.3Z" fill="#4360DF"/>
+</svg>
+`
+
+export default statusIcon

src/modules/select/wallet-icons/icon-status.ts

@@ -0,0 +1,11 @@
+const trustIcon = `
+  <svg height="40" 
+    viewBox="0 0 40 40" 
+    width="40" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m1.36250526 6.825c-1.36250526 2.675-1.36250526 6.175-1.36250526 13.175s0 10.5 1.36250526 13.1750526c1.2 2.35 3.11249474 4.2624211 5.46249474 5.4624211 2.675 1.3625263 6.175 1.3625263 13.175 1.3625263s10.5 0 13.1750526-1.3625263c2.35-1.2 4.2624211-3.1124211 5.4624211-5.4624211 1.3625263-2.6750526 1.3625263-6.1750526 1.3625263-13.1750526s0-10.5-1.3625263-13.175c-1.2-2.35-3.1124211-4.26249474-5.4624211-5.46249474-2.6750526-1.36250526-6.1750526-1.36250526-13.1750526-1.36250526s-10.5 0-13.175 1.36250526c-2.35 1.2-4.26249474 3.11249474-5.46249474 5.46249474zm28.61875794 3.9624737c.35 0 .6812631.1437895.9250526.3875789.2436842.25.3812631.5874737.3751557.9311579-.0626294 3.7250527-.2064189 6.5750527-.4751557 8.8312632-.2625263 2.2563158-.6563158 3.9312631-1.25 5.2875789-.4.9062106-.8937895 1.6562106-1.4750526 2.2936842-.7812632.8437895-1.6749474 1.4563158-2.65 2.037579-.4168421.2492631-.8502106.4953684-1.3048421.7535789-.97.5508421-2.0365264 1.1565264-3.2451579 1.9651579-.4374737.2936842-1.0062106.2936842-1.4436843 0-1.2271578-.8181052-2.3077894-1.4312631-3.2866315-1.9865263-.2176842-.1234737-.4303158-.2441052-.6384211-.3634737-1.1436842-.6625263-2.1749474-1.2937894-3.0749474-2.2063158-.6-.6-1.1187368-1.3312631-1.5312631-2.2-.5625158-1.1625263-.94376843-2.5687368-1.22501054-4.3874736-.37501052-2.4312632-.56250526-5.6125264-.63146616-10.0250527-.0060391-.3436842.12521353-.6811579.3689609-.9311579.24374737-.2437894.5812526-.3875789.9312526-.3875789h.5375263c1.6562106.0063158 5.3124211-.1562105 8.4749474-2.61871581.4687369-.36250526 1.1250526-.36250526 1.5937895 0 3.1625263 2.46250531 6.8187368 2.62503161 8.4812631 2.61871581zm-2.9062106 14.6063158c.4062106-.837579.7437895-1.9937895 1-3.6563158.3062106-1.9874737.4937895-4.6874737.5812632-8.3624211-1.95-.0563158-5.3-.4312631-8.4937895-2.5812631-3.1936842 2.1436842-6.5436842 2.5187368-8.4874737 2.5812631.0687369 3.0374737.2062106 5.4.4249474 7.2562106.25 2.1125263.6063158 3.5437894 1.05 4.55.2937895.6687368.6188421 1.15 1.0063158 1.5749473.5187368.5688421 1.1749474 1.037579 2.0687368 1.5750527.3707369.222421.7794737.4537894 1.2244211.7056842.7927368.4486315 1.7003158.9623158 2.7130526 1.6068421.9941053-.634 1.8886316-1.1424211 2.6721053-1.5877895.2362105-.1342105.4622105-.2627368.6778947-.3872632 1.1-.6312631 1.9125263-1.1562105 2.5187369-1.7687368.4063157-.4187368.7375789-.8749474 1.0437894-1.5062105z" fill="#3375bb" fill-rule="evenodd"/>
+  </svg>
+`
+
+export default trustIcon

src/modules/select/wallet-icons/icon-trust.ts

@@ -0,0 +1,13 @@
+const walletConnectIcon = `
+  <svg 
+    height="25" 
+    viewBox="0 0 40 25" 
+    width="40" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+  <path d="m8.19180572 4.83416816c6.52149658-6.38508884 17.09493158-6.38508884 23.61642788 0l.7848727.76845565c.3260748.31925442.3260748.83686816 0 1.15612272l-2.6848927 2.62873374c-.1630375.15962734-.4273733.15962734-.5904108 0l-1.0800779-1.05748639c-4.5495589-4.45439756-11.9258514-4.45439756-16.4754105 0l-1.1566741 1.13248068c-.1630376.15962721-.4273735.15962721-.5904108 0l-2.68489263-2.62873375c-.32607483-.31925456-.32607483-.83686829 0-1.15612272zm29.16903948 5.43649934 2.3895596 2.3395862c.3260732.319253.3260751.8368636.0000041 1.1561187l-10.7746894 10.5494845c-.3260726.3192568-.8547443.3192604-1.1808214.0000083-.0000013-.0000013-.0000029-.0000029-.0000042-.0000043l-7.6472191-7.4872762c-.0815187-.0798136-.2136867-.0798136-.2952053 0-.0000006.0000005-.000001.000001-.0000015.0000014l-7.6470562 7.4872708c-.3260715.3192576-.8547434.319263-1.1808215.0000116-.0000019-.0000018-.0000039-.0000037-.0000059-.0000058l-10.7749893-10.5496247c-.32607469-.3192544-.32607469-.8368682 0-1.1561226l2.38956395-2.3395823c.3260747-.31925446.85474652-.31925446 1.18082136 0l7.64733029 7.4873809c.0815188.0798136.2136866.0798136.2952054 0 .0000012-.0000012.0000023-.0000023.0000035-.0000032l7.6469471-7.4873777c.3260673-.31926181.8547392-.31927378 1.1808214-.0000267.0000046.0000045.0000091.000009.0000135.0000135l7.6473203 7.4873909c.0815186.0798135.2136866.0798135.2952053 0l7.6471967-7.4872433c.3260748-.31925458.8547465-.31925458 1.1808213 0z" 
+        fill="#3b99fc"/>
+  </svg>
+`
+
+export default walletConnectIcon

src/modules/select/wallet-icons/icon-wallet-connect.ts

@@ -1,4 +1,4 @@
-import authereumIcon from '../wallet-icons/authereum.png'
+import authereumIcon from '../wallet-icons/icon-authereum.png'
 import { networkName } from '../../../utilities'
 import { WalletModule } from '../../../interfaces'
 

src/modules/select/wallets/authereum.ts

@@ -1,19 +1,7 @@
 import { networkName } from '../../../utilities'
 import { SdkWalletOptions, WalletModule, Helpers } from '../../../interfaces'
 
-const fortmaticIcon = `
-  <svg 
-    height="40" 
-    viewBox="0 0 40 40" 
-    width="40" 
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="m2744.99995 1155h9.99997 10.00008v9.98139h-10.00008-9.99997-9.99998v9.9814.64001 9.28323.05815 9.9234h-9.99997v-9.9234-.05815-9.28323-.64001-9.9814-9.98139h9.99997zm9.99961 29.88552h-9.94167v-9.92324h19.93595v10.27235c0 2.55359-1.01622 5.00299-2.82437 6.80909-1.80867 1.8061-4.26182 2.82181-6.82018 2.82335h-.34973z" 
-      fill="#617bff" 
-      fill-rule="evenodd" 
-      transform="translate(-2725 -1155)"/>
-  </svg>
-`
+import fortmaticIcon from '../wallet-icons/icon-fortmatic'
 
 function fortmatic(options: SdkWalletOptions): WalletModule {
   const { apiKey, networkId, preferred, label, iconSrc, svg } = options