@tonconnect/ui 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tonconnect-ui.min.js +2 -2
- package/dist/tonconnect-ui.min.js.map +1 -1
- package/lib/index.js +13 -18
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +13 -18
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -436,7 +436,7 @@ function isObject(e){return"[object Object]"===Object.prototype.toString.call(e)
|
|
|
436
436
|
height: 160px;
|
|
437
437
|
align-items: center;
|
|
438
438
|
}
|
|
439
|
-
`,[appState,setAppState]=createStore({buttonRootId:null,language:"en",
|
|
439
|
+
`,[appState,setAppState]=createStore({buttonRootId:null,language:"en",walletsList:{}});function uiWalletToWalletInfo(e){return"jsBridgeKey"in e?__spreadProps(__spreadValues({},e),{injected:TonConnect.isWalletInjected(e.jsBridgeKey),embedded:TonConnect.isInsideWalletBrowser(e.jsBridgeKey)}):e}function applyWalletsListConfiguration(e,t){var n;if(!t)return e;if("wallets"in t)return t.wallets.map((t=>{if("string"==typeof t){const n=e.find((e=>e.name===t));return n||(console.error(`Wallet with name === '${t}' wasn't found in the wallets list. Check '${t}' correctness. Available wallets names: ${e.map((e=>"'"+e.name+"'")).join(", ")}`),null)}return uiWalletToWalletInfo(t)})).filter((e=>!!e));const r=(null==(n=t.excludeWallets)?void 0:n.length)?e.filter((e=>{var n;return null==(n=t.excludeWallets)?void 0:n.every((t=>t!==e.name))})):e;return t.includeWallets?"start"===t.includeWalletsOrder?t.includeWallets.map(uiWalletToWalletInfo).concat(e):e.concat(t.includeWallets.map(uiWalletToWalletInfo)):r}const WalletsModal=()=>{const{locale:e}=useI18n()[1];createEffect((()=>e(appState.language)));const t=useContext(ConnectorContext),n=useContext(TonConnectUiContext),[r]=createResource((()=>n.getWallets())),[o,i]=createSignal(null),s=createMemo((()=>"ready"!==r.state?null:applyWalletsListConfiguration(r(),appState.walletsList))),a=()=>{setWalletsModalOpen(!1),i(null)},l=e=>(setLastSelectedWalletInfo(e),isDevice("mobile")&&"universalLink"in e?c(e):isWalletInfoInjected(e)&&e.injected?u(e):void("bridgeUrl"in e?i(e):openLink(e.aboutUrl,"_blank"))),c=e=>{openLink(t.connect({universalLink:e.universalLink,bridgeUrl:e.bridgeUrl}))},u=e=>{t.connect({jsBridgeKey:e.jsBridgeKey})};return onCleanup(t.onStatusChange((e=>{e&&a()}))),createComponent(StyledModal,{get opened(){return walletsModalOpen()},onClose:a,id:"tc-wallets-modal-container",get children(){return[createComponent(Show,{get when(){return!s()},get children(){return[createComponent(H1Styled$1,{translationKey:"walletModal.loading",children:"Wallets list is loading"}),createComponent(LoaderContainerStyled,{get children(){return createComponent(LoaderIconStyled$1,{})}})]}}),createComponent(Show,{get when(){return s()},get children(){return[createComponent(Show,{get when(){return!o()},keyed:!1,get children(){return createComponent(SelectWalletModal,{get walletsList(){return s()},onSelect:l,id:"tc-wallets-modal"})}}),createComponent(Show,{get when(){return o()},keyed:!1,get children(){return createComponent(QrCodeModal,{get wallet(){return o()},onBackClick:()=>i(null),id:"tc-qr-modal"})}})]}})]}})},ActionModalStyled=styled.div`
|
|
440
440
|
display: flex;
|
|
441
441
|
flex-direction: column;
|
|
442
442
|
align-items: center;
|
|
@@ -463,5 +463,5 @@ function isObject(e){return"[object Object]"===Object.prototype.toString.call(e)
|
|
|
463
463
|
`,TransactionCanceledModal=e=>createComponent(ActionModal,{headerTranslationKey:"actionModal.transactionCanceled.header",textTranslationKey:"actionModal.transactionCanceled.text",get icon(){return createComponent(ErrorIconStyled,{})},onClose:()=>e.onClose(),get id(){return e.id}}),SuccessIconStyled=styled(SuccessIcon)`
|
|
464
464
|
height: 66px;
|
|
465
465
|
width: 66px;
|
|
466
|
-
`,TransactionSentModal=e=>createComponent(ActionModal,{headerTranslationKey:"actionModal.transactionSent.header",textTranslationKey:"actionModal.transactionSent.text",get icon(){return createComponent(SuccessIconStyled,{})},onClose:()=>e.onClose(),get id(){return e.id}}),ActionsModal=()=>createComponent(Modal,{get opened(){var e;return createMemo((()=>null!==action()))()&&!0===(null==(e=action())?void 0:e.openModal)},onClose:()=>setAction(null),id:"tc-actions-modal-container",get children(){return createComponent(Switch,{get children(){return[createComponent(Match,{get when(){return"transaction-sent"===action().name},get children(){return createComponent(TransactionSentModal,{onClose:()=>setAction(null),id:"tc-transaction-sent-modal"})}}),createComponent(Match,{get when(){return"transaction-canceled"===action().name},get children(){return createComponent(TransactionCanceledModal,{onClose:()=>setAction(null),id:"tc-transaction-canceled-modal"})}}),createComponent(Match,{get when(){return"confirm-transaction"===action().name},get children(){return createComponent(ConfirmTransactionModal,{onClose:()=>setAction(null),id:"tc-confirm-modal"})}})]}})}}),App=e=>{const t=createI18nContext(i18nDictionary,appState.language);return createComponent(I18nContext.Provider,{value:t,get children(){return createComponent(TonConnectUiContext.Provider,{get value(){return e.tonConnectUI},get children(){return createComponent(ConnectorContext.Provider,{get value(){return appState.connector},get children(){return[createComponent(GlobalStyles,{}),createComponent(ThemeProvider,{theme:themeState,get children(){return[createComponent(Show,{get when(){return appState.buttonRootId},get children(){return createComponent(Portal,{get mount(){return document.getElementById(appState.buttonRootId)},get children(){return createComponent(AccountButton,{})}})}}),createComponent(WalletsModal,{}),createComponent(ActionsModal,{})]}})]}})}})}})},widgetController={openWalletsModal:()=>{setTimeout((()=>setWalletsModalOpen(!0)))},closeWalletsModal:()=>{setTimeout((()=>setWalletsModalOpen(!1)))},setAction:e=>{setTimeout((()=>setAction(e)))},clearAction:()=>{setTimeout((()=>setAction(null)))},getSelectedWalletInfo:()=>lastSelectedWalletInfo(),renderApp:(e,t)=>render((()=>createComponent(App,{tonConnectUI:t})),document.getElementById(e))};class WalletInfoStorage{constructor(){if(__publicField(this,"localStorage"),__publicField(this,"storageKey","ton-connect-ui_wallet-info"),!localStorage)throw new TonConnectUIError("window.localStorage is undefined. localStorage is required for TonConnectUI");this.localStorage=localStorage}setWalletInfo(e){this.localStorage.setItem(this.storageKey,JSON.stringify(e))}getWalletInfo(){const e=this.localStorage.getItem(this.storageKey);return e?JSON.parse(e):null}removeWalletInfo(){this.localStorage.removeItem(this.storageKey)}}class TonConnectUI{constructor(e){if(__publicField(this,"walletInfoStorage",new WalletInfoStorage),__publicField(this,"connector"),__publicField(this,"_walletInfo",null),__publicField(this,"systemThemeChangeUnsubscribe",null),__publicField(this,"actionsConfiguration"),e&&"connector"in e&&e.connector)this.connector=e.connector;else{if(!(e&&"manifestUrl"in e&&e.manifestUrl))throw new TonConnectUIError("You have to specify a `manifestUrl` or a `connector` in the options.");this.connector=new TonConnect({manifestUrl:e.manifestUrl,walletsListSource:e.walletsListSource})}this.getWallets();const t=this.normalizeWidgetRoot(null==e?void 0:e.widgetRootId);this.subscribeToWalletChange(),!1!==(null==e?void 0:e.restoreConnection)&&this.connector.restoreConnection().then((()=>{this.connector.connected||this.walletInfoStorage.removeWalletInfo()})),this.uiOptions=mergeOptions(e,{uiPreferences:{theme:"SYSTEM"}}),setAppState({connector:this.connector}),widgetController.renderApp(t,this)}static getWallets(){return TonConnect.getWallets()}get connected(){return this.connector.connected}get account(){return this.connector.account}get wallet(){return this.connector.wallet}get walletInfo(){return this._walletInfo}set uiOptions(e){var t,n,r,o,i;this.checkButtonRootExist(e.buttonRootId),this.actionsConfiguration=e.actionsConfiguration,(null==(t=e.uiPreferences)?void 0:t.theme)?"SYSTEM"!==(null==(n=e.uiPreferences)?void 0:n.theme)?(null==(r=this.systemThemeChangeUnsubscribe)||r.call(this),setTheme(e.uiPreferences.theme,e.uiPreferences.colorsSet)):(setTheme(getSystemTheme(),e.uiPreferences.colorsSet),this.systemThemeChangeUnsubscribe||(this.systemThemeChangeUnsubscribe=subscribeToThemeChange(setTheme))):(null==(o=e.uiPreferences)?void 0:o.colorsSet)&&setColors(e.uiPreferences.colorsSet),(null==(i=e.uiPreferences)?void 0:i.borderRadius)&&setBorderRadius(e.uiPreferences.borderRadius),setAppState((t=>{const n=mergeOptions(__spreadValues(__spreadValues({},e.language&&{language:e.language})
|
|
466
|
+
`,TransactionSentModal=e=>createComponent(ActionModal,{headerTranslationKey:"actionModal.transactionSent.header",textTranslationKey:"actionModal.transactionSent.text",get icon(){return createComponent(SuccessIconStyled,{})},onClose:()=>e.onClose(),get id(){return e.id}}),ActionsModal=()=>createComponent(Modal,{get opened(){var e;return createMemo((()=>null!==action()))()&&!0===(null==(e=action())?void 0:e.openModal)},onClose:()=>setAction(null),id:"tc-actions-modal-container",get children(){return createComponent(Switch,{get children(){return[createComponent(Match,{get when(){return"transaction-sent"===action().name},get children(){return createComponent(TransactionSentModal,{onClose:()=>setAction(null),id:"tc-transaction-sent-modal"})}}),createComponent(Match,{get when(){return"transaction-canceled"===action().name},get children(){return createComponent(TransactionCanceledModal,{onClose:()=>setAction(null),id:"tc-transaction-canceled-modal"})}}),createComponent(Match,{get when(){return"confirm-transaction"===action().name},get children(){return createComponent(ConfirmTransactionModal,{onClose:()=>setAction(null),id:"tc-confirm-modal"})}})]}})}}),App=e=>{const t=createI18nContext(i18nDictionary,appState.language);return createComponent(I18nContext.Provider,{value:t,get children(){return createComponent(TonConnectUiContext.Provider,{get value(){return e.tonConnectUI},get children(){return createComponent(ConnectorContext.Provider,{get value(){return appState.connector},get children(){return[createComponent(GlobalStyles,{}),createComponent(ThemeProvider,{theme:themeState,get children(){return[createComponent(Show,{get when(){return appState.buttonRootId},get children(){return createComponent(Portal,{get mount(){return document.getElementById(appState.buttonRootId)},get children(){return createComponent(AccountButton,{})}})}}),createComponent(WalletsModal,{}),createComponent(ActionsModal,{})]}})]}})}})}})},widgetController={openWalletsModal:()=>{setTimeout((()=>setWalletsModalOpen(!0)))},closeWalletsModal:()=>{setTimeout((()=>setWalletsModalOpen(!1)))},setAction:e=>{setTimeout((()=>setAction(e)))},clearAction:()=>{setTimeout((()=>setAction(null)))},getSelectedWalletInfo:()=>lastSelectedWalletInfo(),renderApp:(e,t)=>render((()=>createComponent(App,{tonConnectUI:t})),document.getElementById(e))};class TonConnectUIError extends TonConnectError{constructor(...e){super(...e),Object.setPrototypeOf(this,TonConnectUIError.prototype)}}class WalletInfoStorage{constructor(){if(__publicField(this,"localStorage"),__publicField(this,"storageKey","ton-connect-ui_wallet-info"),!localStorage)throw new TonConnectUIError("window.localStorage is undefined. localStorage is required for TonConnectUI");this.localStorage=localStorage}setWalletInfo(e){this.localStorage.setItem(this.storageKey,JSON.stringify(e))}getWalletInfo(){const e=this.localStorage.getItem(this.storageKey);return e?JSON.parse(e):null}removeWalletInfo(){this.localStorage.removeItem(this.storageKey)}}class TonConnectUI{constructor(e){if(__publicField(this,"walletInfoStorage",new WalletInfoStorage),__publicField(this,"connector"),__publicField(this,"_walletInfo",null),__publicField(this,"systemThemeChangeUnsubscribe",null),__publicField(this,"actionsConfiguration"),e&&"connector"in e&&e.connector)this.connector=e.connector;else{if(!(e&&"manifestUrl"in e&&e.manifestUrl))throw new TonConnectUIError("You have to specify a `manifestUrl` or a `connector` in the options.");this.connector=new TonConnect({manifestUrl:e.manifestUrl,walletsListSource:e.walletsListSource})}this.getWallets();const t=this.normalizeWidgetRoot(null==e?void 0:e.widgetRootId);this.subscribeToWalletChange(),!1!==(null==e?void 0:e.restoreConnection)&&this.connector.restoreConnection().then((()=>{this.connector.connected||this.walletInfoStorage.removeWalletInfo()})),this.uiOptions=mergeOptions(e,{uiPreferences:{theme:"SYSTEM"}}),setAppState({connector:this.connector}),widgetController.renderApp(t,this)}static getWallets(){return TonConnect.getWallets()}get connected(){return this.connector.connected}get account(){return this.connector.account}get wallet(){return this.connector.wallet}get walletInfo(){return this._walletInfo}set uiOptions(e){var t,n,r,o,i;this.checkButtonRootExist(e.buttonRootId),this.actionsConfiguration=e.actionsConfiguration,(null==(t=e.uiPreferences)?void 0:t.theme)?"SYSTEM"!==(null==(n=e.uiPreferences)?void 0:n.theme)?(null==(r=this.systemThemeChangeUnsubscribe)||r.call(this),setTheme(e.uiPreferences.theme,e.uiPreferences.colorsSet)):(setTheme(getSystemTheme(),e.uiPreferences.colorsSet),this.systemThemeChangeUnsubscribe||(this.systemThemeChangeUnsubscribe=subscribeToThemeChange(setTheme))):(null==(o=e.uiPreferences)?void 0:o.colorsSet)&&setColors(e.uiPreferences.colorsSet),(null==(i=e.uiPreferences)?void 0:i.borderRadius)&&setBorderRadius(e.uiPreferences.borderRadius),setAppState((t=>{const n=mergeOptions(__spreadValues(__spreadValues({},e.language&&{language:e.language}),!!e.walletsList&&{walletsList:e.walletsList}),unwrap(t));return void 0!==e.buttonRootId&&(n.buttonRootId=e.buttonRootId),n}))}getWallets(){return __async(this,null,(function*(){return this.connector.getWallets()}))}onStatusChange(e,t){return this.connector.onStatusChange((t=>{if(t){const n=widgetController.getSelectedWalletInfo()||this.walletInfoStorage.getWalletInfo();e(__spreadValues(__spreadValues({},t),n))}else e(t)}),t)}connectWallet(){return __async(this,null,(function*(){const e=(yield this.getWallets()).find((e=>"embedded"in e&&e.embedded));return e?(setLastSelectedWalletInfo(e),this.connector.connect({jsBridgeKey:e.jsBridgeKey})):widgetController.openWalletsModal(),new Promise(((e,t)=>{const n=this.connector.onStatusChange((r=>{if(n(),r){const t=widgetController.getSelectedWalletInfo()||this.walletInfoStorage.getWalletInfo();e(__spreadValues(__spreadValues({},r),t))}else t(new TonConnectUIError("Wallet was not connected"))}),t)}))}))}disconnect(){return this.walletInfoStorage.removeWalletInfo(),this.connector.disconnect()}sendTransaction(e,t){return __async(this,null,(function*(){if(!this.connected||!this.walletInfo)throw new TonConnectUIError("Connect wallet to send a transaction.");!isDevice("desktop")&&"universalLink"in this.walletInfo&&openLink(this.walletInfo.universalLink);const{notifications:n,modals:r}=this.getModalsAndNotificationsConfiguration(t);widgetController.setAction({name:"confirm-transaction",showNotification:n.includes("before"),openModal:r.includes("before")});try{const t=yield this.connector.sendTransaction(e);return widgetController.setAction({name:"transaction-sent",showNotification:n.includes("success"),openModal:r.includes("success")}),t}catch(o){throw widgetController.setAction({name:"transaction-canceled",showNotification:n.includes("error"),openModal:r.includes("error")}),o instanceof TonConnectError?o:(console.error(o),new TonConnectUIError("Unhandled error:"+o))}}))}subscribeToWalletChange(){this.connector.onStatusChange((e=>{e?this.updateWalletInfo():this.walletInfoStorage.removeWalletInfo()}))}updateWalletInfo(){const e=widgetController.getSelectedWalletInfo();e?(this._walletInfo=e,this.walletInfoStorage.setWalletInfo(e)):this._walletInfo=this.walletInfoStorage.getWalletInfo()}normalizeWidgetRoot(e){if(!e||!document.getElementById(e)){e="tc-widget-root";const t=document.createElement("div");t.id=e,document.body.appendChild(t)}return e}checkButtonRootExist(e){if(null!=e&&!document.getElementById(e))throw new TonConnectUIError(`${e} element not found in the document.`)}getModalsAndNotificationsConfiguration(e){var t,n,r;const o=["before","success","error"];let i=o;(null==(t=this.actionsConfiguration)?void 0:t.notifications)&&"all"!==(null==(n=this.actionsConfiguration)?void 0:n.notifications)&&(i=this.actionsConfiguration.notifications),(null==e?void 0:e.notifications)&&(i="all"===e.notifications?o:e.notifications);let s=["before"];return(null==(r=this.actionsConfiguration)?void 0:r.modals)&&(s="all"===this.actionsConfiguration.modals?o:this.actionsConfiguration.modals),(null==e?void 0:e.modals)&&(s="all"===e.modals?o:e.modals),{notifications:i,modals:s}}}exports.THEME=THEME,exports.TonConnectUI=TonConnectUI,exports.TonConnectUIError=TonConnectUIError,exports.default=TonConnectUI,Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
467
467
|
//# sourceMappingURL=tonconnect-ui.min.js.map
|