Release/1.2.0

README.md

@@ -1,8 +1,8 @@
 # Stellar Demo Wallet
 
-This Stellar Demo Wallet is our newly rebuilt application for
-interactively testing anchor services. If you would like to automate testing of
-your anchor service, check out the SDF's
+This Stellar Demo Wallet is our newly rebuilt application for interactively
+testing anchor services. If you would like to automate testing of your anchor
+service, check out the SDF's
 [anchor validation suite](https://github.com/stellar/transfer-server-validator)
 viewable at [anchor-validator.stellar.org](anchor-validator.stellar.org).
 
@@ -16,24 +16,75 @@ feel free to clone or copy any pieces that may be helpful.
 
 ## Getting A Test Account Up and Running
 
-You can use the demo wallet to test Hosted Deposit and Withdrawal (SEP-24) and Cross-Border Payments (SEP-31) with any home domain that has a Stellar Info File (also known as SEP-1, or a stellar.toml file). The instructions below are for demo-ing standard integrations supported by Stellar test server, testanchor.stellar.org. For both integrations, the logs to the right of the screen will show every network call. 
-
-### Demo-ing a Deposit on Testnet with Hosted Deposit and Withdrawal (SEP-24)
-1. Click "Generate keypair", and then click "Create account" - this will create a balance of 10,000 XLM.
-2. Click “Add asset” and add `SRT` (this stands for Stellar Reference Token, it’s our representation of XLM for the test server) with the anchor home domain `testanchor.stellar.org`.
+You can use the demo wallet to test Regulated Assets ([SEP-8]), Hosted Deposit
+and Withdrawal ([SEP-24]) and Cross-Border Payments ([SEP-31]) with any home
+domain that has a Stellar Info File (also known as [SEP-1], or a stellar.toml
+file). The instructions below are for demo-ing standard integrations supported
+by Stellar test server, testanchor.stellar.org or by the [SEP-8] reference
+server, sep8-server.dev.stellar.org. For these integrations, the logs to the
+right of the screen will show every network call.
+
+### Demo-ing a Regulated Asset Payment ([SEP-8])
+
+1. Click "Generate keypair", and then click "Create account" - this will create
+   a balance of 10,000 XLM.
+2. Click “Add asset” and add `MYASSET` with the anchor home domain
+   `sep8-server.dev.stellar.org`.
+3. Click “Add trustline” - this will allow you to hold MYASSET.
+4. Click on the "Copy" link on the right of your public key and use that value
+   to get some unities of MYASSET using the link
+   `https://sep8-server.dev.stellar.org/friendbot?addr=<paste_your_address_here>`.
+   Refresh the [demo-wallet page](https://demo-wallet.stellar.org/) to see funds
+   in your account.
+5. Select "SEP-8 Send" from the dropdown of MYASSET and click "Start" in the
+   modal.
+6. In the "destination" field, input an address that also has a trustline to
+   MYASSET.
+7. The modal will display the approval criteria used by the SEP-8 server.
+   Depending on the conditions described there your payment can be automatically
+   approved or you may be required to undergo an additional KYC step.
+8. After your payment gets revised and signed by the SEP-8 reference server
+   you'll need to review the updated transaction before the demo wallet submits
+   the payment.
+9. If the payment has been successfully sent you'll see "SEP-8 send payment
+   completed 🎉" in the logs.
+
+### Demo-ing a Deposit on Testnet with Hosted Deposit and Withdrawal ([SEP-24])
+
+1. Click "Generate keypair", and then click "Create account" - this will create
+   a balance of 10,000 XLM.
+2. Click “Add asset” and add `SRT` (this stands for Stellar Reference Token,
+   it’s our representation of XLM for the test server) with the anchor home
+   domain `testanchor.stellar.org`.
 3. Click “Add trustline” - this will allow you to hold SRT.
-4. Select “SEP-24 deposit” from the dropdown for your SRT asset and click "Start" in the modal.
-5. If your browser doesn't already, make sure it allows pop-ups - this is how the demo wallet requests KYC info. 
-6. Enter your name and email in the pop-up - this information doesn't need to be real, but the interface will want a valid email.
-7. Click “Skip confirmation” - skipping it won't be possible in live integrations but helps the process move ahead in the demo.
-8. Enter a number into the amount and click "Submit". 
-9. Leave the pop-up window open while you wait to see the deposit of SRT go through - you can close when you see “Status” is complete and you have SRT.
-
-### Demo-ing Cross-Border Payments (SEP-31) on Testnet
+4. Select “SEP-24 deposit” from the dropdown for your SRT asset and click
+   "Start" in the modal.
+5. If your browser doesn't already, make sure it allows pop-ups - this is how
+   the demo wallet requests KYC info.
+6. Enter your name and email in the pop-up - this information doesn't need to be
+   real, but the interface will want a valid email.
+7. Click “Skip confirmation” - skipping it won't be possible in live
+   integrations but helps the process move ahead in the demo.
+8. Enter a number into the amount and click "Submit".
+9. Leave the pop-up window open while you wait to see the deposit of SRT go
+   through - you can close when you see “Status” is complete and you have SRT.
+
+### Demo-ing Cross-Border Payments ([SEP-31]) on Testnet
+
+_Note: specifically in the case of demo-ing SEP-31 in the Demo Wallet, notice
+the public and secret keys don't represent the Sending Client but instead the
+Sending Anchor's account. In SEP-31, the only Stellar transaction happening is
+between the Sending and the Receiving anchors._
+
 1. Follow the steps above in order to establish an amount of SRT to send.
-2. Select “SEP-31 Send” from the dropdown for your SRT asset and click "Start" in the modal.
-3. Enter the requested information in the pop-up - none of the info has to be real for this testanchor.stellar.org demo, this is only to show the fields required. When testing another anchor you may need to adhere to their validation requirements.
-4. If the payment has been successfully sent you'll see "SEP-31 send payment completed" in the logs.
+2. Select “SEP-31 Send” from the dropdown for your SRT asset and click "Start"
+   in the modal.
+3. Enter the requested information in the pop-up - none of the info has to be
+   real for this testanchor.stellar.org demo, this is only to show the fields
+   required. When testing another anchor you may need to adhere to their
+   validation requirements.
+4. If the payment has been successfully sent you'll see "SEP-31 send payment
+   completed" in the logs.
 
 ## Getting Started Building A Wallet From This Demo
 
@@ -57,19 +108,56 @@ yarn build
 
 ---
 
+## Release Notes
+
+### v1.2
+
+- SEP-06 now supported
+- SEP-08 now supported
+- Fixed a [bug](https://github.com/stellar/stellar-demo-wallet/issues/188) when
+  overriding home domain
+- Fixed an [issue](https://github.com/stellar/stellar-demo-wallet/issues/196)
+  where balance amounts were being overwritten
+- Sending to Muxed Accounts is now supported
+
+### [v1.1](https://github.com/stellar/stellar-demo-wallet/releases/tag/v1.1.0)
+
+- Fix for local CORS issue
+- Updated Sentry to log exceptions
+
+### v1.0
+
+- Revamped UI
+- All SEPs are integrated into one tool
+  - SEP-24 and SEP-31 are now found in the Asset action drop-down menus
+- Ablity to download logs
+- Claimable Balances supported
+
 ## Roadmap
 
 - [x] Improve local development story
 - [x] Add config-by-url support
 - [x] Implement Claimable Balance support
 - [x] Add Pubnet Support
 - [x] Improve UX
-- [ ] Forward sep24.stellar.org traffic to demo-wallet.stellar.org
 - [x] Implement SEP-31 support
+- [ ] Forward sep24.stellar.org traffic to demo-wallet.stellar.org
+- [ ] Deprecate older clients to use this tool instead
+      (sep31-demo-client.netlify.app, sep24.stellar.org, sep6.stellar.org)
 - [ ] Implement SEP-6 support
+- [ ] Implement SEP-8 support
 
 ### Helpful links
 
 - [https://www.stellar.org/developers](https://www.stellar.org/developers)
 - [https://stellar.github.io/js-stellar-sdk/](https://stellar.github.io/js-stellar-sdk/)
 - [https://github.com/stellar/js-stellar-sdk](https://github.com/stellar/js-stellar-sdk)
+
+[sep-1]:
+  https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0001.md
+[sep-8]:
+  https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0008.md
+[sep-24]:
+  https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0024.md
+[sep-31]:
+  https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0031.md

package.json

@@ -50,7 +50,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "redux": "^4.0.5",
-    "stellar-sdk": "^8.0.0",
+    "stellar-sdk": "^8.2.1",
     "styled-components": "^5.2.1",
     "toml": "^3.0.0",
     "typescript": "~4.1.3",

src/App.tsx

@@ -11,7 +11,7 @@ import { PageContent } from "components/PageContent";
 import { PrivateRoute } from "components/PrivateRoute";
 import { SettingsHandler } from "components/SettingsHandler";
 import { WarningBanner } from "components/WarningBanner";
-import { TextLink, TextLinkVariant } from "@stellar/design-system";
+import { TextLink } from "components/TextLink";
 
 import { Account } from "pages/Account";
 import { Landing } from "pages/Landing";
@@ -22,7 +22,12 @@ if (process.env.REACT_APP_SENTRY_KEY) {
   Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_KEY,
     release: `demo-wallet@${process.env.npm_package_version}`,
-    integrations: [new Integrations.BrowserTracing()],
+    integrations: [
+      new Integrations.BrowserTracing({
+        // not attaching sentry-trace to any XHR/fetch outgoing requests
+        tracingOrigins: [/^\/[^/]/],
+      }),
+    ],
     tracesSampleRate: 1.0,
   });
 }
@@ -38,29 +43,29 @@ export const App = () => (
             <div className="ContentWrapper">
               <Header />
 
-              <div className="Announcement">
-                <div className="Inset">
-                  <p>
-                    Welcome to the new and improved Stellar demo wallet! Please
-                    log bugs and feature requests at: &nbsp;
-                    <TextLink
-                      variant={TextLinkVariant.primary}
-                      href="https://github.com/stellar/stellar-demo-wallet/issues"
-                      rel="noreferrer"
-                      target="_blank"
-                    >
-                      https://github.com/stellar/stellar-demo-wallet/issues
-                    </TextLink>
-                  </p>
-                </div>
-              </div>
-
               <div className="IntroText Inset">
                 <p>
                   This demo wallet lets financial application developers test
                   their integrations and learn how Stellar ecosystem protocols
                   (SEPs) work.
                 </p>
+
+                <p>
+                  <TextLink
+                    href="https://github.com/stellar/stellar-demo-wallet#stellar-demo-wallet"
+                    isExternal
+                  >
+                    Learn more
+                  </TextLink>{" "}
+                  about the tool and{" "}
+                  <TextLink
+                    href="https://github.com/stellar/stellar-demo-wallet/issues"
+                    isExternal
+                  >
+                    report issues or request features
+                  </TextLink>{" "}
+                  on GitHub.
+                </p>
               </div>
 
               <PageContent>

src/components/Assets.tsx

@@ -56,6 +56,8 @@ export const Assets = ({
     allAssets,
     assetOverrides,
     claimAsset,
+    sep6DepositAsset,
+    sep6WithdrawAsset,
     sep24DepositAsset,
     sep24WithdrawAsset,
     sep31Send,
@@ -68,6 +70,8 @@ export const Assets = ({
     "allAssets",
     "assetOverrides",
     "claimAsset",
+    "sep6DepositAsset",
+    "sep6WithdrawAsset",
     "sep24DepositAsset",
     "sep24WithdrawAsset",
     "sep31Send",
@@ -228,7 +232,55 @@ export const Assets = ({
     history,
   ]);
 
-  // Deposit asset
+  // SEP-6 Deposit asset
+  useEffect(() => {
+    if (
+      sep6DepositAsset.status === ActionStatus.SUCCESS &&
+      sep6DepositAsset.data.trustedAssetAdded
+    ) {
+      handleRemoveUntrustedAsset(sep6DepositAsset.data.trustedAssetAdded);
+    }
+
+    if (sep6DepositAsset.data.currentStatus === TransactionStatus.COMPLETED) {
+      handleRefreshAccount();
+      handleFetchClaimableBalances();
+    }
+
+    setActiveAssetStatusAndToastMessage({
+      status: sep6DepositAsset.status,
+      message: "SEP-6 deposit in progress",
+    });
+  }, [
+    sep6DepositAsset.status,
+    sep6DepositAsset.data.currentStatus,
+    sep6DepositAsset.data.trustedAssetAdded,
+    handleRefreshAccount,
+    handleFetchClaimableBalances,
+    handleRemoveUntrustedAsset,
+    setActiveAssetStatusAndToastMessage,
+  ]);
+
+  // SEP-6 Withdraw asset
+  useEffect(() => {
+    if (
+      sep6WithdrawAsset.status === ActionStatus.SUCCESS &&
+      sep6WithdrawAsset.data.currentStatus === TransactionStatus.COMPLETED
+    ) {
+      handleRefreshAccount();
+    }
+
+    setActiveAssetStatusAndToastMessage({
+      status: sep6WithdrawAsset.status,
+      message: "SEP-6 withdrawal in progress",
+    });
+  }, [
+    sep6WithdrawAsset.status,
+    sep6WithdrawAsset.data.currentStatus,
+    handleRefreshAccount,
+    setActiveAssetStatusAndToastMessage,
+  ]);
+
+  // SEP-24 Deposit asset
   useEffect(() => {
     if (sep24DepositAsset.status === ActionStatus.SUCCESS) {
       dispatch(resetSep24DepositAssetAction());
@@ -261,7 +313,7 @@ export const Assets = ({
     history,
   ]);
 
-  // Withdraw asset
+  // SEP-24 Withdraw asset
   useEffect(() => {
     if (sep24WithdrawAsset.status === ActionStatus.SUCCESS) {
       dispatch(resetSep24WithdrawAssetAction());

src/components/Balance.tsx

@@ -1,6 +1,8 @@
 import { useDispatch } from "react-redux";
 import { TextLink } from "components/TextLink";
 import { BalanceRow } from "components/BalanceRow";
+import { initiateDepositAction as initiateSep6SendAction } from "ducks/sep6DepositAsset";
+import { initiateWithdrawAction as initiateSep6WithdrawAction } from "ducks/sep6WithdrawAsset";
 import { initiateSep8SendAction } from "ducks/sep8Send";
 import { depositAssetAction } from "ducks/sep24DepositAsset";
 import { initiateSendAction } from "ducks/sep31Send";
@@ -62,6 +64,14 @@ export const Balance = ({
     return result;
   };
 
+  const handleSep6Deposit = (asset: Asset) => {
+    dispatch(initiateSep6SendAction(asset));
+  };
+
+  const handleSep6Withdraw = (asset: Asset) => {
+    dispatch(initiateSep6WithdrawAction(asset));
+  };
+
   const handleSep8Send = (asset: Asset) => {
     dispatch(initiateSep8SendAction(asset));
   };
@@ -114,6 +124,22 @@ export const Balance = ({
           callback: onSend,
         };
         break;
+      case AssetActionId.SEP6_DEPOSIT:
+        props = {
+          ...defaultProps,
+          title: `SEP-6 deposit ${balance.assetCode} (with Trusted Asset)`,
+          description: `Start SEP-6 deposit of trusted asset ${balance.assetCode}?`,
+          callback: () => handleSep6Deposit(balance),
+        };
+        break;
+      case AssetActionId.SEP6_WITHDRAW:
+        props = {
+          ...defaultProps,
+          title: `SEP-6 withdrawal ${balance.assetCode}`,
+          description: `Start SEP-6 withdrawal of ${balance.assetCode}?`,
+          callback: () => handleSep6Withdraw(balance),
+        };
+        break;
       case AssetActionId.SEP8_SEND_PAYMENT:
         props = {
           ...defaultProps,
@@ -149,14 +175,21 @@ export const Balance = ({
           callback: () => handleSep24Withdraw(balance),
         };
         break;
-      case AssetActionId.SEP31_SEND:
+      case AssetActionId.SEP31_SEND: {
+        let description = `Start SEP-31 send to ${balance.assetCode}?\n\n`;
+        description +=
+          "Please be aware that specifically in the case of demo-ing SEP-31 in the Demo Wallet the public and secret keys don't represent the Sending Client but instead the Sending Anchor's account.\n\n";
+        description +=
+          "In SEP-31, the only Stellar transaction happening is between the Sending and the Receiving anchors.";
         props = {
           ...defaultProps,
           title: `SEP-31 send ${balance.assetCode}`,
-          description: `Start SEP-31 send to ${balance.assetCode}?`,
+
+          description,
           callback: () => handleSep31Send(balance),
         };
         break;
+      }
       default:
       // do nothing
     }