herald-exchange-glide-widget 1.0.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
+}

package/Readme.md

@@ -0,0 +1,116 @@
+# Herald Exchange Glide SDK Widget
+
+Herald Exchange Glide SDK Widget is a simple component for React applications.
+
+## Installation
+
+You can install Herald Exchange Glide SDK Widget via npm:
+
+```bash
+npm install herald-exchange-glide-widget
+# or
+yarn add herald-exchange-glide-widget
+```
+
+## Usage
+
+To use widget in your React application, follow these steps:
+
+```tsx
+import { GlideWidget } from "herald-exchange-glide-widget";
+```
+
+Initialize the widget:
+
+> To Generate API Key Please Visit : [Herald Exchange](https://app.herald.exchange/login).  
+> Supported Token Types : ["USDT", "USDC", "ETH", "BNB", "MATIC", "SOL", "TRX"]
+
+```tsx
+<GlideWidget
+  clientReferenceID={YOUR_CLIENT_REFERENCE_ID}
+  apiKey={YOUR_API_KEY}
+  sellParameters={{
+    from_amount: "25",
+    from_currency: "TRX",
+    to_currency: "INR",
+  }}
+  mode="development"
+/>
+```
+
+---
+
+> **Note:**  
+> In development mode, the widget uses **testnet** to detect and simulate transactions.  
+> In production mode, it switches to **mainnet** for real transaction processing.  
+> ⚠️ Make sure to deploy your application in a **production environment** when going live to ensure accurate transaction tracking and wallet interactions.
+
+## 🔧 Props
+
+### `apiKey` (required)
+
+- **Type**: `string`
+
+- **Description**: A unique API key generated via the [Herald Exchange App](https://app.herald.exchange/login).
+
+- This key is used to authenticate and authorize the widget.
+
+- Example: `4bb06e2fdbfb8e392a0ab49e4d9819ae072dcef82d79af7893625a5ff1416f`
+
+---
+
+### `mode` (optional)
+
+- Type: string
+
+- Allowed Values: "development" | "production"
+
+- Default: "development"
+
+- Description: Specifies the environment in which the widget runs.
+
+  - "development" is used for testing and debugging purposes.
+
+  - "production" should be used in live environments for optimized performance.
+
+---
+
+### `clientReferenceID` (required)
+
+- **Type**: `string`
+
+- **Description**: A unique identifier (UUID) generated via the [Herald Exchange App](https://app.herald.exchange/login), used to associate a transaction with a specific user or session.
+
+- Helps track user activity and transaction flow.
+
+- Example: `34edd6d6-eb12-422f-bd0e-63c5733527`
+
+---
+
+### `sellParameters` (required)
+
+- **Type**:
+
+```ts
+{
+  from_amount: string;
+  from_currency: string;
+  to_currency: string;
+}
+```
+
+- **Description**: Defines the default configuration for the sell flow.
+
+  - from_amount: A string representing the default amount to sell (e.g., "25").
+
+  - from_currency: The token the user wants to sell (e.g., "USDT").
+
+  - to_currency: The currency the user wants to receive (e.g., "USD").
+
+⚠️ If the selected currencies are not available or not active, the widget will default to the first available currency pair.
+
+---
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

package/dist/index.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500;600;700&display=swap");@-webkit-viewport{width:device-width}@-moz-viewport{width:device-width}@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}:root{--primary-color:#8b5cf6;--secondary-color:#fff;--tertiary-color:#000;--quaternary-color:#6b7178;--bg-hover:#fffbf3;--senary-color:#298bff;--overlay-bg:#f5f5f5;--new-action-gradient:linear-gradient(180deg,#fff 39.57%,#f9f6f6);--badges-success-bg:#f9fcf0;--badges-success-color:#7ab200;--badges-faile-color:#f22;--badges-pending-bg:#e89a3c21;--badges-faile-bg:rgb(237 56 51/5%);--new-placeholder:#d2d2d2;--light-color:#fff;--no-color:transparent;--border-color:#e5eaf4}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;background-color:var(--secondary-color);background-size:cover;color:var(--tertiary-color);font-family:Red Hat Text,sans-serif;font-size:12px;letter-spacing:.8px;overflow-x:hidden;position:relative}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}a,button{cursor:pointer}a,button,div,h1,h2,h3,h4,h5,h6,input,p,span{font-family:Red Hat Text,sans-serif}button:disabled{cursor:not-allowed;opacity:.7}.action-btn{--_background:var(--background,var(--primary-color));--_color:var(--color,var(--tertiary-color));--_border:var(--border,transparent);--_btn-width:var(--btn-width,auto);align-items:center;background-color:var(--_background);border:1px solid var(--_border);-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;border-radius:10px;color:var(--_color);display:flex;font-family:Red Hat Text,sans-serif;font-size:.95em;font-weight:600;gap:.5em;justify-content:center;overflow:hidden;padding:.8em 2em;position:relative;text-align:center;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:var(--_btn-width);z-index:0}.primary{--background:var(--primary-color);--color:var(--secondary-color);--btn-width:100%;--border:transparent}.secondary{--background:#f9f9f9;--color:var(--tertiary-color);--btn-width:auto;--border:transparent}.overlay{--background:transparent;--color:var(--tertiary-color);--btn-width:auto;--border:#e5eaf4;padding:.5em}.widegt-tabs-link{align-items:flex-start;display:flex;justify-content:space-between}.widegt-tabs-box{align-items:center;background:#efe7ff;border-radius:10px;display:flex;gap:1em;margin-bottom:1.5em;padding:.7em}.widegt-tabs-box button{background-color:initial;border:0;border-radius:0;color:#666;font-family:Red Hat Text,sans-serif;font-size:.85em;font-weight:600;padding:.8em 1em}.widegt-tabs-box button.active{background:var(--secondary-color);border-radius:10px}.widegt-tabs-box button:first-child.active{color:#008826!important}.widegt-tabs-box button:last-child.active{color:red!important}.widegt-tabs-close button{background-color:transparent;border:0}.widegt-tabs-content{background:#efe7ff;border-radius:10px;padding:2em}.exchange-widget-wrapped{--spacing-modal:1.75rem;height:auto;left:50%;overflow-x:hidden;overflow-y:auto;position:fixed;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}@media (max-width:991.98px){.exchange-widget-wrapped{height:100%}}.exchange-widget-modal{align-items:center;display:flex;margin:var(--spacing-modal) auto;min-height:calc(100% - var(--spacing-modal)*0);overflow:auto;width:calc(33.33333% + .66667rem)}@media (min-width:991.98px) and (max-width:1199px){.exchange-widget-modal{width:calc(62.5% + 1.25rem)}}@media (max-width:991.98px){.exchange-widget-modal{border-radius:0;left:unset;padding:1em;position:relative;top:unset;transform:unset;width:100%}}.exchange-widget-content{background:#decfff;border-radius:12px;padding:2em;position:relative;width:100%}.hide{display:none}.show{display:block}.off-ramp-field-card{border-radius:10px}.off-ramp-field-label{color:#010101;font-size:1em;font-weight:600;margin-bottom:.5em}.off-ramp-field-form .input-control{background:var(--no-color);border:0;border-radius:0;color:#7d7d7d;font-size:1.8em;font-weight:600;height:45px;padding:12px 12px 12px 0;width:100%}.off-ramp-field-form .input-control:active,.off-ramp-field-form .input-control:focus,.off-ramp-field-form .input-control:focus-visible,.off-ramp-field-form .input-control:focus-within{background:var(--no-color);border:0;border-radius:0;outline:0}.ramp-modal-img{height:1.5em;object-fit:contain;width:1.5em}.off-ramp-selected-badges{padding:.5em;text-align:center}.off-ramp-selected--two,.off-ramp-selected-badges{background:#0000000a;border:1px dashed #0000003b;border-radius:10px;color:#010101;font-size:.85em;font-weight:600;line-height:1.8;margin-bottom:0}.off-ramp-selected--two{margin-top:1em}.off-ramp-field-card{display:flex}@media (max-width:576px){.off-ramp-field-card{flex-direction:column}.off-ramp-field-box{border-bottom-left-radius:0!important;border-top-left-radius:10px!important;border-top-right-radius:10px!important;width:100%!important}.off-ramp-field-select-card{border-bottom-left-radius:10px!important;border-bottom-right-radius:10px!important;border-top-right-radius:0!important;width:100%!important}.off-ramp-details-card{grid-template-columns:repeat(1,1fr)!important}.off-ramp-details-card span:last-child{text-align:start!important}.span-d-align{justify-content:start!important}}.off-ramp-field-box{background:#fcfaff;border-bottom-left-radius:10px;border-top-left-radius:10px;width:75%}.off-ramp-field-box,.off-ramp-field-select-card{display:flex;flex-direction:column;justify-content:center;padding:1em}.off-ramp-field-select-card{background-color:#e6dcff;border-bottom-right-radius:10px;border-top-right-radius:10px;width:50%}.off-ramp-label-icons{background-color:#f8f9fa;border-radius:50%;display:grid;font-size:1.2em;font-weight:700;height:2em;place-items:center;width:2em}.off-ramp-label-value{color:#010101;font-size:1.1em;font-weight:600}.off-ramp-label-value span{color:#7d7d7d;font-weight:500}.off-ramp-space{align-items:center}.off-ramp-space,.off-ramp-space-top{display:grid;grid-template-columns:70px auto}.off-ramp-space-top{align-items:start}.off-ramp-label-dots{background-color:#f8f9fa;border-radius:50%;height:1em;margin-left:10px;width:1em}.off-ramp-details .off-ramp-head{color:#7d7d7d;font-size:1.2em;font-weight:500;line-height:.9}.off-payment-check-card{align-items:center;background-color:var(--secondary-color);border:1px solid #fff;border-radius:8px;cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:10px 15px;position:relative;transition:all .3s ease}.off-payment-box{align-items:center;display:flex;gap:1em;margin-top:1em}.off-payment-check-card input[type=radio]{height:0;opacity:0;position:absolute;width:0}.off-payment-check-card.selected{background-color:#fcfaff;border-color:var(--primary-color);color:var(--primary-color)}.off-ramp-info-box{display:flex;flex-direction:column;gap:2em;padding:2em 0;position:relative;z-index:999}.off-ramp-info-box:after{background:#ffffff73;content:"";height:100%;left:16px;position:absolute;top:0;width:2px;z-index:-1}.off-ramp-action{margin-top:2em}.off-ramp-bank-head{align-items:center;display:grid;gap:1em;grid-template-columns:24px auto;margin-bottom:1em}.bank-titles{color:#000;font-size:1.2em;font-weight:600}.off-ramp-bank-head a{height:18px;width:18px}.off-ramp-bank-tabs-link{display:grid;grid-template-columns:repeat(2,1fr)}.off-ramp-bank-tabs-link button{background-color:var(--no-color);border:0;border-bottom:1px solid #fff;border-radius:0;color:#000;font-size:1.1em;font-weight:600;padding:1em 2em;width:100%}.off-ramp-bank-tabs-link button.active{border-bottom:1px solid var(--primary-color)}.off-ramp-bank-tabs-content{padding:2em}.off-ramp-bank-exist-feilds-frame{margin-bottom:2em}.off-ramp-bank-exist-label{color:#010101;font-size:1em;font-weight:600;margin-bottom:.5em}.off-ramp-info-card{align-items:center;background:#ffffff47;border-radius:10px;display:grid;grid-template-columns:40px auto;padding:.5em}.caution-info{color:var(--tertiary-color);font-size:.8em;font-weight:400;line-height:1.8}.off-ramp-new-bank-label{color:#010101;font-size:1em;font-weight:600;margin-bottom:.5em}.off-ramp-new-bank-fields .input-control{background-color:var(--secondary-color);border:1px soild var(--secondary-color);border-radius:10px;color:var(--tertiary-color);font-size:.9em!important;font-weight:400!important;height:45px;padding:10px;width:100%}.off-ramp-new-bank-fields .input-control:active,.off-ramp-new-bank-fields .input-control:focus,.off-ramp-new-bank-fields .input-control:focus-visible,.off-ramp-new-bank-fields .input-control:focus-within{border:1px soild var(--secondary-color);outline:0}.off-ramp-new-bank-box{margin-bottom:2em}.off-ramp-details-head{align-items:center;display:grid;gap:1em;grid-template-columns:24px auto;margin-bottom:2em}.details-titles{color:#000;font-size:1.2em;font-weight:600}.off-ramp-details-head a{height:18px;width:18px}.off-ramp-details-info-box{background-color:var(--secondary-color);border-radius:10px;padding:2em}.off-ramp-details-card{align-items:center;border-bottom:1px dashed #ededed;display:grid;gap:2em;grid-template-columns:repeat(2,1fr);margin-bottom:1.5em;padding-bottom:1.5em}.off-ramp-details-card:last-child{border-bottom:0 dashed #fff;margin-bottom:0;padding:0}.off-ramp-details-card span:first-child{color:#7d7d7d;font-size:1em;font-weight:600;text-align:start}.off-ramp-details-card span:last-child{color:#010101;font-size:1em;font-weight:500;text-align:end}.span-d-align{grid-template-columns:24px auto}.span-d-align,.span-d-copy{align-items:center;display:grid;gap:1em;justify-content:end}.span-d-copy{grid-template-columns:auto 24px}.ramp-option{align-items:center;display:flex;gap:2em}.off-ramp-check-wrap{align-items:center;display:grid;gap:1em;grid-template-columns:repeat(3,1fr);margin-bottom:1.5em}.off-form-check .off-form-check-input:checked~.off-currency-option{background-color:#fff7d1;border-color:var(--primary-color)}.off-form-check-input{display:none}.off-currency-option h3{color:var(--tertiary-color);font-size:.95em;font-weight:500}.off-currency-option{align-items:center;background-color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:8px;cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:10px 15px;position:relative;transition:all .3s ease;width:100%}.sell-qr-payemnt-wrap{grid-gap:2em;background-color:var(--light-color);border-radius:10px;display:grid;gap:2em;grid-template-columns:repeat(2,1fr);margin-bottom:1em!important;padding:1.5em;position:relative}@media (max-width:991.98px){.sell-qr-payemnt-wrap{gap:1em;grid-template-columns:repeat(1,1fr)}}.sell-amt-details{background-color:var(--light-color);border-radius:10px;display:flex;flex-direction:column;grid-area:1/1/2/3;justify-content:space-between;margin-bottom:1em!important}@media (max-width:991.98px){.sell-amt-details{gap:1em;grid-area:unset}.sell-payment-qr-frame{display:grid;place-items:center}}.sell-amt-details-wrap{align-items:center;display:flex;justify-content:space-between;margin-bottom:1em}.sell-amt-pay{display:flex;flex-direction:column}.sell-pay-label{color:var(--quaternary-color);font-size:.8em;font-weight:300;margin-bottom:.5em}.sell-pay-amt{color:var(--tertiary-color);font-size:.85em;font-weight:500;margin-bottom:0}.sell-amt-get{align-items:flex-end;display:flex;flex-direction:column}.sell-estimated-info{background:#0000000a;border:1px dashed #0000003b;border-radius:10px;padding:.7em}.sell-estimated-info p{align-items:center;color:var(--tertiary-color);display:flex;font-size:.85em;font-weight:600;justify-content:space-between;margin-bottom:0}.sell-payment-qr-box{grid-area:1/3/2/4}@media (max-width:991.98px){.sell-payment-qr-box{grid-area:unset}}.sell-wallet-address-card{background:var(--overlay-bg);border-radius:10px;margin-bottom:1.5em;padding:1.5em}.sell-wallet-data-card{margin-bottom:1em}.sell-hash-label,.sell-wallet-data-card h6{color:var(--tertiary-color);font-size:.8em;font-weight:500;margin-bottom:.5em}.sell-hash-label span{color:red}.sell-wallet-code-card{grid-gap:.5em;display:grid;gap:.5em;grid-template-columns:auto 65px}.sell-wallet-code{border:1px solid var(--border-color);border-radius:10px;padding:.8em 1em}.sell-wallet-code span{-webkit-line-clamp:1;-webkit-box-orient:vertical;color:var(--tertiary-color);display:-webkit-box;font-size:.85em;font-weight:500;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.sell-hash-fields,.sell-hash-fields:focus{background:transparent;border:1px solid var(--border-color);border-radius:10px;color:var(--tertiary-color);font-size:.9em;font-weight:400;padding:.8em 1em;width:100%}.sell-hash-fields:focus{outline:1px solid var(--border-color)}.sell-hash-fields::placeholder{font-family:Red Hat Text,sans-serif;font-size:.9em;font-weight:400}.no-wallet-details{gap:1em}.no-wallet-details,.sell-final-box{align-items:center;display:flex;justify-content:center}.sell-final-box{background-color:#fff;border-radius:12px;flex-direction:column;gap:.2em;padding:2em}.sell-final-info p{font-size:.95em;font-weight:500;line-height:2;margin-bottom:.5em}@media (max-width:767.98px){body{font-size:14px!important}}.manual-hash-btn{background:none;border:none;color:var(--senary-color);font-size:.8em;outline:none;padding:.2em}.flow-stepper-frame ul li{list-style:none!important}.flow-stepper-frame ul{align-items:self-start;display:flex;justify-content:space-between;margin:auto;min-height:70px;overflow:hidden;position:relative;width:75%}.withdraw-stepper .flow-stepper-frame ul{width:100%}.withdraw-stepper .flow-stepper-frame ul:after{transform:scale(.68)}.flow-stepper-card span{position:absolute;text-align:center;top:40px;white-space:nowrap}.flow-stepper-frame ul li{position:relative;z-index:1050}.flow-stepper-frame ul li:after{background-color:#fff;content:" ";height:2px;left:18px;position:absolute;top:10px;transform-origin:center;width:90vw;z-index:-1}.dark-stepper .flow-stepper-frame ul li:after{background-color:#efefef}.flow-stepper-frame ul li:last-child:after{display:none}.flow-stepper-frame ul li.failed:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:#e70f0f}.flow-stepper-frame ul li.completed:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:#32cd32}.flow-stepper-frame ul li.hash-completed:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:none}.flow-stepper-frame ul li.hash-completed .flow-stepper-process{background-color:#32cd32}.flow-stepper-frame ul li.hash-failed:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:none}.flow-stepper-frame ul li.hash-failed .flow-stepper-process{background-color:#e70f0f}.flow-stepper-frame ul li.hash-failed-1:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:#e70f0f}.flow-stepper-frame ul li.completed .flow-stepper-process,.flow-stepper-frame ul li.hash-failed-1 .flow-stepper-process{background-color:#32cd32}.flow-stepper-frame ul li.failed .flow-stepper-process{background-color:#e70f0f}.flow-stepper-frame ul li:last-child .flow-stepper-card{align-items:flex-end}.flow-stepper-frame ul li:first-child .flow-stepper-card{align-items:flex-start}.flow-stepper-frame ul li:last-child .flow-stepper-card span{text-align:end}.flow-stepper-frame ul.completed:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:#32cd32}.flow-stepper-frame ul.failed:after{animation:wipe-in-right 2.5s cubic-bezier(.25,1,.3,1) both;background-color:#e70f0f}.flow-stepper-card{align-items:center;border-radius:10px;color:var(--quaternary-color);display:flex;flex-direction:column;font-size:.65em;font-weight:600;gap:1em;justify-content:center}.flow-stepper-card.completed{color:var(--tertiary-color)}.flow-stepper-card .spinner-loader{border:4px solid #6e6a6a29!important;margin:0!important}.flow-stepper-process{align-items:center;background-color:#fff;border-radius:50%;display:flex;height:2.5em;justify-content:center;padding:3px;width:2.5em}.dark-stepper .flow-stepper-process{background-color:#efefef}.flow-stepper-card.completed .flow-stepper-process{background-color:#32cd32}.flow-stepper-card.failed .flow-stepper-process{background-color:#ea0909}.flow-stepper-success.completed .flow-stepper-process{background-color:#32cd32}.flow-stepper-success{align-items:center;border-radius:10px;color:var(--quaternary-color);display:flex;flex-direction:column;font-size:.75em;font-weight:600;gap:1em;justify-content:center;padding:1em}.flow-stepper-success.completed{color:var(--tertiary-color)}.flow-stepper-bar{background-color:#efefef;border-radius:50%;height:1.4em;width:1.4em}.flow-loader{animation:l13 1s linear infinite;aspect-ratio:1;background:radial-gradient(farthest-side,#ffa516 94%,#0000) top/4.5px 4.5px no-repeat,conic-gradient(#0000 30%,#ffa516);border-radius:50%;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4.5px),#000 0);width:100%}@keyframes l13{to{transform:rotate(1turn)}}@keyframes wipe-in-right{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.toast-container{display:flex;flex-direction:column;gap:10px;position:absolute;right:20px;top:20px;z-index:9999}.toast{align-items:center;animation:slideIn .3s ease,fadeOut .5s ease 2.5s;background-color:#333;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.3);color:#fff;display:flex;justify-content:space-between;min-width:250px;padding:12px 16px;transition:opacity .3s}.toast.success{background-color:#4caf50}.toast.error{background-color:#f44336}.toast.info{background-color:#2196f3}.toast button{background:none;border:none;color:#fff;cursor:pointer;font-size:18px}@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOut{to{opacity:0}}.input-error,.required{color:var(--badges-faile-color)}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type SellParamsType = {
+    from_amount: string;
+    from_currency: string;
+    to_currency: string;
+};
+
+type WidgetComponentProps = {
+    apiKey: string;
+    sellParameters: SellParamsType;
+    clientReferenceID: string;
+    mode?: "development" | "production";
+};
+declare const WidgetComponent: ({ apiKey, sellParameters, clientReferenceID, mode, }: WidgetComponentProps) => react_jsx_runtime.JSX.Element;
+
+export { WidgetComponent as GlideWidget };