[No QA][TS migration] Migrate 'Clipboard' lib to TypeScript

[teneeto]

Details

This change is made to migrate src/libs/Clipboard/index.native.js and src/libs/Clipboard/index.js lib files to TS

Fixed Issues

$: 24887
PROPOSAL: 24887

Tests

1. On mobile devices - Tap and hold on text to copy.

2. TAP on Copy to clipboard from the bottom sheet.

3. Confirm that the text is copied with a green check icon and text Copied!

4. press and hold any input field to paste copied text - to confirm that text was copied to clipboard.

5. For web or hoverable screen, hover any text and click on the copy icon.
   6 paste text into any input field or text area to confirm that text was copied to clipboard.

• Verify that no errors appear in the JS console

Offline tests

1. On mobile devices - Tap and hold on text to copy.

2. TAP on Copy to clipboard from the bottom sheet.

3. Confirm that the text is copied with a green check icon and text Copied!

4. press and hold any input field to paste copied text - to confirm that text was copied to clipboard.

5. For web or hoverable screen, hover any text and click on the copy icon.
   6 paste text into any input field or text area to confirm that text was copied to clipboard.

QA Steps

1. On mobile devices - Tap and hold on text to copy.

2. TAP on Copy to clipboard from the bottom sheet.

3. Confirm that the text is copied with a green check icon and text Copied!

4. press and hold any input field to paste copied text - to confirm that text was copied to clipboard.

5. For web or hoverable screen, hover any text and click on the copy icon.
   6 paste text into any input field or text area to confirm that text was copied to clipboard.

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Screen.Recording.2023-10-04.at.14.05.22.mov

Mobile Web - Chrome

Screen.Recording.2023-10-04.at.14.04.15.mov

Mobile Web - Safari

Screen.Recording.2023-10-04.at.14.02.18.mov

Desktop

Screen.Recording.2023-10-04.at.13.59.58.mov

iOS

Screen.Recording.2023-10-04.at.13.51.53.mov

Android

Screen.Recording.2023-10-06.at.05.58.47.mov

[fvlvte]

Left comments about JSDoc, everything else LGTM.

[melvin-bot]

@Julesssss Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[Julesssss]

Hey @sobitneupane, could you please review this PR? I assigned you here, but if you'd rather I assign someone else, no worries!

[fabioh8010]

LGTM after addressing comments

[fabioh8010]

@teneeto We have lint errors now.

[teneeto]

@teneeto We have lint errors now.

@fabioh8010 fixing now.

[teneeto]

@teneeto We have lint errors now.

@fabioh8010 fixing now.

Done.

[fabioh8010]

@Julesssss @sobitneupane The PR is ready to review again!

[sobitneupane]

@teneeto Could you please resolve the merge conflict?

[teneeto]

@Julesssss @sobitneupane can we take a look at this again?.

[Julesssss]

Code seems fine, but it would be great to get an answer to my question here first

[Julesssss]

Also, @sobitneupane could you please complete the checklist now? Thanks

[teneeto]

Code seems fine, but it would be great to get an answer to my question here first

Hey @Julesssss, Sorry about that. Let me drop a comment there.

[sobitneupane]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2023-11-03.at.18.54.09.mov

Android: mWeb Chrome

Screen.Recording.2023-11-03.at.18.34.29.mov

iOS: Native

Screen.Recording.2023-11-03.at.18.24.34.mov

iOS: mWeb Safari

Screen.Recording.2023-11-03.at.18.22.48.mov

MacOS: Chrome / Safari

Screen.Recording.2023-11-03.at.18.16.08.mov

MacOS: Desktop

Screen.Recording.2023-11-03.at.18.29.13.mov

[melvin-bot]

🎯 @sobitneupane, thanks for reviewing and testing this PR! 🎉

An E/App issue has been created to issue payment here: #30841.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

Name	Duration
App start TTI	1079.422 ms → 1244.749 ms (+165.327 ms, +15.3%) 🔴
App start runJsBundle	739.644 ms → 850.067 ms (+110.423 ms, +14.9%) 🔴

Show details

