Skip to content

Commit

Permalink
Merge pull request #81 from ton-connect/feature/new-ui
Browse files Browse the repository at this point in the history 
Feature/new UI
  • Loading branch information
@siandreev
siandreev authored Sep 8, 2023
2 parents 9f81c52 + f258cba commit 476e20a
Show file tree
Hide file tree
Showing 104 changed files with 3,054 additions and 1,064 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions packages/ui-react/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
# Changelog @tonconnect/ui-react

# [2.0.0-beta.0](https://github.com/ton-connect/sdk/compare/ui-react-1.0.0-beta.9...ui-react-2.0.0-beta.0) (2023-09-08)


### Bug Fixes

* **ui-react:** useTonWallet hook types changed ([456f5eb](https://github.com/ton-connect/sdk/commit/456f5ebdc061b35aa131c0f2a892dc49ebdcf2ba))


### BREAKING CHANGES

* **ui-react:** `useTonWallet` now returns `Wallet | (Wallet & WalletInfoWithOpenMethod) | null` instead of `(Wallet & WalletInfoWithOpenMethod) | null`



# [1.0.0-beta.9](https://github.com/ton-connect/sdk/compare/ui-react-1.0.0-beta.8...ui-react-1.0.0-beta.9) (2023-08-18)


Expand Down
4 changes: 2 additions & 2 deletions packages/ui-react/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@tonconnect/ui-react",
"version": "1.0.0-beta.9",
"version": "2.0.0-beta.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build"
Expand Down Expand Up @@ -52,7 +52,7 @@
"vite-plugin-dts": "^1.7.1"
},
"dependencies": {
"@tonconnect/ui": "^1.0.0-beta.7"
"@tonconnect/ui": "^2.0.0-beta.0"
},
"peerDependencies": {
"react": ">=17.0.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-react/src/hooks/useTonWallet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { WalletInfoWithOpenMethod, Wallet } from '@tonconnect/ui';
/**
* Use it to get user's current ton wallet. If wallet is not connected hook will return null.
*/
export function useTonWallet(): (Wallet & WalletInfoWithOpenMethod) | null {
export function useTonWallet(): Wallet | (Wallet & WalletInfoWithOpenMethod) | null {
const [tonConnectUI] = useTonConnectUI();
const [wallet, setWallet] = useState<(Wallet & WalletInfoWithOpenMethod) | null>(
const [wallet, setWallet] = useState<Wallet | (Wallet & WalletInfoWithOpenMethod) | null>(
tonConnectUI?.wallet || null
);

Expand Down
42 changes: 42 additions & 0 deletions packages/ui/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,47 @@
# Changelog @tonconnect/ui

# [2.0.0-beta.0](https://github.com/ton-connect/sdk/compare/ui-1.0.0-beta.7...ui-2.0.0-beta.0) (2023-09-08)


### Bug Fixes

* dark theme fixes ([7aab019](https://github.com/ton-connect/sdk/commit/7aab019ca72e1300caa6c88457452b0cf79cca4b))
* desktop wallet connection modal updates ([04bf064](https://github.com/ton-connect/sdk/commit/04bf064f6c74fde28e30bff499e3f00971ea3c6c))
* info modal layout created ([a5bf026](https://github.com/ton-connect/sdk/commit/a5bf0263a43d153e373e34df891df1d26f3ca44c))
* mobile layout improved ([765f63c](https://github.com/ton-connect/sdk/commit/765f63cb52f7b26dd80c6e14fa0de6f2519e07ae))
* **ui:** [@wallet](https://github.com/wallet) updates ([cad46a7](https://github.com/ton-connect/sdk/commit/cad46a77227bf668392e1639829efec554de545b))
* **ui:** border-radius updated ([4223842](https://github.com/ton-connect/sdk/commit/4223842442e23e034ff9f0f8f8c1f174e81fd4aa))
* **ui:** button icon padding fixes ([c7c23e8](https://github.com/ton-connect/sdk/commit/c7c23e8f8e280caf2627e30ca6abaf0ed1fe8b26))
* **ui:** data attributes added, wallet-items labels added ([06a0d17](https://github.com/ton-connect/sdk/commit/06a0d170781f35d242e43b3a8fae13e8171b6400))
* **ui:** i18n updated ([a5cd091](https://github.com/ton-connect/sdk/commit/a5cd091c9899bc7ec4aa08d27a15f3f60d35bb47))
* **ui:** Installed wallets order fixed ([eb9ad28](https://github.com/ton-connect/sdk/commit/eb9ad28347166104969d7e0b42a4bb4ec5be5a1a))
* **ui:** mobile qr added ([9983e98](https://github.com/ton-connect/sdk/commit/9983e98ecc28e072c951194dd31a1444717cb36e))
* **ui:** mobile scroll container improvements ([68a79df](https://github.com/ton-connect/sdk/commit/68a79df648b3c4afc89cf5b72a29116072b8ac7c))
* **ui:** open link replaced with open link blank everywhere ([75d394d](https://github.com/ton-connect/sdk/commit/75d394d096727c970b05ad710b74b68b05c56f44))
* **ui:** return strategy added for telegram wallets ([97cc8ef](https://github.com/ton-connect/sdk/commit/97cc8ef1b47ab05f48168b3abfbb6a37f6bc77fc))
* **ui:** telegram links `ret` param handling ([0be57ca](https://github.com/ton-connect/sdk/commit/0be57caa275c075a3fa5b76ea3c9d51fc9ee790b))
* **ui:** tonConnectUI wallet info property was maiden optional ([0f7f46a](https://github.com/ton-connect/sdk/commit/0f7f46a105234f7f815185b83e103b54ac865c92))
* **ui:** twa "Open Wallet" button fixes ([8f8a797](https://github.com/ton-connect/sdk/commit/8f8a797eee3e02116aec11242ad67a4c82ddbc66))
* **ui:** twa redirect updated ([da7ed34](https://github.com/ton-connect/sdk/commit/da7ed340b696402792c1ff8311843b33f5e4c463))
* **ui:** ui fixes: safari all wallets list & wallet page loader padding ([6b1c574](https://github.com/ton-connect/sdk/commit/6b1c57428bef141b2f5bdc72f715cb374257f4df))
* **ui:** ui improvements ([b4e87cc](https://github.com/ton-connect/sdk/commit/b4e87cc15ff41ae48c3567c0ff4b17638d6f7b61))
* **ui:** ui improvements ([c0660f9](https://github.com/ton-connect/sdk/commit/c0660f932fe9d4e27d90d43405c8252f4f529a4b))
* **ui:** ui updates ([b810692](https://github.com/ton-connect/sdk/commit/b810692328887690305d582adf428f3282de4483))


### Features

* new ui for main screen implemented ([fca8c70](https://github.com/ton-connect/sdk/commit/fca8c70a94ceb6664e378f1d4f7e7eb9ab244c64))
* new ui for wallet connection page implemented ([c713f6e](https://github.com/ton-connect/sdk/commit/c713f6ef918ec60f91e9acccd558e752819dd6e4))
* new ui wallets list implemented ([0b748f4](https://github.com/ton-connect/sdk/commit/0b748f480cd1f18b7df891e7970e353221ad29f4))


### BREAKING CHANGES

* **ui:** `tonConnectUI.wallet` now is `Wallet | (Wallet & WalletInfoWithOpenMethod) | null` instead of `(Wallet & WalletInfoWithOpenMethod) | null`



# [1.0.0-beta.7](https://github.com/ton-connect/sdk/compare/ui-1.0.0-beta.6...ui-1.0.0-beta.7) (2023-08-18)


Expand Down
70 changes: 49 additions & 21 deletions packages/ui/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,33 @@ const result = await tonConnectUI.sendTransaction(defaultTx, {
});
```

## Use inside TWA (Telegram web app)
TonConnect UI will work in TWA in the same way as in a regular website!
Basically, no changes are required from the dApp's developers. The only thing you have to set is a dynamic return strategy.

Currently, it is impossible for TWA-wallets to redirect back to previous opened TWA-dApp like native wallet-apps do.
It means, that you need to specify the return strategy as a link to your TWA that will be only applied if the dApp is opened in TWA mode.

```ts
tonConnectUI.uiOptions = {
twaReturnUrl: 'https://t.me/durov'
};
```

In other words,
```ts
if (isLinkToTelegram()) {
if (isInTWA()) {
FINAL_RETURN_STRATEGY = actionsConfiguration.twaReturnUrl || actionsConfiguration.returnStrategy;
} else {
FINAL_RETURN_STRATEGY = 'none';
}
} else {
FINAL_RETURN_STRATEGY = actionsConfiguration.returnStrategy;
}

```

## Detect end of the connection restoring process
Before restoring previous connected wallet TonConnect has to set up SSE connection with bridge, so you have to wait a little while connection restoring.
If you need to update your UI depending on if connection is restoring, you can use `tonConnectUI.connectionRestored` promise.
Expand Down Expand Up @@ -480,27 +507,28 @@ However, it is possible if needed. You can add css styles to the specified selec

UI components:

| Element | Selector | Element description |
|---------------------------------------|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
| Connect wallet modal container | `[data-tc-wallets-modal-container="true"]` | Container of the modal window that opens when you click on the "connect wallet" button. |
| Select wallet mobile modal content | `[data-tc-wallets-modal-mobile="true"]` | Content of the mobile modal window with wallet selection. |
| Select wallet desktop modal content | `[data-tc-wallets-modal-desktop="true"]` | Content of the desktop window with wallet selection. |
| Desktop Universal QR content | `[data-tc-universal-qr-desktop="true"]` | Universal QR page content under the tab bar in the desktop wallets selection modal window. |
| Desktop wallets list content | `[data-tc-select-wallet-desktop="true"]` | Wallets list page content under the tab bar in the desktop wallets selection modal window. |
| Concrete wallet QR-code modal content | `[data-tc-wallet-qr-modal-desktop="true"]` | Content of the modal window with the concrete wallet QR-code. |
| Action modal container | `[data-tc-actions-modal-container="true"]` | Container of the modal window that opens when you call `sendTransaction` or other action. |
| Confirm action modal content | `[data-tc-confirm-modal="true"]` | Content of the modal window asking for confirmation of the action in the wallet. |
| "Transaction sent" modal content | `[data-tc-transaction-sent-modal="true"]` | Content of the modal window informing that the transaction was successfully sent. |
| "Transaction canceled" modal content | `[data-tc-transaction-canceled-modal="true"]` | Content of the modal window informing that the transaction was not sent. |
| "Connect Wallet" button | `[data-tc-connect-button="true"]` | "Connect Wallet" button element. |
| Wallet menu loading button | `[data-tc-connect-button-loading="true"]` | Button element which appears instead of "Connect Wallet" and dropdown menu buttons while restoring connection process |
| Wallet menu dropdown button | `[data-tc-dropdown-button="true"]` | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect). |
| Wallet menu dropdown container | `[data-tc-dropdown-container="true"]` | Container of the dropdown that opens when you click on the "wallet menu" button with ton address. |
| Wallet menu dropdown content | `[data-tc-dropdown="true"]` | Content of the dropdown that opens when you click on the "wallet menu" button with ton address. |
| Notifications container | `[data-tc-list-notifications="true"]` | Container of the actions notifications. |
| Notification confirm | `[data-tc-notification-confirm="true"]` | Confirmation notification element. |
| Notification tx sent | `[data-tc-notification-tx-sent="true"]` | Transaction sent notification element. |
| Notification cancelled tx | `[data-tc-notification-tx-cancelled="true"]` | Cancelled transaction notification element. |
| Element | Selector | Element description |
|--------------------------------------|-----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
| Connect wallet modal container | `[data-tc-wallets-modal-container="true"]` | Container of the modal window that opens when you click on the "connect wallet" button. |
| Mobile universal modal page content | `[data-tc-wallets-modal-universal-mobile="true"]` | Content of the general mobile modal page with horizontal list. |
| Desktop universal modal page content | `[data-tc-wallets-modal-universal-desktop="true"]` | Content of the universal desktop modal page with QR. |
| Mobile selected wallet's modal page | `[data-tc-wallets-modal-connection-mobile="true"]` | Content of the selected wallet's modal page on mobile. |
| Desktop selected wallet's modal page | `[data-tc-wallets-modal-connection-desktop="true"]` | Content of the selected wallet's modal page on desktop. |
| Wallets list modal page | `[data-tc-wallets-modal-list="true"]` | Content of the modal page with all available wallets list (desktop and mobile). |
| Info modal page | `[data-tc-wallets-modal-info="true"]` | Content of the modal page with "What is a wallet information". |
| Action modal container | `[data-tc-actions-modal-container="true"]` | Container of the modal window that opens when you call `sendTransaction` or other action. |
| Confirm action modal content | `[data-tc-confirm-modal="true"]` | Content of the modal window asking for confirmation of the action in the wallet. |
| "Transaction sent" modal content | `[data-tc-transaction-sent-modal="true"]` | Content of the modal window informing that the transaction was successfully sent. |
| "Transaction canceled" modal content | `[data-tc-transaction-canceled-modal="true"]` | Content of the modal window informing that the transaction was not sent. |
| "Connect Wallet" button | `[data-tc-connect-button="true"]` | "Connect Wallet" button element. |
| Wallet menu loading button | `[data-tc-connect-button-loading="true"]` | Button element which appears instead of "Connect Wallet" and dropdown menu buttons while restoring connection process |
| Wallet menu dropdown button | `[data-tc-dropdown-button="true"]` | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect). |
| Wallet menu dropdown container | `[data-tc-dropdown-container="true"]` | Container of the dropdown that opens when you click on the "wallet menu" button with ton address. |
| Wallet menu dropdown content | `[data-tc-dropdown="true"]` | Content of the dropdown that opens when you click on the "wallet menu" button with ton address. |
| Notifications container | `[data-tc-list-notifications="true"]` | Container of the actions notifications. |
| Notification confirm | `[data-tc-notification-confirm="true"]` | Confirmation notification element. |
| Notification tx sent | `[data-tc-notification-tx-sent="true"]` | Transaction sent notification element. |
| Notification cancelled tx | `[data-tc-notification-tx-cancelled="true"]` | Cancelled transaction notification element. |

---

Expand Down
6 changes: 3 additions & 3 deletions packages/ui/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "@tonconnect/ui",
"version": "1.0.0-beta.7",
"version": "2.0.0-beta.0",
"scripts": {
"start": "vite --host",
"dev": "vite",
"build": "vite build && rollup -c rollup.config.mjs && vite build -c vite.cdn-config.ts && node ./scripts/patch-build_ssr-fix.js"
"build": "tsc --noEmit --emitDeclarationOnly false && vite build && rollup -c rollup.config.mjs && vite build -c vite.cdn-config.ts && node ./scripts/patch-build_ssr-fix.js"
},
"nx": {
"tags": [
Expand Down Expand Up @@ -49,7 +49,7 @@
"dependencies": {
"classnames": "^2.3.2",
"deepmerge": "^4.2.2",
"@tonconnect/sdk": "^2.2.0",
"@tonconnect/sdk": "^3.0.0-beta.0",
"ua-parser-js": "^1.0.35"
},
"devDependencies": {
Expand Down
Loading

0 comments on commit 476e20a

Please sign in to comment.