diff --git a/ui/package.json b/ui/package.json index 32152eb..7af01c9 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,7 +1,7 @@ { "name": "@stellar-expert/refractor-ui", "private": true, - "version": "0.6.4", + "version": "0.7.0", "author": "team@stellar.expert", "description": "Refractor - pending transactions storage and multisig aggregator for Stellar Network", "scripts": { @@ -15,18 +15,16 @@ "url": "https://github.com/stellar-expert/refractor.git" }, "dependencies": { - "@albedo-link/intent": "^0.12.0", - "@creit.tech/xbull-wallet-connect": "0.3.0", - "@lobstrco/signer-extension-api": "1.0.0-beta.0", - "@stellar-expert/asset-descriptor": "^1.4.0", + "@creit-tech/stellar-wallets-kit": "npm:@jsr/creit-tech__stellar-wallets-kit@2.0.0-beta.9", + "@stellar-expert/asset-descriptor": "^1.5.0", "@stellar-expert/client-cache": "github:stellar-expert/client-cache", "@stellar-expert/formatter": "^2.5.0", "@stellar-expert/navigation": "github:stellar-expert/navigation#v1.0.2", "@stellar-expert/tx-signers-inspector": "^1.8.2", - "@stellar-expert/ui-framework": "^1.14.14", - "@stellar/freighter-api": "^4.1.0", - "@stellar/stellar-sdk": "13.1.0", + "@stellar-expert/ui-framework": "^1.16.5", + "@stellar/stellar-sdk": "14.4.3", "classnames": "^2.3.2", + "viem": "2.21.0", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -44,4 +42,4 @@ "node-sass" ] } -} +} \ No newline at end of file diff --git a/ui/signer/albedo-provider.js b/ui/signer/albedo-provider.js deleted file mode 100644 index 4716743..0000000 --- a/ui/signer/albedo-provider.js +++ /dev/null @@ -1,18 +0,0 @@ -export default class AlbedoProvider { - title = 'Albedo' - - mobileSupported = true - - init() { - return import(/* webpackChunkName: "albedo-provider" */'@albedo-link/intent') - .then(module => { - this.provider = module.default - }) - } - - async signTx({xdr, network}) { - await this.init() - const res = await this.provider.tx({xdr, network}) - return res.signed_envelope_xdr - } -} \ No newline at end of file diff --git a/ui/signer/freighter-provider.js b/ui/signer/freighter-provider.js deleted file mode 100644 index fa2c9e3..0000000 --- a/ui/signer/freighter-provider.js +++ /dev/null @@ -1,23 +0,0 @@ -export default class FreighterProvider { - title = 'Freighter' - - init() { - return import(/* webpackChunkName: "freighter-provider" */'@stellar/freighter-api') - .then(module => { - this.provider = module - }) - } - - async signTx({xdr, network}) { - await this.init() - const connected = await this.provider.isConnected() - if (connected.error) { - console.error(connected.error) - } - if (!connected.isConnected) - throw new Error({msg: `Freighter wallet not connected`}) - await this.provider.requestAccess() - await this.provider.getAddress() - return await this.provider.signTransaction(xdr, {networkPassphrase: network}) - } -} \ No newline at end of file diff --git a/ui/signer/lobstr-provider.js b/ui/signer/lobstr-provider.js deleted file mode 100644 index d540415..0000000 --- a/ui/signer/lobstr-provider.js +++ /dev/null @@ -1,18 +0,0 @@ -export default class LobstrProvider { - title = 'Lobstr' - - init() { - return import(/* webpackChunkName: "lobstr-provider" */'@lobstrco/signer-extension-api') - .then(module => { - this.provider = module - }) - } - - async signTx({xdr, network}) { - await this.init() - if (!(await this.provider.isConnected())) - throw new Error({msg: `Lobstr wallet not connected`}) - await this.provider.getPublicKey() - return await this.provider.signTransaction(xdr) - } -} \ No newline at end of file diff --git a/ui/signer/tx-signer.js b/ui/signer/tx-signer.js index 7d9d2e0..4ddf7f6 100644 --- a/ui/signer/tx-signer.js +++ b/ui/signer/tx-signer.js @@ -1,26 +1,47 @@ +import {StellarWalletsKit} from "@creit-tech/stellar-wallets-kit" +import {defaultModules} from '@creit-tech/stellar-wallets-kit/modules/utils' +import {WalletConnectModule} from '@creit-tech/stellar-wallets-kit/modules/wallet-connect' +import {SwkAppDarkTheme, SwkAppLightTheme} from "@creit-tech/stellar-wallets-kit/types" import config from '../app.config.json' -import AlbedoProvider from './albedo-provider' -import FreighterProvider from './freighter-provider' -import LobstrProvider from './lobstr-provider' -import XBullProvider from './xbull-provider' -const signerProviders = {} -//create instances for all available providers -for (let providerClass of [AlbedoProvider, FreighterProvider, LobstrProvider, XBullProvider]) { - const provider = new providerClass() - signerProviders[provider.title] = provider -} +const theme = document.documentElement.attributes['data-theme'].value + +StellarWalletsKit.init({ + theme: (theme === 'night') ? SwkAppDarkTheme : SwkAppLightTheme, + modules: [ + ...defaultModules(), + new WalletConnectModule({ + projectId: "f7e12b9f871e5da52e5faa88ff7b5d30", + metadata: { + name: "StellarBroker", + description: "StellarBroker - Multi-source liquidity swap router for Stellar, providing access to AMMs and Stellar DEX", + icons: ["/img/stellar-broker-logo+text-v1.png"], + url: location.href + } + }) + ] +}) -export function getAllProviders() { - return Object.values(signerProviders) +async function connectWallet() { + return StellarWalletsKit.authModal() + .then(connect => { + if (!connect) + throw Error('Failed to connect wallet') + }) + .catch(err => { + notify({type: 'warning', message: err?.message || 'Failed to obtain a transaction signature'}) + throw err + }) } -export async function delegateTxSigning(providerName, xdr, network) { - const provider = signerProviders[providerName] +export async function delegateTxSigning(xdr, network) { + await connectWallet() //resolve network if (config.networks[network]) { network = config.networks[network].passphrase } //request signature - return await provider.signTx({xdr, network}) -} + return await StellarWalletsKit.signTransaction(xdr, { + networkPassphrase: network + }) +} \ No newline at end of file diff --git a/ui/signer/xbull-provider.js b/ui/signer/xbull-provider.js deleted file mode 100644 index f73146d..0000000 --- a/ui/signer/xbull-provider.js +++ /dev/null @@ -1,19 +0,0 @@ -export default class XBullProvider { - title = 'xBull' - - init() { - return import(/* webpackChunkName: "xbull-provider" */'@creit.tech/xbull-wallet-connect') - .then(module => { - this.provider = module.xBullWalletConnect - }) - } - - async signTx({xdr, network}) { - await this.init() - const bridge = new this.provider() - const publicKey = await bridge.connect() - const res = await bridge.sign({xdr, publicKey, network}) - bridge.closeConnections() - return res - } -} \ No newline at end of file diff --git a/ui/views/tx/details/add-signatures.scss b/ui/views/tx/details/add-signatures.scss index 17f5cc1..9f8c316 100644 --- a/ui/views/tx/details/add-signatures.scss +++ b/ui/views/tx/details/add-signatures.scss @@ -1,11 +1,25 @@ -.signature-options { - .button { - width: 25%; +.stellar-wallets-kit { + & > div { + background-color: var(--color-modal-bg)!important; + backdrop-filter: blur(2px); } - img { - height: 1.6em; - vertical-align: top; - margin-top: 0.3em; + & > section { + min-width: 18em; + border: 1px solid var(--color-contrast-border); + border-radius: 0.3rem!important; + + div { + overflow: hidden!important; + overflow-y: auto!important; + } + + header > div { + overflow-y: hidden!important; + } + } + + button { + border: none; } } \ No newline at end of file diff --git a/ui/views/tx/details/tx-add-signature-view.js b/ui/views/tx/details/tx-add-signature-view.js index 4c8db6e..6305d66 100644 --- a/ui/views/tx/details/tx-add-signature-view.js +++ b/ui/views/tx/details/tx-add-signature-view.js @@ -1,7 +1,7 @@ import React, {useCallback, useState} from 'react' -import {Button, ButtonGroup, withErrorBoundary} from '@stellar-expert/ui-framework' +import {Button, withErrorBoundary} from '@stellar-expert/ui-framework' import {apiSubmitTx} from '../../../infrastructure/tx-dispatcher' -import {delegateTxSigning, getAllProviders} from '../../../signer/tx-signer' +import {delegateTxSigning} from '../../../signer/tx-signer' import AddXdrView from '../add-xdr-view' import './add-signatures.scss' @@ -23,29 +23,20 @@ export default withErrorBoundary(function TxAddSignatureView({txInfo, onUpdate}) if (txInfo.readyToSubmit || txInfo.submitted) return null - const providers = getAllProviders() return
Sign transaction
-
- - {providers.map(provider => - )} +
+
+ +
+
- -
-
- {providers.filter(p => !!p.mobileSupported).map(provider => - )} - +
{!!inProgress &&
} @@ -54,15 +45,9 @@ export default withErrorBoundary(function TxAddSignatureView({txInfo, onUpdate}) }) async function processSignature(provider, txInfo) { - let signedTx - try { - signedTx = await delegateTxSigning(provider, txInfo.xdr, txInfo.network) - } catch (e) { - notify({type: 'warning', message: e?.msg || 'Failed to obtain a transaction signature'}) - throw e - } + const {signedTxXdr} = await delegateTxSigning(txInfo.xdr, txInfo.network) try { - return await apiSubmitTx({...txInfo, xdr: signedTx}) + return await apiSubmitTx({...txInfo, xdr: signedTxXdr}) } catch (e) { notify({type: 'error', message: 'Failed to store transaction signature. Please repeat the process later.'}) throw e