Name	Duration
App start TTI	Baseline Mean: 1079.422 ms Stdev: 30.255 ms (2.8%) Runs: 1026.4855109993368 1029.2353949993849 1036.9511190000921 1038.3552480004728 1038.466569000855 1041.3862599991262 1042.168655000627 1047.3883769996464 1047.5179999992251 1050.5974819995463 1054.4328230004758 1054.8901049997658 1055.2114669997245 1055.3429860007018 1055.879708999768 1056.2871930003166 1056.7567510008812 1058.0398510005325 1058.2566279992461 1060.4086320009083 1063.3460779991 1065.9193220008165 1067.3447099998593 1068.583660999313 1070.3812879994512 1070.453716000542 1071.0544249992818 1072.1905150003731 1072.3849369995296 1072.8275910001248 1073.7338759992272 1073.7768089994788 1073.8065269999206 1075.1002750005573 1078.2194699998945 1079.087139999494 1087.1026440002024 1088.0028300005943 1088.08187700063 1089.5181900002062 1091.9523949995637 1092.537750000134 1092.6697760000825 1094.145441999659 1097.9077499993145 1101.797026000917 1102.0626379996538 1105.0609230007976 1111.6838060002774 1112.0901580005884 1116.6028250008821 1116.9324559997767 1118.0021379999816 1119.6876589991152 1122.3479159995914 1127.2059690002352 1137.5733599998057 1137.9176189992577 1148.0657320003957 1154.0843199994415 Current Mean: 1244.749 ms Stdev: 47.686 ms (3.8%) Runs: 1132.4413540000096 1143.1560960002244 1171.2225770000368 1173.0191470002756 1179.0458129998296 1180.222326000221 1181.7836750000715 1185.1324079995975 1186.9905869998038 1202.5788869997486 1206.2257439997047 1206.6945489998907 1207.5915810000151 1210.417008000426 1212.1543340003118 1213.4557389998809 1215.1078519998118 1216.1973470002413 1217.9793050000444 1218.1477899998426 1220.3049929998815 1223.2852039998397 1230.6248169997707 1231.9719139998779 1232.6688160002232 1232.901736999862 1233.2881110003218 1233.650275000371 1236.1439600000158 1236.8335130000487 1243.203191000037 1246.2806169996038 1248.4188160002232 1250.014580000192 1253.8171530002728 1254.7641599997878 1256.109264000319 1259.770054999739 1261.3777780001983 1262.3508200002834 1268.96064999979 1270.8366710003465 1275.462175999768 1276.9571299999952 1279.0557509995997 1284.4410079997033 1287.2631670003757 1287.9272609995678 1289.1954849995673 1294.769665000029 1295.0620569996536 1295.221131999977 1297.4855460003018 1307.7176299998537 1312.1380639998242 1323.1534740002826 1327.1938869999722 1328.2847750000656 1337.5849500000477 1338.8821980003268
App start runJsBundle	Baseline Mean: 739.644 ms Stdev: 22.409 ms (3.0%) Runs: 704 706 709 712 714 716 718 718 718 719 721 721 721 723 724 725 725 725 726 726 727 727 728 728 728 729 729 731 734 734 735 736 737 737 738 740 740 742 743 743 747 751 751 752 754 757 760 763 765 767 767 769 770 772 779 779 784 792 803 Current Mean: 850.067 ms Stdev: 37.695 ms (4.4%) Runs: 773 784 786 798 798 799 801 805 812 813 814 816 817 819 822 826 827 829 829 829 830 833 835 838 838 839 840 840 845 846 847 849 850 851 853 855 860 864 868 868 870 871 872 872 875 876 878 881 881 888 889 891 894 895 902 912 917 927 930 937

Meaningless Changes To Duration

Show entries

Name	Duration
App start nativeLaunch	20.807 ms → 22.593 ms (+1.786 ms, +8.6%)
App start regularAppStart	0.018 ms → 0.016 ms (-0.002 ms, -12.2%)
Open Search Page TTI	717.355 ms → 705.836 ms (-11.519 ms, -1.6%)

Show details

