feat: display amount to be received on destination

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @Lykhoyda @wainola @saadjhk @mpetrunic

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

@@ -3,13 +3,9 @@ on:
   push:
     branches:
       - main
-    paths:
-    - 'packages/react/**'
   pull_request:
     branches:
       - main
-    paths:
-      - 'packages/react/**'
 
 jobs:
   deploy:

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

@@ -3,13 +3,9 @@ on:
   push:
     branches:
       - main
-    paths:
-    - 'packages/widget/**'
   pull_request:
     branches:
       - main
-    paths:
-      - 'packages/widget/**'
 
 jobs:
   deploy:

examples/react-widget-app/src/App.css

@@ -0,0 +1,117 @@
+
+body, html {
+    background-color: #F5F0E9;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    src: url('https://fonts.googleapis.com/css2?family=Inter:[email protected]');
+}
+
+.page{
+    display: flex;
+}
+
+.main{
+    flex: 1;
+    overflow: auto;
+    height: 100vh;
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sidebar{
+    position: relative;
+    height: 100vh;
+    width: 20%;
+    background-color: rgba(254, 86, 20, 0.2);
+    display: none;
+    flex-direction: column;
+}
+
+.sidebar.open{
+    display: flex;
+}
+
+.sidebar-title{
+    font-size: 2rem;
+    text-align: center;
+    color: black;
+    margin-top: 10%;
+}
+
+.sidebar-button {
+    margin-top: 1.5rem;
+    width: 12rem; 
+    font-size: 1.2rem; 
+    border: 1;
+    border-color: #F5F0E9;
+    border-radius: 4rem;
+    background-color: #FE5614;
+    color: #F5F0E9;
+    cursor: pointer;
+}
+
+.icon-column{
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.icon-wrapper {
+    padding-top: 1.8rem;
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+}
+
+.icon-wrapper img {
+    width: 2.3rem;
+    height: 2.3rem;
+}
+
+.icon-wrapper a {
+    color: black;
+    text-decoration: none;
+    font-size: 1.3rem;
+    margin-left: 5%;
+}
+
+.icon-wrapper a:hover {
+    color: white;
+    font-weight: bold;
+}
+
+#open-sidebar-button {
+    position: fixed; 
+    top: 2rem; 
+    left: 2rem; 
+    cursor: pointer; 
+}
+
+#open-sidebar-button img {
+    height: 3.2rem;
+    width: 3.2rem;
+}
+
+#close-icon{
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    cursor: pointer;
+}
+
+#close-icon img{
+    width: 0.8rem;
+    height: 0.8rem;
+}

examples/react-widget-app/src/App.tsx

@@ -1,10 +1,59 @@
 import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget'
+import './App.css';
+import sygmaIcon from './public/sygmaIcon.svg'
+import gitHubIcon from './public/githubIcon.png'
+import docsIcon from './public/docsIcon.png'
+import closeIcon from './public/closeIcon.png'
+import sidebarIcon from './public/sidebarIcon.png'
+import { useState } from 'react';
 
 function App() {
 
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
+  };
+
+  const obtainTokensClick = () => {
+    window.open("https://docs.buildwithsygma.com/environments/testnet/obtain-testnet-tokens", "_blank");
+  };
+
   return (
-    <SygmaProtocolReactWidget />
-  )
-}
 
+    <div className="page">
+      <aside className={`sidebar centered ${sidebarOpen ? 'open' : ''}`}>
+        {sidebarOpen && (
+          <div id="close-icon" onClick={toggleSidebar}>
+            <img src={closeIcon} alt="Close Sidebar" className="icon" />
+          </div>
+        )} 
+        <div className="sidebar-title">Sygma Widget</div>
+        <div className="icon-column"> 
+          <div className="icon-wrapper">
+            <a href="https://buildwithsygma.com/" target="_blank"><img src={sygmaIcon} alt="Main Page" /></a>
+            <a href="https://buildwithsygma.com/" target="_blank"><span>Website</span></a>
+          </div>
+          <div className="icon-wrapper">
+            <a href="https://docs.buildwithsygma.com/" target="_blank"><img src={docsIcon} alt="Documentation"/></a>
+            <a href="https://docs.buildwithsygma.com/" target="_blank"><span>Docs</span></a>
+          </div>
+          <div className="icon-wrapper">
+            <a href="https://github.com/sygmaprotocol" target="_blank"><img src={gitHubIcon} alt="GitHub" id="github-icon"/></a>
+            <a href="https://github.com/sygmaprotocol" target="_blank"><span>GitHub</span></a>
+          </div>
+          <button className="sidebar-button" onClick={obtainTokensClick}>Obtain Testnet Tokens</button>
+        </div>
+      </aside>
+      <main className={"main centered"}>
+        <SygmaProtocolReactWidget />
+      </main>
+      {!sidebarOpen && (
+        <div id="open-sidebar-button" onClick={toggleSidebar}>
+          <img src={sidebarIcon} alt="Toggle Sidebar" className="icon" />
+        </div>
+      )}
+    </div>
+    )
+  }
 export default App

