feat: sideshift integration pay

[chedieck]

Related to #187

Depends On:

• [x] https://github.com/PayButton/paybutton-server/pull/840

Description

Adds SideShift integration through websockets that communicate to the PayButton Server.

Test plan

This has to be test alongside with https://github.com/PayButton/paybutton-server/pull/840 of paybutton server. First follow the steps at https://github.com/PayButton/paybutton-server/pull/840, and, after that is set up, follow the steps below:

0. Add to the config file (react/lib/config.json) the property "altpaymentClient": "mocked".

1. Let ecash:myxecaddress be an eCash address in your custody. Save the following diff to a file named temp.patch, change the four occurrences of ecash:myxecaddress to your actual address and apply it with patch -p1 < temp.patch:

diff --git a/paybutton/dev/demo/index.html b/paybutton/dev/demo/index.html
index 320dc03..62a26f4 100644
--- a/paybutton/dev/demo/index.html
+++ b/paybutton/dev/demo/index.html
@@ -78,32 +78,34 @@
   </div>
   <br />
   <div class="widgets-section" id="widgets-section">
+    <!--
+    -->
     <div>
-      <div id="the_widget" class="paybutton-widget" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek"
-        goal-amount="500000" hover-text="BLARG" amount="1000.69" success-text="WOW!" text="Purchase"
+      <div id="the_widget" class="paybutton-widget" to="ecash:myxecaddress"
+        goal-amount="500000" hover-text="BLARG" amount="400000.69" success-text="WOW!" text="Purchase"
         on-success="mySuccessFunction" editable="true" on-transaction="myTransactionFunction"
         theme='{ "palette": { "primary": "#F18F01", "secondary": "#C3F3FD", "tertiary": "#2E4057"} }'></div>
-      <div class="btn">
-        <button onclick="buttonClick()">Switch up widget!</button>
-      </div>
     </div>
     <div>
-      <div>
-        <div id="the_other_widget" class="paybutton-widget" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek"
-          goal-amount="500000" amount="1000.69" success-text="WOW!" text="Purchase" on-success="mySuccessFunction"
-          editable="true" on-transaction="myTransactionFunction"
-          theme='{ "palette": { "primary": "#463730", "secondary": "#759FBC", "tertiary": "#1F5673"} }'></div>
+      <div id="the_widget2" class="paybutton-widget" to="ecash:myxecaddress"
+        goal-amount="500000" hover-text="BLARG" op-return="class=2024 key=test" success-text="WOW!" text="Purchase"
+        on-success="mySuccessFunction" on-transaction="myTransactionFunction"
+        theme='{ "palette": { "primary": "#F18F01", "secondary": "#C3F3FD", "tertiary": "#2E4057"} }'>
       </div>
-      <div class="btn">
-        <button onclick="button2Click()">
-          Switch up widget!
-        </button>
+    </div>
+    <div>
+      <div id="the_widget3" class="paybutton-widget" to="ecash:myxecaddress"
+        goal-amount="500000" hover-text="BLARG" amount="20" editable="true" success-text="WOW!" text="Purchase"
+        on-success="mySuccessFunction" on-transaction="myTransactionFunction"
+        theme='{ "palette": { "primary": "#F18F01", "secondary": "#C3F3FD", "tertiary": "#2E4057"} }'>
       </div>
     </div>
     <div>
-      <div class="paybutton-widget" to="bitcoincash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7q9ayphulp" amount="50000"
-        currency="SAT" detect-payment="true"></div>
-      <br />
+      <div id="the_widgetr4" class="paybutton-widget" to="ecash:myxecaddress"
+        goal-amount="500000" hover-text="BLARG" amount="20"  success-text="WOW!" text="Purchase"
+        on-success="mySuccessFunction" on-transaction="myTransactionFunction"
+        theme='{ "palette": { "primary": "#F18F01", "secondary": "#C3F3FD", "tertiary": "#2E4057"} }'>
+      </div>
     </div>
   </div>

3. Run yarn dev. After it is done running, go to http://localhost:10001
4. There are four widgets.
   1. The first one has a XEC amount > 10 dollars and is editable, so the user should be able to pay with other currencies by clicking on the "Don't have any XEC?" text.
   2. The second one has no XEC amount set and is uneditable, so the user should still be able to pay with other currencies by editing the amount.
   3. The third one has a very small XEC amount set and is editable, so the user should still be able to pay with other currencies.
   4. The fourth one has a very small XEC amount set but is uneditable, so the user should not be able to pay with other currencies.
5. Try to pay with another currency (I used ethereum in the optimism network, since it's fast and has very small network fees). Make sure that completing a shift should trigger the onSuccess function. NOTE: The onSuccess function will trigger in the widget being used but the onTransaction function will trigger in the other three, so when testing this is probably best to comment out 3 widgets and only leave the one being tested.

[Klakurka]

I got to the point of where it asks me to make the payment -- just asking SideShift if they have any suggestions for how to test better without having to use live payments.

[chedieck]

I tried rebuilding it again and it worked!

The only thing I saw is that the success toast fires a 2nd time when you click the back button (after sending the mock XEC payment). Able to reproduce?

Good catch, just fixed.

[lissavxo]

got this error running yarn clean:build :

[chedieck]

got this error running yarn clean:build

Should be fixed now.