chore: rename assets with CAIP : separator to windows-friendly - (#418)

* chore: losslessly compress sample assets

* chore: rename assets with CAIP `:` separator to windows-friendly `-`

* chore: rename asset paths in code

* fix: zkSync asset naming

advanced/dapps/react-dapp-v2-cosmos-provider/src/chains/cosmos.ts

@@ -35,7 +35,7 @@ export const CosmosChainData = {
 
 export const CosmosMetadata: NamespaceMetadata = {
   "cosmoshub-4": {
-    logo: "/assets/" + "cosmos:cosmoshub-4.png",
+    logo: "/assets/" + "cosmos-cosmoshub-4.png",
     rgb: "27, 31, 53",
   },
 };

advanced/dapps/react-dapp-v2-cosmos-provider/src/chains/eip155.ts

@@ -21,55 +21,55 @@ export const EIP155Colors = {
 export const EIP155Metadata: NamespaceMetadata = {
   "1": {
     name: "Ethereum",
-    logo: "/assets/" + "eip155:1.png",
+    logo: "/assets/" + "eip155-1.png",
     rgb: EIP155Colors.ethereum,
   },
   "5": {
-    logo: "/assets/" + "eip155:5.png",
+    logo: "/assets/" + "eip155-5.png",
     rgb: EIP155Colors.goerli,
   },
   "10": {
     name: "Optimism",
-    logo: "/assets/" + "eip155:10.png",
+    logo: "/assets/" + "eip155-10.png",
     rgb: EIP155Colors.optimism,
   },
   "42": {
-    logo: "/assets/" + "eip155:42.png",
+    logo: "/assets/" + "eip155-42.png",
     rgb: EIP155Colors.ethereum,
   },
   "69": {
-    logo: "/assets/" + "eip155:69.png",
+    logo: "/assets/" + "eip155-69.png",
     rgb: EIP155Colors.optimism,
   },
   "100": {
-    logo: "/assets/" + "eip155:100.png",
+    logo: "/assets/" + "eip155-100.png",
     rgb: EIP155Colors.xdai,
   },
   "137": {
     name: "Polygon",
-    logo: "/assets/" + "eip155:137.png",
+    logo: "/assets/" + "eip155-137.png",
     rgb: EIP155Colors.polygon,
   },
   "80001": {
-    logo: "/assets/" + "eip155:80001.png",
+    logo: "/assets/" + "eip155-80001.png",
     rgb: EIP155Colors.polygon,
   },
   "42161": {
     name: "Arbitrum",
-    logo: "/assets/" + "eip155:42161.png",
+    logo: "/assets/" + "eip155-42161.png",
     rgb: EIP155Colors.arbitrum,
   },
   "42220": {
     name: "Celo",
-    logo: "/assets/" + "eip155:42220.png",
+    logo: "/assets/" + "eip155-42220.png",
     rgb: EIP155Colors.celo,
   },
   "44787": {
-    logo: "/assets/" + "eip155:44787.png",
+    logo: "/assets/" + "eip155-44787.png",
     rgb: EIP155Colors.celo,
   },
   "421611": {
-    logo: "/assets/" + "eip155:421611.png",
+    logo: "/assets/" + "eip155-421611.png",
     rgb: EIP155Colors.arbitrum,
   },
 };

advanced/dapps/react-dapp-v2-with-ethers/src/assets/eth.svg

@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 16 26">
-  <path
-    fill="#0C0C0D"
-    fillRule="nonzero"
-    d="M8 19.096l7.998-4.733L8 25.637 0 14.363l8 4.733zM8 0l8 12.6-8 4.733L0 12.6 8 0z"
-  />
-</svg>
+<svg height="26" viewBox="0 0 16 26" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8 19.096 7.998-4.733-7.998 11.274-8-11.274zm0-19.096 8 12.6-8 4.733-8-4.733z" fill="#0c0c0d"/></svg>

advanced/dapps/react-dapp-v2-with-ethers/src/assets/polkadot.svg

@@ -1 +1 @@
-<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><defs><style>.cls-1{fill:#e6007a;}</style></defs><ellipse class="cls-1" cx="1000" cy="441.78" rx="254.27" ry="147.95"/><ellipse class="cls-1" cx="1000" cy="1556.15" rx="254.27" ry="147.95"/><ellipse class="cls-1" cx="517.47" cy="720.38" rx="254.27" ry="147.95" transform="translate(-365.13 808.33) rotate(-60)"/><ellipse class="cls-1" cx="1482.53" cy="1277.56" rx="254.27" ry="147.95" transform="translate(-365.13 1922.69) rotate(-60)"/><ellipse class="cls-1" cx="517.47" cy="1277.56" rx="147.95" ry="254.27" transform="translate(-569.45 429.89) rotate(-30)"/><ellipse class="cls-1" cx="1482.53" cy="720.38" rx="147.95" ry="254.27" transform="translate(-161.57 837.78) rotate(-30)"/></svg>
+<svg viewBox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg"><g fill="#e6007a"><ellipse cx="1000" cy="441.78" rx="254.27" ry="147.95"/><ellipse cx="1000" cy="1556.15" rx="254.27" ry="147.95"/><ellipse cx="517.47" cy="720.38" rx="254.27" ry="147.95" transform="matrix(.5 -.8660254 .8660254 .5 -365.13 808.33)"/><ellipse cx="1482.53" cy="1277.56" rx="254.27" ry="147.95" transform="matrix(.5 -.8660254 .8660254 .5 -365.13 1922.69)"/><ellipse cx="517.47" cy="1277.56" rx="147.95" ry="254.27" transform="matrix(.8660254 -.5 .5 .8660254 -569.45 429.89)"/><ellipse cx="1482.53" cy="720.38" rx="147.95" ry="254.27" transform="matrix(.8660254 -.5 .5 .8660254 -161.57 837.78)"/></g></svg>

advanced/dapps/react-dapp-v2-with-ethers/src/chains/cosmos.ts

@@ -4,7 +4,7 @@ import { NamespaceMetadata, ChainMetadata, ChainRequestRender } from "../helpers
 
 export const CosmosMetadata: NamespaceMetadata = {
   "cosmoshub-4": {
-    logo: "/assets/" + "cosmos:cosmoshub-4.png",
+    logo: "/assets/" + "cosmos-cosmoshub-4.png",
     rgb: "27, 31, 53",
   },
 };

advanced/dapps/react-dapp-v2-with-ethers/src/chains/eip155.ts

@@ -129,55 +129,55 @@ export const EIP155ChainData = {
 export const EIP155Metadata: NamespaceMetadata = {
   "1": {
     name: "Ethereum",
-    logo: "/assets/" + "eip155:1.png",
+    logo: "/assets/" + "eip155-1.png",
     rgb: EIP155Colors.ethereum,
   },
   "5": {
-    logo: "/assets/" + "eip155:5.png",
+    logo: "/assets/" + "eip155-5.png",
     rgb: EIP155Colors.goerli,
   },
   "10": {
     name: "Optimism",
-    logo: "/assets/" + "eip155:10.png",
+    logo: "/assets/" + "eip155-10.png",
     rgb: EIP155Colors.optimism,
   },
   "42": {
-    logo: "/assets/" + "eip155:42.png",
+    logo: "/assets/" + "eip155-42.png",
     rgb: EIP155Colors.ethereum,
   },
   "69": {
-    logo: "/assets/" + "eip155:69.png",
+    logo: "/assets/" + "eip155-69.png",
     rgb: EIP155Colors.optimism,
   },
   "100": {
-    logo: "/assets/" + "eip155:100.png",
+    logo: "/assets/" + "eip155-100.png",
     rgb: EIP155Colors.xdai,
   },
   "137": {
     name: "Polygon",
-    logo: "/assets/" + "eip155:137.png",
+    logo: "/assets/" + "eip155-137.png",
     rgb: EIP155Colors.polygon,
   },
   "80001": {
-    logo: "/assets/" + "eip155:80001.png",
+    logo: "/assets/" + "eip155-80001.png",
     rgb: EIP155Colors.polygon,
   },
   "42161": {
     name: "Arbitrum",
-    logo: "/assets/" + "eip155:42161.png",
+    logo: "/assets/" + "eip155-42161.png",
     rgb: EIP155Colors.arbitrum,
   },
   "42220": {
     name: "Celo",
-    logo: "/assets/" + "eip155:42220.png",
+    logo: "/assets/" + "eip155-42220.png",
     rgb: EIP155Colors.celo,
   },
   "44787": {
-    logo: "/assets/" + "eip155:44787.png",
+    logo: "/assets/" + "eip155-44787.png",
     rgb: EIP155Colors.celo,
   },
   "421611": {
-    logo: "/assets/" + "eip155:421611.png",
+    logo: "/assets/" + "eip155-421611.png",
     rgb: EIP155Colors.arbitrum,
   },
 };

advanced/dapps/react-dapp-v2-with-web3js/src/assets/eth.svg

@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 16 26">
-  <path
-    fill="#0C0C0D"
-    fillRule="nonzero"
-    d="M8 19.096l7.998-4.733L8 25.637 0 14.363l8 4.733zM8 0l8 12.6-8 4.733L0 12.6 8 0z"
-  />
-</svg>
+<svg height="26" viewBox="0 0 16 26" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8 19.096 7.998-4.733-7.998 11.274-8-11.274zm0-19.096 8 12.6-8 4.733-8-4.733z" fill="#0c0c0d"/></svg>

advanced/dapps/react-dapp-v2-with-web3js/src/assets/polkadot.svg

@@ -1 +1 @@
-<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><defs><style>.cls-1{fill:#e6007a;}</style></defs><ellipse class="cls-1" cx="1000" cy="441.78" rx="254.27" ry="147.95"/><ellipse class="cls-1" cx="1000" cy="1556.15" rx="254.27" ry="147.95"/><ellipse class="cls-1" cx="517.47" cy="720.38" rx="254.27" ry="147.95" transform="translate(-365.13 808.33) rotate(-60)"/><ellipse class="cls-1" cx="1482.53" cy="1277.56" rx="254.27" ry="147.95" transform="translate(-365.13 1922.69) rotate(-60)"/><ellipse class="cls-1" cx="517.47" cy="1277.56" rx="147.95" ry="254.27" transform="translate(-569.45 429.89) rotate(-30)"/><ellipse class="cls-1" cx="1482.53" cy="720.38" rx="147.95" ry="254.27" transform="translate(-161.57 837.78) rotate(-30)"/></svg>
+<svg viewBox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg"><g fill="#e6007a"><ellipse cx="1000" cy="441.78" rx="254.27" ry="147.95"/><ellipse cx="1000" cy="1556.15" rx="254.27" ry="147.95"/><ellipse cx="517.47" cy="720.38" rx="254.27" ry="147.95" transform="matrix(.5 -.8660254 .8660254 .5 -365.13 808.33)"/><ellipse cx="1482.53" cy="1277.56" rx="254.27" ry="147.95" transform="matrix(.5 -.8660254 .8660254 .5 -365.13 1922.69)"/><ellipse cx="517.47" cy="1277.56" rx="147.95" ry="254.27" transform="matrix(.8660254 -.5 .5 .8660254 -569.45 429.89)"/><ellipse cx="1482.53" cy="720.38" rx="147.95" ry="254.27" transform="matrix(.8660254 -.5 .5 .8660254 -161.57 837.78)"/></g></svg>

advanced/dapps/react-dapp-v2-with-web3js/src/chains/cosmos.ts

@@ -4,7 +4,7 @@ import { NamespaceMetadata, ChainMetadata, ChainRequestRender } from "../helpers
 
 export const CosmosMetadata: NamespaceMetadata = {
   "cosmoshub-4": {
-    logo: "/assets/" + "cosmos:cosmoshub-4.png",
+    logo: "/assets/" + "cosmos-cosmoshub-4.png",
     rgb: "27, 31, 53",
   },
 };
@@ -18,9 +18,7 @@ export function getChainMetadata(chainId: string): ChainMetadata {
   return metadata;
 }
 
-export function getChainRequestRender(
-  request: JsonRpcRequest
-): ChainRequestRender[] {
+export function getChainRequestRender(request: JsonRpcRequest): ChainRequestRender[] {
   return [
     { label: "Method", value: request.method },
     {

advanced/dapps/react-dapp-v2-with-web3js/src/chains/eip155.ts

@@ -129,55 +129,55 @@ export const EIP155ChainData = {
 export const EIP155Metadata: NamespaceMetadata = {
   "1": {
     name: "Ethereum",
-    logo: "/assets/" + "eip155:1.png",
+    logo: "/assets/" + "eip155-1.png",
     rgb: EIP155Colors.ethereum,
   },
   "5": {
-    logo: "/assets/" + "eip155:5.png",
+    logo: "/assets/" + "eip155-5.png",
     rgb: EIP155Colors.goerli,
   },
   "10": {
     name: "Optimism",
-    logo: "/assets/" + "eip155:10.png",
+    logo: "/assets/" + "eip155-10.png",
     rgb: EIP155Colors.optimism,
   },
   "42": {
-    logo: "/assets/" + "eip155:42.png",
+    logo: "/assets/" + "eip155-42.png",
     rgb: EIP155Colors.ethereum,
   },
   "69": {
-    logo: "/assets/" + "eip155:69.png",
+    logo: "/assets/" + "eip155-69.png",
     rgb: EIP155Colors.optimism,
   },
   "100": {
-    logo: "/assets/" + "eip155:100.png",
+    logo: "/assets/" + "eip155-100.png",
     rgb: EIP155Colors.xdai,
   },
   "137": {
     name: "Polygon",
-    logo: "/assets/" + "eip155:137.png",
+    logo: "/assets/" + "eip155-137.png",
     rgb: EIP155Colors.polygon,
   },
   "80001": {
-    logo: "/assets/" + "eip155:80001.png",
+    logo: "/assets/" + "eip155-80001.png",
     rgb: EIP155Colors.polygon,
   },
   "42161": {
     name: "Arbitrum",
-    logo: "/assets/" + "eip155:42161.png",
+    logo: "/assets/" + "eip155-42161.png",
     rgb: EIP155Colors.arbitrum,
   },
   "42220": {
     name: "Celo",
-    logo: "/assets/" + "eip155:42220.png",
+    logo: "/assets/" + "eip155-42220.png",
     rgb: EIP155Colors.celo,
   },
   "44787": {
-    logo: "/assets/" + "eip155:44787.png",
+    logo: "/assets/" + "eip155-44787.png",
     rgb: EIP155Colors.celo,
   },
   "421611": {
-    logo: "/assets/" + "eip155:421611.png",
+    logo: "/assets/" + "eip155-421611.png",
     rgb: EIP155Colors.arbitrum,
   },
 };

advanced/dapps/react-dapp-v2/public/assets/eip155-324.svg

@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m0 64c0-35.3462 28.6538-64 64-64h384c35.346 0 64 28.6538 64 64v384c0 35.346-28.654 64-64 64h-384c-35.3462 0-64-28.654-64-64z" fill="#f2f2f2"/><g fill="#000"><path d="m160 128-128 128 128 128v-96l128-96h-128z"/><path d="m480 256-128-128v96l-128 96h128v64z"/></g></svg>

advanced/dapps/react-dapp-v2/public/assets/eip155:324.svg

@@ -1,5 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 64C0 28.6538 28.6538 0 64 0H448C483.346 0 512 28.6538 512 64V448C512 483.346 483.346 512 448 512H64C28.6538 512 0 483.346 0 448V64Z" fill="#F2F2F2"/>
-<path d="M160 128L32 256L160 384V288L288 192H160V128Z" fill="black"/>
-<path d="M480 256L352 128V224L224 320H352V384L480 256Z" fill="black"/>
-</svg>