packages/widget/.env.development

@@ -0,0 +1 @@
+VITE_BRIDGE_ENV=testnet

packages/widget/.env.production

@@ -0,0 +1 @@
+VITE_BRIDGE_ENV=mainnet

packages/widget/package.json

@@ -13,8 +13,9 @@
   ],
   "scripts": {
     "start": "yarn run dev",
-    "dev": "vite",
-    "build": "yarn run lint:types && yarn run clean && vite build",
+    "dev": "VITE_BRIDGE_ENV=testnet vite",
+    "build": "yarn run lint:types && yarn run clean && vite build --mode development",
+    "build:production": "yarn run lint:types && yarn run clean && vite build",
     "build:preview": "yarn run clean && vite build --config vite.preview.config.ts",
     "serve": "vite preview --config vite.preview.config.ts",
     "clean": "rm -rf ./build",
@@ -28,7 +29,7 @@
   "author": "Sygmaprotocol Product Team",
   "dependencies": {
     "@buildwithsygma/sygma-contracts": "^2.5.1",
-    "@buildwithsygma/sygma-sdk-core": "^2.7.2",
+    "@buildwithsygma/sygma-sdk-core": "^2.10.0",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",

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

@@ -4,6 +4,7 @@ import type { HTMLTemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
+import type { PropertyValues } from '@lit/reactive-element';
 import { validateAddress } from '../../utils';
 import { BaseComponent } from '../common/base-component/base-component';
 
@@ -24,7 +25,7 @@ export class AddressInput extends BaseComponent {
   @property({
     type: String
   })
-  network: Network = Network.EVM;
+  networkType: Network = Network.EVM;
 
   @state()
   errorMessage: string | null = null;
@@ -46,15 +47,18 @@ export class AddressInput extends BaseComponent {
       return;
     }
 
-    this.errorMessage = validateAddress(trimedValue, this.network);
+    this.errorMessage = validateAddress(trimedValue, this.networkType);
 
-    if (!this.errorMessage) {
-      void this.onAddressChange(trimedValue);
-    } else {
-      void this.onAddressChange('');
-    }
+    this.onAddressChange(trimedValue);
   };
 
+  protected updated(changedProperties: PropertyValues): void {
+    //revalidating address on network change
+    if (changedProperties.has('networkType')) {
+      this.handleAddressChange(this.address);
+    }
+  }
+
   render(): HTMLTemplateResult {
     return html` <section class="inputAddressSection">
       <div class="inputAddressContainer">
@@ -74,7 +78,7 @@ export class AddressInput extends BaseComponent {
               e.preventDefault();
             }
           }}
-          @change=${(evt: Event) =>
+          @input=${(evt: Event) =>
             this.handleAddressChange((evt.target as HTMLInputElement).value)}
         ></textarea>
       </div>

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

@@ -5,10 +5,10 @@ import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
+import { configContext, walletContext } from '../../../context';
+import type { ConfigContext, WalletContext } from '../../../context';
 import greenCircleIcon from '../../../assets/icons/greenCircleIcon';
 import plusIcon from '../../../assets/icons/plusIcon';
-import type { WalletContext } from '../../../context';
-import { walletContext } from '../../../context';
 import { WalletController } from '../../../controllers';
 import { shortAddress } from '../../../utils';
 import { BaseComponent } from '../base-component/base-component';
@@ -28,15 +28,14 @@ export class ConnectWalletButton extends BaseComponent {
   })
   sourceNetwork?: Domain;
 
-  @property({
-    type: String
-  })
-  dappUrl?: string;
-
   @consume({ context: walletContext, subscribe: true })
   @state()
   private wallets!: WalletContext;
 
+  @consume({ context: configContext, subscribe: true })
+  @state()
+  private configContext!: ConfigContext;
+
   private walletController = new WalletController(this);
 
   updated(changedProperties: PropertyValues): void {
@@ -48,9 +47,10 @@ export class ConnectWalletButton extends BaseComponent {
 
   private onConnectClicked = (): void => {
     if (this.sourceNetwork) {
-      this.walletController.connectWallet(this.sourceNetwork, {
-        dappUrl: this.dappUrl
-      });
+      this.walletController.connectWallet(
+        this.sourceNetwork,
+        this.configContext
+      );
     }
   };