chore: changes from dev into main

.eslintrc.json

@@ -6,5 +6,8 @@
     "project": ["'./packages/*/tsconfig.json'", "'./examples/*/tsconfig.json'"],
     "ecmaVersion": 2020,
     "sourceType": "module"
+  },
+  "rules": {
+    "import/no-cycle": ["error", {"ignoreExternal": true }]
   }
 }

.github/workflows/cf-deploy-react.yml

@@ -3,9 +3,8 @@ on:
   push:
     branches:
       - main
+      - dev
   pull_request:
-    branches:
-      - main
 
 jobs:
   deploy:
@@ -33,5 +32,4 @@ jobs:
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: sygma-react-widget
           directory: ./examples/react-widget-app/dist
-          branch: main
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/cf-deploy-widget.yml

@@ -3,9 +3,8 @@ on:
   push:
     branches:
       - main
+      - dev
   pull_request:
-    branches:
-      - main
 
 jobs:
   deploy:
@@ -33,5 +32,4 @@ jobs:
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: sygma-widget
           directory: ./packages/widget/dist
-          branch: main
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -3,7 +3,8 @@ name: "ci / test"
 on:
   push:
     branches:
-      - main # runs on push to master, add more branches if you use them
+      - main
+      - dev
   pull_request:
     branches:
       - '**' # runs on update to pull request on any branch

packages/widget/src/assets/icons/identicon.ts

@@ -0,0 +1,157 @@
+import { html } from 'lit';
+
+const identicon = html`
+  <svg
+    part="identicon"
+    width="49"
+    height="50"
+    viewBox="0 0 49 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="24.3483"
+      cy="24.3483"
+      r="23.9285"
+      transform="matrix(-1 0 0 1 48.9502 0.469238)"
+      fill="white"
+      stroke="#CBCBCB"
+      stroke-width="0.839598"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 28.0591 5.50659)"
+      fill="#95A6FF"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 35.043 9.61597)"
+      fill="#3B0D75"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 42.2329 13.7244)"
+      fill="#00FFE0"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 13.8838 13.7244)"
+      fill="#3F8AC0"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 21.0737 9.61597)"
+      fill="#D900EC"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 28.0591 13.5188)"
+      fill="#3F8AC0"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 35.043 17.6274)"
+      fill="#FF1593"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 42.2329 21.7358)"
+      fill="#95A6FF"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 13.8838 21.7358)"
+      fill="#95A6FF"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 21.0737 17.6274)"
+      fill="#3B0D75"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 28.0591 21.5303)"
+      fill="#00FFE0"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 35.043 25.6396)"
+      fill="#D900EC"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 42.2329 29.748)"
+      fill="#3B0D75"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 13.8838 29.748)"
+      fill="#3B0D75"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 21.0737 25.6396)"
+      fill="#FF1593"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 28.0591 29.543)"
+      fill="#FF1593"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 35.043 33.6511)"
+      fill="#95A6FF"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 21.0737 33.6511)"
+      fill="#95A6FF"
+    />
+    <circle
+      cx="3.28694"
+      cy="3.28694"
+      r="3.28694"
+      transform="matrix(-1 0 0 1 28.0591 37.5547)"
+      fill="#3F8AC0"
+    />
+  </svg>
+`;
+
+export default identicon;

packages/widget/src/assets/index.ts

@@ -13,6 +13,9 @@ import phalaNetworkIcon from './icons/phalaNetworkIcon';
 import polygonNetworkIcon from './icons/polygonNetworkIcon';
 import switchNetworkIcon from './icons/switchNetwork';
 import sygmaLogo from './icons/sygmaLogo';
+import identicon from './icons/identicon';
+import plusIcon from './icons/plusIcon';
+import greenCircleIcon from './icons/greenCircleIcon';
 
 export const networkIconsMap = {
   ethereum: ethereumIcon,
@@ -37,5 +40,8 @@ export {
   noNetworkIcon,
   chevronIcon,
   greenMark,
-  loaderIcon
+  loaderIcon,
+  identicon,
+  plusIcon,
+  greenCircleIcon
 };

packages/widget/src/components/address-input/address-input.ts

@@ -22,7 +22,9 @@ export class AddressInput extends BaseComponent {
   @property({ attribute: false })
   onAddressChange: (address: string) => void = () => {};
 
-  @property({ attribute: false })
+  @property({
+    type: String
+  })
   networkType: Network = Network.EVM;
 
   @state()
@@ -76,7 +78,7 @@ export class AddressInput extends BaseComponent {
             }
           }}
           @input=${(evt: Event) =>
-            this.handleAddressChange((evt.target as HTMLTextAreaElement).value)}
+            this.handleAddressChange((evt.target as HTMLInputElement).value)}
         ></textarea>
       </div>
     </section>`;

packages/widget/src/components/address-input/styles.ts

@@ -6,6 +6,7 @@ export const styles = css`
     flex-direction: column;
     justify-content: center;
     gap: 0.5rem;
+    margin-top: 1rem;
     min-height: 7.75rem; // TOO: remove this hardcoded value
   }
 
@@ -47,5 +48,6 @@ export const styles = css`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    margin-bottom: 0.25rem;
   }
 `;

packages/widget/src/components/common/buttons/connect-wallet.styles.ts

@@ -14,8 +14,7 @@ export const connectWalletStyles = css`
     align-items: center;
   }
 
-  .walletAddress,
-  .connectWalletButton {
+  .walletAddress {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--zinc-700);
@@ -26,14 +25,25 @@ export const connectWalletStyles = css`
   }
 
   .connectWalletButton {
-    padding: 0.375rem 0.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0.38rem 0.75rem;
     border-radius: 2.5rem;
-    background-color: var(--zinc-100);
-    border: 1px solid var(--gray-100);
+    background: var(--zinc-800);
+    color: var(--zinc-200);
+    font-size: 0.875rem;
+    font-weight: 500;
+    outline: none;
+    border: none;
     cursor: pointer;
-  }
+    transition: filter 0.3s ease;
+
+    &:hover {
+      filter: brightness(120%);
+    }
 
-  .connectWalletButton:hover {
-    background-image: linear-gradient(rgb(0 0 0/3%) 0 0);
+    svg {
+      margin-right: 0.5rem;
+    }
   }
 `;