Add stellar wallets kit

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"
     ]
   }
-}
+}

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
+    })
+}

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;
   }
 }

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 <div className="space">
         <div className="text-small dimmed">Sign transaction</div>
         <div className="signature-options micro-space">
-            <div className="desktop-only">
-                <ButtonGroup style={{display: 'flex'}}>
-                    {providers.map(provider =>
-                        <Button key={provider.title} block outline disabled={inProgress} onClick={requestSignature} data-provider={provider.title}>
-                            <img src={`/img/wallets/${provider.title.toLowerCase()}.svg`}/> {provider.title}
-                        </Button>)}
+            <div className="row">
+                <div className="column column-50">
+                    <Button block outline disabled={inProgress} onClick={requestSignature}>
+                        <i className="icon icon-wallet"/> Stellar wallets
+                    </Button>
+                </div>
+                <div className="column column-50">
                     <Button block outline disabled={inProgress} onClick={toggleImportModal}>
-                        <i className="icon icon-download"/> Import
+                        <i className="icon icon-download"/> Import signed XDR
                     </Button>
-                </ButtonGroup>
-            </div>
-            <div className="mobile-only">
-                {providers.filter(p => !!p.mobileSupported).map(provider =>
-                    <Button key={provider.title} outline block disabled={inProgress} onClick={requestSignature} data-provider={provider.title}>
-                        <img src={`/img/wallets/${provider.title.toLowerCase()}.svg`}/> {provider.title}
-                    </Button>)}
-                <Button block outline disabled={inProgress} onClick={toggleImportModal}>
-                    <i className="icon icon-download"/> Import
-                </Button>
+                </div>
             </div>
         </div>
         {!!inProgress && <div className="loader"/>}
@@ -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