Name	Duration
App start nativeLaunch	Baseline Mean: 20.807 ms Stdev: 1.191 ms (5.7%) Runs: 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 23 23 24 25 Current Mean: 22.593 ms Stdev: 2.116 ms (9.4%) Runs: 19 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 23 23 23 24 24 24 24 24 25 25 25 25 25 26 26 26 26 27 28 28
App start regularAppStart	Baseline Mean: 0.018 ms Stdev: 0.001 ms (7.7%) Runs: 0.01505500078201294 0.015461999922990799 0.015461999922990799 0.015665998682379723 0.0157880000770092 0.015829000622034073 0.016112999990582466 0.016154000535607338 0.016519999131560326 0.016520000994205475 0.016560999676585197 0.016682999208569527 0.016683001071214676 0.016764000058174133 0.01676500029861927 0.016805000603199005 0.016885999590158463 0.017007999122142792 0.017007999122142792 0.017048999667167664 0.0170499999076128 0.017131000757217407 0.017211999744176865 0.0172520000487566 0.01737399958074093 0.017455998808145523 0.017456000670790672 0.017496999353170395 0.01753699965775013 0.01753700152039528 0.017537999898195267 0.017537999898195267 0.017578000202775 0.017659999430179596 0.017781000584363937 0.017903000116348267 0.018066998571157455 0.018067000433802605 0.018067000433802605 0.018147999420762062 0.018147999420762062 0.018187999725341797 0.018188999965786934 0.018268998712301254 0.01839200034737587 0.01855499856173992 0.018596000969409943 0.018716998398303986 0.018717000260949135 0.019042998552322388 0.019206000491976738 0.019531000405550003 0.019937999546527863 0.02006000094115734 0.02006000094115734 0.020833000540733337 0.021118000149726868 0.02115900069475174 Current Mean: 0.016 ms Stdev: 0.001 ms (5.4%) Runs: 0.013915999792516232 0.013956000097095966 0.013996999710798264 0.0142000000923872 0.0143630001693964 0.014364000409841537 0.014485999941825867 0.014526000246405602 0.01460800040513277 0.014649000018835068 0.0147299999371171 0.01476999931037426 0.014852000400424004 0.014891999773681164 0.014933000318706036 0.015014000236988068 0.015095999464392662 0.015096000395715237 0.015135999768972397 0.015177999623119831 0.01521800085902214 0.015219000168144703 0.015298999845981598 0.015339999459683895 0.015339999459683895 0.015381000004708767 0.015421999618411064 0.015542999841272831 0.015625 0.015665999613702297 0.015666000545024872 0.015666000545024872 0.015706999227404594 0.01570700015872717 0.01574699953198433 0.0157880000770092 0.0157880000770092 0.0157880000770092 0.015868999995291233 0.01590999960899353 0.015910000540316105 0.015949999913573265 0.016032000072300434 0.016032000072300434 0.016112999990582466 0.016154000535607338 0.01623500045388937 0.01623500045388937 0.016397999599575996 0.01647899951785803 0.016560999676585197 0.016560999676585197 0.01664199959486723 0.017008000053465366 0.01713000051677227 0.017333999276161194 0.01749700028449297
Open Search Page TTI	Baseline Mean: 717.355 ms Stdev: 40.903 ms (5.7%) Runs: 648.5800780002028 649.3596200011671 655.5889889989048 658.5421139989048 658.7657470013946 661.0144039988518 664.9424239993095 667.3199060000479 667.6142580006272 668.5996089987457 673.0285240001976 674.2335209995508 681.6650389991701 681.973022999242 682.9276539999992 683.2609869986773 684.9846200011671 685.3496510013938 687.722535001114 692.835124000907 694.9740800000727 697.8229580000043 698.2178550008684 700.4254960007966 701.2844239994884 701.9697270002216 703.3308520000428 706.1363120004535 708.1405849996954 711.3305259998888 716.1966960001737 718.2914629988372 722.7982590012252 724.4700119998306 728.2628579996526 729.5512299984694 729.9582119993865 733.1297210007906 736.6462820004672 736.7621669992805 737.082845998928 737.8297940008342 738.7483729999512 739.6246750000864 740.1014000009745 744.004355000332 755.6289060004056 756.566407000646 760.5403649993241 762.2060149982572 762.6140139997005 766.0721039995551 767.7018229998648 768.7361660003662 772.2987069990486 772.3934329990298 772.9075109995902 784.0839450005442 789.0036209989339 790.6859949994832 811.8458660002798 Current Mean: 705.836 ms Stdev: 45.483 ms (6.4%) Runs: 628.5503750005737 631.4093019999564 636.4520269995555 639.5803229995072 640.0679129995406 641.1824139999226 646.1662999996915 647.4546309998259 652.205565999262 654.5649020001292 657.9275320004672 661.1306969998404 661.653646000661 665.8430989999324 669.8605139991269 670.8802089998499 672.6903079999611 674.6948649995029 679.2827150002122 680.9889730000868 685.6910000005737 686.4243569998071 688.1295579997823 691.5369060002267 695.0513920001686 695.9471850004047 699.5709640001878 700.0912680001929 701.0785730006173 701.6767580006272 702.5515950005502 702.5572919994593 703.9453940000385 706.3987640002742 708.4908849997446 711.2966719996184 715.487630000338 720.1926280008629 720.2471519997343 720.9436440002173 721.9643149999902 729.1298419991508 731.8574630003422 733.029257000424 735.2634680001065 736.7300220001489 737.0685229999945 741.6965340003371 741.9778249999508 742.8169759996235 743.8147789994255 746.4328209999949 752.6315919999033 768.0658770008013 772.9938570000231 779.8557130005211 780.0699459994212 780.7455249996856 783.8318680003285 812.6284999996424 813.5090739997104

[github-actions]

@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker.

[OSBotify]

🚀 Deployed to staging by https://github.com/Julesssss in version: 1.3.96-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.96-15 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.97-7 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