Orders Sidebar --> Click to copy move. #1269

fairlighteth · 2021-08-17T13:36:55Z

Summary

Simplifies click to copy code
Takes out the click to copy button and moves it to the Wallet name/address (on click).
This makes room for a future button 'View all orders'.

Screen.Recording.2021-08-17.at.15.35.05.mov

fairlighteth · 2021-08-17T13:38:04Z

src/custom/components/AccountDetails/index.tsx

-              <WalletNameAddress>{ENSName ? ENSName : account && shortenAddress(account)}</WalletNameAddress>
+
+              {(ENSName || account) && (
+                <Copy toCopy={ENSName ? ENSName : account ? account : ''}>


ENSName or account should exist from the parent ternary. But added the empty string as the fallback here to satisfy the Copy type. Better solutions welcome. General aim is to consolidate code/markup as much as possible.

In this case, I think we want to always copy the address, no?
Even when ENS is present.
At least that was the default behaviour.

<Copy toCopy={account}>

It's what I wondered too. I thought when there's the ENSName you perhaps want to copy the ENS Name instead? Otherwise can see it making sense to copy the address.

Hmm. Ok, I guess copying the ENS name makes sense when that's available.

There's still the link to etherscan below, so that should be enough for covering both cases.

github-actions · 2021-08-17T13:44:18Z

🔭 GP Swap: Gnosis Protocol v2 Swap UI

MareenG

The copying works nicely but the header size(blue box) changes. Comparing it to your video this shouldn't be the case.

Bildschirmaufnahme.2021-08-17.um.16.24.28.mov

…rders-panel-8

elena-zh · 2021-08-17T15:44:04Z

Works fine to me except the issue @MareenG has mentioned above: header is jumping in iPhone when press on the copy address icon.

In addition to this comment #1270 (comment) , I even get 'moon/sun' icons truncated on my Android device:

elena-zh

I'm not sure if we could do something with this, but I see 2 ugly scrolls (Win10 +Chrome, FF and Brave) when I open a side bar in the desktop version when screen resolution is 1536 x 864 and less

elena-zh · 2021-08-17T15:58:46Z

I'm sorry, the comment above is related to #1270 pr

fairlighteth · 2021-08-17T16:54:23Z

I'm not sure if we could do something with this, but I see 2 ugly scrolls (Win10 +Chrome, FF and Brave) when I open a side bar in the desktop version when screen resolution is 1536 x 864 and less

Yes, unfortunately something changed in one of our recent releases where even on my default screen size, I have scrolling (without the sidebar being open). I would suggest to address this specific issue in a separate PR (as this is agnostic from the sidebar scrolling).

…rders-panel-8

elena-zh · 2021-08-18T09:51:55Z

@biocom , I created a separate issue for the scrollbar #1276

fairlighteth · 2021-08-18T11:16:08Z

@MareenG @elena-zh pushed a fix for:

Copied text now uses the same font-size as the wallet address: hopefully preventing jumping text (couldn't replicate otherwise).
The wallet balance is now hidden on mobile. On tablet and up it is shown.
The wallet footer on tablet now uses the full width (was capped with a max-width I noticed).

elena-zh · 2021-08-18T11:57:19Z

@biocom , mobile footer looks good to me now, as well as header is not jumping when press on the copy address icon.
The only thing is that 'Copied' message looks like a link for a second. See the video:
https://drive.google.com/file/d/1OsBudsMbl-kPgwk58ZWQAuvCikprBPKM/view

fairlighteth · 2021-08-19T10:16:11Z

@biocom , mobile footer looks good to me now, as well as header is not jumping when press on the copy address icon.
The only thing is that 'Copied' message looks like a link for a second. See the video:
https://drive.google.com/file/d/1OsBudsMbl-kPgwk58ZWQAuvCikprBPKM/view

This is fixed now in my last commit.

elena-zh

LGTM now!

MareenG · 2021-08-19T13:50:19Z

Looks good. I liked that the copied is displayed now in green :)

fairlighteth · 2021-08-20T08:20:51Z

Merging to consolidate. Review post-merge.

* Orders panel component. * Props update. * Open ordersPanel on click connected wallet. (#1203) * WIP - Orders panel part 3 (Add wallet + orders to the sidebar) (#1210) * Open ordersPanel on click connected wallet. * Orders in side bar WIP. * Fix issue types * Revert "Fix issue types" This reverts commit cb95c89. * Fix issue with types 2 * Account details inside orders sidebar. * Fix import. * Fix folder name. Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> * WIP - Orders panel part 4 (Re-style account details/activity/orders) (#1227) * Open ordersPanel on click connected wallet. * Orders in side bar WIP. * Fix issue types * Revert "Fix issue types" This reverts commit cb95c89. * Fix issue with types 2 * Account details inside orders sidebar. * Fix import. * Fix folder name. * Re-style of account details/activity. Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> * WIP - Orders panel part 5 (More styling and tweaking) (#1234) * Open ordersPanel on click connected wallet. * Orders in side bar WIP. * Fix issue types * Revert "Fix issue types" This reverts commit cb95c89. * Fix issue with types 2 * Account details inside orders sidebar. * Fix import. * Fix folder name. * Re-style of account details/activity. * Orders sidebar styling. * Orders sidebar styling. * Orders sidebar styling. * Orders sidebar styling. * Orders sidebar styling. * Transaction update. * Transaction update. Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> * WIP - Orders panel part 6 (Address feedback an wallet issues) (#1249) * Open ordersPanel on click connected wallet. * Orders in side bar WIP. * Fix issue types * Revert "Fix issue types" This reverts commit cb95c89. * Fix issue with types 2 * Account details inside orders sidebar. * Fix import. * Fix folder name. * Re-style of account details/activity. * Orders sidebar styling. * Orders sidebar styling. * Orders sidebar styling. * Orders sidebar styling. * Orders sidebar styling. * Transaction update. * Transaction update. * Fix wallet stuff. * Fix wallet stuff. * Mobile tx detail indent. * WIP - Orders panel part 7 (TBD) (#1250) * tablet size fix * Fix 1238 Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> * Rename prop. * Orders Sidebar --> Slide in effect. (#1270) * Sidebar slide in. * Scroll fix. * Orders Sidebar --> Click to copy move. (#1269) * Click to copy move. * Icon wrapper remove. * Mobile header fixes. * Re-factor Copy component. * Cancelling label re-factor + Fix cancellation modal (#1293) * Cancelling label re-factor. * Fix close modal/sidebar click event. * Shimmer effect OPEN orders. * closeOrdersPanel for FAQ link. * Refert passing prop, instead open link new tab. * Update src/custom/components/AccountDetails/Transaction.tsx Co-authored-by: David <david.sato64@gmail.com> Co-authored-by: David <david.sato64@gmail.com> * Orders Sidebar --> Show limit prices + valid to/filled on dates (#1279) * Add limit price and valid to/filled date. * Add limit price and valid to/filled date. * Fixed type of getLimitPrice utils function * Execution price WIP. * Styled file for cleanup. * Styled file for cleanup. * Fix grid on mobile (Safari). * comment out getExecutedPrice * Expired order strike through. * Unfillable faq link external. * Price functions for Recent History (#1289) * Add bignumber, so library matches our dex-js * Add price utils * Refactor transaction summary * Change todo * Rename variable to executionPrice. * Delete comment * Remove comments and improve doc * Fix path and default value * Add datatype for api additional data (#1290) # Summary Continues #1289, Augment the order datatype so we can have the executed volumes. Adds the datatype where we can save the API information It also makes use of this data in the recent history. ## Not included Saving the actual data. Co-authored-by: biocom <michel@gnosis.pm> * Correction of buy/sell prices. * Close walletModal on connection success * Orders panel execution price (#1309) * Fix decimals bug * Moved additional info to BaseOrder, everything is serializable * Added additional info to order fullfilment type * Passing along additional info when fulfillig order * Storing additional info on order obj Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io> Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com> * Fix price format (#1310) * Add limit price and valid to/filled date. * Add limit price and valid to/filled date. * Fixed type of getLimitPrice utils function * Execution price WIP. * Styled file for cleanup. * Styled file for cleanup. * Fix grid on mobile (Safari). * comment out getExecutedPrice * Expired order strike through. * Unfillable faq link external. * Price functions for Recent History (#1289) * Add bignumber, so library matches our dex-js * Add price utils * Refactor transaction summary * Change todo * Rename variable to executionPrice. * Delete comment * Remove comments and improve doc * Fix path and default value * Add datatype for api additional data (#1290) # Summary Continues #1289, Augment the order datatype so we can have the executed volumes. Adds the datatype where we can save the API information It also makes use of this data in the recent history. ## Not included Saving the actual data. Co-authored-by: biocom <michel@gnosis.pm> * Correction of buy/sell prices. * Close walletModal on connection success * fix price format * Clean console.log * Clean console.log * Price invert fix. * Orders panel execution price (#1309) * Fix decimals bug * Moved additional info to BaseOrder, everything is serializable * Added additional info to order fullfilment type * Passing along additional info when fulfillig order * Storing additional info on order obj Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io> * Style execution price. * Fix transaction style for longer digits. Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com> * Price out of market iteration 2. (#1346) * Fix Safari sidebar style issue. Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> Co-authored-by: David <david.sato64@gmail.com> Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io> Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com>

Click to copy move.

c00ce53

fairlighteth commented Aug 17, 2021

View reviewed changes

fairlighteth requested review from alfetopito, anxolin, elena-zh and MareenG August 17, 2021 13:38

Icon wrapper remove.

73f0d4e

fairlighteth requested a review from W3stside August 17, 2021 14:07

fairlighteth changed the title ~~Orders Sidebar -> Click to copy move.~~ Orders Sidebar --> Click to copy move. Aug 17, 2021

MareenG reviewed Aug 17, 2021

View reviewed changes

Merge branch 'orders-panel-1' of gno.github.com:gnosis/cowswap into o…

2d3419b

…rders-panel-8

MareenG mentioned this pull request Aug 17, 2021

Orders Sidebar --> Slide in effect. #1270

Merged

elena-zh reviewed Aug 17, 2021

View reviewed changes

elena-zh mentioned this pull request Aug 18, 2021

[Mobile] Issues with bottom bar: hidden menu/truncated icons #1275

Closed

Merge branch 'orders-panel-1' of gno.github.com:gnosis/cowswap into o…

6d6f333

…rders-panel-8

Mobile header fixes.

1eb0417

elena-zh mentioned this pull request Aug 18, 2021

[Mobile]- Network not displayed XDai/Rinkeby #1168

Closed

alfetopito approved these changes Aug 18, 2021

View reviewed changes

Re-factor Copy component.

d22769f

elena-zh approved these changes Aug 19, 2021

View reviewed changes

MareenG approved these changes Aug 19, 2021

View reviewed changes

fairlighteth merged commit 52d52e0 into orders-panel-1 Aug 20, 2021

alfetopito deleted the orders-panel-8 branch August 20, 2021 14:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Orders Sidebar --> Click to copy move. #1269

Orders Sidebar --> Click to copy move. #1269

fairlighteth commented Aug 17, 2021

fairlighteth Aug 17, 2021

alfetopito Aug 17, 2021

fairlighteth Aug 17, 2021

alfetopito Aug 17, 2021

github-actions bot commented Aug 17, 2021

MareenG left a comment

elena-zh commented Aug 17, 2021

elena-zh left a comment

elena-zh commented Aug 17, 2021

fairlighteth commented Aug 17, 2021

elena-zh commented Aug 18, 2021

fairlighteth commented Aug 18, 2021

elena-zh commented Aug 18, 2021

fairlighteth commented Aug 19, 2021

elena-zh left a comment

MareenG commented Aug 19, 2021

fairlighteth commented Aug 20, 2021

Orders Sidebar --> Click to copy move. #1269

Orders Sidebar --> Click to copy move. #1269

Conversation

fairlighteth commented Aug 17, 2021

Summary

fairlighteth Aug 17, 2021

Choose a reason for hiding this comment

alfetopito Aug 17, 2021

Choose a reason for hiding this comment

fairlighteth Aug 17, 2021

Choose a reason for hiding this comment

alfetopito Aug 17, 2021

Choose a reason for hiding this comment

github-actions bot commented Aug 17, 2021

MareenG left a comment

Choose a reason for hiding this comment

elena-zh commented Aug 17, 2021

elena-zh left a comment

Choose a reason for hiding this comment

elena-zh commented Aug 17, 2021

fairlighteth commented Aug 17, 2021

elena-zh commented Aug 18, 2021

fairlighteth commented Aug 18, 2021

elena-zh commented Aug 18, 2021

fairlighteth commented Aug 19, 2021

elena-zh left a comment

Choose a reason for hiding this comment

MareenG commented Aug 19, 2021

fairlighteth commented Aug 20, 2021